/* ===== Savoia Marmi Design System — tokens ===== */
:root{
  --anthracite:#1A1A1A; --a90:#2A2A2A; --a80:#3A3A3A; --a60:#5C5C5C; --a40:#8A8A8A; --a20:#C4C4C4; --a10:#E3E3E3; --a5:#F1F1F1; --white:#FFFFFF;
  --red:#C42034; --red-hover:#D22A3E; --red-deep:#6E241B; --red-tint:rgba(196,32,52,.08);
  --surface-page:var(--anthracite); --surface-raised:var(--a90); --surface-card:var(--a80); --surface-inverse:var(--white); --surface-inverse-raised:var(--a5);
  --text-primary:var(--white); --text-secondary:var(--a20); --text-tertiary:var(--a40); --text-on-inverse:var(--anthracite); --text-on-inverse-secondary:var(--a60);
  --border-subtle:rgba(255,255,255,.12); --border-strong:rgba(255,255,255,.28); --border-on-inverse:rgba(26,26,26,.16);
  --focus:0 0 0 1px var(--anthracite),0 0 0 3px var(--red);
  --ok:#4F7A5A; --warn:#B4652A;
  --font-display:"Jost",system-ui,sans-serif; --font-body:"Inter",system-ui,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --gutter:clamp(24px,4vw,64px);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-body);font-weight:300;font-size:15px;line-height:1.65;letter-spacing:.01em;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:300;letter-spacing:0;line-height:1.02;margin:0;text-wrap:balance}
h1{font-size:clamp(30px,3.2vw,44px);line-height:1.1}
h2{font-size:26px;font-weight:400;line-height:1.2}
h3{font-size:20px;font-weight:400;line-height:1.2}
p{margin:0}
b,strong{font-weight:500}
button{font:inherit;cursor:pointer;letter-spacing:inherit}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none;transition:opacity .16s var(--ease)}
a:hover{opacity:.72}
:focus-visible{outline:none;box-shadow:var(--focus)}
.cap{font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);line-height:1.4}
.cap.red{color:var(--red)}
.cap.white{color:var(--text-primary)}
.sec{color:var(--text-secondary)}
.ter{color:var(--text-tertiary)}
.s13{font-size:13px;font-weight:400;line-height:1.35}
.tnum{font-variant-numeric:tabular-nums}
.arrow{display:inline-block;transition:transform .28s var(--ease)}

/* ===== shell ===== */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--gutter);background:rgba(26,26,26,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle)}
.brand{display:flex;align-items:center;gap:16px}
.brand .logo{height:48px;width:auto;display:block}
.brand .word{font-family:var(--font-display);font-weight:400;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-primary)}
.brand .sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary)}
.nav{display:flex;align-items:center;gap:32px}
.nav button,.nav a{background:none;border:0;padding:0;font-family:var(--font-body);font-weight:400;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);transition:opacity .16s var(--ease);cursor:pointer}
.nav button:hover{opacity:.72}
.nav button.active{color:var(--text-primary);border-bottom:1px solid var(--red);padding-bottom:4px}
.nav .who{color:var(--text-tertiary);letter-spacing:.14em;font-family:var(--font-mono);font-size:11px}
.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--gutter);padding-block:48px 96px}
.layout{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px}
.layout.wide{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}
@media (max-width:900px){.layout,.layout.wide{grid-template-columns:1fr;gap:40px}.nav{gap:16px}.nav .who,.brand .sub{display:none}.wrap{padding-block:32px 64px}}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;border:1px solid var(--red);background:var(--red);color:var(--white);font-weight:400;font-size:14px;letter-spacing:.01em;border-radius:0;transition:background .16s var(--ease),border-color .16s var(--ease),opacity .16s var(--ease)}
.btn:hover{background:var(--red-hover);border-color:var(--red-hover)}
.btn:active{background:var(--red-deep);border-color:var(--red-deep)}
.btn.secondary{background:transparent;border-color:var(--border-strong);color:var(--text-primary)}
.btn.secondary:hover{background:transparent;border-color:var(--white)}
.btn.ghost{background:none;border-color:transparent;color:var(--text-secondary);padding:0 4px}
.btn.ghost:hover{opacity:.72;background:none;border-color:transparent}
.btn.inverse{background:var(--white);border-color:var(--white);color:var(--anthracite)}
.btn.inverse:hover{background:var(--a10);border-color:var(--a10)}
.btn.sm{height:36px;padding:0 14px;font-size:13px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:disabled:hover{background:var(--red);border-color:var(--red)}
.btn.secondary:disabled:hover{background:transparent;border-color:var(--border-strong)}
.link{background:none;border:0;padding:0;color:var(--text-secondary);font-weight:400;cursor:pointer;transition:opacity .16s var(--ease)}
.link:hover{opacity:.72}

/* ===== forms ===== */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary)}
.field input,.field select,.field textarea{height:44px;padding:0 14px;border:1px solid var(--border-subtle);background:transparent;color:var(--text-primary);border-radius:0;width:100%;min-width:0;font-weight:300;transition:border-color .16s var(--ease)}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--a40) 50%),linear-gradient(135deg,var(--a40) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.field select option{background:var(--a90);color:var(--white)}
.field textarea{height:auto;min-height:96px;padding:12px 14px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--border-strong)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--white);box-shadow:none}
.field input::placeholder,.field textarea::placeholder{color:var(--a60)}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.6)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:600px){.grid2{grid-template-columns:1fr}}

/* ===== login ===== */
.login{display:grid;grid-template-columns:7fr 5fr;min-height:100vh}
.login .hero{padding:var(--gutter);display:flex;flex-direction:column;justify-content:space-between;gap:64px;border-right:1px solid var(--border-subtle)}
.login .hero h1{font-size:clamp(40px,5.2vw,88px);font-weight:400;text-transform:uppercase;letter-spacing:.06em;line-height:1.02;max-width:16ch}
.login .hero h1 span{color:var(--red)}
.login .hero .lead{max-width:56ch;color:var(--text-secondary);font-size:18px;line-height:1.65}
.login .hero .specs{display:grid;grid-template-columns:repeat(3,auto);gap:48px;justify-content:start}
.login .hero .specs .n{font-family:var(--font-display);font-size:26px;font-weight:400;line-height:1.2}
.login .form{padding:var(--gutter);display:flex;align-items:center}
.login .card{width:100%;max-width:400px;display:flex;flex-direction:column;gap:24px}
.demo{border-top:1px solid var(--border-subtle);padding-top:24px;display:flex;flex-direction:column;gap:12px}
.demo .row{display:flex;gap:8px;flex-wrap:wrap}
.err{color:var(--red);font-size:13px;min-height:20px;font-weight:400}
@media (max-width:900px){.login{grid-template-columns:1fr;min-height:0}.login .hero{border-right:0;border-bottom:1px solid var(--border-subtle);gap:40px}.login .hero .specs{gap:24px}}

/* ===== structure ===== */
.stack{display:flex;flex-direction:column;gap:24px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rule{border:0;border-top:1px solid var(--border-subtle);margin:0}
.side{display:flex;flex-direction:column;gap:24px}
.side .menu{display:flex;flex-direction:column;border:1px solid var(--border-subtle)}
.side .menu button{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;padding:16px 20px;border:0;border-top:1px solid var(--border-subtle);border-left:2px solid transparent;background:none;color:var(--text-secondary);font-weight:400;font-size:15px;transition:background .16s var(--ease),color .16s var(--ease)}
.side .menu button:first-child{border-top:0}
.side .menu button:hover{color:var(--text-primary);background:var(--surface-raised)}
.side .menu button.active{color:var(--text-primary);background:var(--surface-raised);border-left-color:var(--red)}
.badge{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border:1px solid var(--border-subtle);border-radius:999px;color:var(--text-tertiary);white-space:nowrap}
.badge.red{border-color:var(--red);color:var(--red)}
.note{padding:16px 0;border-top:1px solid var(--border-subtle);color:var(--text-tertiary);font-size:13px;font-weight:400;line-height:1.5}
.crumbs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:400;color:var(--text-tertiary)}
.crumbs button{background:none;border:0;padding:0;color:var(--text-secondary);font:inherit;font-weight:400;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--border-strong);cursor:pointer;transition:color .16s var(--ease)}
.crumbs button:hover{color:var(--text-primary);text-decoration-color:var(--text-primary)}
.crumbs .cur{color:var(--text-primary)}
.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 20px;background:var(--surface-raised);border:1px solid var(--border-subtle)}
.actions .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);margin-right:8px}

.list{display:flex;flex-direction:column;border:1px solid var(--border-subtle)}
.list .item{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:20px;border:0;border-top:1px solid var(--border-subtle);border-left:2px solid transparent;background:none;width:100%;text-align:left;color:var(--text-primary);transition:background .16s var(--ease),border-color .16s var(--ease)}
.list .item:first-child{border-top:0}
button.item{cursor:pointer}
button.item:hover{background:var(--surface-raised);border-left-color:var(--red)}
.list .item .t{font-family:var(--font-display);font-size:20px;font-weight:400;line-height:1.2}
.list .item .s{color:var(--text-tertiary);font-size:13px;font-weight:400;margin-top:4px}
.list .item .right{text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.list .item .go{color:var(--text-secondary);font-size:14px;font-weight:400;white-space:nowrap}
.list .item .go .arrow{margin-left:6px}
button.item:hover .go{color:var(--text-primary)}
button.item:hover .go .arrow{transform:translateX(4px)}
.pcard{display:flex;flex-direction:column;gap:20px;padding:24px;border:1px solid var(--border-subtle);border-left:2px solid transparent;cursor:pointer;transition:background .16s var(--ease),border-color .16s var(--ease)}
.pcard:hover{background:var(--surface-raised);border-left-color:var(--red)}
.next{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:16px 20px;border:1px solid var(--border-subtle);background:var(--surface-raised)}
.next .v{font-weight:400;margin-top:4px}
@media (max-width:600px){.next{grid-template-columns:1fr;gap:12px}}

/* ===== client: status + diary ===== */
.status{display:grid;grid-template-columns:1fr 1fr;gap:24px 48px;padding:24px;border:1px solid var(--border-subtle);background:var(--surface-raised)}
.status .big{font-family:var(--font-display);font-size:clamp(22px,2.4vw,30px);font-weight:400;line-height:1.15;margin-top:6px}
.status .sub{color:var(--text-secondary);margin-top:6px}
.status .bar{grid-column:1/-1}
@media (max-width:640px){.status{grid-template-columns:1fr;padding:20px}}
.bar{display:flex;flex-direction:column;gap:8px}
.bar .track2{height:2px;background:var(--border-strong);position:relative}
.bar .track2 i{position:absolute;left:0;top:0;bottom:0;background:var(--white);transition:width .6s var(--ease)}
.bar .track2 b{position:absolute;top:-3px;width:8px;height:8px;background:var(--red);transform:translateX(-50%)}
.bar .lbls{display:flex;justify-content:space-between;gap:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary)}
.bar .lbls .on{color:var(--text-primary)}
.diary{display:flex;flex-direction:column}
.phase{display:grid;grid-template-columns:48px 1fr;gap:0 20px;padding:28px 0;border-top:1px solid var(--border-subtle);position:relative}
.phase:last-child{border-bottom:1px solid var(--border-subtle)}
.phase .mk{width:36px;height:36px;border-radius:50%;border:1px solid var(--border-strong);display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary);background:var(--surface-page)}
.phase.done .mk{background:var(--white);border-color:var(--white);color:var(--anthracite)}
.phase.current .mk{background:var(--red);border-color:var(--red);color:var(--white)}
.phase .hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.phase .hd h3{font-size:22px;font-weight:400}
.phase.todo .hd h3{color:var(--text-tertiary);font-weight:300}
.phase .when{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary)}
.phase.current .when{color:var(--red)}
.phase .body{display:flex;flex-direction:column;gap:16px;margin-top:12px}
.phase .empty{color:var(--text-tertiary);font-size:13px;font-weight:400}
.phase .gallery{display:flex;flex-wrap:wrap}
.phase .tile{width:min(220px,100%)}
.pcard .bar{margin-top:4px}
.pcard .hd2{display:flex;flex-direction:column;gap:4px}
.pcard .now{font-weight:400;color:var(--text-primary)}
@media (max-width:640px){.phase{grid-template-columns:36px 1fr;gap:0 14px}}
.state{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.state::before{content:"";width:6px;height:6px;background:var(--a60)}
.state.live::before{background:var(--red)}
.state.done::before{background:var(--white)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.kpi{padding:20px 0;display:flex;flex-direction:column;gap:6px}
.kpi+.kpi{padding-left:24px;border-left:1px solid var(--border-subtle)}
.kpi .n{font-family:var(--font-display);font-size:clamp(30px,3.2vw,44px);font-weight:300;line-height:1}
@media (max-width:600px){.kpis{grid-template-columns:1fr}.kpi+.kpi{padding-left:0;border-left:0;border-top:1px solid var(--border-subtle)}}

/* ===== project header ===== */
.phead{display:flex;flex-direction:column;gap:24px}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px 32px;border-top:1px solid var(--border-subtle);padding-top:16px}
.meta .v{font-weight:400;margin-top:4px}
.back{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;color:var(--text-tertiary);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .16s var(--ease)}
.back:hover{color:var(--text-primary)}

/* ===== timeline ===== */
.tl{border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);padding:24px 0 28px}
.tl .dates{display:flex;justify-content:space-between;gap:16px;margin-bottom:28px}
.tl .dates .d{display:flex;flex-direction:column;gap:4px}
.tl .dates .d:last-child{text-align:right}
.tl .dates .v{font-family:var(--font-display);font-size:20px;font-weight:400;line-height:1.2}
.track{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr)}
.track::before{content:"";position:absolute;left:calc(100%/var(--n)/2);right:calc(100%/var(--n)/2);top:18px;height:1px;background:var(--border-strong)}
.track::after{content:"";position:absolute;left:calc(100%/var(--n)/2);top:18px;height:1px;background:var(--white);width:calc((100% - 100%/var(--n)) * var(--p));transition:width .6s var(--ease)}
.node{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:0 8px}
.node .c{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border-strong);background:var(--surface-page);position:relative;z-index:1;font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary)}
.node.done .c{background:var(--white);border-color:var(--white);color:var(--anthracite)}
.node.done .c svg{display:block}
.node.current .c{border-color:var(--red);background:var(--red);color:var(--white)}
.node.current .c::after{content:"";position:absolute;inset:-6px;border:1px solid var(--red);border-radius:50%;opacity:.5}
.node .txt{display:contents}
.node .l{font-size:14px;font-weight:400;line-height:1.35;max-width:14ch;color:var(--text-primary)}
.node.todo .l{color:var(--text-tertiary);font-weight:300}
.node .d{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary)}
.node.current .d{color:var(--red)}
.node .adv{margin-top:4px}
@media (prefers-reduced-motion:no-preference){
  .node.current .c::after{animation:ring 2.8s var(--ease) infinite}
  @keyframes ring{0%,100%{inset:-6px;opacity:.5}50%{inset:-9px;opacity:.2}}
}
@media (max-width:640px){
  .track{grid-template-columns:1fr;gap:20px}
  .track::before{left:18px;right:auto;top:18px;bottom:18px;width:1px;height:auto}
  .track::after{left:18px;top:18px;width:1px;height:calc((100% - 36px) * var(--p))}
  .node{flex-direction:row;text-align:left;align-items:flex-start;gap:16px;padding:0}
  .node .txt{display:flex;flex-direction:column;gap:4px;padding-top:4px}
  .node .l{max-width:none}
}

/* ===== gallery ===== */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.tile{position:relative;background:var(--surface-page);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border-subtle)}
.tile .img{aspect-ratio:4/3;max-width:100%;background:var(--surface-card);background-size:cover;background-position:center;position:relative;overflow:hidden;transition:transform .6s var(--ease)}
.tile:hover .img{transform:scale(1.03)}
.tile .img .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--a60)}
.tile .img::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to top,rgba(26,26,26,.55),transparent);pointer-events:none}
.tile .img .play{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--white);z-index:1}
.tile .img .play span{border:1px solid var(--white);padding:8px 14px;background:rgba(26,26,26,.55)}
.tile .info{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;background:var(--surface-page);position:relative;z-index:1}
.tile .info .c{font-size:13px;font-weight:400;line-height:1.35;color:var(--text-secondary)}
.ph1{background-color:#3A3A3A}.ph2{background-color:#2F3234}.ph3{background-color:#44474A}.ph4{background-color:#34373A}.ph5{background-color:#3D3F42}
.addtile{aspect-ratio:4/3;max-width:100%;border:1px dashed var(--border-strong);background:var(--surface-page);display:grid;place-items:center;color:var(--text-secondary);font-weight:400;font-size:14px;cursor:pointer;transition:color .16s var(--ease)}
.addtile:hover{color:var(--text-primary)}

/* ===== questions ===== */
.qa{display:flex;flex-direction:column;gap:16px}
.msg{display:flex;flex-direction:column;gap:6px;max-width:64ch;padding:16px 0;border-top:1px solid var(--border-subtle)}
.msg.admin{padding-left:16px;border-left:1px solid var(--red)}
.msg .body{color:var(--text-secondary)}
.compose{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;padding-top:16px;border-top:1px solid var(--border-subtle)}
.compose textarea{min-height:80px;padding:12px 14px;border:1px solid var(--border-subtle);background:transparent;color:var(--text-primary);border-radius:0;font-weight:300;width:100%;resize:vertical}
.compose textarea:focus{border-color:var(--white);box-shadow:none}
.compose textarea::placeholder{color:var(--a60)}
@media (max-width:600px){.compose{grid-template-columns:1fr}}

/* ===== process builder ===== */
.builder{display:grid;grid-template-columns:1fr 1fr;gap:48px}
@media (max-width:760px){.builder{grid-template-columns:1fr;gap:32px}}
.opts{display:flex;flex-direction:column}
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border:0;border-top:1px solid var(--border-subtle);background:none;text-align:left;color:var(--text-primary);font-weight:300;font-size:15px;transition:opacity .16s var(--ease)}
.opt:last-child{border-bottom:1px solid var(--border-subtle)}
.opt{padding:14px 12px;border-left:2px solid transparent}
.opt:hover{background:var(--surface-raised);border-left-color:var(--red)}
.opt:disabled{opacity:.4;cursor:not-allowed}
.opt .plus{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.opt:disabled .plus{color:var(--text-tertiary)}
.seq{display:flex;flex-direction:column;min-height:120px}
.seq .empty{border:1px dashed var(--border-subtle);padding:32px 16px;text-align:center;color:var(--text-tertiary);font-size:13px;font-weight:400}
.step{display:flex;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--border-subtle)}
.step:last-child{border-bottom:1px solid var(--border-subtle)}
.step .num{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--red);min-width:24px}
.step .name{flex:1;font-weight:400}
.step .ctl{display:flex;gap:4px}
.step .ctl button{border:1px solid var(--border-subtle);background:none;width:32px;height:32px;color:var(--text-secondary);font-size:14px;transition:border-color .16s var(--ease)}
.step .ctl button:hover{border-color:var(--white);color:var(--white)}
.step .ctl button:disabled{opacity:.4;cursor:not-allowed}
.step .ctl button:disabled:hover{border-color:var(--border-subtle);color:var(--text-secondary)}
.section{display:flex;flex-direction:column;gap:24px;padding-top:32px;border-top:1px solid var(--border-subtle)}
.section .h{display:flex;align-items:baseline;gap:16px}
.inverse{background:var(--surface-inverse);color:var(--text-on-inverse);padding:24px}
.inverse .field label{color:var(--text-on-inverse-secondary)}
.inverse .field input,.inverse .field select{border-color:var(--border-on-inverse);color:var(--text-on-inverse)}
.inverse .field input:focus,.inverse .field select:focus{border-color:var(--anthracite)}
.inverse .field select{background-image:linear-gradient(45deg,transparent 50%,var(--a60) 50%),linear-gradient(135deg,var(--a60) 50%,transparent 50%)}
.inverse .field select option{background:var(--white);color:var(--anthracite)}
.inverse .field input::placeholder{color:var(--a40)}
.inverse .btn.secondary{border-color:rgba(26,26,26,.4);color:var(--anthracite)}
.inverse .btn.secondary:hover{border-color:var(--anthracite)}
.inverse .cap{color:var(--text-on-inverse-secondary)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--white);color:var(--anthracite);padding:12px 20px;font-size:13px;font-weight:400;z-index:50;max-width:calc(100% - 32px)}

/* ===== aggiunte app reale ===== */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(26,26,26,.92);display:grid;place-items:center;padding:24px}
.lightbox img,.lightbox video{max-width:100%;max-height:calc(100vh - 120px);display:block;background:var(--a90)}
.lightbox .close{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));right:16px;background:none;border:1px solid var(--border-strong);color:var(--white);width:44px;height:44px;font-size:22px;line-height:1}
.lightbox .close:hover{border-color:var(--white)}
.lightbox .cap2{color:var(--text-secondary);font-size:13px;font-weight:400;text-align:center;max-width:60ch;margin-top:12px}
.tile.clickable{cursor:pointer}
.tile .img img{width:100%;height:100%;object-fit:cover;display:block}
.tile .del{position:absolute;top:8px;right:8px;z-index:2;background:rgba(26,26,26,.7);border:1px solid var(--border-strong);color:var(--white);width:32px;height:32px;font-size:16px;opacity:0;transition:opacity .16s var(--ease)}
.tile:hover .del{opacity:1}
.reveal{padding:20px;border:1px solid var(--red);background:var(--red-tint);display:flex;flex-direction:column;gap:12px}
.reveal .pw{font-family:var(--font-mono);font-size:22px;letter-spacing:.06em;color:var(--white)}
.loading{color:var(--text-tertiary);font-size:13px;font-weight:400;padding:48px 0;text-align:center}
.progress{height:2px;background:var(--border-subtle);position:relative;overflow:hidden}
.progress i{position:absolute;left:0;top:0;bottom:0;background:var(--red);width:0;transition:width .28s var(--ease)}
.menu-account{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--border-subtle)}
.btn.danger{background:transparent;border-color:var(--border-subtle);color:var(--text-tertiary)}
.btn.danger:hover{border-color:var(--red);color:var(--red);background:transparent}
.hint{font-size:13px;font-weight:400;color:var(--text-tertiary)}
.tile .img video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.lightbox video{max-width:min(100%,1100px)}

.storage{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--border-subtle)}
.storage .progress{height:4px}
.langsw{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--text-tertiary)}
.langsw button{background:none;border:0;padding:4px 2px;color:var(--text-tertiary);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .16s var(--ease)}
.langsw button:hover{color:var(--text-primary)}
.langsw button.on{color:var(--text-primary);border-bottom:1px solid var(--red)}
.login .hero .row-between{align-items:flex-start}
@media (max-width:900px){.nav .langsw{display:inline-flex}}