/* Tiny design system */
:root{
  --bg:#0b0f13; --surface:#11161d; --muted:#9aa6b2; --text:#e8eef5; --accent:#3ea6ff; --ok:#26d07c; --warn:#ffb020;
  --radius:14px; --pad:18px; --gap:16px; --shadow:0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
body.bg-surface{background:var(--bg); color:var(--text); font:16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* Page shell: remove side inches so the table can expand */
.rk-shell{padding-left:0; padding-right:0;}
/* Wider centered content area */
.rk-container{max-width:1240px; margin:0 auto; padding:0 var(--pad);}

.rk-flex{display:flex} .rk-justify-between{justify-content:space-between} .rk-items-center{align-items:center}
.rk-header{position:sticky; top:0; z-index:20; background:rgba(17,22,29,.9); backdrop-filter:saturate(120%) blur(8px); border-bottom:1px solid #1b2330}
.rk-logo{font-weight:700; letter-spacing:.4px}
.rk-nav .rk-menu{display:flex; gap:20px; list-style:none; margin:0; padding:0}
.rk-main{padding:32px 0}
.rk-footer{border-top:1px solid #1b2330; padding:28px 0; color:var(--muted)}

/* Hero */
.rk-hero{padding:28px 0 12px}
.rk-hero-inner h1{margin:0 0 6px; font-size:28px}
.rk-sub{color:var(--muted); margin:0}

/* Cards */
.rk-card{
  background:var(--surface);
  border:1px solid #1b2330;
  border-radius:var(--radius);
  padding:var(--pad);
  box-shadow:var(--shadow);
  overflow:hidden; /* clip any spill */
}

/* =========================
   Table (compact, aligned)
   ========================= */
.rk-table-wrap{overflow-x:hidden; overflow-y:visible;} /* no horizontal bar */

.rk-toolbar{display:flex; gap:var(--gap); margin-bottom:var(--gap); flex-wrap:wrap}
.rk-input{background:#0d1319; color:var(--text); border:1px solid #253041; border-radius:10px; padding:10px 12px; outline:none}
.rk-badge{border:1px solid #2a3647; border-radius:999px; padding:4px 10px; color:var(--muted); font-size:12px}

table.rk-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;      /* lock widths with colgroup */
  font-size:14px;
}
table.rk-table thead th{
  position:sticky; top:0;
  background:#11161d;
  font-weight:600;
  padding:8px 10px;
  border-bottom:1px solid #1b2330;
  white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
table.rk-table thead th.rk-num{ text-align:right; }
table.rk-table tbody td{
  padding:8px 10px;
  border-bottom:1px solid #1b2330;
  white-space:nowrap;
}
td.rk-num{ font-variant-numeric:tabular-nums; text-align:right; }

.rk-sym{
  font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:inline-block; max-width:100%;
}

.rk-up{color:var(--ok)} .rk-down{color:#ff6b6b}

/* Column widths — sum ≈ 976px; with padding (~220px) fits inside 1240px */
table.rk-table col.col-idx   { width:36px; }
table.rk-table col.col-sym   { width:100px; }
table.rk-table col.col-price { width:100px; }
table.rk-table col.col-1h    { width:64px; }
table.rk-table col.col-24h   { width:64px; }
table.rk-table col.col-vol   { width:112px; }
table.rk-table col.col-mcap  { width:128px; }
table.rk-table col.col-h1d   { width:96px; }
table.rk-table col.col-h7d   { width:108px; }  /* wide enough for header text */
table.rk-table col.col-sec   { width:72px; }
table.rk-table col.col-mom   { width:96px; }

/* Responsive */
@media (max-width:1400px){
  .rk-container{max-width:1100px;}
}
@media (max-width:768px){
  .rk-hero-inner h1{font-size:22px}
  .rk-main{padding-top:20px}
  table.rk-table{font-size:13px;}
  table.rk-table thead th, table.rk-table tbody td{padding:7px 8px}
}

/* ===== Header & Auth ===== */
.rk-header{position:sticky; top:0; z-index:40; background:rgba(17,22,29,.9); backdrop-filter:saturate(120%) blur(8px); border-bottom:1px solid #1b2330}
.rk-header-inner{min-height:64px; gap:16px}
.rk-logo-link{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none}
.rk-logo-img{height:28px; width:auto; display:block}
.rk-logo-text{font-weight:700; letter-spacing:.2px}

.rk-nav .rk-menu{display:flex; gap:18px; list-style:none; margin:0; padding:0}
.rk-nav .rk-menu a{color:#c7d2fe; text-decoration:none}
.rk-nav .rk-menu a:hover{text-decoration:underline}

/* Buttons inspired by hero styles */
.rk-btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; font-weight:600;
  border:1px solid rgba(148,163,184,.45); background:#111827; color:#fff; text-decoration:none;
  box-shadow:0 2px 0 rgba(255,255,255,.05) inset, 0 8px 20px rgba(0,0,0,.35); transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease}
.rk-btn:hover{transform:translateY(-1px); border-color:#8ea2ff; box-shadow:0 2px 0 rgba(255,255,255,.08) inset, 0 12px 28px rgba(0,0,0,.45)}
.rk-btn-ghost{background:transparent}
.rk-btn-primary{border:0; background:linear-gradient(135deg,#22d3ee,#a78bfa,#60a5fa); background-size:200% 200%;
  box-shadow:0 8px 24px rgba(33,150,243,.35), 0 2px 0 rgba(255,255,255,.06) inset; animation:rkBtnShift 8s linear infinite}
.rk-btn-primary:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 12px 32px rgba(33,150,243,.45), 0 2px 0 rgba(255,255,255,.08) inset}
@keyframes rkBtnShift{to{background-position:200% 200%}}

.rk-auth{display:flex; align-items:center; gap:10px}

/* User dropdown (native <details>) */
.rk-user{position:relative}
.rk-user-sum{display:flex; align-items:center; gap:8px; list-style:none; cursor:pointer; padding:6px 8px; border-radius:10px}
.rk-user-sum::-webkit-details-marker{display:none}
.rk-avatar{height:28px; width:28px; border-radius:999px; display:block}
.rk-caret{width:14px; height:14px; fill:#94a3b8}
.rk-user[open] .rk-user-sum{background:#0d1319; border:1px solid #253041}

.rk-user-menu{position:absolute; right:0; top:calc(100% + 8px); min-width:180px; padding:6px; margin:0; list-style:none;
  background:var(--surface); border:1px solid #1b2330; border-radius:12px; box-shadow:var(--shadow)}
.rk-user-menu a{display:block; padding:9px 10px; border-radius:8px; color:var(--text); text-decoration:none}
.rk-user-menu a:hover{background:#0d1319}

/* === Mobile header dropdown styles (used only by header-mobile.php) === */
.rk-mobile-nav summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.45);
  background: #111827;
  color: #fff;
  cursor: pointer;
  list-style: none;
}
.rk-mobile-nav .rk-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.rk-mobile-nav .rk-menu a { text-decoration: none; }
.rk-mobile-nav[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Mobile header auth spacing */
.rk-mobile-auth { margin-top: 6px; border-top: 1px solid rgba(148,163,184,.25); padding-top: 8px; }
.rk-mobile-auth a { text-decoration: none; }