@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');
:root{--bg:#0d1014;--bg2:#141a1f;--panel:#171e24;--line:rgba(214,178,106,.18);--gold:#d6b26a;--gold2:#f1d594;--jade:#3fbf9b;--jade2:#1e8f74;--txt:#e8e4d8;--mut:#9aa39f;--red:#e0675a;--r:14px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--txt);font:15px/1.65 'Be Vietnam Pro',Arial,sans-serif;background:var(--bg) url('bg8.jpg') center/cover fixed no-repeat}
body:before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(1000px 500px at 80% -10%,rgba(63,191,155,.14),transparent 60%),radial-gradient(900px 500px at 0 0,rgba(214,178,106,.12),transparent 60%),linear-gradient(rgba(13,16,20,.9),rgba(13,16,20,.96))}
a{color:var(--gold2)}img{max-width:100%}
.portal-wrap{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:0 0 30px}
/* topbar */
.topbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding:8px 0;font-size:12px;color:var(--mut);border-bottom:1px solid var(--line)}
.topbar b{color:var(--txt);font-weight:600}.st-on{color:#7ee2a8!important}.st-off{color:var(--red)!important}.st-un{color:var(--gold)!important}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:6px;box-shadow:0 0 8px currentColor}
/* header */
.portal-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:20px 0 14px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.brand img{width:54px;height:50px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(63,191,155,.5))}
.brand b{display:block;font:900 22px/1.1 Cinzel,Georgia,serif;letter-spacing:.06em;color:var(--gold2);text-transform:uppercase}
.brand small{display:block;margin-top:4px;color:var(--jade);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.head-user{display:flex;flex-direction:column;gap:8px;align-items:flex-end;min-width:0}
.user-chip{padding:7px 14px;border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.04);font-size:13px}
.user-chip b{color:var(--gold2)}.user-chip .ban{color:var(--red);font-weight:700;margin-left:8px}
.portal-roles{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.portal-role-slot{padding:3px 10px;border:1px solid var(--line);border-radius:99px;background:rgba(63,191,155,.08);font-size:11px;white-space:nowrap}
.portal-role-slot small{color:var(--jade)}.portal-role-slot.empty{opacity:.35}
/* nav */
.portal-nav{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:rgba(15,20,25,.88);backdrop-filter:blur(12px);box-shadow:0 10px 30px #0008}
.portal-nav a{padding:9px 14px;border-radius:10px;color:var(--txt);text-decoration:none;font-weight:600;font-size:13px;transition:.2s}
.portal-nav a:hover{background:rgba(214,178,106,.12);color:var(--gold2)}
.portal-nav a.active{background:linear-gradient(135deg,var(--gold),#a67c32);color:#1b1306}
.portal-nav .logout-link{margin-left:auto;background:rgba(224,103,90,.14);color:#ffb3aa}.portal-nav .logout-link:hover{background:var(--red);color:#fff}
.nav-toggle{display:none;margin-left:auto;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:none;color:var(--gold2);font-size:20px;cursor:pointer}
/* main */
.portal-main{margin-top:18px;padding:30px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,rgba(23,30,36,.95),rgba(17,22,27,.95));box-shadow:0 20px 50px #0007}
.portal-main h2{margin:0 0 6px;font:700 28px Cinzel,Georgia,serif;color:var(--gold2);letter-spacing:.03em}
.portal-main h3{font-family:Cinzel,Georgia,serif;color:var(--gold)}
.lead{margin:0 0 24px;color:var(--mut)}.muted,.muted-small,.hint,.help{color:var(--mut);font-size:13px}
.cards,.item-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.card{padding:22px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.035);transition:.25s}
.cards .card:hover{transform:translateY(-4px);border-color:rgba(63,191,155,.5);box-shadow:0 14px 30px #0006}
.card h3{margin:0 0 8px;font-size:18px}.card p{margin:0 0 16px;color:var(--mut);font-size:14px}
.btn,button.btn,input[type=submit],button[type=submit]{display:inline-block;padding:11px 20px;border:0;border-radius:10px;color:#1b1306!important;background:linear-gradient(135deg,var(--gold2),var(--gold));text-decoration:none;font:700 14px 'Be Vietnam Pro',Arial,sans-serif;cursor:pointer;transition:.2s}
.btn:hover,input[type=submit]:hover,button[type=submit]:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn.alt{color:var(--gold2)!important;background:transparent;border:1px solid var(--gold)}.btn.alt:hover{background:rgba(214,178,106,.12)}
.notice,.error,.override-box,.admin-box{padding:14px 16px;margin:12px 0;border-left:4px solid var(--gold);border-radius:8px;background:rgba(214,178,106,.09);color:var(--txt)}
.error{border-color:var(--red);background:rgba(224,103,90,.1);color:#ffc2bb}
.form-row{max-width:560px;margin:14px 0}.form-row label{display:block;margin-bottom:6px;font-weight:600;color:var(--gold2)}
input,select,textarea{font-family:inherit}
.form-row input,.form-row select,.form-row textarea,.portal-main input[type=text],.portal-main input[type=password],.portal-main input[type=number],.portal-main input[type=email],.portal-main select,.portal-main textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#0c1115;color:var(--txt);font-size:15px;outline:0}
.form-row input:focus,.portal-main input:focus,.portal-main select:focus,.portal-main textarea:focus{border-color:var(--jade);box-shadow:0 0 0 3px rgba(63,191,155,.18)}
.portal-main table{width:100%;border-collapse:collapse;color:var(--txt)}
.portal-main th{background:rgba(214,178,106,.14)!important;color:var(--gold2)!important;text-align:left}
.portal-main td,.portal-main th{padding:11px 12px;border-bottom:1px solid var(--line)!important}
.portal-main tr:hover td{background:rgba(255,255,255,.03)}
.scroll{overflow-x:auto}.rank{color:var(--gold2)!important}
.news-meta{color:var(--mut)!important}.news-meta .tag{background:rgba(63,191,155,.15)!important;color:var(--jade)!important}
.news-imgs img{border-color:var(--line)!important}.news-imgs figcaption{color:var(--mut)!important}
.footer{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);text-align:center;color:var(--mut);font-size:12px}
/* landing */
.hero{position:relative;overflow:hidden;margin-top:18px;padding:84px 40px;text-align:center;border:1px solid var(--line);border-radius:20px;background:radial-gradient(600px 300px at 50% 0,rgba(63,191,155,.22),transparent 70%),linear-gradient(160deg,#10181c,#0c1013 60%,#17130b)}
.hero:after{content:"";position:absolute;inset:auto -10% -60% -10%;height:70%;background:radial-gradient(closest-side,rgba(214,178,106,.18),transparent);pointer-events:none}
.eyebrow{display:inline-block;padding:5px 16px;border:1px solid var(--line);border-radius:99px;color:var(--jade);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.hero h1{margin:20px 0 14px;font:900 clamp(34px,6vw,64px)/1.08 Cinzel,Georgia,serif;color:var(--gold2);text-shadow:0 4px 30px rgba(214,178,106,.35)}
.hero h1 em{font-style:normal;color:var(--jade)}
.hero p{max-width:620px;margin:0 auto 30px;color:var(--mut);font-size:17px}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;position:relative;z-index:1}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:18px}
.stat{padding:18px;text-align:center;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.035)}
.stat b{display:block;font:900 30px Cinzel,serif;color:var(--gold2)}.stat span{color:var(--mut);font-size:13px}
.sec{margin-top:34px}.sec-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:16px}
.sec-head small{color:var(--jade);letter-spacing:.2em;text-transform:uppercase;font-size:12px}
.sec-head h2{margin:2px 0 0!important}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.feat .card .ic{display:grid;place-items:center;width:46px;height:46px;margin-bottom:12px;border-radius:12px;background:rgba(63,191,155,.14);font-size:22px}
.news-list{display:grid;gap:12px}.news-item{display:flex;gap:14px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.035);text-decoration:none;color:var(--txt);transition:.2s}
.news-item:hover{border-color:var(--jade);transform:translateX(4px)}.news-item .tag{padding:3px 10px;border-radius:99px;background:rgba(63,191,155,.15);color:var(--jade);font-size:12px;white-space:nowrap}
.news-item span:last-child{margin-left:auto;color:var(--mut);font-size:12px;white-space:nowrap}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;counter-reset:s}
.step{position:relative;padding:22px 20px 20px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.035)}
.step:before{counter-increment:s;content:"0" counter(s);display:block;margin-bottom:6px;font:900 30px Cinzel,serif;color:rgba(214,178,106,.55)}
.step b{color:var(--gold2)}.step p{margin:6px 0 0;color:var(--mut);font-size:14px}
.cta{margin-top:34px;padding:40px;text-align:center;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,rgba(63,191,155,.14),rgba(214,178,106,.12))}
.cta h2{margin:0 0 8px!important}
@media(max-width:820px){.nav-toggle{display:block}.portal-nav{flex-direction:column;align-items:stretch}.portal-nav a{display:none}.portal-nav.open a{display:block}.portal-nav .logout-link{margin-left:0}.nav-toggle{align-self:flex-end;margin:0}.head-user{align-items:flex-start}.portal-roles{justify-content:flex-start}.portal-main{padding:20px}.hero{padding:56px 20px}.news-item{flex-wrap:wrap}.news-item span:last-child{margin-left:0}}
/* auth + login modal */
.auth-card{width:420px;max-width:calc(100% - 28px);margin:8vh auto 0;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#171e24,#10151a);box-shadow:0 24px 60px #000a;overflow:hidden}
.auth-head{padding:26px 20px 18px;text-align:center;background:radial-gradient(300px 120px at 50% 0,rgba(63,191,155,.2),transparent 70%)}
.auth-head img{width:70px;height:62px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(63,191,155,.5))}
.auth-head h1{margin:6px 0 2px;font:900 26px Cinzel,Georgia,serif;color:var(--gold2)}.auth-head p{margin:0;color:var(--jade);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.auth-form{padding:6px 28px 8px}.auth-form .form-row{max-width:none}
.auth-links{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;padding:6px 20px 24px;font-size:13px}.auth-links a{color:var(--mut);text-decoration:none}.auth-links a:hover{color:var(--gold2)}
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:14px;background:rgba(5,8,10,.75);backdrop-filter:blur(6px)}
.modal.show{display:flex}
.modal-box{position:relative;width:420px;max-width:100%;max-height:100%;overflow:auto;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#171e24,#10151a);box-shadow:0 24px 60px #000a;animation:pop .2s ease}
.modal-x{position:absolute;top:10px;right:14px;border:0;background:none;color:var(--mut);font-size:28px;line-height:1;cursor:pointer}.modal-x:hover{color:var(--gold2)}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}