@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg:#080b14;
  --bg-2:#0c1120;
  --sidebar:#0a0e1a;
  --panel:#0e1424;
  --card:#10172a;
  --card-2:#131b30;
  --line:#1d2740;
  --line-soft:#161f37;
  --gold:#c9a24a;
  --gold-bright:#e3c372;
  --gold-dim:rgba(201,162,74,.13);
  --text:#e8eaf2;
  --text-dim:#8c93ab;
  --text-faint:#5f667d;
  --green:#3ddc84;
  --red:#e2555f;
  --blue:#5b8fd6;
  --purple:#a779e0;
  --shadow:0 14px 38px rgba(0,0,0,.55);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse at 80% -10%, rgba(201,162,74,.05), transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgba(91,143,214,.05), transparent 50%),
    var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
}
h1,h2,h3,.display{font-family:'Cinzel',serif; letter-spacing:.5px; margin:0;}
.eyebrow{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--gold);}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--gold); color:#0a0e1a;}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}

/* ===== AUTH ===== */
#auth-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-box{width:100%; max-width:420px; background:linear-gradient(180deg,var(--panel),var(--bg-2)); border:1px solid var(--line); border-radius:14px; padding:36px 32px; box-shadow:var(--shadow); position:relative; overflow:hidden;}
.auth-box::before{content:""; position:absolute; top:0;left:0;right:0; height:3px; background:linear-gradient(90deg,var(--gold),var(--gold-bright),var(--gold));}
.auth-crest{width:62px;height:62px;margin:0 auto 14px;border-radius:50%; background:radial-gradient(circle at 35% 30%, #1c2540, #0c1120); display:flex;align-items:center;justify-content:center; font-size:26px; border:2px solid var(--gold);}
.auth-title{text-align:center; font-size:30px; margin:4px 0 2px;}
.auth-sub{text-align:center; color:var(--text-dim); font-size:13px; margin-bottom:24px;}
.field{margin-bottom:15px;}
.field label{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:1.5px; color:var(--gold); margin-bottom:6px; font-family:'JetBrains Mono';}
.field input,.select,.textarea{width:100%; padding:11px 13px; border-radius:8px; border:1px solid var(--line); background:#0a0f1d; color:var(--text); font-size:13.5px; outline:none; font-family:inherit; transition:border-color .15s;}
.field input:focus,.select:focus,.textarea:focus{border-color:var(--gold);}
.textarea{resize:vertical; min-height:70px;}
.btn{padding:12px; border-radius:8px; border:none; font-weight:700; font-size:13px; letter-spacing:.4px; text-transform:uppercase; width:100%;}
.btn-primary{background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#1a1304; box-shadow:0 4px 16px rgba(201,162,74,.25);}
.btn-primary:hover{filter:brightness(1.07);}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--text-dim);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}
.auth-switch{text-align:center; margin-top:16px; font-size:12.5px; color:var(--text-dim);}
.auth-switch span{color:var(--gold); cursor:pointer; font-weight:600;}
.auth-error{background:rgba(226,85,95,.1); border:1px solid var(--red); color:#ffb3b8; font-size:12px; padding:9px 12px; border-radius:7px; margin-bottom:14px; display:none;}

/* ===== SHELL ===== */
#app{display:none;}
.shell{display:flex; min-height:100vh;}
.sidebar{width:250px; flex:none; background:linear-gradient(180deg,var(--sidebar),#070a12); border-right:1px solid var(--line); padding:18px 14px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;}
.brand{padding:2px 4px 14px; border-bottom:1px solid var(--line); margin-bottom:14px; font-family:'JetBrains Mono'; font-size:10.5px; letter-spacing:2px; color:var(--text-dim); text-transform:uppercase; display:flex; align-items:center; gap:6px;}
.brand b{color:var(--gold);}

.profile-card{padding:0 2px 14px; border-bottom:1px solid var(--line); margin-bottom:14px;}
.profile-top{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.avatar{width:42px;height:42px;border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-family:'Cinzel'; font-weight:700; font-size:17px; border:2px solid var(--gold); color:#0a0e1a;}
.profile-name{font-weight:700; font-size:14.5px; color:var(--text); line-height:1.2;}
.profile-grade{font-size:10.5px; color:var(--gold); font-family:'JetBrains Mono'; letter-spacing:1px; margin-top:2px; text-transform:uppercase;}
.profile-role{font-size:10px; color:var(--text-faint); margin-top:1px;}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:7px;}
.stat-box{background:var(--card); border:1px solid var(--line-soft); border-radius:8px; padding:7px 9px;}
.stat-box .l{font-size:8.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:1px; font-family:'JetBrains Mono';}
.stat-box .v{font-family:'JetBrains Mono'; font-weight:700; font-size:15px; color:var(--gold-bright); margin-top:1px;}

.nav-sec{font-size:9.5px; letter-spacing:1.8px; color:var(--text-faint); text-transform:uppercase; margin:14px 6px 6px; font-family:'JetBrains Mono';}
.nav-item{display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:7px; cursor:pointer; color:var(--text-dim); font-size:13px; font-weight:500; margin-bottom:2px;}
.nav-item .ic{width:16px; text-align:center; font-size:13px;}
.nav-item:hover{background:var(--card); color:var(--text);}
.nav-item.active{background:var(--gold-dim); color:var(--gold-bright); font-weight:600;}
.nav-foot{margin-top:auto; padding-top:10px; border-top:1px solid var(--line);}

.main{flex:1; min-width:0; padding:30px 38px;}
.page-head{margin-bottom:24px; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap;}
.page-head h1{font-size:30px; margin:3px 0;}
.page-head p{color:var(--text-dim); font-size:13.5px; margin:0; max-width:560px;}

.grid{display:grid; gap:16px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:1000px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{background:linear-gradient(180deg,var(--card),var(--card-2)); border:1px solid var(--line); border-radius:12px; padding:20px; box-shadow:var(--shadow);}
.card h3{font-size:17px; margin-bottom:4px; font-family:'Cinzel';}

.pill{display:inline-block; font-family:'JetBrains Mono'; font-size:9.5px; letter-spacing:1px; text-transform:uppercase; padding:3px 9px; border-radius:20px; border:1px solid var(--line);}
.pill-gold{background:var(--gold-dim); color:var(--gold-bright); border-color:var(--gold);}
.pill-green{background:rgba(61,220,132,.12); color:var(--green); border-color:var(--green);}
.pill-red{background:rgba(226,85,95,.12); color:#ffb3b8; border-color:var(--red);}
.pill-blue{background:rgba(91,143,214,.12); color:#a9c5ec; border-color:var(--blue);}

.filter-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.filter-chip{padding:7px 15px; border-radius:20px; border:1px solid var(--line); font-size:12.5px; color:var(--text-dim); cursor:pointer; background:var(--card);}
.filter-chip.active{border-color:var(--gold); color:var(--gold-bright); background:var(--gold-dim);}

table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; font-family:'JetBrains Mono'; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--gold); padding:10px 8px; border-bottom:1px solid var(--line);}
td{padding:10px 8px; border-bottom:1px solid var(--line-soft); color:var(--text-dim); vertical-align:middle;}
tr:hover td{background:rgba(255,255,255,.015);}
.thumb{width:40px;height:40px;border-radius:6px;object-fit:cover; cursor:pointer; border:1px solid var(--line);}

.btn-sm{padding:7px 12px; border-radius:6px; font-size:11px; font-weight:700; border:none; text-transform:uppercase; letter-spacing:.4px;}
.btn-approve{background:var(--green); color:#06210f;}
.btn-reject{background:var(--red); color:#260a0c;}
.btn-edit{background:transparent; border:1px solid var(--line); color:var(--text-dim);}
.btn-edit:hover{border-color:var(--gold); color:var(--gold);}
.btn-del{background:transparent; border:1px solid var(--red); color:#ffb3b8;}
.btn-buy{background:var(--gold); color:#1a1304; border:none; padding:9px 16px; border-radius:7px; font-weight:700; font-size:12px; text-transform:uppercase;}

.tabs{display:flex; gap:18px; margin-bottom:20px; border-bottom:1px solid var(--line);}
.tab{padding:9px 2px; font-size:13.5px; color:var(--text-dim); cursor:pointer; border-bottom:2px solid transparent; font-weight:600;}
.tab.active{color:var(--gold-bright); border-color:var(--gold);}

.modal-bg{position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:50; display:none; align-items:center; justify-content:center; padding:20px;}
.modal-bg.show{display:flex;}
.modal{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:26px; width:100%; max-width:480px; box-shadow:var(--shadow); position:relative; max-height:88vh; overflow-y:auto;}
.modal h3{margin-bottom:16px;}
.modal-close{position:absolute; top:14px; right:18px; font-size:19px; color:var(--text-dim); cursor:pointer;}
.modal-img{max-width:100%; border-radius:8px; max-height:65vh; object-fit:contain; display:block; margin:0 auto;}

.toast{position:fixed; bottom:22px; right:22px; background:var(--card); border:1px solid var(--gold); border-radius:9px; padding:12px 18px; font-size:13px; box-shadow:var(--shadow); z-index:100; display:none;}
.empty{color:var(--text-faint); font-size:13px; text-align:center; padding:34px 10px;}

.file-drop{border:1.5px dashed var(--line); border-radius:9px; padding:14px; text-align:center; font-size:12px; color:var(--text-dim); cursor:pointer; background:#0a0f1d; display:block;}
.file-drop:hover{border-color:var(--gold);}
.file-drop input{display:none;}
.preview-img{width:100%; max-height:130px; object-fit:cover; border-radius:8px; margin-top:8px; display:none;}

.leader-row{display:flex; align-items:center; gap:14px; padding:12px 6px; border-bottom:1px solid var(--line-soft);}
.leader-rank{font-family:'Cinzel'; font-weight:700; font-size:19px; width:30px; color:var(--gold);}
.leader-name{flex:1; font-weight:600;}
.leader-pts{font-family:'JetBrains Mono'; color:var(--gold-bright); font-weight:700;}

.progress-bar{height:8px; background:#0a0f1d; border-radius:6px; overflow:hidden; border:1px solid var(--line);}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-bright)); border-radius:6px;}

.gallery-item{border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--card);}
.gallery-item img{width:100%; height:160px; object-fit:cover; cursor:pointer;}
.gallery-cap{padding:9px 12px; font-size:12px; color:var(--text-dim);}

.lock-overlay{filter:grayscale(1) brightness(.55);}
.icon-box{width:40px;height:40px;border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:10px;}