@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');:root{--navy:#101a35;--blue:#3b63e6;--text:#17213b;--muted:#78829a;--line:#e5e9f1;--bg:#f4f6fa}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px 'DM Sans',sans-serif}button,input,select{font:inherit}button,.button{cursor:pointer}header{height:72px;background:var(--navy);color:white;display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:12px}.brand{display:flex;align-items:center;gap:12px}.brand>b{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#e8bd63;color:#17213b}.brand strong,.brand small{display:block}.brand strong{font:800 13px Manrope;letter-spacing:.1em}.brand small{color:#aeb9d2;font-size:11px;margin-top:4px}.local{font-size:10px;color:#c5d0e9}.button,header button{padding:9px 12px;background:#233153;color:#e4eafa;border:1px solid #39496a;border-radius:8px;font-size:11px}header input{display:none}.layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 72px)}nav{background:var(--navy);color:#aeb9d2;padding:22px 13px;display:flex;flex-direction:column;gap:6px}nav>p{font-size:10px;letter-spacing:.15em;padding-left:12px;color:#7181a5}nav>button{text-align:left;border:0;background:transparent;color:#aeb9d2;padding:13px;border-radius:9px}nav>button.active,nav>button:hover{background:#23345d;color:white;border-left:3px solid #e8bd63}nav aside{margin-top:auto;padding:14px;background:#172546;border:1px solid #2d3d61;border-radius:10px;font-size:12px;line-height:1.6}nav aside b{color:#f0ce82}nav aside p{margin-bottom:0}nav>small{font-size:9px;color:#64769e;margin:15px 6px 0}main{padding:28px clamp(14px,3vw,42px);max-width:1550px;width:100%;margin:auto}.pagehead,.between{display:flex;align-items:flex-end;justify-content:space-between;gap:15px}.pagehead>div>small{font-size:10px;color:var(--blue);font-weight:bold;letter-spacing:.13em}.pagehead h1{font:800 32px Manrope;margin:7px 0}.pagehead p,.panel>p{color:var(--muted);font-size:12px;line-height:1.6}.pagehead>label{font-size:10px;color:var(--muted);font-weight:bold}.pagehead select{display:block;margin-top:6px;padding:10px;border:1px solid var(--line);border-radius:8px;background:white}.notice{padding:12px 15px;background:#fff8e9;border:1px solid #f1dfb6;border-radius:9px;color:#77531d;font-size:12px;margin:20px 0}.tab{display:none}.tab.show{display:block}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.metrics article,.panel{background:white;border:1px solid var(--line);border-radius:15px;box-shadow:0 3px 15px #14244805}.metrics article{padding:18px}.metrics span,.metrics small{display:block;color:var(--muted);font-size:11px}.metrics strong{display:block;font:800 26px Manrope;margin:11px 0 5px}.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}.panel{padding:20px;margin-bottom:16px;min-width:0}.cols .panel{margin-bottom:0}.panel h2{font:800 16px Manrope;margin:0}.panel>p{margin:7px 0 16px}.empty{padding:24px 12px;text-align:center;border:1px dashed #dfe4ef;border-radius:10px;color:#8993a8;font-size:12px;line-height:1.6}.primary,button{border:1px solid #dfe4ee;background:#f3f5fa;color:#35415c;padding:10px 13px;border-radius:8px;font-weight:700;font-size:12px}.primary{background:var(--blue);color:white;border-color:var(--blue)}.danger{background:#fff0f1;color:#b42338;border-color:#f3cbd1}form{display:flex;flex-direction:column;gap:13px}form label,.controls label{display:block;font-size:11px;color:var(--muted);font-weight:700}form input,form select,.controls input,.controls select,#search,#freqMode{display:block;width:100%;margin-top:6px;padding:10px 11px;border:1px solid #dce2ee;border-radius:8px;background:white;color:var(--text);font-size:12px}.check{display:flex;align-items:center;gap:8px}.check input{width:auto;margin:0}.muted,form small{font-size:11px;color:#858fa4;line-height:1.6}.error{color:#c43e50;font-size:12px}.between{align-items:center;margin-bottom:15px}.between #search{max-width:230px}.freq{display:grid;grid-template-columns:repeat(10,1fr);gap:7px}.ball{padding:9px 2px;text-align:center;background:#fbfcff;border:1px solid #e7ebf3;border-radius:8px}.ball b{display:block}.ball small{display:block;margin-top:4px;color:#8792a8}.ball.hot{background:#fff2e9;border-color:#f4d2b6}.ball.cold{background:#f2f5fb}.pills{display:flex;gap:4px;flex-wrap:wrap}.pill{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 5px;border-radius:50%;background:#eef2ff;color:#3457c9;font-size:10px;font-weight:bold}table{border-collapse:collapse;width:100%;font-size:12px}th,td{text-align:left;padding:11px 8px;border-bottom:1px solid #edf0f5;white-space:nowrap}th{font-size:10px;color:#8490a6;background:#f8f9fc}.scroll{overflow:auto}.delete{background:#fff0f1;color:#bd3042;padding:5px 7px;font-size:10px}.combos{display:flex;flex-direction:column;gap:9px}.combo{padding:12px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:10px}.combo small{display:block;color:var(--muted);font-size:10px;margin-bottom:7px}.controls{display:grid;grid-template-columns:1fr 1fr 1.2fr auto;gap:10px;align-items:end;margin:20px 0}.reportgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:15px}.reportgrid>div,.status{background:#f7f8fc;border:1px solid var(--line);padding:14px;border-radius:10px}.reportgrid small,.reportgrid b{display:block}.reportgrid small{font-size:10px;color:var(--muted)}.reportgrid b{font:800 22px Manrope;margin-top:7px}.status{margin-top:15px;font-size:12px;line-height:1.7}.status.warn{background:#fff6e5;color:#80571a}.status.over{background:#fff0f1;color:#a3293c}.bar{height:8px;border-radius:20px;background:#e8ecf4;overflow:hidden;margin:8px 0}.bar i{display:block;height:100%;background:var(--blue)}footer{text-align:center;color:#a1a9b9;font-size:10px;padding:24px 0 8px}@media(max-width:950px){.layout{grid-template-columns:175px 1fr}.metrics{grid-template-columns:repeat(2,1fr)}.freq{grid-template-columns:repeat(8,1fr)}.controls{grid-template-columns:1fr 1fr}.controls button{min-height:38px}}@media(max-width:680px){header{padding:12px;height:auto;flex-wrap:wrap}.local{display:none}.layout{display:block}nav{position:sticky;top:0;z-index:5;flex-direction:row;overflow-x:auto;padding:7px;gap:3px}nav>p,nav aside,nav>small{display:none}nav>button{white-space:nowrap;padding:10px;font-size:11px}.pagehead{align-items:flex-start;flex-direction:column}.pagehead>label{width:100%}.pagehead select{width:100%}.pagehead h1{font-size:27px}main{padding:20px 12px}.cols{grid-template-columns:1fr}.panel{padding:15px}.freq{grid-template-columns:repeat(5,1fr)}.controls{grid-template-columns:1fr 1fr}.controls label:nth-child(3),.controls button{grid-column:1/-1}.reportgrid{grid-template-columns:1fr}.between{align-items:flex-start;flex-wrap:wrap}.between #search{max-width:none}}

/* Responsive PWA install control and device-size refinements */
.install-app{background:#e9efff;color:#2347a8;border-color:#cbd7ff}
button,label.button{touch-action:manipulation;min-height:38px}
input,select{min-height:40px}
@media(max-width:680px){header{gap:8px}header .brand{flex:1;min-width:160px}header #installApp,header #export,header .button{flex:1;text-align:center;padding:10px 8px;font-size:11px}nav{scrollbar-width:thin}nav>button{min-height:40px}main{padding-bottom:calc(18px + env(safe-area-inset-bottom))}.metrics article{padding:14px}.metrics strong{font-size:23px}.combo{align-items:flex-start;flex-wrap:wrap}}
@media(min-width:681px) and (max-width:1100px){.layout{grid-template-columns:190px minmax(0,1fr)}.freq{grid-template-columns:repeat(6,minmax(0,1fr))}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
