/* ===================== TOKENS ===================== */
:root{
  --black:#090909;--ink:#191713;--gold:#c79d43;--gold2:#f2d58e;
  --cream:#faf7f0;--soft:#f1eadc;--muted:#837b6e;--line:#e8dfd0;--white:#fff;
  --sidebar-w:248px;
}
*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent}
html.auth-checking body{visibility:hidden}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:'DM Sans',sans-serif;min-height:100vh;
}
button{font-family:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ===================== SHELL ===================== */
.shell{min-height:100vh;position:relative}
.main{padding-bottom:92px}

/* ===================== SIDEBAR (hidden on mobile/tablet) ===================== */
.sidebar{display:none}

/* ===================== TOP HERO ===================== */
.top{
  background:var(--black);color:#fff;padding:20px 20px 26px;
  position:relative;overflow:hidden;
}
.top:after{
  content:'';position:absolute;width:270px;height:270px;border:1px solid #7f642d;
  border-radius:50%;right:-152px;top:-135px;opacity:.55;
}
.topbar{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
.brand-mobile{display:flex;align-items:center}
.logo{height:30px;width:auto;object-fit:contain}
.topbar-title{display:none;margin:0;font:600 17px 'Playfair Display',serif}
.top-actions{margin-left:auto;position:relative}
.notification{
  width:37px;height:37px;border:1px solid #52472d;border-radius:50%;
  display:grid;place-items:center;position:relative;background:transparent;color:#fff;cursor:pointer;
}
.notification .dot{
  position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold);
  right:8px;top:8px;border:1px solid #111;transition:opacity .15s;
}
.notification .dot.hide{opacity:0}

.notif-panel{
  position:fixed;top:64px;right:16px;z-index:60;width:280px;background:#171512;
  border:1px solid #34301f;border-radius:14px;padding:14px;box-shadow:0 20px 40px #0008;
  display:none;flex-direction:column;gap:10px;max-height:70vh;
}
#notifList{overflow-y:auto;max-height:calc(70vh - 50px)}
.notif-panel.show{display:flex}
.notif-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.notif-title{font-size:12px;letter-spacing:.04em;color:#c9bd9b}
.notif-clear{border:0;background:none;color:#a89e88;font:700 10px inherit;cursor:pointer;padding:2px;letter-spacing:.02em}
.notif-clear:hover{color:var(--gold2)}
.notif-item{display:flex;gap:10px;align-items:flex-start;padding-top:9px;border-top:1px solid #2b2719;position:relative}
.notif-item:first-of-type{border-top:0;padding-top:9px}
.notif-item i{color:var(--gold2);flex-shrink:0;margin-top:2px}
.notif-item b{font-size:12px;display:block}
.notif-item span{font-size:11px;color:#a89e88;display:block;margin-top:2px}
.notif-item .unread-dot{position:absolute;right:0;top:12px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.notif-empty{font-size:12px;color:#a89e88;text-align:center;padding:14px 0}

.welcome{position:relative;z-index:1;margin-top:22px}
.welcome small{color:#d6c8aa;font-size:12px;letter-spacing:.03em}
.welcome h1{font:600 27px/1.15 'Playfair Display',serif;margin:6px 0 0;letter-spacing:-.6px}
.welcome h1 em{color:var(--gold2);font-style:normal}

.vehicle{
  position:relative;z-index:1;display:flex;align-items:center;gap:12px;margin-top:22px;
  background:#201f1b;border:1px solid #39352a;border-radius:14px;padding:11px;width:100%;
  cursor:pointer;color:inherit;text-align:left;
}
.vehicle-icon{height:40px;width:40px;flex-shrink:0;display:grid;place-items:center;border-radius:10px;background:#3b311d;color:var(--gold2)}
.vehicle-text{min-width:0}
.vehicle b{font-size:12px;display:block}
.vehicle span{font-size:11px;color:#b2aa9c;display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vehicle .chev{margin-left:auto;color:#d5ba7b;flex-shrink:0}

/* ===================== CONTENT ===================== */
.content{padding:25px 20px 4px}
.view{display:none}
.view.active{display:block}

.section-head{display:flex;align-items:center;justify-content:space-between;margin:0 1px 14px;gap:10px}
.section-head h2{font-size:16px;margin:0;letter-spacing:-.3px}
.link-btn{background:none;border:0;color:#9d7828;font:700 12px inherit;padding:3px;cursor:pointer}
.pill-btn{
  display:flex;align-items:center;gap:5px;background:var(--ink);color:#fff;border:0;
  border-radius:20px;padding:8px 13px;font:700 11px inherit;cursor:pointer;flex-shrink:0;
}

/* ===================== APPOINTMENT ===================== */
.appointment{background:white;border:1px solid var(--line);border-radius:17px;padding:16px;box-shadow:0 7px 18px #3d2c0b08}
.appt-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.status{border-radius:20px;padding:5px 8px;font-size:9px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.status.confirmed{background:#eaf6ef;color:#397655}
.status.progress{background:#fbf1de;color:#9a711d}
.status.done{background:#eef0f3;color:#5c6470}
.appt-top time{color:var(--muted);font-size:11px;font-weight:600;text-align:right}
.appt-info{display:flex;align-items:center;gap:12px;margin-top:16px}
.service-icon{width:43px;height:43px;flex-shrink:0;border-radius:12px;background:#f9f0db;display:grid;place-items:center;color:#b38429}
.appt-info b{font-size:13px;display:block}
.appt-info span{font-size:11px;color:var(--muted);display:block;margin-top:4px}
.track{
  margin-top:15px;padding-top:13px;border-top:1px solid #f0ece4;display:flex;align-items:center;
  justify-content:space-between;color:#967229;font-size:12px;font-weight:700;cursor:pointer;background:none;border-left:0;border-right:0;border-bottom:0;width:100%;
}
.empty-appt{
  background:#fff;border:1px dashed var(--line);border-radius:17px;padding:24px 16px;text-align:center;color:var(--muted);
}
.empty-appt b{display:block;color:var(--ink);font-size:13px;margin-bottom:4px}
.empty-appt button{margin-top:12px;border:0;background:var(--ink);color:#fff;border-radius:10px;padding:9px 14px;font:700 12px inherit;cursor:pointer}

/* ===================== SERVICES ===================== */
.services{display:flex;gap:11px;overflow-x:auto;padding:0 0 4px;scroll-snap-type:x mandatory}
.services::-webkit-scrollbar{display:none}
.service{
  min-width:130px;flex:1;border-radius:15px;padding:14px;background:#fff;border:1px solid var(--line);
  scroll-snap-align:start;cursor:pointer;text-align:left;
}
.service .mini-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:#f9f1df;color:#ad7d24}
.service b{display:block;font-size:12px;margin-top:14px}
.service span{font-size:10px;color:var(--muted);display:block;margin-top:4px}
.service .price{font-size:10px;color:var(--muted);display:block;margin-top:6px;font-weight:700}
.service.featured{background:#1a1916;color:white;border-color:#1a1916}
.service.featured .mini-icon{background:#41361f;color:#f2d58e}
.service.featured span{color:#c5bdad}

/* ===================== OFFER / REWARDS TEASER ===================== */
.offer{
  margin-top:25px;background:linear-gradient(105deg,#c6a052,#e7c77c);border-radius:17px;padding:17px;
  position:relative;overflow:hidden;min-height:116px;
}
.offer:after{content:'✦';position:absolute;font:110px Georgia;color:#f8e2a9;right:-3px;top:-28px;opacity:.45}
.offer small{font-size:10px;font-weight:700;letter-spacing:.1em;color:#71541a}
.offer b{display:block;font:700 18px 'Playfair Display';margin-top:7px}
.offer p{font-size:11px;margin:6px 0;color:#5e491e}
.offer button{position:relative;z-index:1;margin-top:8px;border:0;background:#1c1a15;color:#fff;border-radius:8px;padding:8px 10px;font:700 10px inherit;cursor:pointer}

.rewards{
  margin-top:16px;display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);
  border-radius:15px;padding:13px;width:100%;cursor:pointer;text-align:left;color:inherit;
}
.reward-medal{width:40px;height:40px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:#f9edcf;color:#ab7d24}
.rewards-text{min-width:0}
.rewards b{font-size:12px;display:block}
.rewards span{font-size:10px;color:var(--muted);display:block;margin-top:4px}
.rewards strong{margin-left:auto;color:#a07722;font-size:13px;flex-shrink:0}

/* ===================== BOOKINGS VIEW ===================== */
.tabs{display:flex;gap:8px;margin-bottom:16px}
.tab{
  border:1px solid var(--line);background:#fff;border-radius:20px;padding:8px 15px;font:700 12px inherit;
  color:var(--muted);cursor:pointer;
}
.tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.tab-panel{display:flex;flex-direction:column;gap:12px}
.tab-panel[hidden]{display:none}
.past-item{
  display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px;
}
.past-item .service-icon{background:#f1eedd;color:#8c8060}
.past-item b{font-size:13px;display:block}
.past-item span{font-size:11px;color:var(--muted);display:block;margin-top:3px}
.past-item button{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 10px;font:700 11px inherit;cursor:pointer;flex-shrink:0}

/* ===================== REWARDS VIEW ===================== */
.rewards-hero{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;gap:18px;align-items:center;
}
.ring-wrap{position:relative;width:96px;height:96px;flex-shrink:0}
.ring{width:96px;height:96px;transform:rotate(-90deg)}
.ring-track{fill:none;stroke:#f1eadc;stroke-width:10}
.ring-fill{fill:none;stroke:#c79d43;stroke-width:10;stroke-linecap:round;stroke-dasharray:326.7;transition:stroke-dashoffset 1s ease}
.ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-label strong{font:700 22px 'Playfair Display',serif}
.ring-label span{font-size:9px;color:var(--muted)}
.rewards-hero-text b{font-size:14px;display:block;margin-bottom:6px}
.rewards-hero-text p{font-size:12px;color:var(--muted);margin:0;line-height:1.5}

.tiers-hint{font-size:11px;color:var(--muted);margin:-8px 0 12px}
.tiers{display:grid;gap:12px}
.tier-card{
  background:#fff;border:1px solid var(--line);border-radius:15px;padding:14px;
  text-align:left;font:inherit;cursor:pointer;width:100%;display:block;
}
.tier-card.active-tier{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.tier-card:hover{border-color:#d8cbaa}
.tier-price{display:block;font:700 12px inherit;color:#9d7828;margin-bottom:8px}
.tier-badge{display:inline-flex;align-items:center;gap:6px;font:700 11px inherit;padding:5px 10px;border-radius:20px;margin-bottom:10px}
.tier-badge.bronze{background:#f3e6d8;color:#8a5a2b}
.tier-badge.silver{background:#eceff2;color:#4b5563}
.tier-badge.gold{background:#faf0d1;color:#8a6a0f}
.tier-card ul{margin:0;padding-left:18px;color:var(--muted);font-size:12px;line-height:1.9}

.history-list{display:flex;flex-direction:column;gap:10px}
.history-item{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px}
.history-item i{color:#ab7d24;flex-shrink:0}
.history-item b{font-size:12px;display:block}
.history-item span{font-size:11px;color:var(--muted);display:block;margin-top:2px}

/* ===================== PROFILE VIEW ===================== */
.profile-card{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--gold2);display:grid;place-items:center;font:700 13px 'Playfair Display',serif;flex-shrink:0}
.avatar.big{width:54px;height:54px;font-size:16px}
.profile-card div b{font-size:14px;display:block}
.profile-card div span{font-size:11px;color:var(--muted);display:block;margin-top:3px}

.vehicle-list{display:flex;flex-direction:column;gap:10px}
.vehicle-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}
.vehicle-row .vehicle-icon{background:#f3ecd8;color:#ab7d24}
.vehicle-row b{font-size:13px;display:block}
.vehicle-row span{font-size:11px;color:var(--muted);display:block;margin-top:3px}
.vehicle-row .active-badge{margin-left:auto;font-size:9px;font-weight:700;color:#397655;background:#eaf6ef;border-radius:20px;padding:4px 8px;flex-shrink:0}

.settings-list{display:flex;flex-direction:column;gap:8px}
.settings-item{
  display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:13px;font:600 13px inherit;color:var(--ink);cursor:pointer;text-align:left;
}
.settings-item[hidden]{display:none}
.settings-item .chev{margin-left:auto;color:#c3bba8}
.settings-item.danger{color:#b23b3b}

/* ===================== BOTTOM NAV ===================== */
.nav{
  position:fixed;bottom:0;left:0;right:0;height:76px;background:#fff;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-around;padding:7px 11px 10px;z-index:10;
}
.nav-link{border:0;background:transparent;color:#989184;display:grid;gap:4px;place-items:center;font:600 10px inherit;cursor:pointer;min-width:55px}
.nav-link.active{color:#9a711d}
.nav .book{
  width:51px;height:51px;transform:translateY(-20px);background:#b68a30;color:white;border-radius:50%;
  box-shadow:0 7px 13px #a5792550;display:grid;place-items:center;border:0;cursor:pointer;
}

/* ===================== SHEETS (modals) ===================== */
.sheet{position:fixed;inset:0;background:#0008;z-index:50;display:none;align-items:end;justify-content:center}
.sheet.show{display:flex}
.sheet-box{background:#fff;width:min(430px,100%);max-height:88vh;overflow-y:auto;border-radius:24px 24px 0 0;padding:12px 20px 28px;animation:up .25s ease-out}
.grab{width:38px;height:4px;background:#ddd6c9;border-radius:4px;margin:0 auto 14px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.step-indicator{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.03em}
.sheet-back,.sheet-close{border:0;background:#f1eadc;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.sheet h2{font:600 22px 'Playfair Display';margin:10px 0 0}
.sheet p{color:var(--muted);font-size:12px;margin:6px 0 18px}
.book-step[hidden]{display:none}

.choices{display:grid;gap:9px}
.choice{border:1px solid var(--line);background:white;border-radius:11px;padding:12px;text-align:left;font:600 13px inherit;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px}
.choice:hover,.choice.selected{border-color:#bd9138;background:#fffaf0}
.choice span{color:var(--muted);font-size:11px;flex-shrink:0}
.confirm{border:0;border-radius:11px;width:100%;padding:13px;background:#171613;color:#fff;font:700 13px inherit;margin-top:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
.confirm:disabled{opacity:.4;cursor:not-allowed}
.ghost-btn{
  width:100%;border:1px dashed var(--line);background:transparent;border-radius:11px;padding:11px;margin-top:12px;
  font:700 12px inherit;color:#9d7828;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;
}

.date-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px}
.date-row::-webkit-scrollbar{display:none}
.date-chip{
  flex-shrink:0;width:56px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 0;
  text-align:center;cursor:pointer;
}
.date-chip small{display:block;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.date-chip b{display:block;font-size:15px;margin-top:4px}
.date-chip.selected{background:var(--ink);border-color:var(--ink);color:#fff}
.date-chip.selected small{color:#c9bd9b}

.time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.time-chip{border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 4px;text-align:center;font:600 12px inherit;cursor:pointer}
.time-chip.selected{background:var(--ink);border-color:var(--ink);color:#fff}
.time-chip:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed}

.summary-card{background:#faf7f0;border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:6px}
.summary-row{display:flex;align-items:center;gap:10px;font-size:13px;padding:9px 0;border-bottom:1px solid #ece5d5}
.summary-row:last-of-type{border-bottom:0}
.summary-row i{color:#ab7d24;flex-shrink:0}
.summary-row.total{display:flex;justify-content:space-between;font-size:13px}
.summary-row.total b{font-size:15px}

.success-icon{width:52px;height:52px;border-radius:50%;background:#eaf6ef;color:#397655;display:grid;place-items:center;margin:6px auto 0}

.add-vehicle-form{display:grid;gap:9px;margin-top:6px}
.add-vehicle-form[hidden]{display:none}
.add-vehicle-form input{border:1px solid var(--line);border-radius:10px;padding:11px;font:600 13px inherit;background:#fff}
.add-vehicle-form input:focus-visible{outline:2px solid var(--gold)}

.timeline{display:flex;flex-direction:column;margin-top:16px}
.tl-item{display:flex;gap:12px}
.tl-marker{display:flex;flex-direction:column;align-items:center}
.tl-dot{width:26px;height:26px;border-radius:50%;background:#f1eadc;color:#a89a76;display:grid;place-items:center;flex-shrink:0}
.tl-dot.done{background:#171613;color:var(--gold2)}
.tl-dot.current{background:var(--gold);color:#171613}
.tl-line{width:2px;flex:1;background:#ece5d5;min-height:26px}
.tl-line.done{background:#171613}
.tl-content{padding-bottom:22px;padding-top:2px}
.tl-content b{font-size:13px;display:block}
.tl-content span{font-size:11px;color:var(--muted);display:block;margin-top:2px}

/* ===================== TOAST ===================== */
.toast{
  position:fixed;left:50%;bottom:100px;transform:translate(-50%,20px);background:#171613;color:#fff;
  padding:11px 18px;border-radius:30px;font-size:12px;font-weight:600;z-index:100;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;box-shadow:0 12px 24px #0004;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@keyframes up{from{transform:translateY(80px)}to{transform:none}}

/* ===================== TABLET (>=700px): wider content, grid services ===================== */
@media(min-width:700px){
  .content{max-width:640px;margin:0 auto;padding:30px 24px 4px}
  .top{max-width:100%}
  .top:after{display:none}
  .services{overflow-x:visible;display:grid;grid-template-columns:repeat(3,1fr)}
  .time-grid{grid-template-columns:repeat(4,1fr)}
  .tiers{grid-template-columns:repeat(3,1fr)}
  .sheet{align-items:center}
  .sheet-box{border-radius:24px;max-width:460px}
}

/* ===================== LAPTOP / DESKTOP (>=1024px): sidebar shell ===================== */
@media(min-width:1024px){
  .shell{display:flex}
  .nav{display:none}

  .sidebar{
    display:flex;flex-direction:column;width:var(--sidebar-w);flex-shrink:0;min-height:100vh;
    background:var(--black);color:#fff;padding:26px 18px;position:sticky;top:0;align-self:flex-start;
  }
  .side-brand{display:flex;align-items:center;gap:10px;padding:0 6px 26px;border-bottom:1px solid #2a2620;margin-bottom:22px}
  .side-mark{width:34px;height:auto;filter:none}
  .side-word{font:700 14px 'Playfair Display',serif;line-height:1.25}
  .side-word span{display:block;font:500 10px 'DM Sans';color:#b2aa9c;letter-spacing:.04em}
  .side-nav{display:flex;flex-direction:column;gap:4px}
  .side-link{
    display:flex;align-items:center;gap:12px;border:0;background:transparent;color:#c9c2b3;
    padding:11px 12px;border-radius:11px;font:600 13px inherit;cursor:pointer;text-align:left;
  }
  .side-link:hover{background:#1b1a16}
  .side-link.active{background:#201f1b;color:var(--gold2)}
  .side-book{
    margin-top:22px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;
    background:linear-gradient(105deg,#c6a052,#e7c77c);color:#1c1a15;border-radius:12px;padding:12px;
    font:700 13px inherit;cursor:pointer;
  }
  .side-user{
    margin-top:auto;display:flex;align-items:center;gap:10px;background:transparent;border:1px solid #2a2620;
    border-radius:12px;padding:10px;color:#fff;cursor:pointer;text-align:left;
  }
  .side-user-text{min-width:0}
  .side-user-text b{font-size:12px;display:block}
  .side-user-text span{font-size:10px;color:#9c9384;display:block;margin-top:2px}
  .side-user .chev{margin-left:auto;color:#9c9384;flex-shrink:0}

  .main{flex:1;min-width:0;padding-bottom:0}

  /* topbar becomes a single slim row: title | vehicle chip | notification bell */
  .top{
    padding:20px 40px;border-radius:0;position:relative;
    display:flex;align-items:center;gap:24px;min-height:auto;
  }
  .top:after{display:none}
  .topbar{display:contents} /* let title & bell become direct flex items, aligned with vehicle */
  .brand-mobile{display:none}
  .topbar-title{display:block;order:1;flex:0 0 auto;white-space:nowrap}
  .welcome{display:none}
  .vehicle{
    order:2;position:static;width:auto;flex:0 1 340px;margin:0;padding:9px 13px;
  }
  .top-actions{order:3;margin-left:auto;flex:0 0 auto}

  .notif-panel{right:40px;top:64px}

  .content{max-width:1180px;padding:34px 40px 60px;margin:0}

  .dashboard{display:grid;grid-template-columns:2fr 1fr;gap:28px;align-items:start}
  .col-side{display:flex;flex-direction:column;gap:0}
  .services{display:grid;grid-template-columns:repeat(3,1fr)}

  .tiers{grid-template-columns:repeat(3,1fr)}
  .rewards-hero{padding:28px}
  .vehicle-list{max-width:520px}
  .settings-list{max-width:520px}
  .profile-card{max-width:520px}

  .sheet-box{max-width:480px}
}

@media(min-width:1024px) and (max-width:1279px){
  .content{max-width:920px}
}

/* ===================== AUTH PAGE ===================== */
.auth-body{background:var(--cream)}
.auth-shell{min-height:100vh;display:flex;flex-direction:column}

.auth-hero{
  background:var(--black);color:#fff;padding:44px 24px 56px;text-align:center;
  position:relative;overflow:hidden;border-radius:0 0 27px 27px;
}
.auth-hero:after{
  content:'';position:absolute;width:270px;height:270px;border:1px solid #7f642d;
  border-radius:50%;left:50%;top:-190px;transform:translateX(-50%);opacity:.5;
}
.auth-mark{width:120px;margin:0 auto;position:relative;z-index:1}
.auth-word{font:700 20px 'Playfair Display',serif;margin-top:10px;position:relative;z-index:1}
.auth-word span{display:block;font:500 11px 'DM Sans';color:#c9bd9b;letter-spacing:.08em;margin-top:2px}
.auth-tag{font-size:12px;color:#d6c8aa;margin:14px auto 0;max-width:260px;line-height:1.5;position:relative;z-index:1}

.auth-card{
  flex:1;background:var(--cream);margin:-24px 16px 40px;position:relative;z-index:2;
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 20px 26px;
  box-shadow:0 14px 30px #3d2c0b0d;
}
.auth-tabs{display:flex;background:var(--soft);border-radius:12px;padding:4px;gap:4px;margin-bottom:20px}
.auth-tab{
  flex:1;border:0;background:transparent;padding:10px 0;border-radius:9px;font:700 12px inherit;
  color:var(--muted);cursor:pointer;
}
.auth-tab.active{background:#fff;color:var(--ink);box-shadow:0 3px 8px #3d2c0b12}

.auth-error{
  background:#fbecec;color:#b23b3b;font-size:12px;font-weight:600;border-radius:10px;
  padding:10px 12px;margin-bottom:16px;
}

.auth-form{display:grid;gap:14px}
.auth-form[hidden]{display:none}
.field{display:grid;gap:7px}
.field span{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.field input, .field textarea{
  border:1px solid var(--line);border-radius:11px;padding:13px 14px;font:600 13px inherit;
  background:#fff;color:var(--ink);width:100%;
}
.field textarea{resize:vertical;min-height:96px;font-weight:500;line-height:1.5}
.field input:focus-visible, .field textarea:focus-visible{outline:2px solid var(--gold)}
.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{padding-right:42px}
.pw-toggle{
  position:absolute;right:6px;border:0;background:transparent;color:var(--muted);
  width:32px;height:32px;display:grid;place-items:center;cursor:pointer;border-radius:8px;
}
.pw-toggle:hover{background:var(--soft)}

.auth-hint{font-size:11px;color:var(--muted);text-align:center;margin:2px 0 0;line-height:1.5}
.auth-terms{font-size:11px;color:var(--muted);text-align:center;margin:2px 0 0;line-height:1.5}

.auth-switch{text-align:center;font-size:12px;color:var(--muted);margin:20px 0 0}
.auth-switch button{border:0;background:none;color:#9d7828;font:700 12px inherit;cursor:pointer;padding:0}

.auth-install{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:16px;
  border:1px dashed var(--line);background:transparent;border-radius:11px;padding:11px;
  font:700 11px inherit;color:var(--muted);cursor:pointer;
}
.auth-install[hidden]{display:none}
.auth-install:hover{border-color:var(--gold);color:#9d7828}

@media(min-width:700px){
  .auth-shell{align-items:center;justify-content:center;padding:40px 20px}
  .auth-hero{border-radius:20px 20px 0 0;width:min(420px,100%);padding:38px 30px 52px}
  .auth-card{width:min(420px,100%);margin:-24px 0 0;border-radius:0 0 20px 20px}
}