/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@14.2.35_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../../node_modules/.pnpm/next@14.2.35_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/styles/prototypes.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ══════════════════════════════════════════
   RESET & TOKENS
══════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --sage:#C8D9CC;--sage-dk:#2D3E32;--sage-md:#4A7A56;--sage-lt:#E8F2EA;
  --ink:#1C2820;--page:#0D1210;
  --glass:rgba(13,18,16,0.72);--glass-b:rgba(200,217,204,0.12);
  --r:12px;--rp:40px;
}
html,body{height:100%;font-family:'Satoshi',sans-serif;background:var(--page);color:#fff;overflow:hidden}

/* ══════════════════════════════════════════
   LAYOUT SHELL
══════════════════════════════════════════ */
.app{display:flex;height:100vh;width:100vw;overflow:hidden}

/* ── SIDEBAR (desktop only) ── */
.sidebar{
  width:220px;flex-shrink:0;height:100vh;
  background:rgba(10,14,11,0.97);
  border-right:1px solid rgba(200,217,204,0.07);
  display:flex;flex-direction:column;
  transition:transform .3s;
  z-index:30;
}
.sb-logo{padding:22px 20px 18px;border-bottom:1px solid rgba(200,217,204,0.07)}
.sb-logo-text{font-size:19px;font-weight:700;letter-spacing:-0.04em;color:#fff}
.sb-logo-text span{color:var(--sage)}
.sb-logo-tag{font-size:9px;color:rgba(200,217,204,0.35);letter-spacing:.08em;font-family:'Cormorant Garamond',serif;font-style:italic;margin-top:2px}

.sb-filters{flex:1;overflow-y:auto;padding:14px 12px;scrollbar-width:none}
.sb-filters::-webkit-scrollbar{display:none}
.sf-label{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(200,217,204,0.28);padding:0 8px;margin-bottom:9px}
.sf-pill{width:100%;display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;font-size:13px;font-weight:500;color:rgba(200,217,204,0.6);cursor:pointer;transition:all .15s;background:transparent;border:none;font-family:'Satoshi',sans-serif;text-align:left;margin-bottom:2px}
.sf-pill:hover{background:rgba(200,217,204,0.07);color:rgba(200,217,204,0.9)}
.sf-pill.on{background:rgba(200,217,204,0.12);color:var(--sage);font-weight:700}
.sf-sep{height:1px;background:rgba(200,217,204,0.07);margin:10px 12px}
.sb-nav-dots{display:flex;flex-direction:column;gap:7px;align-items:center;padding:16px 0 0}
.nd{width:5px;height:5px;border-radius:50%;background:rgba(200,217,204,0.2);cursor:pointer;transition:all .2s;border:none}
.nd.on{background:var(--sage);height:18px;border-radius:3px}

.sb-btns{padding:14px 12px;display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(200,217,204,0.07)}
.sb-btn{display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:9px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .2s;border:none;font-family:'Satoshi',sans-serif;width:100%;text-align:left}
.sb-btn-filter{background:rgba(255,255,255,0.06);border:1px solid rgba(200,217,204,0.1);color:rgba(200,217,204,0.6)}
.sb-btn-filter:hover{background:rgba(255,255,255,0.1);color:rgba(200,217,204,0.9)}
.sb-btn-contatti{background:rgba(200,217,204,0.12);border:1px solid rgba(200,217,204,0.22);color:var(--sage)}
.sb-btn-contatti:hover{background:rgba(200,217,204,0.2)}

/* ── CENTRO: FEED ── */
.feed-col{
  flex:1;display:flex;flex-direction:column;
  min-width:0;position:relative;
}

/* Topbar mobile */
.topbar{
  height:56px;flex-shrink:0;
  display:flex;align-items:center;padding:0 16px;gap:12px;
  background:rgba(10,14,11,0.92);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(200,217,204,0.07);
  position:relative;z-index:20;
}
.tb-logo{font-size:20px;font-weight:700;letter-spacing:-0.04em;color:#fff;flex:1}
.tb-logo span{color:var(--sage)}
.tb-logo-tag{display:none}
.tb-btn{width:36px;height:36px;border-radius:50%;background:rgba(200,217,204,0.1);border:1px solid rgba(200,217,204,0.2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(200,217,204,0.85);transition:all .18s;flex-shrink:0}
.tb-btn:hover,.tb-btn:active{background:rgba(200,217,204,0.22)}

/* Pills strip */
.pills-strip{
  flex-shrink:0;display:flex;gap:7px;padding:10px 14px;
  overflow-x:auto;scrollbar-width:none;
  background:rgba(10,14,11,0.6);backdrop-filter:blur(10px);
}
.pills-strip::-webkit-scrollbar{display:none}
.pill{flex-shrink:0;padding:6px 13px;border-radius:var(--rp);font-size:12px;font-weight:500;white-space:nowrap;cursor:pointer;border:1px solid rgba(200,217,204,0.2);background:rgba(13,18,16,0.65);color:rgba(200,217,204,0.75);backdrop-filter:blur(10px);transition:all .2s;font-family:'Satoshi',sans-serif}
.pill.on{background:var(--sage);color:var(--ink);border-color:var(--sage);font-weight:700}
.pill:hover:not(.on){background:rgba(200,217,204,0.1)}
.pill-icon{padding:6px 10px;display:flex;align-items:center;justify-content:center;color:rgba(200,217,204,0.65)}

/* Feed scroll */
.feed-scroll{flex:1;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;position:relative}
.feed-scroll::-webkit-scrollbar{display:none}

/* Card */
.card{
  width:100%;height:calc(100vh - 56px - 44px); /* viewport - topbar - pills */
  position:relative;scroll-snap-align:start;overflow:hidden;flex-shrink:0;
}
.bg-a{background:linear-gradient(160deg,#1b2820,#223020,#182018)}
.bg-b{background:linear-gradient(150deg,#1e2b25,#263822,#1a2820)}
.bg-c{background:linear-gradient(155deg,#1c2620,#253420,#1a2a1c)}
.room-win{position:absolute;border-radius:2px;background:rgba(180,220,190,0.18);box-shadow:0 0 60px 20px rgba(180,220,190,0.08);border:1px solid rgba(180,220,190,0.14)}
.room-floor{position:absolute;bottom:0;left:0;right:0;height:35%;border-top:1px solid rgba(200,217,204,0.07);background:rgba(160,200,170,0.05)}
.room-sofa{position:absolute;border-radius:5px 5px 0 0;background:rgba(100,150,110,0.3);border-top:2px solid rgba(140,190,150,0.35)}
.room-table{position:absolute;background:rgba(120,160,130,0.2);border:1px solid rgba(160,200,170,0.12);border-radius:3px}
.grad-t{position:absolute;top:0;left:0;right:0;height:200px;background:linear-gradient(to bottom,rgba(13,18,16,0.8),transparent);z-index:5;pointer-events:none}
.grad-b{position:absolute;bottom:0;left:0;right:0;height:65%;background:linear-gradient(to top,rgba(13,18,16,0.97) 0%,rgba(13,18,16,0.5) 40%,transparent 100%);z-index:5;pointer-events:none}

/* Tag overlay */
.card-tag{position:absolute;top:14px;left:14px;z-index:10;display:flex;gap:7px;flex-wrap:wrap}
.vtag{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.02em;backdrop-filter:blur(8px)}
.tag-new{background:rgba(200,217,204,0.2);color:var(--sage);border:1px solid rgba(200,217,204,0.28)}
.tag-excl{background:rgba(160,140,220,0.18);color:#B0A0E0;border:1px solid rgba(160,140,220,0.24)}
.tag-nc{background:rgba(100,150,220,0.18);color:#90B8E8;border:1px solid rgba(100,150,220,0.24)}

/* Play */
.play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);z-index:6;width:58px;height:58px;border-radius:50%;background:rgba(200,217,204,0.14);border:1.5px solid rgba(200,217,204,0.45);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s}
.card:hover .play-btn,.card.playing .play-btn{opacity:.85}

/* Nav arrows (desktop) */
.feed-arrows{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:15;display:flex;flex-direction:column;gap:7px}
.farr{width:34px;height:34px;border-radius:50%;background:rgba(13,18,16,0.6);border:1px solid rgba(200,217,204,0.18);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(200,217,204,0.7);transition:all .2s}
.farr:hover{background:rgba(200,217,204,0.15);color:#fff}
.farr:disabled{opacity:.2;cursor:default;pointer-events:none}

/* Progress bar */
.vbar{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(200,217,204,0.1);z-index:25}
.vbar-fill{height:100%;background:var(--sage);transition:width .1s linear}

/* Card info overlay (mobile) */
.cinfo{position:absolute;bottom:0;left:0;right:0;z-index:20;padding:0 16px 24px}
.prop-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:11px;font-weight:700;margin-bottom:9px;letter-spacing:.02em}
.price{font-size:38px;font-weight:700;letter-spacing:-0.05em;color:#fff;line-height:1;margin-bottom:7px}
.addr{font-size:14px;color:rgba(255,255,255,0.85);font-weight:500;margin-bottom:5px;letter-spacing:-0.01em}
.specs-row{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.spec{font-size:12px;color:rgba(255,255,255,0.45)}
.sdot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,0.2);flex-shrink:0}
.agent-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ag-av{width:33px;height:33px;border-radius:50%;background:var(--sage-dk);border:1.5px solid rgba(200,217,204,0.35);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--sage-lt);flex-shrink:0}
.ag-name{font-size:13px;font-weight:700;color:#fff}
.ag-city{font-size:11px;color:rgba(255,255,255,0.4);margin-top:1px}
.ag-verified{display:inline-flex;align-items:center;gap:3px;background:rgba(74,122,86,0.25);border:1px solid rgba(74,122,86,0.4);color:var(--sage);font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;margin-left:auto;flex-shrink:0}
.cta-row{display:flex;gap:9px}
.cta{flex:1;padding:14px 10px;border-radius:50px;font-size:13.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .2s;border:none;font-family:'Satoshi',sans-serif}
.cta-main{background:var(--sage);color:var(--ink)}
.cta-main:hover,.cta-main:active{background:#D8E8DC}
.cta-det{background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2)!important;backdrop-filter:blur(8px)}
.cta-det:hover,.cta-det:active{background:rgba(255,255,255,0.17)}

/* ── PANNELLO DESTRO (desktop) ── */
.info-panel{
  width:300px;flex-shrink:0;
  height:100vh;overflow-y:auto;scrollbar-width:none;
  background:rgba(10,14,11,0.97);
  border-left:1px solid rgba(200,217,204,0.07);
  padding:24px 22px;display:flex;flex-direction:column;gap:0;
}
.info-panel::-webkit-scrollbar{display:none}
.ip-agent{display:flex;align-items:center;gap:11px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid rgba(200,217,204,0.07)}
.ip-av{width:38px;height:38px;border-radius:50%;background:var(--sage-dk);border:1.5px solid rgba(200,217,204,0.3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--sage-lt);flex-shrink:0}
.ip-ag-name{font-size:13.5px;font-weight:700;color:#fff}
.ip-ag-city{font-size:11px;color:rgba(255,255,255,0.38);margin-top:1px}
.ip-verified{display:inline-flex;align-items:center;gap:3px;background:rgba(74,122,86,0.2);border:1px solid rgba(74,122,86,0.35);color:var(--sage);font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;margin-left:auto;flex-shrink:0}
.ip-price{font-size:34px;font-weight:700;letter-spacing:-0.05em;color:#fff;line-height:1;margin-bottom:6px}
.ip-addr{font-size:14px;color:rgba(255,255,255,0.82);font-weight:500;margin-bottom:5px;letter-spacing:-0.01em}
.ip-specs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.ip-spec{font-size:11.5px;color:rgba(255,255,255,0.4);display:flex;align-items:center;gap:5px}
.ip-spec::before{content:'';width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,0.18);display:inline-block}
.ip-spec:first-child::before{display:none}
.ip-ctas{display:flex;gap:9px;margin-bottom:22px}
.ip-cta{flex:1;padding:13px 10px;border-radius:50px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .2s;border:none;font-family:'Satoshi',sans-serif}
.ip-cta-main{background:var(--sage);color:var(--ink)}
.ip-cta-main:hover{background:#D8E8DC}
.ip-cta-det{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.18)!important;backdrop-filter:blur(8px)}
.ip-cta-det:hover{background:rgba(255,255,255,0.14)}
.ip-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:16px}
.ip-gi{background:rgba(200,217,204,0.05);border:1px solid rgba(200,217,204,0.09);border-radius:9px;padding:10px 11px}
.ip-gi-lbl{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(200,217,204,0.3);margin-bottom:3px}
.ip-gi-val{font-size:15px;font-weight:700;color:#fff;letter-spacing:-0.02em;line-height:1}
.ip-gi-sub{font-size:9.5px;color:rgba(255,255,255,0.3);margin-top:1px}
.ip-ape{display:flex;align-items:center;gap:11px;padding:11px 13px;background:rgba(45,62,50,0.3);border:1px solid rgba(74,122,86,0.22);border-radius:10px;margin-bottom:16px}
.ip-ape-badge{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;flex-shrink:0}
.ip-ape-name{font-size:12.5px;font-weight:700;color:#fff}
.ip-ape-kwh{font-size:10px;color:rgba(200,217,204,0.4);margin-top:1px}
.ip-ape-bar{display:flex;gap:2px;flex:1}
.ip-ape-seg{height:6px;border-radius:2px;flex:1;opacity:.2}
.ip-ape-seg.lit{opacity:1}
.ip-feats{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.ip-feat{display:flex;align-items:center;gap:5px;padding:5px 9px;background:rgba(200,217,204,0.05);border:1px solid rgba(200,217,204,0.09);border-radius:8px;font-size:11px;font-weight:500;color:rgba(255,255,255,0.65)}
.ip-feat-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.ip-feat.off .ip-feat-dot{background:rgba(255,255,255,0.1)}
.ip-feat.off span{color:rgba(255,255,255,0.2)}
.ip-kb{margin-top:auto;padding-top:16px;font-size:10.5px;color:rgba(255,255,255,0.14);text-align:center}

/* ══════════════════════════════════════════
   SHEET / MODAL (responsive)
══════════════════════════════════════════ */
.overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);display:none;align-items:flex-end;justify-content:center}
.overlay.open{display:flex;animation:bgIn .2s ease}
@keyframes bgIn{from{background:transparent}to{background:rgba(0,0,0,0.7)}}

/* Sheet (mobile default) */
.sheet{width:100%;max-height:90%;background:#101510;border-radius:22px 22px 0 0;border-top:1px solid rgba(200,217,204,0.12);display:flex;flex-direction:column;animation:shUp .28s cubic-bezier(.2,.8,.4,1)}
@keyframes shUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sh-handle{width:38px;height:4px;border-radius:2px;background:rgba(200,217,204,0.18);margin:12px auto 13px;flex-shrink:0}
.sh-hd{font-size:16px;font-weight:700;color:#fff;padding:0 20px 14px;border-bottom:1px solid rgba(200,217,204,0.07);flex-shrink:0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sh-hd-sub{font-size:11px;color:rgba(200,217,204,0.35);font-weight:400;margin-top:2px}
.sh-close{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,0.07);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,0.45);flex-shrink:0;margin-top:-2px;transition:background .15s}
.sh-close:hover{background:rgba(255,255,255,0.14)}
.sh-body{flex:1;overflow-y:auto;padding:0 20px 8px;scrollbar-width:none}
.sh-body::-webkit-scrollbar{display:none}
.sh-foot{padding:12px 20px 28px;border-top:1px solid rgba(200,217,204,0.07);flex-shrink:0}

/* ══════════════════════════════════════════
   DETTAGLI CONTENT
══════════════════════════════════════════ */
.det-hero{background:linear-gradient(135deg,var(--sage-dk),#1a2618);border:1px solid rgba(200,217,204,0.1);border-radius:13px;padding:16px 18px;margin:14px 0 12px;display:flex;align-items:flex-end;justify-content:space-between}
.dh-price{font-size:26px;font-weight:700;color:#fff;letter-spacing:-0.04em;line-height:1}
.dh-neg{font-size:11px;color:rgba(200,217,204,0.4);margin-top:3px}
.dh-sqm-val{font-size:16px;font-weight:700;color:var(--sage);letter-spacing:-0.02em}
.dh-sqm-lbl{font-size:9px;color:rgba(200,217,204,0.35);margin-top:3px;text-transform:uppercase;letter-spacing:.06em;text-align:right}
.det-sec{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(200,217,204,0.3);margin:16px 0 9px;display:flex;align-items:center;gap:8px}
.det-sec::after{content:'';flex:1;height:1px;background:rgba(200,217,204,0.07)}
.det-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}
.dg-item{background:rgba(200,217,204,0.05);border:1px solid rgba(200,217,204,0.09);border-radius:10px;padding:10px 12px}
.dgi-lbl{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(200,217,204,0.3);margin-bottom:3px}
.dgi-val{font-size:15px;font-weight:700;color:#fff;letter-spacing:-0.02em;line-height:1}
.dgi-sub{font-size:9.5px;color:rgba(255,255,255,0.3);margin-top:2px}
.feat-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.feat{display:flex;align-items:center;gap:5px;padding:6px 10px;background:rgba(200,217,204,0.05);border:1px solid rgba(200,217,204,0.09);border-radius:8px}
.feat-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.fd-on{background:var(--sage-md)}.fd-off{background:rgba(255,255,255,0.1)}
.feat-name{font-size:11.5px;font-weight:500;color:rgba(255,255,255,0.7)}
.feat.inactive .feat-name{color:rgba(255,255,255,0.25)}
.ape-wrap{background:rgba(45,62,50,0.35);border:1px solid rgba(74,122,86,0.25);border-radius:12px;padding:13px 15px;margin-bottom:12px}
.ape-top{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.ape-badge{width:42px;height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;flex-shrink:0}
.ape-name{font-size:14px;font-weight:700;color:#fff}
.ape-kwh{font-size:11px;color:rgba(200,217,204,0.4);margin-top:2px}
.ape-bar{display:flex;gap:3px}
.ape-seg{height:10px;border-radius:3px;flex:1;opacity:.2;display:flex;align-items:center;justify-content:center}
.ape-seg.lit{opacity:1}
.ape-seg-lbl{font-size:7px;font-weight:700;color:rgba(255,255,255,0.9)}
.desc-text{font-size:13.5px;color:rgba(255,255,255,0.58);line-height:1.72;margin-bottom:8px}
.desc-text strong{color:rgba(255,255,255,0.88);font-weight:600}
.desc-extra{display:none}
.desc-extra.open{display:inline}
.desc-more{font-size:12.5px;font-weight:700;color:var(--sage-md);background:none;border:none;cursor:pointer;font-family:'Satoshi',sans-serif;padding:0;display:inline-flex;align-items:center;gap:4px;margin-bottom:12px}

/* Gallery */
.gal-main{width:100%;aspect-ratio:16/9;border-radius:11px;overflow:hidden;background:#0a100c;position:relative;margin-bottom:6px;cursor:pointer}
.gal-img{width:100%;height:100%;transition:opacity .18s}
.gal-label{position:absolute;bottom:8px;left:10px;font-size:10.5px;font-weight:700;color:rgba(255,255,255,0.65);background:rgba(0,0,0,0.45);backdrop-filter:blur(8px);padding:2px 9px;border-radius:14px}
.gal-counter{position:absolute;top:8px;right:10px;font-size:10.5px;font-weight:700;color:rgba(255,255,255,0.7);background:rgba(0,0,0,0.45);backdrop-filter:blur(8px);padding:2px 9px;border-radius:14px}
.gal-arr{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,0.8);backdrop-filter:blur(8px);z-index:5}
.gal-arr-l{left:8px}.gal-arr-r{right:8px}
.gal-thumbs{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;margin-bottom:4px}
.gal-thumbs::-webkit-scrollbar{display:none}
.gthumb{width:58px;height:42px;border-radius:7px;flex-shrink:0;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .2s;background:#0a100c}
.gthumb.active{border-color:var(--sage)}

.plani-card{background:rgba(255,255,255,0.03);border:1px solid rgba(200,217,204,0.1);border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .2s;margin-bottom:4px}
.plani-card:hover{border-color:rgba(200,217,204,0.25)}
.plani-card svg{display:block;width:100%}
.plani-footer{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;border-top:1px solid rgba(200,217,204,0.07)}
.pf-txt{font-size:11px;color:rgba(200,217,204,0.35)}
.pf-zoom{font-size:11px;font-weight:700;color:var(--sage-md);display:flex;align-items:center;gap:4px}

/* ══════════════════════════════════════════
   CONTATTO SHEET
══════════════════════════════════════════ */
.agent-card-c{display:flex;align-items:center;gap:13px;background:rgba(200,217,204,0.06);border:1px solid rgba(200,217,204,0.1);border-radius:12px;padding:13px 15px;margin-bottom:16px}
.big-av{width:46px;height:46px;border-radius:50%;background:var(--sage-dk);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--sage-lt);flex-shrink:0;border:2px solid rgba(200,217,204,0.2)}
.ac-name{font-size:14.5px;font-weight:700;color:#fff}
.ac-meta{font-size:11px;color:rgba(255,255,255,0.38);margin-top:2px}
.methods{display:flex;gap:9px;margin-bottom:14px}
.method{flex:1;padding:12px 6px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font-size:12px;font-weight:600;font-family:'Satoshi',sans-serif;transition:all .2s}
.m-call{background:rgba(200,217,204,0.12);border:1px solid rgba(200,217,204,0.25);color:var(--sage)}
.m-call:hover{background:rgba(200,217,204,0.2)}
.m-msg{background:rgba(37,211,102,0.12);border:1px solid rgba(37,211,102,0.25);color:#5CDB8E}
.m-msg:hover{background:rgba(37,211,102,0.2)}
.m-mail{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.65)}
.prop-row-c{background:rgba(200,217,204,0.05);border:1px solid rgba(200,217,204,0.09);border-radius:10px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between}
.prc-label{font-size:11px;color:rgba(255,255,255,0.38)}
.prc-val{font-size:13.5px;font-weight:700;color:#fff;letter-spacing:-0.02em}

/* ══════════════════════════════════════════
   LEAD FORM
══════════════════════════════════════════ */
.lf-choice-row{display:flex;flex-direction:column;gap:8px;margin:14px 0 16px}
.lf-choice{padding:13px 14px;border-radius:12px;cursor:pointer;border:1.5px solid rgba(200,217,204,0.12);background:rgba(200,217,204,0.04);transition:all .2s;display:flex;align-items:center;gap:12px}
.lf-choice:hover,.lf-choice:active{background:rgba(200,217,204,0.08)}
.lf-choice.on{border-color:var(--sage);background:rgba(200,217,204,0.12)}
.lf-choice-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lf-ic-sell{background:rgba(200,217,204,0.15);border:1px solid rgba(200,217,204,0.2)}
.lf-ic-agent{background:rgba(74,122,86,0.2);border:1px solid rgba(74,122,86,0.3)}
.lf-choice-label{font-size:13.5px;font-weight:700;color:#fff;line-height:1.25}
.lf-choice-sub{font-size:11px;color:rgba(255,255,255,0.38);margin-top:3px;font-weight:400}
.lf-choice.on .lf-choice-label{color:var(--sage)}
.lf-form-section{display:none}
.lf-form-section.visible{display:block}
.lf-divider{height:1px;background:rgba(200,217,204,0.08);margin:2px 0 14px}
.lf-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:20px;font-size:11px;font-weight:700;background:rgba(200,217,204,0.1);border:1px solid rgba(200,217,204,0.18);color:var(--sage);margin-bottom:12px}
.lf-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.lf-field{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.lf-label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(200,217,204,0.4)}
.lf-input{padding:11px 13px;border-radius:9px;background:rgba(255,255,255,0.05);border:1px solid rgba(200,217,204,0.14);font-size:13.5px;font-family:'Satoshi',sans-serif;color:#fff;outline:none;transition:border-color .2s;width:100%}
.lf-input::placeholder{color:rgba(255,255,255,0.2)}
.lf-input:focus{border-color:rgba(200,217,204,0.4)}
.lf-consent{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;background:rgba(255,255,255,0.03);border:1px solid rgba(200,217,204,0.09);border-radius:10px;margin:12px 0 14px;cursor:pointer}
.lf-chk{width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(200,217,204,0.3);background:transparent;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s;margin-top:1px}
.lf-chk.checked{background:var(--sage-md);border-color:var(--sage-md)}
.lf-consent-text{font-size:11px;color:rgba(255,255,255,0.4);line-height:1.55}
.lf-consent-text a{color:var(--sage);text-decoration:none}

/* ══════════════════════════════════════════
   FILTRI
══════════════════════════════════════════ */
.f-sec{margin-bottom:22px}
.f-lbl{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(200,217,204,0.35);margin-bottom:10px;font-weight:700}
.f-row{display:flex;justify-content:space-between;font-size:13px;color:rgba(200,217,204,0.4);margin-bottom:8px}
.f-row strong{color:#fff;font-weight:600}
input[type=range]{width:100%;-webkit-appearance:none;height:2px;background:rgba(200,217,204,0.14);border-radius:1px;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--sage);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.tipo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.tipo-btn{padding:9px 4px;border-radius:9px;border:1px solid rgba(200,217,204,0.14);background:transparent;color:rgba(200,217,204,0.45);font-size:12px;font-family:'Satoshi',sans-serif;cursor:pointer;text-align:center;transition:all .15s;font-weight:500}
.tipo-btn.on{background:rgba(200,217,204,0.15);color:var(--sage);border-color:rgba(200,217,204,0.4);font-weight:700}
.apply-btn{width:100%;padding:14px;border-radius:50px;background:var(--sage);color:var(--ink);font-size:14px;font-weight:700;font-family:'Satoshi',sans-serif;border:none;cursor:pointer;transition:background .15s}
.apply-btn:hover,.apply-btn:active{background:#D8E8DC}

/* Toast */
.toast-el{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:rgba(18,24,20,0.95);border:1px solid rgba(200,217,204,0.18);color:#fff;padding:10px 20px;border-radius:40px;font-size:13px;font-weight:500;white-space:nowrap;z-index:500;animation:tUp .3s ease;pointer-events:none}
@keyframes tUp{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ══════════════════════════════════════════
   RESPONSIVE: DESKTOP ≥ 900px
══════════════════════════════════════════ */
@media(min-width:900px){
  /* Mostra sidebar e info panel */
  .sidebar{display:flex}
  /* Topbar semplificata su desktop */
  .topbar{display:none}
  /* Pills si nascondono — filtri sono nella sidebar */
  .pills-strip{display:none}
  /* La card occupa tutta l'altezza disponibile */
  .card{height:100vh}
  /* Info overlay sul video si nasconde — c'è il pannello destro */
  .cinfo{display:none}
  /* Frecce visibili */
  .feed-arrows{display:flex}
  /* Info panel visibile */
  .info-panel{display:flex}
  /* Sheet diventa modal centrato */
  .overlay{align-items:center}
  .sheet{width:100%;max-width:520px;border-radius:18px;max-height:88vh;animation:mUp .25s cubic-bezier(.2,.8,.4,1)}
  @keyframes mUp{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
  .sh-handle{display:none}
  /* Lead form choices affiancate su desktop */
  .lf-choice-row{flex-direction:row}
  .lf-choice{flex:1;flex-direction:column;align-items:center;text-align:center}
  .lf-choice-icon{margin-bottom:6px}
  /* Det grid 3 colonne */
  .det-grid{grid-template-columns:1fr 1fr 1fr}
}

/* ══════════════════════════════════════════
   RESPONSIVE: MOBILE < 900px
══════════════════════════════════════════ */
@media(max-width:899px){
  .sidebar{display:none}
  .feed-arrows{display:none}
  .info-panel{display:none}
  .topbar{display:flex}
  .pills-strip{display:flex}
  .card{height:calc(100vh - 56px - 44px)}
  .cinfo{display:block}
}

/* ══════════════════════════════════════════
   PORTAL — design-token overrides (light theme)
   Source: docs/prototypes/backend-agente.html :root
══════════════════════════════════════════ */
.portal{
  --page:#F5F7F5;--surface:#fff;
  --ink:#1C2820;--ink2:rgba(28,40,32,0.55);--ink3:rgba(28,40,32,0.3);
  --border:rgba(45,62,50,0.09);--border2:rgba(45,62,50,0.15);
  --locked:rgba(45,62,50,0.04);
  --shadow:0 1px 3px rgba(45,62,50,0.04),0 4px 16px rgba(45,62,50,0.07);
  --shadow-lg:0 8px 28px rgba(45,62,50,0.11);
  --r:12px;--rp:50px;
}

/* ══ PORTAL FORM ELEMENTS (from backend-agente.html modal styles) ══ */
.portal .form-label{font-size:11px;font-weight:700;color:var(--ink2);letter-spacing:.05em;text-transform:uppercase;display:block;margin-bottom:5px}
.portal .form-input{width:100%;padding:10px 13px;border:1.5px solid var(--border2);border-radius:9px;font-size:13.5px;font-family:'Satoshi',sans-serif;color:var(--ink);background:var(--page);outline:none;transition:border-color .2s;margin-bottom:12px}
.portal .form-input:focus{border-color:var(--sage)}
.portal .submit-btn{width:100%;padding:13px;border-radius:var(--rp);background:var(--sage-dk);color:var(--sage-lt);font-size:14px;font-weight:700;border:none;cursor:pointer;font-family:'Satoshi',sans-serif;transition:background .2s}
.portal .submit-btn:hover{background:var(--sage-md)}
.portal .submit-btn:disabled{opacity:.6;cursor:not-allowed}

/* ══ LOGIN PAGE ══ */
.portal-login{position:fixed;inset:0;background:var(--page);display:flex;align-items:center;justify-content:center;padding:24px 16px;overflow:auto;font-family:'Satoshi',sans-serif;color:var(--ink)}
.portal-login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:36px 32px;width:100%;max-width:400px}
.portal-login-logo{text-align:center;margin-bottom:28px}
.portal-login-logo-text{font-size:22px;font-weight:700;letter-spacing:-0.04em;color:var(--ink)}
.portal-login-logo-text span{color:var(--sage-md)}
.portal-login-logo-sub{font-size:11px;color:var(--ink3);letter-spacing:.08em;text-transform:uppercase;margin-top:3px;font-weight:600}
.portal-login-heading{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;margin-bottom:5px;text-align:center}
.portal-login-sub{font-size:13px;color:var(--ink2);text-align:center;margin-bottom:26px;line-height:1.45}
.portal-login-error{background:rgba(200,60,60,0.08);border:1px solid rgba(200,60,60,0.2);border-radius:9px;padding:10px 13px;font-size:12.5px;color:#A83020;margin-bottom:14px;text-align:center}
.portal-login-forgot{text-align:right;margin-bottom:16px;margin-top:-6px}
.portal-login-forgot a{font-size:12px;font-weight:600;color:var(--sage-md);text-decoration:none}
.portal-login-forgot a:hover{text-decoration:underline}
.portal-login-register{text-align:center;margin-top:18px;font-size:12.5px;color:var(--ink2)}
.portal-login-register a{font-weight:700;color:var(--sage-md);text-decoration:none}
.portal-login-register a:hover{text-decoration:underline}

/* ══════════════════════════════════════════
   PORTAL LAYOUT SHELL
   Source: docs/prototypes/backend-agente.html body + .sidebar + .main
══════════════════════════════════════════ */
.portal-shell{display:flex;overflow:hidden;height:100vh;width:100vw;background:var(--page);font-family:'Satoshi',sans-serif;color:var(--ink)}

/* ── Sidebar ── */
.portal .sidebar{width:220px;flex-shrink:0;height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.2,.8,.4,1);position:relative;z-index:40}
.portal .sb-logo{padding:20px 20px 14px;border-bottom:1px solid var(--border)}
.portal .sb-logo-text{font-size:18px;font-weight:700;letter-spacing:-0.04em;color:var(--ink)}
.portal .sb-logo-text span{color:var(--sage-md)}
.portal .sb-plan{display:inline-flex;align-items:center;gap:5px;margin-top:5px;padding:3px 10px;border-radius:20px;background:rgba(200,217,204,0.3);border:1px solid rgba(74,122,86,0.2);font-size:11px;font-weight:700;color:var(--sage-dk);letter-spacing:.04em}
.portal .sb-user{display:flex;align-items:center;gap:10px;padding:12px 14px;margin:10px 10px 0;background:rgba(200,217,204,0.1);border:1px solid rgba(74,122,86,0.12);border-radius:10px;cursor:pointer}
.portal .su-av{width:32px;height:32px;border-radius:50%;background:var(--sage-dk);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--sage-lt);flex-shrink:0}
.portal .su-name{font-size:12.5px;font-weight:700;color:var(--ink)}
.portal .su-city{font-size:10.5px;color:var(--ink3);margin-top:1px}
.portal .sb-nav{flex:1;padding:10px;overflow-y:auto;scrollbar-width:none}
.portal .sb-nav::-webkit-scrollbar{display:none}
.portal .nav-sec{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding:8px 10px 4px}
.portal .nav-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-size:13px;font-weight:500;color:var(--ink2);cursor:pointer;transition:all .15s;margin-bottom:1px;text-decoration:none;background:transparent;border:none;width:100%;text-align:left;font-family:inherit}
.portal .nav-item:hover{background:rgba(45,62,50,0.06);color:var(--ink)}
.portal .nav-item.active{background:rgba(200,217,204,0.3);color:var(--sage-dk);font-weight:700}
.portal .nav-item.locked{opacity:.38;cursor:not-allowed}
.portal .nav-item.locked::after{content:'🔒';font-size:10px;margin-left:auto}
.portal .nav-badge{margin-left:auto;background:var(--sage-md);color:#fff;font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px}
.portal .nav-sep{height:1px;background:var(--border);margin:6px 0}
.portal .sb-footer{padding:12px;border-top:1px solid var(--border)}
.portal .upgrade-card{background:linear-gradient(135deg,var(--sage-dk),#1a2618);border-radius:11px;padding:13px;text-align:center}
.portal .uc-title{font-size:12.5px;font-weight:700;color:#fff;margin-bottom:3px}
.portal .uc-sub{font-size:11px;color:rgba(200,217,204,0.55);margin-bottom:9px;line-height:1.4}
.portal .uc-btn{width:100%;padding:7px;border-radius:20px;background:var(--sage);color:var(--ink);font-size:12px;font-weight:700;border:none;cursor:pointer;font-family:'Satoshi',sans-serif}
.portal .uc-btn:hover{background:#D8E8DC}

/* ── Main area ── */
.portal .main{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-width:0}

/* ── Topbar ── */
.portal .topbar{height:54px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0;position:sticky;top:0;z-index:20}
.portal .tb-menu{display:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--border2);background:transparent;align-items:center;justify-content:center;cursor:pointer;color:var(--ink2);flex-shrink:0}
.portal .tb-title{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-0.02em}
.portal .tb-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.portal .tb-btn{padding:6px 13px;border-radius:var(--rp);font-size:12.5px;font-weight:700;cursor:pointer;font-family:'Satoshi',sans-serif;transition:all .2s;border:none;display:flex;align-items:center;gap:5px}
.portal .tb-primary{background:var(--sage-dk);color:var(--sage-lt)}
.portal .tb-primary:hover{background:var(--sage-md)}
.portal .tb-av{width:32px;height:32px;border-radius:50%;background:var(--sage-dk);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--sage-lt);cursor:pointer;flex-shrink:0}
.portal .content{padding:22px;flex:1}

/* ── Mobile sidebar overlay ── */
.portal .sb-overlay{display:none;position:fixed;inset:0;z-index:39;background:rgba(28,40,32,0.45);backdrop-filter:blur(3px)}
.portal .sb-overlay.open{display:block}

/* ══════════════════════════════════════════
   PORTAL DASHBOARD
   Source: docs/prototypes/backend-agente.html #panel-dashboard
══════════════════════════════════════════ */

/* KPI Grid */
.portal .kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.portal .kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow)}
.portal .kpi-lbl{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px}
.portal .kpi-val{font-size:28px;font-weight:700;color:var(--ink);letter-spacing:-0.04em;line-height:1;margin-bottom:2px}
.portal .kpi-delta{font-size:11px;font-weight:500;color:var(--sage-md)}
.portal .kpi-locked{background:var(--locked);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;position:relative;overflow:hidden}
.portal .kpi-locked .kpi-val{filter:blur(5px);user-select:none;color:var(--ink3)}
.portal .lock-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;background:rgba(245,247,245,0.65);backdrop-filter:blur(2px)}
.portal .lo-txt{font-size:11px;font-weight:700;color:var(--ink2)}
.portal .lo-up{font-size:10.5px;color:var(--sage-md);font-weight:600;cursor:pointer;background:none;border:none;font-family:inherit;padding:0}

/* Section header */
.portal .sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.portal .sec-title{font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-0.01em}
.portal .sec-btn{padding:7px 14px;border-radius:var(--rp);font-size:12.5px;font-weight:700;border:none;cursor:pointer;font-family:'Satoshi',sans-serif;transition:all .2s;display:flex;align-items:center;gap:6px;background:var(--sage-dk);color:var(--sage-lt)}
.portal .sec-btn:hover{background:var(--sage-md)}
.portal .sec-btn-ghost{background:transparent;border:1px solid var(--border2);color:var(--ink2)}
.portal .sec-btn-ghost:hover{background:rgba(45,62,50,0.07)}

/* Video list */
.portal .vlist{display:flex;flex-direction:column;gap:9px;margin-bottom:22px}
.portal .vrow{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:13px 15px;display:flex;align-items:center;gap:13px;transition:border-color .2s;box-shadow:var(--shadow)}
.portal .vrow:hover{border-color:rgba(74,122,86,0.22)}
.portal .vr-thumb{width:50px;height:50px;border-radius:8px;background:linear-gradient(135deg,#1a2618,#263220);flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.portal .vr-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.portal .vr-info{flex:1;min-width:0}
.portal .vr-title{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.portal .vr-meta{font-size:11.5px;color:var(--ink3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.portal .vr-stats{display:flex;gap:14px;flex-shrink:0}
.portal .vrs{text-align:center}
.portal .vrs-val{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-0.02em}
.portal .vrs-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3);font-weight:500;margin-top:1px}
.portal .vr-status{flex-shrink:0;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:10px}
.portal .vs-live{background:rgba(74,122,86,0.12);color:var(--sage-md)}
.portal .vs-draft{background:rgba(45,62,50,0.07);color:var(--ink3)}
.portal .vs-proc{background:rgba(196,144,42,0.12);color:#92650A}
.portal .vs-err{background:rgba(185,28,28,0.10);color:#9B1C1C}
.portal .vr-acts{display:flex;gap:5px;flex-shrink:0}
.portal .vr-btn{width:28px;height:28px;border-radius:7px;border:1px solid var(--border2);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink2);transition:all .15s}
.portal .vr-btn:hover{background:var(--sage-lt);border-color:var(--sage);color:var(--sage-dk)}

/* Upload zone */
.portal .upload-zone{border:2px dashed var(--border2);border-radius:var(--r);padding:36px 20px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:22px}
.portal .upload-zone:hover{border-color:var(--sage);background:rgba(200,217,204,0.05)}
.portal .uz-icon{width:46px;height:46px;border-radius:13px;background:rgba(200,217,204,0.3);border:1px solid rgba(74,122,86,0.2);display:flex;align-items:center;justify-content:center;margin:0 auto 11px;color:var(--sage-md)}
.portal .uz-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px}
.portal .uz-sub{font-size:13px;color:var(--ink2);margin-bottom:12px}
.portal .uz-note{font-size:11px;color:var(--ink3);margin-top:7px}

/* Contacts table */
.portal .contacts-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);margin-bottom:22px}
.portal .ct-hdr{display:grid;grid-template-columns:2fr 2fr 1fr 1fr 80px;background:rgba(45,62,50,0.04);padding:9px 16px}
.portal .ct-h{font-size:10px;font-weight:700;color:var(--ink3);letter-spacing:.06em;text-transform:uppercase}
.portal .ct-row{display:grid;grid-template-columns:2fr 2fr 1fr 1fr 80px;padding:11px 16px;border-top:1px solid var(--border);align-items:center;transition:background .15s;cursor:pointer}
.portal .ct-row:hover{background:rgba(45,62,50,0.02)}
.portal .ct-cell{font-size:12.5px;color:var(--ink)}
.portal .ct-name{font-weight:700}
.portal .ct-tag{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:8px;display:inline-block}
.portal .ct-new{background:rgba(74,122,86,0.12);color:var(--sage-md)}
.portal .ct-replied{background:rgba(45,62,50,0.07);color:var(--ink3)}
.portal .ct-acts{display:flex;gap:4px}
.portal .ct-btn{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink2);transition:all .15s}
.portal .ct-btn:hover{background:var(--sage-lt);border-color:var(--sage);color:var(--sage-dk)}

/* Locked section */
.portal .locked-sec{background:var(--locked);border:1px solid var(--border);border-radius:var(--r);padding:22px;text-align:center;margin-bottom:20px}
.portal .ls-icon{font-size:24px;margin-bottom:7px}
.portal .ls-title{font-size:14px;font-weight:700;color:var(--ink2);margin-bottom:4px}
.portal .ls-sub{font-size:12.5px;color:var(--ink3);margin-bottom:12px}
.portal .ls-btn{padding:8px 18px;border-radius:var(--rp);background:var(--sage-dk);color:var(--sage-lt);font-size:12.5px;font-weight:700;border:none;cursor:pointer;font-family:'Satoshi',sans-serif}
.portal .ls-btn:hover{background:var(--sage-md)}

/* ══ UPLOAD WIZARD MODAL ══ */
@keyframes portalBgIn{from{background:transparent}to{background:rgba(28,40,32,0.5)}}
.portal .modal-bg{position:fixed;inset:0;z-index:200;background:rgba(28,40,32,0.5);backdrop-filter:blur(5px);display:none;align-items:flex-end;justify-content:center;padding:0}
.portal .modal-bg.open{display:flex;animation:portalBgIn .2s ease forwards}
.portal .modal{background:var(--surface);border-radius:18px 18px 0 0;width:100%;max-width:520px;max-height:90vh;display:flex;flex-direction:column;animation:shUp .28s cubic-bezier(.2,.8,.4,1)}
.portal .modal-handle{width:36px;height:4px;border-radius:2px;background:rgba(45,62,50,0.15);margin:12px auto 10px;flex-shrink:0}
.portal .modal-hd{padding:0 20px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.portal .modal-title{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-0.02em}
.portal .modal-close{width:27px;height:27px;border-radius:50%;background:rgba(45,62,50,0.07);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink2)}
.portal .modal-body{flex:1;overflow-y:auto;padding:16px 20px;scrollbar-width:none}
.portal .modal-body::-webkit-scrollbar{display:none}
.portal .modal-foot{padding:12px 20px 28px;border-top:1px solid var(--border);flex-shrink:0;display:flex;gap:10px}

/* Progress steps */
.portal .steps{display:flex;align-items:center;gap:0;margin-bottom:18px}
.portal .step{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink3)}
.portal .step.active{color:var(--sage-dk)}
.portal .step.done{color:var(--sage-md)}
.portal .step-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.portal .step.active .step-dot{border-color:var(--sage-dk);background:var(--sage-dk);color:#fff}
.portal .step.done .step-dot{border-color:var(--sage-md);background:var(--sage-md);color:#fff}
.portal .step-line{flex:1;height:1px;background:var(--border)}
.portal .step-line.done{background:var(--sage-md)}

/* Upload area inside modal */
.portal .upload-area{border:2px dashed var(--border2);border-radius:9px;padding:24px;text-align:center;cursor:pointer;margin-bottom:12px;transition:border-color .2s}
.portal .upload-area:hover{border-color:var(--sage)}

/* Additional form elements */
.portal .form-select{width:100%;padding:10px 13px;border:1.5px solid var(--border2);border-radius:9px;font-size:13.5px;font-family:'Satoshi',sans-serif;color:var(--ink);background:var(--page);outline:none;margin-bottom:12px;cursor:pointer}
.portal .form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.portal .form-textarea{width:100%;padding:10px 13px;border:1.5px solid var(--border2);border-radius:9px;font-size:13.5px;font-family:'Satoshi',sans-serif;color:var(--ink);background:var(--page);outline:none;resize:none;height:80px;margin-bottom:12px}
.portal .form-textarea:focus{border-color:var(--sage)}
.portal .form-note{font-size:11px;color:var(--ink3);padding:9px 12px;background:rgba(200,217,204,0.1);border-radius:8px;border-left:3px solid var(--sage);margin-bottom:12px}

/* Dotazioni toggle buttons */
.portal .dot-btn{padding:5px 12px;border-radius:20px;border:1px solid var(--border2);background:transparent;font-size:12px;font-weight:500;color:var(--ink2);cursor:pointer;font-family:'Satoshi',sans-serif;transition:all .15s}
.portal .dot-btn.on{background:rgba(200,217,204,0.25);border-color:rgba(74,122,86,0.35);color:var(--sage-dk);font-weight:700}

/* Prev button (inline style on prototype — extracted here for reuse) */
.portal .modal-btn-prev{flex:1;padding:13px;border-radius:50px;background:transparent;border:1px solid var(--border2);font-size:13.5px;font-weight:700;cursor:pointer;font-family:'Satoshi',sans-serif;color:var(--ink)}

/* ══ PORTAL RESPONSIVE ══ */
@media(max-width:768px){
  .portal-shell{overflow:auto;height:auto;min-height:100vh;flex-direction:column}
  .portal .sidebar{position:fixed;top:0;left:0;height:100vh;transform:translateX(-100%);z-index:40;box-shadow:var(--shadow-lg)}
  .portal .sidebar.open{transform:translateX(0)}
  .portal .main{flex:1;overflow-y:auto;min-height:100vh}
  .portal .tb-menu{display:flex}
  .portal .topbar{padding:0 14px}
  .portal .content{padding:14px}
  .portal .kpi-grid{grid-template-columns:1fr 1fr;gap:9px}
  .portal .vr-stats{display:none}
  .portal .vr-meta{display:none}
  .portal .ct-hdr{display:none}
  .portal .ct-row{grid-template-columns:1fr;gap:4px;padding:12px 14px}
  .portal .ct-cell:nth-child(3),.portal .ct-cell:nth-child(4){display:none}
  .portal .ct-acts{margin-top:4px}
  .portal .modal{border-radius:18px 18px 0 0;max-width:100%}
  .portal .form-row{grid-template-columns:1fr}
}
@media(min-width:769px){
  .portal .sb-overlay{display:none!important}
}

/* ══════════════════════════════════════════
   ADMIN — design-token overrides (light, sage-dk sidebar)
   Source: docs/prototypes/backend-admin.html :root
══════════════════════════════════════════ */
.admin{
  --page:#F2F5F2;--surface:#FFFFFF;
  --ink:#1C2820;--ink2:rgba(28,40,32,0.55);--ink3:rgba(28,40,32,0.28);
  --border:rgba(45,62,50,0.08);--border2:rgba(45,62,50,0.14);
  --shadow:0 1px 3px rgba(45,62,50,0.04),0 4px 14px rgba(45,62,50,0.06);
  --shadow-md:0 4px 20px rgba(45,62,50,0.1);
  --r:12px;--rp:50px;
  --amber:#92400E;--amber-bg:#FFFBEB;--amber-bd:rgba(196,144,42,0.3);
  --blue:#1E3A5F;--blue-bg:#EFF6FF;--blue-bd:rgba(37,99,235,0.25);
  --red-bg:#FEF2F2;--red:#991B1B;--red-bd:rgba(220,38,38,0.25);
  --green-bg:#F0FDF4;--green:#166534;--green-bd:rgba(22,163,74,0.25);
}
.admin-shell{display:flex;overflow:hidden;height:100vh;width:100vw;background:var(--page);font-family:'Satoshi',sans-serif;color:var(--ink)}

/* ══ ADMIN SIDEBAR ══ */
.admin .sidebar{width:230px;flex-shrink:0;height:100vh;background:var(--sage-dk);display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.2,.8,.4,1);z-index:50;position:relative}
.admin .sb-logo{padding:20px 20px 16px;border-bottom:1px solid rgba(200,217,204,0.1)}
.admin .sb-logo-text{font-size:18px;font-weight:700;letter-spacing:-0.04em;color:#fff}
.admin .sb-logo-text span{color:var(--sage)}
.admin .sb-logo-tag{font-size:10px;color:rgba(200,217,204,0.4);letter-spacing:.06em;margin-top:3px}
.admin .sb-admin-badge{display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:3px 10px;border-radius:10px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);font-size:10.5px;font-weight:700;color:rgba(200,217,204,0.8);letter-spacing:.04em}
.admin .sb-nav{flex:1;padding:10px 10px;overflow-y:auto;scrollbar-width:none}
.admin .sb-nav::-webkit-scrollbar{display:none}
.admin .nav-sec{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(200,217,204,0.35);padding:8px 11px 4px}
.admin .nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;font-size:13px;font-weight:500;color:rgba(200,217,204,0.65);cursor:pointer;transition:all .15s;margin-bottom:1px;text-decoration:none;background:transparent;border:none;width:100%;text-align:left;font-family:inherit}
.admin .nav-item:hover{background:rgba(255,255,255,0.08);color:rgba(200,217,204,0.95)}
.admin .nav-item.active{background:rgba(200,217,204,0.18);color:#fff;font-weight:700}
.admin .nav-badge{margin-left:auto;background:rgba(255,255,255,0.18);color:#fff;font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px}
.admin .nav-badge.alert{background:rgba(220,38,38,0.5)}
.admin .nav-sep{height:1px;background:rgba(200,217,204,0.1);margin:6px 0}
.admin .sb-footer{padding:12px;border-top:1px solid rgba(200,217,204,0.1)}
.admin .sf-user{display:flex;align-items:center;gap:9px}
.admin .sf-av{width:32px;height:32px;border-radius:50%;background:rgba(200,217,204,0.2);border:1px solid rgba(200,217,204,0.25);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--sage);flex-shrink:0}
.admin .sf-name{font-size:12.5px;font-weight:700;color:#fff}
.admin .sf-role{font-size:10px;color:rgba(200,217,204,0.4);margin-top:1px}

/* ══ ADMIN MAIN AREA ══ */
.admin .main{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-width:0}
.admin .topbar{height:54px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 22px;gap:12px;flex-shrink:0;position:sticky;top:0;z-index:30}
.admin .tb-menu{display:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--border2);background:transparent;align-items:center;justify-content:center;cursor:pointer;color:var(--ink2);flex-shrink:0}
.admin .tb-title{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-0.02em}
.admin .tb-right{margin-left:auto;display:flex;gap:10px;align-items:center}
.admin .tb-search{display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:var(--rp);border:1px solid var(--border2);background:var(--page);font-size:13px;font-family:'Satoshi',sans-serif;color:var(--ink2);cursor:text;transition:border-color .2s;width:200px}
.admin .tb-search input{border:none;background:transparent;outline:none;font-size:13px;font-family:'Satoshi',sans-serif;color:var(--ink);width:100%}
.admin .tb-search input::placeholder{color:var(--ink3)}
.admin .tb-av{width:32px;height:32px;border-radius:50%;background:var(--sage-dk);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--sage-lt);flex-shrink:0;cursor:pointer}
.admin .content{padding:22px;flex:1}
.admin .sb-overlay{display:none;position:fixed;inset:0;z-index:49;background:rgba(13,18,16,0.6)}
.admin .sb-overlay.open{display:block}

/* ══ KPI DASHBOARD ══ */
.admin .kpi-section{margin-bottom:24px}
.admin .section-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.admin .kpi-grid{display:grid;gap:10px}
.admin .kpi-grid-4{grid-template-columns:repeat(4,1fr)}
.admin .kpi-grid-3{grid-template-columns:repeat(3,1fr)}
.admin .kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:15px 17px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.admin .kpi-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--sage)}
.admin .kpi-card.amber::before{background:var(--amber)}
.admin .kpi-card.blue::before{background:var(--blue)}
.admin .kpi-card.red::before{background:var(--red)}
.admin .kpi-lbl{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px;display:flex;align-items:center;gap:6px}
.admin .kpi-val{font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-0.04em;line-height:1;margin-bottom:3px}
.admin .kpi-sub{font-size:11px;color:var(--ink3)}
.admin .kpi-delta{font-size:11px;font-weight:600}
.admin .kpi-delta.up{color:var(--sage-md)}
.admin .kpi-delta.down{color:var(--red)}

/* ══ WATCH TIME BARS ══ */
.admin .wt-bar{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.admin .wt-bar-label{font-size:11.5px;color:var(--ink2);white-space:nowrap;min-width:120px;overflow:hidden;text-overflow:ellipsis}
.admin .wt-bar-fill{height:8px;border-radius:4px;background:var(--sage);transition:width .5s}
.admin .wt-bar-val{font-size:11.5px;font-weight:700;color:var(--ink);margin-left:auto;flex-shrink:0}

/* ══ TABLE WRAP ══ */
.admin .table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);margin-bottom:22px}
.admin .table-head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.admin .table-head-title{font-size:13.5px;font-weight:700;color:var(--ink)}
.admin .table-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.admin .tf-select{padding:5px 10px;border:1px solid var(--border2);border-radius:7px;font-size:12px;font-family:'Satoshi',sans-serif;color:var(--ink);background:var(--page);cursor:pointer;outline:none}
.admin .tf-search{display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--border2);border-radius:7px;background:var(--page)}
.admin .tf-search input{border:none;background:transparent;font-size:12px;font-family:'Satoshi',sans-serif;color:var(--ink);outline:none;width:120px}
.admin .tf-search input::placeholder{color:var(--ink3)}
.admin .t-header{display:grid;background:var(--page);padding:8px 16px;border-bottom:1px solid var(--border)}
.admin .th{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.admin .t-row{display:grid;padding:11px 16px;border-top:1px solid var(--border);align-items:center;transition:background .15s;cursor:pointer}
.admin .t-row:hover{background:rgba(45,62,50,0.025)}
.admin .t-cell{font-size:12.5px;color:var(--ink)}
.admin .t-name{font-weight:700}
.admin .t-sub{font-size:11px;color:var(--ink3);margin-top:1px}
.admin .tag{font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:8px;display:inline-flex;align-items:center;gap:4px}
.admin .tag-green{background:var(--green-bg);color:var(--green)}
.admin .tag-amber{background:var(--amber-bg);color:var(--amber)}
.admin .tag-red{background:var(--red-bg);color:var(--red)}
.admin .tag-blue{background:var(--blue-bg);color:var(--blue)}
.admin .tag-gray{background:rgba(45,62,50,0.06);color:var(--ink2)}
.admin .t-acts{display:flex;gap:4px;justify-content:flex-end}
.admin .t-btn{height:26px;padding:0 10px;border-radius:6px;border:1px solid var(--border2);background:transparent;font-size:11px;font-weight:600;cursor:pointer;font-family:'Satoshi',sans-serif;color:var(--ink2);display:flex;align-items:center;gap:4px;transition:all .15s;white-space:nowrap}
.admin .t-btn:hover{background:var(--sage-lt);border-color:var(--sage);color:var(--sage-dk)}
.admin .t-btn.danger:hover{background:var(--red-bg);border-color:rgba(220,38,38,0.3);color:var(--red)}
.admin .t-btn.primary{background:var(--sage-dk);border-color:var(--sage-dk);color:#fff}
.admin .t-btn.primary:hover{background:var(--sage-md)}
.admin .table-footer{padding:10px 16px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.admin .tf-count{font-size:12px;color:var(--ink3)}
.admin .tf-pages{display:flex;gap:4px}
.admin .tp-btn{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:transparent;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.admin .tp-btn.active{background:var(--sage-dk);border-color:var(--sage-dk);color:#fff}

/* ══ ADMIN MODAL ══ */
.admin .overlay{position:fixed;inset:0;z-index:200;background:rgba(28,40,32,0.5);backdrop-filter:blur(5px);display:none;align-items:flex-end;justify-content:center}
.admin .overlay.open{display:flex;animation:adminBgIn .2s ease}
@keyframes adminBgIn{from{background:transparent}to{background:rgba(28,40,32,0.5)}}
.admin .modal{background:var(--surface);border-radius:18px 18px 0 0;width:100%;max-width:520px;max-height:90vh;display:flex;flex-direction:column;animation:adminShUp .28s cubic-bezier(.2,.8,.4,1)}
@keyframes adminShUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.admin .modal-handle{width:36px;height:4px;border-radius:2px;background:rgba(45,62,50,0.15);margin:12px auto 10px;flex-shrink:0}
.admin .modal-hd{padding:0 20px 13px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.admin .modal-title{font-size:15px;font-weight:700;color:var(--ink)}
.admin .modal-sub{font-size:11px;color:var(--ink3);margin-top:2px}
.admin .modal-close{width:27px;height:27px;border-radius:50%;background:rgba(45,62,50,0.07);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink2)}
.admin .modal-body{flex:1;overflow-y:auto;padding:16px 20px;scrollbar-width:none}
.admin .modal-body::-webkit-scrollbar{display:none}
.admin .modal-foot{padding:12px 20px 28px;border-top:1px solid var(--border);flex-shrink:0;display:flex;gap:9px}
.admin .modal-btn{flex:1;padding:12px;border-radius:var(--rp);font-size:13.5px;font-weight:700;border:none;cursor:pointer;font-family:'Satoshi',sans-serif;transition:background .15s}
.admin .modal-btn-primary{background:var(--sage-dk);color:var(--sage-lt)}
.admin .modal-btn-primary:hover{background:var(--sage-md)}
.admin .modal-btn-ghost{background:transparent;border:1.5px solid var(--border2);color:var(--ink2)}
.admin .modal-btn-danger{background:var(--red-bg);color:var(--red);border:1px solid var(--red-bd)}
.admin .detail-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border)}
.admin .detail-row:last-child{border-bottom:none}
.admin .dr-label{font-size:12px;color:var(--ink3);font-weight:500}
.admin .dr-val{font-size:12.5px;font-weight:700;color:var(--ink);text-align:right}
.admin .detail-section{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin:14px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.admin .toggle-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0}
.admin .toggle-label{font-size:13px;font-weight:600;color:var(--ink)}
.admin .toggle-sub{font-size:11px;color:var(--ink3);margin-top:1px}
.admin .toggle{width:38px;height:22px;border-radius:11px;background:var(--border2);cursor:pointer;position:relative;transition:background .2s;flex-shrink:0;border:none}
.admin .toggle.on{background:var(--sage-md)}
.admin .toggle::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.admin .toggle.on::after{left:19px}
.admin .sel-input{width:100%;padding:9px 12px;border:1.5px solid var(--border2);border-radius:9px;font-size:13px;font-family:'Satoshi',sans-serif;color:var(--ink);background:var(--page);outline:none;margin-top:4px;cursor:pointer}
.admin .note-area{width:100%;padding:9px 12px;border:1.5px solid var(--border2);border-radius:9px;font-size:13px;font-family:'Satoshi',sans-serif;color:var(--ink);background:var(--page);outline:none;resize:none;height:70px;margin-top:4px}
.admin .note-area:focus,.admin .sel-input:focus{border-color:var(--sage)}

/* ══ ADMIN RESPONSIVE ══ */
@media(max-width:900px){
  .admin-shell{overflow:auto;height:auto;min-height:100vh}
  .admin .sidebar{position:fixed;top:0;left:0;height:100vh;transform:translateX(-100%);box-shadow:var(--shadow-md)}
  .admin .sidebar.open{transform:translateX(0)}
  .admin .tb-menu{display:flex}
  .admin .tb-search{display:none}
  .admin .topbar{padding:0 14px}
  .admin .content{padding:14px}
  .admin .kpi-grid-4{grid-template-columns:1fr 1fr}
  .admin .kpi-grid-3{grid-template-columns:1fr 1fr}
  .admin .t-header{display:none}
  .admin .t-row{grid-template-columns:1fr!important;gap:3px;padding:12px 14px}
  .admin .t-cell:not(.t-name):not(.t-acts):not(.t-tag-cell){display:none}
  .admin .t-tag-cell{display:block!important}
  .admin .t-acts{margin-top:7px;justify-content:flex-start}
  .admin .table-filters{gap:6px}
  .admin .tf-select{font-size:11.5px;padding:4px 8px}
  .admin .tf-search{display:none}
  .admin .modal{border-radius:18px 18px 0 0;max-width:100%}
}
@media(min-width:901px){
  .admin .sb-overlay{display:none!important}
  .admin .overlay{align-items:center}
  .admin .modal{border-radius:18px;max-height:88vh;animation:adminMUp .25s cubic-bezier(.2,.8,.4,1)}
  @keyframes adminMUp{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
  .admin .modal-handle{display:none}
}

/* ══ TOAST SYSTEM ══ */
.toast-container{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:9999;pointer-events:none}
.toast-el{background:rgba(18,24,20,0.95);border:1px solid rgba(200,217,204,0.18);color:#fff;padding:10px 20px;border-radius:40px;font-size:13px;font-weight:500;white-space:nowrap;animation:tUp .3s ease}
.toast-success{background:rgba(16,82,36,0.95);border-color:rgba(74,222,128,0.3)}
.toast-error{background:rgba(120,20,20,0.95);border-color:rgba(248,113,113,0.3)}
.toast-info{background:rgba(18,24,20,0.95)}

/* ══ SKELETON ══ */
.skeleton-box{background:linear-gradient(90deg,rgba(200,217,204,0.08) 25%,rgba(200,217,204,0.16) 50%,rgba(200,217,204,0.08) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px}
.skeleton-rounded{border-radius:50%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@14.2.35_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../../node_modules/.pnpm/next@14.2.35_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/globals.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container{
  width: 100%;
}
@media (min-width: 640px){

  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){

  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){

  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){

  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){

  .container{
    max-width: 1536px;
  }
}
.visible{
  visibility: visible;
}
.top-5{
  top: 1.25rem;
}
.block{
  display: block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.hidden{
  display: none;
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rounded{
  border-radius: 0.25rem;
}
.border{
  border-width: 1px;
}
.uppercase{
  text-transform: uppercase;
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}