:root { --bg:#f4f7fb; --surface:#fff; --surface-muted:#f8fafc; --surface-hover:#f1f5f9; --text:#172033; --muted:#69758a; --line:#dce3ed; --line-strong:#c5cfdd; --accent:#1877f2; --accent-hover:#0f66d8; --accent-soft:#e9f2ff; --success:#047857; --success-soft:#dff7ee; --danger:#c2415b; --danger-soft:#ffeaee; --warning:#a26006; --warning-soft:#fff4d6; --radius:8px; --shadow:0 8px 24px rgba(30,48,76,.07); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html { min-width:320px; background:var(--bg); } body { min-width:320px; min-height:100vh; margin:0; background:var(--bg); color:var(--text); line-height:1.5; } a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; } button,input,select,textarea { font:inherit; } button { cursor:pointer; } button:disabled { cursor:wait; opacity:.65; } code,pre { font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { color:var(--text); line-height:1.25; } h1 { margin-bottom:0; font-size:1.25rem; font-weight:720; } h2 { margin-bottom:.5rem; font-size:1.05rem; } h3 { margin-bottom:.85rem; font-size:.95rem; } p { color:var(--muted); }
.app-shell { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:100vh; } .sidebar { position:sticky; top:0; display:flex; flex-direction:column; width:240px; height:100vh; padding:1.25rem .9rem; border-right:1px solid var(--line); background:#101a2b; color:#dce5f1; z-index:30; } .brand,.auth-brand { display:inline-flex; align-items:center; gap:.65rem; color:inherit; font-size:1.05rem; font-weight:760; } .brand:hover { color:#fff; text-decoration:none; } .brand-mark { display:inline-grid; place-items:center; flex:0 0 2rem; width:2rem; height:2rem; border-radius:7px; background:var(--accent); color:#fff; font-size:1rem; font-weight:800; } .nav-list { display:grid; gap:.25rem; margin-top:2.25rem; } .nav-link { display:flex; align-items:center; min-height:2.55rem; padding:0 .75rem; border:1px solid transparent; border-radius:6px; color:#b9c5d6; font-size:.9rem; font-weight:600; transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease; } .nav-link:hover,.nav-link:focus-visible { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.08); color:#fff; text-decoration:none; transform:translateX(2px); } .nav-link[aria-current="page"] { border-color:rgba(74,148,255,.38); background:rgba(24,119,242,.18); color:#fff; } .sidebar-user { display:flex; align-items:center; gap:.65rem; margin-top:auto; padding:.9rem .55rem; border-top:1px solid rgba(222,232,245,.13); } .sidebar-user strong,.sidebar-user small { display:block; overflow:hidden; max-width:145px; text-overflow:ellipsis; white-space:nowrap; } .sidebar-user strong { color:#f5f8fd; font-size:.84rem; } .sidebar-user small { color:#91a2ba; font-size:.72rem; } .avatar { display:inline-grid; place-items:center; flex:0 0 2rem; width:2rem; height:2rem; border-radius:50%; background:#2168ca; color:#fff; font-size:.8rem; font-weight:750; } .logout-form { margin-top:.2rem; } .sidebar .btn { width:100%; }
.main-content { width:min(1440px,100%); padding:1.25rem clamp(1rem,3vw,2.5rem) 2.5rem; margin:0 auto; overflow:hidden; } .topbar { display:flex; align-items:center; gap:.9rem; min-height:4.25rem; padding-bottom:1rem; margin-bottom:1.25rem; border-bottom:1px solid var(--line); } .topbar .eyebrow { display:block; margin-bottom:.16rem; } .menu-toggle { display:none; flex:0 0 2.5rem; width:2.5rem; padding:0; } .eyebrow { color:var(--accent); font-size:.68rem; font-weight:760; letter-spacing:.12em; text-transform:uppercase; } .glass-card { padding:clamp(1rem,2vw,1.35rem); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); } .glass-card + .glass-card,.glass-card + section { margin-top:1.25rem; } .section-heading,.section-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; } .section-heading p { margin-bottom:.25rem; } .section-heading h2 { margin-bottom:0; } .page-intro { margin-bottom:1rem; } .page-intro p { max-width:42rem; margin-bottom:0; } .muted { color:var(--muted); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:2.45rem; padding:.53rem .85rem; border:1px solid var(--accent); border-radius:6px; background:var(--accent); color:#fff; font-size:.86rem; font-weight:700; line-height:1; white-space:nowrap; transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease; } .btn:hover,.btn:focus-visible { border-color:var(--accent-hover); background:var(--accent-hover); box-shadow:0 5px 12px rgba(24,119,242,.2); color:#fff; text-decoration:none; transform:translateY(-1px); } .btn:active { box-shadow:none; transform:translateY(0); } .btn-secondary { border-color:var(--line-strong); background:var(--surface); color:#354158; } .btn-secondary:hover,.btn-secondary:focus-visible { border-color:#aebdce; background:var(--surface-hover); color:var(--text); box-shadow:none; } .sidebar .btn-secondary { border-color:rgba(255,255,255,.15); background:transparent; color:#cbd6e5; } .sidebar .btn-secondary:hover { border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.07); color:#fff; } .btn-danger { border-color:var(--danger); background:var(--danger); color:#fff; } .btn-danger:hover,.btn-danger:focus-visible { border-color:#a93049; background:#a93049; }
.dashboard-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1.25rem; } .metric-card { display:flex; flex-direction:column; justify-content:space-between; min-height:8rem; border-top:3px solid var(--accent); transition:transform .2s ease,box-shadow .2s ease; } .metric-card:nth-child(2) { border-top-color:var(--success); } .metric-card:nth-child(3) { border-top-color:#7450c7; } .metric-card:nth-child(4) { border-top-color:#d48b16; } .metric-card:hover { box-shadow:0 12px 28px rgba(30,48,76,.11); transform:translateY(-2px); } .metric-card span { color:var(--muted); font-size:.84rem; font-weight:650; } .metric-card strong { color:var(--text); font-size:clamp(1.55rem,2vw,2.2rem); font-variant-numeric:tabular-nums; }
.field,.form-grid label { display:grid; gap:.42rem; color:#536078; font-size:.8rem; font-weight:700; } .field input,.field select,.field textarea,.form-grid input,.form-grid select,.filter-grid input,.filter-grid select { width:100%; min-width:0; min-height:2.5rem; padding:.5rem .7rem; border:1px solid var(--line-strong); border-radius:6px; outline:none; background:var(--surface); color:var(--text); font-size:.88rem; font-weight:450; transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease; } .field textarea { min-height:6rem; resize:vertical; } .field input:focus,.field select:focus,.field textarea:focus,.form-grid input:focus,.form-grid select:focus,.filter-grid input:focus,.filter-grid select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(24,119,242,.13); } .field input::placeholder,.form-grid input::placeholder,.filter-grid input::placeholder { color:#9aa6b8; } .stack-form { display:grid; gap:1rem; } .form-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem; align-items:end; } .form-grid .span-all { grid-column:1/-1; } .form-grid .btn { justify-self:start; } .filter-grid { display:grid; grid-template-columns:minmax(12rem,1.7fr) minmax(9rem,1fr) minmax(7rem,.7fr) minmax(8rem,.8fr) minmax(8rem,.8fr) auto; gap:.7rem; align-items:end; padding:.9rem; margin-bottom:1rem; border:1px solid var(--line); border-radius:7px; background:var(--surface-muted); } .filter-grid .btn { min-width:4.8rem; } .grid-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-bottom:1.25rem; } .clean-list { display:grid; gap:.7rem; padding:0; margin:0; list-style:none; color:var(--muted); font-size:.9rem; } .clean-list strong { color:var(--text); }
.alert { display:flex; align-items:center; min-height:2.75rem; padding:.7rem .9rem; margin:0 0 1rem; border:1px solid; border-radius:6px; font-size:.88rem; } .alert-success { border-color:#b4e7d4; background:var(--success-soft); color:#075d46; } .alert-error { border-color:#f4bdc8; background:var(--danger-soft); color:#9f243d; } .token-reveal { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.8rem; align-items:center; } .token-reveal code { overflow:hidden; padding:.38rem .5rem; border:1px solid rgba(4,120,87,.2); border-radius:4px; background:rgba(255,255,255,.55); color:#075d46; text-overflow:ellipsis; white-space:nowrap; }
.table-card { overflow:hidden; } .table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:7px; background:var(--surface); } table { width:100%; min-width:700px; border-collapse:collapse; } th,td { padding:.78rem .85rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; } th { background:var(--surface-muted); color:#657289; font-size:.7rem; font-weight:760; letter-spacing:.065em; text-transform:uppercase; white-space:nowrap; } td { color:#334057; font-size:.84rem; } td small { color:var(--muted); } tbody tr { transition:background-color .16s ease; } tbody tr:hover { background:#f7faff; } tbody tr:last-child td { border-bottom:0; } td code { display:inline-block; max-width:10.5rem; overflow:hidden; padding:.2rem .35rem; border-radius:4px; background:#f0f4f8; color:#354158; text-overflow:ellipsis; vertical-align:middle; white-space:nowrap; } .badge,.status { display:inline-flex; align-items:center; min-height:1.5rem; padding:.16rem .5rem; border-radius:999px; background:#edf1f6; color:#627087; font-size:.72rem; font-weight:750; line-height:1; white-space:nowrap; } .badge-success,.status-active { background:var(--success-soft); color:#087255; } .badge-danger,.status-disabled,.status-expired { background:var(--danger-soft); color:#b02f4a; } .status-unused { background:var(--accent-soft); color:#1762bc; } .status-pending,.status-expiring { background:var(--warning-soft); color:var(--warning); }
.timeline { display:grid; gap:0; padding:0; margin:0; list-style:none; } .timeline li { position:relative; display:grid; grid-template-columns:minmax(9rem,1fr) minmax(7rem,1fr) auto; gap:1rem; align-items:center; padding:.8rem .15rem .8rem 1rem; border-bottom:1px solid var(--line); } .timeline li::before { position:absolute; left:0; width:.4rem; height:.4rem; border-radius:50%; background:var(--accent); content:""; } .timeline li:last-child { border-bottom:0; } .timeline strong { font-size:.86rem; } .timeline span,.timeline time { color:var(--muted); font-size:.8rem; } .timeline time { font-variant-numeric:tabular-nums; white-space:nowrap; } pre { max-height:22rem; overflow:auto; padding:1rem; margin:0; border:1px solid var(--line); border-radius:6px; background:#101a2b; color:#d6e2f3; font-size:.82rem; line-height:1.7; } .auth-page { display:grid; place-items:center; padding:1.5rem; background:#eef3f9; } .auth-shell { width:min(100%,28rem); padding:0; margin:0; } .auth-card { padding:clamp(1.5rem,6vw,2.4rem); } .auth-brand { margin-bottom:2.1rem; color:var(--text); } .auth-card > p:not(.eyebrow) { margin-bottom:1.5rem; font-size:.92rem; } .auth-card .btn { width:100%; } .toast-stack { position:fixed; right:1rem; bottom:1rem; z-index:60; display:grid; gap:.55rem; width:min(22rem,calc(100% - 2rem)); } .toast { padding:.75rem .9rem; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:6px; background:var(--surface); box-shadow:0 12px 28px rgba(30,48,76,.16); color:#324056; font-size:.86rem; animation:toast-in .22s ease both; } .toast-error { border-left-color:var(--danger); } .toast.is-leaving { animation:toast-out .2s ease both; } .skeleton { position:relative; overflow:hidden; border-radius:5px; background:#e8edf4; } .skeleton::after { position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); content:""; transform:translateX(-100%); animation:shimmer 1.3s infinite; }
@keyframes toast-in { from { opacity:0; transform:translateY(.6rem); } to { opacity:1; transform:translateY(0); } } @keyframes toast-out { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(.5rem); } } @keyframes shimmer { to { transform:translateX(100%); } }
@media (max-width:1100px) { .dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .filter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:820px) { .app-shell { display:block; } .sidebar { position:fixed; left:0; width:min(17rem,calc(100% - 3.5rem)); box-shadow:12px 0 28px rgba(9,20,37,.2); transform:translateX(-105%); transition:transform .24s ease; } .app-shell.is-sidebar-open .sidebar { transform:translateX(0); } .sidebar-overlay { position:fixed; inset:0; z-index:20; background:rgba(13,22,37,.42); opacity:0; transition:opacity .2s ease; pointer-events:none; } .sidebar-overlay.is-visible { opacity:1; pointer-events:auto; } .main-content { padding:.85rem 1rem 1.75rem; } .topbar { min-height:3.75rem; margin-bottom:1rem; } .menu-toggle { display:inline-flex; } .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:580px) { .dashboard-grid,.grid-two,.form-grid,.filter-grid { grid-template-columns:1fr; } .metric-card { min-height:6.8rem; } .section-heading,.section-head { align-items:flex-start; flex-direction:column; } .section-heading .btn,.section-head .btn,.form-grid .btn,.filter-grid .btn { width:100%; } .token-reveal { grid-template-columns:1fr; } .token-reveal code { max-width:100%; } .timeline li { grid-template-columns:1fr; gap:.2rem; padding-left:1rem; } .timeline time { white-space:normal; } .auth-shell { padding:1rem; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.001ms !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; } }
.bulk-toolbar,.pagination-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:.85rem 0; }
.bulk-toolbar { margin-top:1.25rem; }
.pagination { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.page-link { display:inline-grid; place-items:center; min-width:2.25rem; height:2.25rem; padding:0 .55rem; border:1px solid var(--line); border-radius:6px; color:var(--accent); font-size:.82rem; font-weight:700; transition:background-color .18s ease,color .18s ease,transform .18s ease; }
.page-link:hover,.page-link:focus-visible { background:var(--accent-soft); text-decoration:none; transform:translateY(-1px); }
.page-link.is-current { background:var(--accent); border-color:var(--accent); color:#fff; }