.sonel-mod-scene.game-scene { height: 536px; padding: 28px; background: linear-gradient(#07101b99,#070d16c9),url('media/sword.jpg') center/cover; }
.sonel-mod-gui { --mod-accent:#f97316; --mod-soft:#fb923c; font-family: Inter,Arial,sans-serif; width: min(100%,795px); height:468px; background:#0c0e15; border:1.5px solid #182638; border-radius:21px; box-shadow:0 24px 60px #0009; color:#f5f8fc; overflow:hidden; text-align:left; isolation:isolate; }
.sonel-mod-gui *, .sonel-mod-gui *::before, .sonel-mod-gui *::after { box-sizing:border-box; font-family:inherit; letter-spacing:normal; }
.mod-gui-top { height:45px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid #121e2c; gap:16px; }
.mod-brand { display:flex; align-items:center; gap:13px; flex-shrink:0; }
.mod-brand img { width:25.5px; height:25.5px; object-fit:contain; }
.mod-brand strong { display:block; font-size:13px; font-weight:700; line-height:16px; color:white; }
.mod-brand small { display:block; font-size:9.3px; color:var(--mod-accent); line-height:14px; }
.mod-search { display:flex; align-items:center; gap:8px; height:30px; width:217px; border:1px solid #182638; border-radius:9px; background:#0b1420; padding:0 9px; color:#5e738d; }
.mod-search:focus-within { border-color:var(--mod-accent); }
.mod-search input { width:100%; min-width:0; background:transparent; border:0; outline:0; color:#f0f6fc; font-size:10.5px; padding:0; }
.mod-search input::placeholder { color:#586b82; }
.mod-gui-body { display:grid; grid-template-columns:151.5px 1fr; height:calc(100% - 45px); }
.mod-sidebar { padding:9px; border-right:1px solid #121e2c; overflow-y:auto; overscroll-behavior:contain; }
.mod-nav-label { display:block; color:#6b7d96; font-size:9px; font-weight:600; padding:3px 4px 7px; }
.mod-nav-label.client { margin-top:9px; }
.mod-nav-button { position:relative; display:flex; align-items:center; gap:10px; width:100%; height:28.5px; border:1px solid transparent; border-radius:7.5px; margin-bottom:3px; background:transparent; color:#8c9cb5; padding:0 9px; font-size:10.8px; font-weight:600; cursor:pointer; text-align:left; }
.mod-nav-button:hover { background:#101a26; color:#fff; }
.mod-nav-button.active { border-color:var(--mod-accent); background:#10131e; color:white; box-shadow:0 0 9px color-mix(in srgb,var(--mod-accent) 18%,transparent); }
.mod-nav-button.active::before { content:''; position:absolute; left:-3px; top:5px; width:5px; height:18px; border-radius:4px; background:var(--mod-accent); box-shadow:0 0 8px var(--mod-accent); }
.mod-nav-button .mod-nav-icon { width:14px; display:inline-grid; place-items:center; font-size:12px; flex-shrink:0; }
.mod-nav-button .mod-nav-icon img { width:14px; height:14px; image-rendering:pixelated; }
.mod-nav-count { margin-left:auto; font-weight:400; font-size:9.75px; color:#5e7382; }
.mod-nav-button.active .mod-nav-count { color:#c6cbd6; }
.mod-content { padding:9px 12px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--mod-accent) transparent; }
.mod-module-grid { display:grid; grid-template-columns:repeat(var(--mod-columns,2),minmax(0,1fr)); gap:6px; align-items:start; }
.mod-module-card { position:relative; min-width:0; height:44px; border-radius:9px; background:#0b1420; padding:7px 10.5px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-content:start; gap:5px; }
.mod-module-card:hover { background:#0f1b2c; }
.mod-module-card.is-on::before { content:''; position:absolute; left:2px; top:9px; height:26px; width:3px; border-radius:3px; background:var(--mod-accent); box-shadow:0 0 5px var(--mod-accent); }
.mod-module-name { border:0; background:none; text-align:left; color:#f5f8fc; font-size:12.75px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; padding:0; min-width:0; }
.mod-key { align-self:start; color:#677587; background:#15202d; border:1px solid #263548; border-radius:4px; font-size:8.7px; padding:1px 4px; line-height:12px; }
.mod-toggle { position:relative; width:36px; height:18px; border:0; border-radius:9px; background:#16202e; padding:0; cursor:pointer; }
.mod-toggle::after { content:''; position:absolute; width:11px; height:11px; top:3.5px; left:3px; border-radius:50%; background:#5a6a80; transition:transform .12s; }
.mod-toggle[aria-pressed=true] { background:var(--mod-accent); }
.mod-toggle[aria-pressed=true]::after { transform:translateX(19px); background:white; }
.mod-module-description { position:absolute; top:25px; left:10.5px; right:10.5px; display:block; color:#5e738d; font-size:9.75px; line-height:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.mod-module-name { line-height:15px; }
.mod-content h4 { font-size:16px; margin:2px 0 5px; color:#f5f8fc; }
.mod-page-note { color:#8a9db4; font-size:10px; margin-bottom:14px; }
.mod-setting-card { background:#0b1420; border:1px solid #162334; border-radius:9px; margin-bottom:6px; padding:12px 15px; }
.mod-setting-card strong { display:block; color:#f5f8fc; font-size:11px; margin-bottom:7px; }
.mod-choice { background:#16202e; border:1px solid #24344a; color:#a0b2c8; border-radius:6px; padding:5px 10px; font-size:10px; cursor:pointer; margin:0 5px 4px 0; }
.mod-choice.active { background:var(--mod-accent); color:white; border-color:var(--mod-accent); }
.mod-themes { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.mod-theme { text-align:left; position:relative; padding:12px; min-height:66px; border:1px solid #182638; border-radius:10px; background:#0b1420; color:white; cursor:pointer; }
.mod-theme.active { border-color:var(--mod-accent); }
.mod-theme strong { display:block; font-size:11px; }
.mod-theme small { display:block; font-size:8.7px; color:#7e8b9e; margin-top:5px; }
.mod-theme i { position:absolute; right:10px; top:15px; width:10px; height:30px; border-radius:6px; background:var(--swatch); }
.sonel-mod-gui button:focus-visible { outline:2px solid var(--mod-soft); outline-offset:2px; }
.mod-inline-settings { grid-column:1/-1; background:#0b1420; padding:12px; border:1px solid #24344a; border-radius:9px; font-size:11px; }
.mod-inline-settings button { float:right; }
.category-gameplay.detail-art { height:auto; min-height:230px; display:flex; align-items:center; background:#05070b; }
.category-gameplay video { display:block; width:100%; height:auto; aspect-ratio:16/9; max-height:360px; object-fit:contain; }
.category-video-empty { width:100%; padding:35px; text-align:center; color:var(--text-muted); font-size:12px; }
.category-video-empty span { display:block; font-size:42px; margin-bottom:16px; }
.category-gameplay [hidden] { display:none!important; }
@media(max-width:600px) {
  .zone-1-inner-content { padding-left:8px; padding-right:8px; }
  #interface.wrap.section { padding-left:6px; padding-right:6px; }
  .sonel-mod-scene.game-scene { height:450px; padding:12px 6px; }
  .sonel-mod-gui { height:420px; border-radius:14px; }
  .mod-gui-top { height:46px; padding:0 9px; gap:8px; }
  .mod-brand { gap:6px; }
  .mod-brand strong { font-size:11px; }
  .mod-search { width:42%; padding:0 5px; gap:2px; }
  .mod-search input { font-size:9px; }
  .mod-gui-body { grid-template-columns:100px 1fr; height:calc(100% - 46px); }
  .mod-sidebar { padding:7px 5px; }
  .mod-nav-button { font-size:9px; gap:5px; padding:0 4px; }
  .mod-nav-count { font-size:8px; }
  .mod-content { padding:8px 6px; }
  .mod-module-grid { grid-template-columns:1fr; }
  .mod-module-name { font-size:11px; }
  .mod-key { display:none; }
  .mod-toggle { margin-left:auto; }
  .mod-module-card { grid-template-columns:minmax(0,1fr) auto; padding:7px 8px; }
  .mod-module-description { font-size:9px; }
  .mod-themes { grid-template-columns:1fr; }
  .category-gameplay.detail-art { min-height:160px; }
}