@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&family=Open+Sans:ital,wght@0,300..700;1,300..700&display=swap');

:root, [data-theme="light"] {
  --font-display: 'Heebo', 'Helvetica Neue', sans-serif;
  --font-body:    'Open Sans', 'Helvetica Neue', sans-serif;

  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);

  --space-1:2px; --space-2:4px; --space-3:8px; --space-4:12px; --space-5:16px;
  --space-6:20px; --space-8:24px; --space-10:32px; --space-12:40px; --space-16:56px;

  --bg:              #f4f6f5;
  --surface:         #ffffff;
  --surface-2:       #f9fafa;
  --surface-offset:  #eef1f0;
  --divider:         #dde3e2;
  --border:          #cdd6d5;

  --text:            #1a1a1a;
  --text-muted:      #4d4d4d;
  --text-faint:      #a0b0ae;
  --text-inv:        #f0f0f1;

  --primary:         #025f5d;
  --primary-hover:   #014a49;
  --primary-active:  #013636;
  --primary-light:   #b6dedd;
  --primary-mid:     #4a9a98;
  --primary-text:    #f0f8f7;

  --success:         #2e7d32; --success-bg: #e8f5e9;
  --warning:         #e65100; --warning-bg: #fff3e0;
  --error:           #c62828; --error-bg:   #ffebee;
  --info:            #01579b; --info-bg:    #e3f2fd;

  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(2,95,93,.08);
  --shadow-md: 0 4px 16px rgba(2,95,93,.10);
  --shadow-lg: 0 12px 40px rgba(2,95,93,.14);

  --ease: 180ms cubic-bezier(0.16,1,0.3,1);
  --sidebar-w: 244px;
}

[data-theme="dark"] {
  --bg:              #0f1817;
  --surface:         #162120;
  --surface-2:       #1c2b2a;
  --surface-offset:  #1f2e2d;
  --divider:         #263534;
  --border:          #2e403e;
  --text:            #d4e8e6;
  --text-muted:      #7aadaa;
  --text-faint:      #4d7875;
  --text-inv:        #0f1817;
  --primary:         #3da09e;
  --primary-hover:   #4dbab8;
  --primary-active:  #5ecfcc;
  --primary-light:   #1a3433;
  --primary-mid:     #5eaeac;
  --primary-text:    #0f1817;
  --success: #66bb6a; --success-bg: #1b3a1c;
  --warning: #ffb74d; --warning-bg: #3d2a12;
  --error:   #ef5350; --error-bg:   #3d1212;
  --info:    #4fc3f7; --info-bg:    #0d2a3d;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.45);
}

/* Basis */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-sm);color:var(--text);background:var(--bg);line-height:1.6}
img,svg{display:block;max-width:100%}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.2;text-wrap:balance}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:color-mix(in oklab,var(--primary) 20%,transparent)}

/* Layout */
.app-shell{display:flex;min-height:100dvh}

/* Sidebar */
.sidebar{
  width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--divider);
  display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100dvh;
  z-index:100;overflow-y:auto;transition:transform var(--ease);
}
.sidebar-brand{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-5);border-bottom:1px solid var(--divider)}
.brand-logo{width:36px;height:36px;background:var(--primary);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand-logo svg{color:#fff}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);color:var(--text);line-height:1.2}
.brand-name small{display:block;font-size:var(--text-xs);font-weight:400;color:var(--text-muted);font-family:var(--font-body)}

.sidebar-nav{flex:1;padding:var(--space-3) 0}
.nav-label{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);padding:var(--space-5) var(--space-5) var(--space-2)}
.nav-item{
  display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-3) var(--space-4);border-radius:var(--r-md);
  margin:1px var(--space-3);font-size:var(--text-sm);color:var(--text-muted);
  transition:background var(--ease),color var(--ease);width:calc(100% - 2*var(--space-3));
  text-align:left;
}
.nav-item:hover{background:var(--surface-offset);color:var(--text)}
.nav-item.active{background:var(--primary-light);color:var(--primary);font-weight:600}
.nav-item svg{flex-shrink:0;opacity:.75}
.nav-item.active svg{opacity:1}

.sidebar-footer{border-top:1px solid var(--divider);padding:var(--space-4) var(--space-5)}
.user-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2);border-radius:var(--r-md);transition:background var(--ease)}
.user-card:hover{background:var(--surface-offset)}
.user-avatar{width:34px;height:34px;border-radius:var(--r-full);background:var(--primary);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:var(--text-xs);color:#fff;flex-shrink:0}
.user-info{flex:1;min-width:0}
.user-name{font-size:var(--text-xs);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-email{font-size:.7rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Main Content */
.main-content{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100dvh}

/* Topbar */
.topbar{height:56px;background:var(--surface);border-bottom:1px solid var(--divider);display:flex;align-items:center;padding:0 var(--space-8);gap:var(--space-5);position:sticky;top:0;z-index:50}
.topbar-bc{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--text-muted)}
.topbar-bc .cur{color:var(--text);font-weight:600;font-family:var(--font-display)}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-3)}

/* Page */
.page-inner{padding:var(--space-8) var(--space-8);width:100%}
.page-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;color:var(--text);line-height:1.2;margin-bottom:2px}
.page-sub{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-8)}

/* Content Grid */
.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-8);width:100%;align-items:start}
@media(max-width:900px){.content-grid{grid-template-columns:1fr}}

/* Card */
.card{background:var(--surface);border:1px solid var(--divider);border-radius:var(--r-xl);overflow:hidden}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--divider)}
.card-title{font-family:var(--font-display);font-size:var(--text-base);font-weight:700;color:var(--text)}
.card-body{padding:var(--space-6)}
.card-danger{border-color:color-mix(in oklab,var(--error) 25%,transparent)}
.card-danger .card-header{background:var(--error-bg)}
.card-danger .card-title{color:var(--error)}

/* Stat Cards */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-5);margin-bottom:var(--space-8)}
.stat-card{background:var(--surface);border:1px solid var(--divider);border-radius:var(--r-xl);padding:var(--space-6);position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--primary)}
.stat-label{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:var(--space-2)}
.stat-value{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;color:var(--text);line-height:1;margin-bottom:2px}
.stat-meta{font-size:var(--text-xs);color:var(--text-faint)}
.stat-icon{position:absolute;right:var(--space-5);top:var(--space-5);width:38px;height:38px;border-radius:var(--r-md);background:var(--primary-light);display:flex;align-items:center;justify-content:center;color:var(--primary)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-radius:var(--r-md);font-size:var(--text-sm);font-weight:600;border:1px solid transparent;transition:background var(--ease),border-color var(--ease),color var(--ease),box-shadow var(--ease);cursor:pointer;white-space:nowrap;line-height:1.4}
.btn-primary{background:var(--primary);color:var(--primary-text);border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);box-shadow:0 2px 8px rgba(2,95,93,.25)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn-secondary:hover{background:var(--surface-offset);border-color:var(--primary-mid)}
.btn-ghost{background:transparent;color:var(--text-muted)}
.btn-ghost:hover{background:var(--surface-offset);color:var(--text)}
.btn-danger{background:var(--error-bg);color:var(--error);border-color:color-mix(in oklab,var(--error) 30%,transparent)}
.btn-danger:hover{background:var(--error);color:#fff}
.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--text-xs)}
.btn-icon{padding:var(--space-2);width:36px;height:36px;justify-content:center}
.btn-full{width:100%;justify-content:center}

/* Forms */
.form-grid{display:grid;gap:var(--space-5)}
.form-2col{grid-template-columns:1fr 1fr}
@media(max-width:600px){.form-2col{grid-template-columns:1fr}}
.form-group{display:flex;flex-direction:column;gap:var(--space-2)}
.form-label{font-size:var(--text-xs);font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:var(--space-2)}
.required{color:var(--error)}
.form-hint{font-size:var(--text-xs);color:var(--text-muted)}
.form-input{width:100%;padding:10px var(--space-5);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text);font-size:var(--text-sm);transition:border-color var(--ease),box-shadow var(--ease)}
.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 15%,transparent)}
.form-input::placeholder{color:var(--text-faint)}
.form-input:disabled{background:var(--surface-offset);color:var(--text-muted);cursor:not-allowed}
select.form-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23637572' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.input-group{display:flex;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface);transition:border-color var(--ease),box-shadow var(--ease)}
.input-group:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 15%,transparent)}
.input-group .form-input{border:none;border-radius:0;box-shadow:none;flex:1}
.input-group .form-input:focus{box-shadow:none}
.input-addon{display:flex;align-items:center;padding:0 var(--space-4);background:var(--surface-offset);color:var(--text-muted);font-size:var(--text-sm);border-right:1px solid var(--border);white-space:nowrap;flex-shrink:0}
.input-btn{display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-4);cursor:pointer;color:var(--primary);font-size:var(--text-xs);font-weight:700;background:none;border:none;border-left:1px solid var(--border);transition:background var(--ease);white-space:nowrap;font-family:var(--font-body)}
.input-btn:hover{background:var(--primary-light)}
.form-checkbox{display:flex;align-items:center;gap:var(--space-4);cursor:pointer;font-size:var(--text-sm)}
.form-checkbox input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary);cursor:pointer;flex-shrink:0}
.form-error{font-size:var(--text-xs);color:var(--error);display:flex;align-items:center;gap:var(--space-2)}
.form-actions{display:flex;gap:var(--space-4);padding-top:var(--space-3)}

/* Alert */
.alert{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-radius:var(--r-md);font-size:var(--text-sm);border:1px solid transparent;margin-bottom:var(--space-6)}
.alert-success{background:var(--success-bg);color:var(--success);border-color:color-mix(in oklab,var(--success) 25%,transparent)}
.alert-error  {background:var(--error-bg)  ;color:var(--error)  ;border-color:color-mix(in oklab,var(--error)   25%,transparent)}
.alert-warning{background:var(--warning-bg);color:var(--warning);border-color:color-mix(in oklab,var(--warning) 25%,transparent)}
.alert-info   {background:var(--info-bg)   ;color:var(--info)   ;border-color:color-mix(in oklab,var(--info)    25%,transparent)}
.alert-body{flex:1}
.alert-title{font-weight:700;margin-bottom:2px}

/* Link Preview */
.link-preview{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);background:var(--primary-light);border:1px solid color-mix(in oklab,var(--primary) 20%,transparent);border-radius:var(--r-md);margin-top:var(--space-4)}
.link-preview-url{font-family:monospace;font-size:var(--text-sm);color:var(--primary);flex:1;word-break:break-all}
.link-copy-btn{background:none;border:none;cursor:pointer;color:var(--primary);padding:4px;border-radius:var(--r-sm);transition:background var(--ease);display:flex;align-items:center;justify-content:center}
.link-copy-btn:hover{background:color-mix(in oklab,var(--primary) 15%,transparent)}

/* Table */
.table-wrap{overflow-x:auto}
.data-table th{text-align:left;padding:var(--space-4) var(--space-5);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);border-bottom:2px solid var(--divider);background:var(--surface-2);white-space:nowrap}
.data-table td{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--divider);font-size:var(--text-sm);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--surface-offset)}
.mono{font-family:'Menlo','Consolas',monospace;font-size:.8rem}
.cell-url{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);font-size:var(--text-xs)}

.table-toolbar{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--divider);background:var(--surface-2);flex-wrap:wrap}
.search-box{display:flex;align-items:center;gap:var(--space-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--space-2) var(--space-4);min-width:200px}
.search-box input{border:none;background:none;outline:none;font-size:var(--text-sm);flex:1;color:var(--text)}
.search-box input::placeholder{color:var(--text-faint)}
.table-filter{padding:var(--space-2) var(--space-4);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text);font-size:var(--text-xs);font-family:var(--font-body);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23637572' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:24px}
.toolbar-spacer{flex:1}
.table-pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-5);border-top:1px solid var(--divider);font-size:var(--text-xs);color:var(--text-muted);gap:var(--space-4)}
.pagination-btns{display:flex;gap:var(--space-2)}

/* Badge */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px var(--space-3);border-radius:var(--r-full);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.badge-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.badge-active{background:var(--success-bg);color:var(--success)}
.badge-inactive{background:var(--surface-offset);color:var(--text-faint)}
.badge-prefix{background:var(--primary-light);color:var(--primary)}

/* Recent List */
.recent-list{display:flex;flex-direction:column}
.recent-item{display:flex;flex-direction:column;gap:2px;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--divider);transition:background var(--ease)}
.recent-item:last-child{border-bottom:none}
.recent-item:hover{background:var(--surface-offset)}
.recent-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-width:0}
.recent-slug{font-family:monospace;font-weight:700;color:var(--primary);font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.recent-clicks{color:var(--text-faint);white-space:nowrap;font-size:var(--text-xs);flex-shrink:0}
.recent-target{color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;font-size:var(--text-xs)}
.recent-note{color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.7rem;flex-shrink:0;max-width:45%}

/* Stat Mini */
.stat-mini-label{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-bottom:2px}
.stat-mini-value{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;color:var(--primary);line-height:1}

/* Theme Toggle */
.theme-toggle{width:36px;height:36px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;background:var(--surface-offset);color:var(--text-muted);border:1px solid var(--border);cursor:pointer;transition:all var(--ease)}
.theme-toggle:hover{color:var(--text);background:var(--surface)}

/* Copy Toast */
.copy-toast{position:fixed;bottom:var(--space-8);right:var(--space-8);background:var(--text);color:var(--bg);padding:var(--space-4) var(--space-6);border-radius:var(--r-md);font-size:var(--text-sm);font-weight:500;box-shadow:var(--shadow-lg);transform:translateY(80px);opacity:0;transition:all .3s cubic-bezier(0.16,1,0.3,1);z-index:9999;pointer-events:none}
.copy-toast.show{transform:translateY(0);opacity:1}

/* Login Page */
.login-shell{min-height:100dvh;display:flex;align-items:center;justify-content:center;background:var(--bg);background-image:radial-gradient(ellipse 60% 50% at 20% 80%,color-mix(in oklab,var(--primary) 8%,transparent),transparent),radial-gradient(ellipse 50% 60% at 80% 20%,color-mix(in oklab,var(--primary) 6%,transparent),transparent)}
.login-card{background:var(--surface);border:1px solid var(--divider);border-radius:calc(var(--r-xl)*1.5);padding:var(--space-12) var(--space-12);width:100%;max-width:420px;box-shadow:var(--shadow-lg)}
.login-logo{width:56px;height:56px;background:var(--primary);border-radius:var(--r-xl);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-8)}
.login-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;color:var(--text);margin-bottom:2px}
.login-sub{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-10)}
.btn-ms{width:100%;padding:var(--space-4) var(--space-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;gap:var(--space-4);font-size:var(--text-sm);font-weight:600;color:var(--text);cursor:pointer;transition:all var(--ease);font-family:var(--font-body)}
.btn-ms:hover{border-color:var(--primary);background:var(--primary-light);box-shadow:var(--shadow-md)}
.login-footer{text-align:center;margin-top:var(--space-8);font-size:var(--text-xs);color:var(--text-faint)}

/* Danger Zone */
.danger-zone{border-color:color-mix(in oklab,var(--error) 25%,transparent)}
.danger-zone .card-header{background:var(--error-bg)}
.danger-zone .card-title{color:var(--error)}
.danger-zone-text{font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--space-5);line-height:1.6}

/* Back Link */
.back-link{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:600;color:var(--text-muted);margin-bottom:var(--space-4);transition:color var(--ease)}
.back-link:hover{color:var(--primary)}

/* Mobile */
.sidebar-toggle{display:none;width:36px;height:36px;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--text)}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  .main-content{margin-left:0}
  .sidebar-toggle{display:flex}
  .page-inner{padding:var(--space-5)}
  .stats-grid{grid-template-columns:1fr 1fr}
  .login-card{margin:var(--space-5);padding:var(--space-8)}
}