:root{
  --bg:#0b0f16;
  --bg2:#0a0d13;
  --card:#0d111a; /* непрозрачный фон для попапов/карточек */
  --line:rgba(255,255,255,.12);
  --text:#e5e7eb;
  --muted:#b6c0cf;
  --accent:#60a5fa;
  --good:#34d399;
  --warn:#fb7185;
  --chip:rgba(255,255,255,.07);
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  font-size:19px; /* было мелко — увеличили сильно */
  color:var(--text);
  background:
    radial-gradient(1400px 800px at 20% -10%, rgba(96,165,250,.18), transparent 55%),
    radial-gradient(1100px 700px at 90% 0%, rgba(52,211,153,.12), transparent 55%),
    linear-gradient(180deg,var(--bg2),var(--bg));
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-attachment:fixed,fixed,fixed;
  background-color:var(--bg);
}


a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,13,19,.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}

.wrap{max-width:1480px;margin:0 auto;padding:18px 18px}
main .wrap{padding:18px 18px 70px}

.nav{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.nav .spacer{flex:1}
.brand img{height:44px; width:auto; display:block; filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));}
.nav a{font-size:16px; color:#d7e6ff}
.nav a:hover{color:#ffffff}

.badge{
  display:inline-flex;gap:10px;align-items:center;
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--muted);font-size:14px;
}

.flash{
  padding:14px 16px;border-radius:16px;
  border:1px solid var(--line);
  background:rgba(96,165,250,.12);
  margin-bottom:16px;
}

.card{
  position:relative;
  z-index:2;
  background:linear-gradient(180deg, rgba(17,24,36,.92), rgba(15,22,34,.84));
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px 18px;
  box-shadow:0 16px 46px rgba(0,0,0,.38);
}

h1{font-size:28px;margin:0 0 12px}
h2{font-size:22px;margin:0 0 12px}
.small{color:var(--muted);font-size:14px;line-height:1.4}

/* ===== Minecraft logs UI ===== */
.actions-box{border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(255,255,255,.03)}
.actions-box > summary{cursor:pointer;list-style:none;user-select:none}
.actions-box > summary::-webkit-details-marker{display:none}
.actions-panel{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.actions-tools{display:flex;gap:10px;flex-wrap:wrap}
.actions-search{flex:1;min-width:160px;padding:10px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(10,15,25,.85);color:var(--text);font-size:14px}
.actions-list{max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:8px;background:rgba(0,0,0,.08)}
.chk{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px}
.chk:hover{background:rgba(255,255,255,.04)}
.chk input{width:22px;height:22px}
.hint{margin-top:6px}

.mc-inv-wrap{--slot:36px;display:flex;gap:10px;align-items:flex-start;margin-top:6px;flex-wrap:wrap}
.mc-inv{display:inline-flex;flex-direction:column;gap:4px}
.mc-inv-side{display:inline-flex;flex-direction:column;gap:4px}
.mc-row{display:grid;grid-template-columns:repeat(9,var(--slot));gap:4px}
.mc-slot{position:relative;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.10);width:var(--slot,36px);height:var(--slot,36px)}
.mc-slot img.mc-item{width:100%;height:100%;object-fit:contain;padding:4px}
.mc-item-txt{font-size:11px;line-height:1.1;padding:6px;color:var(--muted);overflow-wrap:anywhere;word-break:break-word}
.mc-count{position:absolute;right:6px;bottom:4px;font-size:12px;font-weight:800;color:var(--text);text-shadow:0 1px 2px rgba(0,0,0,.7)}

/* ===== Logs list (cards, similar to in-game log viewer) ===== */
.logs-list{display:flex;flex-direction:column;gap:10px}
.log-day{
  margin-top:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:14px;
}

.log-item{
  position:relative;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(17,24,36,.92), rgba(15,22,34,.84));
  box-shadow:0 12px 34px rgba(0,0,0,.30);
  overflow:hidden;
}
.log-item::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:6px;
  background:rgba(255,255,255,.14);
}

/* action colors */
.log-item.is-login::before{background:rgba(52,211,153,.85)}
.log-item.is-logout::before{background:rgba(96,165,250,.85)}
.log-item.is-chat::before{background:rgba(96,165,250,.85)}
.log-item.is-place::before{background:rgba(251,146,60,.90)}
.log-item.is-break::before{background:rgba(148,163,184,.85)}
.log-item.is-item::before{background:rgba(250,204,21,.85)}
.log-item.is-inv::before{background:rgba(167,139,250,.85)}
.log-item.is-death::before{background:rgba(251,113,133,.90)}
.log-item.is-kill::before{background:rgba(244,63,94,.90)}

.log-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:8px 10px 6px 12px}
.log-left{min-width:0;display:flex;flex-direction:column;gap:6px}
.log-type{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.log-pill{
  display:inline-flex;align-items:center;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  font-size:12px;
  color:#d7e6ff;
  letter-spacing:.4px;
}
.log-pill--sub{color:var(--muted)}

.log-user{display:flex;gap:8px;align-items:flex-start;min-width:0}
.log-avatar{width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:#0b1220;object-fit:cover}
.log-avatar--empty{display:block}

.log-user-meta{min-width:0}
.log-user-row{display:flex;gap:10px;align-items:baseline;min-width:0}
.log-loc{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0;color:var(--muted);font-size:12px}
.log-user-name{
  padding:0;background:none;border:0;cursor:pointer;
  color:var(--text);font-weight:900;font-size:14px;line-height:1.1;
}
.log-user-name:hover{text-decoration:underline}
.log-user-sub{margin-top:2px;color:var(--muted);font-size:12px;display:flex;gap:8px;flex-wrap:wrap}
.log-user-sub .meta{display:inline-flex;align-items:center;gap:6px}

.log-right{text-align:right;display:flex;flex-direction:column;gap:4px;white-space:nowrap}
.log-time{font-weight:900;font-size:14px}
.log-date{color:var(--muted);font-size:12px}

.log-body{padding:0 10px 8px 12px}
.log-details-wrap .log-details{color:var(--text);font-size:13px;line-height:1.35}

.log-details--inv{display:flex;gap:12px;align-items:flex-start}
.log-inv-left{min-width:140px;display:flex;flex-direction:column;gap:8px}
.log-inv-right{flex:1;min-width:0}

/* Classic logs: вернуть исходный размер инвентаря (в компактном варианте он уменьшен) */
.logs-classic .mc-inv-wrap{display:flex;gap:10px;align-items:flex-start;margin-top:8px;flex-wrap:nowrap}
.logs-classic .mc-inv{display:flex;flex-direction:column;gap:6px;flex:1}
.logs-classic .mc-inv-side{display:flex;flex-direction:column;gap:6px;min-width:56px}
.logs-classic .mc-inv-side .mc-slot{min-height:52px}
.logs-classic .mc-row{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}
.logs-classic .mc-slot{position:relative;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.10);min-height:52px;width:auto;height:auto}
.logs-classic .mc-slot img.mc-item{width:50px;height:50px;object-fit:contain;padding:6px}
.logs-classic .mc-item-txt{font-size:11px;line-height:1.1;padding:6px;color:var(--muted);overflow-wrap:anywhere;word-break:break-word}
.logs-classic .mc-count{position:absolute;right:6px;bottom:4px;font-size:12px;font-weight:800;color:var(--text);text-shadow:0 1px 2px rgba(0,0,0,.7)}

.copyable{cursor:pointer}
.copyable:hover{text-decoration:underline}
.copyable.copied{opacity:.7}

@media (max-width:720px){
  .log-top{flex-direction:column;align-items:stretch}
  .log-right{text-align:left;flex-direction:row;gap:10px;align-items:baseline}
}

@media (max-width:560px){
  .actions-list{max-height:240px}
  .mc-inv-wrap{--slot:32px}
  .mc-item-txt{font-size:10px}
}

hr{border:none;border-top:1px solid var(--line);margin:16px 0}

input,select,textarea{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(10,15,25,.85);
  color:var(--text);
  outline:none;
  font-size:16px;
}
textarea{min-height:120px}

button{
  padding:10px 14px;border-radius:14px;
  border:1px solid var(--line);
  background:rgba(10,15,25,.85);
  color:var(--text);
  cursor:pointer;
  font-size:15px;
}
button:hover{border-color:rgba(255,255,255,.26)}

.btn-accent{background:rgba(96,165,250,.16);border-color:rgba(96,165,250,.40)}
.btn-danger{background:rgba(251,113,133,.14);border-color:rgba(251,113,133,.40);color:#ffe2e7}
.btn-ok{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.34);color:#e6fff6}

.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;color:#cbd5e1;
  background:rgba(10,15,25,.85);
  border:1px solid var(--line);
  padding:12px;border-radius:16px;overflow:auto
}

/* layout helpers */
.row{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:14px}
@media (max-width:820px){ .row{grid-template-columns:1fr;} }
.col{min-width:0}

/* prevent overlap between blocks */
.card + .staff-grid{margin-top:16px}

/* Staff grid */
.staff-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3, minmax(360px, 1fr));
  gap:18px;
}
@media (max-width:1320px){ .staff-grid{grid-template-columns:repeat(2, minmax(340px, 1fr));} }
@media (max-width:980px){ .staff-grid{grid-template-columns:repeat(1, minmax(300px, 1fr));} }
@media (max-width:620px){ .staff-grid{grid-template-columns:1fr;} }

.staff-card{
  padding:18px;
  height:320px;
  overflow:hidden;
  z-index:1;
}
.staff-card::after{
  content:"";
  position:absolute; inset:-90px -140px auto auto;
  width:340px;height:340px;
  background:radial-gradient(circle at 30% 30%, rgba(96,165,250,.18), transparent 62%);
  transform:rotate(12deg);
  pointer-events:none;
}

.staff-top{display:flex; gap:14px; align-items:flex-start}
.skin-full{
  width:140px;height:250px; flex:0 0 auto;
  object-fit:contain;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.56));
}

.staff-info{flex:1; min-width:0}
.staff-nick{font-size:22px; font-weight:800; line-height:1.1; margin:0}
.staff-nick a{color:var(--accent)}

.staff-lines{margin-top:12px; display:grid; gap:8px; max-height:150px; overflow:hidden}
.line{
  display:flex; gap:10px; align-items:flex-start;
  color:var(--muted); font-size:14px;
  white-space:normal; /* разрешаем перенос */
  overflow-wrap:anywhere;
}
.dot{width:11px;height:11px;border-radius:999px;display:inline-block;margin-top:4px;background:rgba(255,255,255,.25)}
.dot.red{background:rgba(251,113,133,.95)}
.dot.green{background:rgba(52,211,153,.95)}
.dot.blue{background:rgba(96,165,250,.95)}

.chip{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 12px;
  border:1px solid var(--line);
  background:var(--chip);
  border-radius:999px;
  font-size:14px;
  color:#d7e6ff;
}

.staff-actions{margin-top:14px; display:grid; gap:10px}
.actions-row{display:flex; gap:10px; flex-wrap:wrap}
.actions-row button,.actions-row a{padding:9px 12px;border-radius:14px;font-size:14px}

/* Avatar/profile */
.avatar{width:54px;height:54px;border-radius:14px;border:1px solid var(--line);background:#0b1220}
.profile{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.profile .big{width:110px;height:110px;border-radius:20px}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:700;text-align:left}


.hidden{display:none}
/* Tabs (profile) */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.tabbtn{
  padding:10px 14px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:#d7e6ff;
  font-size:14px;
}
.tabbtn.active{background:rgba(96,165,250,.18);border-color:rgba(96,165,250,.45);color:#fff}
.tab-pane{margin-top:16px}
.tab-pane.hidden{display:none}
.shop-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(380px, 1fr));
  gap:18px;
  margin-top:16px;
}
@media (max-width:1100px){ .shop-grid{grid-template-columns:repeat(2, minmax(300px, 1fr));} }
@media (max-width:680px){ .shop-grid{grid-template-columns:1fr;} }

.shop-card{
  display:flex;
  flex-direction:row;
  gap:14px;
  align-items:flex-start;
  height:auto;
}

.shop-thumb{
  width:92px;
  height:92px;
  flex:0 0 auto;
  border-radius:16px;
  border:1px solid var(--line);
  background-size:cover;
  background-position:center;
  background-color:rgba(255,255,255,.04);
}
.shop-thumb-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:14px;
}

.shop-body{flex:1;min-width:0;display:flex;flex-direction:column}
.shop-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.shop-title{font-weight:800;font-size:18px;line-height:1.15;min-width:0;overflow-wrap:anywhere}
.shop-desc{margin-top:8px}
.shop-foot{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---- Logs filters (improved UI) ---- */
.logs-filters{display:flex;flex-direction:column;gap:10px}
.logs-filters__row{display:flex;gap:10px;flex-wrap:wrap}
.logs-filters__field{display:flex;flex-direction:column;gap:6px}
.logs-filters__actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.logs-advanced{border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(255,255,255,.03)}
.logs-advanced > summary{cursor:pointer;list-style:none;user-select:none}
.logs-advanced > summary::-webkit-details-marker{display:none}
.logs-advanced__body{margin-top:10px}

/* ---- Modal (generic) ---- */
.modal{position:fixed;inset:0;z-index:99999}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(2px)}
.modal__panel{position:relative;max-width:860px;margin:calc(64px + 2vh + env(safe-area-inset-top)) auto 4vh;background:rgba(10,15,25,.98);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.55);overflow:visible;max-height:92vh;display:flex;flex-direction:column}
.modal__head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.modal__tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.modal__panel .actions-search{flex:1;min-width:200px}

/* ===== Player stats modal (logs) ===== */
.player-modal__panel{max-width:1120px}
.player-modal__body{padding:14px 16px 18px;overflow:auto}
.player-modal__top{display:grid;grid-template-columns:160px 1fr;gap:14px;align-items:stretch}
.player-modal__skin{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03);padding:10px}
.player-modal__skin img{width:120px;height:auto;object-fit:contain;filter: drop-shadow(0 16px 26px rgba(0,0,0,.56));}
.player-modal__cards{display:grid;grid-template-columns:repeat(3, minmax(200px,1fr));gap:12px}
.pm-card{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03);padding:12px 14px;min-width:0}
.pm-big{font-size:28px;font-weight:900;margin-top:6px}

.pm-bars{height:86px;display:flex;gap:6px;align-items:flex-end;margin-top:12px;overflow:hidden}
.pm-bar{flex:1 1 0;border-radius:10px;background:rgba(52,211,153,.42);border:1px solid rgba(52,211,153,.40);min-width:6px}
.pm-bar.active{background:rgba(96,165,250,.45);border-color:rgba(96,165,250,.55)}

.player-modal__bottom{display:grid;grid-template-columns:repeat(3, minmax(260px, 1fr));gap:12px;margin-top:12px}
.pm-hours{margin-top:10px;display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto;padding-right:6px}
.pm-hour-row{display:flex;align-items:center;gap:10px}
.pm-hour-label{width:44px;color:var(--muted);font-size:12px;flex:0 0 auto}
.pm-hour-track{flex:1 1 auto;height:10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.pm-hour-fill{height:100%;border-radius:999px;background:rgba(96,165,250,.35);border-right:1px solid rgba(96,165,250,.40)}
.pm-hour-cnt{width:44px;text-align:right;color:var(--muted);font-size:12px;flex:0 0 auto}

.pm-list{margin-top:10px;display:grid;gap:8px}
.pm-li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 10px;border-radius:14px;background:rgba(0,0,0,.10);border:1px solid rgba(255,255,255,.06)}
.pm-li__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-li__cnt{font-weight:900}
.pm-li__pct{color:var(--muted);font-size:13px}

@media (max-width:980px){
  .player-modal__top{grid-template-columns:1fr}
  .player-modal__skin{justify-content:flex-start}
  .player-modal__cards{grid-template-columns:1fr}
  .player-modal__bottom{grid-template-columns:1fr}
}


/* --- Frozen: мягкая загрузка/ошибки сети --- */
#frozen-loader{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(11,15,22,.82);
  backdrop-filter: blur(6px);
  z-index:9999;
  padding:24px;
}
#frozen-loader.show{ display:flex; }
#frozen-loader .card{
  max-width:520px; width:100%;
  border:1px solid var(--line);
  background:rgba(10,13,19,.92);
  border-radius:18px;
  padding:18px 18px 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
#frozen-loader .row{ display:flex; gap:12px; align-items:flex-start; }
#frozen-loader .spinner{
  width:26px; height:26px; border-radius:50%;
  border:3px solid rgba(255,255,255,.25);
  border-top-color: rgba(255,255,255,.85);
  animation: frozenSpin .9s linear infinite;
  flex:0 0 auto;
  margin-top:2px;
}
@keyframes frozenSpin{ to{ transform:rotate(360deg); } }
#frozen-loader h3{ margin:0 0 6px; font-size:20px; }
#frozen-loader p{ margin:0; color:var(--muted); line-height:1.35; }
#frozen-loader .actions{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
#frozen-loader button{
  appearance:none; cursor:pointer;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  font-size:16px;
}
#frozen-loader button.primary{ border-color: rgba(96,165,250,.5); background: rgba(96,165,250,.12); }
#frozen-loader small{ display:block; margin-top:10px; color:rgba(255,255,255,.55); }

/* === User menu (top-right dropdown) === */
.user-menu{position:relative;}
.user-menu-btn{display:flex;align-items:center;gap:10px;background:transparent;border:0;color:inherit;cursor:pointer;padding:6px 10px;border-radius:12px;}
.user-menu-btn:hover{background:rgba(255,255,255,.06);} 
.user-ava{width:26px;height:26px;border-radius:8px;image-rendering:pixelated;}
.user-menu-name{font-weight:600;}
.user-menu-caret{opacity:.7;font-size:12px;}
.user-menu-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:50;display:none;min-width:320px;}
.user-menu.open .user-menu-pop{display:block;}
.user-menu-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.35);padding:14px;}
.user-menu-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;}
.user-menu-title{font-size:16px;font-weight:700;line-height:1.2;}
.user-menu-metrics{display:flex;flex-direction:column;gap:6px;min-width:120px;}
.user-menu-actions{display:grid;gap:8px;margin-top:12px;}

/* === Classic logs: left color stripe by action (ONLY visual addition) === */
.table tr[data-action] td:first-child{border-left:4px solid transparent;}
.table tr[data-action="login"] td:first-child{border-left-color:var(--ok);} 
.table tr[data-action="logout"] td:first-child{border-left-color:var(--bad);} 
.table tr[data-action^="chat_"] td:first-child{border-left-color:#4aa3ff;} 
.table tr[data-action^="block_"] td:first-child{border-left-color:#ffb020;} 
.table tr[data-action^="item_"] td:first-child{border-left-color:#9a7bff;} 
.table tr[data-action="inventory_snapshot"] td:first-child{border-left-color:#c9c9c9;} 
.table tr[data-action="death"] td:first-child{border-left-color:#ff4d4d;} 
.table tr[data-action="kill"] td:first-child{border-left-color:#ff4d4d;} 

/* make copyable elements feel like links */
.copyable{cursor:pointer;}
.copyable:hover{text-decoration:underline;}
.copyable.copied{filter:brightness(1.15);}