*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;margin:0;color:#1e293b;line-height:1.7;background:#eef2ff}
a{color:#4f46e5}
a:hover{color:#312e81}
header{background:linear-gradient(120deg,#1e1b4b,#4338ca 55%,#06b6d4);color:#fff;padding:1.1rem 1rem;box-shadow:0 4px 20px rgba(30,27,75,.25)}
header a{color:#fff;text-decoration:none}
nav{display:flex;flex-wrap:wrap;gap:1.1rem;max-width:1280px;margin:0 auto;align-items:center}
nav a{font-weight:700;padding:.35rem .6rem;border-radius:999px}
nav a.logo{display:flex;align-items:center;gap:.5rem;padding-left:0;flex:none}
.nav-links{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center;flex:1;align-items:center}
.more-tools{display:none;position:relative}
.more-tools summary{list-style:none;cursor:pointer;font-weight:700;padding:.35rem .6rem;border-radius:999px;color:#fff}
.more-tools summary::-webkit-details-marker{display:none}
.more-menu{display:none;position:absolute;top:2.2rem;left:0;min-width:170px;background:#fff;border:1px solid #e0e7ff;border-radius:12px;box-shadow:0 12px 28px rgba(30,27,75,.20);padding:.5rem;z-index:20}
.more-tools[open] .more-menu{display:block}
.more-menu a{display:block;color:#4338ca !important;padding:.5rem .8rem;border-radius:8px}
.more-menu a:hover{background:#eef2ff}
nav a.logo img{width:36px;height:36px;border-radius:9px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
nav a:first-child{font-size:1.15rem;letter-spacing:-.02em}
nav a:hover{background:rgba(255,255,255,.18)}
main{max-width:1000px;margin:2rem auto;padding:2rem;background:#fff;border-radius:20px;box-shadow:0 10px 35px rgba(30,27,75,.10)}
.layout{max-width:1280px;margin:2rem auto;padding:0 1rem;display:grid;grid-template-columns:1fr 300px;gap:1.5rem;align-items:start}
.layout main{margin:0;max-width:none;width:100%}
.sidebar{position:sticky;top:1rem}
.sidebox{background:#fff;border:1px solid #e0e7ff;border-radius:16px;padding:1.25rem;margin-bottom:1.25rem;box-shadow:0 6px 20px rgba(99,102,241,.10)}
.sidebox h3{margin-top:0;color:#312e81}
.sidebox ul{list-style:none;padding:0;margin:0}
.sidebox li{margin:.55rem 0}
.sidebox li a{font-weight:700;text-decoration:none}
.sidebox li a:hover{text-decoration:underline}
.sidebox p{color:#475569}
@media(max-width:900px){.layout{grid-template-columns:1fr}.sidebar{position:static}}
h1{line-height:1.2;font-size:2.2rem;letter-spacing:-.03em;color:#0f172a}
h1:after{content:"";display:block;width:64px;height:5px;margin-top:.6rem;border-radius:99px;background:linear-gradient(90deg,#4f46e5,#06b6d4)}
h2{margin-top:2.2rem;color:#0f172a;letter-spacing:-.02em}
h3{color:#312e81}
.card{border:1px solid #e0e7ff;border-top:6px solid #4f46e5;border-radius:16px;padding:1.4rem;margin:1rem 0;background:#fff;box-shadow:0 6px 20px rgba(99,102,241,.12);transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 16px 32px rgba(99,102,241,.22)}
.card a{font-weight:800;text-decoration:none;font-size:1.15rem}
.card p{color:#475569;margin:.6rem 0 0}
.grid .card:nth-child(6n+1){border-top-color:#4f46e5;background:linear-gradient(180deg,#eef2ff,#fff 55%)}
.grid .card:nth-child(6n+1) a{color:#4338ca}
.grid .card:nth-child(6n+2){border-top-color:#0891b2;background:linear-gradient(180deg,#ecfeff,#fff 55%)}
.grid .card:nth-child(6n+2) a{color:#0e7490}
.grid .card:nth-child(6n+3){border-top-color:#ea580c;background:linear-gradient(180deg,#fff7ed,#fff 55%)}
.grid .card:nth-child(6n+3) a{color:#c2410c}
.grid .card:nth-child(6n+4){border-top-color:#059669;background:linear-gradient(180deg,#ecfdf5,#fff 55%)}
.grid .card:nth-child(6n+4) a{color:#047857}
.grid .card:nth-child(6n+5){border-top-color:#db2777;background:linear-gradient(180deg,#fdf2f8,#fff 55%)}
.grid .card:nth-child(6n+5) a{color:#be185d}
.grid .card:nth-child(6n+6){border-top-color:#7c3aed;background:linear-gradient(180deg,#f5f3ff,#fff 55%)}
.grid .card:nth-child(6n+6) a{color:#6d28d9}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem}
.toolbox{border:1px solid #c7d2fe;border-top:6px solid #06b6d4;border-radius:16px;padding:1.5rem;margin:1.5rem 0;background:linear-gradient(180deg,#eef2ff,#fff);box-shadow:0 8px 24px rgba(99,102,241,.14)}
label{display:block;margin:.8rem 0 .3rem;font-weight:700;color:#334155}
input,select{width:100%;padding:.65rem .8rem;border:1.5px solid #cbd5e1;border-radius:10px;font-size:1rem;background:#fff}
input:focus,select:focus{outline:none;border-color:#4f46e5;box-shadow:0 0 0 3px rgba(99,102,241,.20)}
button{background:linear-gradient(120deg,#4f46e5,#06b6d4);color:#fff;border:0;padding:.75rem 1.25rem;border-radius:999px;font-size:1rem;font-weight:700;cursor:pointer;margin-top:1rem;box-shadow:0 6px 16px rgba(79,70,229,.30)}
button:hover{filter:brightness(1.08)}
.result{margin-top:1rem;padding:1rem 1.2rem;background:#dcfce7;border:1px solid #86efac;border-radius:12px;font-weight:700;color:#14532d;white-space:pre-wrap}
.adslot{border:1.5px dashed #94a3b8;padding:.9rem;text-align:center;color:#64748b;margin:1.5rem 0;border-radius:12px;background:#f8fafc}
footer{max-width:none;margin:2rem 0 0;padding:2rem 1rem 2.5rem;color:#475569;font-size:.95rem;text-align:center;background:#fff;border-top:4px solid #4f46e5;box-shadow:0 -4px 20px rgba(30,27,75,.06)}
footer p{max-width:1000px;margin:.6rem auto}
footer p:first-child{font-size:1rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
footer p:first-child a{margin:0}
footer a{display:inline-block;font-weight:700;text-decoration:none;color:#4338ca;background:#eef2ff;padding:.4rem .9rem;border-radius:999px;margin:.25rem;border:1px solid #e0e7ff}
footer a:hover{background:linear-gradient(120deg,#4f46e5,#06b6d4);color:#fff;border-color:transparent}
footer p:last-child{color:#64748b;font-size:.9rem}
.calc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}
.calc-grid button{margin:0;border-radius:12px}
.display{font-size:1.5rem;text-align:right;background:#0f172a;color:#fff;padding:.8rem;border:1px solid #0f172a;border-radius:12px;min-height:3rem;overflow-x:auto}
@media(max-width:600px){.calc-grid{grid-template-columns:repeat(4,1fr)}main{padding:1.25rem;margin:1rem}h1{font-size:1.7rem}}
@media(max-width:700px){nav{flex-direction:column;align-items:flex-start;gap:.75rem}nav a.logo{padding:.25rem 0}.nav-links{flex:none;width:100%;justify-content:flex-start;gap:.5rem .9rem}nav a{padding:.3rem .5rem}.nav-links > a:nth-child(n+5){display:none}.more-tools{display:block}footer{padding:1.5rem .75rem 2rem}footer a{padding:.35rem .75rem;font-size:.9rem}footer p:last-child{font-size:.85rem;line-height:1.5}}