:root{
  --bg:#f5efe9;--surface:#fffaf7;--surface-2:#eee5dc;--text:#26211f;--muted:#81766f;
  --accent:#2b2928;--line:rgba(48,39,34,.10);--shadow:0 18px 50px rgba(66,45,34,.10);
  --radius:28px;--text-scale:1;
}
*{box-sizing:border-box}
html{font-size:calc(16px * var(--text-scale));background:var(--bg)}
body{margin:0;min-height:100vh;background:linear-gradient(180deg,#f6f0ea 0%,#f4eee8 45%,#f8f5f1 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent}
button,select,input{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.boot{position:fixed;inset:0;z-index:9999;background:var(--bg);display:grid;place-content:center;justify-items:center;gap:10px;transition:opacity .35s ease,visibility .35s ease}
.boot.hide{opacity:0;visibility:hidden}
.boot strong{font-size:1.35rem}.boot span{color:var(--muted);font-size:.86rem}
.brand-mark{width:64px;height:64px;border-radius:22px;background:var(--accent);color:white;display:grid;place-items:center;font-size:2rem;box-shadow:var(--shadow)}
.brand-mark.small{width:38px;height:38px;border-radius:13px;font-size:1.25rem;box-shadow:none}
.brand-mark.big{width:76px;height:76px;border-radius:25px;margin:auto}
.app-shell{max-width:560px;margin:auto;min-height:100vh;padding:env(safe-area-inset-top) 18px calc(24px + env(safe-area-inset-bottom))}
.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(245,239,233,.98),rgba(245,239,233,.80),rgba(245,239,233,0));backdrop-filter:blur(14px)}
.brand{border:0;background:none;display:flex;align-items:center;gap:11px;color:var(--text);font-weight:850;font-size:1.08rem;padding:0}
.top-actions{display:flex;gap:8px}
.icon-btn{width:42px;height:42px;border:1px solid var(--line);background:rgba(255,255,255,.64);border-radius:14px;color:var(--text);font-weight:800;font-size:1.4rem;display:grid;place-items:center}
.hero{padding:30px 4px 12px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.55);font-size:.76rem;font-weight:760;color:var(--muted)}
.status-dot{width:7px;height:7px;border-radius:50%;background:#7b9f79;box-shadow:0 0 0 4px rgba(123,159,121,.14)}
h1{font-size:clamp(2.6rem,11vw,4.4rem);line-height:.94;letter-spacing:-.065em;margin:24px 0 18px}
h1 span{color:#9c7f70}
.hero-copy{font-size:1rem;line-height:1.65;color:var(--muted);max-width:38ch;margin:0}
.hero-visual{height:245px;margin:30px 0 26px;border-radius:36px;position:relative;overflow:hidden;background:
radial-gradient(circle at 20% 25%,rgba(255,214,190,.9),transparent 31%),
radial-gradient(circle at 78% 22%,rgba(222,209,239,.8),transparent 28%),
linear-gradient(145deg,#fbf5ef,#efe4dc);border:1px solid rgba(69,53,46,.08);box-shadow:var(--shadow)}
.orb{position:absolute;border-radius:50%;filter:blur(1px);opacity:.75}.orb-a{width:120px;height:120px;background:#e7c0ad;right:-35px;top:-38px}.orb-b{width:90px;height:90px;background:#d4d7bd;left:-25px;bottom:-22px}
.thread{position:absolute;inset:38px 45px;background:linear-gradient(145deg,transparent 46%,rgba(66,55,49,.18) 47%,rgba(66,55,49,.18) 48%,transparent 49%)}
.node{position:absolute;width:18px;height:18px;border:5px solid white;border-radius:50%;background:#8b6a5d;box-shadow:0 8px 25px rgba(58,43,38,.16)}
.n1{left:6%;top:15%}.n2{left:39%;top:46%}.n3{right:12%;top:25%}.n4{right:27%;bottom:8%}
.floating-card{position:absolute;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);border-radius:17px;padding:11px 13px;box-shadow:0 12px 34px rgba(67,48,41,.11);display:flex;align-items:center;gap:8px;font-weight:750;font-size:.78rem}
.floating-card span{font-size:1.15rem}.floating-card small{font-size:.76rem}.card-a{left:22px;bottom:28px}.card-b{right:20px;top:46px}.card-c{left:40%;top:112px}
.cta-stack{display:grid;gap:10px}
.primary-btn,.secondary-btn{min-height:56px;border-radius:18px;border:0;padding:0 18px;font-weight:820}
.primary-btn{background:var(--accent);color:white;display:flex;align-items:center;justify-content:space-between;box-shadow:0 14px 30px rgba(47,40,36,.16)}
.primary-btn b{font-size:1.35rem}.secondary-btn{background:rgba(255,255,255,.62);border:1px solid var(--line);color:var(--text)}
.privacy-line{text-align:center;color:var(--muted);font-size:.77rem;margin:15px 0 0}
.preview-section{padding:44px 4px 10px}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:16px}.section-heading span{font-size:1.25rem;font-weight:860}.section-heading small{color:var(--muted)}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feature-card{min-height:176px;padding:18px;border-radius:25px;border:1px solid rgba(55,45,40,.06)}
.feature-card.warm{background:#f5dfd1}.feature-card.lilac{background:#e9e2f1}.feature-card.blue{background:#dfe9ee}.feature-card.green{background:#e0eadb}
.feature-icon{font-size:1.55rem;margin-bottom:22px}.feature-card h3{font-size:.96rem;margin:0 0 7px;letter-spacing:-.02em}.feature-card p{font-size:.78rem;line-height:1.5;margin:0;color:#6e635c}
.status-card{margin:22px 4px 0;padding:17px;border-radius:22px;background:rgba(255,255,255,.58);border:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.status-card>div{display:grid;gap:3px}.status-label{font-size:.72rem;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em}.status-card strong{font-size:.9rem}.status-card small{font-size:.72rem;color:var(--muted)}
.text-btn{border:0;background:none;color:var(--text);font-weight:800;font-size:.76rem;text-align:right}
footer{padding:38px 8px 18px;display:flex;justify-content:space-between;color:var(--muted);font-size:.74rem}
.backdrop,.modal-backdrop{position:fixed;inset:0;background:rgba(29,24,22,.28);backdrop-filter:blur(5px);z-index:60}
.side-sheet,.modal-sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,560px);background:var(--surface);border-radius:30px 30px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));z-index:70;box-shadow:0 -24px 70px rgba(37,29,25,.20);max-height:86vh;overflow:auto}
.side-sheet{transition:transform .28s ease}.sheet-handle{width:42px;height:5px;border-radius:999px;background:rgba(80,69,63,.15);margin:0 auto 14px}
.sheet-head,.modal-head{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 15px}.sheet-head small,.modal-head small{color:var(--muted);font-size:.72rem}.sheet-head h2,.modal-head h2{margin:2px 0 0;font-size:1.45rem}
.menu-list{display:grid;gap:10px}.menu-row{width:100%;border:1px solid var(--line);background:white;border-radius:20px;padding:15px;display:grid;grid-template-columns:42px 1fr auto;align-items:center;text-align:left;gap:10px;color:var(--text)}
.menu-row>span{font-size:1.25rem}.menu-row div{display:grid;gap:4px}.menu-row strong{font-size:.9rem}.menu-row small{font-size:.72rem;color:var(--muted)}.menu-row b{font-size:1.4rem;color:var(--muted)}
.menu-footer{text-align:center;color:var(--muted);font-size:.72rem;padding:18px 0 4px}
.settings-group{background:white;border:1px solid var(--line);border-radius:22px;padding:12px;margin-bottom:12px}.settings-group h3{font-size:.73rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:4px 6px 10px}
.setting-row{min-height:66px;padding:10px 7px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid rgba(50,40,34,.06)}.setting-row:first-of-type{border-top:0}.setting-row>div{display:grid;gap:4px}.setting-row strong{font-size:.9rem}.setting-row small{font-size:.72rem;color:var(--muted)}.setting-row select{border:0;background:var(--surface-2);padding:10px 28px 10px 11px;border-radius:12px;color:var(--text)}
.setting-row input[type=checkbox]{appearance:none;width:48px;height:28px;border-radius:999px;background:#d9d3ce;position:relative;transition:.2s}.setting-row input[type=checkbox]::after{content:"";width:22px;height:22px;background:white;border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 2px 7px rgba(0,0,0,.15);transition:.2s}.setting-row input[type=checkbox]:checked{background:#2d2a29}.setting-row input[type=checkbox]:checked::after{left:23px}
.setting-row.stacked{align-items:flex-start}.badge{font-size:.68rem;font-weight:850;background:#e4efdf;color:#54704f;padding:7px 9px;border-radius:999px}
.settings-action{width:100%;border:0;border-radius:15px;padding:14px;background:var(--accent);color:white;font-weight:820;margin-top:8px}.settings-action.secondary{background:var(--surface-2);color:var(--text)}.settings-note{font-size:.7rem;line-height:1.5;color:var(--muted);margin:10px 6px 4px}
.about-card{text-align:center;padding:22px 10px 28px}.about-card h3{font-size:1.25rem;margin:18px 0 8px}.about-card p{color:var(--muted);line-height:1.6}.about-version{display:inline-block;margin-top:12px;padding:9px 12px;border-radius:999px;background:var(--surface-2);font-size:.78rem}
.update-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(100% - 34px),440px);background:var(--surface);z-index:90;border-radius:28px;padding:24px;box-shadow:0 26px 90px rgba(37,29,25,.28);text-align:center}.update-symbol{width:56px;height:56px;border-radius:18px;background:var(--accent);color:white;display:grid;place-items:center;margin:0 auto 13px;font-size:1.5rem}.update-modal small{color:var(--muted);font-weight:800}.update-modal h2{font-size:1.3rem;margin:8px 0}.update-modal p{font-size:.83rem;line-height:1.55;color:var(--muted)}.update-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:9px;margin-top:18px}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:#252220;color:#fff;padding:12px 16px;border-radius:14px;opacity:0;pointer-events:none;transition:.22s;z-index:120;font-size:.8rem;font-weight:750;max-width:calc(100% - 36px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
body.dark{--bg:#171513;--surface:#211e1c;--surface-2:#2b2724;--text:#f6f0eb;--muted:#aaa09a;--accent:#f4eee9;--line:rgba(255,255,255,.09);--shadow:0 20px 60px rgba(0,0,0,.28);background:linear-gradient(180deg,#181513,#161412)}
body.dark .topbar{background:linear-gradient(180deg,rgba(23,21,19,.98),rgba(23,21,19,.80),rgba(23,21,19,0))}
body.dark .brand-mark{color:#211e1c}
body.dark .icon-btn,body.dark .secondary-btn,body.dark .status-card{background:rgba(255,255,255,.05)}
body.dark .menu-row,body.dark .settings-group{background:#24201e}
body.dark .feature-card{filter:saturate(.65) brightness(.72)}
body.dark .primary-btn,body.dark .settings-action{color:#201d1b}
body.dark .floating-card{background:rgba(40,35,32,.8);color:#fff}
@media(min-width:700px){body{padding:20px}.app-shell{border-radius:40px;background:rgba(255,255,255,.16);box-shadow:0 30px 100px rgba(67,49,42,.10);padding-left:24px;padding-right:24px}.topbar{border-radius:30px}.side-sheet,.modal-sheet{bottom:18px;border-radius:30px}.hero{padding-top:44px}}


/* ==========================================================
   NODI 0.1.1 — LIGHT UI / READABILITY HOTFIX
   ========================================================== */

:root{
  --bg:#fbf6f1;
  --surface:#fffdfb;
  --surface-2:#f5ede7;
  --surface-3:#fff8f4;
  --text:#171922;
  --text-soft:#505463;
  --muted:#737784;
  --accent:#cb725f;
  --accent-2:#b95f50;
  --accent-soft:#fae8e1;
  --line:rgba(31,27,28,.10);
  --line-strong:rgba(31,27,28,.15);
  --shadow:0 18px 55px rgba(98,69,56,.10);
  --shadow-soft:0 10px 30px rgba(98,69,56,.07);
}

html{
  background:#eee9e4;
}

body{
  background:
    radial-gradient(circle at 84% 5%, rgba(244,221,231,.72), transparent 23%),
    radial-gradient(circle at 8% 31%, rgba(226,236,213,.55), transparent 19%),
    linear-gradient(180deg,#fffaf6 0%,#fbf6f1 48%,#fffaf7 100%);
  color:var(--text);
}

.app-shell{
  background:rgba(255,253,251,.92);
}

.topbar{
  background:linear-gradient(180deg,rgba(255,253,251,.98),rgba(255,253,251,.90),rgba(255,253,251,0));
}

.brand{
  color:var(--text);
}

.brand-mark{
  background:#fbe8e4;
  color:#6e3d35;
  border:1px solid rgba(155,88,71,.08);
  box-shadow:0 10px 26px rgba(126,71,58,.08);
}

.brand-mark.small{
  background:#fff9f6;
  color:#5f3832;
  border:1px solid rgba(64,48,44,.08);
}

.icon-btn{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(43,36,35,.10);
  color:#242631;
  box-shadow:0 8px 22px rgba(60,47,42,.06);
}

.hero{
  padding-top:34px;
}

.eyebrow{
  color:#6b6f79;
  background:rgba(255,255,255,.78);
  border-color:rgba(46,39,37,.09);
  box-shadow:0 7px 18px rgba(75,57,50,.05);
}

.status-dot{
  background:#6eba7d;
  box-shadow:0 0 0 4px rgba(110,186,125,.15);
}

h1{
  color:#12151f;
  text-shadow:none;
}

h1 span{
  color:#b56f5f;
}

.hero-copy{
  color:#575b66;
  font-weight:520;
}

.hero-visual{
  background:
    radial-gradient(circle at 17% 22%,rgba(255,220,198,.98),transparent 34%),
    radial-gradient(circle at 77% 18%,rgba(231,216,245,.92),transparent 29%),
    radial-gradient(circle at 76% 74%,rgba(255,229,219,.82),transparent 28%),
    linear-gradient(145deg,#fff8f3,#f6eee8);
  border:1px solid rgba(84,65,58,.08);
  box-shadow:0 18px 45px rgba(105,76,64,.09);
}

.thread{
  opacity:.8;
}

.floating-card{
  color:#fff;
  background:rgba(48,44,44,.92);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 12px 28px rgba(55,45,42,.16);
}

.primary-btn{
  background:linear-gradient(135deg,#d77d68,#c76757);
  color:#fff;
  box-shadow:0 14px 30px rgba(191,92,73,.20);
  border:1px solid rgba(151,74,59,.08);
}

.primary-btn:hover{
  filter:brightness(1.02);
}

.secondary-btn{
  background:#fffdfb;
  color:#191b24;
  border:1px solid rgba(41,34,33,.11);
  box-shadow:0 8px 22px rgba(80,60,52,.05);
}

.privacy-line{
  color:#666b76;
}

.preview-section{
  padding-top:48px;
}

.section-heading span{
  color:#171922;
}

.section-heading small{
  color:#747985;
}

.feature-card{
  border:1px solid rgba(46,39,37,.07);
  box-shadow:0 10px 25px rgba(79,58,50,.05);
}

.feature-card.warm{
  background:
    radial-gradient(circle at 90% 8%,rgba(255,222,219,.92),transparent 34%),
    #fff2ee;
}
.feature-card.lilac{
  background:
    radial-gradient(circle at 90% 8%,rgba(248,230,190,.88),transparent 34%),
    #fff8ea;
}
.feature-card.blue{
  background:
    radial-gradient(circle at 90% 8%,rgba(219,235,251,.92),transparent 34%),
    #edf6ff;
}
.feature-card.green{
  background:
    radial-gradient(circle at 90% 8%,rgba(224,240,216,.92),transparent 34%),
    #eff8ec;
}

.feature-card h3{
  color:#1b1d27;
  font-weight:850;
}

.feature-card p{
  color:#5e626e;
  font-weight:520;
}

.status-card{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(43,36,35,.09);
  box-shadow:0 10px 24px rgba(80,60,52,.05);
}

.status-label{
  color:#7b7e88;
}

.status-card strong{
  color:#171922;
}

.status-card small{
  color:#6c717c;
}

.text-btn{
  color:#1d2029;
}

footer{
  color:#6d717b;
}

.backdrop,.modal-backdrop{
  background:rgba(44,34,31,.25);
}

.side-sheet,.modal-sheet{
  background:#fffdfb;
}

.sheet-handle{
  background:rgba(74,63,58,.18);
}

.sheet-head small,.modal-head small{
  color:#777b85;
}

.sheet-head h2,.modal-head h2{
  color:#171922;
}

.menu-row{
  background:#fff;
  color:#1b1d26;
  border:1px solid rgba(40,34,32,.09);
  box-shadow:0 6px 18px rgba(80,60,52,.04);
}

.menu-row small{
  color:#737783;
}

.menu-footer{
  color:#7b7f89;
}

.settings-group{
  background:#fff;
  border-color:rgba(40,34,32,.09);
}

.settings-group h3{
  color:#777b84;
}

.setting-row strong{
  color:#1a1c25;
}

.setting-row small{
  color:#6f737e;
}

.setting-row select{
  background:#f4ece6;
  color:#1d1f27;
}

.setting-row input[type=checkbox]{
  background:#d9d2cc;
}

.setting-row input[type=checkbox]:checked{
  background:#c96d5b;
}

.settings-action{
  background:linear-gradient(135deg,#d77d68,#c76757);
  color:#fff;
}

.settings-action.secondary{
  background:#f5ede7;
  color:#1d1f27;
}

.settings-note{
  color:#717681;
}

.about-card p{
  color:#666b76;
}

.about-version{
  background:#f4ede8;
  color:#252730;
}

.update-modal{
  background:#fffdfb;
}

.update-symbol{
  background:linear-gradient(135deg,#d77d68,#c76757);
}

.update-modal small,
.update-modal p{
  color:#6d727d;
}

.toast{
  background:#24262f;
  color:#fff;
}

/* Dark theme remains available only when explicitly selected. */
body.dark{
  --bg:#1b1918;
  --surface:#24211f;
  --surface-2:#302b28;
  --text:#f7f1ec;
  --muted:#b8ada6;
  --accent:#e0a08f;
  --line:rgba(255,255,255,.10);
  background:linear-gradient(180deg,#1d1a18,#171513);
}

body.dark .app-shell{
  background:rgba(31,28,26,.96);
}

body.dark .topbar{
  background:linear-gradient(180deg,rgba(31,28,26,.98),rgba(31,28,26,.88),rgba(31,28,26,0));
}

body.dark .brand-mark{
  background:#f2ddd6;
  color:#5b362f;
}

body.dark .brand-mark.small{
  background:#eee4df;
  color:#3c2a26;
}

body.dark .icon-btn,
body.dark .secondary-btn,
body.dark .status-card{
  background:rgba(255,255,255,.07);
  color:#f7f1ec;
}

body.dark .menu-row,
body.dark .settings-group{
  background:#292522;
  color:#f7f1ec;
}

body.dark .feature-card{
  filter:none;
}

body.dark .feature-card h3{
  color:#1b1d27;
}

body.dark .feature-card p{
  color:#5e626e;
}

body.dark h1{
  color:#fff8f3;
}

body.dark .hero-copy{
  color:#cfc5bf;
}

body.dark .section-heading span{
  color:#fff8f3;
}

body.dark .section-heading small,
body.dark footer,
body.dark .privacy-line{
  color:#b9ada6;
}

body.dark .status-card strong,
body.dark .text-btn{
  color:#fff8f3;
}

/* Better small-screen readability */
@media(max-width:420px){
  .app-shell{
    padding-left:14px;
    padding-right:14px;
  }
  h1{
    font-size:clamp(2.75rem,15vw,4rem);
    line-height:.95;
  }
  .hero-copy{
    font-size:.98rem;
  }
  .feature-grid{
    gap:10px;
  }
  .feature-card{
    min-height:184px;
    padding:17px;
  }
  .feature-card h3{
    font-size:.94rem;
  }
  .feature-card p{
    font-size:.79rem;
    line-height:1.55;
  }
}

@media(min-width:700px){
  body{
    padding:20px;
    background:#ebe6e1;
  }
  .app-shell{
    background:#fffaf6;
    box-shadow:0 30px 100px rgba(67,49,42,.12);
  }
}


/* ==========================================================
   NODI 0.1.2 — TOP BAR SCROLL FIX
   Rimuove trasparenza e blur durante lo scroll.
   ========================================================== */

.topbar{
  background:#fffdfb !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 1px 0 rgba(42,35,33,.06);
}

body.dark .topbar{
  background:#1f1c1a !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}

/* Evita qualunque alone del contenuto che scorre dietro l'header */
.topbar::before,
.topbar::after{
  content:none !important;
  display:none !important;
}

/* Mantiene i controlli nitidi e separati dalla pagina */
.topbar .brand,
.topbar .top-actions{
  position:relative;
  z-index:2;
}

/* Desktop: stessa resa piena, senza pannelli traslucidi */
@media(min-width:700px){
  .topbar{
    background:#fffaf6 !important;
  }
  body.dark .topbar{
    background:#1f1c1a !important;
  }
}


/* ==========================================================
   NODI 0.1.3 — REMOVE TOP BAR
   Nessuna barra fissa: solo menu flottante.
   ========================================================== */

.topbar{
  display:none !important;
}

.floating-actions{
  position:fixed;
  top:calc(14px + env(safe-area-inset-top));
  right:max(14px, calc((100vw - 560px)/2 + 14px));
  z-index:50;
  display:flex;
  gap:8px;
}

.floating-actions .icon-btn{
  width:44px;
  height:44px;
  border-radius:15px;
  background:#fffdfb;
  border:1px solid rgba(43,36,35,.10);
  color:#242631;
  box-shadow:0 8px 24px rgba(64,48,42,.10);
}

body.dark .floating-actions .icon-btn{
  background:#292522;
  border-color:rgba(255,255,255,.10);
  color:#f7f1ec;
}

.hero{
  padding-top:56px !important;
}

@media(max-width:420px){
  .floating-actions{
    top:calc(10px + env(safe-area-inset-top));
    right:10px;
  }

  .hero{
    padding-top:52px !important;
  }
}

@media(min-width:700px){
  .floating-actions{
    top:34px;
  }
}


/* ==========================================================
   NODI 0.2.0 — PERSONAL PROFILE
   ========================================================== */

.profile-modal{
  position:fixed;
  inset:0;
  z-index:100;
  background:
    radial-gradient(circle at 90% 7%,rgba(247,220,229,.72),transparent 23%),
    radial-gradient(circle at 4% 74%,rgba(226,238,215,.62),transparent 18%),
    #fffaf6;
  color:#171922;
  overflow:auto;
  overscroll-behavior:contain;
  padding:
    calc(12px + env(safe-area-inset-top))
    18px
    calc(24px + env(safe-area-inset-bottom));
}

.profile-modal-top{
  max-width:560px;
  margin:0 auto;
  min-height:48px;
  display:grid;
  grid-template-columns:46px 1fr 46px;
  align-items:center;
  gap:10px;
  position:sticky;
  top:0;
  z-index:4;
  padding:4px 0 8px;
  background:linear-gradient(180deg,#fffaf6 72%,rgba(255,250,246,0));
}

.round-back-btn,
.profile-close-btn{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(43,36,35,.10);
  background:#fff;
  color:#20222b;
  font-size:1.25rem;
  font-weight:800;
  box-shadow:0 7px 18px rgba(70,51,44,.06);
}

.profile-progress-wrap{
  display:flex;
  align-items:center;
  gap:9px;
}

.profile-progress-track{
  height:5px;
  flex:1;
  background:#eee5df;
  border-radius:999px;
  overflow:hidden;
}

.profile-progress-track span{
  display:block;
  width:33.333%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#df8a75,#c96b59);
  transition:width .25s ease;
}

.profile-progress-wrap small{
  min-width:34px;
  color:#7a7e88;
  font-size:.7rem;
  font-weight:760;
}

.profile-flow{
  max-width:560px;
  margin:0 auto;
}

.profile-step{
  display:none;
  padding:34px 2px 128px;
}

.profile-step.active{
  display:block;
  animation:profileIn .22s ease;
}

@keyframes profileIn{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}

.profile-kicker{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  background:#fae7df;
  color:#965649;
  font-size:.71rem;
  font-weight:850;
  letter-spacing:.02em;
}

.profile-step h2{
  margin:13px 0 9px;
  font-size:clamp(2rem,9vw,2.85rem);
  line-height:1;
  letter-spacing:-.055em;
  color:#171922;
}

.profile-intro{
  max-width:40ch;
  margin:0 0 27px;
  color:#646873;
  font-size:.94rem;
  line-height:1.6;
}

.photo-editor{
  display:grid;
  grid-template-columns:106px 1fr;
  align-items:center;
  gap:18px;
  padding:18px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(46,39,37,.08);
  border-radius:26px;
  box-shadow:0 12px 32px rgba(78,57,49,.06);
  margin-bottom:18px;
}

.profile-photo-button{
  width:106px;
  height:106px;
  border-radius:34px;
  border:0;
  background:
    radial-gradient(circle at 70% 15%,#f6ddd8,transparent 32%),
    linear-gradient(145deg,#f9e7df,#efe5dd);
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  box-shadow:inset 0 0 0 1px rgba(45,35,32,.06);
}

.profile-photo-button img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.profile-photo-placeholder{
  font-size:2.5rem;
  filter:grayscale(.1);
}

.photo-edit-badge{
  position:absolute;
  right:7px;
  bottom:7px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#27242a;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:1.15rem;
  border:2px solid #fff;
}

.photo-copy{
  display:grid;
  gap:5px;
}

.photo-copy strong{
  font-size:.95rem;
}

.photo-copy small{
  color:#727680;
  font-size:.73rem;
  line-height:1.45;
}

.inline-link{
  width:max-content;
  padding:0;
  margin-top:3px;
  border:0;
  background:none;
  color:#b35f50;
  font-weight:800;
  font-size:.73rem;
}

.profile-form{
  display:grid;
  gap:12px;
}

.field{
  display:grid;
  gap:8px;
  padding:15px;
  border-radius:21px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(43,36,35,.09);
  box-shadow:0 8px 24px rgba(80,60,52,.04);
}

.field>span{
  font-size:.78rem;
  color:#555a65;
  font-weight:760;
}

.field>span b{
  color:#bd6655;
}

.field>span em{
  float:right;
  color:#9799a1;
  font-style:normal;
  font-size:.67rem;
  font-weight:650;
}

.field input,
.field select,
.field textarea{
  width:100%;
  border:0;
  outline:0;
  background:#f7f1ec;
  color:#171922;
  border-radius:14px;
  padding:13px 14px;
  font:inherit;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  box-shadow:0 0 0 2px rgba(204,111,91,.26);
  background:#fffaf7;
}

.field textarea{
  resize:none;
  line-height:1.5;
}

.field-hint,
.char-counter{
  color:#858892;
  font-size:.68rem;
  line-height:1.4;
}

.char-counter{
  text-align:right;
}

.readonly-field{
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 13px;
  border-radius:14px;
  background:#f7f1ec;
}

.readonly-field>span{
  font-size:1.3rem;
}

.readonly-field>div{
  display:grid;
  gap:3px;
}

.readonly-field strong{
  font-size:.82rem;
}

.readonly-field small{
  color:#797d87;
  font-size:.68rem;
  line-height:1.4;
}

.profile-privacy-note{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:16px;
  border-radius:20px;
  background:#eef5eb;
  border:1px solid rgba(89,121,76,.08);
  margin-top:18px;
}

.profile-privacy-note>span{
  font-size:1.2rem;
}

.profile-privacy-note>div{
  display:grid;
  gap:4px;
}

.profile-privacy-note strong{
  font-size:.82rem;
}

.profile-privacy-note small{
  font-size:.7rem;
  line-height:1.45;
  color:#687064;
}

.profile-footer{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  z-index:103;
  width:min(100%,596px);
  padding:13px 18px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(255,250,246,0),#fffaf6 25%);
}

.profile-next-btn,
.profile-finish-btn{
  width:100%;
}

.profile-footer small{
  display:block;
  text-align:center;
  color:#8a8d96;
  font-size:.68rem;
  margin-top:8px;
}

.profile-complete{
  text-align:center;
  padding-top:10px;
}

.profile-complete-mark{
  width:56px;
  height:56px;
  border-radius:18px;
  margin:0 auto 16px;
  display:grid;
  place-items:center;
  background:#e3f0de;
  color:#5a8050;
  font-weight:900;
  font-size:1.4rem;
}

.profile-summary-avatar{
  width:120px;
  height:120px;
  border-radius:38px;
  margin:0 auto 19px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#f6e6df,#ece2da);
  box-shadow:0 16px 38px rgba(85,61,52,.09);
}

.profile-summary-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.profile-summary-avatar span{
  font-size:3rem;
}

.profile-complete h2{
  font-size:2.1rem;
  margin:0 0 9px;
  letter-spacing:-.045em;
}

.profile-complete>p{
  max-width:38ch;
  margin:0 auto 20px;
  color:#6a6e78;
  line-height:1.55;
  font-size:.88rem;
}

.profile-summary-card{
  text-align:left;
  padding:16px;
  margin:0 0 16px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(42,35,33,.08);
  box-shadow:0 10px 30px rgba(80,60,52,.05);
}

.profile-summary-name{
  font-size:1.12rem;
  font-weight:900;
  color:#181a23;
}

.profile-summary-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:8px;
}

.profile-summary-pill{
  padding:7px 9px;
  border-radius:999px;
  background:#f5eee8;
  color:#626671;
  font-size:.69rem;
  font-weight:720;
}

.profile-summary-bio{
  margin:11px 0 0;
  color:#626671;
  font-size:.78rem;
  line-height:1.5;
}

.profile-error{
  animation:profileShake .25s ease;
  box-shadow:0 0 0 2px rgba(197,82,66,.28) !important;
}

@keyframes profileShake{
  0%,100%{transform:translateX(0)}
  33%{transform:translateX(-4px)}
  66%{transform:translateX(4px)}
}

@media(max-width:380px){
  .photo-editor{
    grid-template-columns:88px 1fr;
    padding:14px;
    gap:13px;
  }
  .profile-photo-button{
    width:88px;
    height:88px;
    border-radius:28px;
  }
}

body.dark .profile-modal{
  background:
    radial-gradient(circle at 90% 7%,rgba(101,65,75,.35),transparent 23%),
    #1d1a18;
  color:#f7f1ec;
}

body.dark .profile-modal-top,
body.dark .profile-footer{
  background:linear-gradient(180deg,#1d1a18 72%,rgba(29,26,24,0));
}

body.dark .profile-step h2{
  color:#fff8f3;
}

body.dark .profile-intro{
  color:#c7bcb5;
}

body.dark .photo-editor,
body.dark .field,
body.dark .profile-summary-card{
  background:#292522;
  border-color:rgba(255,255,255,.08);
}

body.dark .field>span,
body.dark .photo-copy small,
body.dark .field-hint,
body.dark .char-counter{
  color:#c1b7b1;
}

body.dark .field input,
body.dark .field select,
body.dark .field textarea,
body.dark .readonly-field{
  background:#35302d;
  color:#fff8f3;
}

body.dark .profile-summary-name{
  color:#fff8f3;
}

body.dark .profile-summary-pill{
  background:#35302d;
  color:#d6ccc6;
}

body.dark .profile-summary-bio{
  color:#c4bab4;
}


/* ==========================================================
   NODI 0.3.0 — ACCOUNT + COUPLE SPACE
   ========================================================== */

.full-btn{width:100%}
.centered-note{text-align:center}
.local-demo-btn{margin-top:10px}

.account-sheet{max-height:92vh}

.account-hero{
  text-align:center;
  padding:8px 14px 22px;
}
.account-icon{
  width:58px;height:58px;border-radius:20px;margin:0 auto 12px;
  display:grid;place-items:center;font-size:1.45rem;
  background:#f6e8e2;
}
.account-hero h3{margin:0 0 8px;font-size:1.17rem;letter-spacing:-.025em}
.account-hero p{margin:0;color:#717681;font-size:.8rem;line-height:1.5}

.auth-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:5px;
  padding:5px;background:#f2ebe5;border-radius:15px;margin-bottom:12px;
}
.auth-tab{
  border:0;background:transparent;padding:10px;border-radius:11px;
  color:#737780;font-size:.78rem;font-weight:800;
}
.auth-tab.active{background:#fff;color:#1b1d25;box-shadow:0 4px 12px rgba(68,51,44,.06)}
.auth-form{margin-bottom:12px}

.account-card{
  display:flex;align-items:center;gap:12px;padding:15px;margin-bottom:13px;
  border-radius:20px;background:#fff;border:1px solid rgba(40,34,32,.09)
}
.account-avatar{
  width:44px;height:44px;border-radius:15px;display:grid;place-items:center;
  background:#e5f1df;color:#567a4e;font-weight:900
}
.account-card>div{display:grid;gap:4px}
.account-card strong{font-size:.88rem}
.account-card small{font-size:.7rem;color:#747883}

.couple-modal{
  position:fixed;inset:0;z-index:110;
  background:
    radial-gradient(circle at 92% 5%,rgba(246,221,231,.68),transparent 23%),
    radial-gradient(circle at 0% 74%,rgba(226,239,218,.56),transparent 18%),
    #fffaf6;
  color:#171922;
  overflow:auto;
  padding:calc(10px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));
}

.couple-topbar{
  max-width:560px;margin:0 auto;display:grid;grid-template-columns:44px 1fr 44px;
  align-items:center;gap:9px;min-height:52px
}
.couple-topbar>div{display:grid;text-align:center;gap:2px}
.couple-topbar small{font-size:.66rem;color:#858892}
.couple-topbar strong{font-size:.86rem}

.couple-content{max-width:560px;margin:0 auto}
.couple-view{padding:34px 1px 40px}
.couple-hero{padding:10px 0 22px}
.couple-hero.compact{padding-bottom:18px}
.couple-kicker{
  display:inline-flex;padding:7px 10px;border-radius:999px;
  background:#fae7df;color:#965649;font-size:.7rem;font-weight:850
}
.couple-hero h2,.couple-home-hero h2{
  margin:13px 0 9px;font-size:clamp(2rem,9vw,2.75rem);
  line-height:1;letter-spacing:-.055em
}
.couple-hero p,.couple-home-hero p{
  margin:0;color:#666b76;line-height:1.55;font-size:.88rem;max-width:39ch
}

.couple-choice-grid{display:grid;gap:12px}
.couple-choice-card{
  width:100%;display:grid;grid-template-columns:52px 1fr auto;
  align-items:center;gap:13px;text-align:left;padding:16px;border-radius:24px;
  border:1px solid rgba(42,35,33,.08);color:#1b1d25;
  box-shadow:0 10px 28px rgba(80,60,52,.05)
}
.couple-choice-card.create{background:#f8e9e3}
.couple-choice-card.join{background:#edf3e8}
.choice-icon{
  width:52px;height:52px;border-radius:17px;display:grid;place-items:center;
  background:rgba(255,255,255,.74);font-size:1.35rem
}
.couple-choice-card strong{font-size:.93rem}
.couple-choice-card small{grid-column:2/3;color:#6d717c;font-size:.72rem;line-height:1.45;margin-top:-8px}
.couple-choice-card b{grid-row:1/3;grid-column:3;font-size:1.25rem}

.invite-card{
  padding:24px;border-radius:28px;background:#fff;border:1px solid rgba(42,35,33,.08);
  text-align:center;box-shadow:0 14px 35px rgba(80,60,52,.06);margin-bottom:13px
}
.invite-card>small{color:#8a8d96;font-size:.68rem;font-weight:850;letter-spacing:.09em}
.invite-card>strong{
  display:block;margin:10px 0 17px;font-size:2.5rem;letter-spacing:.18em;
  font-variant-numeric:tabular-nums;color:#1a1c25
}
.invite-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.invite-actions button{
  border:0;border-radius:14px;padding:12px;background:#f4ede8;color:#272932;font-weight:800
}

.waiting-card{
  display:flex;gap:13px;align-items:center;padding:16px;border-radius:20px;
  background:#eef4ea;border:1px solid rgba(88,118,76,.08);margin-bottom:12px
}
.waiting-pulse{
  width:13px;height:13px;border-radius:50%;background:#75a56b;
  box-shadow:0 0 0 0 rgba(117,165,107,.34);animation:waitPulse 1.7s infinite
}
@keyframes waitPulse{70%{box-shadow:0 0 0 10px rgba(117,165,107,0)}100%{box-shadow:0 0 0 0 rgba(117,165,107,0)}}
.waiting-card>div{display:grid;gap:4px}
.waiting-card strong{font-size:.84rem}
.waiting-card small{font-size:.69rem;color:#6f776a;line-height:1.4}

.code-input-wrap{
  display:grid;gap:9px;padding:16px;margin-bottom:13px;
  border-radius:22px;background:#fff;border:1px solid rgba(42,35,33,.08)
}
.code-input-wrap>span{font-size:.75rem;color:#555a65;font-weight:800}
.code-input-wrap input{
  width:100%;border:0;outline:0;background:#f7f1ec;color:#181a23;
  border-radius:15px;padding:16px;text-align:center;font-size:1.6rem;
  font-weight:900;letter-spacing:.17em;text-transform:uppercase
}
.code-input-wrap small{font-size:.67rem;color:#858993;text-align:center}

.couple-home-hero{padding:18px 0 24px}
.partner-pair{
  display:grid;grid-template-columns:1fr 44px 1fr;align-items:center;gap:7px;margin-bottom:15px
}
.partner-card{
  min-width:0;padding:16px 10px;border-radius:25px;background:#fff;
  border:1px solid rgba(42,35,33,.08);text-align:center;box-shadow:0 10px 28px rgba(80,60,52,.05)
}
.partner-avatar{
  width:88px;height:88px;border-radius:29px;margin:0 auto 11px;overflow:hidden;
  display:grid;place-items:center;background:linear-gradient(145deg,#f6e7df,#eee3db)
}
.partner-avatar.other{background:linear-gradient(145deg,#eae5f4,#f4e8ef)}
.partner-avatar img{width:100%;height:100%;object-fit:cover}
.partner-avatar span{font-size:2.1rem}
.partner-card small{display:block;color:#8b8e97;font-size:.64rem;margin-bottom:2px}
.partner-card strong{display:block;font-size:.87rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.partner-card>span{display:block;color:#717580;font-size:.64rem;margin-top:4px;min-height:15px}
.partner-link{display:grid;grid-template-columns:1fr;justify-items:center;gap:3px}
.partner-link span{width:1px;height:22px;background:#ddcfc7}
.partner-link b{font-size:1.1rem;color:#bc6b5b}

.couple-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.couple-info-card{
  display:flex;align-items:center;gap:10px;padding:14px;border-radius:19px;
  background:#fff;border:1px solid rgba(42,35,33,.08)
}
.couple-info-card>span{font-size:1.15rem}
.couple-info-card>div{display:grid;gap:2px;min-width:0}
.couple-info-card small{font-size:.63rem;color:#898c95}
.couple-info-card strong{font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.couple-coming-card{
  display:flex;gap:12px;padding:16px;border-radius:20px;background:#f6eee9;
  border:1px solid rgba(62,48,43,.06)
}
.couple-coming-card>span{font-size:1.2rem}
.couple-coming-card>div{display:grid;gap:4px}
.couple-coming-card strong{font-size:.82rem}
.couple-coming-card small{font-size:.7rem;color:#70747f;line-height:1.45}

@media(max-width:380px){
  .invite-card>strong{font-size:2.05rem}
  .partner-avatar{width:74px;height:74px;border-radius:25px}
  .partner-pair{grid-template-columns:1fr 32px 1fr}
}

body.dark .account-card,
body.dark .auth-tab.active,
body.dark .invite-card,
body.dark .code-input-wrap,
body.dark .partner-card,
body.dark .couple-info-card{
  background:#292522;color:#f7f1ec;border-color:rgba(255,255,255,.08)
}
body.dark .auth-tabs{background:#34302d}
body.dark .couple-modal{
  background:radial-gradient(circle at 92% 5%,rgba(101,65,75,.35),transparent 23%),#1d1a18;
  color:#f7f1ec
}
body.dark .couple-hero p,body.dark .couple-home-hero p{color:#c7bcb5}
body.dark .couple-choice-card{color:#1b1d25}
body.dark .invite-card>strong{color:#fff8f3}
body.dark .code-input-wrap input{background:#35302d;color:#fff8f3}
body.dark .couple-info-card small,body.dark .partner-card>span{color:#bab0aa}