/* StylishName Generator Plugin v3.0 */

.sng-wrap{--b:#7c3aed;--b2:#a855f7;--b3:#c084fc;--ac:#f97316;--bg:#f8f7ff;--bg2:#f0eefe;--cd:#fff;--cd2:#f4f2ff;--tx:#1e1b3a;--tx2:#4b4673;--tx3:#9090b8;--br:rgba(124,58,237,0.18);--br2:rgba(124,58,237,0.30);--copied-bg:#f3f2fa;--copied-tx:#1e1b3a;--toast-bg:#f3f2fa;--toast-tx:#1e1b3a;font-family:'Outfit',system-ui,sans-serif;background:var(--bg);color:var(--tx);border-radius:14px;margin:20px 0;border:2px solid var(--bg);box-shadow:none;position:relative}
.sng-wrap[data-theme=dark]{--bg:#0d0b1a;--bg2:#130f26;--cd:#17122e;--cd2:#1f1940;--tx:#ede9fe;--tx2:#a78bfa;--tx3:#6d5fa3;--br:rgba(167,139,250,0.12);--br2:rgba(167,139,250,0.28);--copied-bg:#17122e;--copied-tx:#ede9fe;--toast-bg:#17122e;--toast-tx:#ede9fe}

/* Header */
.sng-hdr{background:linear-gradient(135deg,#3b0764,#6d28d9,#a855f7);display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:12px 12px 0 0}
.sng-logo{width:30px;height:30px;background:rgba(255,255,255,0.18);border:2px solid rgba(255,255,255,0.35);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.sng-title{color:#fff;font-size:1.15rem;font-weight:800;flex:1;margin:0}
.sng-dark-btn{background:rgba(255,255,255,0.15);border:1.5px solid rgba(255,255,255,0.35);color:#fff;font-family:'Outfit',sans-serif;font-size:.78rem;font-weight:600;padding:6px 14px;border-radius:999px;cursor:pointer}
.sng-dark-btn:hover{background:rgba(255,255,255,0.28)}

/* Nav chips */
.sng-bar-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;width:100%}
.sng-nav-container{display:flex;align-items:stretch;background:var(--bg);border-top:1.5px solid var(--br2);border-bottom:1.5px solid var(--br2);padding:0;position:relative;flex:1;min-width:0;border-radius:8px;overflow:hidden}
.sng-nav{display:flex;gap:6px;overflow-x:auto;padding:8px 10px;background:transparent;scrollbar-width:none;flex-wrap:nowrap;flex:1;min-width:0;cursor:grab;user-select:none;-webkit-user-select:none;position:relative}
.sng-nav.grabbing{cursor:grabbing}
.sng-nav::-webkit-scrollbar{display:none}
.sng-nav-scroll{background:var(--cd2);border:none;color:var(--tx2);width:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.25rem;font-weight:bold;user-select:none;transition:all .15s;flex-shrink:0;padding:0;outline:none}
.sng-nav-left{border-right:1.5px solid var(--br2)}
.sng-nav-right{border-left:1.5px solid var(--br2)}
.sng-nav-scroll:not(.disabled):hover{background:var(--br2);color:var(--b)}
.sng-nav-scroll.disabled{opacity:0.25;pointer-events:none;cursor:default}
.sng-chip{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;font-size:.78rem;font-weight:600;color:var(--tx2);white-space:nowrap;border:1px solid var(--br);cursor:pointer;text-decoration:none;transition:all .15s;background:var(--cd2);font-family:'Outfit',sans-serif}
.sng-chip:hover{background:var(--br);color:var(--b);border-color:var(--br2);text-decoration:none}
.sng-chip.active{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;box-shadow:0 2px 10px rgba(124,58,237,0.45);border-color:transparent;text-decoration:none}
.sng-subbar{display:flex !important;justify-content:flex-end !important;padding:6px 14px !important;background:var(--bg) !important;border-bottom:1px solid var(--br) !important}

/* Input bar — sticky, NO overflow:hidden on parent */
.sng-bar{position:sticky;top:0;z-index:100;background:rgba(248,247,255,0.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:10px 14px 8px;border-bottom:1px solid var(--br2)}
.sng-wrap[data-theme=dark] .sng-bar{background:rgba(13,11,26,0.97)}
.admin-bar .sng-bar{top:32px}
@media screen and (max-width:782px){.admin-bar .sng-bar{top:46px}}

.sng-ibox{display:flex;align-items:center;background:var(--cd) !important;border:2px solid var(--br2) !important;border-radius:18px;padding:4px 16px;margin-bottom:7px;transition:border-color .2s,box-shadow .2s}
.sng-ibox:focus-within{border-color:var(--b) !important;box-shadow:0 0 0 4px rgba(124,58,237,0.14) !important}
.sng-input{flex:1;border:none !important;outline:none !important;background:transparent !important;color:var(--tx) !important;font-size:1.2rem;font-family:'Space Mono',monospace;font-weight:700;text-align:center;padding:9px 4px;resize:none;width:100%;min-height:44px;letter-spacing:.04em;box-shadow:none !important}
.sng-input:focus{background:transparent !important;color:var(--tx) !important;outline:none !important;box-shadow:none !important}
.sng-input:-webkit-autofill,
.sng-input:-webkit-autofill:hover,
.sng-input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--tx) !important; -webkit-box-shadow:0 0 0px 1000px var(--cd) inset !important; transition:background-color 5000s ease-in-out 0s }
.sng-input::placeholder{color:var(--tx3);font-weight:400;font-style:italic}
.sng-cc{font-size:.58rem;font-family:'Space Mono',monospace;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;padding-left:8px;flex-shrink:0}

/* High-specificity overrides to lock dark theme input field styles in editing/typing modes */
.sng-wrap[data-theme=dark] .sng-ibox,
.sng-wrap[data-theme=dark] .sng-ibox:focus-within {
  background: var(--cd) !important;
  background-color: var(--cd) !important;
}
.sng-wrap[data-theme=dark] textarea.sng-input,
.sng-wrap[data-theme=dark] textarea.sng-input:focus,
.sng-wrap[data-theme=dark] textarea.sng-input:active,
.sng-wrap[data-theme=dark] .sng-input,
.sng-wrap[data-theme=dark] .sng-input:focus,
.sng-wrap[data-theme=dark] .sng-input:active {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--tx) !important;
  box-shadow: none !important;
  outline: none !important;
}

.sng-ctrl{display:flex;align-items:center;gap:6px;flex-shrink:0}
.sng-sz{background:var(--cd2);border:1.5px solid var(--br2);color:var(--tx2);width:30px;height:30px;border-radius:7px;font-size:.78rem;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif}
.sng-sz:hover{background:var(--b);border-color:var(--b);color:#fff}

/* Section header */
.sng-sec{border-top:1px solid var(--br)}
.sng-sec-hdr{display:flex;align-items:center;justify-content:space-between;padding:9px 16px;border-bottom:1px solid var(--br)}
.sng-sec-lbl{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff}
.sng-sec-cnt{font-size:.64rem;font-family:'Space Mono',monospace;background:rgba(255,255,255,0.18);color:#fff;padding:2px 8px;border-radius:12px}

/* Cards grid — 2 col desktop, 1 col mobile */
.sng-list{list-style:none;margin:0;padding:10px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;background:var(--bg)}
@media(max-width:600px){.sng-list{grid-template-columns:1fr}}

.sng-card{background:var(--cd);border-radius:12px;border:1.5px solid var(--br);position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s,box-shadow .15s,border-color .15s;min-height:80px;display:flex;flex-direction:column;justify-content:center}
.sng-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#7c3aed,#c084fc,#f97316);opacity:0;transition:opacity .2s}
.sng-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(124,58,237,0.20);border-color:rgba(124,58,237,0.40)}
.sng-card:hover::before{opacity:1}
.sng-card:active{transform:translateY(-1px)}
.sng-ct{margin:0;padding:14px 14px 26px;font-size:1.25rem;color:var(--tx);text-align:center;word-break:break-word;font-weight:500;line-height:1.5;letter-spacing:.02em}
.sng-clen{position:absolute;bottom:6px;left:14px;font-size:.58rem;font-family:'Space Mono',monospace;font-weight:700;color:var(--b2);text-transform:uppercase;letter-spacing:.12em;opacity:.7}
.sng-copied{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--copied-bg);color:var(--copied-tx);font-family:'Outfit',sans-serif;font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;border-radius:12px;z-index:2}

/* Load more */
.sng-more{text-align:center;padding:22px 16px;border-top:1px solid var(--br);background:var(--bg)}
.sng-more-btn{background:transparent;border:2px solid var(--b);color:var(--b);font-family:'Outfit',sans-serif;font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:12px 32px;border-radius:999px;cursor:pointer;transition:all .2s}
.sng-more-btn:hover{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border-color:transparent;box-shadow:0 4px 20px rgba(124,58,237,0.45);transform:translateY(-2px)}

/* Toast */
.sng-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--toast-bg);color:var(--toast-tx);border:1.5px solid var(--br2);padding:10px 24px;border-radius:30px;font-family:'Outfit',sans-serif;font-size:.85rem;font-weight:700;opacity:0;pointer-events:none;z-index:999999;transition:opacity .22s,transform .22s;box-shadow:0 4px 20px rgba(0,0,0,0.15);white-space:nowrap}
.sng-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* Mobile tweaks */
@media(max-width:480px){.sng-ctrl{gap:4px}.sng-ct{font-size:1.05rem}}

/* Page-wide Dark theme overrides */
body[data-theme=dark],
html[data-theme=dark] {
  background-color: #0d0b1a !important;
}
body[data-theme=dark] #page,
body[data-theme=dark] .site,
body[data-theme=dark] #content,
body[data-theme=dark] .site-content,
body[data-theme=dark] .content-area,
body[data-theme=dark] main,
body[data-theme=dark] #primary,
body[data-theme=dark] #main,
body[data-theme=dark] .site-main,
body[data-theme=dark] .entry-content,
body[data-theme=dark] article,
body[data-theme=dark] section,
body[data-theme=dark] header,
body[data-theme=dark] footer,
body[data-theme=dark] .site-header,
body[data-theme=dark] .site-footer,
body[data-theme=dark] .elementor-section,
body[data-theme=dark] .elementor-container,
body[data-theme=dark] .elementor-column,
body[data-theme=dark] .elementor-widget-wrap,
body[data-theme=dark] .elementor-widget,
body[data-theme=dark] .elementor-widget-container,
body[data-theme=dark] .post-inner,
body[data-theme=dark] .page-inner,
body[data-theme=dark] .page-wrap,
body[data-theme=dark] .wrap,
body[data-theme=dark] .container,
body[data-theme=dark] .row {
  background-color: transparent !important;
  background: transparent !important;
}
body[data-theme=dark] h1,
body[data-theme=dark] h2,
body[data-theme=dark] h3,
body[data-theme=dark] h4,
body[data-theme=dark] h5,
body[data-theme=dark] h6,
body[data-theme=dark] p,
body[data-theme=dark] li,
body[data-theme=dark] span,
body[data-theme=dark] a {
  color: #ede9fe !important;
}
body[data-theme=dark] a:hover {
  color: #a78bfa !important;
}
