.byte-calculator-page{background:var(--bg);color:var(--ink)}
.byte-hero{padding-bottom:24px}
.byte-hero h1{max-width:900px;margin-inline:auto}
.byte-tool{padding-bottom:34px}
.byte-tool-card{border:2px solid var(--line);border-radius:28px;background:var(--paper);box-shadow:var(--shadow);padding:22px}
.byte-tool-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:18px}
.byte-tool-heading h2{margin:4px 0 6px;font-size:clamp(24px,3vw,38px);line-height:1.08}
.byte-tool-heading p{margin:0;max-width:680px;color:var(--muted);line-height:1.65}
.byte-state,.byte-result-mode{display:inline-flex;align-items:center;min-height:32px;padding:6px 11px;border:2px solid var(--line);border-radius:999px;background:var(--lavender);font-size:12px;font-weight:900;white-space:nowrap}
.byte-state.live{background:var(--mint);color:#123b2a}.byte-state.empty{background:var(--wash);color:#8e2e2e}
.byte-tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:stretch}
.byte-input-panel,.byte-result-panel{border:2px solid rgba(55,39,51,.18);border-radius:20px;padding:17px;background:#fffdfc}
.byte-input-panel{display:flex;flex-direction:column;gap:10px}
.byte-textarea{width:100%;min-height:300px;resize:vertical;padding:14px;border:2px solid rgba(55,39,51,.24);border-radius:15px;background:#fff;color:var(--ink);font:600 15px/1.72 var(--sans);outline:none}
.byte-textarea:focus,.byte-select:focus,.byte-button:focus-visible{border-color:var(--violet);box-shadow:0 0 0 4px rgba(154,128,255,.2);outline:none}
.byte-help{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.byte-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:900}
.byte-select{min-width:190px;padding:9px 12px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-weight:800}
.byte-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.byte-button{min-height:44px;padding:9px 13px;border:2px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:900 13px/1 var(--sans);cursor:pointer;box-shadow:2px 2px 0 rgba(55,39,51,.1);transition:transform .18s var(--bounce),box-shadow .18s var(--bounce),background .15s ease}
.byte-button:hover{transform:translateY(-2px);box-shadow:3px 4px 0 rgba(55,39,51,.13)}
.byte-button.primary{background:var(--sun)}.byte-button.subtle{background:var(--soft)}
.byte-error{margin:0;padding:9px 11px;border:2px solid #d56d6d;border-radius:10px;background:#fff0f0;color:#8e2e2e;font-size:13px;font-weight:800}
.byte-result-panel{display:flex;flex-direction:column;gap:14px}
.byte-result-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.byte-result-title-row h3{margin:0;font-size:20px}
.byte-result-mode{background:var(--soft);font-size:11px}
.byte-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.byte-result-card{display:flex;flex-direction:column;gap:5px;padding:13px;border:2px solid rgba(55,39,51,.16);border-radius:15px;background:#fff;min-height:112px}.byte-result-card.accent{background:var(--lavender)}.byte-result-card.warm{background:var(--cream)}
.byte-result-card span{font-size:12px;font-weight:900;color:var(--muted)}.byte-result-card strong{font:950 clamp(25px,4vw,36px)/1 var(--mono);color:var(--ink);overflow-wrap:anywhere}.byte-result-card small{font-size:11px;color:var(--muted);line-height:1.35}
.byte-progress-block{padding:14px;border:2px solid rgba(55,39,51,.16);border-radius:15px;background:var(--soft)}.byte-progress-label{display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:900}.byte-progress-track{height:13px;margin-top:10px;border:2px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}.byte-progress-fill{height:100%;width:78%;border-radius:999px;background:var(--mint);transition:width .2s ease,background .2s ease}.byte-progress-fill.warning{background:var(--sun)}.byte-progress-fill.danger{background:var(--peach)}.byte-progress-block p{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.byte-privacy{margin-top:16px;padding:12px 15px;border:2px solid rgba(18,65,40,.25);border-radius:14px;background:rgba(78,223,166,.13);color:#124128;font-size:13px;font-weight:800;line-height:1.6}
.byte-section{padding-top:20px;padding-bottom:20px}.byte-section .info,.byte-table-section .info,.byte-steps-section .info{max-width:940px;margin-inline:auto}.byte-section h2,.byte-table-section h2,.byte-steps-section h2{margin-bottom:13px}.byte-section p,.byte-table-section p,.byte-related-section p{line-height:1.8}
.byte-table-section{padding-top:20px;padding-bottom:20px}.byte-table-section .size-table{min-width:680px}.table-note{margin-top:12px;color:var(--muted);font-size:13px}
.byte-step-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.byte-step{padding:16px;border:2px solid rgba(55,39,51,.16);border-radius:16px;background:#fff}.byte-step>span{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--sun);border:2px solid var(--line);font-weight:950}.byte-step h3{margin:12px 0 6px;font-size:17px}.byte-step p,.byte-use p{margin:0;font-size:14px;line-height:1.65;color:var(--muted)}
.byte-use-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.byte-use{padding:16px;border-radius:16px;border:2px solid rgba(55,39,51,.16);background:var(--paper)}.byte-use h3{font-size:17px;margin:0 0 8px}
.byte-limits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin:0;padding-left:20px}.byte-limits li{padding:8px 0;line-height:1.65}.byte-related-section{padding-bottom:52px}.byte-home-link{display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;border:2px solid var(--line);border-radius:12px;background:var(--sun);color:var(--ink);font-weight:900;text-decoration:none}
@media (max-width:900px){.byte-tool-grid{grid-template-columns:1fr}.byte-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.byte-use-grid{grid-template-columns:1fr 1fr}}
@media (max-width:580px){.byte-tool-card{padding:13px;border-radius:22px}.byte-tool-heading{display:block}.byte-state{margin-top:12px}.byte-textarea{min-height:240px}.byte-actions .byte-button{flex:1 1 calc(50% - 8px)}.byte-result-grid{grid-template-columns:1fr 1fr}.byte-step-grid,.byte-use-grid,.byte-limits{grid-template-columns:1fr}.byte-result-card{min-height:100px}.byte-result-card strong{font-size:26px}.byte-table-section .size-table{min-width:600px}}