@import url('./tokens.css');
* { box-sizing: border-box; }
html, body { height:100%; }
body { margin:0; font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing:antialiased; }
/* Skip link visible on focus */
.skip-link:focus { position:static; width:auto; height:auto; padding:8px 14px; background:var(--color-accent); color:#fff; z-index:200; display:inline-block; }

/* Layout */
.topbar { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-3) var(--space-6); background:linear-gradient(60deg,var(--color-bg-alt),var(--color-bg)); border-bottom:1px solid var(--color-border); backdrop-filter:blur(6px); }
.topbar__left, .topbar__right { display:flex; align-items:center; gap:var(--space-3); }
.brand { font-weight:600; letter-spacing:.5px; font-size:15px; display:inline-flex; align-items:center; gap:6px; }
.brand svg { width:18px; height:18px; color:var(--color-accent); }
.nav-links a { position:relative; font:500 13px/1 var(--font-sans); padding:8px 10px; color:var(--color-text-dim); text-decoration:none; border-radius:var(--radius-sm); transition:var(--transition-fast); }
.nav-links a:hover { color:var(--color-text); background:var(--color-bg-alt); }
.nav-links a.active { color:var(--color-accent); background:var(--color-accent-soft); }
.page { max-width:1180px; margin:0 auto; padding: var(--space-6) var(--space-6) 120px; }

/* Chips */
.chip { display:inline-flex; align-items:center; gap:6px; font:500 11px/1 var(--font-sans); padding:4px 10px; border-radius:var(--radius-pill); background:var(--color-bg-alt); color:var(--color-text-dim); letter-spacing:.5px; text-transform:uppercase; }
.chip-plan { background: var(--color-accent-soft); color: var(--color-accent); }

/* Buttons */
.button, button.button { --_bg:var(--color-accent); --_bg-hover:var(--color-accent-hover); --_color:#fff; --_border:var(--color-accent);
  font:500 13px/1 var(--font-sans); padding:10px 16px; border-radius:var(--radius-md); border:1px solid var(--_border); background:var(--_bg); color:var(--_color); cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:var(--transition-fast); text-decoration:none; }
.button:hover { background:var(--_bg-hover); }
.button:focus-visible { outline:none; box-shadow: var(--color-focus-ring); }
.button.ghost { --_bg:var(--color-accent-soft); --_bg-hover:rgba(59,130,246,.22); --_color:var(--color-accent); --_border:transparent; }
.button.danger { --_bg:var(--color-danger); --_bg-hover:#f87171; --_border:var(--color-danger); }
.button.small { padding:6px 12px; font-size:12px; }

/* Card */
.card-grid { display:grid; gap: var(--space-4); grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.card { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); display:flex; flex-direction:column; gap:var(--space-3); position:relative; transition: var(--transition); }
.card:hover { border-color: var(--color-border-accent); box-shadow: var(--shadow-sm); }
.card h3 { margin:0; font-size:15px; font-weight:600; }
.card-meta { font-size:12px; color: var(--color-text-dim); display:flex; gap:12px; flex-wrap:wrap; }

/* Table polish */
.table-wrap { border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:auto; background:var(--color-surface); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; font-weight:600; font-size:11px; letter-spacing:.5px; text-transform:uppercase; background:var(--color-surface-alt); position:sticky; top:0; backdrop-filter:blur(3px); z-index:2; }
th, td { padding:10px 12px; border-bottom:1px solid var(--color-border); vertical-align:top; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:nth-child(even) td { background: rgba(255,255,255,.01); }
tr:hover td { background:rgba(255,255,255,.04); }
table.compact th, table.compact td { padding:6px 10px; }
table.sticky-first th:first-child, table.sticky-first td:first-child { position:sticky; left:0; background:var(--color-surface); z-index:1; }

/* Utilities */
.flex { display:flex; }
.flex-col { display:flex; flex-direction:column; }
.gap-2 { gap:var(--space-2); }
.gap-3 { gap:var(--space-3); }
.gap-4 { gap:var(--space-4); }
.muted { color: var(--color-text-dim); }
.text-small { font-size:12px; }
.divider { height:18px; width:1px; background:var(--color-border); }
.space-between { justify-content:space-between; }
.nowrap { white-space:nowrap; }

/* Form */
.input { background: var(--color-bg-alt); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:10px 12px; color:var(--color-text); font:500 13px var(--font-sans); width:100%; }
.input:focus { outline:none; border-color: var(--color-accent); box-shadow: var(--color-focus-ring); }
.label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; display:block; }

/* Alerts */
.alert { padding:12px 16px; border-radius: var(--radius-md); font:500 13px/1.4 var(--font-sans); display:flex; gap:10px; align-items:flex-start; border:1px solid; }
.alert-info { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent); }
.alert-warn { background: rgba(245,158,11,.15); border-color: var(--color-warn); color: var(--color-warn); }
.alert-danger { background: rgba(239,68,68,.18); border-color: var(--color-danger); color: var(--color-danger); }

/* Skeleton */
.skel { position:relative; overflow:hidden; background:linear-gradient(90deg, var(--color-bg-alt) 25%, var(--color-surface) 37%, var(--color-bg-alt) 63%); background-size:400% 100%; animation: skel 1300ms linear infinite; border-radius:4px; }
@keyframes skel { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }

/* Progress bars */
.progress { width:100%; height:8px; background:var(--color-bg-alt); border-radius:6px; overflow:hidden; position:relative; box-shadow:inset 0 0 0 1px var(--color-border); }
.progress .bar { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,var(--color-accent),var(--color-accent-hover)); transition:width 300ms var(--ease-standard); }

/* Focus outline fallback */
:focus-visible { outline: none; box-shadow: var(--color-focus-ring); }