@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
    --bg-primary:#0f0f1a;--bg-secondary:#161628;--bg-card:#1c1c35;--bg-card-hover:#222245;
    --bg-input:#12121f;--bg-header:rgba(15,15,26,0.95);
    --text-primary:#e8e8f0;--text-secondary:#a0a0b8;--text-muted:#5c5c7a;
    --accent-purple:#9b8aff;--accent-cyan:#64d8e8;--accent-pink:#ff8aaf;
    --accent-green:#6ed69a;--accent-orange:#ffb870;--accent-blue:#6ea8ff;
    --border:rgba(255,255,255,0.06);--border-hover:rgba(155,138,255,0.3);
    --pixel-shadow:#0a0a14;--success:#4ade80;--error:#f87171;--warning:#fbbf24;
    --font-pixel:'Press Start 2P',monospace;--font-body:'Inter',-apple-system,sans-serif;
    --font-mono:'Fira Code',monospace;--radius:0px;--transition:0.2s ease;
    --header-height:56px;--sidebar-width:250px;--sidebar-mini:52px
}

[data-theme="light"]{
    --bg-primary:#e8e4dc;--bg-secondary:#f5f2ec;--bg-card:#ffffff;--bg-card-hover:#f0ede6;
    --bg-input:#f8f6f1;--bg-header:rgba(232,228,220,0.95);
    --text-primary:#1a1a2e;--text-secondary:#4a4a65;--text-muted:#8a8aa0;
    --accent-purple:#7c6fd4;--accent-cyan:#3ab0c0;--accent-pink:#e06088;
    --accent-green:#3db070;--accent-orange:#d89040;--accent-blue:#4080d8;
    --border:rgba(0,0,0,0.08);--border-hover:rgba(124,111,212,0.3);
    --pixel-shadow:#c0bdb5;--success:#22c55e;--error:#ef4444;--warning:#f59e0b
}

body{
    font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);
    min-height:100vh;overflow-x:hidden;transition:background .3s,color .3s;line-height:1.6;
    background-image:url('../images/pixel-bg.png');background-repeat:repeat;background-size:128px
}
[data-theme="light"] body{background-image:none}


body::before{
    content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.4;
    background-image:
        radial-gradient(circle at 15% 20%,rgba(155,138,255,0.03) 0%,transparent 50%),
        radial-gradient(circle at 85% 80%,rgba(100,216,232,0.03) 0%,transparent 50%),
        linear-gradient(rgba(155,138,255,0.01) 1px,transparent 1px),
        linear-gradient(90deg,rgba(155,138,255,0.01) 1px,transparent 1px);
    background-size:100% 100%,100% 100%,32px 32px,32px 32px
}

a{color:var(--accent-cyan);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--accent-purple)}
::selection{background:var(--accent-purple);color:#fff}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg-secondary)}
::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--accent-purple)}

.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;position:relative;z-index:1}

h1,h2,h3{font-family:var(--font-pixel);letter-spacing:1px}
h1{font-size:16px;line-height:1.8}
h2{font-size:12px;line-height:1.8}
h3{font-size:10px;line-height:1.6}

@keyframes pixelFadeIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes glow{0%,100%{opacity:0.3}50%{opacity:0.6}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.animate-slide{animation:slideUp 0.3s ease-out forwards;opacity:0}
.pixel-border{box-shadow:3px 0 0 0 var(--border),-3px 0 0 0 var(--border),0 3px 0 0 var(--border),0 -3px 0 0 var(--border)}


body::after{
    content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
    background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px);
    opacity:0.5
}
[data-theme="light"] body::after{opacity:0.15}


.btn,.tab,.tool-card,.shell-card,.sidebar-link,.theme-btn,.category-header{cursor:pointer}
.form-input:focus,.form-textarea:focus,.form-select:focus{box-shadow:0 0 0 2px rgba(155,138,255,0.15),inset 0 0 8px rgba(155,138,255,0.05)}
.tool-card:active{transform:translateX(2px) translateY(2px)!important;transition:none}
.btn:active{transform:translateY(2px)!important;transition:none}
.hero-title{text-shadow:3px 3px 0 var(--pixel-shadow),0 0 20px rgba(155,138,255,0.15)}


[data-aos]{transition-timing-function:steps(8)!important}


.logo-skull{width:22px;height:22px;image-rendering:pixelated;border-radius:2px}


.ajax-out .page-body{animation:pageOut .25s ease forwards}
.ajax-in .page-body{animation:pageIn .35s ease forwards}
@keyframes pageOut{to{opacity:0;transform:translateY(-20px)}}
@keyframes pageIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}


.ci-purple{color:var(--accent-purple)}.ci-cyan{color:var(--accent-cyan)}.ci-green{color:var(--accent-green)}
.ci-orange{color:var(--accent-orange)}.ci-pink{color:var(--accent-pink)}.ci-blue{color:var(--accent-blue)}
.cc-purple{background:rgba(155,138,255,0.15);color:var(--accent-purple)}
.cc-cyan{background:rgba(100,216,232,0.15);color:var(--accent-cyan)}
.cc-green{background:rgba(110,214,154,0.15);color:var(--accent-green)}
.cc-orange{background:rgba(255,184,112,0.15);color:var(--accent-orange)}
.cc-pink{background:rgba(255,138,175,0.15);color:var(--accent-pink)}
.cc-blue{background:rgba(110,168,255,0.15);color:var(--accent-blue)}
.tc-purple:hover{border-color:var(--accent-purple);box-shadow:inset 3px 0 0 var(--accent-purple)}
.tc-cyan:hover{border-color:var(--accent-cyan);box-shadow:inset 3px 0 0 var(--accent-cyan)}
.tc-green:hover{border-color:var(--accent-green);box-shadow:inset 3px 0 0 var(--accent-green)}
.tc-orange:hover{border-color:var(--accent-orange);box-shadow:inset 3px 0 0 var(--accent-orange)}
.tc-pink:hover{border-color:var(--accent-pink);box-shadow:inset 3px 0 0 var(--accent-pink)}
.tc-blue:hover{border-color:var(--accent-blue);box-shadow:inset 3px 0 0 var(--accent-blue)}
.ti-purple{color:var(--accent-purple)}.ti-cyan{color:var(--accent-cyan)}.ti-green{color:var(--accent-green)}
.ti-orange{color:var(--accent-orange)}.ti-pink{color:var(--accent-pink)}.ti-blue{color:var(--accent-blue)}
.cat-purple .category-header{border-bottom-color:rgba(155,138,255,0.2)}
.cat-cyan .category-header{border-bottom-color:rgba(100,216,232,0.2)}
.cat-green .category-header{border-bottom-color:rgba(110,214,154,0.2)}
.cat-orange .category-header{border-bottom-color:rgba(255,184,112,0.2)}
.cat-pink .category-header{border-bottom-color:rgba(255,138,175,0.2)}
.cat-blue .category-header{border-bottom-color:rgba(110,168,255,0.2)}


.hero-title{display:flex;justify-content:center;gap:2px}
.hero-title .gt1{color:var(--accent-purple)}.hero-title .gt2{color:var(--accent-cyan)}
.hero-title .gt3{color:var(--accent-green)}.hero-title .gt4{color:var(--accent-orange)}
.hero-title .gt5{color:var(--accent-pink)}.hero-title .gt6{color:var(--accent-blue)}
.hero-title .gt7{color:var(--accent-cyan)}
.hero-title span{text-shadow:2px 2px 0 var(--pixel-shadow);animation:float 3s ease-in-out infinite}
.hero-title .gt2{animation-delay:.15s}.hero-title .gt3{animation-delay:.3s}
.hero-title .gt4{animation-delay:.45s}.hero-title .gt5{animation-delay:.6s}
.hero-title .gt6{animation-delay:.75s}.hero-title .gt7{animation-delay:.9s}


.hl-purple{color:var(--accent-purple);font-weight:600}
.hl-cyan{color:var(--accent-cyan);font-weight:600}
.hl-green{color:var(--accent-green);font-weight:600}


.hero-stats{display:flex;justify-content:center;gap:24px;margin-top:20px}
.hstat{text-align:center}
.hstat-num{display:block;font-family:var(--font-pixel);font-size:14px;color:var(--accent-cyan)}
.hstat-label{font-size:10px;color:var(--text-muted);font-family:var(--font-mono);margin-top:2px}


.typewriter{font-family:var(--font-mono);font-size:14px;color:var(--text-secondary)}


.home-footer-links{text-align:center;padding:30px 0;font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.home-footer-links a{color:var(--text-secondary);margin:0 6px}
.home-footer-links a:hover{color:var(--accent-cyan)}


.pixel-deco{position:fixed;font-size:8px;opacity:0.15;pointer-events:none;z-index:0;animation:floatDeco 8s ease-in-out infinite;font-family:var(--font-pixel)}
.d1{top:15%;left:5%;color:var(--accent-purple);animation-delay:0s}
.d2{top:60%;right:8%;color:var(--accent-cyan);animation-delay:2s;font-size:6px}
.d3{bottom:20%;left:12%;color:var(--accent-green);animation-delay:4s;font-size:10px}
.d4{top:35%;right:4%;color:var(--accent-orange);animation-delay:6s;font-size:7px}
@keyframes floatDeco{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(15deg)}}


.history-list{display:flex;flex-direction:column;gap:4px}
.history-item{display:flex;justify-content:space-between;padding:6px 10px;background:var(--bg-secondary);border:1px solid var(--border);cursor:pointer;font-family:var(--font-mono);font-size:11px;transition:all var(--transition)}
.history-item:hover{border-color:var(--accent-cyan);background:var(--bg-card-hover)}
.hi-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary)}
.hi-time{color:var(--text-muted);font-size:10px;margin-left:8px}