/* ============================================================
   Maison — Conciergerie personnelle
   Design system
   ============================================================ */
:root{
  /* ---- Light theme (default) ---- */
  --bg:            #f7f3ec;
  --bg-2:          #f1ebe0;
  --surface:       #fffdf9;
  --surface-2:     #f4efe5;
  --surface-3:     #ebe4d7;
  --line:          rgba(58,48,36,.11);
  --line-strong:   rgba(58,48,36,.18);

  --text:          #2c2822;
  --text-soft:     #6a6255;
  --text-mute:     #9c9488;

  --gold:          #b7924f;
  --gold-bright:   #d9b578;
  --gold-deep:     #97722f;
  --gold-glow:     rgba(183,146,79,.15);

  --danger:        #c0655f;
  --hover:         rgba(58,48,36,.04);
  --nav-bg:        rgba(250,246,239,.92);
  --scroll:        #ddd4c4;
  --scroll-hover:  #cdc2ae;

  --radius:        18px;
  --radius-sm:     12px;
  --radius-lg:     26px;

  --shadow:        0 22px 55px -30px rgba(70,52,28,.42);
  --shadow-soft:   0 10px 30px -20px rgba(70,52,28,.30);

  --serif:         'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:          'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease:          cubic-bezier(.22,.61,.36,1);
  --sidebar-w:     264px;
}

/* ---- Dark theme (opt-in) ---- */
:root[data-theme="dark"]{
  --bg:            #0c0c0e;
  --bg-2:          #121216;
  --surface:       #16161b;
  --surface-2:     #1c1c22;
  --surface-3:     #232329;
  --line:          rgba(255,255,255,.07);
  --line-strong:   rgba(255,255,255,.12);

  --text:          #ece7dd;
  --text-soft:     #b7b1a6;
  --text-mute:     #7d786f;

  --gold:          #d8b98a;
  --gold-bright:   #e7cfa4;
  --gold-deep:     #b8935f;
  --gold-glow:     rgba(216,185,138,.16);

  --danger:        #d98a8a;
  --hover:         rgba(255,255,255,.015);
  --nav-bg:        rgba(14,14,17,.92);
  --scroll:        #33333c;
  --scroll-hover:  #43434c;

  --shadow:        0 24px 60px -30px rgba(0,0,0,.9);
  --shadow-soft:   0 8px 30px -18px rgba(0,0,0,.8);
}

*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
  font-family:var(--sans);
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(216,185,138,.06), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(159,178,201,.05), transparent 55%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  font-weight:300;
  letter-spacing:.2px;
  overflow:hidden;
}
button{ font-family:inherit; cursor:pointer; color:inherit; background:none; border:none; }
input,textarea,select{ font-family:inherit; color:inherit; }
::selection{ background:var(--gold-glow); }

/* Scrollbars */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--scroll); border-radius:20px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--scroll-hover); background-clip:content-box; }

/* ============================================================
   Splash
   ============================================================ */
.splash{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:var(--bg);
  transition:opacity .8s var(--ease), visibility .8s;
}
.splash.hide{ opacity:0; visibility:hidden; }
.splash-inner{ text-align:center; animation:rise 1s var(--ease); }
.splash-mark{
  font-family:var(--serif); font-size:64px; color:var(--gold);
  width:110px; height:110px; margin:0 auto 22px;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line-strong);
  box-shadow:0 0 60px var(--gold-glow) inset;
}
.splash-line{ font-family:var(--serif); font-size:30px; font-style:italic; color:var(--text-soft); letter-spacing:1px; }
@keyframes rise{ from{ opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }

/* ============================================================
   Layout
   ============================================================ */
.app{ display:flex; height:100%; }

.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  border-right:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg-2), var(--bg));
  padding:28px 20px; display:flex; flex-direction:column; gap:8px;
}
.brand{ display:flex; align-items:center; gap:14px; padding:6px 8px 26px; }
.brand-mark{
  font-family:var(--serif); font-size:26px; color:var(--gold);
  width:46px; height:46px; display:grid; place-items:center;
  border:1px solid var(--line-strong); border-radius:13px;
  box-shadow:0 0 26px var(--gold-glow) inset;
}
.brand-text{ display:flex; flex-direction:column; }
.brand-name{ font-family:var(--serif); font-size:24px; letter-spacing:.5px; line-height:1; }
.brand-sub{ font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--text-mute); margin-top:4px; }

.nav{ display:flex; flex-direction:column; gap:2px; margin-top:6px; flex:1; }
.nav-item{
  display:flex; align-items:center; gap:14px;
  padding:12px 14px; border-radius:12px; width:100%;
  color:var(--text-soft); font-size:15px; letter-spacing:.4px;
  transition:.25s var(--ease); position:relative;
}
.nav-item:hover{ background:var(--surface); color:var(--text); }
.nav-item.active{ background:var(--surface-2); color:var(--text); }
.nav-item.active::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:3px; background:var(--gold);
  box-shadow:0 0 14px var(--gold);
}
.nav-ico{ font-size:15px; color:var(--gold); width:18px; text-align:center; opacity:.9; }
.settings-btn{ margin-top:auto; }
.nav-group-label{ font-size:10px; letter-spacing:1.8px; text-transform:uppercase; color:var(--text-mute); padding:16px 14px 4px; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; height:100%; }

.topbar{
  display:flex; align-items:center; gap:18px;
  padding:18px 34px; border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.cmd-open{
  flex:1; max-width:520px; display:flex; align-items:center; gap:12px;
  padding:11px 16px; border-radius:14px; border:1px solid var(--line);
  background:var(--surface); color:var(--text-mute);
  transition:.25s var(--ease);
}
.cmd-open:hover{ border-color:var(--line-strong); background:var(--surface-2); }
.cmd-ico{ color:var(--gold); font-size:16px; }
.cmd-label{ flex:1; text-align:left; font-size:14px; }
.cmd-kbd{ font-size:11px; letter-spacing:1px; color:var(--text-mute); border:1px solid var(--line); padding:3px 8px; border-radius:6px; }
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:18px; }
.clock{ font-family:var(--serif); font-size:22px; color:var(--text-soft); letter-spacing:1px; font-variant-numeric:tabular-nums; }

.views{ flex:1; overflow-y:auto; padding:34px 34px 60px; scroll-behavior:smooth; }
.view{ max-width:1080px; margin:0 auto; animation:fade .5s var(--ease); }
@keyframes fade{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

/* ============================================================
   Headings & shared
   ============================================================ */
.eyebrow{ font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--gold-deep); margin-bottom:10px; }
.view-title{ font-family:var(--serif); font-size:38px; font-weight:500; letter-spacing:.5px; line-height:1.05; }
.view-title .thin{ font-style:italic; color:var(--text-soft); }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin:38px 0 16px; }
.section-head h2{ font-family:var(--serif); font-size:24px; font-weight:500; letter-spacing:.4px; }
.section-head .link{ font-size:13px; color:var(--gold); letter-spacing:.5px; }
.section-head .link:hover{ color:var(--gold-bright); }

.card{
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; padding:5px 11px; border-radius:20px; border:1px solid var(--line-strong); color:var(--text-soft); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px; border-radius:12px; font-size:14px; letter-spacing:.6px;
  transition:.25s var(--ease); border:1px solid transparent; white-space:nowrap;
}
.btn-gold{
  background:linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  color:#231a0e; font-weight:500;
  box-shadow:0 10px 30px -14px var(--gold-deep);
}
.btn-gold:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn-ghost{ border-color:var(--line-strong); color:var(--text-soft); }
.btn-ghost:hover{ background:var(--surface-2); color:var(--text); }
.btn-block{ width:100%; }

/* Empty state */
.empty{ text-align:center; padding:46px 20px; color:var(--text-mute); }
.empty .e-ico{ font-size:30px; color:var(--gold-deep); opacity:.7; margin-bottom:12px; }
.empty p{ font-size:14px; }

/* ============================================================
   HOME
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  padding:40px 42px; border-radius:var(--radius-lg);
  background:
    radial-gradient(700px 300px at 90% -30%, rgba(216,185,138,.14), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line-strong); box-shadow:var(--shadow);
}
.hero-greet{ font-family:var(--serif); font-size:clamp(30px,5vw,50px); font-weight:500; line-height:1.06; }
.hero-greet .name{ color:var(--gold); font-style:italic; }
.hero-date{ color:var(--text-soft); font-size:15px; margin-top:12px; letter-spacing:.5px; }
.hero-sum{ margin-top:24px; display:flex; flex-wrap:wrap; gap:14px; }
.sum-chip{
  display:flex; align-items:center; gap:12px; padding:14px 18px;
  border-radius:14px; background:var(--surface-2); border:1px solid var(--line);
}
.sum-chip .n{ font-family:var(--serif); font-size:28px; color:var(--gold); line-height:1; }
.sum-chip .l{ font-size:12px; color:var(--text-soft); letter-spacing:.5px; }

.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:1fr 1fr; }
.grid-3{ grid-template-columns:repeat(3,1fr); }

.panel{ padding:24px; }
.panel h3{ font-family:var(--serif); font-size:20px; font-weight:500; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; }
.panel h3 .cnt{ font-size:12px; color:var(--text-mute); font-family:var(--sans); letter-spacing:1px; }

/* Task rows */
.tlist{ display:flex; flex-direction:column; }
.trow{ display:flex; align-items:flex-start; gap:14px; padding:13px 4px; border-bottom:1px solid var(--line); transition:.2s var(--ease); }
.trow:last-child{ border-bottom:none; }
.trow:hover{ background:var(--hover); }
.tcheck{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; margin-top:1px;
  border:1.5px solid var(--line-strong); display:grid; place-items:center;
  transition:.2s var(--ease); font-size:12px; color:transparent;
}
.tcheck:hover{ border-color:var(--gold); }
.trow.done .tcheck{ background:var(--gold); border-color:var(--gold); color:#231a0e; }
.tbody{ flex:1; min-width:0; }
.ttitle{ font-size:15px; letter-spacing:.3px; }
.trow.done .ttitle{ color:var(--text-mute); text-decoration:line-through; text-decoration-color:var(--gold-deep); }
.tmeta{ display:flex; gap:10px; align-items:center; margin-top:4px; font-size:12px; color:var(--text-mute); }
.dot{ width:6px; height:6px; border-radius:50%; display:inline-block; }
.dot.p-high{ background:var(--danger); }
.dot.p-med{ background:var(--gold); }
.dot.p-low{ background:var(--sage); }
.tdel{ opacity:0; color:var(--text-mute); font-size:16px; padding:4px 8px; transition:.2s; }
.trow:hover .tdel{ opacity:1; }
.req-row:hover .tdel{ opacity:1; }
.req-row .tdel{ opacity:0; }
.tdel:hover{ color:var(--danger); }

/* Agenda timeline */
.tl{ display:flex; flex-direction:column; }
.tl-item{ display:flex; gap:18px; padding:6px 0; }
.tl-time{ flex:0 0 62px; text-align:right; font-family:var(--serif); font-size:16px; color:var(--gold); padding-top:14px; }
.tl-line{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; }
.tl-node{ width:11px; height:11px; border-radius:50%; background:var(--surface); border:2px solid var(--gold); margin-top:18px; }
.tl-rail{ flex:1; width:1px; background:var(--line); }
.tl-card{ flex:1; margin:8px 0; padding:15px 18px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line); }
.tl-card .t{ font-size:15px; }
.tl-card .m{ font-size:12px; color:var(--text-mute); margin-top:5px; display:flex; gap:8px; }

/* Weather / briefing tile */
.tile{ padding:22px 24px; display:flex; flex-direction:column; gap:6px; }
.tile .big{ font-family:var(--serif); font-size:40px; color:var(--text); line-height:1; }
.tile .sub{ font-size:13px; color:var(--text-soft); }
.quote{ font-family:var(--serif); font-style:italic; font-size:20px; line-height:1.4; color:var(--text-soft); }
.quote .by{ display:block; font-style:normal; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-deep); margin-top:12px; }

/* ============================================================
   Concierge
   ============================================================ */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.svc{
  padding:26px 22px; border-radius:var(--radius); cursor:pointer;
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line); transition:.3s var(--ease); position:relative; overflow:hidden;
}
.svc:hover{ transform:translateY(-4px); border-color:var(--gold-deep); box-shadow:var(--shadow); }
.svc::after{ content:""; position:absolute; inset:0; background:radial-gradient(300px 120px at 50% -20%, var(--gold-glow), transparent 70%); opacity:0; transition:.3s; }
.svc:hover::after{ opacity:1; }
.svc-ico{ font-size:26px; color:var(--gold); margin-bottom:14px; }
.svc-t{ font-family:var(--serif); font-size:21px; font-weight:500; }
.svc-d{ font-size:13px; color:var(--text-mute); margin-top:6px; line-height:1.5; }

.req-row{ display:flex; align-items:center; gap:14px; padding:15px 18px; border-bottom:1px solid var(--line); }
.req-row:last-child{ border:none; }
.req-ico{ font-size:18px; color:var(--gold); width:24px; text-align:center; }
.req-body{ flex:1; }
.req-body .t{ font-size:15px; }
.req-body .m{ font-size:12px; color:var(--text-mute); margin-top:3px; }
.status{ font-size:11px; letter-spacing:1.4px; text-transform:uppercase; padding:5px 12px; border-radius:20px; }
.status.open{ color:var(--gold-deep); background:var(--gold-glow); }
.status.done{ color:var(--sage); background:rgba(169,183,156,.12); }

/* ============================================================
   Notes
   ============================================================ */
.notes-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.note{
  padding:22px; border-radius:var(--radius); min-height:170px;
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line); cursor:pointer; transition:.25s var(--ease);
  display:flex; flex-direction:column;
}
.note:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.note.pin{ border-color:var(--gold-deep); }
.note-t{ font-family:var(--serif); font-size:20px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:start; gap:10px; }
.note-pin{ font-size:14px; color:var(--gold); opacity:.5; }
.note.pin .note-pin{ opacity:1; }
.note-b{ font-size:14px; color:var(--text-soft); line-height:1.6; flex:1; overflow:hidden; }
.note-h1{ font-family:var(--serif); font-size:18px; color:var(--text); margin:4px 0; }
.note-h2{ font-family:var(--serif); font-size:16px; color:var(--text); margin:4px 0; }
.note-bullet{ margin-left:4px; }
.note-check{ display:flex; align-items:flex-start; gap:8px; cursor:pointer; margin:2px 0; }
.note-check .nc-box{ flex:0 0 auto; width:16px; height:16px; border-radius:5px; border:1.5px solid var(--line-strong); display:grid; place-items:center; font-size:10px; color:var(--gold); margin-top:2px; }
.note-check.on .nc-box{ background:var(--gold-glow); border-color:var(--gold); }
.note-check.on span:last-child{ text-decoration:line-through; color:var(--text-mute); }
.note-d{ font-size:11px; color:var(--text-mute); margin-top:14px; letter-spacing:.5px; }

/* ============================================================
   Wellness
   ============================================================ */
.habit{ display:flex; align-items:center; gap:16px; padding:18px 20px; border-bottom:1px solid var(--line); }
.habit:last-child{ border:none; }
.habit-ring{
  width:46px; height:46px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  border:2px solid var(--line-strong); font-size:18px; transition:.25s var(--ease);
}
.habit.on .habit-ring{ border-color:var(--gold); background:var(--gold-glow); color:var(--gold-bright); box-shadow:0 0 20px var(--gold-glow); }
.habit-body{ flex:1; }
.habit-body .t{ font-size:16px; }
.habit-body .m{ font-size:12px; color:var(--text-mute); margin-top:3px; }
.streak{ font-family:var(--serif); font-size:15px; color:var(--gold); }

/* ============================================================
   Forms / inputs
   ============================================================ */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-mute); margin-bottom:8px; }
.input,textarea.input,select.input{
  width:100%; padding:13px 15px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--line);
  font-size:15px; transition:.2s var(--ease); letter-spacing:.3px;
}
.input:focus,textarea.input:focus,select.input:focus{ outline:none; border-color:var(--gold-deep); background:var(--surface-3); }
textarea.input{ resize:vertical; min-height:110px; line-height:1.6; }
.input::placeholder{ color:var(--text-mute); }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.seg{ display:flex; gap:8px; }
.seg button{ flex:1; padding:11px; border-radius:10px; border:1px solid var(--line); font-size:13px; color:var(--text-soft); transition:.2s var(--ease); }
.seg button.on{ border-color:var(--gold); color:var(--gold-bright); background:var(--gold-glow); }

/* ============================================================
   Command palette
   ============================================================ */
.palette-backdrop{ position:fixed; inset:0; z-index:120; background:rgba(6,6,8,.66); backdrop-filter:blur(6px); display:flex; align-items:flex-start; justify-content:center; padding-top:14vh; animation:fade .2s var(--ease); }
.palette{ width:min(620px,92vw); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.palette-input-row{ display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); }
.palette-ico{ color:var(--gold); font-size:18px; }
#paletteInput{ flex:1; background:none; border:none; font-size:17px; outline:none; }
.palette-esc{ font-size:11px; letter-spacing:1px; color:var(--text-mute); border:1px solid var(--line); padding:4px 9px; border-radius:6px; }
.palette-results{ max-height:44vh; overflow-y:auto; padding:8px; }
.pres{ display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:12px; cursor:pointer; }
.pres:hover,.pres.sel{ background:var(--surface-2); }
.pres-ico{ color:var(--gold); font-size:16px; width:22px; text-align:center; }
.pres-t{ font-size:15px; }
.pres-t small{ display:block; color:var(--text-mute); font-size:12px; margin-top:2px; }

/* ============================================================
   Modal
   ============================================================ */
.modal-backdrop{ position:fixed; inset:0; z-index:130; background:rgba(6,6,8,.7); backdrop-filter:blur(6px); display:grid; place-items:center; padding:20px; animation:fade .2s var(--ease); }
.modal{ width:min(520px,94vw); max-height:88vh; overflow-y:auto; background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line-strong); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:30px; animation:pop .3s var(--ease); }
@keyframes pop{ from{ opacity:0; transform:scale(.96) translateY(8px);} to{ opacity:1; transform:none;} }
.modal-head{ display:flex; justify-content:space-between; align-items:start; margin-bottom:22px; }
.modal-head h3{ font-family:var(--serif); font-size:26px; font-weight:500; }
.modal-head .sub{ font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-deep); margin-bottom:6px; }
.modal-close{ font-size:22px; color:var(--text-mute); padding:2px 8px; }
.modal-close:hover{ color:var(--text); }
.modal-actions{ display:flex; gap:12px; margin-top:24px; }

/* ============================================================
   Toast
   ============================================================ */
.toast{ position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(20px); z-index:150; background:var(--surface-3); border:1px solid var(--line-strong); color:var(--text); padding:13px 22px; border-radius:14px; font-size:14px; box-shadow:var(--shadow); opacity:0; transition:.35s var(--ease); letter-spacing:.3px; display:flex; align-items:center; gap:10px; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .tk{ color:var(--gold); }

/* ============================================================
   Settings
   ============================================================ */
.set-row{ display:flex; justify-content:space-between; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }
.set-row:last-child{ border:none; }
.set-row .l .t{ font-size:15px; }
.set-row .l .d{ font-size:12px; color:var(--text-mute); margin-top:3px; }
.swatches{ display:flex; gap:10px; }
.sw{ width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:.2s; }
.sw.on{ border-color:var(--text); transform:scale(1.1); }

.bottomnav{ display:none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .grid-3{ grid-template-columns:1fr 1fr; }
  .svc-grid{ grid-template-columns:1fr 1fr; }
  .notes-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .sidebar{ display:none; }
  .topbar{ padding:14px 18px; }
  .views{ padding:22px 18px 120px; }
  .grid-2,.grid-3{ grid-template-columns:1fr; }
  .svc-grid,.notes-grid{ grid-template-columns:1fr; }
  .hero{ padding:30px 24px; }
  .cmd-label{ display:none; }
  .cmd-kbd{ display:none; }
  .cmd-open{ max-width:none; }
  .view-title{ font-size:30px; }

  .bottomnav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:90;
    justify-content:space-around; align-items:center;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:var(--nav-bg); backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
  }
  .bn-item{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--text-mute); font-size:19px; padding:6px 10px; transition:.2s; }
  .bn-item label{ font-size:10px; letter-spacing:.5px; }
  .bn-item.active{ color:var(--gold); }
  .bn-fab{
    width:58px; height:58px; border-radius:50%; margin-top:-30px;
    background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
    color:#231a0e; box-shadow:0 12px 30px -10px var(--gold-deep); font-size:24px;
  }
  .bn-fab.active{ color:#231a0e; }
}
@media (max-width:480px){
  .sum-chip{ flex:1; }
  .modal{ padding:24px 20px; }
  .row-2{ grid-template-columns:1fr; }
}

/* ============================================================
   Papers / Document vault
   ============================================================ */
.dropzone{
  border:1.5px dashed var(--line-strong); border-radius:var(--radius);
  padding:34px 24px; text-align:center; cursor:pointer; transition:.25s var(--ease);
  background:var(--surface); margin-bottom:26px;
}
.dropzone:hover{ border-color:var(--gold-deep); background:var(--surface-2); }
.dropzone.drag{ border-color:var(--gold); background:var(--gold-glow); transform:scale(1.01); }
.dz-ico{ font-size:32px; color:var(--gold); margin-bottom:10px; }
.dz-t{ font-family:var(--serif); font-size:21px; }
.dz-d{ font-size:13px; color:var(--text-mute); margin-top:6px; }

.doc-cats{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.doc-cat{ padding:8px 15px; border-radius:20px; border:1px solid var(--line); font-size:13px; color:var(--text-soft); cursor:pointer; transition:.2s var(--ease); letter-spacing:.3px; }
.doc-cat:hover{ border-color:var(--line-strong); }
.doc-cat.on{ border-color:var(--gold); color:var(--gold-deep); background:var(--gold-glow); }
.doc-cat .c{ opacity:.6; margin-left:4px; }

.doc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.doc{
  padding:18px; border-radius:var(--radius); display:flex; gap:14px; align-items:flex-start;
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line); cursor:pointer; transition:.22s var(--ease); position:relative;
}
.doc:hover{ transform:translateY(-3px); border-color:var(--line-strong); box-shadow:var(--shadow-soft); }
.doc-ico{ font-size:26px; flex:0 0 auto; line-height:1.2; }
.doc-body{ flex:1; min-width:0; }
.doc-name{ font-size:15px; word-break:break-word; line-height:1.35; }
.doc-meta{ font-size:12px; color:var(--text-mute); margin-top:5px; }
.doc-exp{ display:inline-block; margin-top:8px; font-size:11px; letter-spacing:.5px; padding:3px 9px; border-radius:20px; background:var(--surface-3); color:var(--text-soft); }
.doc-exp.soon{ background:rgba(192,101,95,.14); color:var(--danger); }
.doc-del{ position:absolute; top:12px; right:12px; opacity:0; color:var(--text-mute); font-size:15px; padding:2px 6px; transition:.2s; }
.doc:hover .doc-del{ opacity:1; }
.doc-del:hover{ color:var(--danger); }

/* Reminder chips on home */
.reminder{ display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--line); }
.reminder:last-child{ border:none; }
.reminder .r-ico{ color:var(--gold); font-size:16px; }
.reminder .r-t{ font-size:14px; flex:1; }
.reminder .r-d{ font-size:12px; color:var(--danger); }

/* ============================================================
   Toggle switch
   ============================================================ */
.switch{ width:52px; height:30px; border-radius:20px; background:var(--surface-3); border:1px solid var(--line); position:relative; cursor:pointer; transition:.25s var(--ease); flex:0 0 auto; }
.switch.on{ background:var(--gold-glow); border-color:var(--gold); }
.switch .knob{ position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--gold); transition:.25s var(--ease); box-shadow:0 2px 6px rgba(0,0,0,.2); }
.switch.on .knob{ transform:translateX(22px); }

/* ============================================================
   Auth screen
   ============================================================ */
.auth{
  position:fixed; inset:0; z-index:180; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(900px 500px at 80% -10%, var(--gold-glow), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
.auth-card{
  width:min(420px,94vw); padding:40px 34px; text-align:center;
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line-strong); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  animation:rise .6s var(--ease);
}
.auth-mark{
  font-family:var(--serif); font-size:38px; color:var(--gold);
  width:74px; height:74px; margin:0 auto 18px; display:grid; place-items:center;
  border:1px solid var(--line-strong); border-radius:50%; box-shadow:0 0 40px var(--gold-glow) inset;
}
.auth-brand{ font-family:var(--serif); font-size:34px; letter-spacing:.5px; }
.auth-tag{ font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--text-mute); margin:6px 0 28px; }
.auth .field{ text-align:left; }
.auth-err{ background:rgba(192,101,95,.12); color:var(--danger); font-size:13px; padding:10px 14px; border-radius:10px; margin-bottom:14px; text-align:left; }
.auth-toggle{ display:block; width:100%; margin-top:16px; font-size:13px; color:var(--text-soft); letter-spacing:.3px; }
.auth-toggle b{ color:var(--gold-deep); }
.auth-note{ font-size:12px; color:var(--text-mute); margin-top:22px; line-height:1.6; }

/* ============================================================
   Concierge IA — proposition
   ============================================================ */
.pulse{ animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.4; transform:scale(.92);} 50%{ opacity:1; transform:scale(1.08);} }
.prop-summary{ font-family:var(--serif); font-size:19px; font-style:italic; color:var(--text-soft); line-height:1.5; margin-bottom:20px; }
.prop-sec{ margin-bottom:22px; }
.prop-h{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-deep); margin-bottom:12px; }
.prop-item{ padding:12px 14px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); margin-bottom:8px; }
.prop-name{ font-size:15px; }
.prop-detail{ font-size:13px; color:var(--text-mute); margin-top:4px; line-height:1.5; }
.prop-mail{ background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:16px; }
.prop-mail-subj{ font-size:14px; font-weight:500; margin-bottom:10px; }
.prop-mail-body{ font-size:14px; color:var(--text-soft); line-height:1.65; white-space:pre-wrap; }
.prop-check{ margin:0; padding-left:20px; }
.prop-check li{ font-size:14px; color:var(--text-soft); line-height:1.8; }

/* Import steps box */
.steps{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px 20px; margin:6px 0 18px; }
.steps ol{ margin:0; padding-left:20px; }
.steps li{ font-size:14px; color:var(--text-soft); line-height:1.7; }
.steps a{ color:var(--gold-deep); }