/* Apparelly Blank dashboard theme */
.ssk-dashboard{
  --bg:#0a0a0b;
  --panel:#111113;
  --panel-2:#151518;
  --ink:#f3f3f3;
  --muted:rgba(243,243,243,.72);
  --border:rgba(255,255,255,.10);
  --accent:#d4af37; /* gold */
  --teal:#00b7c2;
  --pink:#ff2d95;
  --radius:14px;
  --shadow:0 18px 44px rgba(0,0,0,.72);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.ssk-dashboard, .ssk-dashboard *{box-sizing:border-box}
.ssk-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
.ssk-skip{position:absolute;left:12px;top:12px;z-index:9999;background:#fff;color:#111;padding:.6rem .8rem;border:1px solid var(--border);border-radius:12px;transform:translateY(-160%);transition:transform .18s ease}
.ssk-skip:focus{transform:translateY(0);outline:3px solid rgba(0,183,194,.40);outline-offset:3px}

.ssk-dashboard{
  min-height:80vh;
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 30% -10%, rgba(212,175,55,.14), rgba(212,175,55,0) 55%),
    radial-gradient(900px 480px at 110% 20%, rgba(0,183,194,.10), rgba(0,183,194,0) 55%),
    radial-gradient(900px 520px at 70% 120%, rgba(255,45,149,.08), rgba(255,45,149,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 30%),
    var(--bg);
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns: 280px 1fr;
}
@media (max-width: 960px){.ssk-dashboard{grid-template-columns:1fr}.ssk-sidebar{display:none}}

.ssk-sidebar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 30%),
    #0c0c0e;
  border-right:1px solid var(--border);
  padding:18px;
}
.ssk-brand{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.ssk-logo{
  width:48px;
  height:48px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(212,175,55,.20), rgba(255,45,149,.14), rgba(0,183,194,.10));
  border:1px solid rgba(212,175,55,.22);
  display:grid;
  place-items:center;
  color:var(--accent);
}
.ssk-logo img{width:30px;height:30px;display:block}
.ssk-brand-title{
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.88rem;
  line-height:1.2;
}
.ssk-brand-sub{
  font-family:var(--mono);
  font-size:.85rem;
  color:var(--muted);
  letter-spacing:.04em;
}

.ssk-nav{display:grid;gap:6px;margin-top:10px}
.ssk-nav-item{
  padding:12px 12px;
  border-radius:14px;
  color:var(--ink);
  text-decoration:none;
  border:1px solid transparent;
  transition:background .18s, border .18s, transform .18s;
}
.ssk-nav-item:hover{background:rgba(255,255,255,.04);border-color:rgba(0,183,194,.25);transform:translateY(-1px)}
.ssk-nav-item.is-active{background:rgba(212,175,55,.14);border-color:rgba(212,175,55,.34);color:var(--accent);font-weight:800}

.ssk-help{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.ssk-help-title{font-weight:700;color:var(--ink);margin-bottom:6px}
.ssk-help-link{color:var(--accent);text-decoration:none}
.ssk-help-link:hover{color:var(--pink)}

.ssk-shell{display:grid;grid-template-rows:auto 1fr}
.ssk-topbar{
  background:
    linear-gradient(90deg, rgba(212,175,55,.12), rgba(212,175,55,0) 26%),
    linear-gradient(270deg, rgba(0,183,194,.08), rgba(0,183,194,0) 22%),
    #0b0b0c;
  border-bottom:1px solid var(--border);
  padding:16px 20px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.ssk-input{
  width:min(560px, 60vw);
  max-width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:#111113;
  color:var(--ink);
}
.ssk-input:focus{
  outline:3px solid rgba(0,183,194,.35);
  outline-offset:2px;
  border-color:rgba(0,183,194,.45);
}
.ssk-input::placeholder{color:rgba(243,243,243,.55)}
.ssk-user{display:flex;gap:10px;align-items:center}
.ssk-user-name{font-weight:700;color:var(--ink)}
.ssk-chip{padding:10px 12px;border-radius:999px;border:1px solid var(--border);text-decoration:none;color:var(--ink);background:rgba(255,255,255,.03)}

.ssk-main{padding:18px;display:grid;gap:14px;position:relative}
.ssk-main::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.10;
  background:
    linear-gradient(90deg, rgba(0,183,194,.20) 1px, rgba(0,183,194,0) 1px),
    linear-gradient(rgba(255,45,149,.18) 1px, rgba(255,45,149,0) 1px),
    radial-gradient(900px 420px at 20% 30%, rgba(212,175,55,.10), rgba(212,175,55,0) 60%);
  background-size: 44px 44px, 44px 44px, auto;
  mix-blend-mode:screen;
}
.ssk-kpis{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px}
@media (max-width: 720px){.ssk-kpis{grid-template-columns:1fr}}

.ssk-kpi{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 65%), var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 14px 32px rgba(0,0,0,.65);
}
.ssk-kpi-label{font-size:.9rem;color:var(--muted)}
.ssk-kpi-value{font-size:1.6rem;font-weight:900;color:var(--ink);margin-top:6px;letter-spacing:.01em}
.ssk-kpi-meta{font-size:.85rem;color:var(--muted);margin-top:6px}

.ssk-grid{display:grid;grid-template-columns: 1.6fr 1fr;gap:12px}
@media (max-width: 960px){.ssk-grid{grid-template-columns:1fr}}

.ssk-panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 70%),
    var(--panel-2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 14px 32px rgba(4,4,4,.7);
  position:relative;
}
.ssk-panel::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:0;
  height:1px;
  background:linear-gradient(90deg, rgba(212,175,55,.0), rgba(212,175,55,.55), rgba(0,183,194,.35), rgba(255,45,149,.35), rgba(212,175,55,.0));
  opacity:.60;
}
.ssk-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ssk-h2{font-size:1.05rem;font-weight:900;color:var(--ink);margin:0;text-transform:uppercase;letter-spacing:.08em}
.ssk-link{color:var(--accent);text-decoration:none;font-weight:800}
.ssk-link:hover{color:var(--pink)}

.ssk-btn{min-height:44px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:#0f0f10;cursor:pointer;color:var(--ink)}
.ssk-btn:hover{border-color:rgba(0,183,194,.45)}
.ssk-btn-ghost{background:rgba(0,0,0,.4);color:var(--ink)}
.ssk-btn-ghost:focus-visible{outline-color:rgba(0,183,194,.55)}
.ssk-btn:focus-visible{outline:3px solid rgba(0,183,194,.35);outline-offset:3px}
.ssk-btn-ghost{background:rgba(255,255,255,.03)}

.ssk-chart{
  min-height:220px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.18);
  display:grid;
  place-items:center;
  color:var(--muted);
  background:
    radial-gradient(900px 240px at 30% 10%, rgba(212,175,55,.12), rgba(212,175,55,0) 55%),
    radial-gradient(900px 240px at 80% 90%, rgba(255,45,149,.10), rgba(255,45,149,0) 55%),
    radial-gradient(900px 240px at 110% 20%, rgba(0,183,194,.10), rgba(0,183,194,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 40%),
    #0f0f10;
}
.ssk-actions{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px}
.ssk-action{
  min-height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 60%), #101012;
  transition:border .18s, color .18s, transform .18s, background .18s;
  font-weight:800;
  letter-spacing:.03em;
  padding:12px 14px;
}
.ssk-action:hover{border-color:rgba(0,183,194,.45);color:var(--teal);transform:translateY(-2px)}
.ssk-action-ico{
  width:22px;
  height:22px;
  color:var(--accent);
  flex:0 0 auto;
}
.ssk-action:hover .ssk-action-ico{color:var(--teal)}

.ssk-table-wrap{overflow:auto;border-radius:14px;border:1px solid rgba(255,255,255,.1)}
.ssk-table{width:100%;border-collapse:collapse;min-width:640px}
.ssk-table th,.ssk-table td{padding:12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;font-size:.92rem;color:var(--ink)}
.ssk-table th{background:#1b1b1b;color:var(--muted);font-weight:800}