/* Cumpăt · adaptive mockups — built ONLY on ../../tokens.css variables */
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow:hidden;background:var(--bg);color:var(--text)}
body{font-family:var(--font-ui);-webkit-font-smoothing:antialiased;position:relative;font-size:var(--t-body)}
.fig{font-family:var(--font-display);font-variation-settings:var(--fraunces-axes);letter-spacing:var(--track-display);font-weight:560}
.fig em,em.cu{font-style:italic;color:var(--accent-display)}
.tnum{font-feature-settings:var(--tnum)}
.kicker{font-size:var(--t-caption);font-weight:700;letter-spacing:var(--track-kicker);text-transform:uppercase;color:var(--accent)}
.label{font-size:var(--t-caption);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)} .faint{color:var(--faint)} .t2{color:var(--text-2)}
.pos{color:var(--pos)} .neg{color:var(--neg)} .warn{color:var(--warn)}
.mock{position:absolute;z-index:50;font-size:9px;letter-spacing:.1em;font-weight:700;color:var(--faint);opacity:.85;white-space:nowrap}
.glow{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,var(--accent-glow),rgba(196,98,45,0) 65%)}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-m);box-shadow:var(--shadow-2)}
.glass{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-m);backdrop-filter:blur(var(--glass-blur))}
.solid{background:var(--bg-2);border:1px solid var(--hairline);border-radius:var(--r-m)}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:var(--r-pill);font-size:13px;font-weight:600;background:var(--surface);border:1px solid var(--hairline);white-space:nowrap;color:var(--text-2)}
.chip.on{background:var(--cta-bg);color:var(--cta-fg);border-color:transparent}
.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600}
.pill.acc{background:var(--accent-tint);color:var(--accent)} .pill.pos{background:var(--pos-tint)} .pill.neg{background:var(--neg-tint)} .pill.warn{background:var(--warn-tint)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:16px;font-weight:600;font-size:15px}
.btn.a{background:var(--cta-bg);color:var(--cta-fg)} .btn.b{background:var(--cta2-bg);color:var(--cta2-fg);border:1px solid var(--hairline-strong)}
.btn.c{background:var(--accent-fill);color:#FFFBF5}
.logo{width:40px;height:40px;border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.logo.s{width:32px;height:32px;border-radius:10px;font-size:12px}
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.row{display:flex;align-items:center;gap:12px}
.between{display:flex;justify-content:space-between;align-items:center}
.src{font-size:var(--t-micro);color:var(--faint);line-height:1.4}
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:6px;border:1px solid var(--hairline-strong);font-size:11px;font-weight:600;color:var(--muted);background:var(--surface)}
.meter{height:8px;border-radius:4px;background:var(--track);position:relative;overflow:visible}
.meter i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,var(--brand-copper),var(--brand-copper-light))}
.meter i.ok{background:linear-gradient(90deg,#3DA678,var(--pos))}
.meter b{position:absolute;top:-4px;width:2px;height:16px;background:var(--text);border-radius:1px;opacity:.8}
.search{display:flex;align-items:center;gap:10px;height:42px;border-radius:14px;padding:0 14px;background:var(--surface);border:1px solid var(--hairline);color:var(--muted);font-size:14px}
.divider{height:1px;background:var(--hairline)}
/* list rows */
.tx{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px}
.tx .n{font-size:var(--t-row);font-weight:600;color:var(--text)}
.tx .m{font-size:var(--t-sub);color:var(--muted);margin-top:1px}
.tx .v{margin-left:auto;text-align:right;font-size:15px;font-weight:600;font-feature-settings:var(--tnum);white-space:nowrap}
.tx.sel{background:var(--accent-tint);box-shadow:inset 0 0 0 1px rgba(231,165,124,.35)}
.tx.hov{background:var(--surface-strong)}
.day{display:flex;justify-content:space-between;padding:14px 12px 4px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* ---------- iPhone Duo chrome ---------- */
.duo-side{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;padding-top:10px;gap:4px;z-index:40}
.duo-side .cam{width:12px;height:12px;border-radius:6px;background:#000;box-shadow:0 0 0 3px rgba(0,0,0,.5)}
.duo-side .time{font-size:13px;font-weight:700;margin-top:8px;color:var(--text)}
.duo-side .stat{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:4px}
.vtab{margin-top:18px;display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:28px;background:rgba(255,251,245,.07);border:1px solid var(--hairline);backdrop-filter:blur(20px)}
.vtab .it{width:46px;height:50px;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:9.5px;font-weight:600}
.vtab .it.on{background:var(--accent-fill);color:#FFFBF5}
.vfab{margin-top:10px;width:50px;height:50px;border-radius:25px;background:var(--cta-bg);color:var(--cta-fg);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-3)}
.hinge{position:absolute;top:0;bottom:0;z-index:30;pointer-events:none}
.hinge::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed rgba(231,165,124,.35)}
.hinge span{position:absolute;bottom:80px;left:50%;transform:translateX(-50%) rotate(-90deg);transform-origin:center;font-size:8.5px;letter-spacing:.12em;color:var(--accent);opacity:.7;white-space:nowrap;font-weight:700}
.homeind{position:absolute;bottom:7px;height:5px;width:134px;border-radius:3px;background:var(--text);opacity:.55;z-index:40}
/* ---------- iPad chrome ---------- */
.ipad-status{position:absolute;top:0;left:0;right:0;height:24px;display:flex;justify-content:space-between;align-items:center;padding:0 22px;font-size:13px;font-weight:600;z-index:40;color:var(--text)}
.winctl{display:flex;gap:7px}
.winctl i{width:12px;height:12px;border-radius:6px;display:block}
.sidebar{position:absolute;top:0;left:0;bottom:0;padding:34px 14px 16px;display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--hairline);background:linear-gradient(180deg,rgba(255,251,245,.035),rgba(255,251,245,.015))}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:14px 10px 18px}
.sidebar .brand .wm{font-family:var(--font-display);font-size:24px;font-weight:560;letter-spacing:-.02em;font-variation-settings:var(--fraunces-axes)}
.sb{display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;border-radius:12px;font-size:14.5px;font-weight:500;color:var(--text-2)}
.sb.on{background:var(--accent-tint);color:var(--text);font-weight:650}
.sb.on .ico{color:var(--accent)}
.sb .sc{margin-left:auto;font-size:11px;color:var(--faint);font-weight:600}
.sb.hov{background:var(--surface-strong)}
.sbh{padding:16px 12px 6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.rail{position:absolute;top:0;left:0;bottom:0;width:84px;padding-top:34px;display:flex;flex-direction:column;align-items:center;gap:6px;border-right:1px solid var(--hairline)}
.rail .it{width:64px;padding:8px 0;border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--muted)}
.rail .it.on{color:var(--text)} .rail .it.on .d{background:var(--accent-fill);color:#FFFBF5}
.rail .d{width:52px;height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center}
.toolbar{display:flex;align-items:center;gap:10px}
.tb{height:36px;padding:0 12px;border-radius:12px;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;background:var(--surface);border:1px solid var(--hairline);color:var(--text-2)}
.tb.a{background:var(--cta-bg);color:var(--cta-fg);border-color:transparent}
.cursor{position:absolute;z-index:60;width:22px;height:22px;border-radius:11px;background:rgba(255,251,245,.28);border:1px solid rgba(255,251,245,.5);backdrop-filter:blur(2px)}
.tip{position:absolute;z-index:61;padding:8px 10px;border-radius:12px;background:var(--bg-2);border:1px solid var(--hairline-strong);box-shadow:var(--shadow-3);font-size:12px;color:var(--text-2);white-space:nowrap}