/* OATR · shell.css
   
   Extracted verbatim from OTA.html. Loaded in cascade order. */

/* ============ PROTO TOPBAR ============ */
.proto-topbar{position:fixed;top:0;left:0;right:0;height:54px;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#0c0b16;border-bottom:1px solid rgba(255,255,255,.08)}
.proto-brand{display:flex;align-items:center;gap:10px}
.proto-logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#7c5cff,#4a2fc0);display:grid;place-items:center;color:#fff;font-family:var(--brand);font-weight:800;font-size:13px}
.proto-brand b{font-family:var(--brand);font-weight:800;font-size:15px;color:#f0f4f8}
.proto-brand span{font-size:11px;color:#67758a}
.device-switch{display:flex;gap:2px;background:rgba(255,255,255,.06);padding:3px;border-radius:999px}
.device-switch button{padding:6px 16px;border-radius:999px;font-size:13px;color:#8895aa;display:flex;align-items:center;gap:6px;transition:.15s}
.device-switch button.active{background:rgba(255,255,255,.13);color:#fff}
.proto-center{display:flex;align-items:center;gap:10px}
/* member/persona state switcher (header) */
.state-switch{position:relative}
.state-switch .state-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.06);font-size:13px;font-weight:600;color:#cdd6e4}
.state-switch .state-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.state-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:7px;min-width:178px;box-shadow:0 14px 40px rgba(0,0,0,.55);z-index:400}
.state-switch.open .state-menu{display:flex;animation:ot-rise .18s ease-out both}
.state-menu button{display:flex;align-items:center;gap:9px;text-align:left;padding:8px 11px;border-radius:8px;font-size:13px;font-weight:600;color:var(--text);background:transparent}
.state-menu button:hover{background:var(--chip)}
/* member status banner */
.mbanner{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:10px;font-size:12.5px;line-height:1.35;margin-bottom:10px}
.mbanner b{font-weight:800}
.mbanner i[data-ic]{flex:0 0 auto}
.mbanner button{margin-left:auto;flex:0 0 auto;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:700;color:#fff}
.mbanner.warn{background:var(--warn-soft);color:var(--warn)} .mbanner.warn button{background:var(--warn);color:#1a1206}
.mbanner.info{background:rgba(56,189,248,.13);color:var(--info)}
.mbanner.danger{background:var(--down-soft);color:var(--down)} .mbanner.danger button{background:var(--down)}
.mbanner.pro{background:var(--accent-soft);color:var(--accent)}
.mbanner .mb-actions{margin-left:auto;display:flex;gap:8px;flex:0 0 auto;align-items:center}
.mbanner .mb-actions button{margin-left:0;padding:7px 15px;border-radius:8px;font-size:12.5px;font-weight:700}
.mbanner .mb-primary{background:var(--accent);color:#fff;border:none}
.mbanner .mb-primary:hover{filter:brightness(1.08)}
.mbanner .mb-ghost{background:transparent;border:1px solid currentColor;color:currentColor}
.mbanner .mb-ghost:hover{background:rgba(255,255,255,.08)}
/* member badge chip */
.member-badge-row{padding:7px 2px 0}
.member-badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px}
.member-badge.verified{background:var(--accent-soft);color:var(--accent)}
.member-badge.warn{background:var(--warn-soft);color:var(--warn)}
.member-badge.danger{background:var(--down-soft);color:var(--down)}
.member-badge.ok{background:var(--up-soft);color:var(--up)}
.member-badge.pro{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#1a1206}
.member-badge.guest{background:var(--chip);color:var(--text-2)}
.mbanner button.ghost{background:transparent;border:1px solid currentColor;color:inherit}
/* login / sign-up modal */
.auth-tabs{display:flex;gap:6px;margin-bottom:13px;background:var(--chip);border-radius:10px;padding:4px}
.auth-tabs button{flex:1;height:36px;border-radius:8px;font-size:13px;font-weight:700;color:var(--text-2)}
.auth-tabs button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.auth-in{width:100%;height:44px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);padding:0 13px;font-size:14px;margin-bottom:10px}
.auth-in:focus{outline:none;border-color:var(--accent)}
.auth-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2);margin-bottom:12px}
.fx-switch #fxTrigger{color:#c4b5fd;font-weight:700}
.fx-switch #fxTrigger:hover{background:rgba(139,92,246,.28);color:#fff}
.fx-switch #fxTrigger:active{transform:scale(.95)}
.fx-switch #fxAutoBtn.active{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff}
.fx-switch #fxAutoBtn::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5}
.fx-switch #fxAutoBtn.active::before{opacity:1;animation:blink 1.4s infinite}
.proto-right{display:flex;align-items:center;gap:10px}
.proto-tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#67758a}

/* ============ STAGE / FRAMES ============ */
.stage{position:fixed;top:54px;left:0;right:0;bottom:0;background:var(--bg);overflow:hidden;display:block;padding:0}
.frame{display:none}
.frame.active{display:block;height:100%}
#frame-tablet,#frame-phone{display:none!important}

/* ---- app fills viewport (responsive — device frame removed) ---- */
.desktop-frame{position:relative;width:100%;height:100%;max-width:none;max-height:none;background:var(--bg);border-radius:0;border:none;box-shadow:none;overflow:hidden;display:flex;flex-direction:column}
.browser-chrome{display:none}
.bc-dots{display:flex;gap:6px}
.bc-dots i{width:11px;height:11px;border-radius:50%;display:block}
.bc-dots i:nth-child(1){background:#ff5f57}.bc-dots i:nth-child(2){background:#febc2e}.bc-dots i:nth-child(3){background:#28c840}
.bc-url{flex:1;max-width:420px;margin:0 auto;background:var(--bg);border:1px solid var(--border);border-radius:7px;height:24px;display:flex;align-items:center;padding:0 10px;font-size:11px;color:var(--text-2);gap:6px}
.app{flex:1;display:flex;min-height:0}

/* ===== RESPONSIVE SHELL (one-layout rebuild) ===== */
#deviceSwitch{display:none}
.nav-burger{display:none;width:38px;height:38px;border-radius:9px;align-items:center;justify-content:center;color:#cdd6e4;font-size:19px;background:rgba(255,255,255,.06)}
.nav-burger:hover{background:rgba(255,255,255,.12);color:#fff}
.nav-scrim{position:fixed;inset:54px 0 0;background:rgba(0,0,0,.5);z-index:140;display:none}
.nav-scrim.open{display:block}

/* ============ LEFT PANEL ============ */
.lp{width:236px;flex:0 0 236px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.lp-head{padding:14px 16px 8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.lp-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 10px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.lp-list::-webkit-scrollbar{width:7px}
.lp-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.lp-list::-webkit-scrollbar-thumb:hover{background:var(--text-2)}
.port{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 11px;border-radius:10px;margin-bottom:3px;color:var(--text);transition:.12s}
.port:hover{background:var(--chip)}
.port.active{background:var(--accent-soft);box-shadow:inset 0 0 0 1px rgba(97,61,228,.4)}
.port-ico{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:var(--chip)}
.port.active .port-ico{background:var(--accent);color:#fff}
.port-meta{flex:1;min-width:0}
.port-name{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.port-bal{font-size:11.5px;color:var(--text-2);margin-top:1px}
.tag-demo{font-size:8.5px;font-weight:800;letter-spacing:.4px;padding:1px 5px;border-radius:4px;background:var(--warn-soft);color:var(--warn);text-transform:uppercase}
.lp-new{display:flex;align-items:center;gap:9px;width:100%;padding:10px 11px;margin:2px 0 8px;border-radius:10px;color:var(--text-2);font-size:13px;font-weight:600;border:1px dashed var(--border)}
.lp-new:hover{color:var(--text);border-color:var(--accent)}
.acct{margin:0 12px 12px;padding:13px;background:var(--bg);border:1px solid var(--border);border-radius:11px}
.acct-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.acct-row:last-child{margin-bottom:0}
.acct-k{font-size:11px;color:var(--text-2)}
.acct-v{font-size:14px;font-weight:700}
.acct-v.big{font-size:19px;font-family:var(--brand)}

/* ============ MAIN COLUMN ============ */
.main{flex:1;display:flex;flex-direction:column;min-width:0}

/* ---- top strip ---- */
.strip{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:9px 16px;border-bottom:1px solid var(--border);background:var(--surface)}
.news-tick{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:9px;height:38px;padding:0 12px;overflow:hidden}
.news-tag{font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--down);flex:0 0 auto;display:flex;align-items:center;gap:5px}
.news-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--down);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.3}}
.news-vp{flex:1;min-width:0;overflow:hidden;position:relative;height:38px}
.news-track{display:flex;flex-direction:column;animation:ticker 14s steps(1) infinite}
.news-item{height:38px;display:flex;align-items:center;font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;gap:8px}
.news-item b{color:var(--accent);font-weight:700}
@keyframes ticker{0%,24%{transform:translateY(0)}25%,49%{transform:translateY(-38px)}50%,74%{transform:translateY(-76px)}75%,99%{transform:translateY(-114px)}}
.strip-ctrl{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.theme-dots{display:flex;gap:4px;align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:4px 6px}
.tdot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border);position:relative}
.tdot.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.tdot[data-t="dark"]{background:#0f1623}.tdot[data-t="light"]{background:#f6f8fc}.tdot[data-t="oled"]{background:#000}.tdot[data-t="dim"]{background:#222a45}
.btn-cust{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:9px;background:var(--bg);border:1px solid var(--border);font-size:13px;font-weight:700;color:var(--text)}
.btn-cust:hover{border-color:var(--accent)}
.ad{flex:0 0 auto;display:flex;align-items:center;gap:10px;height:38px;padding:0 12px 0 14px;border-radius:9px;background:linear-gradient(100deg,#613de4,#8b5cf6);color:#fff;font-size:12px;max-width:230px;overflow:hidden}
.ad b{font-weight:800}.ad small{opacity:.85;font-size:11px}
.ad-close{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:rgba(255,255,255,.18);flex:0 0 20px;font-size:13px}
.ad.gone{display:none}

/* ---- board header ---- */
.board-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 18px 6px}
.bh-title{font-family:var(--brand);font-size:var(--fs-h2);font-weight:var(--fw-extrabold);line-height:var(--lh-tight)}
.bh-sub{font-size:12.5px;color:var(--text-2);margin-top:2px}
.bh-right{display:flex;align-items:center;gap:8px}
.seg{display:flex;background:var(--chip);border-radius:9px;padding:3px}
.seg button{padding:7px 13px;border-radius:7px;font-size:12px;font-weight:700;color:var(--text-2)}
.seg button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.25)}
/* board search */
.board-search{display:flex;align-items:center;gap:7px;background:var(--chip);border-radius:9px;height:34px;padding:0 10px;width:210px}
.board-search:focus-within{box-shadow:0 0 0 1.5px var(--accent)}
.board-search .bs-ico{width:15px;height:15px;stroke:var(--text-2);fill:none;stroke-width:2;flex:0 0 15px}
.board-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-size:13px;font-family:var(--font)}
.board-search input::placeholder{color:var(--text-2)}
.bs-clear{width:18px;height:18px;border-radius:50%;place-items:center;background:var(--surface-2);color:var(--text-2);font-size:10px;flex:0 0 18px}
.empty-search{padding:46px 16px;text-align:center;color:var(--text-2);font-size:14px}

/* ---- board grid ---- */
.board{flex:1;overflow-y:auto;padding:10px 16px 22px;display:block}
.zone-grid{display:grid;gap:10px;align-content:start}
[data-density="compact"]   .zone-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:9px}
[data-density="comfortable"].zone-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
[data-density="wide"]      .zone-grid{grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
/* ---- groups: content-sized, side-by-side, draggable tiles ---- */
.groups-wrap{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;margin-bottom:8px}
.group{flex:0 1 auto;width:fit-content;max-width:100%;min-width:160px;border:1px solid var(--border);border-radius:13px;padding:10px 12px 12px;background:var(--surface-2)}
.group.dragging{opacity:.45}
.group .zone-grid{display:flex;flex-wrap:wrap}
.group .card{flex:0 0 auto}
.group[data-density="compact"]    .card{width:118px}
.group[data-density="comfortable"] .card{width:190px}
.group[data-density="wide"]        .card{width:248px}
.group.drop-hover,.loose-zone.drop-hover{outline:2px dashed var(--accent);outline-offset:3px;border-radius:13px}
.group-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.group-handle{cursor:grab;color:var(--text-2);font-size:13px;line-height:1;user-select:none}
.group-name{font-family:var(--brand);font-size:14px;font-weight:800;color:var(--text);padding:2px 7px;border-radius:6px;outline:none;max-width:300px;overflow:hidden;white-space:nowrap}
.group-name:focus{background:var(--bg);box-shadow:0 0 0 1.5px var(--accent)}
.group-count{font-size:11px;font-weight:700;color:var(--text-2);background:var(--chip);padding:1px 9px;border-radius:999px}
.group-empty{font-size:11px;color:var(--text-2);padding:8px 4px}
.group-menu{margin-left:auto;width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--text-2);font-size:16px}
.group-menu:hover{background:var(--chip);color:var(--text)}
.loose-zone{margin-bottom:8px}
.loose-head{display:flex;align-items:center;gap:10px;margin:2px 0 9px}
.loose-label{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
.btn-newgroup{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:8px;border:1px dashed var(--border);font-size:12px;font-weight:700;color:var(--text-2)}
.btn-newgroup:hover{border-color:var(--accent);color:var(--accent)}
.card.dragging{opacity:.4}
.card.drop-l{box-shadow:inset 3px 0 0 var(--accent)}
.card.drop-r{box-shadow:inset -3px 0 0 var(--accent)}
.card[draggable=true] .c-head{cursor:grab}