/* rapidtale.com — staff panel, cPanel-style (simple, clean) */
:root { --cp-blue:#1d4ed8; --cp-dark:#1e3a8a; --cp-head:#243e63; --cp-bg:#f1f5f9; --cp-card:#fff; --cp-ink:#0f172a; --cp-muted:#64748b; --cp-line:#e2e8f0; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--cp-bg); color:var(--cp-ink); font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif; font-size:.95rem; line-height:1.55; }
a { color:var(--cp-blue); text-decoration:none; }
a:hover { color:var(--cp-dark); }

/* cPanel-style top bar */
.topbar { background:linear-gradient(180deg,#2c4a7c,#1e3a5f); color:#fff; position:sticky; top:0; z-index:100; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.topbar-in { max-width:1200px; margin:0 auto; padding:0 22px; height:56px; display:flex; align-items:center; gap:20px; }
.topbar .brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem; letter-spacing:.2px; }
.topbar .brand .mark { width:30px; height:30px; border-radius:7px; background:rgba(255,255,255,.15); display:grid; place-items:center; font-size:.95rem; }
.topbar nav { display:flex; gap:4px; margin-left:8px; }
.topbar nav a { color:#dbeafe; font-size:.9rem; padding:7px 14px; border-radius:7px; font-weight:500; }
.topbar nav a:hover { background:rgba(255,255,255,.12); color:#fff; }
.topbar nav a.active { background:#3b82f6; color:#fff; }
.topbar .user { margin-left:auto; display:flex; align-items:center; gap:12px; font-size:.88rem; color:#cbd5e1; }

.layout { display:flex; max-width:1200px; margin:0 auto; min-height:calc(100vh - 56px); }
.sidebar { width:200px; background:var(--cp-card); border-right:1px solid var(--cp-line); padding:18px 12px; flex-shrink:0; }
.sidebar .s-group { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--cp-muted); font-weight:700; margin:16px 8px 6px; }
.sidebar .s-group:first-child { margin-top:0; }
.sidebar a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; color:var(--cp-ink); font-size:.9rem; font-weight:500; margin-bottom:2px; }
.sidebar a:hover { background:var(--cp-bg); }
.sidebar a.active { background:#eff6ff; color:var(--cp-blue); }
.sidebar a .ico { font-size:1.05rem; width:20px; text-align:center; }
.main { flex:1; padding:26px 30px 60px; min-width:0; }

h1 { font-size:1.4rem; margin-bottom:18px; font-weight:700; }
/* cPanel-style stat band */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:26px; }
.stat { background:var(--cp-card); border:1px solid var(--cp-line); border-radius:10px; padding:16px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.stat b { font-size:1.55rem; display:block; letter-spacing:-.02em; }
.stat span { color:var(--cp-muted); font-size:.8rem; }
/* cPanel-style icon tiles */
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; margin-bottom:26px; }
.tile { background:var(--cp-card); border:1px solid var(--cp-line); border-radius:12px; padding:22px 14px; text-align:center; transition:transform .12s, box-shadow .12s; display:block; }
.tile:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(15,23,42,.08); border-color:#bfdbfe; }
.tile .t-ico { width:52px; height:52px; margin:0 auto 10px; border-radius:12px; background:#eff6ff; display:grid; place-items:center; font-size:1.5rem; }
.tile b { display:block; font-size:.92rem; color:var(--cp-ink); }
.tile span { color:var(--cp-muted); font-size:.78rem; }
.panel { background:var(--cp-card); border:1px solid var(--cp-line); border-radius:12px; padding:20px; margin-bottom:18px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.panel h3 { font-size:1rem; margin-bottom:12px; }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--cp-line); font-size:.89rem; }
th { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--cp-muted); background:#f8fafc; }
tr:hover td { background:#f8fafc; }
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; border:1px solid var(--cp-blue); background:var(--cp-blue); color:#fff !important; cursor:pointer; font-size:.88rem; font-weight:600; font-family:inherit; }
.btn:hover { background:var(--cp-dark); }
.btn.ghost { background:#fff; color:var(--cp-blue) !important; }
.btn.danger { background:#dc2626; border-color:#dc2626; }
.btn.small { padding:4px 11px; font-size:.8rem; border-radius:6px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
input,select,textarea { padding:9px 13px; border:1px solid var(--cp-line); border-radius:8px; font-family:inherit; font-size:.93rem; background:#fff; outline:none; }
input:focus,select:focus,textarea:focus { border-color:var(--cp-blue); box-shadow:0 0 0 3px #eff6ff; }
input[type=text],input[type=email],input[type=password],select { min-width:200px; }
textarea { width:100%; min-height:320px; font-family:Georgia,serif; line-height:1.8; font-size:1rem; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:.8rem; font-weight:600; color:var(--cp-muted); margin-bottom:5px; }
.err { color:#dc2626; font-size:.88rem; min-height:1.2em; }
.ok { color:#16a34a; font-size:.88rem; }
.badge { padding:3px 12px; border-radius:999px; font-size:.74rem; font-weight:600; background:#f1f5f9; color:var(--cp-muted); }
.badge.published { background:#dcfce7; color:#15803d; }
.badge.draft { background:#fee2e2; color:#b91c1c; }
.chapter-row { display:flex; justify-content:space-between; align-items:center; padding:9px 4px; border-bottom:1px solid var(--cp-line); gap:10px; flex-wrap:wrap; }
.ver-row { padding:7px 4px; border-bottom:1px dashed var(--cp-line); font-size:.87rem; color:var(--cp-muted); }
.cover-prev { width:110px; aspect-ratio:2/3; border-radius:8px; object-fit:cover; border:1px solid var(--cp-line); }
.hidden { display:none; }
.login-card { max-width:380px; margin:70px auto; background:var(--cp-card); border:1px solid var(--cp-line); border-radius:14px; padding:36px; box-shadow:0 10px 30px rgba(15,23,42,.08); text-align:center; }
.login-card h1 { margin-bottom:6px; }
.login-card .sub { color:var(--cp-muted); font-size:.88rem; margin-bottom:22px; }
.form { display:flex; flex-direction:column; gap:12px; text-align:left; }
.form label { font-size:.84rem; font-weight:600; color:var(--cp-muted); }
.form input { padding:11px 14px; }
@media (max-width:760px) { .sidebar { display:none; } .topbar nav { display:none; } }