@import url('https://fonts.googleapis.com/css2?family=Modak&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Nosifer&family=Rock+Salt&family=Permanent+Marker&family=Calligraffiti&family=Rubik+Dirt&family=Chokokutai&family=Ruslan+Display&family=Emblema+One&family=Plaster&family=Wallpoet&family=Gajraj+One&family=Rubik+Distressed&family=Knewave&family=Climate+Crisis&display=swap');
:root{--bg:#0f1021;--bg2:#13152a;--bg3:#1a1d35;--card:#1e2140;--card2:#252847;--bdr:#2e3160;--bdr2:#3a3f70;--p:#a855f7;--pk:#ec4899;--ind:#818cf8;--grn:#34d399;--amb:#f59e0b;--txt:#e2e8f0;--t2:#94a3b8;--t3:#64748b;--gp:rgba(168,85,247,.22);--gpk:rgba(236,72,153,.18)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:'Space Grotesk',sans-serif;line-height:1.6}

/* SITE HEADER */
.site-header{position:sticky;top:0;z-index:9999;background:#0a0c1a;border-bottom:1px solid #1e2140}
.site-header .sh-inner{max-width:1200px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-logo{display:flex;align-items:center;gap:8px;font-size:1.2rem;font-weight:700;color:#e2e8f0;text-decoration:none}
.site-logo span{background:linear-gradient(135deg,#a855f7,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.site-nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.site-nav a{padding:6px 12px;border-radius:6px;color:#94a3b8;font-size:.85rem;font-weight:500;text-decoration:none;transition:all .15s}
.site-nav a:hover,.site-nav a.active{background:#a855f7;color:#fff;text-decoration:none}
.lang-sel{padding:5px 8px;border-radius:6px;border:1px solid #2e3160;background:#1e2140;color:#e2e8f0;font-size:.8rem;cursor:pointer}
.theme-btn{width:32px;height:32px;border-radius:50%;border:1px solid #2e3160;background:#1e2140;color:#e2e8f0;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.site-search{display:flex;align-items:center;background:#13152a;border:1px solid #2e3160;border-radius:6px;padding:5px 10px;gap:6px}
.site-search input{background:none;border:none;color:#e2e8f0;font-size:.8rem;width:120px;outline:none}
.site-search input::placeholder{color:#64748b}
.sh-hamburger{display:none;width:32px;height:32px;border-radius:6px;border:1px solid #2e3160;background:#1e2140;color:#e2e8f0;font-size:1rem;cursor:pointer;align-items:center;justify-content:center}
@media(max-width:768px){.site-header .sh-inner{flex-wrap:wrap}.site-nav{display:none;width:100%;flex-direction:column;gap:4px;padding-top:8px;border-top:1px solid #1e2140}.site-nav.show{display:flex}.sh-hamburger{display:flex}}

/* Graffiti Generator HEADER */
.sprayz-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:rgba(19,21,42,.95);border-bottom:1px solid var(--bdr);backdrop-filter:blur(12px)}
.logo{display:flex;align-items:center;gap:10px}
.logo-icon{font-size:1.45rem}
.logo-name{font-family:'Space Mono',monospace;font-size:1.3rem;font-weight:700;background:linear-gradient(135deg,var(--p),var(--pk));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.logo-tag{font-size:.58rem;color:var(--t3);letter-spacing:.14em;text-transform:uppercase;margin-top:1px}
.hdr-r{display:flex;gap:7px;align-items:center}
.btn{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.03em;border:none;cursor:pointer;border-radius:8px;padding:6px 13px;transition:all .16s;display:flex;align-items:center;gap:5px}
.btn-g{background:var(--card);color:var(--t2);border:1px solid var(--bdr)}
.btn-g:hover{border-color:var(--ind);color:var(--txt);background:var(--card2)}
.btn-g:disabled{opacity:.3;cursor:not-allowed}
.btn-p{background:var(--p);color:#fff;box-shadow:0 0 18px var(--gp)}
.btn-p:hover{background:#b96cf9}
.btn-pk{background:var(--pk);color:#fff;box-shadow:0 0 18px var(--gpk)}
.btn-pk:hover{background:#f06aa8}
kbd{font-family:'Space Mono',monospace;font-size:.58rem;background:var(--bg3);border:1px solid var(--bdr);border-radius:3px;padding:1px 5px;color:var(--t3)}

/* LAYOUT */
.app{display:grid;grid-template-columns:260px 1fr 268px;height:calc(100vh - 56px);overflow:hidden}

/* PANELS */
.panel{background:var(--bg2);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--bdr) transparent}
.panel.l{border-right:1px solid var(--bdr)}
.panel.r{border-left:1px solid var(--bdr)}
.ps{padding:13px 15px;border-bottom:1px solid var(--bdr)}
.pl{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);margin-bottom:11px;display:flex;align-items:center;gap:8px;font-weight:600}
.pl::after{content:'';flex:1;height:1px;background:var(--bdr)}
.ti{width:100%;background:var(--bg);border:1px solid var(--bdr);border-radius:10px;color:var(--txt);font-family:'Space Mono',monospace;font-size:1.25rem;font-weight:700;letter-spacing:.07em;padding:9px 11px;outline:none;transition:border-color .16s,box-shadow .16s}
.ti:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(168,85,247,.14)}
.ti-m{display:flex;justify-content:space-between;margin-top:5px}
.ti-m span{font-size:.6rem;color:var(--t3)}
.stabs{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.stab{padding:9px 7px 7px;background:var(--bg);border:1px solid var(--bdr);border-radius:10px;cursor:pointer;transition:all .16s;text-align:center;position:relative;overflow:hidden}
.stab:hover{border-color:var(--bdr2);background:var(--card)}
.stab.on{border-color:var(--p);background:linear-gradient(135deg,rgba(168,85,247,.11),rgba(236,72,153,.07));box-shadow:0 0 14px rgba(168,85,247,.18)}
.stab.on::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--p),var(--pk))}
.stn{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:4px;color:var(--t2)}
.stab.on .stn{color:var(--p)}
.stp{font-family:'Space Mono',monospace;font-size:1.25rem;font-weight:700;line-height:1;display:block}
.stp-b{color:#fff;text-shadow:0 0 8px var(--p),0 0 18px rgba(168,85,247,.45)}
.stp-w{font-style:italic;color:var(--amb);letter-spacing:-.03em}
.stp-t{font-size:.95rem;color:var(--t3);font-style:italic}
.stp-u{color:var(--pk);-webkit-text-stroke:1.5px var(--amb)}
.bsub{background:linear-gradient(135deg,rgba(168,85,247,.06),rgba(236,72,153,.04));border:1px solid rgba(168,85,247,.2);border-radius:10px;padding:11px;margin-bottom:2px}
.bsub-t{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--p);margin-bottom:9px;font-weight:700;display:flex;align-items:center;gap:5px}
.fl{display:flex;flex-direction:column;gap:4px;max-height:210px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--bdr) transparent;padding-right:2px}
.fi{padding:7px 10px;background:var(--bg);border:1px solid var(--bdr);border-radius:8px;cursor:pointer;transition:all .16s;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.fi:hover{border-color:var(--bdr2)}
.fi.on{border-color:var(--p);background:rgba(168,85,247,.07)}
.fi.on::after{content:'✓';color:var(--p);font-size:.74rem;font-weight:700}
.fi-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.fp{font-size:1.15rem;font-weight:700;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fn{font-size:.58rem;color:var(--t3);letter-spacing:.06em;text-transform:uppercase;font-family:'Space Grotesk',sans-serif}
.sr{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.sr:last-child{margin-bottom:0}
.sr label{font-size:.62rem;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;width:64px;flex-shrink:0;font-weight:600}
.sr input[type=range]{flex:1;appearance:none;height:4px;background:var(--bdr);border-radius:2px;outline:none;cursor:pointer}
.sr input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:var(--p);cursor:pointer;border:2px solid var(--bg);box-shadow:0 0 6px var(--gp);transition:transform .12s}
.sr input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
.sr input[type=range].pk::-webkit-slider-thumb{background:var(--pk);box-shadow:0 0 6px var(--gpk)}
.sr input[type=range].gn::-webkit-slider-thumb{background:var(--grn)}
.sv{font-size:.68rem;color:var(--p);width:26px;text-align:right;font-weight:700;font-family:'Space Mono',monospace}
.tr{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--bdr)}
.tr:last-child{border-bottom:none}
.trl{font-size:.78rem;font-weight:600}
.trd{font-size:.59rem;color:var(--t3);margin-top:1px}
.tog{width:31px;height:17px;border-radius:9px;background:var(--bdr);position:relative;transition:background .2s;cursor:pointer;flex-shrink:0}
.tog.on{background:var(--p);box-shadow:0 0 8px var(--gp)}
.tog::after{content:'';position:absolute;width:13px;height:13px;border-radius:50%;background:#fff;top:2px;left:2px;transition:left .2s}
.tog.on::after{left:16px}
.pg{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:11px}
.sw{aspect-ratio:1;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:all .12s}
.sw:hover{transform:scale(1.15);border-color:rgba(255,255,255,.35)}
.sw.on{border-color:#fff;transform:scale(1.15);box-shadow:0 0 8px rgba(255,255,255,.25)}
.cr{display:flex;gap:7px;align-items:center;margin-bottom:7px}
.cr:last-child{margin-bottom:0}
.cr label{font-size:.62rem;color:var(--t3);text-transform:uppercase;letter-spacing:.07em;width:54px;flex-shrink:0;font-weight:600}
.cpw{position:relative;width:26px;height:26px;flex-shrink:0}
.cpt{width:26px;height:26px;border-radius:6px;border:1px solid var(--bdr);cursor:pointer;display:block}
.cpi{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.chx{font-size:.68rem;color:var(--t2);font-family:'Space Mono',monospace}
.el{display:flex;flex-direction:column;gap:5px}
.ei{display:flex;align-items:center;gap:9px;padding:8px 11px;background:var(--bg);border:1px solid var(--bdr);border-radius:8px;cursor:pointer;transition:all .16s}
.ei:hover{border-color:var(--bdr2)}
.ei.on{border-color:var(--p);background:rgba(168,85,247,.06)}
.eic{font-size:1rem;flex-shrink:0}
.ein{font-size:.8rem;font-weight:700}
.eid{font-size:.59rem;color:var(--t3);margin-top:1px}
.ca{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:18px 18px;background:var(--bg);position:relative;overflow:hidden}
.ctb{display:flex;gap:5px;align-items:center}
.tb{width:33px;height:33px;background:var(--card);border:1px solid var(--bdr);border-radius:8px;color:var(--t3);font-size:.88rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .16s}
.tb:hover{border-color:var(--ind);color:var(--txt)}
.tb.on{background:var(--p);color:#fff;border-color:var(--p);box-shadow:0 0 12px var(--gp)}
.tb:disabled{opacity:.28;cursor:not-allowed}
.tdv{width:1px;height:20px;background:var(--bdr);margin:0 2px}
.cw{width:100%;max-width:840px;position:relative}
.cc{background:var(--card);border:1px solid var(--bdr);border-radius:14px;padding:4px;box-shadow:0 0 40px rgba(168,85,247,.07),0 20px 60px rgba(0,0,0,.45)}
#gc{display:block;width:100%;height:auto;border-radius:10px;cursor:grab}
#gc:active{cursor:grabbing}
.cbadges{position:absolute;top:10px;left:18px;display:flex;gap:5px}
.cb{font-size:.57rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:3px 7px;border-radius:20px;border:1px solid}
.cbp{color:var(--p);border-color:rgba(168,85,247,.35);background:rgba(168,85,247,.1)}
.cbg{color:var(--grn);border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.08)}
.csz{position:absolute;bottom:9px;right:18px;font-size:.57rem;color:var(--t3);font-family:'Space Mono',monospace}
.ch{font-size:.6rem;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;display:flex;gap:14px}
.prg{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.pr{aspect-ratio:2/1;border-radius:8px;border:1px solid var(--bdr);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:all .16s;overflow:hidden;position:relative}
.pr:hover{border-color:var(--p);transform:scale(1.04)}
.pr span{position:relative;z-index:1;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.pr1::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#a855f7,#ec4899)}
.pr2::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#f59e0b,#ef4444)}
.pr3::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#34d399,#06b6d4)}
.pr4::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#818cf8,#a855f7)}
.pr5::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#ec4899,#f59e0b)}
.pr6::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#06b6d4,#34d399)}
.hr{display:flex;gap:4px}
.hi{flex:1;height:25px;border-radius:5px;border:1px solid var(--bdr);background:var(--bg);cursor:pointer;transition:all .14s;display:flex;align-items:center;justify-content:center;font-size:.57rem;color:var(--t3);font-family:'Space Mono',monospace}
.hi:hover{border-color:var(--bdr2)}
.hi.on{border-color:var(--p);color:var(--p);background:rgba(168,85,247,.08)}
.eb{display:flex;flex-direction:column;gap:6px}
.bf{width:100%;justify-content:center}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(60px);background:var(--card2);border:1px solid var(--bdr2);border-radius:10px;padding:10px 20px;font-size:.78rem;color:var(--txt);box-shadow:0 8px 32px rgba(0,0,0,.45);transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s;opacity:0;z-index:9999;pointer-events:none}
#toast.on{transform:translateX(-50%) translateY(0);opacity:1}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:3px}
@media(max-width:768px){.app{grid-template-columns:1fr;height:auto;overflow:visible}.panel.l,.panel.r{display:none}.ca{min-height:400px}.sprayz-header{flex-wrap:wrap;height:auto;padding:10px}.hdr-r{flex-wrap:wrap}}

/* BELOW GENERATOR */
.content-below{max-width:1100px;margin:0 auto;padding:40px 20px}
.content-below h2{text-align:center;font-size:1.5rem;margin-bottom:20px}
.sa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.sa-card{background:var(--card);border:1px solid var(--bdr);border-radius:10px;padding:20px;transition:border-color .15s}
.sa-card:hover{border-color:var(--p)}
.sa-card h3{font-size:1rem;margin-bottom:6px}
.sa-card p{color:var(--t2);font-size:.85rem;line-height:1.6}
@media(max-width:480px){.sa-grid{grid-template-columns:1fr}}

/* SITE FOOTER */
.site-footer{background:#080b15;color:#94a3b8;padding:40px 20px 20px;border-top:1px solid #1e2140}
.sf-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.sf-brand h3{color:#e2e8f0;font-size:1.1rem;margin-bottom:8px}
.sf-brand p{font-size:.85rem;line-height:1.6}
.sf-col h4{color:#e2e8f0;font-size:.9rem;margin-bottom:12px}
.sf-col a{display:block;color:#94a3b8;font-size:.85rem;padding:3px 0;text-decoration:none;transition:color .15s}
.sf-col a:hover{color:#a855f7}
.sf-bottom{text-align:center;margin-top:24px;padding-top:16px;border-top:1px solid #1e2140;color:#64748b;font-size:.75rem}
@media(max-width:768px){.sf-inner{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.sf-inner{grid-template-columns:1fr}}