/* URLHub -- admin shell CSS */
:root {
  --bg:            #0a0206;
  --bg-1:          #14060c;
  --bg-2:          #1a0812;
  --bg-3:          #22101a;
  --border:        #2a1520;
  --border-hi:     #3d1e2c;
  --text:          #f4e6ea;
  --text-mid:      #d8bec7;
  --text-dim:      #a3868f;
  --text-muted:    #806770;
  --accent:        #e11d48;
  --accent-2:      #9f1239;
  --accent-deep:   #4c0519;
  --accent-hot:    #ff4d6d;
  --ok:            #34d399;
  --warn:          #fbbf24;
  --err:           #f87171;
  --violet:        #f472b6;
  --mono:          ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.5; min-height: 100vh; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #ff9db1; }

/* -- App shell -- */
.uh-app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.uh-sidebar {
  background: linear-gradient(180deg, #14060c, #0a0206);
  border-right: 1px solid var(--border);
  padding: 18px 12px 14px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.uh-brand { display:flex; align-items:center; gap:10px; padding: 4px 6px 20px; text-decoration:none; color: var(--text); border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.uh-brand-mark { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:9px; background: var(--bg-1); border:1px solid var(--accent); color:var(--accent-hot); font-weight:800; font-size:13px; box-shadow: 0 6px 20px rgba(225,29,72,0.35), inset 0 0 12px rgba(225,29,72,0.15); }
.uh-brand-text { display:flex; flex-direction:column; line-height:1.1; }
.uh-brand-text strong { font-size:15px; letter-spacing:-.01em; }
.uh-brand-text em { color: var(--text-dim); font-size:10.5px; font-style:normal; letter-spacing:.1em; text-transform:uppercase; margin-top:3px; font-weight:600; }

.uh-nav { flex: 1 1 auto; overflow-y: auto; padding-right: 4px; }
.uh-nav-section { color: var(--text-muted); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; padding: 12px 10px 6px; }
.uh-nav-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color: var(--text-mid); font-size:13px; margin-bottom:2px; transition: background .12s ease, color .12s ease; }
.uh-nav-item:hover { background: rgba(225,29,72,0.06); color:#fff; }
.uh-nav-active { background: linear-gradient(90deg, rgba(225,29,72,0.14), rgba(225,29,72,0.02)); color:#fff; border-left: 2px solid var(--accent); padding-left: 8px; }
.uh-nav-ico { width: 20px; text-align:center; font-size:14px; }

.uh-user { display:flex; align-items:center; gap:10px; padding: 12px 8px 4px; border-top: 1px solid var(--border); margin-top: 8px; }
.uh-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--violet)); color:#062033; font-weight:800; display:grid; place-items:center; font-size:12px; flex-shrink:0; }
.uh-user-meta { flex: 1 1 auto; min-width: 0; }
.uh-user-name { font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uh-user-email { font-size:10.5px; color: var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uh-logout { color: var(--text-muted); padding: 4px 8px; border-radius: 6px; text-decoration:none; }
.uh-logout:hover { background: rgba(248,113,113,0.10); color: var(--err); }

/* -- Topbar + main -- */
.uh-main { display:flex; flex-direction:column; min-width: 0; }
.uh-topbar { display:flex; align-items:center; gap:12px; padding: 14px 24px; border-bottom: 1px solid var(--border); background: rgba(26,8,18,.72); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 10; }
.uh-menu { display:none; background:transparent; border:1px solid var(--border); border-radius:6px; padding:6px 10px; color:var(--text); cursor:pointer; }
.uh-topbar-title { flex: 1 1 auto; font-weight:700; font-size:15px; letter-spacing:-.01em; color:#fff; }
.uh-topbar-right { display:flex; gap:10px; align-items:center; }
.uh-btn { display:inline-block; padding: 8px 14px; border-radius:8px; font-size:12.5px; font-weight:700; border:1px solid var(--border); background: var(--bg-2); color: var(--text); text-decoration:none; cursor:pointer; transition: transform .1s ease, filter .1s ease; }
.uh-btn:hover { transform: translateY(-1px); }
.uh-btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#f4e6ea; border-color: var(--accent); box-shadow: 0 8px 22px -10px var(--accent); }
.uh-btn-ghost { background:transparent; }
.uh-btn-danger { background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.30); color: #fecaca; }
.uh-btn-sm { padding: 4px 9px; font-size: 11px; }

.uh-content { padding: 24px; max-width: 1280px; width: 100%; }

/* -- Page head -- */
.uh-page-head { margin-bottom: 22px; }
.uh-page-eyebrow { display:inline-flex; align-items:center; gap:6px; color: var(--accent); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:800; }
.uh-page-eyebrow .dot { width:7px; height:7px; border-radius:50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.uh-page-title { font-size: 1.55rem; margin: 8px 0 6px; letter-spacing:-.02em; color:#fff; }
.uh-page-subtitle { color: var(--text-dim); font-size: 13.5px; margin: 0; max-width: 720px; }

/* -- Stat tiles -- */
.uh-stats { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 22px; }
.uh-stat { background: var(--bg-2); border:1px solid var(--border); border-radius:12px; padding: 16px 18px; position: relative; overflow: hidden; }
.uh-stat::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background: linear-gradient(90deg, var(--accent), transparent); opacity:.55; }
.uh-stat .l { color: var(--text-muted); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }
.uh-stat .n { color:#fff; font-size:1.75rem; font-weight:800; letter-spacing:-.02em; margin-top: 6px; }
.uh-stat .n .sub { color: var(--text-dim); font-size:.72rem; font-weight:600; margin-left:6px; letter-spacing:.06em; }
.uh-stat .d { color: var(--text-dim); font-size: 11.5px; margin-top: 4px; }
.uh-stat.accent-violet::before { background: linear-gradient(90deg, var(--violet), transparent); }
.uh-stat.accent-ok::before { background: linear-gradient(90deg, var(--ok), transparent); }
.uh-stat.accent-warn::before { background: linear-gradient(90deg, var(--warn), transparent); }

/* -- Panels + tables -- */
.uh-panel { background: var(--bg-2); border:1px solid var(--border); border-radius:12px; padding: 16px 18px; margin-bottom: 16px; }
.uh-panel-h { font-size: 11px; letter-spacing:.14em; text-transform:uppercase; color: var(--text-muted); font-weight:800; margin: 0 0 12px; display:flex; align-items:center; justify-content:space-between; }
.uh-panel-h .right { color: var(--text-dim); font-weight:600; letter-spacing:.06em; text-transform: none; font-size:12px; }

.uh-table { width:100%; border-collapse:collapse; font-size: 13px; }
.uh-table th, .uh-table td { padding: 8px 10px; text-align:left; border-bottom:1px solid var(--border); vertical-align: middle; }
.uh-table thead th { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--text-muted); font-weight:800; background: rgba(225,29,72,0.04); }
.uh-table .right { text-align:right; }
.uh-table .mono { font-family: var(--mono); font-size: 12px; }
.uh-table .num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align:right; }
.uh-table tr:hover td { background: rgba(225,29,72,0.04); }

/* Pills */
.uh-pill { display:inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing:.06em; }
.uh-pill-ok    { background: rgba(52,211,153,.10); border: 1px solid rgba(52,211,153,.30); color: #6ee7b7; }
.uh-pill-muted { background: rgba(150,163,184,.08); border: 1px solid rgba(150,163,184,.20); color: var(--text-dim); }
.uh-pill-warn  { background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.30); color: #fcd34d; }
.uh-pill-err   { background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.30); color: #fecaca; }
.uh-pill-primary { background: rgba(225,29,72,.12); border: 1px solid rgba(225,29,72,.30); color: #ff9db1; }

/* Forms */
.uh-form { display:flex; flex-direction:column; gap: 12px; }
.uh-fld { display:flex; flex-direction:column; gap:5px; }
.uh-fld label { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--text-dim); font-weight:800; }
.uh-fld input[type=text], .uh-fld input[type=url], .uh-fld input[type=email], .uh-fld input[type=password], .uh-fld input[type=datetime-local], .uh-fld select, .uh-fld textarea {
  width: 100%; padding: 9px 11px; background: var(--bg-1); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: inherit;
}
.uh-fld input:focus, .uh-fld select:focus, .uh-fld textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(225,29,72,0.14); }
.uh-fld .hint { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.uh-form-row { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.uh-flash { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.uh-flash-ok  { background: rgba(52,211,153,.10);  border: 1px solid rgba(52,211,153,.30);  color: #a7f3d0; }
.uh-flash-err { background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.30); color: #fecaca; }
.uh-flash-warn{ background: rgba(251,191,36,.10);  border: 1px solid rgba(251,191,36,.30);  color: #fcd34d; }

/* Two-column layout */
.uh-two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }

/* Sparkline / mini chart */
.uh-spark { width:120px; height:32px; }
.uh-copy-btn { background: transparent; border: 1px solid var(--border); color: var(--text-mid); padding: 3px 8px; border-radius: 5px; font-size: 11px; cursor: pointer; font-family: var(--mono); }
.uh-copy-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Chart */
.uh-chart { width: 100%; height: 220px; display: block; }
.uh-chart-wrap { background: var(--bg-2); border:1px solid var(--border); border-radius:12px; padding: 16px 18px 12px; margin-bottom: 16px; }

/* Punchy variant for the burgundy click chart */
.uh-chart-pop {
  background: radial-gradient(circle at 50% -20%, rgba(225,29,72,.10), transparent 70%), var(--bg-2);
  border: 1px solid rgba(225,29,72,.30);
  box-shadow: 0 24px 60px -30px rgba(225,29,72,.45), inset 0 0 40px rgba(225,29,72,.04);
  position: relative;
  overflow: hidden;
}
.uh-chart-pop::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #ff4d6d, #e11d48, #ff4d6d, transparent);
  animation: uhPopScan 3.6s ease-in-out infinite;
}
@keyframes uhPopScan { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.uh-chart-pop .uh-panel-h { color: #ff9db1; }
.uh-chart-pop rect[fill="url(#uhgBar)"], .uh-chart-pop rect[fill="url(#uhgPeak)"] {
  transition: filter .18s ease, transform .18s ease;
  transform-origin: bottom;
}
.uh-chart-pop rect[fill="url(#uhgBar)"]:hover, .uh-chart-pop rect[fill="url(#uhgPeak)"]:hover {
  filter: brightness(1.25) drop-shadow(0 4px 10px rgba(255,46,99,.55));
  transform: scaleY(1.03);
}

/* Empty */
.uh-empty { text-align:center; padding: 40px 20px; color: var(--text-dim); }
.uh-empty h3 { color:#fff; font-size:1.05rem; margin: 0 0 6px; }
.uh-empty p { margin: 0 0 16px; font-size: 13px; }

/* Responsive */
@media (max-width: 900px) {
  .uh-app { grid-template-columns: 1fr; }
  .uh-sidebar { position: fixed; top: 0; left: -280px; width: 260px; z-index: 20; transition: left .2s ease; }
  body.uh-sidebar-open .uh-sidebar { left: 0; }
  .uh-menu { display: block; }
  .uh-two-col { grid-template-columns: 1fr; }
  .uh-form-row { grid-template-columns: 1fr; }
}