/* ==============================================================
   KRAKEN ONLINE — Database (premium dark redesign)
   Tokens + components. Plain CSS, FontAwesome 5/6.
   ============================================================== */

:root{
  /* backgrounds */
  --bg-0:#04060c; --bg-1:#070b14;
  --bg-scrim:linear-gradient(rgba(6,9,17,.90),rgba(4,6,12,.965));
  /* surfaces (glass) */
  --surf-1:rgba(17,25,42,.62); --surf-2:rgba(24,34,55,.80); --surf-3:rgba(13,20,34,.94);
  --surf-head:rgba(255,255,255,.035); --surf-sunk:rgba(0,0,0,.24);
  --field:rgba(255,255,255,.05); --field-hi:rgba(255,255,255,.085);
  /* lines */
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.18);
  --hairline:rgba(255,255,255,.06); --line-gold:rgba(255,182,72,.24);
  /* text */
  --txt:#eef2fb; --txt-2:#c3cce0; --muted:#aab4c8; --soft:#8a97b4; --faint:#5d6885;
  /* gold brand identity */
  --gold:#ffb648; --gold-deep:#e0902a; --gold-soft:rgba(255,182,72,.16);
  --gold-grad:linear-gradient(135deg,var(--gold),var(--gold-deep));
  --glow-gold:0 6px 20px -4px rgba(255,182,72,.45); --ink:#0b0f18;
  /* per-section accents (remapped via body.sec-*) */
  --sec-1:#5fb0ff; --sec-2:#16d6ff;
  --items-1:#5fb0ff; --items-2:#16d6ff;
  --mons-1:#ff6b76;  --mons-2:#ff9d5c;
  --maps-1:#22d38a;  --maps-2:#9be861;
  /* radii */
  --r-xs:8px; --r-sm:11px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-pill:999px;
  /* spacing (4px base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:56px; --s-10:72px;
  /* elevation */
  --e-1:0 1px 2px rgba(0,0,0,.40); --e-2:0 8px 24px rgba(0,0,0,.34);
  --e-3:0 18px 44px rgba(0,0,0,.48); --e-4:0 28px 70px rgba(0,0,0,.55);
  --inset-top:inset 0 1px 0 var(--hairline);
  /* type scale */
  --t-display:2.375rem; --t-h2:1.4375rem; --t-h3:1.125rem;
  --t-body:.9375rem; --t-sm:.875rem; --t-xs:.75rem; --t-2xs:.6875rem;
  --w-med:600; --w-bold:700; --w-black:800;
  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-snap:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.14s; --t-med:.22s; --t-slow:.32s;
  --shell:1180px; --topbar-h:64px;
}

body.database-main.db-dark{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,182,72,.06), transparent 60%),
    var(--bg-scrim),
    url("/img/bg-new5.jpg") center top / cover no-repeat fixed;
  background-color:var(--bg-1); color:var(--txt);
  font-family:"Myriad Pro","Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.5; min-height:100vh; -webkit-font-smoothing:antialiased;
}
body.db-noscroll{ overflow:hidden; }
.database-main a{ text-decoration:none; }
.db-shell{ max-width:var(--shell); margin:0 auto; padding:0 var(--s-6); }

/* section accent thread */
body.sec-items, body.sec-viewitem      { --sec-1:var(--items-1); --sec-2:var(--items-2); }
body.sec-monsters, body.sec-viewmonster{ --sec-1:var(--mons-1);  --sec-2:var(--mons-2); }
body.sec-maps                          { --sec-1:var(--maps-1);  --sec-2:var(--maps-2); }

/* ---------------- TOP BAR ---------------- */
.db-topbar{ position:sticky; top:0; z-index:1000;
  background:linear-gradient(180deg,rgba(9,13,22,.92),rgba(9,13,22,.76));
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line); box-shadow:var(--inset-top),var(--e-1); }
.db-topbar::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--line-gold) 20%,var(--line-gold) 80%,transparent); }
.db-topbar-in{ display:flex; align-items:center; justify-content:space-between; height:var(--topbar-h); gap:var(--s-4); }

.db-back{ display:inline-flex; align-items:center; gap:10px; padding:8px 15px 8px 11px;
  border-radius:var(--r-pill); border:1px solid transparent;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast); }
.db-back > i{ font-size:12px; color:var(--soft); transition:transform var(--t-fast) var(--ease), color var(--t-fast); }
.db-back:hover{ background:rgba(255,255,255,.05); border-color:var(--line); }
.db-back:hover > i{ transform:translateX(-3px); color:var(--gold); }
.db-brand{ font-weight:var(--w-black); font-size:1.1875rem; letter-spacing:1px; color:#fff; }
.db-brand span{ color:var(--gold); margin-left:5px; text-shadow:0 0 18px rgba(255,182,72,.4); }

.db-topnav{ display:flex; gap:4px; padding:4px; border-radius:var(--r-pill);
  background:var(--surf-sunk); border:1px solid var(--line); box-shadow:var(--inset-top); }
.db-tablink{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--r-pill);
  color:var(--muted); font-size:var(--t-xs); font-weight:var(--w-bold); letter-spacing:.5px; text-transform:uppercase;
  transition:color var(--t-fast), background var(--t-fast), box-shadow var(--t-med) var(--ease-snap); }
.db-tablink i{ font-size:13px; opacity:.85; transition:color var(--t-fast); }
.db-tablink:hover{ color:#fff; background:rgba(255,255,255,.06); }
.db-tablink:hover i{ color:var(--ti); opacity:1; }
.db-tablink.is-active{ color:var(--ink); background:var(--gold-grad);
  box-shadow:var(--glow-gold), inset 0 1px 0 rgba(255,255,255,.35); }
.db-tablink.is-active i{ opacity:1; color:var(--ink); }

/* ---------------- PAGE HEAD ---------------- */
.db-wrap{ padding:var(--s-8) 0 var(--s-10); }
.db-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-5);
  flex-wrap:wrap; margin-bottom:var(--s-7); padding-bottom:var(--s-5); border-bottom:1px solid var(--line); }
.dtitle a{ color:#fff; font-weight:var(--w-black); font-size:var(--t-display); line-height:1.05; letter-spacing:-.5px; }

.db-search-btn{ display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:var(--r-md);
  cursor:pointer; font-weight:var(--w-bold); font-size:var(--t-sm); color:var(--txt);
  background:rgba(255,255,255,.05); border:1px solid var(--line-2); box-shadow:var(--inset-top);
  transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease), box-shadow var(--t-med); }
.db-search-btn i{ color:var(--gold); }
.db-search-btn:hover{ background:var(--gold-soft); border-color:var(--line-gold); transform:translateY(-1px); box-shadow:var(--e-2); }
.db-search-btn:active{ transform:translateY(0); }

/* ---------------- HUB CARDS ---------------- */
.db-hub{ margin-top:var(--s-2); }
.hub-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s-6); }
.hub-card{ position:relative; display:flex; align-items:center; gap:var(--s-5); padding:26px 28px; min-height:148px;
  border-radius:var(--r-xl); overflow:hidden; background:var(--surf-1); backdrop-filter:blur(12px);
  border:1px solid var(--line); box-shadow:var(--e-2),var(--inset-top);
  transition:transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease),
             border-color var(--t-med), background var(--t-med);
  animation:db-rise var(--t-med) var(--ease-out) both; }
.hub-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--a1),var(--a2)); }
.hub-card::after{ content:""; position:absolute; left:-30px; top:50%; transform:translateY(-50%);
  width:200px; height:200px; border-radius:50%; opacity:.42; filter:blur(4px); pointer-events:none;
  background:radial-gradient(circle, var(--a1), transparent 68%);
  transition:opacity var(--t-med) var(--ease); }
.hub-card:hover{ transform:translateY(-6px); background:var(--surf-2); border-color:var(--line-2);
  box-shadow:var(--e-3), 0 18px 40px -18px var(--a1), var(--inset-top); }
.hub-card:hover::after{ opacity:.85; }
.hub-card:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--bg-1), 0 0 0 4px var(--a1), var(--e-3); }
.hub-grid .hub-card:nth-child(2){ animation-delay:.05s; }
.hub-grid .hub-card:nth-child(3){ animation-delay:.1s; }

.hub-pic{ position:relative; z-index:1; width:120px; height:120px; flex:none; display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.6)); transition:transform var(--t-med) var(--ease-out); }
.hub-pic::before{ content:""; position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  width:92px; height:22px; border-radius:50%; background:radial-gradient(closest-side,var(--a1),transparent 75%);
  opacity:.4; filter:blur(2px); transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.hub-pic img{ position:relative; max-width:118px; max-height:118px; object-fit:contain; }
.hub-card:hover .hub-pic{ transform:translateY(-3px) scale(1.04); }
.hub-card:hover .hub-pic::before{ opacity:.65; transform:translateX(-50%) scale(1.08); }

.hub-body{ position:relative; z-index:1; flex:1; min-width:0; }
.hub-title{ display:block; font-size:var(--t-h2); font-weight:var(--w-black); color:#fff; letter-spacing:-.2px; }
.hub-desc{ display:block; font-size:var(--t-sm); color:var(--soft); margin-top:7px; line-height:1.5; }
.hub-go{ position:relative; z-index:1; width:40px; height:40px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-pill); color:var(--faint); font-size:15px; background:rgba(255,255,255,.04); border:1px solid var(--line);
  transition:transform var(--t-med) var(--ease-out), color var(--t-fast), background var(--t-fast), border-color var(--t-fast); }
.hub-card:hover .hub-go{ color:var(--ink); border-color:transparent; background:linear-gradient(135deg,var(--a1),var(--a2)); transform:translateX(4px); }
.hub-items   { --a1:var(--items-1); --a2:var(--items-2); }
.hub-monsters{ --a1:var(--mons-1);  --a2:var(--mons-2); }
.hub-maps    { --a1:var(--maps-1);  --a2:var(--maps-2); }

/* ---------------- SEARCH DRAWER ---------------- */
.db-overlay{ position:fixed; inset:0; background:rgba(4,7,14,.62); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity var(--t-slow) var(--ease), visibility var(--t-slow); z-index:1100; }
.db-overlay.is-open{ opacity:1; visibility:visible; }
.db-drawer{ position:fixed; top:0; right:0; height:100%; width:400px; max-width:90vw; z-index:1101;
  background:linear-gradient(180deg,var(--surf-3),#0a0f1b); backdrop-filter:blur(20px) saturate(140%);
  border-left:1px solid var(--line-2); box-shadow:-24px 0 60px rgba(0,0,0,.55), var(--inset-top);
  transform:translateX(100%); transition:transform var(--t-slow) var(--ease-out);
  display:flex; flex-direction:column; overflow:hidden; }
.db-drawer.is-open{ transform:translateX(0); }
.db-drawer::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,transparent,var(--line-gold),transparent); }
.db-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:var(--s-5) var(--s-6) var(--s-4);
  border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.03),transparent); }
.db-drawer-head span{ font-size:var(--t-h3); font-weight:var(--w-black); color:#fff; display:inline-flex; align-items:center; }
.db-drawer-head > span::before{ content:"\f002"; font-family:"Font Awesome 5 Free","Font Awesome 6 Free"; font-weight:900;
  color:var(--gold); margin-right:9px; font-size:14px; }
.db-drawer-close{ width:36px; height:36px; border:none; border-radius:var(--r-sm); background:rgba(255,255,255,.06);
  color:var(--txt-2); font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease); }
.db-drawer-close:hover{ background:rgba(255,90,90,.18); color:#fff; transform:rotate(90deg); }
.db-drawer-body{ flex:1; overflow-y:auto; padding:var(--s-5) var(--s-6) var(--s-6); }

.db-tabs{ display:flex; gap:4px; background:var(--surf-sunk); padding:4px; border-radius:var(--r-md);
  border:1px solid var(--line); margin-bottom:var(--s-5); box-shadow:var(--inset-top); }
.db-tab{ flex:1; padding:10px; border:none; border-radius:var(--r-sm); background:transparent; color:var(--muted);
  font-weight:var(--w-bold); font-size:var(--t-sm); cursor:pointer; transition:color var(--t-fast), background var(--t-fast), box-shadow var(--t-med); }
.db-tab:hover{ color:#fff; }
.db-tab.is-active{ color:var(--ink); background:var(--gold-grad); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }

.db-form{ display:flex; flex-direction:column; gap:var(--s-4); }
.db-field{ display:flex; flex-direction:column; gap:8px; }
.db-field > span{ font-size:var(--t-xs); font-weight:var(--w-bold); letter-spacing:.6px; text-transform:uppercase; color:var(--muted); }
.db-field input[type=text], .db-select select{
  width:100%; padding:12px 14px; border:none; border-radius:var(--r-sm); background:var(--field); color:var(--txt);
  font-size:var(--t-body); outline:none; box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow var(--t-fast) var(--ease), background var(--t-fast); }
.db-field input::placeholder{ color:var(--faint); }
.db-field input[type=text]:hover, .db-select select:hover{ background:var(--field-hi); box-shadow:inset 0 0 0 1px var(--line-strong); }
.db-field input[type=text]:focus, .db-select select:focus{ background:var(--field-hi);
  box-shadow:inset 0 0 0 1px var(--gold), 0 0 0 3px var(--gold-soft); }

.db-select{ position:relative; }
.db-select select{ padding-right:38px; appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer; }
.db-select::after{ content:"\f078"; font-family:"Font Awesome 5 Free","Font Awesome 6 Free"; font-weight:900;
  position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:11px; pointer-events:none;
  transition:color var(--t-fast), transform var(--t-fast) var(--ease); }
.db-select:focus-within::after{ color:var(--gold); transform:translateY(-50%) rotate(180deg); }
.db-select select option{ background:#0f1626; color:var(--txt); }

/* level range — no native spinners, single focus box */
.lvl-range{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:4px;
  border-radius:var(--r-sm); background:var(--field); box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow var(--t-fast) var(--ease), background var(--t-fast); }
.lvl-range:focus-within{ background:var(--field-hi); box-shadow:inset 0 0 0 1px var(--gold), 0 0 0 3px var(--gold-soft); }
.lvl-range input[type=number]{ width:100%; text-align:center; padding:9px 8px; border:none; outline:none;
  background:transparent; box-shadow:none; color:var(--txt); font-size:var(--t-body); font-weight:var(--w-bold);
  font-variant-numeric:tabular-nums; -moz-appearance:textfield; appearance:textfield; }
.lvl-range input[type=number]::-webkit-outer-spin-button,
.lvl-range input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.lvl-range input::placeholder{ color:var(--faint); font-weight:var(--w-med); }
.lvl-dash{ color:var(--faint); font-weight:var(--w-bold); font-size:16px; line-height:1; user-select:none; }

.db-actions{ display:flex; gap:10px; margin-top:var(--s-2); }
.db-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 18px; border:none;
  border-radius:var(--r-md); font-weight:var(--w-bold); font-size:var(--t-sm); cursor:pointer;
  transition:transform var(--t-fast) var(--ease), filter var(--t-fast), background var(--t-fast), box-shadow var(--t-med); }
.db-btn:active{ transform:translateY(1px); }
.db-btn-primary{ flex:1; color:var(--ink); background:var(--gold-grad); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
.db-btn-primary:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow:var(--glow-gold); }
.db-btn-ghost{ flex:0 0 auto; color:var(--txt-2); background:rgba(255,255,255,.05); border:1px solid var(--line-2); }
.db-btn-ghost:hover{ background:rgba(255,255,255,.1); color:#fff; border-color:var(--line-strong); }

/* ---------------- LIST TABLES ---------------- */
.items{ width:100%; }
.items .table{ width:100%; background:var(--surf-1); backdrop-filter:blur(12px); color:var(--txt);
  border-radius:var(--r-lg); overflow:hidden; border-collapse:separate; border-spacing:0;
  border:1px solid var(--line); box-shadow:var(--e-2),var(--inset-top); margin-bottom:var(--s-6); }
.items .table th{ background:var(--surf-head); color:var(--muted); border:none !important; padding:14px 18px;
  font-size:var(--t-2xs); text-transform:uppercase; letter-spacing:.5px; font-weight:var(--w-bold); text-align:left; }
.items .table td{ border:none !important; border-top:1px solid var(--line) !important; padding:13px 18px;
  vertical-align:middle; color:var(--txt-2); font-size:var(--t-sm); }
.items .table td:first-child{ color:var(--soft); font-variant-numeric:tabular-nums; }
.items .table-striped tbody tr:nth-of-type(even){ background:rgba(255,255,255,.018); }
.items .table-hover tbody tr{ transition:background var(--t-fast) var(--ease), box-shadow var(--t-fast); }
.items .table-hover tbody tr:hover{ background:rgba(255,255,255,.05);
  background:color-mix(in srgb,var(--sec-1) 13%, transparent); box-shadow:inset 3px 0 0 var(--sec-1); }
.items .table a{ color:var(--txt); font-weight:var(--w-med); display:inline-flex; align-items:center; gap:11px; transition:color var(--t-fast); }
.items .table a:hover{ color:var(--gold); }
.items .table a img{ width:34px; height:34px; object-fit:contain; border-radius:9px; flex:none; padding:3px;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow var(--t-fast); }
.items .table a:hover img{ box-shadow:inset 0 0 0 1px var(--sec-1), 0 0 12px -2px var(--sec-1); }

.items .pagination{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; padding:0; margin:0 0 var(--s-6); list-style:none; }
.items .pagination li{ list-style:none; }
.items .pagination li a{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 13px;
  border-radius:var(--r-sm); background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--txt-2);
  font-weight:var(--w-med); font-variant-numeric:tabular-nums;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease); }
.items .pagination li a:hover{ background:rgba(255,255,255,.09); color:#fff; border-color:var(--line-strong); transform:translateY(-1px); }
.items .pagination li.active a{ color:var(--ink); background:var(--gold-grad); border-color:transparent; }

.items .alert, .items .alert-warning{ display:flex; flex-direction:column; align-items:center; gap:12px;
  background:var(--surf-1); border:1px dashed var(--line-2); color:var(--muted); border-radius:var(--r-lg);
  padding:48px 24px; text-align:center; font-size:var(--t-body); }
.items .alert-warning::before{ content:"\f002"; font-family:"Font Awesome 5 Free","Font Awesome 6 Free"; font-weight:900;
  font-size:30px; color:var(--faint); }

/* ---------------- DETAIL PANELS ---------------- */
.database-main .portals{ display:flex; flex-direction:column; gap:var(--s-5); max-width:820px; }
.database-main .panel{ background:var(--surf-1) !important; backdrop-filter:blur(12px); border:1px solid var(--line) !important;
  border-radius:var(--r-lg) !important; box-shadow:var(--e-2),var(--inset-top) !important; overflow:hidden; margin:0 0 var(--s-5) !important; color:var(--txt); }
.database-main .panel-heading{ position:relative; background:var(--surf-head) !important; border:none !important;
  border-bottom:1px solid var(--line) !important; color:#fff !important; padding:15px 18px 15px 22px; font-weight:var(--w-bold); }
.database-main .panel-heading::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--sec-1),var(--sec-2)); }
.database-main .panel-title{ color:#fff !important; font-weight:var(--w-black); font-size:var(--t-h3); margin:0; }
.database-main .panel-body{ padding:18px 20px; color:var(--txt-2); line-height:1.6; font-size:var(--t-sm); }
.database-main .panel-body > img{ float:left; width:64px; height:64px; object-fit:contain; margin:0 16px 8px 0; border-radius:var(--r-sm); padding:6px;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px var(--line), var(--e-1); }
.database-main .panel .table{ background:transparent; box-shadow:none; margin:0; border-radius:0; border:none; }
.database-main .panel .table td, .database-main .panel .table th{ color:var(--txt) !important; border:none !important;
  border-top:1px solid var(--line) !important; padding:12px 16px; vertical-align:middle; font-size:var(--t-sm); }
.database-main .panel .table tr:first-child td, .database-main .panel .table tr:first-child th{ border-top:none !important; }
.database-main .panel .table tbody tr{ transition:background var(--t-fast); }
.database-main .panel .table tbody tr:hover{ background:rgba(255,255,255,.025); }
.database-main .panel .table td:first-child, .database-main .panel .table th:first-child{ color:var(--muted) !important;
  font-weight:var(--w-med); width:38%; white-space:nowrap; text-transform:uppercase; letter-spacing:.4px; font-size:var(--t-xs); }
.database-main .panel .table td:last-child{ color:var(--txt) !important; font-weight:var(--w-med); font-variant-numeric:tabular-nums; }
.database-main .panel .table a{ color:var(--txt); font-weight:var(--w-med); transition:color var(--t-fast); }
.database-main .panel .table a:hover{ color:var(--gold); }
.database-main .panel .table a img{ width:32px; height:32px; object-fit:contain; vertical-align:middle; margin-right:9px; border-radius:8px; padding:3px;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px var(--line); }
.database-main .panel .table-bordered, .database-main .panel .table-bordered td, .database-main .panel .table-bordered th{ border:none !important; border-top:1px solid var(--line) !important; }
.database-main .thumbnail{ background:var(--surf-sunk); border:1px solid var(--line); border-radius:var(--r-md); padding:12px; overflow:hidden; }
.database-main .thumbnail img{ width:100%; border-radius:var(--r-sm); display:block; }
.database-main .thumbnail .caption h3{ color:#fff; font-weight:var(--w-black); font-size:var(--t-h3); margin:12px 0 4px; text-align:center; }

/* ---------------- MONSTER / ITEM VIEW ---------------- */
.mob-view{ display:flex; gap:var(--s-6); align-items:flex-start; flex-wrap:wrap; }
.mob-pic{ width:300px; flex:none; }
.mob-pic img{ width:100%; display:block; border-radius:var(--r-md);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.01));
  box-shadow:inset 0 0 0 1px var(--line), var(--e-1); }
.mob-stats{ flex:1; min-width:280px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--s-7); }
.mstat{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 2px; border-bottom:1px solid var(--line); }
.mstat span{ color:var(--muted); font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.4px; }
.mstat b{ color:var(--txt); font-weight:var(--w-bold); font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (max-width:760px){ .mob-pic{ width:100%; max-width:320px; margin:0 auto; } .mob-stats{ grid-template-columns:1fr; } }

/* ---------------- SCROLLBARS (только страницы БД — db.css грузится лишь здесь) ---------------- */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-track{ background:rgba(255,255,255,.03); }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.3); background-clip:padding-box; }
html{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent; }

/* ---------------- GLOBAL POLISH ---------------- */
.database-main a:focus-visible, .database-main button:focus-visible{
  outline:none; box-shadow:0 0 0 2px var(--bg-1), 0 0 0 4px var(--gold-soft); border-radius:var(--r-sm); }
.database-main ::selection{ background:var(--gold-soft); color:#fff; }
.db-drawer-body::-webkit-scrollbar{ width:8px; }
.db-drawer-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:99px; }
.db-drawer-body::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.2); }
@keyframes db-rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

@media (max-width:992px){
  .hub-grid{ grid-template-columns:1fr; }
  .dtitle a{ font-size:1.875rem; }
}
@media (max-width:680px){
  .db-topbar-in{ flex-direction:column; height:auto; gap:8px; padding:10px 0; }
  .db-topnav{ width:100%; justify-content:center; }
  .db-tablink{ flex:1; justify-content:center; padding:9px 8px; }
  .db-drawer{ width:100%; max-width:100%; }
}
@media (max-width:460px){
  .db-tablink span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .db-tablink i{ font-size:15px; }
  .db-brand span{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .database-main *{ transition-duration:.01ms !important; animation:none !important; }
  .hub-card:hover, .db-search-btn:hover, .hub-card:hover .hub-pic{ transform:none; }
}