/* FluxOffer Shortener - custom dashboard styling */
:root{
  --bg:#f4f7fb;
  --card:#ffffff;
  --line:#e6ebf2;
  --text:#162033;
  --muted:#6c7a92;
  --primary:#4f6df5;
  --primary-dark:#3557e0;
  --success:#24b36b;
  --danger:#eb5a66;
  --warning:#f0ad4e;
  --sidebar:#f8fafc;
  --shadow:0 8px 24px rgba(18,38,63,.08);
  --radius:18px;
}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
.app-shell{display:flex;min-height:100vh}
.sidebar{
  width:260px; background:var(--sidebar); border-right:1px solid var(--line);
  position:sticky; top:0; height:100vh; overflow:auto;
}
.brand{
  display:flex; align-items:center; gap:12px; padding:18px 18px 12px;
}
.brand img{width:40px;height:40px}
.brand .title{font-weight:800;font-size:18px;line-height:1.1}
.brand .sub{font-size:12px;color:var(--muted)}
.nav-group-title{
  font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#8b96a8;
  padding:16px 18px 8px;
}
.nav-link-x{
  display:flex; align-items:center; gap:12px;
  padding:11px 18px; margin:2px 10px; border-radius:12px;
  color:#334155; font-weight:500;
}
.nav-link-x:hover,.nav-link-x.active{background:#eaf0ff;color:var(--primary-dark)}
.nav-link-x i{width:18px;text-align:center}
.main{
  flex:1; min-width:0;
}
.topbar{
  height:72px; display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; border-bottom:1px solid var(--line); background:rgba(244,247,251,.85);
  backdrop-filter:saturate(180%) blur(10px); position:sticky; top:0; z-index:10;
}
.quick-search{
  display:flex; align-items:center; gap:10px; width:min(560px,100%);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 12px;
  box-shadow:0 4px 16px rgba(18,38,63,.03);
}
.quick-search input{border:0; outline:0; width:100%; background:transparent}
.kbd{
  font-size:11px; color:#64748b; border:1px solid #d7deea; border-bottom-width:2px;
  padding:2px 7px; border-radius:6px; background:#f8fafc;
}
.page-wrap{padding:24px}
.card-x{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.card-x .card-header-x{
  padding:16px 18px; border-bottom:1px solid var(--line); font-weight:700;
}
.card-x .card-body-x{padding:18px}
.stat-card{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:18px;
  box-shadow:var(--shadow); height:100%;
}
.stat-value{font-size:30px;font-weight:800;line-height:1}
.stat-label{color:var(--muted);font-size:13px;margin-top:8px}
.stat-delta{font-size:12px;margin-top:10px;color:var(--success);font-weight:700}
.panel-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:18px}
@media (max-width: 1200px){.sidebar{display:none}.panel-grid{grid-template-columns:1fr}}
.table thead th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.badge-soft{
  background:#edf2ff;color:var(--primary-dark);border:1px solid #dbe4ff;
}
.link-input{
  border:1px solid var(--line); border-radius:14px; padding:13px 14px; background:#fff;
}
.primary-btn{
  background:var(--primary); border-color:var(--primary); color:#fff;
}
.primary-btn:hover{background:var(--primary-dark); border-color:var(--primary-dark); color:#fff;}
.section-title{
  font-size:18px; font-weight:800; margin:0;
}
.subtle{color:var(--muted); font-size:13px}
.form-control,.form-select{
  border:1px solid #dbe3ef; border-radius:14px; padding:11px 14px;
}
.form-control:focus,.form-select:focus{
  border-color:#9fb0ff; box-shadow:0 0 0 .2rem rgba(79,109,245,.12);
}
.rule-box{
  border:1px solid var(--line); border-radius:18px; padding:14px; background:#fbfcfe; margin-bottom:12px;
}
.rule-grid{
  display:grid; grid-template-columns: 1.2fr .8fr .8fr 1.2fr auto; gap:12px; align-items:start;
}
@media (max-width: 992px){.rule-grid{grid-template-columns:1fr}}
.small-label{font-size:12px;color:var(--muted);margin-bottom:6px}
.avatar{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#5d7dff,#9c68ff);color:#fff;font-weight:800;
}
.profile-chip{display:flex;align-items:center;gap:10px}
.content-columns{display:grid; grid-template-columns: 1.35fr .65fr; gap:18px}
@media (max-width: 1200px){.content-columns{grid-template-columns:1fr}}
.click-list{list-style:none;margin:0;padding:0}
.click-list li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.click-list li:last-child{border-bottom:0}
.meta-line{font-size:12px;color:var(--muted)}
.copy-btn{border:1px solid var(--line); background:#fff; border-radius:10px; padding:6px 10px; font-size:12px}
.empty-box{
  border:1px dashed #d5deeb; border-radius:18px; padding:28px; text-align:center; color:var(--muted);
  background:#fbfcfe;
}
.toast-wrap{position:fixed;right:18px;bottom:18px;z-index:9999}
.select-multi{min-height:170px}
.brand-mark{
  display:flex; align-items:center; gap:14px;
}
.brand-mark svg{width:38px;height:38px;flex:0 0 auto}
.toolbar-actions{display:flex;gap:10px;align-items:center}
.right-panel{
  position:sticky; top:96px;
}
.small-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow);margin-bottom:16px;
}
.rule-toggle{
  display:flex; align-items:center; gap:8px;
}
textarea.form-control{min-height:120px}