/* Lanka RP — In-game admin panel (black / white / sun-yellow) */
:root{--y:#fdc502;--y-d:#c99a00;--bg:#0b0b0d;--side:#0f0f12;--card:#16161b;--card2:#1d1d23;--line:#2a2a32;--ink:#ececf1;--muted:#9696a4;--red:#e5484d;--green:#2fb344;--blue:#4c8dff;--orange:#ff7a1a}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 Inter,system-ui,sans-serif}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.boot{padding:80px;text-align:center;color:var(--muted)}
.y{color:var(--y)} .muted{color:var(--muted)} .red{color:var(--red)} .green{color:var(--green)}

/* layout */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:var(--side);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow:auto;padding:18px 0 30px}
.logo{display:block;padding:0 20px 18px}
.logo small{display:block;font-family:Oswald;letter-spacing:.3em;font-size:11px;color:var(--y);margin-bottom:4px}
.logo img{height:44px;width:auto}
.nav a,.nav .grp{display:flex;align-items:center;gap:12px;padding:10px 20px;color:#cfcfd8;font-weight:500;cursor:pointer;border-left:3px solid transparent;user-select:none}
.nav a:hover,.nav .grp:hover{background:#17171c;color:#fff}
.nav a.on{border-left-color:var(--y);color:var(--y);background:#1a1810}
.nav .grp.open{color:#fff}
.nav svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9}
.nav .grp .pm{margin-left:auto;color:var(--muted)}
.nav .sub{display:none;padding:2px 0 6px}
.nav .sub.open{display:block}
.nav .sub a{padding:7px 20px 7px 49px;font-size:13px;font-weight:400;color:#b3b3c0}
.nav .sub a.on{color:var(--y)}
.nav hr{border:0;border-top:1px solid var(--line);margin:14px 20px}
.main{min-width:0;display:flex;flex-direction:column}
.top{height:66px;display:flex;align-items:center;gap:16px;padding:0 26px;border-bottom:1px solid var(--line);background:rgba(11,11,13,.92);position:sticky;top:0;z-index:20;backdrop-filter:blur(8px)}
.top h1{font-family:Oswald;font-weight:600;font-size:18px;letter-spacing:.06em;text-transform:uppercase;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.burger{display:none;background:none;border:0;font-size:24px;cursor:pointer;color:#fff}
.srv{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:150px}
.who{position:relative;display:flex;align-items:center;gap:10px;cursor:pointer;padding:6px 10px;border-radius:8px}
.who:hover{background:var(--card)}
.who .av{width:32px;height:32px;border-radius:50%;background:var(--y);color:#111;display:grid;place-items:center;font-weight:700}
.who small{display:block;color:var(--muted);font-size:12px;line-height:1.1}
.drop{position:absolute;right:0;top:calc(100% + 8px);background:var(--card2);border:1px solid var(--line);border-radius:10px;min-width:190px;padding:6px;display:none;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.drop.open{display:block}
.drop a,.drop button{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 12px;border-radius:7px;cursor:pointer}
.drop a:hover,.drop button:hover{background:#28282f}
.content{padding:24px 26px 60px}
.banner{background:#211d0f;border:1px solid #4a3f12;color:#f5e3a0;border-radius:10px;padding:10px 14px;margin-bottom:18px;font-size:13px}
.banner.red{background:#2a1214;border-color:#5a2026;color:#ffc8cc}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:18px}
.card h2{font-size:16px;font-weight:600;margin:0 0 14px}
.card h2 .cnt{color:var(--muted);font-weight:400}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.kpi b{display:block;font-family:Oswald;font-size:34px;color:var(--y);line-height:1.1}
.kpi span{color:var(--muted);font-size:13px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cgrid{display:grid;grid-template-columns:400px 1fr;gap:18px;align-items:start}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.inp{background:#111115;border:1px solid var(--line);border-radius:8px;padding:9px 12px;min-width:0;outline:0}
.inp:focus{border-color:var(--y)}
.filters .inp{width:170px}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:8px;padding:9px 16px;cursor:pointer;font-weight:600;white-space:nowrap}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-y{background:var(--y);color:#111}
.btn-y:hover{filter:brightness(1.08)}
.btn-l{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn-l:hover{border-color:var(--y);color:var(--y)}
.btn-r{background:var(--orange);color:#fff}
.btn-red{background:var(--red);color:#fff}
.btn-g{background:var(--green);color:#fff}
.btn-s{padding:5px 10px;font-size:12px;border-radius:6px}

/* tables */
.tw{overflow-x:auto}
table.t{width:100%;border-collapse:collapse}
.t th{text-align:left;font-weight:600;color:#d4d4dc;padding:12px 12px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:13px}
.t td{padding:11px 12px;border-bottom:1px solid #222229;vertical-align:middle;white-space:nowrap}
.t tr:nth-child(even) td{background:#141418}
.t tr:hover td{background:#1c1c22}
.t a.lnk{color:var(--y)}
.t a.lnk:hover{text-decoration:underline}
.empty{padding:30px;text-align:center;color:var(--muted)}
.pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 10px;border-radius:20px;line-height:1.6}
.p-on{background:var(--green);color:#fff}.p-off{background:var(--red);color:#fff}.p-na{background:var(--red);color:#fff}
.p-en{background:var(--green);color:#fff}.p-y{background:var(--y);color:#111}.p-gr{background:#3a3a44;color:#ddd}
.money{display:inline-block;background:var(--green);color:#fff;font-size:11px;font-weight:700;border-radius:12px;padding:1px 9px}
.pager{display:flex;gap:4px;flex-wrap:wrap;margin:14px 0}
.pager button{border:0;background:#24242b;padding:8px 13px;border-radius:5px;cursor:pointer;font-weight:600}
.pager button.on{background:var(--y);color:#111}
.pager span{padding:8px 4px;color:var(--muted)}

/* character page */
.acct{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.acct h2{margin:0;font-size:18px;font-weight:600}
.important{background:var(--orange);color:#fff;border-radius:12px;padding:18px 20px;margin-bottom:18px;line-height:1.75}
.important b{display:block;font-size:15px;margin-bottom:6px}
.kv{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #222229}
.kv>div{padding:11px 4px;border-bottom:1px solid #222229}
.kv>div:nth-child(odd){color:var(--muted)}
.vlist .v{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #222229}
.vlist .v span:first-child{flex:1}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.acts .btn{flex:1 1 auto;justify-content:center}
.sect{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:14px 0 8px}
.x{background:none;border:0;color:var(--red);cursor:pointer;font-size:16px;line-height:1;padding:2px 6px;border-radius:5px}
.x:hover{background:#2a1416}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(600px 300px at 50% 100%,rgba(253,197,2,.18),transparent),var(--bg)}
.lbox{width:min(420px,100%);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px}
.lbox img{height:54px;margin:0 auto 6px;display:block}
.lbox h1{text-align:center;font-family:Oswald;letter-spacing:.25em;color:var(--y);font-size:14px;margin:0 0 22px}
.fld{display:block;margin-bottom:14px}
.fld>span{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}
.fld .inp{width:100%}
.err{background:#2a1214;border:1px solid #5a2026;color:#ffc8cc;border-radius:8px;padding:9px 12px;margin-bottom:14px;font-size:13px}

/* modal / toast */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;display:grid;place-items:start center;padding:40px 16px;overflow:auto}
.modal[hidden]{display:none}
.mbox{background:var(--card);border:1px solid var(--line);border-radius:12px;width:min(640px,100%)}
.mhead{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.mhead h3{margin:0;font-size:17px}
.mx{background:none;border:0;font-size:28px;cursor:pointer;line-height:1;color:#fff}
.mbody{padding:18px;max-height:calc(100vh - 160px);overflow:auto}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--y);color:#111;font-weight:600;padding:11px 18px;border-radius:9px;z-index:120;max-width:calc(100% - 32px)}
.toast.bad{background:var(--red);color:#fff}
code.key{display:block;background:#000;border:1px dashed var(--y);color:var(--y);padding:12px;border-radius:8px;word-break:break-all;font-size:13px;margin:10px 0}

@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}.cgrid,.grid2{grid-template-columns:1fr}}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:250px;z-index:50;transform:translateX(-100%);transition:transform .2s}
  .side.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.7)}
  .burger{display:block}
  .top{padding:0 14px;gap:10px}
  .who small,.who .nm{display:none}
  .srv{min-width:0;max-width:130px}
  .content{padding:16px 14px 50px}
  .filters .inp{width:100%}
  .kpis{grid-template-columns:1fr 1fr}
}