@import url('./tokens.css');

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--font-sans);background:var(--bg);color:var(--text)}
body{min-height:100vh}
button,input,select,textarea{font:inherit}
a{color:inherit;text-decoration:none}
.hidden{display:none !important}

.v2-shell{min-height:100vh;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 100%)}
.v2-mobile-topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:color-mix(in srgb,var(--surface) 88%, transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.v2-brand{display:grid;gap:2px}
.v2-brand-meta{font-size:11px;color:var(--text-faint);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.v2-mode-note{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--text-soft)}
.v2-brand strong{font-size:18px;line-height:1}
.v2-brand span{font-size:12px;color:var(--text-soft)}
.v2-menu-btn,.v2-icon-btn{border:none;border-radius:12px;background:var(--surface);color:var(--text);min-height:42px;min-width:42px;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.v2-layout{display:grid;min-height:calc(100vh - 71px)}
.v2-sidebar{display:none}
.v2-content{display:grid;gap:16px;padding:16px}
.v2-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.v2-card-pad{padding:16px}
.v2-section-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.v2-section-head h2,.v2-section-head h3,.v2-section-head p{margin:0}
.v2-section-head p{font-size:14px;line-height:1.45;color:var(--text-soft);margin-top:4px}
.v2-kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.v2-kpi{padding:14px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line)}
.v2-kpi-label{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700}
.v2-kpi-value{font-size:24px;font-weight:800;letter-spacing:-.03em;margin-top:8px}
.v2-pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface-2);font-size:12px;font-weight:700;color:var(--text-soft)}
.v2-stack{display:grid;gap:12px}
.v2-list-card{padding:14px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line)}
.v2-list-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.v2-meta{font-size:13px;line-height:1.45;color:var(--text-soft)}
.v2-empty{padding:18px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px dashed var(--line-strong);color:var(--text-soft);font-size:14px}
.v2-nav{display:flex;gap:8px;overflow:auto;padding-bottom:4px}
.v2-nav-btn{border:none;background:var(--surface);color:var(--text-soft);border-radius:999px;padding:10px 14px;white-space:nowrap;box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.v2-nav-btn.is-active{background:var(--primary);color:#fff;border-color:transparent}
.v2-spacer{height:12px}
.v2-theme-select{border:none;background:var(--surface);color:var(--text);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow-sm);border:1px solid var(--line);max-width:140px}
.v2-detail-layout{display:grid;gap:12px}
.v2-select-card{text-align:left;width:100%;cursor:pointer}
.v2-select-card.is-selected{border-color:var(--primary);background:var(--surface-3)}
.v2-detail-panel{align-content:start}
.v2-action-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.v2-action-btn{border:none;border-radius:12px;padding:11px 14px;background:var(--primary);color:#fff;font-weight:700;box-shadow:var(--shadow-sm)}
.v2-action-btn-secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.v2-return-btn{border:none;border-radius:12px;padding:10px 12px;background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow-sm);font-weight:700}

@media (min-width: 980px){
  .v2-detail-layout{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);align-items:start}
  .v2-mobile-topbar{display:none}
  .v2-layout{grid-template-columns:280px 1fr;min-height:100vh}
  .v2-sidebar{display:grid;align-content:start;gap:18px;padding:24px 18px;background:linear-gradient(180deg,var(--sidebar) 0%,color-mix(in srgb,var(--sidebar) 82%, #000 18%) 100%);color:var(--sidebar-text);border-right:1px solid color-mix(in srgb,var(--sidebar-text) 12%, transparent)}
  .v2-content{padding:24px;gap:18px}
  .v2-desktop-brand{display:grid;gap:4px;padding:8px}
  .v2-desktop-brand strong{font-size:22px}
  .v2-desktop-brand span{font-size:13px;opacity:.78}
  .v2-sidebar-meta{display:grid;gap:8px;padding:12px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--sidebar-text) 8%, transparent);border:1px solid color-mix(in srgb,var(--sidebar-text) 12%, transparent)}
  .v2-sidebar-meta strong{font-size:13px}
  .v2-sidebar-meta span{font-size:12px;opacity:.78}
}