:root { --ink:#202123; --muted:#707176; --line:#e5e5e7; --soft:#f7f7f8; --sidebar:#f1f1f3; --accent:#5656d6; --accent-dark:#4545bd; --accent-soft:#eeeeff; --white:#fff; --danger:#b44747; }
* { box-sizing:border-box; }
html { color-scheme:light; }
body { margin:0; color:var(--ink); background:#fbfbfa; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:14px; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p { margin:0; }
h1,h2,h3,.brand { font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
.muted { color:var(--muted); line-height:1.6; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 17px; border:1px solid transparent; border-radius:10px; cursor:pointer; font-weight:600; transition:.18s ease; }
.button-primary { color:#fff; background:var(--accent); box-shadow:0 1px 2px #35359b30; }
.button-primary:hover { background:var(--accent-dark); transform:translateY(-1px); }
.button-ghost { background:#fff; border-color:#dfe2de; color:#414843; }
.button-ghost:hover { background:#f6f7f5; }
.button-wide { width:100%; margin-top:5px; }

/* Auth */
.auth-page { min-height:100vh; background:radial-gradient(circle at 50% -10%,#eeeeff 0,transparent 35%),#fafafa; }
.auth-page:before,.auth-page:after { content:""; position:fixed; width:260px; height:260px; border:1px solid #dfdff0; border-radius:50%; opacity:.35; pointer-events:none; }
.auth-page:before { left:-160px; bottom:-80px; }.auth-page:after { right:-190px; top:15%; }
.auth-shell { width:min(100% - 32px,440px); min-height:100vh; margin:auto; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:40px 0 24px; }
.brand { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; letter-spacing:-.4px; }
.brand-mark { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; background:#292a2d; color:white; font:700 16px Inter,system-ui,sans-serif; box-shadow:inset 0 0 0 1px #ffffff26; }
.brand-auth { margin-bottom:30px; font-size:21px; }
.brand-auth .brand-mark { width:37px; height:37px; }
.auth-card { width:100%; background:#fff; border:1px solid var(--line); border-radius:18px; padding:34px; box-shadow:0 20px 55px #263a2d0c,0 2px 8px #263a2d0a; }
.eyebrow { display:inline-block; color:var(--accent); background:var(--accent-soft); padding:5px 9px; border-radius:7px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:15px; }
.auth-card h1 { font-size:28px; letter-spacing:-.8px; margin-bottom:8px; }
.stack-form { display:grid; gap:16px; margin-top:26px; }
.stack-form label,.settings-form label { display:grid; gap:7px; font-weight:600; font-size:13px; }
input { width:100%; height:44px; padding:0 13px; border:1px solid #dfe2de; border-radius:9px; outline:none; color:var(--ink); background:#fff; transition:.15s; }
input::placeholder { color:#adaeb2; } input:focus { border-color:#7272dc; box-shadow:0 0 0 3px #5656d614; }
.check { display:flex!important; align-items:center; grid-template-columns:auto 1fr; color:#646569; font-weight:400!important; cursor:pointer; }.check input { width:16px;height:16px;accent-color:var(--accent); }
.form-error,.alert { background:#fff0f0; color:#973f3f; border:1px solid #f2d5d5; padding:11px 13px; border-radius:9px; font-size:13px; }
.auth-foot { margin-top:25px; padding-top:21px; border-top:1px solid var(--line); text-align:center; color:#85868b; font-size:13px; }.auth-foot a { color:var(--accent); font-weight:600; }.status-dot { display:inline-block;width:7px;height:7px;background:#7777c8;border-radius:50%;margin-right:4px; }
.auth-legal { color:#9b9f9c; font-size:11px; margin-top:24px; }

/* App frame */
.app-shell { min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr); }
.sidebar { position:fixed; inset:0 auto 0 0; width:248px; z-index:20; display:flex; flex-direction:column; justify-content:space-between; padding:25px 17px 18px; background:var(--sidebar); border-right:1px solid #e4e6e2; }
.sidebar .brand { padding:0 10px; margin-bottom:32px; }
.sidebar nav { display:grid; gap:4px; }
.nav-link { width:100%; border:0; display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:9px; color:#626965; background:transparent; cursor:pointer; text-align:left; font-weight:500; }
.nav-link:hover { background:#e7e7e9;color:#303033; }.nav-link.active { background:#e2e2e8;color:#30304f;font-weight:600; }
.nav-link svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round; }.nav-link:first-child svg { fill:currentColor;stroke:none; }
.sidebar-bottom { display:grid;gap:14px; }.privacy-note { display:flex;gap:10px;padding:12px;background:#e8e8eb;border-radius:10px;color:#6b6c72;font-size:11px;line-height:1.5; }.privacy-note>span { width:18px;height:18px;flex:0 0 auto;border:1px solid #9f9fa8;border-radius:50%;display:grid;place-items:center;font-size:10px; }.privacy-note b { color:#4d4e54;font-weight:600; }
.user-menu { border-top:1px solid #dedee1;padding:15px 5px 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px; }.avatar { width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#ddddf2;color:#45458b;font-weight:700; }.user-menu b,.user-menu small { display:block;max-width:125px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.user-menu b { font-size:12px; }.user-menu small { color:#88898e;font-size:10px;margin-top:2px; }.icon-button { border:0;background:transparent;color:#85868b;font-size:18px;cursor:pointer; }
.content { grid-column:2;min-width:0; }.topbar { height:72px;position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#fbfbfcf2;backdrop-filter:blur(12px);border-bottom:1px solid var(--line); }.topbar-title { font-weight:600; }.mobile-menu { display:none;border:0;background:transparent;font-size:20px; }.back-link { color:#626368;font-weight:500; }.back-link:hover { color:var(--accent); }
.page-wrap { width:min(1140px,calc(100% - 80px));margin:0 auto;padding:45px 0 70px; }.welcome-row { display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px; }.kicker { color:#7c847f;text-transform:uppercase;letter-spacing:.09em;font-size:10px;font-weight:700;margin-bottom:8px; }.welcome-row h1 { font-size:30px;letter-spacing:-1px;margin-bottom:7px; }.welcome-row>div>p:last-child { color:var(--muted); }.date-pill { border:1px solid var(--line);border-radius:8px;padding:8px 11px;color:#7e8581;font-size:11px;background:#fff; }
.metric-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px; }.metric { display:flex;align-items:center;gap:15px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:19px;min-height:105px; }.metric-icon { width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;font-size:19px; }.metric-icon.accent { color:#5656ae;background:#eeeeff; }.metric-icon.violet { color:#705c93;background:#f2edf8; }.metric-icon.amber { color:#8c6b2d;background:#f7f0df; }.metric small,.metric em,.metric strong { display:block; }.metric small { color:#77787e;font-size:11px;margin-bottom:3px; }.metric strong { font:700 24px Inter,system-ui,sans-serif;letter-spacing:-.5px; }.metric em { color:#a0a1a5;font-size:10px;font-style:normal;margin-top:2px; }
.panel { background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:16px; }.panel-head { min-height:72px;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line); }.panel-head h2 { font-size:15px;margin-bottom:3px; }.panel-head p { color:#989e9a;font-size:10px; }.search { position:relative; }.search span { position:absolute;left:11px;top:8px;color:#969c98;font-size:18px; }.search input { width:220px;height:36px;padding-left:34px;background:#fafaf9;font-size:12px; }
.link-row { min-height:91px;display:grid;grid-template-columns:auto minmax(230px,1.8fr) minmax(90px,.5fr) minmax(120px,.65fr) 88px 18px;align-items:center;gap:15px;padding:14px 20px;border-bottom:1px solid #eff0f1;transition:.15s; }.link-row:last-child { border:0; }.link-row:hover { background:#fafafd; }.link-badge { width:37px;height:37px;display:grid;place-items:center;border-radius:9px;background:#eeeeff;color:var(--accent);font-size:16px; }.link-main { min-width:0; }.link-main b { font-size:13px; }.short-url { display:flex;align-items:center;gap:6px;color:var(--accent);font-size:11px;margin:5px 0; }.short-url a:hover { text-decoration:underline; }.copy-button { border:0;background:transparent;color:#7f8088;cursor:pointer;font-size:11px;padding:2px 4px;border-radius:4px; }.copy-button:hover { background:#ececff;color:var(--accent); }.destination { display:block;max-width:420px;color:#a0a1a5;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.link-stat b,.link-stat span,.link-date b,.link-date span { display:block; }.link-stat b,.link-date b { font-size:12px;font-weight:600; }.link-stat span,.link-date span { font-size:9px;color:#9a9b9f;margin-top:4px; }.state { display:inline-flex;align-items:center;gap:6px;width:max-content;border-radius:20px;background:#eeeeff;color:#5656a8;padding:5px 8px;font-size:9px;font-weight:600; }.state i { width:5px;height:5px;border-radius:50%;background:#6767d0; }.state.off { color:#777;background:#eee; }.state.off i { background:#999; }.row-arrow { font-size:25px;color:#a2a3a7; }.pagination { min-height:55px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font-size:11px; }.pagination a { color:var(--accent);font-weight:600; }.pagination span { color:#b4b5b7; }.pagination small { color:#929397; }
.empty-state { padding:70px 20px;text-align:center; }.empty-state>span { width:45px;height:45px;display:grid;place-items:center;margin:0 auto 15px;border-radius:12px;background:var(--accent-soft);color:var(--accent);font-size:20px; }.empty-state h3 { margin-bottom:7px; }.empty-state p { color:var(--muted);font-size:12px;margin-bottom:20px; }.alert { margin-bottom:20px; }

/* Modal */
.modal { visibility:hidden;opacity:0;position:fixed;inset:0;z-index:100;display:grid;place-items:center;transition:.2s; }.modal.open { visibility:visible;opacity:1; }.modal-backdrop { position:absolute;inset:0;border:0;background:#20212499;backdrop-filter:blur(3px); }.modal-card { position:relative;width:min(92vw,500px);max-height:92vh;overflow:auto;background:#fff;border-radius:17px;padding:30px;box-shadow:0 30px 100px #15151baa;transform:translateY(10px) scale(.98);transition:.2s; }.modal.open .modal-card { transform:none; }.modal-card h2 { font-size:24px;margin-bottom:6px; }.modal-close { position:absolute;right:18px;top:15px;border:0;background:transparent;color:#85868b;font-size:25px;cursor:pointer; }.optional { float:right;color:#a1a2a6;font-weight:400;font-size:10px; }.input-prefix { display:flex;align-items:center;height:44px;border:1px solid #dfe0e3;border-radius:9px;overflow:hidden; }.input-prefix:focus-within { border-color:#7272dc;box-shadow:0 0 0 3px #5656d614; }.input-prefix span { height:100%;display:flex;align-items:center;padding:0 0 0 12px;color:#8c8d92;background:#f7f7f8;font-size:11px;white-space:nowrap; }.input-prefix input { border:0;border-radius:0;box-shadow:none!important;padding-left:4px; }.modal-actions { display:flex;justify-content:flex-end;gap:8px;margin-top:4px; }.modal-open { overflow:hidden; }.toast { position:fixed;right:25px;bottom:25px;z-index:200;background:#303036;color:white;border-radius:9px;padding:12px 16px;box-shadow:0 10px 30px #18181d44;opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s;font-size:12px; }.toast.show { opacity:1;transform:none; }
.quick-link-form { margin-top:25px; }.quick-input { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px; }.quick-input input { height:48px;font-size:14px;padding:0 15px; }.quick-input .button { min-height:48px;padding-inline:21px; }.quick-input .button:disabled { opacity:.65;cursor:wait;transform:none; }.quick-error { display:none;margin-top:9px;padding:9px 11px;border-radius:8px;background:#fff0f0;color:#973f3f;font-size:11px; }
.link-options { margin-top:17px;border-top:1px solid var(--line); }.link-options summary { display:flex;align-items:center;justify-content:space-between;padding:16px 2px 2px;color:#747b77;font-size:12px;font-weight:600;cursor:pointer;list-style:none;user-select:none; }.link-options summary::-webkit-details-marker { display:none; }.link-options summary i { font-size:16px;font-style:normal;transition:.18s; }.link-options[open] summary i { transform:rotate(180deg); }.options-fields { display:grid;gap:15px;padding-top:17px; }.options-fields label { display:grid;gap:7px;font-size:12px;font-weight:600; }
.create-success-state { display:none;text-align:center;padding:14px 0 2px; }.success-check { width:52px;height:52px;display:grid;place-items:center;margin:0 auto 18px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:24px;font-weight:700; }.create-success-state h2 { margin-bottom:6px; }.result-link { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:24px; }.result-link input { height:46px;background:#f7f7fa;color:var(--accent);font-weight:600; }.success-actions { display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:18px;border-top:1px solid var(--line); }.manage-created-link { color:var(--accent);font-size:12px;font-weight:600; }

/* Detail */
.detail-page { padding-top:33px; }.detail-hero { display:flex;justify-content:space-between;align-items:flex-start;padding:8px 0 24px; }.detail-hero h1 { font-size:29px;margin:12px 0 6px; }.hero-link { display:flex;align-items:center;gap:8px;color:var(--accent);font-weight:600; }.hero-link .copy-button { background:#eeeeff;padding:5px 8px; }.detail-hero p { max-width:750px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#96979c;font-size:11px;margin-top:9px; }.detail-metrics { margin-bottom:16px; }.small-strong { font-size:15px!important;letter-spacing:0!important; }.chart-panel { padding-bottom:14px; }.bar-chart { height:220px;display:flex;gap:8px;align-items:flex-end;padding:25px 25px 28px;background:repeating-linear-gradient(to bottom,transparent,transparent 48px,#eff0f1 49px); }.bar-item { height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative; }.bar-item i { width:min(100%,24px);min-height:4px;background:#a1a1dd;border-radius:5px 5px 2px 2px;transition:.2s; }.bar-item:hover i { background:var(--accent); }.bar-value { font-size:9px;color:#767780;margin-bottom:3px;height:11px; }.bar-item small { position:absolute;top:calc(100% + 8px);font-size:8px;color:#96979c;white-space:nowrap; }
.click-table-wrap { overflow:auto; }.click-table { width:100%;border-collapse:collapse;font-size:11px; }.click-table th { padding:11px 17px;text-align:left;color:#929399;background:#fafafa;font-size:9px;text-transform:uppercase;letter-spacing:.05em; }.click-table td { padding:13px 17px;border-top:1px solid #eff0f1;white-space:nowrap; }.device { text-transform:capitalize;background:#eeeeef;padding:4px 7px;border-radius:6px;color:#55565b; }.truncate-cell { max-width:160px;overflow:hidden;text-overflow:ellipsis; }.empty-cell { text-align:center;color:#999;padding:35px!important; }.edit-panel { margin-top:20px;position:relative; }.settings-form { padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:18px; }.settings-form .full { grid-column:1/-1; }.switch-row { display:flex!important;align-items:center;gap:9px;align-self:end;height:44px;cursor:pointer; }.switch-row input { display:none; }.switch { position:relative;width:34px;height:19px;background:#c6c7cb;border-radius:20px;transition:.2s; }.switch:after { content:"";position:absolute;width:15px;height:15px;left:2px;top:2px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #0003;transition:.2s; }.switch-row input:checked+.switch { background:var(--accent); }.switch-row input:checked+.switch:after { left:17px; }.settings-actions { display:flex;justify-content:flex-end; }.delete-form { position:absolute;left:22px;bottom:30px; }.text-danger { border:0;background:transparent;color:var(--danger);cursor:pointer;font-size:11px; }

@media(max-width:900px){
  .app-shell{grid-template-columns:1fr}.content{grid-column:1}.sidebar{transform:translateX(-100%);box-shadow:15px 0 45px #1a2c2244;transition:.22s}.sidebar.mobile-open{transform:none}.mobile-menu{display:block}.topbar{padding:0 22px}.page-wrap{width:calc(100% - 40px)}.metric-grid{grid-template-columns:1fr}.link-row{grid-template-columns:auto 1fr auto}.link-stat,.link-date,.link-row>.state{display:none}.row-arrow{display:block}.welcome-row{align-items:flex-start}.date-pill{display:none}
}
@media(max-width:600px){
  .auth-card{padding:26px 22px}.topbar{height:64px}.topbar-title{display:none}.page-wrap{width:calc(100% - 28px);padding-top:28px}.welcome-row h1{font-size:25px}.panel-head{align-items:flex-start;gap:14px;flex-direction:column}.search,.search input{width:100%}.link-row{padding:14px 13px;gap:10px}.link-badge{display:none}.destination{max-width:220px}.detail-hero{gap:20px}.detail-hero>.button{padding:0 11px}.detail-hero h1{font-size:24px}.hero-link{align-items:flex-start;flex-direction:column;word-break:break-all}.bar-chart{gap:3px;padding-left:12px;padding-right:12px}.settings-form{grid-template-columns:1fr}.settings-form .full{grid-column:1}.delete-form{position:static;padding:0 22px 22px}.modal-card{padding:26px 20px}.input-prefix span{display:none}.quick-input,.result-link{grid-template-columns:1fr}.success-actions{align-items:stretch;flex-direction:column;gap:15px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}