/* Buyback — component + layout styles (re-implements the cube design-system
 * web components as plain CSS classes for server-rendered Django templates). */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--cube-bg-1)}
body{font-family:var(--font-body);color:var(--text-body);font-size:13px}
a{color:inherit;text-decoration:none}
::selection{background:rgba(255,140,0,.28);color:#f4f1ec}
.scroll::-webkit-scrollbar{width:10px;height:10px}
.scroll::-webkit-scrollbar-track{background:var(--cube-bg-1)}
.scroll::-webkit-scrollbar-thumb{background:var(--cube-border);border-radius:6px;border:2px solid var(--cube-bg-1)}
@keyframes admPulse{0%{box-shadow:0 0 0 0 rgba(46,204,113,.5)}70%{box-shadow:0 0 0 7px rgba(46,204,113,0)}100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}}
@keyframes admUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Layout ─────────────────────────────────────────────────────── */
.navbar{position:sticky;top:0;z-index:100;height:var(--navbar-height);background:var(--cube-card);
  border-bottom:1px solid var(--cube-accent);display:flex;align-items:center;justify-content:space-between;padding:0 18px}
.brand{display:flex;align-items:center;gap:11px}
.brand-diamond{width:14px;height:14px;background:var(--cube-accent);transform:rotate(45deg);border-radius:3px;display:inline-block}
.brand-word{font-family:var(--font-display);font-weight:700;color:var(--cube-accent);letter-spacing:.18em;font-size:16px}
.brand-sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--text-faint);border-left:1px solid var(--cube-line-2);padding-left:13px}
.nav-right{display:flex;align-items:center;gap:12px}
.esi-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  color:var(--cube-success);border:1px solid var(--cube-border);border-radius:var(--radius-xs);padding:6px 11px}
.esi-pill.off{color:var(--text-faint)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--cube-success);animation:admPulse 2.4s infinite}
.userchip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--cube-border);border-radius:var(--radius-xs);padding:5px 11px}
.avatar{width:24px;height:24px;border-radius:50%;background:var(--cube-elevated);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px;color:var(--cube-accent)}
.userchip .role{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--text-faint)}

.layout{display:flex}
.sidebar{width:var(--sidebar-width);flex-shrink:0;background:var(--cube-card);border-right:1px solid var(--cube-border);
  padding:10px 0;min-height:calc(100vh - var(--navbar-height));position:sticky;top:var(--navbar-height);align-self:flex-start}
.sidebar .section{padding:12px 16px 4px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.sidebar .section:first-child{padding-top:8px}
.navrow{display:flex;align-items:center;gap:11px;padding:9px 16px;font-family:var(--font-body);font-size:13px;cursor:pointer;
  color:var(--text-muted);transition:all .15s;border-left:2px solid transparent}
.navrow:hover{background:var(--cube-card-hover);color:var(--text-body)}
.navrow.active{background:var(--cube-accent-soft);color:var(--cube-accent);border-left-color:var(--cube-accent)}
.navrow .grow{flex:1}
.navrow .count{font-family:var(--font-mono);font-size:10px;background:var(--cube-elevated);color:var(--text-muted);border-radius:var(--radius-xs);padding:1px 7px}
.navrow.active .count{background:var(--cube-accent);color:var(--cube-accent-ink)}
.sidebar .foot{margin:14px 16px 0;padding-top:12px;border-top:1px solid var(--cube-border);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;line-height:1.6;color:var(--text-faint)}

.main{flex:1;min-width:0;padding:24px 28px 60px;max-width:var(--content-max)}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.page-head h1{margin:0;color:var(--text-heading);font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:.02em;line-height:1.15}
.page-head p{margin:5px 0 0;color:var(--text-muted);font-size:13px}
.head-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.screen{animation:admUp .3s ease both}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-body);font-weight:600;
  font-size:12px;letter-spacing:.03em;border-radius:var(--radius-xs);border:1px solid transparent;cursor:pointer;
  padding:8px 14px;transition:all .15s;background:var(--cube-elevated);color:var(--text-body)}
.btn:hover{background:var(--cube-card-hover)}
.btn.sm{padding:6px 11px;font-size:11px}
.btn-primary{background:var(--cube-accent);color:var(--cube-accent-ink);border-color:var(--cube-accent)}
.btn-primary:hover{background:var(--cube-accent-hover)}
.btn-outline{background:transparent;border-color:var(--cube-border);color:var(--text-body)}
.btn-outline:hover{border-color:var(--cube-accent);color:var(--cube-accent)}
.btn-ghost{background:transparent;color:var(--text-muted)}
.btn-ghost:hover{color:var(--text-body);background:var(--cube-card-hover)}
.btn-danger{background:transparent;border-color:var(--cube-danger);color:var(--cube-danger)}
.btn-danger:hover{background:var(--cube-danger-soft)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ── Badges / tags ──────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;border-radius:var(--radius-xs);padding:3px 8px;border:1px solid transparent;white-space:nowrap}
.badge.accent{color:var(--cube-accent);background:var(--cube-accent-soft);border-color:var(--cube-accent-line)}
.badge.success{color:var(--cube-success);background:var(--cube-success-soft)}
.badge.warning{color:var(--cube-warning);background:var(--cube-warning-soft)}
.badge.danger{color:var(--cube-danger);background:var(--cube-danger-soft)}
.badge.info{color:var(--cube-info);background:var(--cube-info-soft)}
.badge.muted{color:var(--text-faint);border-color:var(--cube-border)}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  border:1px solid var(--cube-border);border-radius:var(--radius-xs);padding:6px 11px;color:var(--text-muted);cursor:pointer;background:transparent}
.tag:hover{color:var(--text-body);border-color:var(--cube-line-2)}
.tag.active{color:var(--cube-accent);border-color:var(--cube-accent);background:var(--cube-accent-soft)}

/* ── Panels / stat cells ────────────────────────────────────────── */
.panel{background:var(--cube-surface);border:1px solid var(--cube-border);border-radius:var(--radius-md);overflow:hidden}
.panel-title{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--cube-border);
  background:var(--grad-card-header);font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-heading)}
.panel-body{padding:16px}
.panel-body.flush{padding:0}
.statcell{padding:16px}
.statcell .label{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.statcell .value{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--text-heading);margin-top:4px;line-height:1}
.statcell .value .unit{font-size:12px;color:var(--text-faint);font-weight:400;margin-left:4px}
.statcell .sub{font-size:11px;color:var(--text-muted);margin-top:4px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* ── Alerts ─────────────────────────────────────────────────────── */
.alert{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--radius-sm);font-size:12.5px;line-height:1.5}
.alert.info{background:var(--cube-info-soft);color:var(--cube-info);border:1px solid rgba(41,182,246,.3)}
.alert.success{background:var(--cube-success-soft);color:var(--cube-success);border:1px solid rgba(46,204,113,.3)}
.alert.warning{background:var(--cube-warning-soft);color:var(--cube-warning);border:1px solid rgba(243,156,18,.3)}
.alert b{color:inherit}

/* ── Forms ──────────────────────────────────────────────────────── */
label.fld{display:block;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.input,.ta,select.input{width:100%;background:var(--cube-surface);color:var(--text-body);border:1px solid var(--cube-border);
  border-radius:var(--radius-xs);font-family:var(--font-body);font-size:13px;padding:9px 12px;outline:none;transition:border-color .2s,box-shadow .2s}
.input.mono{font-family:var(--font-mono)}
.ta{line-height:1.5;resize:vertical}
.input:focus,.ta:focus,select.input:focus{border-color:var(--cube-accent);box-shadow:var(--focus-ring)}
.num{width:90px;font-family:var(--font-mono);font-size:14px}
.field{display:flex;flex-direction:column;gap:6px}
.row-inline{display:flex;align-items:center;gap:9px}
.switch{position:relative;display:inline-block;width:40px;height:22px}
.switch input{display:none}
.switch .track{position:absolute;inset:0;background:var(--cube-elevated);border-radius:var(--radius-pill,100px);transition:.2s;cursor:pointer}
.switch .track:before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#bbb;border-radius:50%;transition:.2s}
.switch input:checked + .track{background:var(--cube-accent)}
.switch input:checked + .track:before{transform:translateX(18px);background:var(--cube-accent-ink)}

/* ── Tables ─────────────────────────────────────────────────────── */
.thead,.trow{display:grid;gap:0;padding:11px 16px;align-items:center}
.thead{border-bottom:1px solid var(--cube-border);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--text-faint)}
.trow{border-bottom:1px solid var(--cube-line)}
.mono{font-family:var(--font-mono)}
.right{text-align:right}
.accent{color:var(--cube-accent)}
.muted{color:var(--text-muted)}
.faint{color:var(--text-faint)}
.banner{display:flex;align-items:center;gap:8px;padding:9px 16px;background:var(--cube-accent-soft);
  border-bottom:1px solid var(--cube-border);font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--cube-accent)}
.empty{padding:48px 16px;text-align:center;font-family:var(--font-mono);font-size:12px;color:var(--text-faint)}
.stack{display:flex;flex-direction:column;gap:18px}
.col-gap{display:flex;flex-direction:column;gap:15px}

/* ── Messages ───────────────────────────────────────────────────── */
.msgs{position:fixed;top:60px;right:18px;z-index:200;display:flex;flex-direction:column;gap:8px;max-width:380px}
.msg{padding:10px 14px;border-radius:var(--radius-sm);font-size:12.5px;box-shadow:var(--shadow-xl);animation:admUp .25s ease both}
.msg.success{background:var(--cube-success-soft);color:var(--cube-success);border:1px solid rgba(46,204,113,.4)}
.msg.error{background:var(--cube-danger-soft);color:var(--cube-danger);border:1px solid rgba(231,76,54,.4)}
.msg.info{background:var(--cube-info-soft);color:var(--cube-info);border:1px solid rgba(41,182,246,.4)}

/* ── Drawer ─────────────────────────────────────────────────────── */
.drawer-scrim{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.66);backdrop-filter:blur(3px);display:flex;justify-content:flex-end}
.drawer{width:min(540px,96vw);height:100%;background:var(--cube-card);border-left:1px solid var(--cube-border);
  box-shadow:-20px 0 60px rgba(0,0,0,.6);display:flex;flex-direction:column;animation:admUp .25s ease both}
.drawer-head{display:flex;align-items:center;gap:11px;padding:15px 20px;border-bottom:2px solid var(--cube-accent);background:var(--grad-card-header)}
.drawer-head .title{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-heading)}
.iconbtn{background:transparent;border:1px solid var(--cube-border);border-radius:var(--radius-xs);color:var(--text-muted);width:28px;height:28px;cursor:pointer;font-size:14px;line-height:1}
.drawer-body{padding:16px 20px;display:flex;flex-direction:column;gap:14px}
.drawer-list{flex:1;overflow-y:auto;border-top:1px solid var(--cube-border)}
.drawer-item{display:flex;align-items:center;gap:10px;padding:10px 20px;border-bottom:1px solid var(--cube-line)}
.drawer-item .grow{min-width:0;flex:1}
.drawer-item .nm{display:block;font-size:13px;color:var(--text-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-item .id{font-family:var(--font-mono);font-size:9px;color:var(--text-faint)}

/* ── Public appraisal page ──────────────────────────────────────── */
.public-wrap{min-height:100vh;background:var(--cube-bg-0);display:flex;flex-direction:column;align-items:center;padding:40px 20px}
.hero{text-align:center;max-width:720px;margin-bottom:28px}
.hero h1{font-family:var(--font-display);font-weight:700;font-size:44px;letter-spacing:.03em;color:var(--cube-accent);margin:0 0 12px;line-height:1.05}
.hero p{font-size:15px;color:var(--text-muted);line-height:1.6;margin:0}
.appraise-card{width:100%;max-width:760px;background:var(--cube-surface);border:1px solid var(--cube-border);border-radius:var(--radius-lg);padding:22px}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.payout-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:22px;
  background:var(--cube-accent-soft);border:1px solid var(--cube-accent-line);border-radius:var(--radius-md)}
.payout-box .v{font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--cube-accent)}
.ref-chip{font-family:var(--font-mono);font-size:16px;color:var(--cube-accent);letter-spacing:.08em}