/* Base + theme */
    html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}
    /* Light theme palette: milk white + warm beige */
    :root{--bg1:#f8f7f3;--bg2:#e6e1d8;--text:#222;--muted:#555;--elev:rgba(255,255,255,.85);--shadow:rgba(0,0,0,.15);--accent1:#ff7aa2;--accent2:#ffb86b}
    html[data-theme="dark"]{--bg1:#0f1115;--bg2:#1a1f29;--text:#e6e6e6;--muted:#b9c0cf;--elev:rgba(24,28,37,.75);--shadow:rgba(0,0,0,.4);--accent1:#6aa2ff;--accent2:#ff6ad5}
    html[data-restricted="on"] .nsfw{display:none!important}

    body{font-family:"Space Mono",monospace;margin:0;color:var(--text);background:linear-gradient(to bottom,var(--bg1),var(--bg2));min-height:100vh}

    /* Top bar */
    .topbar{position:fixed;top:0;left:0;right:0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:var(--elev);box-shadow:0 4px 16px var(--shadow);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:1000}
    .left,.right{display:flex;align-items:center;gap:12px}
    /* Title layout: center slot flexes; sides stay snug */
    .left, .right { flex: 0 0 auto; }
    .center { flex: 1 1 auto; display: flex; justify-content: center; padding: 0 8px; }
    .title { margin: 0; font-weight: 700; font-size: clamp(16px, 2.2vw, 22px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: var(--text); }
    /* Logo */
    .title-logo { display:block; width: clamp(180px, 40vw, 520px); height: 44px; background: center/contain no-repeat; }
    /* Light theme logo */
    .title-logo { background-image: url('../Images/Black Theme.png'); }
    /* Dark theme logo */
    html[data-theme="dark"] .title-logo { background-image: url('../Images/White Theme.png'); }
    @media (max-width: 360px) { .title { display: none; } }
.content{padding:72px 12px 24px}

    /* ===== MOBILE OVERLAY MENU ===== */
    @media (min-width: 769px) {
      .menu-btn,
      .mobile-menu,
      .menu-backdrop { display: none; }
    }

    .menu-btn {
      position: fixed;
      top: 6px;
      left: 14px;
      z-index: 1100;
      background:#fff;
      color:#000;
      border:1px solid rgba(0,0,0,.08);
      border-radius:22px;
      padding: 12px 18px;
      font-size: 14px;
      font-weight:400;
      cursor: pointer;
      box-shadow: 0 8px 16px var(--shadow);
      display:none;
    }
    html[data-theme="dark"] .menu-btn{
      background:#1e2430;
      color:#e6e6e6;
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 8px 16px rgba(0,0,0,.6);
    }

    .mobile-menu {
      position: fixed;
      top: 12vh;
      left: 50%;
      transform: translate(-50%, -12px) scale(.97);
      width: min(92vw, 520px);
      max-height: 80vh;
      overflow-y: auto;
      background: rgba(255,255,255,.94);
      color: #000;
      backdrop-filter: blur(14px);
      border-radius: 18px;
      padding: 12px 14px 10px;
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      box-shadow: 0 30px 70px rgba(0,0,0,.28);
      border: 1px solid rgba(0,0,0,.06);
      transition: transform .25s ease, opacity .25s ease;
    }
    .mobile-menu.open {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, 0) scale(1);
    }
    html[data-theme="dark"] .mobile-menu {
      background: rgba(26,30,40,.92);
      color: #e9eaed;
      border-color: rgba(255,255,255,.07);
      box-shadow: 0 30px 70px rgba(0,0,0,.45);
    }

    .mobile-menu nav { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 6px; }
    .mobile-menu .mobile-section {
      margin: 12px 0 4px;
      font-size: 13px;
      letter-spacing: .02em;
      color: #7a7a7a;
      text-transform: none;
    }
    html[data-theme="dark"] .mobile-menu .mobile-section { color: #98a1b3; }

    .mobile-menu .mobile-link {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border-radius: 12px;
      color: var(--text);
      text-decoration: none;
      transition: background .15s ease, transform .12s ease;
      background: transparent;
      border: none;
      width: 100%;
      font: inherit;
      text-align: left;
    }
    .mobile-menu .mobile-link i { width: 18px; text-align: center; opacity: .8; }
    .mobile-menu .mobile-link:hover { background: rgba(0,0,0,.06); }
    .mobile-menu .mobile-link.active { background: rgba(0,0,0,.08); }
    html[data-theme="dark"] .mobile-menu .mobile-link:hover { background: rgba(255,255,255,.06); }
    html[data-theme="dark"] .mobile-menu .mobile-link.active { background: rgba(255,255,255,.08); }

    .mobile-menu .hint {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: #7a7a7a;
      padding: 10px 2px 2px;
      border-top: 1px solid rgba(0,0,0,.06);
      margin-top: 8px;
    }
    .mobile-menu .keycap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 8px;
      border-radius: 8px;
      background: rgba(0,0,0,.06);
      color: inherit;
      font-weight: 700;
      font-size: 11px;
    }
    html[data-theme="dark"] .mobile-menu .hint { border-top-color: rgba(255,255,255,.07); color: #98a1b3; }
    html[data-theme="dark"] .mobile-menu .keycap { background: rgba(255,255,255,.1); }

    /* Backdrop */
    .menu-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
      z-index: 900;
      backdrop-filter: blur(6px);
    }
    .menu-backdrop.show {
      opacity: 1;
      pointer-events: auto;
    }

    .menu-open {
      overflow: hidden;
    }

    @media (max-width: 768px){
      .topbar .left,
      .topbar .right{
        display:none;
      }
      .menu-btn{
        display:block;
      }
    }


    /* Original menu styles from Dropdown-Menu-Test.html */
    .module .trigger{position:relative;box-shadow:0 8px 16px var(--shadow);border-radius:22px}
    .module .trigger span{font-weight:500;letter-spacing:0;font-size:16px;position:relative;background:#fff;color:#555;display:block;min-width:0;height:44px;padding:0 18px;z-index:1;cursor:pointer;border-radius:22px;transition:border-radius 350ms ease 700ms,color 700ms ease,min-width 350ms ease 700ms;display:flex;justify-content:flex-start;align-items:center}
    .module .trigger span em{font-style:normal;margin-right:5px;transform-origin:bottom;animation:waving 700ms infinite}
    @keyframes waving{0%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}100%{transform:rotate(-6deg)}}
    .module .trigger ul.sites{position:absolute;list-style:none;margin:0;padding:0;background:#fff;border-radius:0 0 22px 22px;font-size:14px;overflow:hidden;transform:scaleY(0);transform-origin:top;transition:transform 350ms ease 350ms}
    .module .trigger ul.sites a{opacity:0;transition:opacity 350ms ease 0ms}
    .module .trigger ul.sites li{top:0;left:0;width:220px;height:44px;padding:0 20px;z-index:0;position:relative;display:flex;justify-content:flex-start;align-items:center;border-left:0 solid #eee;transition:border-left 200ms ease 0ms}
    .module .trigger ul.sites li::before{content:"";width:100%;height:1px;background:linear-gradient(to right,#eee,#fcfcfc);position:absolute;top:0;left:0}
    .module .trigger ul.sites li:last-of-type{border-radius:0 0 22px 22px}
    .module .trigger ul.sites li a{text-decoration:none;color:black;position:absolute;width:100%;height:100%;display:flex;justify-content:flex-start;align-items:center}
    .module .trigger ul.sites li:hover{border-left:10px solid #eee}
    .module .trigger:hover span{min-width:220px;border-radius:22px 22px 0 0;transition:border-radius 350ms ease 0ms,color 700ms ease 700ms,min-width 350ms ease 0ms;color:#ccc}
    .module .trigger:hover ul.sites{transform:scaleY(1);transition:transform 350ms ease 350ms}
    .module .trigger:hover ul.sites a{opacity:1;transition:opacity 350ms ease 700ms}

    /* Dark mode overrides keeping original menu intact */
    html[data-theme="dark"] .module .trigger span{background:#1e2430;color:#e6e6e6}
    html[data-theme="dark"] .module .trigger ul.sites{background:#1e2430}
    html[data-theme="dark"] .module .trigger ul.sites li a{color:#e6e6e6}
    html[data-theme="dark"] .module .trigger ul.sites li::before{background:linear-gradient(to right,#2c3442,#1e2430)}
    html[data-theme="dark"] .module .trigger ul.sites li:hover{border-left:10px solid #2c3442}

    /* Optional below-bar title style (uncomment if used)
    .page-title { margin: 0 0 12px; text-align: center; font-weight: 700; font-size: clamp(20px, 6vw, 32px); }
    */

    /* Keep pill shape on hover for click toggles */
    .toggle-theme .trigger:hover span,.toggle-restricted .trigger:hover span{border-radius:22px;min-width:0;color:inherit}
    .toggle-theme .trigger span i{font-size:18px;line-height:1}
    /* Small reset link */
    .reset-age{font-size:12px;opacity:.7;background:transparent;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;padding:4px 6px}
    .reset-age:hover{opacity:1}
    /* Inline SVG theme icon */
    .theme-toggle .icon{width:18px;height:18px;fill:currentColor;vertical-align:middle}
    .theme-toggle .moon{display:none}
    html[data-theme="dark"] .theme-toggle .sun{display:none}
    html[data-theme="dark"] .theme-toggle .moon{display:inline}

    /* Age verification overlay */
    #age-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:2000}
    .age-modal{background:#fff;color:#111;border-radius:16px;padding:20px;width:min(92vw,460px);box-shadow:0 10px 30px rgba(0,0,0,.3);text-align:center}
    .age-modal h2{margin:0 0 8px}
    .age-modal .hint{margin:0;color:#555;font-size:.95rem}
    .age-modal .actions{display:flex;gap:10px;justify-content:center;margin-top:16px}
    .age-modal .reason{margin-top:6px;color:#666;font-size:.9rem}
    .age-modal input[type="date"]{appearance:none;-webkit-appearance:none;border:1px solid #ccc;border-radius:8px;padding:10px 12px;font:inherit;color:#111;background:#fff}
    .age-modal button{cursor:pointer;border:none;border-radius:8px;padding:10px 14px;font-weight:600;background:#4caf50;color:#fff}
    .age-modal button:hover{filter:brightness(.95)}
    .age-modal .error{margin-top:10px;color:#d32f2f;font-weight:600;min-height:1.2em}
    html[data-theme="dark"] #age-overlay{background-color:rgba(0,0,0,.65)}
    html[data-theme="dark"] .age-modal{background:#1e1e1e;color:#e0e0e0}
    html[data-theme="dark"] .age-modal .reason{color:#b9c0cf}
    html[data-theme="dark"] .age-modal input[type="date"]{background:#262626;color:#e0e0e0;border-color:#444}

    /* Calculator modal (scoped) */
    /* Calculator overlay (reverted to original size/feel) */
    .calc-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .6s ease,backdrop-filter .6s ease;z-index:1100}
    .calc-overlay.visible{opacity:1;pointer-events:all}
    .calc-container{background:#fff;border-radius:20px;padding:20px 30px;width:min(96vw,420px);max-height:90vh;overflow:auto;position:fixed;top:50%;left:50%;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateY(90deg) scale(.8);opacity:0;transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .6s ease .2s;z-index:1102;box-shadow:0 10px 30px rgba(0,0,0,.3);overscroll-behavior:contain}
    .calc-container.visible{transform:translate(-50%,-50%) rotateY(0deg) scale(1);opacity:1}
    .calc-container h2{text-align:center;margin:0 0 10px;color:var(--text)}
    .calc-container .disclaimer{font-size:.85em;color:#000;background:#ffcbcb;padding:8px;border-radius:10px;margin-bottom:15px}
    .calc-container .base,.calc-container .base1{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:8px 0}
    .calc-container .base{font-weight:700;color:#ff5f5f;position:relative;cursor:help}
    .calc-container input[type="number"]{width:60px;padding:5px;text-align:center;border:1px solid #ccc;border-radius:6px}
    .calc-container .total{font-weight:700;font-size:1.3em;text-align:center;margin-top:15px}
    .calc-container .close-btn{background:#f44336;color:#fff;margin-top:15px;display:block;width:100%;font-weight:700;border:none;border-radius:8px;padding:10px;cursor:pointer;transition:all .3s ease}
    .calc-container .close-btn:hover{background:#e53935}
    html[data-theme="dark"] .calc-container{background:#1e1e1e;color:var(--text)}
    html[data-theme="dark"] .calc-container .disclaimer{background:rgba(255,255,255,.08);color:#ccc}
    html[data-theme="dark"] .calc-container input[type="number"]{background:#222;color:#eee;border:1px solid #555}
    .calc-tier-buttons{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px}
    .calc-tier-buttons .tier-btn{--calc-tier-bg:#fff;border:1px solid #e5e7eb;background:var(--calc-tier-bg);color:#111;padding:8px 12px;border-radius:10px;font-weight:700;cursor:pointer;box-shadow:0 6px 12px var(--shadow);transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease;position:relative;isolation:isolate}
    .calc-tier-buttons .tier-btn:hover{transform:translateY(-1px);box-shadow:0 10px 18px var(--shadow)}
    .calc-tier-buttons .tier-btn.active,
    .calc-tier-buttons .tier-btn:focus-visible{
      color:var(--text);
      outline:none;
    }
    .calc-tier-buttons .tier-btn:focus-visible{outline:none}
    html:not([data-theme="dark"]) .calc-tier-buttons .tier-btn.active,
    html:not([data-theme="dark"]) .calc-tier-buttons .tier-btn:focus-visible{
      background:linear-gradient(var(--calc-tier-bg),var(--calc-tier-bg)) padding-box,
                linear-gradient(90deg,var(--accent1),var(--accent2)) border-box;
      border:1px solid transparent;
      box-shadow:0 10px 22px var(--shadow);
    }
    html[data-theme="dark"] .calc-tier-buttons .tier-btn{--calc-tier-bg:#151923;background:var(--calc-tier-bg);color:#e6e6e6;border-color:#2c3442}
    html[data-theme="dark"] .calc-tier-buttons .tier-btn.active,
    html[data-theme="dark"] .calc-tier-buttons .tier-btn:focus-visible{
      border-color:#c45aec;
      background:linear-gradient(135deg,rgba(196,90,236,.15),rgba(255,255,255,.2));
      box-shadow:0 10px 22px rgba(196,90,236,.35);
    }
    /* Lock page scroll while calculator is open */
    body.calc-locked, html.calc-locked{overflow:hidden}

    /* Mini card style (like About box) */
    .mini-card{display:block;position:relative;background:var(--elev);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:12px 14px;border-radius:12px;box-shadow:0 6px 18px var(--shadow);width:min(92vw,460px);margin:16px auto;border:1px solid #e5e7eb;text-decoration:none;color:var(--text)}
    html[data-theme="dark"] .mini-card{border-color:#2c3442}
    .mini-card .mini-title{display:flex;align-items:center;gap:8px;font-weight:800}
    .mini-card .mini-title i{color:var(--text)}
    .mini-card .mini-sub{margin-top:6px;color:var(--muted)}
    .btn-link{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:9999px;background:#111;color:#fff;text-decoration:none;font-weight:700;border:1px solid #111;transition:transform .08s ease,box-shadow .12s ease}
    .btn-link:hover{transform:translateY(-1px);box-shadow:0 8px 18px var(--shadow)}
    html[data-theme="dark"] .btn-link{background:#000;border-color:#000}
    .btn-secondary{background:#fff;color:#111;border-color:#e5e7eb}
    html[data-theme="dark"] .btn-secondary{background:#151923;color:#e6e6e6;border-color:#2c3442}

    /* Quick links grid */
    .quick-links{max-width:1000px;margin:56px auto 16px}
    .quick-links h2{margin:22px 0 8px;font-size:1.1rem}
    .ql-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
    .ql-card{display:block;background:var(--elev);color:var(--text);text-decoration:none;border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:14px;box-shadow:0 10px 26px var(--shadow);transition:transform .12s ease,box-shadow .2s ease}
    .ql-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px var(--shadow)}
    .ql-card .ql-title{display:flex;align-items:center;gap:10px;font-weight:800}
    .ql-card .ql-title i{font-size:18px}
    .ql-card p{margin:6px 0 0;color:var(--muted)}

    /* Characters card styled like the reference */
    .ql-card--characters{
      position:relative;overflow:visible;
      min-height:clamp(180px,28vw,280px);
      padding:clamp(18px,2.6vw,28px) clamp(18px,2.6vw,28px) clamp(22px,3vw,32px) clamp(18px,2.6vw,28px);
      padding-right:clamp(200px,45%,420px);
      border-radius:22px;
      background:linear-gradient(var(--elev),var(--elev)) padding-box;
      box-shadow:0 18px 42px var(--shadow);
    }
    /* Make this card take its own row */
    .ql-grid .ql-card--characters{grid-column:1 / -1}
    /* Big heading + icon left */
    .ql-card--characters .ql-title{gap:14px;font-weight:900;font-size:clamp(28px,5.2vw,44px);letter-spacing:-.02em;line-height:1.05;margin-bottom:6px}
    .ql-card--characters .ql-title i{font-size:clamp(22px,4.2vw,34px);opacity:1;color:var(--text)}
    .ql-card--characters p{font-size:clamp(14px,2.2vw,20px);margin-top:8px}
    .ql-card--characters p::after{content:" \2192"}
    /* Right character preview with soft bottom fade */
    .ql-card--characters .ql-preview{position:absolute;right:-8px;bottom:-6px;top:-6px;width:clamp(200px,42%,420px);display:flex;align-items:flex-end;justify-content:center;pointer-events:none;z-index:0}
    .ql-card--characters .ql-preview img{position:absolute;right:0;bottom:0;max-height:120%;max-width:100%;object-fit:contain;filter:drop-shadow(0 14px 28px var(--shadow));opacity:0;transition:opacity .5s ease, transform .25s ease;transform-origin:bottom right;
      -webkit-mask-image:linear-gradient(to bottom, #000 82%, rgba(0,0,0,0) 100%);
              mask-image:linear-gradient(to bottom, #000 82%, rgba(0,0,0,0) 100%);
    }
    .ql-card--characters .ql-preview::after{content:"";position:absolute;left:-10%;right:-6%;bottom:-14px;height:80px;pointer-events:none;filter:blur(12px);opacity:.35;
      background:radial-gradient(65% 100% at 50% 0%, rgba(0,0,0,.25), rgba(0,0,0,0) 70%)}
    /* Keep text above the artwork layer */
    .ql-card--characters .ql-title,
    .ql-card--characters p{position:relative;z-index:1}
    .ql-card--characters .ql-preview img.active{opacity:1}
    .ql-card--characters:hover{z-index:2}
    .ql-card--characters:hover .ql-preview img.active{transform:translateY(-2px) scale(1.03)}
    @media (max-width:640px){
      .ql-card--characters{padding-right:min(55vw,200px);min-height:220px}
      /* Keep the preview anchored and tall enough on phones so it doesn't vanish */
      .ql-card--characters .ql-preview{top:8px;bottom:8px;right:6px;width:min(52vw,200px);align-items:flex-end;justify-content:flex-end}
      .ql-card--characters .ql-preview img{max-height:120%;max-width:110%;right:0;left:auto}
    }
    @media (max-width:480px){
      /* Nudge character art right on very small screens to keep text clear */
      .ql-card--characters{padding-right:min(80vw,260px);}
      .ql-card--characters .ql-preview{right:-12px;width:min(70vw,260px);}
      .ql-card--characters .ql-preview img{max-width:130%;transform:translateX(18%);right:-6px;}
    }
    /* Infinite circular gallery (home) */
    .circle-gallery{max-width:1100px;margin:64px auto 26px; --cg-gap:16px}
    .cg-viewport{position:relative;overflow:hidden;
      -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, #000 7%, #000 93%, rgba(0,0,0,0) 100%);
              mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, #000 7%, #000 93%, rgba(0,0,0,0) 100%);
      -webkit-mask-mode:alpha; mask-mode:alpha;
    }
    .cg-rail{display:flex;align-items:center;width:max-content;padding:4px 0 10px;animation:cg-scroll 32s linear infinite;will-change:transform;gap:var(--cg-gap)}
    .cg-seq{display:flex;gap:var(--cg-gap)}
    @media (min-width: 900px){ .circle-gallery{ --cg-gap:24px } }
    .circle-gallery:hover .cg-rail{animation-play-state:paused}
    @keyframes cg-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--loopX, 50%)))}}
    .cg-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:clamp(160px,26vw,320px);border-radius:14px;background:var(--elev);border:1px solid rgba(0,0,0,.06);box-shadow:0 10px 26px var(--shadow);transition:transform .18s ease,box-shadow .2s ease;text-decoration:none}
    .cg-item:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 16px 36px var(--shadow)}
    .cg-item img{height:100%;width:auto;object-fit:contain;display:block;border-radius:12px}
    /* In SFW mode (restricted ON) hide NSFW via global rule above.
       In NSFW mode (restricted OFF) hide SFW items only within the home loop. */
    html[data-restricted="off"] .circle-gallery .sfw{display:none!important}

@media (max-width:768px){
  html,body{overflow-x:hidden;}
  .gallery{overflow:visible;}
  /* allow characters to pop out on tap */
  .character-card{overflow:visible;}
  .character-card img{object-fit:contain;}
}
@media (hover:none){
  /* Pop-out effect on tap/focus for mobile */
  .character-card::before{
    transition:border .2s ease, box-shadow .2s ease;
  }
  .character-card:active::before,
  .character-card:focus-visible::before{
    border:3px solid #ffd000;
    box-shadow:0 0 18px rgba(255,208,0,.6);
  }
  .character-card img{transform:none;}
  .character-card:active img.main,
  .character-card:focus-visible img.main{transform:translate(-6px,-10px) scale(1.1);filter:drop-shadow(0 14px 24px rgba(0,0,0,.45));}
  .character-card:active img.alt,
  .character-card:focus-visible img.alt{transform:translate(-6px,-10px) scale(1.22);filter:drop-shadow(0 14px 24px rgba(0,0,0,.45));}
}

    /* Hide Reset age button */
    .reset-age{display:none!important}

    /* Footer */
    footer{
  text-align:center;
  color:var(--muted);
  font-size:.85em;
}

/* Characters page gallery */
.gallery:not(.masonry){display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(160px,40vw,320px),1fr));justify-content:center;justify-items:center;gap:1rem;width:min(96%,1200px);padding:1rem 0;margin:clamp(56px,10vh,96px) auto 0}
.character-card{position:relative;width:clamp(160px,35vw,320px);aspect-ratio:6/10;overflow:visible;cursor:pointer;transition:transform .4s ease}
.character-card::before{content:"";position:absolute;inset:0;border-radius:.75rem;border:3px solid transparent;z-index:5;pointer-events:none;transition:border .3s ease,box-shadow .3s ease}
.character-card:hover::before{border:3px solid #ffd000;box-shadow:0 0 20px rgba(255,230,0,.6)}
.character-frame{position:absolute;inset:0;background:#000;box-shadow:inset 4px 4px 8px #0a0a0a,inset -4px -4px 8px #1a1a1a,0 8px 20px rgba(0,0,0,.5);border-radius:.75rem;z-index:1}
html:not([data-theme="dark"]) .character-frame{background:#e6ebf2;box-shadow:inset 3px 3px 8px #cfd6e0,inset -3px -3px 8px #f7f9fc,0 8px 20px rgba(15,23,42,.18)}
.character-card img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:.75rem;transition:transform .6s ease,opacity .6s ease,filter .6s ease;z-index:2;pointer-events:none}
.character-card[data-char-name="King"]:not(.character-card--info) img.main,
.character-card[data-char-name="King"]:not(.character-card--info) img.sfw-main{
  object-position:center 25% !important;
}
.character-card img.alt{object-fit:contain;opacity:0}
.character-card img.sfw-main,.character-card img.sfw-alt{display:none}
.character-card img.sfw-alt{object-fit:contain;opacity:0}
.character-name{position:absolute;bottom:70px;width:100%;text-align:center;color:#fff;font-weight:bold;letter-spacing:1px;text-shadow:0 2px 6px rgba(0,0,0,.7);z-index:5}
.character-card:hover img.main{transform:translate(20px,-15px) scale(1.10);opacity:0;filter:drop-shadow(0 20px 25px rgba(0,0,0,.7));z-index:3}
.character-card:hover img.alt{transform:translate(20px,-15px) scale(1.75);opacity:1;filter:drop-shadow(0 20px 25px rgba(0,0,0,.7));z-index:5}
.character-card--locked{cursor:not-allowed}
.character-card--locked:hover img.main,
.character-card--locked:hover img.alt{transform:none;opacity:1;filter:none}
html[data-restricted="on"] .character-card .main,
html[data-restricted="on"] .character-card .alt{display:none}
html[data-restricted="on"] .character-card .sfw-main,
html[data-restricted="on"] .character-card .sfw-alt{display:block}
html[data-restricted="on"] .character-card:hover .sfw-main{transform:translate(20px,-15px) scale(1.10);opacity:0;filter:drop-shadow(0 20px 25px rgba(0,0,0,.7));z-index:3}
html[data-restricted="on"] .character-card:hover .sfw-alt{transform:translate(20px,-15px) scale(1.75);opacity:1;filter:drop-shadow(0 20px 25px rgba(0,0,0,.7));z-index:5}

/* Characters page: category filters + grouped layout */
.characters-meta{width:min(96%,1200px);margin:8px auto 0}
.character-count{margin:0 0 8px;color:var(--muted);font-weight:700;font-size:.95rem;letter-spacing:.01em}
.characters-divider{height:1px;background:rgba(0,0,0,.22);border-radius:999px}
html[data-theme="dark"] .character-count{color:#c7cfdd}
html[data-theme="dark"] .characters-divider{background:rgba(255,255,255,.22)}
.characters-tools{width:min(96%,1200px);margin:12px auto 0;display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:end}
.characters-tool-label{display:block;font-size:.78rem;font-weight:700;color:var(--muted);margin:0 0 4px;letter-spacing:.02em}
.characters-search input,.characters-view select,.characters-category select{height:40px;border-radius:10px;border:1px solid rgba(0,0,0,.18);background:rgba(255,255,255,.86);color:var(--text);padding:0 12px;font:inherit}
.characters-search input{width:100%}
.characters-view select{min-width:140px}
.characters-view.is-locked select{opacity:.7;cursor:not-allowed}
.characters-view.is-locked .characters-tool-label::after{content:" (Locked)";font-size:.72rem;color:#8a4b4b}
.characters-category select{min-width:210px}
html[data-theme="dark"] .characters-tool-label{color:#c7cfdd}
html[data-theme="dark"] .characters-search input,
html[data-theme="dark"] .characters-view select,
html[data-theme="dark"] .characters-category select{background:rgba(24,28,37,.85);border-color:#2c3442;color:#e6e6e6}
html[data-theme="dark"] .characters-view.is-locked .characters-tool-label::after{color:#ff9ea5}
@media (max-width:700px){
  .characters-tools{grid-template-columns:1fr}
  .characters-view select,
  .characters-category select{width:100%}
}

.character-groups{width:min(96%,1200px);margin:16px auto 0}
.characters-admin{width:min(96%,1200px);margin:16px auto 0;padding:12px;border-radius:12px;background:var(--elev);border:1px solid rgba(0,0,0,.12)}
.characters-admin-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.characters-admin-title{margin:0;font-size:1rem}
.characters-admin-help{margin:0;color:var(--muted);font-size:.85rem}
.characters-admin-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.characters-admin-list{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px}
.characters-admin-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08)}
.characters-admin-item-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.characters-admin-item-text strong{font-size:.92rem;line-height:1.2}
.characters-admin-item-text small{color:var(--muted);font-size:.78rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.characters-admin-toggle{width:18px;height:18px;flex:0 0 auto}
html[data-theme="dark"] .characters-admin{border-color:#2c3442}
html[data-theme="dark"] .characters-admin-item{background:rgba(255,255,255,.04);border-color:#2c3442}
html[data-theme="dark"] .characters-admin-item-text small{color:#8f98ab}
.character-group{margin:0 0 30px}
.character-group + .character-group{
  border-top:1px solid rgba(0,0,0,.18);
  padding-top:30px;
  margin-top:24px;
}
html[data-theme="dark"] .character-group + .character-group{border-top-color:rgba(255,255,255,.22)}
.character-group-title{margin:0 0 10px;font-size:clamp(1.45rem,2.8vw,2.1rem);font-weight:900;letter-spacing:.01em}
.character-group .gallery:not(.masonry){margin:0 auto;padding:0}
.character-group .gallery:not(.masonry){grid-template-columns:repeat(auto-fit,minmax(clamp(140px,30vw,260px),1fr));justify-content:start;justify-items:start}
.character-group .character-card{width:clamp(140px,30vw,260px)}
html[data-card-view="info"] .character-group .gallery:not(.masonry){grid-template-columns:repeat(auto-fit,minmax(197.333px,197.333px))}
html[data-card-view="info"] .character-group .character-card{width:197.333px;height:288px}

/* Alternate info-style card view */
.character-card--info{aspect-ratio:auto;cursor:pointer;overflow:hidden;border-radius:.75rem;background:#f8fafc;border:1px solid rgba(15,23,42,.12);display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .2s ease}
.character-card--info:hover,
.character-card--info:focus-visible{transform:translateY(-2px);box-shadow:0 12px 22px rgba(0,0,0,.28),0 0 0 2px rgba(255,208,0,.7)}
.character-card--info.character-card--locked:hover,
.character-card--info.character-card--locked:focus-visible{transform:none;box-shadow:none}
.character-card--info::before{display:none}
.character-card--info .character-frame,.character-card--info .alt,.character-card--info .sfw-alt,.character-card--info .character-name{display:none!important}
.character-card--info .main,
.character-card--info .sfw-main{position:relative;display:block;width:100%;height:140px;object-fit:cover;object-position:center 0%;border-radius:.75rem .75rem 0 0;z-index:2;transform:none!important;opacity:1!important;filter:none!important}
.character-card--info[data-char-name="King"] .main,
.character-card--info[data-char-name="King"] .sfw-main{
  object-position:center -14px !important;
}
.character-card--info .main[src*="PH_info"][src*="Nude"],
.character-card--info .sfw-main[src*="PH_info"][src*="Nude"]{
  object-position:center -44px;
}
html[data-restricted="off"] .character-card--info .sfw-main{display:none!important}
html[data-restricted="on"] .character-card--info .main{display:none!important}
.character-card--info .character-info-body{padding:11px 10px 10px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:6px;min-height:0;overflow:hidden;margin-top:4px}
.character-info-title{margin:0;color:#0f172a;font-size:16px;font-weight:800;letter-spacing:.005em;line-height:1.15;overflow-wrap:anywhere;word-break:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.character-info-warning{color:#d9a441;font-size:.85em;vertical-align:middle}
.character-info-desc{margin:0;color:#334155;font-size:.75rem;line-height:1.28;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.character-info-date{margin:0;color:#64748b;font-size:.8rem}
.character-info-creator{margin:0;color:#64748b;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-theme="dark"] .character-card--info{background:#0f1115;border-color:#2c3442}
html[data-theme="dark"] .character-info-title{color:#f5f5f5}
html[data-theme="dark"] .character-info-desc{color:#c8cfdd}
html[data-theme="dark"] .character-info-date{color:#8f98ab}
html[data-theme="dark"] .character-info-creator{color:#8f98ab}
@media (max-width:700px){
  html[data-card-view="info"] .character-group .gallery:not(.masonry){
    grid-template-columns:1fr;
    justify-content:center;
    justify-items:center;
  }
  html[data-card-view="info"] .character-group .character-card{
    width:min(94vw,430px);
    height:auto;
    margin-inline:auto;
  }
  html[data-card-view="info"] .character-card--info .main,
  html[data-card-view="info"] .character-card--info .sfw-main{
    height:clamp(260px,68vw,430px);
  }
}

/* Character detail page */
.agent-hero{position:relative;width:min(96%,1220px);margin:14px auto 0;border-radius:18px;overflow:hidden;display:grid;grid-template-columns:minmax(260px,470px) 1fr;background:radial-gradient(120% 120% at 20% 20%,rgba(34,61,98,.25),rgba(7,12,22,.95));border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 38px rgba(0,0,0,.32)}
.agent-copy{padding:28px 22px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.agent-kicker{margin:0;color:#9fb0cb;font-size:.86rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.agent-copy h1{margin:0;color:#f4f8ff;font-size:clamp(2rem,6vw,3.6rem);font-weight:900;line-height:.95;letter-spacing:.01em;text-transform:uppercase}
.agent-description{margin:0;color:#d3deee;line-height:1.55;max-width:44ch}
.agent-meta{display:flex;flex-wrap:wrap;gap:8px}
.agent-meta-chip{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);color:#dbe5f5;border:1px solid rgba(255,255,255,.14);font-size:.84rem;font-weight:700}
.agent-meta-chip[hidden]{display:none}
.agent-art{
  min-height:310px;  min-height:310px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  overflow:hidden;
  border-left:0;
  position:relative;
}
.agent-art.has-mode-tabs{border-left:1px solid rgba(255,255,255,.1)}
.agent-art.has-side-mode-rail{padding-right:110px}
.agent-art img{
  width: 70%;
  height:auto;
  max-height:620px;
  object-fit:cover;
  object-position:center top;
  margin-left:auto;
  display:block;
}
.agent-art img.is-mode-fading{
  animation:character-detail-mode-fade .45s ease;
}
@keyframes character-detail-mode-fade{
  0%{opacity:.25;filter:blur(4px)}
  100%{opacity:1;filter:blur(0)}
}
/* Timed (auto-cycling) detail images can be styled independently here. */
#characterDetailWrap.is-timed-modes .agent-art img{
  width:100%;
  max-height:none;
  height:100%;
  object-fit:cover;
  object-position:center top;
  margin-left:0;
  margin-right:0;
}
/* Per-image override: keep this one fully visible without changing other images. */
#characterDetailWrap.is-timed-modes[data-mode-image="ph-info-nude-png"] .agent-art img{
  object-fit:contain;
  object-position:center center;
  transform:translateY(-24px);
}
.character-detail-modes{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 12px 8px;
  min-height:52px;
  align-items:center;
  background:rgba(15,17,21,.65);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.character-detail-mode-groups{display:none!important}
.character-detail-mode-source{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.72rem;
  font-weight:700;
  color:#b8c3d6;
  margin-left:auto;
  margin-right:0;
  order:99;
}
.character-detail-mode-source-select{
  height:28px;
  min-width:132px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(10,12,18,.86);
  color:#e7edf8;
  padding:0 8px;
  font:inherit;
}
.character-detail-modes[hidden]{
  display:none;
}
.character-detail-mode-progress{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:rgba(255,255,255,.16);
  overflow:hidden;
}
.character-detail-mode-progress-fill{
  display:block;
  height:100%;
  width:100%;
  transform-origin:left center;
  transform:scaleX(0);
  background:linear-gradient(90deg,#8fb4ff,#5f8eff);
}
.character-detail-mode-btn{
  height:40px;
  padding:0 14px;
  border-radius:0;
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:#b8c3d6;
  font-weight:600;
  cursor:pointer;
}
.character-detail-mode-btn.is-active{
  background:transparent;
  border-bottom-color:#8fb4ff;
  color:#fff;
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-thickness:2px;
}
html:not([data-theme="dark"]) .character-detail-modes{
  background:#f1efec;
  border-color:rgba(15,23,42,.16);
}
html:not([data-theme="dark"]) .character-detail-mode-source{color:#7a6a52}
html:not([data-theme="dark"]) .character-detail-mode-source-select{
  color:#4b3f2d;
  background:#fff;
  border-color:rgba(15,23,42,.2);
}
html:not([data-theme="dark"]) .character-detail-mode-btn{color:#7a6a52}
html:not([data-theme="dark"]) .character-detail-mode-btn.is-active{
  background:transparent;
  border-bottom-color:#5f8eff;
  color:#4b3f2d;
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-thickness:2px;
}
html:not([data-theme="dark"]) .character-detail-mode-progress{background:rgba(15,23,42,.12)}
.character-detail-side-modes{
  display:none !important;
  position:absolute;
  right:10px;
  top:62px;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.character-detail-side-modes[hidden]{
  display:none;
}
.character-detail-side-mode-btn{
  width:92px;
  padding:6px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(15,17,21,.62);
  color:#e6edf8;
  display:flex;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
}
.character-detail-side-mode-thumb{
  width:100%;
  height:86px;
  object-fit:cover;
  object-position:center top;
  border-radius:8px;
  display:block;
}
.character-detail-side-mode-label{
  font-size:.72rem;
  font-weight:700;
  text-align:center;
  letter-spacing:.02em;
}
.character-detail-side-mode-btn.is-active{
  border-color:#8fb4ff;
  box-shadow:0 0 0 2px rgba(143,180,255,.35);
}
html:not([data-theme="dark"]) .character-detail-side-mode-btn{
  background:rgba(255,255,255,.92);
  border-color:rgba(15,23,42,.2);
  color:#1f2937;
}
html:not([data-theme="dark"]) .character-detail-side-mode-btn.is-active{
  border-color:#5f8eff;
  box-shadow:0 0 0 2px rgba(95,142,255,.2);
}

.agent-credits{width:min(96%,1220px);margin:16px auto 0;padding:20px 22px;border-radius:16px;background:linear-gradient(160deg,rgba(10,22,43,.95),rgba(8,15,30,.88));border:1px solid rgba(255,255,255,.1);box-shadow:0 14px 30px rgba(0,0,0,.28)}
.agent-credits h2{margin:0 0 14px;color:#f3f7ff;font-size:clamp(1.5rem,4.2vw,2.7rem);line-height:1;text-transform:uppercase}
.credits-detail{padding:16px;border-radius:14px;background:rgba(5,10,18,.58);border:1px solid rgba(255,255,255,.1)}
.credits-detail p{margin:0;color:#cbd7ea;line-height:1.55}
.credits-detail p + p{margin-top:10px}
.credits-detail strong{color:#f3f7ff}
.credits-detail a{color:#9ec5ff;word-break:break-word}
.credits-detail-split{
  display:grid;
  grid-template-columns:minmax(260px,1fr) 1px minmax(260px,1fr);
  gap:16px;
  align-items:start;
}
.credits-col{min-width:0}
.credits-divider{
  width:1px;
  height:100%;
  background:rgba(255,255,255,.16);
}
.credits-divider[hidden]{display:none}
.credits-col--secondary[hidden]{display:none}
.character-editor-socials-wrap{margin-top:12px}
.character-editor-socials-wrap p + p{margin-top:8px}
.credits-detail a.model-source-btn{
  display:inline-flex;
  width:40px;
  height:40px;
  margin-left:8px;
  padding:0;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#0f1115;
  border:1px solid #2c3442;
  text-decoration:none;
  vertical-align:middle;
  transition:transform .08s ease,box-shadow .12s ease,border-color .12s ease;
}
.credits-detail a.model-source-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px var(--shadow);
  border-color:#475569;
}
.model-source-icon{display:inline-block;width:30px;height:30px;vertical-align:middle}
.model-source-fa{font-size:1.2rem;line-height:1;color:#f8fafc}
.model-source-fa--patreon{color:#ff6a6a}
.character-socials-wrap{margin-top:12px}
.character-socials{margin-top:6px}
.character-socials-empty{color:#94a3b8;font-size:.92rem}
.character-socials .social-btn{
  width:40px;
  height:40px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#0f1115;
  border:1px solid #2c3442;
  color:#e5e7eb;
}
.character-socials .social-btn i{font-size:1.25rem;line-height:1}
.character-socials .social-btn--x i{color:#fff}
.character-socials .social-btn--bluesky i{color:#45a9ff}
.character-socials .social-btn--patreon i{color:#ff6a6a}
.character-socials .social-btn--discord i{color:#8ea2ff}
.character-socials .social-btn--instagram i{color:#ff77b3}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

html:not([data-theme="dark"]) .agent-hero{background:radial-gradient(120% 120% at 20% 20%,rgba(194,219,255,.8),rgba(228,236,250,.98));border-color:rgba(15,23,42,.12);box-shadow:0 18px 38px rgba(15,23,42,.12)}
html:not([data-theme="dark"]) .agent-kicker{color:#475569}
html:not([data-theme="dark"]) .agent-copy h1{color:#0f172a}
html:not([data-theme="dark"]) .agent-description{color:#334155}
html:not([data-theme="dark"]) .agent-meta-chip{background:rgba(15,23,42,.06);color:#334155;border-color:rgba(15,23,42,.12)}
html:not([data-theme="dark"]) .agent-art{border-left-color:rgba(15,23,42,.12)}
html:not([data-theme="dark"]) .agent-credits{background:linear-gradient(160deg,#eaf1ff,#dce8ff);border-color:rgba(15,23,42,.12);box-shadow:0 14px 30px rgba(15,23,42,.1)}
html:not([data-theme="dark"]) .agent-credits h2{color:#0f172a}
html:not([data-theme="dark"]) .credits-detail{background:rgba(255,255,255,.78);border-color:rgba(15,23,42,.12)}
html:not([data-theme="dark"]) .credits-detail p{color:#334155}
html:not([data-theme="dark"]) .credits-detail strong{color:#0f172a}
html:not([data-theme="dark"]) .credits-detail a{color:#1d4ed8}
html:not([data-theme="dark"]) .credits-divider{background:rgba(15,23,42,.16)}
html:not([data-theme="dark"]) .credits-detail a.model-source-btn{
  background:#0f172a;
  border-color:#0f172a;
}
html:not([data-theme="dark"]) .character-socials-empty{color:#64748b}
html:not([data-theme="dark"]) .character-socials .social-btn{
  background:#0f172a;
  border-color:#0f172a;
  color:#f8fafc;
}

@media (max-width:920px){
  .agent-hero{grid-template-columns:1fr}
  .agent-art{min-height:230px;order:-1}
  .agent-art.has-side-mode-rail{
    padding-right:0;
    padding-bottom:108px;
  }
  .character-detail-side-modes{
    top:auto;
    right:10px;
    left:10px;
    bottom:10px;
    flex-direction:row;
  }
  .character-detail-side-mode-btn{
    flex:1;
    width:auto;
    flex-direction:row;
    align-items:center;
  }
  .character-detail-side-mode-thumb{
    width:48px;
    height:64px;
    flex:0 0 auto;
  }
  .character-detail-side-mode-label{
    text-align:left;
    font-size:.78rem;
  }
}
@media (max-width:640px){
  .credits-detail-split{grid-template-columns:1fr;gap:12px}
  .credits-divider{width:100%;height:1px}
  .agent-copy{padding:16px}
  .agent-description{font-size:.95rem}
  .agent-meta-chip{font-size:.8rem;padding:7px 10px}
  .agent-art{min-height:180px}
  .agent-credits{padding:14px}
}

.character-name{bottom:0;display:flex;align-items:center;justify-content:flex-start;padding:10px 12px;background:#f2f0eb;color:#0f172a;text-align:left;text-transform:uppercase;font-size:.92rem;line-height:1.1;letter-spacing:.02em;text-shadow:none;border-radius:0 0 .75rem .75rem;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.character-name-warning{margin-left:6px;color:#d9a441;font-size:.92em;vertical-align:baseline}
html[data-theme="dark"] .character-name{background:#e6e1d8;color:#0f172a}

.empty-characters{padding:18px;border-radius:12px;background:var(--elev);border:1px solid rgba(0,0,0,.08);color:var(--muted)}
html[data-theme="dark"] .empty-characters{border-color:#2c3442}

/* Contact page */
.logo-center{display:flex;justify-content:center;align-items:center;flex-direction:column;margin:10px 0 12px}
.contact-logo{width:clamp(140px,28vw,240px);height:auto;border-radius:50%;object-fit:cover;border:3px solid rgba(0,0,0,.08);filter:drop-shadow(0 8px 16px var(--shadow));background:transparent}
.contact-logo--dark{display:none}
html[data-theme="dark"] .contact-logo--light{display:none}
html[data-theme="dark"] .contact-logo--dark{display:block}
html[data-theme="dark"] .contact-logo{border-color:rgba(230,230,230,.35)}
.family-status{position:relative;margin-top:10px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--elev);color:var(--text);box-shadow:0 4px 12px var(--shadow)}
.family-status .fs-dot{width:12px;height:12px;border-radius:50%;background:var(--fs-color,#2ecc71);box-shadow:0 0 0 2px rgba(255,255,255,.6) inset,0 0 8px var(--fs-color,#2ecc71)}
.fs-good{--fs-color:#2ecc71}
.fs-emergency{--fs-color:#f1c40f}
.fs-death{--fs-color:#e74c3c}
.family-status .fs-tooltip{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#fff;color:#111;border:1px solid rgba(0,0,0,.12);padding:6px 10px;border-radius:8px;box-shadow:0 6px 18px var(--shadow);white-space:nowrap;font-weight:600;opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:5}
html[data-theme="dark"] .family-status .fs-tooltip{background:#1e2430;color:#e6e6e6;border-color:#2c3442}
.family-status:hover .fs-tooltip,.family-status:focus-within .fs-tooltip{opacity:1}
.social-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.social-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:999px;text-decoration:none;font-weight:700;border:1px solid #e5e7eb;background:#fff;color:#111;transition:transform .08s ease,box-shadow .12s ease,background .12s}
.social-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px var(--shadow)}
.social-btn--x{background:#111;color:#fff;border-color:#111}
.social-btn--bluesky{background:linear-gradient(135deg,#0099ff,#66ccff);color:#fff;border-color:transparent}
.social-btn .icon{width:16px;height:16px;fill:currentColor}
html[data-theme="dark"] .social-btn{background:#151923;color:#e6e6e6;border-color:#2c3442}
html[data-theme="dark"] .social-btn--x{background:#000;border-color:#000}
html[data-theme="dark"] .social-btn--bluesky{filter:saturate(1.1)}
html[data-theme="dark"] .social-links:not(.character-socials) .social-btn.social-btn--x{background:#000;color:#fff;border-color:#000}
html[data-theme="dark"] .social-links:not(.character-socials) .social-btn.social-btn--bluesky{background:#1083fe;color:#fff;border-color:#1083fe}
html[data-theme="dark"] .social-links:not(.character-socials) .social-btn.social-btn--patreon{background:#ff424d;color:#fff;border-color:#ff424d}
html[data-theme="dark"] .social-links:not(.character-socials) .social-btn.social-btn--discord{background:#5865f2;color:#fff;border-color:#5865f2}
html[data-theme="dark"] .social-links:not(.character-socials) .social-btn.social-btn--instagram{background:linear-gradient(135deg,#fdc468,#df4996,#8a3ab9);color:#fff;border-color:transparent}
html[data-theme="dark"] .credits-detail a.model-source-btn{background:#0f1115;border-color:#2c3442}
html[data-theme="dark"] .character-socials .social-btn{background:#0f1115;border-color:#2c3442;color:#e5e7eb}
html[data-theme="dark"] .character-socials .social-btn--x i{color:#fff}
html[data-theme="dark"] .character-socials .social-btn--bluesky i{color:#45a9ff}
html[data-theme="dark"] .character-socials .social-btn--patreon i{color:#ff6a6a}
html[data-theme="dark"] .character-socials .social-btn--discord i{color:#8ea2ff}
html[data-theme="dark"] .character-socials .social-btn--instagram i{color:#ff77b3}
.email-display{margin-top:8px}
.email-display code{display:inline-block;padding:6px 8px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#111}
html[data-theme="dark"] .email-display code{background:#151923;color:#e6e6e6;border-color:#2c3442}
.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;width:min(96%,1000px);margin:16px auto}
.status-card{position:relative;background:var(--elev);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid transparent;border-radius:12px;overflow:hidden;padding:14px;box-shadow:0 6px 18px var(--shadow);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.status-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:.18;background:conic-gradient(from 180deg at 50% 120%,var(--accent1),var(--accent2),var(--accent1));filter:blur(24px)}
.status-card h3{margin:0 0 8px;display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.status-card h3::after{display:none}
.status-card h3 .icon{width:18px;height:18px;fill:var(--text);transition:transform .25s ease}
.status-card h3 .bi-at{width:20px;height:20px}
.status-card:hover,.status-card:focus-within{transform:translateY(-4px);box-shadow:0 14px 32px var(--shadow)}
.status-card:hover h3 .icon,.status-card:focus-within h3 .icon{transform:scale(1.08) rotate(-6deg)}
.status-row{display:flex;align-items:center;gap:10px}
.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.status-dot.online{background:#2ecc71}
.status-dot.offline{background:#e74c3c}
.status-dot.idle{background:#f1c40f}
.status-dot.unknown{background:#bdc3c7}
.status-live{margin-left:auto;padding:2px 8px;border-radius:999px;font-size:.72rem;font-weight:700;line-height:1.2;border:1px solid transparent}
.status-live--connecting{color:#8b5cf6;background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.3)}
.status-live--live{color:#16a34a;background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.32)}
.status-live--reconnecting{color:#f59e0b;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.32)}
.status-note{margin-top:8px;color:var(--muted);font-size:.9rem}
.status-kv{margin-top:6px;color:var(--text);font-size:.9rem}
.status-profile{display:flex;align-items:center;gap:10px;margin-top:10px}
.status-profile img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.status-profile .name{font-weight:600}
.status-profile .sub{font-size:.9rem;color:var(--muted)}
.status-profile .profile-link{font-size:.9rem;color:var(--text);text-decoration:underline;opacity:.85}
.status-profile .profile-link:hover{opacity:1}
.card-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:8px}
.card-chips .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;font-size:.82rem;color:var(--text);background:linear-gradient(var(--elev),var(--elev)) padding-box,linear-gradient(90deg,var(--accent1),var(--accent2)) border-box;border:1px solid transparent;box-shadow:0 6px 16px var(--shadow)}
.stars{display:inline-flex;flex-direction:row-reverse;gap:4px}
.stars input{display:none}
.stars label{cursor:pointer;font-size:28px;color:#bbb;transition:color .15s ease}
.stars input:checked ~ label,.stars label:hover,.stars label:hover ~ label{color:#ffb400}
.result{margin-top:16px;padding:12px;border-radius:12px;border:1px dashed rgba(0,0,0,.1)}
.toast{position:fixed;bottom:16px;right:16px;z-index:2000;padding:10px 14px;border-radius:10px;font-weight:700;color:#0f1115;background:#d8f5d1;border:1px solid #b6e7a9;box-shadow:0 10px 26px var(--shadow);opacity:0;transform:translateY(8px);transition:opacity .2s ease, transform .2s ease}
.toast--error{background:#ffdede;border-color:#f2b1b1;color:#2b1212}
.toast.visible{opacity:1;transform:translateY(0)}

/* Feedback page */
.feedback-page{width:min(1100px,96vw);margin:0 auto}
.feedback-hero{max-width:760px;margin:6px auto 14px;text-align:center}
.feedback-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text);
  background:linear-gradient(var(--elev),var(--elev)) padding-box,
             linear-gradient(90deg,var(--accent1),var(--accent2)) border-box;
  border:1px solid transparent;
  box-shadow:0 6px 16px var(--shadow);
}
.feedback-page .page-title{
  margin:10px 0 8px;
  text-align:center;
  font-size:clamp(26px,5vw,40px);
  letter-spacing:.2px;
}
.feedback-page .intro{
  margin:0 auto;
  color:var(--muted);
  line-height:1.55;
  max-width:68ch;
}

.feedback-layout{
  display:grid;
  grid-template-columns:minmax(220px,300px) 1fr;
  gap:14px;
  align-items:start;
}
.feedback-page .card{
  background:var(--elev);
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  box-shadow:0 12px 30px var(--shadow);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
html[data-theme="dark"] .feedback-page .card{border-color:#2c3442}

.feedback-aside{padding:16px}
.feedback-aside h2{
  margin:0 0 10px;
  font-size:1.05rem;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.feedback-points{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:8px;
  color:var(--text);
}
.feedback-points li{line-height:1.35}

.feedback-form{padding:16px}
#siteFeedbackForm{display:grid;gap:12px}
#siteFeedbackForm fieldset{
  margin:0;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:12px;
  background:rgba(255,255,255,.48);
}
html[data-theme="dark"] #siteFeedbackForm fieldset{
  border-color:#2c3442;
  background:rgba(16,19,26,.65);
}
#siteFeedbackForm legend{
  padding:0 6px;
  font-weight:700;
  color:var(--text);
}
#siteFeedbackForm .row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
#siteFeedbackForm .row label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:var(--text);
}
#siteFeedbackForm textarea,
#siteFeedbackForm input[type="text"]{
  width:100%;
  border:1px solid rgba(0,0,0,.18);
  border-radius:10px;
  padding:10px 12px;
  font:inherit;
  color:var(--text);
  background:rgba(255,255,255,.88);
}
html[data-theme="dark"] #siteFeedbackForm textarea,
html[data-theme="dark"] #siteFeedbackForm input[type="text"]{
  border-color:#3a4352;
  background:#111621;
}
#siteFeedbackForm textarea{resize:vertical;min-height:84px}
#siteFeedbackForm textarea:focus,
#siteFeedbackForm input[type="text"]:focus{
  outline:none;
  border-color:var(--accent1);
  box-shadow:0 0 0 3px rgba(255,122,162,.2);
}
html[data-theme="dark"] #siteFeedbackForm textarea:focus,
html[data-theme="dark"] #siteFeedbackForm input[type="text"]:focus{
  box-shadow:0 0 0 3px rgba(106,162,255,.22);
}

#siteFeedbackForm .actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
#siteFeedbackForm button{
  border:1px solid transparent;
  border-radius:999px;
  padding:10px 16px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
#siteFeedbackForm button:hover{transform:translateY(-1px)}
#siteFeedbackForm button:disabled{opacity:.7;cursor:default;transform:none}
#siteFeedbackForm .secondary{
  background:#fff;
  color:#111;
  border-color:#d6dae3;
}
html[data-theme="dark"] #siteFeedbackForm .secondary{
  background:#171b24;
  color:#e6e6e6;
  border-color:#2f3848;
}
#siteFeedbackForm button[type="submit"]{
  color:#fff;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  box-shadow:0 10px 22px var(--shadow);
}
#siteFeedbackForm .hidden{display:none!important}

.scale-help{
  margin:0 0 10px;
  color:var(--muted);
  font-size:.9rem;
}
.metric + .metric{margin-top:10px}
.metric-label{
  margin:0 0 6px;
  font-weight:700;
  color:var(--text);
}
.scale,
.nps-scale{
  display:grid;
  gap:8px;
}
.scale{grid-template-columns:repeat(5,minmax(0,1fr))}
.nps-scale{grid-template-columns:repeat(11,minmax(0,1fr))}
.scale input,
.nps-scale input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.scale label,
.nps-scale label{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.16);
  background:rgba(255,255,255,.9);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  user-select:none;
  transition:transform .1s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
html[data-theme="dark"] .scale label,
html[data-theme="dark"] .nps-scale label{
  border-color:#354154;
  background:#0f1520;
}
.scale label:hover,
.nps-scale label:hover{
  transform:translateY(-1px);
  border-color:var(--accent1);
}
.scale input:checked + label,
.nps-scale input:checked + label{
  border-color:transparent;
  color:#fff;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  box-shadow:0 8px 18px var(--shadow);
}
@media (max-width:680px){
  .nps-scale{grid-template-columns:repeat(6,minmax(0,1fr))}
}

@media (max-width:900px){
  .feedback-layout{grid-template-columns:1fr}
  .feedback-aside{order:2}
}

/* About page */
.about-page{max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.logo-center{display:flex;justify-content:center;align-items:center;gap:12px;flex-direction:column;margin:10px 0 12px}
.about-logo{width:clamp(160px,32vw,240px);height:auto;border-radius:50%;object-fit:cover;border:3px solid rgba(0,0,0,.08);filter:drop-shadow(0 8px 16px var(--shadow));background:transparent}
.about-logo--dark{display:none}
html[data-theme="dark"] .about-logo--light{display:none}
html[data-theme="dark"] .about-logo--dark{display:block}
.about-bottom{background:var(--elev);border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:16px;box-shadow:0 10px 26px var(--shadow)}
.about-bottom h2{margin:0 0 8px;text-align:center}
.about-bottom p{margin:0 0 12px;color:var(--text)}
.about-meta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.about-bottom .chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  font-size:.85rem;
  letter-spacing:.02em;
  background:linear-gradient(var(--elev),var(--elev)) padding-box,
             linear-gradient(120deg,rgba(255,255,255,.2),rgba(0,0,0,0)) padding-box,
             linear-gradient(90deg,var(--accent1),var(--accent2)) border-box;
  border:1px solid transparent;
  color:var(--text);
  box-shadow:0 6px 16px var(--shadow);
  text-transform:none;
}

/* Commission page */
.page-title{margin:0 0 14px;text-align:left;font-weight:700;font-size:clamp(20px,6vw,32px)}
.anim-panel{width:min(1200px,96vw);margin:0 auto 12px}
.anim-panel__details{background:var(--elev);border:1px solid rgba(0,0,0,.12);border-radius:18px;box-shadow:0 18px 38px var(--shadow);overflow:hidden}
html[data-theme="dark"] .anim-panel__details{border-color:#2c3442}
.anim-panel__summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 18px;color:var(--text);background:linear-gradient(90deg,rgba(88,101,242,.18),rgba(88,101,242,.04));border-bottom:1px solid rgba(0,0,0,.08)}
html[data-theme="dark"] .anim-panel__summary{border-bottom-color:#2c3442}
.anim-panel__summary::-webkit-details-marker{display:none}
.anim-panel__beacon{width:6px;height:28px;border-radius:999px;background:linear-gradient(180deg,#7dd3fc,#6366f1);box-shadow:0 0 10px rgba(99,102,241,.7),0 0 22px rgba(99,102,241,.45)}
.anim-panel__title{font-weight:800;letter-spacing:.2px}
.anim-panel__chip{margin-left:6px;padding:4px 10px;border-radius:999px;font-weight:800;font-size:.75rem;letter-spacing:.08em;border:1px solid transparent}
.anim-panel__chip.is-open{background:rgba(46,204,113,.2);border-color:rgba(46,204,113,.6);color:#2ecc71}
.anim-panel__chip.is-limited{background:rgba(241,196,15,.2);border-color:rgba(241,196,15,.6);color:#f1c40f}
.anim-panel__chip.is-full{background:rgba(231,76,60,.2);border-color:rgba(231,76,60,.6);color:#e74c3c}
.anim-panel__actions{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.anim-panel__btn{padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);font-weight:700}
.anim-panel__chev{display:inline-block;transition:transform .2s ease}
.anim-panel__details[open] .anim-panel__chev{transform:rotate(180deg)}
.anim-panel__body{padding:16px 18px 18px;background:var(--elev)}
.anim-panel__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.anim-card{background:rgba(0,0,0,.12);border:1px solid rgba(0,0,0,.1);border-radius:14px;padding:14px 16px}
html[data-theme="dark"] .anim-card{background:#1f232b;border-color:#2c3442}
.anim-card h3{margin:0 0 10px;font-size:16px}
.anim-stats{display:grid;gap:8px}
.anim-stat{display:flex;justify-content:space-between;align-items:center}
.anim-stat strong{font-size:18px}
.anim-stat strong.is-available{color:#2ecc71}
.anim-stat strong.is-limited{color:#f1c40f}
.anim-stat strong.is-full{color:#e74c3c}
.anim-queue{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.anim-queue li{display:flex;justify-content:space-between;align-items:flex-start;color:var(--text);gap:10px}
.anim-client{display:block;font-weight:700}
.anim-meta{display:block;color:var(--muted);font-size:.9rem}
.anim-date{color:var(--muted);font-size:.9rem;white-space:nowrap}
.anim-text{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}
.anim-note{
  margin:10px 0 0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.55;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.anim-callout{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(88,101,242,.12);display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.anim-cta{padding:6px 12px;border-radius:999px;background:#5865f2;color:#fff;text-decoration:none;font-weight:700}
.anim-cta:hover{opacity:.9}
.poster-panel{width:min(1200px,96vw);margin:0 auto 12px}
.poster-panel__details{background:var(--elev);border:1px solid rgba(0,0,0,.12);border-radius:18px;box-shadow:0 18px 38px var(--shadow);overflow:hidden}
html[data-theme="dark"] .poster-panel__details{border-color:#2c3442}
.poster-panel__summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 18px;color:var(--text);background:linear-gradient(90deg,rgba(46,204,113,.18),rgba(46,204,113,.05));border-bottom:1px solid rgba(0,0,0,.08)}
html[data-theme="dark"] .poster-panel__summary{border-bottom-color:#2c3442}
.poster-panel__summary::-webkit-details-marker{display:none}
.poster-panel__beacon{width:6px;height:28px;border-radius:999px;background:linear-gradient(180deg,#6ee7b7,#22c55e);box-shadow:0 0 10px rgba(34,197,94,.65),0 0 22px rgba(34,197,94,.35)}
.poster-panel__title-wrap{display:flex;flex-direction:column;gap:2px}
.poster-panel__title{font-weight:800;letter-spacing:.2px}
.poster-panel__subtext{font-size:.85rem;color:var(--muted)}
.poster-panel__chip{margin-left:6px;padding:4px 10px;border-radius:999px;font-weight:800;font-size:.75rem;letter-spacing:.08em;border:1px solid transparent;box-shadow:0 0 10px rgba(46,204,113,.2)}
.poster-panel__chip.is-open{background:rgba(46,204,113,.2);border-color:rgba(46,204,113,.6);color:#2ecc71}
.poster-panel__chip.is-limited{background:rgba(241,196,15,.2);border-color:rgba(241,196,15,.6);color:#f1c40f}
.poster-panel__chip.is-full{background:rgba(231,76,60,.2);border-color:rgba(231,76,60,.6);color:#e74c3c}
.poster-panel__actions{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.poster-panel__btn{padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);font-weight:700}
.poster-panel__chev{display:inline-block;transition:transform .2s ease}
.poster-panel__details[open] .poster-panel__chev{transform:rotate(180deg)}
.poster-panel__body{padding:16px 18px 18px;background:var(--elev)}
.poster-panel__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.poster-card{background:rgba(0,0,0,.12);border:1px solid rgba(0,0,0,.1);border-radius:14px;padding:14px 16px}
html[data-theme="dark"] .poster-card{background:#1f232b;border-color:#2c3442}
.poster-card h3{margin:0 0 10px;font-size:16px}
.poster-stats{display:grid;gap:8px}
.poster-stat{display:flex;justify-content:space-between;align-items:center}
.poster-stat strong{font-size:18px}
.poster-stat strong.is-available{color:#2ecc71}
.poster-stat strong.is-limited{color:#f1c40f}
.poster-stat strong.is-full{color:#e74c3c}
.poster-queue{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.poster-queue li{display:flex;justify-content:space-between;align-items:flex-start;color:var(--text);gap:10px}
.poster-client{display:block;font-weight:700}
.poster-meta{display:block;color:var(--muted);font-size:.9rem}
.poster-date{color:var(--muted);font-size:.9rem;white-space:nowrap}
.poster-text{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}
.poster-note{
  margin:10px 0 0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.55;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.poster-callout{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(46,204,113,.12);display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.poster-cta{padding:6px 12px;border-radius:999px;background:#22c55e;color:#062312;text-decoration:none;font-weight:700}
.poster-cta:hover{opacity:.9}
.status-pills{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.status-pill{position:relative;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:18px;background:var(--elev);box-shadow:0 8px 18px var(--shadow);min-width:220px;color:var(--text);transition:transform .15s ease}
.status-pill:hover{transform:translateY(-2px)}
.status-pill .dot{width:14px;height:14px;border-radius:50%;background:var(--fs-color,#2ecc71);box-shadow:0 0 0 2px rgba(255,255,255,.45) inset,0 0 10px var(--fs-color,#2ecc71)}
.status-pill .text{display:flex;flex-direction:column;line-height:1.2}
.status-pill .label{font-size:11px;letter-spacing:.2px;text-transform:uppercase;color:var(--muted)}
.status-pill .value{font-size:16px;font-weight:700}
.status-pill::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.15);pointer-events:none}
.fs-good{--fs-color:#2ecc71}
.fs-emergency{--fs-color:#f1c40f}
.fs-death{--fs-color:#e74c3c}
.offer{width:min(1200px,96vw);margin:4px auto}
@media (min-width:1400px){
  .offer{width:min(1400px,92vw)}
}
.offer + .offer{margin-top:2px}
.offer-card{display:grid;grid-template-columns:1.1fr 1fr;gap:12px;background:var(--elev);border:1px solid rgba(0,0,0,.1);border-radius:18px;overflow:hidden;box-shadow:0 18px 42px var(--shadow);padding:12px}
html[data-theme="dark"] .offer-card{border-color:#2c3442}
.offer-media{position:relative;min-height:300px;background:#111;border-radius:14px;overflow:hidden}
.offer-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.offer-body{padding:6px 4px;display:flex;flex-direction:column;gap:8px}
.offer-body--poster{position:relative;padding-bottom:64px}
.offer-body--poster-tools{padding-bottom:6px}
.offer-body--animation{padding-bottom:6px}
.offer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.offer-title{font-weight:800;font-size:clamp(17px,3vw,21px);letter-spacing:.2px;display:flex;align-items:center;gap:10px;margin:0}
.offer-price{font-weight:900;font-size:clamp(26px,6vw,48px);margin:4px 0}
.offer-lead{color:var(--muted);margin:4px 0 10px}
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin-top:4px}
.tally-cta{
  position:absolute;
  right:clamp(16px,2.4vw,26px);
  bottom:clamp(16px,2.4vw,26px);
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:var(--elev);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 18px var(--shadow);
}
.tally-cta:hover{transform:translateY(-1px)}
.anim-offer-actions{
  margin-top:auto;
  display:grid;
  grid-template-columns:auto auto;
  gap:12px;
  align-items:end;
  justify-content:start;
}
.calc-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:var(--elev);
  color:var(--text);
  font-weight:700;
  font-size:14px;
  font-family:inherit;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 8px 18px var(--shadow);
}
.calc-cta:hover{transform:translateY(-1px)}
.poster-offer-actions{
  margin-top:auto;
  display:grid;
  grid-template-columns:auto auto;
  gap:12px;
  align-items:end;
  justify-content:start;
}
.offer-body--poster-tools .tally-cta{
  position:static;
  align-self:end;
  white-space:nowrap;
}
.calc-container--anim{
  width:min(96vw,640px);
  height:min(92vh,980px);
  padding:10px;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:8px;
  background:linear-gradient(180deg,#ffffff 0%,#f3f6ff 100%);
  border:1px solid rgba(0,0,0,.1);
}
html[data-theme="dark"] .calc-container--anim{
  background:linear-gradient(180deg,#1c1f28 0%,#14171e 100%);
  border-color:rgba(255,255,255,.08);
}
.calc-container--poster{
  background:linear-gradient(180deg,#ffffff 0%,#f3f6ff 100%);
}
html[data-theme="dark"] .calc-container--poster{
  background:linear-gradient(180deg,#1c1f28 0%,#14171e 100%);
}
.calc-container--anim .close-btn{
  margin:0;
  padding:8px 12px;
  align-self:end;
}
.anim-calc-app{
  height:100%;
  overflow:auto;
  padding:8px 8px 10px;
  color:#1a2233;
}
html[data-theme="dark"] .anim-calc-app{
  color:#e8eefc;
}
.ac-head{margin:0 0 10px}
.ac-title{
  margin:0 0 6px;
  font-size:18px;
  font-weight:800;
  letter-spacing:.2px;
  color:#1a2233;
}
html[data-theme="dark"] .ac-title{color:#e8eefc}
.ac-disclaimer{
  margin:0;
  font-size:12px;
  line-height:1.35;
  color:#111;
  background:#efb9bd;
  border:1px solid rgba(194,97,106,.28);
  border-radius:16px;
  padding:8px 10px;
  display:flex;
  align-items:flex-start;
  gap:8px;
  box-shadow:0 8px 20px rgba(194,97,106,.18);
}
html[data-theme="dark"] .ac-disclaimer{
  color:#f1f4ff;
  background:linear-gradient(120deg,#2f2f33 0%,#3a3c43 100%);
  border-color:rgba(255,255,255,.12);
}
.ac-disclaimer strong{
  color:#111;
  font-weight:800;
}
html[data-theme="dark"] .ac-disclaimer strong{color:#fff}
.ac-disclaimer-icon{
  display:inline-flex;
  font-size:13px;
  line-height:1;
  margin-top:1px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.ac-type-group{display:grid;gap:8px}
.ac-label{display:block;font-size:14px;color:#5d6b89;font-weight:600;margin-bottom:0}
html[data-theme="dark"] .ac-label{color:#c3cdea}
.ac-type-switch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ac-type-btn{
  border:1px solid rgba(0,0,0,.12);
  background:#ffffff;
  color:#1a2233;
  padding:11px 10px;
  border-radius:14px;
  cursor:pointer;
  font-weight:800;
  font-size:clamp(12px,1.4vw,15px);
  line-height:1.1;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
  min-height:56px;
  display:grid;
  place-items:center;
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  box-shadow:0 10px 20px rgba(0,0,0,.28);
}
html[data-theme="dark"] .ac-type-btn{
  border-color:rgba(255,255,255,.08);
  background:rgba(9,16,31,.78);
  color:#f8fbff;
}
.ac-type-btn:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(0,0,0,.34)}
.ac-type-btn.active,.ac-type-btn:focus-visible{
  border:1px solid transparent;
  background:
    linear-gradient(#f7efe8,#f7efe8) padding-box,
    linear-gradient(120deg,#ff89b2,#ff6fa5) border-box;
  box-shadow:0 0 0 1px rgba(255,111,165,.24),0 0 16px rgba(255,111,165,.28),0 10px 22px rgba(0,0,0,.16);
  outline:none;
}
html[data-theme="dark"] .ac-type-btn.active,
html[data-theme="dark"] .ac-type-btn:focus-visible{
  border:1px solid #d06cff;
  border-color:#d06cff;
  background:linear-gradient(145deg,rgba(125,76,255,.30),rgba(87,58,190,.46));
  box-shadow:0 0 0 1px rgba(208,108,255,.45),0 0 24px rgba(208,108,255,.38),0 14px 24px rgba(0,0,0,.35);
}
.ac-hint{margin-top:4px;font-size:13px;color:#5d6b89}
html[data-theme="dark"] .ac-hint{color:#c3cdea}
.ac-duration-wrap{margin-top:2px}
.ac-field{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.14);
  border-radius:14px;
  padding:12px;
}
html[data-theme="dark"] .ac-field{
  background:rgba(0,0,0,.22);
  border-color:rgba(255,255,255,.10);
}
#acDuration{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  color:#1a2233;
  font-size:16px;
  font-weight:600;
}
html[data-theme="dark"] #acDuration{color:#e8eefc}
.ac-addons{
  margin-top:4px;
  padding:14px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  background:rgba(255,255,255,.78);
  display:grid;
  gap:12px;
}
html[data-theme="dark"] .ac-addons{
  border-color:rgba(255,255,255,.12);
  background:rgba(6,11,22,.45);
}
.ac-addons-title{margin:0;font-size:14px;font-weight:700;color:#1a2233;letter-spacing:.2px}
html[data-theme="dark"] .ac-addons-title{color:#e8eefc}
.ac-addons-grid{display:grid;gap:10px}
.ac-addon-row{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:10px;align-items:center}
.ac-addon-row--extra{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(-10px);
  margin:0;
  pointer-events:none;
  transition:max-height .28s ease,opacity .22s ease,transform .28s ease,margin .28s ease;
}
.ac-addon-row--extra.is-visible{
  max-height:56px;
  opacity:1;
  transform:translateY(0);
  margin:0;
  pointer-events:auto;
}
.ac-addon-label{margin:0;font-size:14px;color:#1a2233;font-weight:600}
.ac-rate{color:#5d6b89}
html[data-theme="dark"] .ac-addon-label{color:#e8eefc}
html[data-theme="dark"] .ac-rate{color:#c3cdea}
.ac-addon-input{
  width:100%;
  border:1px solid rgba(0,0,0,.22);
  border-radius:10px;
  padding:8px 10px;
  background:#ffffff;
  color:#1a2233;
  text-align:center;
  font-size:16px;
  font-weight:700;
  outline:none;
  appearance:textfield;
  -moz-appearance:textfield;
}
html[data-theme="dark"] .ac-addon-input{
  border-color:rgba(255,255,255,.18);
  background:rgba(8,15,30,.85);
  color:#e8eefc;
}
.ac-addon-input::-webkit-outer-spin-button,.ac-addon-input::-webkit-inner-spin-button{margin:0}
.ac-addon-input:focus{border-color:#d06cff;box-shadow:0 0 0 1px rgba(208,108,255,.45),0 0 16px rgba(208,108,255,.28)}
.ac-breakdown{margin-top:8px}
.ac-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px dashed rgba(0,0,0,.14);
  color:#5d6b89;
  font-size:14px;
}
.ac-row:last-child{border-bottom:none}
html[data-theme="dark"] .ac-row{
  border-bottom-color:rgba(255,255,255,.12);
  color:#c3cdea;
}
.ac-value{color:#1a2233}
html[data-theme="dark"] .ac-value{color:#e8eefc}
.ac-total{
  margin-top:10px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.88);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.ac-total strong{font-size:14px;color:#5d6b89;font-weight:600}
html[data-theme="dark"] .ac-total{
  border-color:rgba(255,255,255,.14);
  background:rgba(0,0,0,.28);
}
html[data-theme="dark"] .ac-total strong{color:#c3cdea}
.ac-price{font-size:28px;font-weight:800;letter-spacing:.4px}
.ac-price.is-bump{animation:acPriceBump .28s ease}
@keyframes acPriceBump{
  0%{transform:scale(1);text-shadow:0 0 0 rgba(208,108,255,0)}
  45%{transform:scale(1.06);text-shadow:0 0 16px rgba(208,108,255,.45)}
  100%{transform:scale(1);text-shadow:0 0 0 rgba(208,108,255,0)}
}
.ac-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.ac-btns button{
  border:1px solid rgba(0,0,0,.12);
  background:#ffffff;
  color:#1a2233;
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
}
.ac-btns button:hover{background:#f2f4fb}
html[data-theme="dark"] .ac-btns button{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#e8eefc;
}
html[data-theme="dark"] .ac-btns button:hover{background:rgba(255,255,255,.10)}
.ac-note{margin-top:10px;color:#5d6b89;font-size:13px}
html[data-theme="dark"] .ac-note{color:#c3cdea}
.ac-mono{font-variant-numeric:tabular-nums}
.offer-body--animation .tally-cta{
  position:static;
  align-self:end;
  white-space:nowrap;
}
.tier-switch{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 8px}
.tier-btn{border:1px solid rgba(0,0,0,.1);background:var(--elev);color:var(--text);padding:8px 14px;border-radius:12px;cursor:pointer;font-weight:700;letter-spacing:.1px;box-shadow:0 6px 14px var(--shadow);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.tier-btn:hover{transform:translateY(-1px);box-shadow:0 10px 18px var(--shadow)}
.tier-btn.active,
.tier-btn:focus-visible{color:var(--text);outline:none}
html:not([data-theme="dark"]) .tier-btn.active,
html:not([data-theme="dark"]) .tier-btn:focus-visible{
  background:linear-gradient(var(--elev),var(--elev)) padding-box,
            linear-gradient(90deg,var(--accent1),var(--accent2)) border-box;
  border:1px solid transparent;
  box-shadow:0 2px 8px var(--shadow),0 0 0 1px rgba(255,122,162,.7),0 0 10px rgba(255,122,162,.45);
}
html[data-theme="dark"] .tier-btn.active,
html[data-theme="dark"] .tier-btn:focus-visible{
  border-color:#c45aec;
  background:linear-gradient(135deg,rgba(196,90,236,.15),rgba(255,255,255,.2));
  box-shadow:0 10px 22px rgba(196,90,236,.35);
  outline:none;
}
.feat h4{margin:0 0 4px;font-size:16px;display:flex;align-items:center;gap:8px}
.feat p{margin:0;color:var(--muted)}
.feat ul{margin:6px 0 0 18px;color:var(--muted);padding:0}
.feat li{margin:2px 0}
.tw-shell{width:100%;max-width:1400px;margin-left:auto;margin-right:auto;padding:24px 16px 24px}
@media (min-width:640px){
  .tw-shell{padding-left:24px;padding-right:24px;padding-top:28px;padding-bottom:28px}
}
@media (max-width:768px){
  .offer-card{grid-template-columns:1fr;grid-auto-rows:auto;padding:10px}
  .offer-media{min-height:200px}
  .features{grid-template-columns:1fr}
  .anim-offer-actions{grid-template-columns:1fr}
  .poster-offer-actions{grid-template-columns:1fr}
  .calc-cta{justify-content:center}
  .offer-body--poster-tools .tally-cta{justify-self:start}
  .offer-body--animation .tally-cta{justify-self:start}
  .calc-container--anim{width:min(96vw,640px);height:92vh}
  .ac-type-switch{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ac-addon-row{grid-template-columns:1fr 74px}
}

/* Gallery page (masonry + lightbox) */
.controls{width:min(96%,1100px);margin:8px auto 2px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.controls .search{flex:1 1 260px;display:flex;align-items:center;gap:8px;background:var(--elev);border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:8px 10px;box-shadow:0 6px 18px var(--shadow)}
.controls input[type="search"]{all:unset;flex:1;color:var(--text)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid rgba(0,0,0,.1);background:var(--elev);color:var(--text);padding:6px 10px;border-radius:999px;cursor:pointer;box-shadow:0 6px 18px var(--shadow)}
.chip[aria-pressed="true"]{background:#0d6efd;color:#fff;border-color:#0d6efd}
.gallery.masonry{display:block;width:min(96%,1100px);margin:8px auto;column-width:clamp(220px,28vw,340px);column-gap:12px}
.gallery.masonry .card{display:inline-block;width:100%;margin:0 0 12px;position:relative;background:var(--elev);border-radius:12px;overflow:hidden;box-shadow:0 6px 18px var(--shadow);border:1px solid rgba(0,0,0,.06);break-inside:avoid}
.gallery.masonry .card button{all:unset;display:block;width:100%}
.gallery.masonry .card img{display:block;width:100%;height:auto;object-fit:cover;transition:transform .25s ease}
.gallery.masonry .card:hover img{transform:scale(1.03)}
.gallery.masonry .card .label{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:8px;background:rgba(0,0,0,.55);color:#fff;font-weight:700}
html[data-theme="dark"] .gallery.masonry .card{border-color:#2c3442}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:1200;padding:8px}
.lightbox.open{display:flex}
.viewer{position:relative;max-width:min(96vw,1200px);padding:8px;display:flex;align-items:center;justify-content:center}
.viewer img{width:auto;height:auto;max-width:100%;max-height:calc(100vh - 160px);object-fit:contain;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.viewer .caption{position:absolute;left:0;right:0;bottom:-42px;text-align:center;color:#fff}
.viewer .nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.viewer .btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer;border:0}
.viewer .nav .btn{pointer-events:auto}
.viewer .close{position:fixed;top:16px;right:16px;z-index:4}
.viewer .prev,.viewer .next{position:fixed;top:50%;transform:translateY(-50%);z-index:3}
.viewer .prev{left:24px}
.viewer .next{right:24px}
@media (max-width: 640px){
  .viewer img{max-height:calc(100vh - 120px)}
  .viewer .btn{width:38px;height:38px}
  .viewer .prev{left:12px}
  .viewer .next{right:12px}
  .viewer .close{top:10px;right:10px}
  .viewer .caption{bottom:-28px;font-size:14px}
}