/* KOS usage portal: design language matched to supplied signup.kos.net screenshots. */
:root{font-family:Arial,Helvetica,sans-serif;color:#0b213b;background:#f7f9fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh}a{color:#005697;text-decoration:none;font-weight:600}a:hover{text-decoration:underline}.wrap{max-width:1110px;margin:0 auto;padding:0 20px}.top{background:#fff;border-bottom:1px solid #e0e4e9}.top-inner{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:20px}.top img{width:78px;height:auto;display:block}.top-contact{display:flex;align-items:center;gap:24px;color:#66758b;font-size:14px}.top-contact a{color:#005697}.top-contact .signout{border-left:1px solid #dce2e9;padding-left:19px}.heading{margin:32px 0 20px}h1{font-size:30px;line-height:1.25;letter-spacing:-.5px;margin:0 0 10px;color:#062b4d}h2{font-size:19px;color:#0c1c32;margin:0 0 16px}.muted{color:#697990}.eyebrow{color:#005697;font-size:11px;font-weight:700;letter-spacing:1.3px;margin:0 0 10px}.panel{background:#fff;border:1px solid #dfe4eb;border-radius:12px;padding:21px}.dates{display:flex;align-items:end;gap:14px;flex-wrap:wrap}.dates label{flex:1;min-width:170px}label{font-size:14px;font-weight:600;display:block;margin-bottom:7px}input{display:block;width:100%;margin-top:7px;padding:13px;border:1px solid #cdd5e0;border-radius:8px;font:inherit;background:#fff;color:#0c2440;min-height:46px}input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #7ebaff;outline-offset:2px}button{background:#005697;color:#fff;border:1px solid #005697;border-radius:8px;padding:13px 23px;font-size:15px;font-weight:700;min-height:46px;cursor:pointer}button:hover{background:#004778}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:17px 0}.stats .panel{background:#fff}.stats span{display:block;color:#65768d;font-size:13px}.stats strong{display:block;font-size:24px;margin-top:13px;letter-spacing:-.5px;color:#071f3b}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;text-align:left}th{background:#edf4fb;color:#17466a;font-size:13px}th,td{padding:13px;border-bottom:1px solid #e5eaf0;white-space:nowrap}td{font-size:14px}tbody tr:nth-child(even) td{background:#fbfcfe}tbody tr:hover td{background:#edf5fd}.error{padding:13px 15px;color:#bf202b;background:#fff3f3;border:1px solid #ffc4c8;border-radius:8px}.login-body{background:#f7f9fb}.login-area{padding:68px 20px}.login-card{background:#fff;border:1px solid #dfe4eb;padding:34px;max-width:455px;width:100%;border-radius:12px;margin:0 auto}.login-card h1{font-size:28px}.login-card form{margin-top:25px}.login-card input{margin-bottom:17px}.login-card button{width:100%;margin-top:8px}.login-card .subtitle{margin-top:0;font-size:15px}.help{font-size:13px;color:#697990;margin-top:20px;text-align:center}.usage-note{font-size:13px;margin:14px 0 18px}.footer{padding:28px 20px 36px;color:#68778b;font-size:12px;text-align:center}@media(max-width:800px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.top-contact{gap:12px;font-size:12px}.stats strong{font-size:21px}}@media(max-width:520px){.top-inner{min-height:66px}.top-contact{flex-wrap:wrap;justify-content:flex-end;gap:5px 12px}.top-contact .signout{border:0;padding:0}.heading{margin-top:24px}.login-area{padding-top:35px}.login-card{padding:24px}.dates label{min-width:100%;margin:0}.dates button{width:100%}.stats{grid-template-columns:1fr 1fr}.stats .panel{padding:15px}.stats strong{font-size:18px}h1{font-size:26px}}@media(max-width:340px){.stats{grid-template-columns:1fr}}

/* Billing-cycle navigation matches the signup site's outlined action buttons. */
.period-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:17px;padding-top:16px;border-top:1px solid #e5eaf0}
.period-link{display:inline-flex;justify-content:center;align-items:center;min-height:42px;padding:10px 17px;border:1px solid #005697;border-radius:8px;background:#fff;color:#005697;font-size:14px;font-weight:700;text-decoration:none}
.period-link:hover{background:#edf5fd;text-decoration:none}
.period-link.disabled{background:#f2f4f7;color:#a0aab7;border-color:#d9dfe7;cursor:not-allowed}
@media(max-width:520px){.period-nav{flex-wrap:nowrap;gap:8px}.period-link{font-size:13px;padding:10px 9px;flex:1}}

/* Daily usage table / graph switch */
[hidden]{display:none!important}
.usage-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.usage-heading h2{margin:0}
.view-switch{display:flex;padding:3px;border:1px solid #dce3eb;background:#f1f4f8;border-radius:9px;gap:3px}
.view-switch .view-option{min-height:36px;padding:8px 19px;border:1px solid transparent;background:transparent;color:#526780;border-radius:7px;font-size:14px}
.view-switch .view-option:hover{background:#e7eef6;color:#005697}
.view-switch .view-option.is-active{background:#005697;color:#fff;border-color:#005697;box-shadow:0 1px 3px #0a2c5020}
.chart-legend{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:5px 0 16px;color:#54667b;font-size:13px}
.chart-legend span{display:inline-flex;align-items:center;gap:7px}
.legend-key{width:12px;height:12px;display:inline-block;border-radius:3px}.legend-download{background:#005697}.legend-upload{background:#77b8ed}.legend-free{background:#2a987e}
.chart-scroll{width:100%;overflow-x:auto;overflow-y:hidden;padding-bottom:3px}
.chart-scroll svg{display:block;max-width:none}
.chart-footnote{font-size:12px;margin:12px 0 0}
@media(max-width:520px){.usage-heading{align-items:flex-start;flex-direction:column}.view-switch{width:100%}.view-switch .view-option{flex:1}}

/* Usage totals: visually distinct from daily data, with accurate totals from unrounded bytes. */
tfoot .usage-total-row th,tfoot .usage-total-row td{background:#e3f0fc;color:#0b3157;font-weight:700;border-top:2px solid #005697;border-bottom:1px solid #c3dcef}
tfoot .usage-total-row th{font-size:14px}