:root{--bg:#07111b;--bg2:#0b1825;--panel:#101e2b;--panel2:#142636;--line:#263b4d;--text:#f3f7fb;--muted:#93a8bb;--gold:#f5b51b;--gold2:#ffd264;--cyan:#51c6d8;--green:#48d597;--amber:#efb642;--red:#ff6b65;--shadow:0 16px 45px rgba(0,0,0,.24)}

*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{min-height:100vh;margin:0;display:flex;flex-direction:column;background:radial-gradient(circle at 82% -12%,rgba(245,181,27,.13),transparent 32rem),linear-gradient(145deg,var(--bg),var(--bg2));color:var(--text);font:15px/1.55 Inter,"Segoe UI",Arial,sans-serif}
.site-header{height:82px;display:flex;align-items:center;justify-content:space-between;gap:26px;padding:0 clamp(18px,4vw,64px);border-bottom:1px solid rgba(147,168,187,.18);background:rgba(7,17,27,.86);backdrop-filter:blur(16px);position:sticky;top:0;z-index:4}
.brand{display:flex;align-items:center;gap:17px;min-width:0}
.brand img{display:block;width:194px;height:auto}
.brand span{border-left:1px solid var(--line);padding-left:17px;color:var(--text);font-size:16px;font-weight:750;white-space:nowrap}
nav{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:wrap}
nav a,a{color:#dce8f5;text-decoration:none}
nav a:hover,a:hover{color:var(--gold2)}
.user-name{color:var(--muted);font-size:13px;white-space:nowrap}
.logout-form{margin:0}
.link-button{padding:0;background:none;color:#dce8f5!important;font-weight:650}
.link-button:hover{color:var(--gold2)!important}
main{flex:1;width:min(1320px,92vw);margin:42px auto 64px}
.site-footer{width:min(1320px,92vw);margin:auto auto 22px;display:flex;justify-content:space-between;gap:14px;color:var(--muted);font-size:12px;border-top:1px solid rgba(147,168,187,.14);padding-top:15px}
.page-head,.section-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h1{margin:0 0 7px;font-size:clamp(28px,3vw,39px);line-height:1.1;letter-spacing:-.035em}
h2{margin:0 0 8px;font-size:21px}
p{margin:5px 0;color:#c5d2df}
.eyebrow{text-transform:uppercase;letter-spacing:.13em;color:var(--gold);font-size:11px;font-weight:850}
.button,button{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:9px;background:var(--gold);color:#171109!important;font:inherit;font-weight:800;padding:11px 17px;cursor:pointer;box-shadow:0 4px 13px rgba(245,181,27,.15)}
.button:hover,button:hover{background:var(--gold2);color:#171109!important}
.button.small{padding:8px 12px;font-size:13px}
.secondary{background:#1b3041!important;color:var(--text)!important;border-color:#38526a}
.secondary:hover{background:#244156!important;color:var(--text)!important}
.danger-button{background:#a93432!important;color:#fff!important}
.remove{background:transparent!important;border:1px solid #58383e!important;color:#ff8d87!important;box-shadow:none}
.card{background:linear-gradient(150deg,rgba(20,38,54,.95),rgba(13,28,41,.95));border:1px solid var(--line);border-radius:14px;padding:27px;box-shadow:var(--shadow);margin-bottom:24px}
.danger-card{border-color:#74383c}
.narrow{max-width:640px;margin-left:auto;margin-right:auto}
.grid{display:grid;gap:20px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
label{display:flex;flex-direction:column;gap:7px;color:#d3dfeb;font-weight:650;margin-bottom:18px}
input,select,textarea{width:100%;background:#091622;border:1px solid #3a5367;border-radius:9px;padding:12px;color:var(--text);font:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(245,181,27,.3);border-color:var(--gold)}
button:disabled{opacity:.45;cursor:not-allowed}
hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.plan-row{display:grid;grid-template-columns:2fr 1fr 1.3fr 1fr;gap:12px;align-items:end;border-bottom:1px solid var(--line);margin-bottom:18px;padding-bottom:2px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:11px}
table{border-collapse:collapse;width:100%;background:rgba(9,22,34,.5)}
th,td{text-align:left;padding:14px;border-bottom:1px solid rgba(147,168,187,.16);white-space:nowrap}
th{color:#9fb2c4;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
tr:last-child td{border-bottom:0}
tr:hover td{background:rgba(81,198,216,.045)}
.muted,.field-help,.small-text{color:var(--muted)}
.field-help,.small-text{font-size:12px;font-weight:400}
.pill{display:inline-block;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800}
.pill.good{color:#8af0bf;background:rgba(72,213,151,.13)}
.pill.warning{color:#ffd36c;background:rgba(239,182,66,.14)}
.pill.danger{color:#ff9d98;background:rgba(255,107,101,.14)}
.flash{padding:14px 16px;border-radius:9px;margin-bottom:20px}
.flash.success{background:rgba(72,213,151,.13);color:#8af0bf;border:1px solid rgba(72,213,151,.26)}
.flash.error{background:rgba(255,107,101,.13);color:#ffaca8;border:1px solid rgba(255,107,101,.28)}
.big-number{font-size:46px;font-weight:850;color:var(--gold2);letter-spacing:-.04em}
.big-number small{font-size:16px;color:var(--muted);letter-spacing:0}
.qr{text-align:center}
.qr img{width:190px;display:block;margin:10px auto 14px;background:#fff;padding:8px;border-radius:5px}
.notice,.previous{background:rgba(245,181,27,.09);border-left:4px solid var(--gold);padding:12px 14px;border-radius:5px}
.service-due-banner{display:flex;align-items:center;gap:16px;margin:0 0 24px;padding:16px 18px;border:1px solid rgba(239,182,66,.5);border-left:5px solid var(--amber);border-radius:10px;background:rgba(239,182,66,.1)}
.service-due-banner span{font-weight:800;color:#ffd36c}
.service-due-banner strong{font-size:20px;color:var(--text)}
.service-due-banner small{margin-left:auto;color:var(--muted);font-weight:700}
.service-due-banner.overdue{border-color:rgba(255,107,101,.5);border-left-color:var(--red);background:rgba(255,107,101,.1)}
.service-due-banner.overdue span{color:#ff9d98}
.service-due-banner.compact{display:grid;grid-template-columns:1fr auto;margin:12px 0 18px;padding:12px 14px;gap:2px 12px}
.service-due-banner.compact strong{font-size:16px}
.service-due-banner.compact small{grid-column:1/-1;margin-left:0}
.phone-card{max-width:480px;margin:auto}
.phone-card button{width:100%;font-size:18px;padding:15px}
.success-screen{text-align:center}
.check{width:70px;height:70px;border-radius:50%;background:rgba(72,213,151,.13);color:var(--green);font-size:42px;margin:0 auto 18px}
fieldset{border:1px solid var(--line);border-radius:9px;margin:0 0 18px;padding:14px}
legend{color:#d3dfeb;font-weight:750;padding:0 7px}
.radio-row,.checkbox-row{flex-direction:row;align-items:center;gap:10px;margin:8px 0}
.radio-row input,.checkbox-row input{width:auto}
.email-fields{display:none}
.email-fields.visible{display:block;border-left:3px solid var(--gold);padding-left:16px;margin-bottom:18px}
.service-completion-fields{display:none;border-left:3px solid var(--gold);padding-left:16px;margin-bottom:18px}
.service-completion-fields.visible{display:block}
.request-note{max-width:720px;margin-top:20px;padding-bottom:8px}
.table-input{min-width:150px}
.batch-meta{max-width:520px;padding-bottom:8px}
.login-card{margin-top:8vh}
.driver-access{background:rgba(9,22,34,.6);border:1px solid var(--line);border-radius:10px;padding:16px}
.driver-access h2{margin-bottom:4px}
.driver-access p:last-child{margin-bottom:0}
.logo-upload{background:rgba(9,22,34,.45)}
.client-logo-preview{display:flex;align-items:center;justify-content:center;min-height:105px;margin:4px 0 15px;padding:14px;border:1px dashed #3a5367;border-radius:9px;background:#07111b}
.client-logo-preview img{display:block;max-width:100%;max-height:100px;object-fit:contain}
.narrow-wide{max-width:820px;margin-left:auto;margin-right:auto}
.dashboard-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:20px}
.dashboard-client-logo{height:110px;display:flex;align-items:center;margin:-10px 0 22px;padding:12px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(9,22,34,.55)}
.dashboard-client-logo img{max-width:100%;max-height:86px;object-fit:contain}
.dashboard-stat{min-height:145px;padding:18px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;justify-content:space-between;background:var(--panel);overflow:hidden}
.dashboard-stat span{font-weight:750;color:#dce8f5}
.dashboard-stat strong{font-size:48px;line-height:1;letter-spacing:-.04em}
.dashboard-stat.blue{background:linear-gradient(160deg,#1e63dc,#2d7df0)}
.dashboard-stat.green{background:linear-gradient(160deg,#378f3b,#55ae4c)}
.dashboard-stat.amber{background:linear-gradient(160deg,#bb9200,#e3c700);color:#101820}
.dashboard-stat.red{background:linear-gradient(160deg,#c91626,#ef2743)}
.dashboard-stat.neutral{background:linear-gradient(160deg,#17222c,#273845)}
.dashboard-table{padding:18px}
.dashboard-readonly{text-align:center}
.notice.compact{padding:9px 12px;margin:8px 0}
.warning-confirm{padding:12px;border:1px solid rgba(239,182,66,.5);border-radius:8px;background:rgba(239,182,66,.09)}
.client-users-fieldset{padding:18px}
.client-user-row{padding:16px;margin:12px 0;border:1px solid var(--line);border-radius:9px;background:rgba(9,22,34,.45)}
@media(max-width:900px){.site-header{height:auto;min-height:78px;padding:13px 18px;align-items:flex-start}
.brand img{width:170px}
.brand span{display:none}
nav{gap:10px}
nav a:not(.button),nav .user-name{display:none}
main{width:94vw;margin-top:25px}
.grid.two{grid-template-columns:1fr}
.page-head,.section-head{align-items:flex-start;flex-direction:column}
.plan-row{grid-template-columns:1fr 1fr}
.plan-row label:first-child{grid-column:1/-1}
.remove{margin-bottom:18px}
.site-footer{width:94vw;flex-direction:column;gap:3px}
.dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){.brand img{width:155px}
.card{padding:20px}
th,td{padding:11px 10px}
.dashboard-metrics{grid-template-columns:1fr 1fr}
.dashboard-stat{min-height:110px;padding:14px}
.dashboard-stat strong{font-size:36px}
}

/* Hourmark brand system v2.4 */
.site-header{height:auto;min-height:88px;padding-top:12px;padding-bottom:12px;background:rgba(7,17,27,.92)}
.brand{gap:18px}
.brand img{width:238px;height:auto}
.brand span{padding-left:18px;color:#dfe9f2;font-size:14px;font-weight:800;letter-spacing:.02em}
@media(max-width:900px){.brand img{width:205px}}
@media(max-width:520px){.brand img{width:185px}}