:root{--ink:#0f172a;--text:#334155;--muted:#64748b;--blue:#2563eb;--blue-dark:#1d4ed8;--green:#15803d;--green-bg:#f0fdf4;--amber:#92400e;--amber-bg:#fff7ed;--red:#b91c1c;--red-bg:#fef2f2;--bg:#f6f8fb;--white:#fff;--border:#dbe2ea;--shadow:0 8px 28px rgba(15,23,42,.07)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;line-height:1.5}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit}.container{width:min(1080px,calc(100% - 28px));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}.nav{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{text-decoration:none;font-weight:900;white-space:nowrap}.brand small{font-size:.74rem;color:var(--muted);font-weight:700;margin-left:5px}.nav-links{display:flex;gap:8px}.nav-links a{padding:8px 10px;border-radius:9px;text-decoration:none;font-weight:750;color:var(--muted)}.nav-links a:hover,.nav-links a.active{background:#eff6ff;color:var(--blue)}
.hero{padding:22px 0 12px;text-align:center}.role-badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;font-size:.72rem;font-weight:900;letter-spacing:.03em}.hero h1{margin:9px 0 8px;font-size:clamp(1.8rem,5vw,2.7rem);line-height:1.05}.hero p{margin:0 auto;color:var(--muted);max-width:760px}
.adsterra-native-slot{width:min(100%,760px);margin:14px auto 20px;min-height:0;padding:0 10px;text-align:center;overflow:visible}.adsterra-native-slot>div{width:100%!important;max-width:100%!important;margin-inline:auto!important}.adsterra-native-slot::before{content:"Advertisement";display:block;margin:0 0 7px;color:#94a3b8;font-size:.72rem;line-height:1.2;letter-spacing:.03em}
.card{background:var(--white);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}.calc{padding:18px;margin-bottom:26px}.quick{padding:11px 13px;margin:6px auto 12px;border:1px solid #dbeafe;border-radius:13px;background:#eff6ff;color:#1e3a8a}.quick small{color:#475569}.modebar{display:flex;gap:7px;padding:4px;background:#f1f5f9;border:1px solid var(--border);border-radius:11px;margin-bottom:15px}.mode{flex:1;border:0;background:transparent;border-radius:8px;padding:10px;font-weight:800;color:var(--muted)}.mode.active{background:#fff;color:var(--blue);box-shadow:0 1px 5px #0001}
.grid{display:grid;gap:14px}.grid2{grid-template-columns:1fr 1fr}.field label{display:block;font-weight:850;margin-bottom:6px;font-size:.9rem}.help{margin:0 0 8px;color:var(--muted);font-size:.8rem;line-height:1.4}.input,.select,.textarea{width:100%;min-height:50px;border:1px solid var(--border);border-radius:10px;padding:11px 12px;background:#fff;color:var(--ink)}.input:focus,.select:focus,.textarea:focus,button:focus,a:focus{outline:3px solid rgba(37,99,235,.22);outline-offset:2px}
.ratio-presets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.preset{border:1px solid #cbd5e1;background:#fff;border-radius:9px;padding:8px 11px;font-weight:750}.preset.active{border-color:var(--blue);background:#eff6ff;color:#1d4ed8}.primary{width:100%;min-height:54px;border:0;border-radius:11px;background:var(--blue);color:#fff;font-weight:900;font-size:1rem}.primary:hover{background:var(--blue-dark)}.secondary{min-height:44px;border:1px solid var(--border);background:#fff;color:var(--ink);border-radius:10px;padding:9px 12px;font-weight:800}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.result{margin-top:15px;padding:14px;border-radius:14px;border:1px solid #bbf7d0;background:var(--green-bg)}.result h2{margin:0 0 10px;font-size:1rem;color:var(--green)}.result-line{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid #dcfce7}.result-line:last-of-type{font-weight:900}.value{font-weight:900}.status{margin-top:9px;color:#166534;font-size:.8rem}.hidden{display:none!important}
.pro-grid{display:grid;grid-template-columns:minmax(300px,1fr) minmax(360px,1.1fr);gap:16px}.section-title{margin:0 0 12px;font-size:1.05rem}.pro-panel{padding:18px}.details{border:1px solid var(--border);border-radius:12px;padding:12px;margin-top:12px;background:#fcfcfd}.details summary{font-weight:850;cursor:pointer}.error{margin-top:12px;padding:10px 12px;border-radius:10px;color:var(--red);background:var(--red-bg);border:1px solid #fecaca}.warning{margin-top:12px;padding:10px 12px;border-radius:10px;color:var(--amber);background:var(--amber-bg);border:1px solid #fdba74}.mixsheet{overflow-x:auto}.mixsheet table{width:100%;border-collapse:collapse;font-size:.9rem}.mixsheet th,.mixsheet td{padding:9px;border-bottom:1px solid var(--border);text-align:left}.mixsheet th{background:#f8fafc;font-weight:800}.mixsheet tfoot td{font-weight:900;background:#f1f5f9}.save-list{margin-top:10px;display:grid;gap:8px}.save-item{border:1px solid var(--border);border-radius:10px;padding:10px;background:#f8fafc}.save-item strong{display:block}.muted{color:var(--muted);font-size:.8rem}.footer{margin-top:26px;background:#fff;border-top:1px solid var(--border);padding:26px 0 40px;color:var(--muted);font-size:.82rem}.footerlinks{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}.footerlinks a{text-decoration:none}
@media(max-width:780px){.nav{min-height:56px}.nav-links a{padding:7px 8px;font-size:.82rem}.hero{text-align:left;padding:16px 0 8px}.pro-grid,.grid2{grid-template-columns:1fr}.calc{padding:13px}.adsterra-native-slot{width:100%;max-width:430px}.modebar{margin-bottom:12px}.mode{min-height:44px;font-size:.84rem;padding:8px 7px}.grid{gap:12px}.primary{min-height:56px}.actions .secondary{flex:1}.mixsheet{font-size:.84rem}}
@media(max-width:390px){.container{width:calc(100% - 20px)}.brand{font-size:.95rem}.nav-links a{font-size:.76rem;padding:6px}.hero h1{font-size:1.7rem}.mode{font-size:.78rem}}
@media print{.site-header,.hero,.adsterra-native-slot,.quick,.actions,.footer,.no-print{display:none!important}body{background:#fff}.card{border:0;box-shadow:none}.calc{padding:0}.mixsheet{overflow:visible}}