/* =====================================================================
   STORY RO Database theme — โหลดต่อจาก app.css (ไม่แก้ app.css เดิม)
   โทนเดียวกับเว็บเติมเงิน: ม่วงเข้ม · ทอง · แดงเพลิง
   ===================================================================== */
:root{
  --s-bg:#0f0a16; --s-bg2:#160f20; --s-panel:#1b1426; --s-panel2:#231a31; --s-panel3:#2b2040;
  --s-line:rgba(242,199,110,.16); --s-line2:rgba(242,199,110,.32);
  --s-gold:#f2c76e; --s-gold2:#d89a3a; --s-ember:#e2544f; --s-violet:#a77bdb; --s-teal:#4fd1c5;
  --s-text:#f1e9f7; --s-muted:#ab9dbf; --s-dim:#7d6f91;
  --s-grad-gold:linear-gradient(135deg,#ffe2a1 0%,#f2c76e 45%,#d4892f 100%);
  --s-shadow:0 18px 40px -22px rgba(0,0,0,.85);
  /* override ตัวแปรของ app.css */
  --blue:#a77bdb; --navy:#f1e9f7; --gold:#f2c76e; --cream:#1b1426; --line:rgba(242,199,110,.16); --text:#f1e9f7; --muted:#ab9dbf;
}
html{background:var(--s-bg)}
body.story-db{
  color:var(--s-text);
  background:
    radial-gradient(900px 500px at 85% -5%,rgba(226,84,79,.16),transparent 60%),
    radial-gradient(900px 600px at 0% 10%,rgba(167,123,219,.16),transparent 60%),
    var(--s-bg);
  background-attachment:fixed;
  min-height:100vh;
}
.story-db ::selection{background:rgba(242,199,110,.35)}
.story-db a{color:inherit}
.story-db a:hover{color:var(--s-gold)}
.story-db h1,.story-db h2,.story-db h3,.story-db h4{color:var(--s-text)}
.story-db .muted,.story-db small{color:var(--s-muted)}
.story-db ::-webkit-scrollbar{width:10px;height:10px}
.story-db ::-webkit-scrollbar-thumb{background:#3a2c50;border-radius:10px}
.story-db ::-webkit-scrollbar-track{background:transparent}

/* ---------------- Top bar ---------------- */
.story-db .topbar{
  height:72px;background:rgba(15,10,22,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--s-line);box-shadow:0 10px 30px -20px #000;
}
.story-db .nav{gap:10px}
.story-db .brand{margin-right:26px;gap:12px}
.story-db .brand img{height:46px;width:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.story-db .brand-text{display:flex;flex-direction:column;line-height:1.05}
.story-db .brand-text b{font-family:Cinzel,serif;font-size:15px;letter-spacing:3px;color:var(--s-gold)}
.story-db .brand-text small{font-size:9px;letter-spacing:3px;color:var(--s-dim)}
.story-db .nav nav{gap:2px;align-items:center}
.story-db .nav nav a{
  height:auto;padding:8px 14px;border-radius:10px;color:var(--s-text);font-weight:500;font-size:15px;
  border:0;line-height:1.15;transition:background .2s,color .2s;position:relative;
}
.story-db .nav nav a small{display:block;font-size:10px;font-weight:300;color:var(--s-dim)}
.story-db .nav nav a:hover{background:rgba(242,199,110,.08);color:var(--s-gold)}
.story-db .nav nav a.on{color:var(--s-gold);background:rgba(242,199,110,.1)}
.story-db .nav nav a.on:after{content:"";position:absolute;left:14px;right:14px;bottom:-14px;height:2px;border-radius:2px;background:var(--s-grad-gold);box-shadow:0 0 12px var(--s-gold)}
.story-db .nav-search{margin-left:auto}
.story-db .nav-search input{
  width:200px;height:38px;border-radius:12px;border:1px solid var(--s-line);background:rgba(255,255,255,.04);
  color:var(--s-text);font-family:inherit;padding:0 14px;outline:none;transition:.2s
}
.story-db .nav-search input:focus{border-color:var(--s-gold);width:240px;box-shadow:0 0 0 3px rgba(242,199,110,.15)}
.story-db .nav-toggle{display:none}

/* ---------------- Hero (หน้าแรก) ---------------- */
.story-db .hero.story-hero{
  min-height:440px;background:linear-gradient(90deg,#120b1a 0%,#1a0f22 45%,#2a0f17 100%);
  border-bottom:1px solid var(--s-line);display:flex;align-items:center;
}
.story-db .story-hero-art{
  position:absolute;inset:0 0 0 auto;width:min(58%,820px);
  background:url('../images/theme/hero-story.jpg') center 0%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%);
  opacity:.95;
}
.story-db .story-hero:after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(transparent,var(--s-bg));pointer-events:none}
.story-db .story-hero .hero-layout{display:block;position:relative;z-index:2;width:100%}
.story-db .story-hero .hero-center{text-align:left;margin:0;max-width:600px;padding:60px 0 70px}
.story-db .eyebrow{
  background:rgba(242,199,110,.08);border:1px solid var(--s-line2);color:var(--s-gold);letter-spacing:3px;font-weight:500
}
.story-db .hero h1{font-size:50px;font-weight:600;color:var(--s-text);text-shadow:0 4px 24px rgba(0,0,0,.6)}
.story-db .hero h1 span{background:var(--s-grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.story-db .hero p{color:var(--s-muted);font-size:15px;margin:0 0 22px}
.story-db .searchbox{
  height:58px;background:rgba(20,13,30,.85);border:1px solid var(--s-line2);border-radius:16px;
  box-shadow:0 18px 40px -18px #000,0 0 0 1px rgba(255,255,255,.02) inset;padding:6px 6px 6px 18px;max-width:560px
}
.story-db .searchbox input{background:transparent;color:var(--s-text);font-size:15px}
.story-db .searchbox input::placeholder{color:var(--s-dim)}
.story-db .searchbox button,.story-db .btn{
  background:var(--s-grad-gold);color:#2a1700;border-radius:12px;font-weight:600;box-shadow:0 10px 24px -12px rgba(242,199,110,.9)
}
.story-db .searchbox button{padding:0 26px}
.story-db .btn:hover,.story-db .searchbox button:hover{filter:brightness(1.08);color:#2a1700}
.story-db .searchbox.compact{max-width:none;height:50px}
.story-db .hero-quick{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.story-db .hero-quick a{padding:8px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--s-line);font-size:13px;color:var(--s-muted)}
.story-db .hero-quick b{color:var(--s-gold);font-weight:600;margin-right:3px}
.story-db .hero-quick a:hover{border-color:var(--s-gold)}

/* ---------------- Category cards ---------------- */
.story-db .portal-layout{margin-top:-30px}
.story-db .category{
  background:var(--s-panel);border:1px solid var(--s-line);outline:0;border-radius:18px;box-shadow:var(--s-shadow);
  transition:transform .25s,border-color .25s,box-shadow .25s
}
.story-db .category:hover{transform:translateY(-5px);border-color:var(--s-line2);box-shadow:0 26px 50px -24px rgba(242,199,110,.35)}
.story-db .category .art{background:radial-gradient(circle at 50% 70%,rgba(242,199,110,.18),transparent 70%),var(--s-panel2)}
.story-db .category .art img{transition:transform .35s}
.story-db .category:hover .art img{transform:scale(1.05)}
.story-db .category-copy{background:transparent!important;color:var(--s-text);border-top:1px solid var(--s-line)}
.story-db .category-copy h2{color:var(--s-gold);font-size:16px;letter-spacing:1px}
.story-db .category-copy p{color:var(--s-muted)}
.story-db .category-copy span{color:var(--s-text)}
.story-db .category.blue .category-copy h2{color:#c7a6f0}
.story-db .category.green .category-copy h2{color:#7fe0c6}
.story-db .category.cyan .category-copy h2{color:#8fd4ff}
.story-db .category.red .category-copy h2{color:#ff8f86}

/* ---------------- Panels / cards ---------------- */
.story-db .panel,.story-db .card,.story-db .map-info-card,.story-db .login-panel,.story-db .admin-card,.story-db .import-log-card{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0)),var(--s-panel);
  border:1px solid var(--s-line);box-shadow:var(--s-shadow);color:var(--s-text)
}
.story-db .panel-head{border-bottom:1px solid var(--s-line)}
.story-db .panel-head h3,.story-db .panel h3{color:var(--s-text);letter-spacing:.5px}
.story-db .panel-head a,.story-db .panel-head span{color:var(--s-gold)}
.story-db .ribbon{background:var(--s-grad-gold);color:#2a1700;box-shadow:0 3px 0 #8a5a1c;border-radius:10px}
.story-db .card:hover{border-color:var(--s-line2)}
.story-db .thumb,.story-db .visual{background:radial-gradient(circle at 50% 60%,rgba(242,199,110,.14),transparent 70%),var(--s-panel2);border-color:var(--s-line)}
.story-db .stat{background:var(--s-panel2);border:1px solid var(--s-line);color:var(--s-text)}
.story-db .stat span,.story-db .stat small{color:var(--s-dim)}
.story-db .stat b,.story-db .stat strong{color:var(--s-text)}
.story-db .page-hero{padding:42px 0 22px;position:relative}
.story-db .page-hero h1{font-size:38px;font-weight:600}
.story-db .page-hero h1:after{content:"";display:block;width:64px;height:3px;border-radius:3px;margin-top:10px;background:var(--s-grad-gold)}
.story-db .filter,.story-db .search-link{background:rgba(255,255,255,.04);border:1px solid var(--s-line);color:var(--s-text);border-radius:12px}
.story-db .filter:hover,.story-db .search-link:hover,.story-db .filter.active,.story-db .filter.on{border-color:var(--s-gold);color:var(--s-gold)}
.story-db .input,.story-db input.input,.story-db select,.story-db textarea{
  background:rgba(0,0,0,.25)!important;border:1px solid var(--s-line2)!important;color:var(--s-text)!important;border-radius:10px
}
.story-db option{background:#1b1426}
.story-db .result-row,.story-db .monster-row{border-bottom:1px solid var(--s-line)}
.story-db .update i{background:var(--s-ember)}
.story-db .online{color:#57e3a3}
.story-db .level-pill{background:rgba(79,209,197,.12);color:var(--s-teal)}

/* ---------------- Tables ---------------- */
.story-db .table,.story-db .data-table{color:var(--s-text)}
.story-db .table th,.story-db .table td{border-bottom:1px solid var(--s-line)}
.story-db .table th{color:var(--s-dim);font-weight:500;font-size:12px;letter-spacing:.5px;background:rgba(255,255,255,.02)}
.story-db .table tbody tr{transition:background .15s}
.story-db .table tbody tr:hover{background:rgba(242,199,110,.05)}
.story-db .table a{color:var(--s-text)}
.story-db .table a:hover{color:var(--s-gold)}

/* ---------------- Badges ---------------- */
.story-db .badge{border-radius:20px;padding:4px 10px;letter-spacing:.5px}
.story-db .badge-open,.story-db .badge-available{background:rgba(87,227,163,.14);color:#57e3a3}
.story-db .badge-closed,.story-db .badge-locked{background:rgba(255,255,255,.07);color:var(--s-dim)}
.story-db .badge-event{background:rgba(226,84,79,.16);color:#ff8f86}
.story-db .badge-official{background:rgba(143,212,255,.14);color:#8fd4ff}
.story-db .badge-custom{background:rgba(242,199,110,.16);color:var(--s-gold)}

/* ---------------- Item / Monster detail ---------------- */
.story-db .scriptbox{background:#120c1b;border:1px solid var(--s-line);color:#e9dcff}
.story-db .translated-bonus{background:rgba(167,123,219,.1);color:var(--s-text);border:1px solid rgba(167,123,219,.18)}
.story-db .translated-bonus.unsupported-bonus{background:rgba(255,255,255,.04);color:var(--s-muted)}
.story-db .disabled-bonus{opacity:.7}
.story-db .disabled-badge{background:rgba(226,84,79,.18);color:#ff8f86}
.story-db .drop-item-icon img,.story-db .item-icon img,.story-db .map-mob-thumb img{image-rendering:pixelated}

/* ---------------- World map ---------------- */
.story-db .wm2-stage{box-shadow:0 0 0 1px var(--s-line2),0 30px 60px -30px #000}
.story-db .wm2-dungeon-card{background:var(--s-panel);border-color:var(--s-line)}
.story-db .wm2-floor{background:rgba(255,255,255,.03)}
.story-db .wm2-floor:hover{border-color:var(--s-gold)}
.story-db .map-name-chip{background:rgba(242,199,110,.12);color:var(--s-gold);border-color:var(--s-line2)}

/* ---------------- Footer ---------------- */
.story-db footer{background:#0b0711;color:var(--s-muted);border-top:1px solid var(--s-line);position:relative;margin-top:60px}
.story-db .footer-glow{position:absolute;left:50%;top:-1px;transform:translateX(-50%);width:min(600px,80%);height:1px;background:linear-gradient(90deg,transparent,var(--s-gold),transparent);box-shadow:0 0 18px var(--s-gold)}
.story-db .footer-inner{padding:22px 24px;font-size:12px;gap:16px;flex-wrap:wrap}
.story-db .footer-inner a{color:var(--s-gold)}
.story-db .footer-sky{display:none}

/* ---------------- Admin ---------------- */
.story-db .success{color:#57e3a3}
.story-db .error{color:#ff8f86}
.story-db .import-dropzone{background:rgba(255,255,255,.03)!important;border-color:var(--s-line2)!important;color:var(--s-muted)}
.story-db .import-result-row,.story-db .import-error-item{background:var(--s-panel2)!important;border-color:var(--s-line)!important;color:var(--s-text)!important}
.story-db .wm-admin-table td,.story-db .wm-admin-table th{border-color:var(--s-line)!important}

/* ---------------- Light-surface fallbacks (สไตล์ inline/ค่าคงที่ใน app.css) ---------------- */
.story-db [style*="background:#fff"],.story-db [style*="background: #fff"],.story-db [style*="background:white"]{background:var(--s-panel)!important}

/* ---------------- Responsive ---------------- */
@media (max-width:1100px){
  .story-db .nav-search{display:none}
}
@media (max-width:900px){
  .story-db .topbar{height:64px}
  .story-db .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;margin-left:auto;width:42px;height:42px;border-radius:10px;border:1px solid var(--s-line);background:rgba(255,255,255,.04);cursor:pointer;padding:0 10px}
  .story-db .nav-toggle span{display:block;height:2px;border-radius:2px;background:var(--s-gold)}
  .story-db .nav nav{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;padding:10px 16px 16px;background:rgba(15,10,22,.97);border-bottom:1px solid var(--s-line);height:auto}
  .story-db .nav nav.open{display:flex}
  .story-db .nav nav a{padding:12px 14px;display:flex;justify-content:space-between;align-items:center}
  .story-db .nav nav a small{display:inline}
  .story-db .nav nav a.on:after{display:none}
  .story-db .brand img{height:38px}
  .story-db .hero.story-hero{min-height:auto;align-items:flex-end}
  .story-db .story-hero-art{width:100%;opacity:.35;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 95%);mask-image:linear-gradient(180deg,#000 30%,transparent 95%)}
  .story-db .story-hero .hero-center{padding:56px 0 50px;text-align:center;margin:auto}
  .story-db .story-hero .searchbox{margin:auto}
  .story-db .hero-quick{justify-content:center}
  .story-db .hero h1{font-size:34px}
  .story-db .page-hero h1{font-size:28px}
}
@media (max-width:520px){
  .story-db .brand-text{display:none}
  .story-db .searchbox button{padding:0 14px}
}

/* ---------------- Overrides for !important rules in app.css ---------------- */
.story-db .hero.story-hero{background:linear-gradient(90deg,#120b1a 0%,#1a0f22 45%,#2a0f17 100%)!important;background-image:linear-gradient(90deg,#120b1a 0%,#1a0f22 45%,#2a0f17 100%)!important}
.story-db .hero.story-hero::before{content:""!important;display:block!important;position:absolute;inset:auto 0 0 0;height:140px;background:linear-gradient(transparent,var(--s-bg))!important;z-index:1;pointer-events:none}
.story-db .story-hero .hero-center h1{color:var(--s-text)!important;text-shadow:0 4px 24px rgba(0,0,0,.65)!important}
.story-db .story-hero .hero-center h1 span{color:var(--s-gold)!important;font-size:inherit;text-shadow:0 0 28px rgba(242,199,110,.35)!important;background:none!important}
.story-db .story-hero .hero-center p{color:var(--s-muted)!important}
.story-db .story-hero .hero-center .eyebrow{background:rgba(242,199,110,.08)!important}
.story-db .map-button{background:rgba(242,199,110,.1);border:1px solid var(--s-line2);color:var(--s-gold);border-radius:12px}
.story-db .map-button:hover{background:rgba(242,199,110,.18)}
.story-db .popular-grid a{border-right:1px solid var(--s-line)}
.story-db .popular-grid a:last-child{border-right:0}
.story-db .popular-grid a:hover{background:rgba(242,199,110,.05)}
.story-db .popular-grid small{color:var(--s-dim)}
.story-db .status-box>b{color:#57e3a3}
.story-db .status-box small{color:var(--s-muted)}
.story-db .world-map-hover-name,.story-db .home-map-hover-name{background:rgba(15,10,22,.95)!important;border:1px solid var(--s-line2)}
.story-db .home-map-frame-v24{box-shadow:0 0 0 1px rgba(242,199,110,.5),0 4px 10px rgba(0,0,0,.5)!important}
.story-db .monster-attributes>div{background:var(--s-panel2);border:1px solid var(--s-line)}
.story-db .monster-attributes span{color:var(--s-dim)}
.story-db .monster-attributes b{color:var(--s-gold)}
.story-db .raw-script-details summary{color:var(--s-gold)}
.story-db .map-info-card{background:var(--s-panel)}
.story-db .map-info-meta span{background:rgba(242,199,110,.1);color:var(--s-gold)}
.story-db .map-monster-head span{color:var(--s-muted)}
.story-db .empty-state{color:var(--s-muted)}
@media (max-width:900px){
  .story-db .nav nav{background:#120c1b!important;box-shadow:0 20px 40px -10px #000}
  .story-db .nav nav a small{background:none!important;padding:0!important;border:0!important}
}