:root { --gold:#d4af37; --gold2:#f5d77a; --bg:#0a0a0a; --card:#141414; --line:#2a2412; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:radial-gradient(circle at top,#1a1505 0%,var(--bg) 60%); color:#eee; font-family:Georgia,'Times New Roman',serif; min-height:100vh; overflow-x:hidden; }
#bg { position:fixed; inset:0; z-index:0; pointer-events:none; }
header, main { position:relative; z-index:1; }

header { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:16px 40px; border-bottom:1px solid var(--gold); background:rgba(0,0,0,.75); position:sticky; top:0; z-index:10; backdrop-filter:blur(10px); animation:slideDown .8s ease; }
header::after { content:''; position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:linear-gradient(90deg,transparent,var(--gold2),transparent); background-size:200% 100%; animation:sweep 3s linear infinite; }
.logo { font-size:26px; letter-spacing:3px; cursor:pointer; background:linear-gradient(90deg,var(--gold),var(--gold2),#fff6cf,var(--gold2),var(--gold)); background-size:250% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 5s linear infinite; }
nav { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.who { color:#aaa; font-size:14px; }

button { background:transparent; color:var(--gold); border:1px solid var(--gold); padding:9px 18px; cursor:pointer; font-family:inherit; font-size:15px; transition:all .3s; position:relative; overflow:hidden; }
button:hover { background:var(--gold); color:#000; box-shadow:0 0 20px rgba(212,175,55,.6); transform:translateY(-2px); }
button:active { transform:translateY(0) scale(.97); }
button.danger { border-color:#a33; color:#e66; }
button.danger:hover { background:#a33; color:#fff; box-shadow:0 0 20px rgba(170,51,51,.6); }
button.small { padding:5px 11px; font-size:13px; }
.ripple { position:absolute; border-radius:50%; background:rgba(255,255,255,.55); transform:scale(0); animation:ripple .6s linear; pointer-events:none; }

main { max-width:1050px; margin:36px auto; padding:0 20px 60px; }
.page { animation:pageIn .55s cubic-bezier(.2,.8,.2,1); }
h1, h2 { color:var(--gold); margin-bottom:20px; letter-spacing:1px; }
h1::after { content:''; display:block; height:2px; width:70px; margin-top:10px; background:linear-gradient(90deg,var(--gold),transparent); animation:grow 1s ease; }

input, textarea, select { width:100%; padding:12px; background:var(--card); border:1px solid var(--line); color:#fff; margin-bottom:14px; font-family:inherit; font-size:16px; transition:.3s; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--gold); box-shadow:0 0 16px rgba(212,175,55,.35); }
textarea { min-height:260px; resize:vertical; }
.search { font-size:18px; padding:15px; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.card { background:var(--card); border:1px solid var(--line); padding:22px; transition:all .4s; animation:fadeUp .6s ease backwards; cursor:pointer; position:relative; overflow:hidden; }
.card::before { content:''; position:absolute; left:0; top:0; height:3px; width:0; background:linear-gradient(90deg,var(--gold),var(--gold2)); transition:width .5s; }
.card::after { content:''; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg,transparent,rgba(245,215,122,.12),transparent); transition:left .7s; }
.card:hover { transform:translateY(-6px); border-color:var(--gold); box-shadow:0 12px 32px rgba(212,175,55,.2); }
.card:hover::before { width:100%; }
.card:hover::after { left:140%; }
.card h3 { color:var(--gold2); margin-bottom:10px; }
.card p { color:#aaa; font-size:14px; line-height:1.55; }
.card.static { cursor:default; margin-bottom:20px; }
.meta { margin-top:12px; font-size:12px; color:#777; }

.badge { display:inline-block; padding:3px 10px; font-size:12px; border:1px solid var(--gold); color:var(--gold); margin-left:8px; vertical-align:middle; }
.badge.pending { color:#e8b84a; border-color:#e8b84a; animation:pulse 2s infinite; }
.badge.approved { color:#6c6; border-color:#6c6; }
.badge.rejected { color:#e66; border-color:#e66; }

.box { background:var(--card); border:1px solid var(--gold); padding:30px; max-width:520px; margin:0 auto 30px; box-shadow:0 0 40px rgba(212,175,55,.08); animation:glow 4s ease-in-out infinite; }
.box.wide { max-width:820px; }
.article { background:var(--card); border:1px solid var(--line); padding:35px; line-height:1.85; white-space:pre-wrap; }
.note { color:#e66; margin-top:15px; }
.empty { color:#777; }

table { width:100%; border-collapse:collapse; margin-bottom:35px; }
th { color:var(--gold); text-align:left; border-bottom:2px solid var(--gold); padding:10px; }
td { padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr { animation:fadeUp .5s ease backwards; }
tr:hover td { background:#1c1708; }
td .actions { display:flex; gap:6px; flex-wrap:wrap; }

.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:15px; margin-bottom:30px; }
.stat { background:var(--card); border:1px solid var(--gold); padding:20px; text-align:center; animation:pop .6s ease backwards; transition:.3s; }
.stat:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(212,175,55,.25); }
.stat b { display:block; font-size:38px; color:var(--gold2); }
.stat span { color:#999; font-size:13px; }

.bar { height:8px; background:#222; min-width:90px; }
.bar i { display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold2)); animation:barGrow 1.2s cubic-bezier(.2,.8,.2,1); transform-origin:left; }

.chart { display:flex; align-items:flex-end; gap:14px; height:190px; padding:20px; background:var(--card); border:1px solid var(--line); margin-bottom:35px; }
.col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px; }
.pair { display:flex; align-items:flex-end; gap:4px; height:100%; width:100%; justify-content:center; }
.pair i { display:block; width:42%; max-width:26px; background:linear-gradient(180deg,var(--gold2),var(--gold)); transform-origin:bottom; animation:barUp 1s cubic-bezier(.2,.8,.2,1) backwards; }
.pair i.rev { background:linear-gradient(180deg,#8fd18f,#4a9a4a); }
.col small { color:#777; font-size:11px; }
.legend { color:#999; font-size:13px; margin:-22px 0 30px; }
.legend i { display:inline-block; width:10px; height:10px; margin:0 6px 0 14px; background:var(--gold); }
.legend i.rev { background:#6c6; }

.toast { position:fixed; bottom:30px; right:30px; background:var(--gold); color:#000; padding:14px 24px; z-index:99; box-shadow:0 0 24px rgba(212,175,55,.6); animation:toastIn .4s ease, toastOut .4s ease 2.6s forwards; }

@keyframes shine { to { background-position:250% center; } }
@keyframes sweep { from { background-position:200% 0; } to { background-position:-200% 0; } }
@keyframes slideDown { from { transform:translateY(-100%); opacity:0; } to { transform:none; opacity:1; } }
@keyframes pageIn { from { opacity:0; transform:translateY(18px) scale(.99); filter:blur(4px); } to { opacity:1; transform:none; filter:none; } }
@keyframes fadeUp { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
@keyframes pop { from { opacity:0; transform:scale(.7); } to { opacity:1; transform:scale(1); } }
@keyframes grow { from { width:0; } }
@keyframes barGrow { from { transform:scaleX(0); } }
@keyframes barUp { from { transform:scaleY(0); } }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(232,184,74,.5); } 50% { box-shadow:0 0 0 7px rgba(232,184,74,0); } }
@keyframes glow { 0%,100% { box-shadow:0 0 30px rgba(212,175,55,.08); } 50% { box-shadow:0 0 45px rgba(212,175,55,.22); } }
@keyframes ripple { to { transform:scale(4); opacity:0; } }
@keyframes toastIn { from { transform:translateX(120%); } to { transform:none; } }
@keyframes toastOut { to { transform:translateX(130%); opacity:0; } }

@media (max-width:700px) { header { padding:14px 16px; } .logo { font-size:20px; } table { font-size:13px; } th, td { padding:7px; } }
@media (prefers-reduced-motion:reduce) { * { animation-duration:.01ms !important; transition-duration:.01ms !important; } }