:root{--bg:#F8F7F4;--bg2:#FFFFFF;--bg3:#F1EFE9;--bg4:#E9E6E0;--surf:#FFFFFF;--bdr:#E4E1DB;--bdr2:#CCC8C0;--ink:#0D1117;--ink2:#2A3141;--ink3:#586070;--ink4:#939BAC;--blue:#1546C0;--blue2:#5B8AF5;--blue-g:rgba(21, 70, 192, .08);--blue-b:rgba(21, 70, 192, .2);--purp:#6D28D9;--purp2:#A78BFA;--teal:#047857;--teal2:#34D399;--s1:0 1px 3px rgba(0, 0, 0, .06),0 1px 8px rgba(0, 0, 0, .04);--s2:0 4px 16px rgba(0, 0, 0, .08),0 1px 4px rgba(0, 0, 0, .04);--s3:0 12px 40px rgba(0, 0, 0, .10),0 2px 8px rgba(0, 0, 0, .05);--r:12px;--t:.25s cubic-bezier(0.4, 0, 0.2, 1)}[data-theme=dark]{--bg:#080B14;--bg2:#0E1220;--bg3:#141928;--bg4:#1B2235;--surf:#141928;--bdr:rgba(255, 255, 255, .07);--bdr2:rgba(255, 255, 255, .14);--ink:#EEF0F8;--ink2:#C4CCDC;--ink3:#8290A8;--ink4:#4E5A70;--blue:#5B8AF5;--blue-g:rgba(91, 138, 245, .12)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--ink);font-family:Outfit,sans-serif;line-height:1.6;transition:background .4s,color .4s;min-height:100vh}a{text-decoration:none;color:inherit}header{height:64px;display:flex;align-items:center;padding:0 5vw;background:rgba(248,247,244,.8);backdrop-filter:blur(20px);border-bottom:1px solid var(--bdr);position:sticky;top:0;z-index:100}[data-theme=dark] header{background:rgba(8,11,20,.8)}.logo{display:flex;align-items:center;gap:10px;font-family:'Playfair Display',serif;font-weight:700;font-size:1.2rem}.logo-icon{width:32px;height:32px;background:var(--blue);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff}.container{max-width:1100px;margin:40px auto;padding:0 20px}.tool-card{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r);padding:30px;box-shadow:var(--s1);transition:transform var(--t),box-shadow var(--t)}.tool-header{margin-bottom:25px;border-bottom:1px solid var(--bdr);padding-bottom:15px}.tool-title{font-family:'Playfair Display',serif;font-size:2rem;margin-bottom:8px}.tool-desc{color:var(--ink3);font-size:.95rem}.input-group{margin-bottom:20px}label{display:block;font-weight:600;font-size:.85rem;margin-bottom:8px;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em}input[type=number],input[type=text],select,textarea{width:100%;padding:12px 16px;border-radius:8px;border:1.5px solid var(--bdr2);background:var(--bg2);color:var(--ink);font-family:Outfit,sans-serif;font-size:1rem;transition:border-color var(--t),box-shadow var(--t);outline:0}input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-g)}textarea{min-height:200px;font-family:Monaco,Consolas,monospace;font-size:.9rem;resize:vertical}.btn-row{display:flex;gap:12px;margin-bottom:25px}.btn{padding:12px 24px;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all var(--t);display:inline-flex;align-items:center;gap:8px;border:none}.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 8px 20px var(--blue-b)}.btn-secondary{background:var(--bg3);color:var(--ink2);border:1px solid var(--bdr2)}.btn-secondary:hover{background:var(--bg4)}.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:30px}.category-title{grid-column:1/-1;font-family:'Playfair Display',serif;font-size:1.5rem;margin:40px 0 20px;display:flex;align-items:center;gap:12px}.category-title::after{content:'';flex:1;height:1px;background:var(--bdr)}.grid-card{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r);padding:24px;transition:all var(--t);display:block}.grid-card:hover{transform:translateY(-5px);border-color:var(--blue);box-shadow:var(--s2)}.grid-card h3{font-family:'Playfair Display',serif;margin-bottom:10px}.grid-card p{font-size:.85rem;color:var(--ink3);line-height:1.5}.footer{text-align:center;padding:60px 0;color:var(--ink4);font-size:.85rem}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade{animation:fadeIn .5s ease forwards}@media (max-width:768px){.btn-row{flex-direction:column}.tool-title{font-size:1.5rem}}