@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
:root{--ink:#171717;--muted:#6f6a68;--line:#e6dfdc;--rose:#c88d7c;--rose-dark:#ad7263;--cream:#fffaf7;--green:#159447;--danger:#d84a3a;--shadow:0 12px 34px rgba(62,42,34,.08)}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:'Noto Sans JP',sans-serif;background:#fafafa}button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid #eee;padding:14px 20px}.topbar-inner{max-width:1180px;margin:auto;display:flex;align-items:center;gap:12px}.brand{font-weight:700;font-size:20px}.brand small{font-weight:400;color:#777}.spacer{flex:1}.btn{border:1px solid #d8d8d8;background:white;border-radius:12px;padding:10px 15px;font-weight:600}.btn.primary{background:#171717;color:white;border-color:#171717}.btn.rose{background:var(--rose);color:white;border-color:var(--rose)}.btn.danger{color:var(--danger)}.container{max-width:1180px;margin:28px auto;padding:0 18px}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.filters{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.pill{border:1px solid #d9d9d9;padding:9px 20px;border-radius:999px;background:white}.pill.active{background:#171717;color:white;border-color:#171717}.sort{display:flex;align-items:center;gap:10px;margin:12px 0 26px}.sort select,.field input,.field select{border:1px solid #ddd;border-radius:12px;padding:13px 14px;background:white;width:100%}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:22px}.card{background:white;border:1px solid #eee;border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}.cover{aspect-ratio:16/10;background:#eee;position:relative;overflow:hidden}.cover img{width:100%;height:100%;object-fit:cover}.status{position:absolute;right:14px;top:14px;background:white;border-radius:999px;padding:6px 12px;font-weight:700;color:var(--green)}.status.expired{color:#8b6e62}.status.private{color:#777}.card-body{padding:18px}.card-title{font-size:20px;font-weight:700;margin-bottom:6px}.meta{color:#666;margin:5px 0}.switchline{display:flex;align-items:center;gap:10px;margin:14px 0}.switch{width:54px;height:30px;border-radius:999px;background:#ddd;position:relative}.switch:after{content:'';width:24px;height:24px;background:white;position:absolute;top:3px;left:3px;border-radius:50%;transition:.2s;box-shadow:0 1px 4px #999}.switch.on{background:#16a34a}.switch.on:after{left:27px}.cover-select{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;margin:10px 0}.urlrow{display:grid;grid-template-columns:1fr auto auto;gap:8px;margin-top:12px}.urlbox{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid #e3e3e3;padding:11px;border-radius:11px;color:#777}.actions{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}.menu{position:absolute;z-index:50;background:white;border:1px solid #ddd;border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.15);padding:8px;min-width:230px}.menu button{display:block;width:100%;text-align:left;border:0;background:white;padding:13px;border-radius:10px}.menu button:hover{background:#f5f5f5}.menu .danger{color:var(--danger)}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:80;display:flex;align-items:center;justify-content:center;padding:18px}.modal{background:white;border-radius:24px;width:min(680px,100%);max-height:90vh;overflow:auto;padding:26px}.modal h2{margin:0 0 22px}.field{margin:16px 0}.field label{display:block;font-weight:700;margin-bottom:8px}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.progress{height:10px;border-radius:999px;background:#eee;overflow:hidden}.progress>div{height:100%;background:#222;width:0}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}.photo-item{position:relative;aspect-ratio:1/1;background:#eee;overflow:hidden;border-radius:9px}.photo-item img,.photo-item video{width:100%;height:100%;object-fit:cover}.photo-item.selected{outline:4px solid var(--rose)}.photo-item .check{position:absolute;right:7px;top:7px;background:white;border-radius:999px;padding:4px 7px;font-weight:700}.hero-img{width:100%;max-width:1000px;margin:0 auto;display:block}.customer{background:#fffaf7;min-height:100vh}.password-wrap{max-width:760px;margin:auto;text-align:center;padding:24px 18px 80px}.lock{width:84px;height:84px;border-radius:50%;background:#f3dfd8;margin:20px auto;display:grid;place-items:center;font-size:38px;color:var(--rose-dark)}.customer h1{font-weight:400;color:#9b756d;font-size:clamp(25px,5vw,42px)}.customer .lead{color:#9b756d;line-height:1.8}.password-box{max-width:580px;margin:28px auto}.password-box input{width:100%;padding:18px;border:1px solid #e7cfc7;border-radius:14px;text-align:center;font-size:18px;background:white}.big-rose{width:100%;padding:17px;border:0;border-radius:14px;background:var(--rose);color:white;font-size:18px;font-weight:700;margin-top:16px;box-shadow:0 10px 24px rgba(187,123,104,.2)}.album-page{background:#fff}.album-head{max-width:960px;margin:0 auto;padding:42px 18px;text-align:center}.album-head h1{color:#9b756d;font-weight:400}.chips{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:18px 0}.chip{border:1px solid #e8d3cc;border-radius:999px;padding:10px 18px;color:#8f6b63;background:white}.download-main{border:0;border-radius:999px;background:var(--rose);color:white;padding:15px 30px;font-weight:700}.album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:white}.album-grid .tile{position:relative;overflow:hidden;background:#eee;min-height:150px}.album-grid img,.album-grid video{display:block;width:100%;height:100%;object-fit:cover}.selectbar{position:sticky;top:0;z-index:20;background:white;border-bottom:1px solid #eee;padding:10px 16px;display:flex;align-items:center;gap:10px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#222;color:white;padding:11px 18px;border-radius:999px;z-index:200}.login-card{max-width:430px;margin:12vh auto;background:white;padding:28px;border-radius:22px;box-shadow:var(--shadow)}.login-card input{width:100%;padding:14px;border:1px solid #ddd;border-radius:12px;margin:14px 0}.empty{padding:40px;text-align:center;color:#777}.expired-box{max-width:650px;margin:12vh auto;text-align:center;padding:36px 24px}.expired-box h1{color:#8f6b63}.file-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}.file-choice{aspect-ratio:1;background:#eee;border-radius:10px;overflow:hidden;position:relative}.file-choice img{width:100%;height:100%;object-fit:cover}.file-choice button{position:absolute;inset:0;border:0;background:transparent}.file-choice.active{outline:4px solid var(--rose)}
@media(max-width:680px){.container{padding:0 10px}.cards{grid-template-columns:1fr}.topbar{padding:10px}.brand{font-size:17px}.hide-mobile{display:none}.grid2{grid-template-columns:1fr}.urlrow{grid-template-columns:1fr 1fr}.urlbox{grid-column:1/-1}.album-grid{grid-template-columns:repeat(2,1fr)}.album-grid .tile{min-height:180px}.modal{padding:20px;border-radius:20px}.customer h1{font-size:28px}.album-head{padding-top:24px}}

/* =========================================================
   Hapi Time Photo - 管理画面コンパクト表示
   管理画面のみを約65%程度の見た目に縮小
   お客様向けアルバム画面（.customer / .album-page）は変更しません
   ========================================================= */

.topbar,
.container,
.modal,
.menu,
.login-card {
  font-size: 12px;
}

.topbar {
  padding: 10px 16px;
}
.topbar-inner {
  gap: 8px;
}
.brand {
  font-size: 15px;
}

.btn {
  border-radius: 9px;
  padding: 7px 10px;
  font-size: 12px;
}
.pill {
  padding: 6px 14px;
  font-size: 12px;
}

.container {
  margin: 20px auto;
  padding: 0 14px;
}
.filters {
  gap: 7px;
  margin: 12px 0;
}
.sort {
  gap: 8px;
  margin: 8px 0 18px;
}
.sort select,
.field input,
.field select {
  border-radius: 9px;
  padding: 9px 10px;
  font-size: 12px;
}

.cards {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 15px;
}
.card {
  border-radius: 16px;
}
.card-body {
  padding: 12px;
}
.card-title {
  font-size: 15px;
  margin-bottom: 4px;
}
.meta {
  margin: 3px 0;
}
.status {
  right: 10px;
  top: 10px;
  padding: 4px 8px;
  font-size: 11px;
}
.switchline {
  gap: 7px;
  margin: 9px 0;
}
.switch {
  width: 40px;
  height: 22px;
}
.switch:after {
  width: 18px;
  height: 18px;
  top: 2px;
  left: 2px;
}
.switch.on:after {
  left: 20px;
}
.cover-select {
  gap: 7px;
  margin: 7px 0;
}
.urlrow {
  gap: 6px;
  margin-top: 8px;
}
.urlbox {
  padding: 8px;
  border-radius: 8px;
  font-size: 12px;
}
.actions {
  gap: 6px;
  margin-top: 8px;
}

.menu {
  border-radius: 13px;
  padding: 6px;
  min-width: 190px;
}
.menu button {
  padding: 9px;
  border-radius: 8px;
}
.modal {
  border-radius: 18px;
  padding: 18px;
}
.modal h2 {
  margin: 0 0 14px;
  font-size: 18px;
}
.field {
  margin: 11px 0;
}
.field label {
  margin-bottom: 5px;
}
.modal-foot {
  gap: 7px;
  margin-top: 16px;
}

.login-card {
  max-width: 380px;
  padding: 20px;
  border-radius: 16px;
}
.login-card input {
  padding: 10px;
  border-radius: 9px;
  margin: 10px 0;
  font-size: 12px;
}

@media(max-width:680px){
  .topbar,
  .container,
  .modal,
  .menu,
  .login-card {
    font-size: 12px;
  }
  .brand {
    font-size: 14px;
  }
  .card-title {
    font-size: 15px;
  }
}

/* =========================================================
   Hapi Time Photo - お客様アルバム表示調整
   PC: 5列 / Tablet: 4列 / Smartphone: 3列
   スマホは文字・ボタン類もコンパクト表示
   ========================================================= */

/* PC */
.album-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.album-grid .tile {
  min-height: 0;
  aspect-ratio: 1 / 1;
}

/* Tablet */
@media (max-width: 1024px) {
  .album-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Smartphone */
@media (max-width: 680px) {
  .album-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
  }

  .album-grid .tile {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  .album-head {
    padding: 20px 10px 18px;
  }

  .album-head h1 {
    font-size: 20px;
    margin: 8px 0 10px;
  }

  .chips {
    gap: 6px;
    margin: 10px 0;
  }

  .chip {
    padding: 6px 10px;
    font-size: 11px;
  }

  .download-main {
    padding: 10px 18px;
    font-size: 12px;
  }

  .album-head .btn,
  .selectbar .btn,
  .selectbar button {
    padding: 7px 10px;
    font-size: 11px;
  }

  .selectbar {
    padding: 7px 8px;
    gap: 6px;
    font-size: 11px;
  }

  .customer h1 {
    font-size: 22px;
  }

  .customer .lead {
    font-size: 12px;
    line-height: 1.65;
  }

  .password-wrap {
    padding: 18px 12px 50px;
  }

  .password-box {
    margin: 18px auto;
  }

  .password-box input {
    padding: 12px;
    font-size: 14px;
  }

  .big-rose {
    padding: 12px;
    font-size: 14px;
    margin-top: 12px;
  }
}


/* =========================================================
   Hapi Time Photo - お客様アルバム最終調整
   ・写真は元画像の縦横比のまま表示
   ・PC 5列 / Tablet 4列 / Smartphone 3列
   ・スマホ文字をさらにコンパクト化
   ※既存指定より確実に優先するため末尾 + !important
   ========================================================= */

/* 写真一覧：元画像の縦横比を維持 */
.album-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
  align-items: start !important;
}

.album-grid .tile {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
}

.album-grid .tile img,
.album-grid .tile video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
}

/* タブレット：4列 */
@media (max-width: 1024px) {
  .album-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* スマホ：3列 + 文字を小さく */
@media (max-width: 680px) {
  .album-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }

  .album-page,
  .customer {
    font-size: 11px !important;
  }

  .album-head {
    padding: 14px 8px 12px !important;
  }

  .album-head h1,
  .customer h1 {
    font-size: 18px !important;
    line-height: 1.35 !important;
    margin: 6px 0 8px !important;
  }

  .customer .lead,
  .album-head p {
    font-size: 11px !important;
    line-height: 1.55 !important;
  }

  .chips {
    gap: 4px !important;
    margin: 8px 0 !important;
  }

  .chip {
    padding: 5px 8px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  .download-main {
    padding: 9px 16px !important;
    font-size: 11px !important;
  }

  .album-head button,
  .album-head .btn,
  .selectbar,
  .selectbar button,
  .selectbar .btn {
    font-size: 10px !important;
  }

  .album-head button,
  .album-head .btn,
  .selectbar button,
  .selectbar .btn {
    padding: 6px 9px !important;
  }

  .selectbar {
    padding: 6px 7px !important;
    gap: 5px !important;
  }

  .password-box input {
    padding: 10px !important;
    font-size: 13px !important;
  }

  .big-rose {
    padding: 10px !important;
    font-size: 13px !important;
  }
}


/* Hapi Time Photo - mobile final override */
@media screen and (max-width: 1100px) {
  .album-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media screen and (max-width: 767px) {
  .album-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }
  .album-page, body.customer {
    font-size: 11px !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
  .album-head { padding: 14px 8px 12px !important; }
  .album-head h1, body.customer h1 {
    font-size: 18px !important;
    line-height: 1.35 !important;
    margin: 6px 0 8px !important;
  }
  body.customer .lead, .album-head p {
    font-size: 11px !important;
    line-height: 1.55 !important;
  }
  .chip {
    padding: 5px 8px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
  .download-main {
    padding: 9px 16px !important;
    font-size: 11px !important;
  }
  .album-head button, .album-head .btn,
  .selectbar, .selectbar button, .selectbar .btn {
    font-size: 10px !important;
  }
  .album-head button, .album-head .btn,
  .selectbar button, .selectbar .btn {
    padding: 6px 9px !important;
  }
}



/* =========================================================
   Hapi Time Photo - FINAL MOBILE FIX 2026-09-10
   ========================================================= */

/* Customer album: PC 5 / Tablet 4 / Mobile 3 */
.album-grid{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}
@media screen and (max-width:1100px){
  .album-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
}
@media screen and (max-width:767px){
  .album-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:2px !important;
  }
  .album-grid .tile{
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:auto !important;
  }
  .album-grid .tile img,
  .album-grid .tile video{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    aspect-ratio:auto !important;
  }

  /* Customer album text */
  body.customer,
  .album-page{font-size:10px !important;}
  .album-head{padding:10px 6px 10px !important;}
  .album-head h1,
  body.customer h1{
    font-size:16px !important;
    line-height:1.3 !important;
    margin:4px 0 6px !important;
  }
  .album-head p,
  body.customer .lead{
    font-size:10px !important;
    line-height:1.45 !important;
  }
  .chips{gap:3px !important;margin:6px 0 !important;}
  .chip{
    padding:4px 6px !important;
    font-size:9px !important;
  }
  .download-main{
    padding:7px 13px !important;
    font-size:10px !important;
  }
  .album-head .btn,
  .selectbar,
  .selectbar .btn,
  .selectbar button{
    font-size:9px !important;
  }
  .album-head .btn,
  .selectbar .btn,
  .selectbar button{
    padding:5px 7px !important;
  }

  /* Admin screen: much more compact on phones */
  body:not(.customer){font-size:9px !important;}
  .topbar{padding:6px 8px !important;}
  .topbar-inner{gap:5px !important;}
  .brand{font-size:11px !important;white-space:nowrap !important;}
  .brand small{font-size:9px !important;}
  .btn{
    padding:5px 7px !important;
    border-radius:7px !important;
    font-size:9px !important;
  }
  .container{
    margin:10px auto !important;
    padding:0 8px !important;
  }
  .container h1{
    font-size:20px !important;
    line-height:1.15 !important;
    margin:8px 0 2px !important;
  }
  .meta{font-size:9px !important;}
  .row{gap:6px !important;}
  .filters{
    gap:5px !important;
    margin:8px 0 !important;
    flex-wrap:nowrap !important;
  }
  .pill{
    padding:5px 8px !important;
    font-size:9px !important;
    white-space:nowrap !important;
  }
  .sort{
    gap:5px !important;
    margin:7px 0 10px !important;
    flex-wrap:nowrap !important;
    font-size:9px !important;
  }
  .sort select{
    padding:5px 7px !important;
    font-size:9px !important;
    min-width:0 !important;
  }
  .cards{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .card{
    border-radius:10px !important;
  }
  .cover{aspect-ratio:16/10 !important;}
  .status{
    right:5px !important;
    top:5px !important;
    padding:3px 5px !important;
    font-size:8px !important;
  }
  .card-body{padding:7px !important;}
  .card-title{
    font-size:11px !important;
    margin-bottom:2px !important;
  }
  .switchline{
    gap:4px !important;
    margin:5px 0 !important;
    font-size:9px !important;
  }
  .switch{
    width:30px !important;
    height:17px !important;
  }
  .switch:after{
    width:13px !important;
    height:13px !important;
    top:2px !important;
    left:2px !important;
  }
  .switch.on:after{left:15px !important;}
  .cover-select{
    grid-template-columns:1fr !important;
    gap:3px !important;
    margin:5px 0 !important;
    font-size:8px !important;
  }
  .cover-select select{
    width:100% !important;
    font-size:8px !important;
    padding:4px !important;
  }
  .urlrow{
    grid-template-columns:1fr 1fr !important;
    gap:4px !important;
    margin-top:5px !important;
  }
  .urlbox{
    grid-column:1/-1 !important;
    padding:4px !important;
    border-radius:5px !important;
    font-size:7px !important;
  }
  .actions{
    gap:4px !important;
    margin-top:5px !important;
    flex-wrap:wrap !important;
  }
  .actions .btn,
  .urlrow .btn{
    font-size:8px !important;
    padding:4px 5px !important;
  }

  .modal{
    padding:12px !important;
    border-radius:12px !important;
  }
  .modal h2{font-size:15px !important;margin-bottom:10px !important;}
  .field{margin:8px 0 !important;}
  .field label{font-size:9px !important;margin-bottom:4px !important;}
  .field input,.field select{
    padding:7px 8px !important;
    font-size:10px !important;
  }
}



/* =========================================================
   Hapi Time Photo - FORCE PHONE LAYOUT
   JavaScript adds html.ht-phone on actual phones, so these
   rules work even if the browser reports a wide viewport.
   ========================================================= */

html.ht-phone {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* ---------- Admin ---------- */
html.ht-phone body:not(.customer) {
  font-size: 9px !important;
}
html.ht-phone .topbar {
  padding: 6px 8px !important;
}
html.ht-phone .topbar-inner {
  gap: 5px !important;
}
html.ht-phone .brand {
  font-size: 11px !important;
  white-space: nowrap !important;
}
html.ht-phone .brand small {
  font-size: 9px !important;
}
html.ht-phone .btn {
  padding: 5px 7px !important;
  border-radius: 7px !important;
  font-size: 9px !important;
}
html.ht-phone .container {
  margin: 10px auto !important;
  padding: 0 8px !important;
}
html.ht-phone .container h1 {
  font-size: 20px !important;
  line-height: 1.15 !important;
  margin: 8px 0 2px !important;
}
html.ht-phone .meta {
  font-size: 9px !important;
}
html.ht-phone .row {
  gap: 6px !important;
}
html.ht-phone .filters {
  gap: 5px !important;
  margin: 8px 0 !important;
  flex-wrap: nowrap !important;
}
html.ht-phone .pill {
  padding: 5px 8px !important;
  font-size: 9px !important;
  white-space: nowrap !important;
}
html.ht-phone .sort {
  gap: 5px !important;
  margin: 7px 0 10px !important;
  flex-wrap: nowrap !important;
  font-size: 9px !important;
}
html.ht-phone .sort select {
  padding: 5px 7px !important;
  font-size: 9px !important;
  min-width: 0 !important;
}
html.ht-phone .cards {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
html.ht-phone .card {
  border-radius: 10px !important;
}
html.ht-phone .cover {
  aspect-ratio: 16 / 10 !important;
}
html.ht-phone .status {
  right: 5px !important;
  top: 5px !important;
  padding: 3px 5px !important;
  font-size: 8px !important;
}
html.ht-phone .card-body {
  padding: 7px !important;
}
html.ht-phone .card-title {
  font-size: 11px !important;
  margin-bottom: 2px !important;
}
html.ht-phone .switchline {
  gap: 4px !important;
  margin: 5px 0 !important;
  font-size: 9px !important;
}
html.ht-phone .switch {
  width: 30px !important;
  height: 17px !important;
}
html.ht-phone .switch:after {
  width: 13px !important;
  height: 13px !important;
  top: 2px !important;
  left: 2px !important;
}
html.ht-phone .switch.on:after {
  left: 15px !important;
}
html.ht-phone .cover-select {
  grid-template-columns: 1fr !important;
  gap: 3px !important;
  margin: 5px 0 !important;
  font-size: 8px !important;
}
html.ht-phone .cover-select select {
  width: 100% !important;
  font-size: 8px !important;
  padding: 4px !important;
}
html.ht-phone .urlrow {
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  margin-top: 5px !important;
}
html.ht-phone .urlbox {
  grid-column: 1 / -1 !important;
  padding: 4px !important;
  border-radius: 5px !important;
  font-size: 7px !important;
}
html.ht-phone .actions {
  gap: 4px !important;
  margin-top: 5px !important;
}
html.ht-phone .actions .btn,
html.ht-phone .urlrow .btn {
  font-size: 8px !important;
  padding: 4px 5px !important;
}

/* ---------- Customer album ---------- */
html.ht-phone .album-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 2px !important;
}
html.ht-phone .album-grid .tile {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
}
html.ht-phone .album-grid .tile img,
html.ht-phone .album-grid .tile video {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
}
html.ht-phone body.customer,
html.ht-phone .album-page {
  font-size: 10px !important;
}
html.ht-phone .album-head {
  padding: 10px 6px !important;
}
html.ht-phone .album-head h1,
html.ht-phone body.customer h1 {
  font-size: 16px !important;
  line-height: 1.3 !important;
  margin: 4px 0 6px !important;
}
html.ht-phone .chip {
  padding: 4px 6px !important;
  font-size: 9px !important;
}
html.ht-phone .download-main {
  padding: 7px 13px !important;
  font-size: 10px !important;
}
html.ht-phone .album-head .btn,
html.ht-phone .selectbar,
html.ht-phone .selectbar .btn,
html.ht-phone .selectbar button {
  font-size: 9px !important;
}


/* v5: center shorter landscape photos vertically inside each grid row */
.album-grid .tile{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.album-grid .tile img,
.album-grid .tile video{
  align-self:center !important;
}

/* Download size chooser */
.download-size-backdrop{
  position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.42);
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.download-size-box{
  width:min(420px,100%);background:#fff;border-radius:22px;padding:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.2);text-align:center;
}
.download-size-box h2{margin:0 0 5px;font-size:21px}
.download-size-box p{margin:0 0 15px;color:#777;font-size:13px}
.download-size-box button{
  width:100%;border:1px solid #ead8d2;background:#fff;border-radius:14px;
  padding:13px 15px;margin:7px 0;display:flex;align-items:center;gap:14px;text-align:left;
}
.download-size-box button b{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:#c88d7c;color:white;font-size:16px;flex:0 0 auto;
}
.download-size-box button span{font-size:14px;color:#5f514d}
.download-size-box button.cancel{justify-content:center;color:#777;border:0;background:#f7f7f7;text-align:center}
@media(max-width:767px){
  .download-size-box{padding:16px;border-radius:18px}
  .download-size-box h2{font-size:16px}
  .download-size-box p{font-size:10px}
  .download-size-box button{padding:9px 10px;margin:5px 0}
  .download-size-box button b{width:31px;height:31px;font-size:13px}
  .download-size-box button span{font-size:11px}
}

/* v5.1 download guide link */
.download-guide-row{margin-top:10px;text-align:center}
.download-guide-link{
  display:inline-block;
  color:#8f6b63;
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:3px;
}
@media(max-width:767px){
  .download-guide-row{margin-top:7px}
  .download-guide-link{font-size:9px}
}


/* v5.2: mixed portrait/landscape alignment */
.album-grid{
  align-items:stretch !important;
}
.album-grid .tile{
  display:grid !important;
  place-items:center !important;
  align-self:stretch !important;
  min-height:0 !important;
  background:#fff !important;
}
.album-grid .tile img,
.album-grid .tile video{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:auto !important;
}