:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;color:#1d1d1f;background:#fff;font-size:13px;line-height:1.5;--blue:#007aff;--muted:#74747b;--line:#e6e6eb;--sidebar:220px}

*{box-sizing:border-box}
body{margin:0}
button,input,select,textarea{font:inherit}
button{min-height:30px;cursor:pointer;background:#f2f7ff;color:#007aff;border:1px solid transparent;border-radius:8px;padding:5px 10px;white-space:nowrap;transition:background .16s,transform .16s,border-color .16s}
button:hover{background:#f0f5fc}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed}
.primary{background:var(--blue);border-color:var(--blue);color:white}
.primary:hover{background:#006bd7}
.danger{color:#b42a36}
.quiet{border:0;background:transparent}
.small{padding:5px 9px;font-size:12px;min-height:30px}

input,select,textarea{border:1px solid #dbe0e8;border-radius:8px;padding:6px 9px;background:white;color:inherit;max-width:100%}
input:focus,select:focus,textarea:focus{outline:3px solid #087bf522;border-color:#75aff8}
textarea{min-height:80px;resize:vertical}
a{color:#0872d6;text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:24px;letter-spacing:-.8px;margin:0 0 8px}
h2{font-size:18px;margin:0}
h3{font-size:15px;margin:0 0 12px}
p{line-height:1.65}
small,.muted{color:var(--muted)}

.shell{display:flex;min-height:100vh}
.sidebar{position:fixed;width:var(--sidebar);inset:0 auto 0 0;background:#ededee;border-right:1px solid #d9d9de;padding:18px 10px;display:flex;flex-direction:column;z-index:20;overflow-y:auto;overscroll-behavior:contain}
.brand{display:flex;align-items:center;gap:11px;padding:6px 8px 24px}
.brand-mark{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#39a6ff,#007aff 72%);box-shadow:0 5px 14px #007aff20}
.brand-mark svg{width:25px;height:25px;fill:white;stroke:none}
.brand-copy strong{display:block;font-size:17px;font-weight:650;letter-spacing:-.5px}
.brand-copy span{display:block;color:#777980;font-size:12px;margin-top:2px;letter-spacing:.1px}

.nav{display:flex;flex-direction:column;gap:18px}
.nav-group{display:flex;flex-direction:column;gap:5px}
.nav-group-title{padding:0 10px 3px;color:#9b9da2;font-size:12px;font-weight:600;letter-spacing:.2px}
.nav button{width:100%;min-height:36px;display:flex;align-items:center;gap:11px;text-align:left;border:0;background:transparent;padding:6px 10px;color:#202124;font-size:14px;font-weight:500;border-radius:12px;transition:background .18s ease,color .18s ease,transform .18s ease}
.nav button:hover{background:#e5e5e8}
.nav button:active{transform:scale(.985)}
.nav button.active{color:#161719;background:#d7d7d9}
.nav button.active:hover{background:#d2d2d5}
.nav-icon{width:22px;height:22px;flex:none;color:#087cff}
.sidefoot{margin-top:auto;padding:22px 10px 0;display:flex;flex-direction:column;gap:9px}
.side-status{display:flex;align-items:center;gap:8px;color:#62656b;font-size:12px}
.side-status i{width:8px;height:8px;border-radius:50%;background:#32c759;box-shadow:0 0 0 3px #32c75918}
.sidefoot small{font-size:11px}

.main{margin-left:var(--sidebar);width:calc(100% - var(--sidebar));padding:0 clamp(20px,2vw,30px) 30px;min-width:0;background:#fff}
.topbar{min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 calc(-1 * clamp(20px,2vw,30px)) 18px;padding:10px clamp(20px,2vw,30px);border-bottom:1px solid var(--line);background:#ffffffed}
.topbar b{font-size:15px}
.topbar>span{color:var(--blue);background:#edf5ff;padding:6px 12px;border-radius:18px;font-size:12px}

/* Shared page headings keep the title and actions aligned at every width. */
.pagehead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;row-gap:4px;margin:18px 0 14px;min-width:0}
.pagehead>div:not(.actions){display:contents}
.pagehead h1{grid-column:1;grid-row:1;min-width:0;margin:0;font-size:26px;line-height:1.25;letter-spacing:-.4px;overflow-wrap:anywhere}
.pagehead p{grid-column:1/-1;grid-row:2;margin:0;color:var(--muted);font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.pagehead>.actions{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;width:auto;max-width:100%;margin:0}
.pagehead>.actions button{flex:0 0 auto;white-space:nowrap}
@media(max-width:840px){
 .main .finance-page .finance-metrics .metric{padding:12px}
 .orders-page>.order-metrics>.metric:last-child{grid-column:1/-1}
 .pagehead{column-gap:10px;row-gap:5px;margin:14px 0 12px}
 .pagehead h1{font-size:22px}
 .pagehead p{font-size:12px;line-height:1.4}
 .pagehead>.actions{flex-wrap:nowrap;gap:6px}
 .pagehead>.actions button{min-height:44px;padding:8px 10px;font-size:13px}
}


.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}

.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:14px 0;align-items:stretch}
.metric,.card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:none}

.finance-metrics{grid-template-columns:repeat(5,minmax(0,1fr))}
.finance-metrics .metric{padding:14px;min-height:112px}

.metric{container-type:inline-size;padding:14px 16px;display:flex;flex-direction:column;min-width:0;min-height:108px;text-align:left;white-space:normal}

.metric .value{font-weight:650;letter-spacing:-.7px;line-height:1.2;margin:10px 0 6px;font-variant-numeric:tabular-nums;font-size:clamp(16px,12cqi,28px);white-space:nowrap;overflow-wrap:normal;word-break:normal;max-width:100%;overflow-x:auto;scrollbar-width:thin}

.metric .label{color:var(--muted);font-size:13px;font-weight:500;line-height:1.4;min-height:20px}

.metric small{font-size:12px;line-height:1.5;color:var(--muted);margin-top:auto}

.card{padding:16px;margin:16px 0;border-radius:12px;min-width:0}

.cardhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}

.filter-date-range{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-width:0;max-width:100%}
.filter-date-field{display:inline-flex;align-items:center;gap:7px;min-width:0;white-space:nowrap}
.filter-date-field input[type=date]{min-width:140px;width:160px;max-width:100%}
/* Filters share an inline toolbar and wrap as complete fields on narrow screens. */
.filters,.mac-filters{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px 16px;min-width:0;max-width:100%;margin:0 0 14px;padding:0;background:transparent;border:0;border-radius:0}
.filters label,.mac-filters label{display:inline-flex;flex-direction:row;align-items:center;flex:0 0 auto;gap:8px;min-width:0;margin:0;font-size:13px;color:var(--muted);white-space:nowrap}
.filters select,.mac-filters select{width:auto;min-width:80px;max-width:220px;flex:0 1 auto}
.filters input[type=date],.mac-filters input[type=date]{width:auto;min-width:138px}
.filters input[type=search]{flex:1 1 220px;width:auto;min-width:160px;max-width:380px}
.order-browser>.filters{margin:0 0 10px}
.order-browser>.filters input{max-width:none;width:100%}
@media(max-width:840px){
 .filters,.mac-filters{flex-wrap:wrap;gap:10px 12px;margin-bottom:12px;padding:0}
 .filters label,.mac-filters label{flex:1 1 128px;gap:7px;font-size:13px}
 .filters select,.mac-filters select{flex:1 1 auto;min-width:0;max-width:100%}
 .filters label:has(input[type=date]),.mac-filters label:has(input[type=date]){flex-basis:175px}
 .filters input[type=search]{flex:1 1 200px;max-width:none}
 .filters>input[type=search]:only-child{flex:1 1 auto;width:100%;min-width:0}
}


.tablewrap{overflow:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px}

th{text-align:left;color:#787880;font-size:12px;letter-spacing:.1px;font-weight:600;padding:13px 12px;border-bottom:1px solid var(--line);background:#fafafa;white-space:nowrap}

td{padding:11px 10px;border-bottom:1px solid #ededf0;vertical-align:middle;line-height:1.5;max-width:280px;overflow-wrap:anywhere}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#f9fbfe}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.nowrap{white-space:nowrap}
.badge{display:inline-block;border-radius:6px;padding:4px 7px;font-size:11px;background:#edf4ff;color:#2871b5;white-space:nowrap}
.badge.green{background:#eaf7f0;color:#29805a}
.badge.orange{background:#fff2e3;color:#aa7022}
.badge.gray{background:#eff1f4;color:#7a8492}
.note{padding:12px 15px;border-radius:9px;background:#eff5fe;color:#48627e;line-height:1.65;margin:12px 0;font-size:12px}
.warning{background:#fff5e7;color:#9c652c}
.error{padding:11px 13px;background:#fff0f0;color:#b3313a;border-radius:8px;line-height:1.6;margin:10px 0;white-space:pre-wrap}
.empty{text-align:center;padding:46px 20px;color:var(--muted)}
.empty strong{display:block;color:#526071;font-size:17px;margin-bottom:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px;font-size:12px;color:#677589}
.field input,.field select,.field textarea{width:100%;color:#233347;font-size:14px}
.check{display:flex;align-items:flex-start;gap:9px;line-height:1.6;font-size:13px;margin:14px 0}
.check input{margin-top:4px}
.formline{border:1px solid var(--line);background:#fafbfd;border-radius:10px;padding:14px;margin:10px 0}
.formline .grid2{gap:10px}
.linegrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px}
.sectiontitle{display:flex;justify-content:space-between;align-items:center;margin:20px 0 10px}
.details{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:15px;margin:20px 0}
.details dt{font-size:11px;color:var(--muted);margin-bottom:6px}
.details dd{margin:0;font-weight:550}
.login{min-height:100vh;display:grid;place-items:center;padding:25px;background:radial-gradient(ellipse at 50% 10%,#dfefff,transparent 60%),#f4f6f9}
.login .card{width:400px;max-width:100%;padding:36px;border-radius:20px;box-shadow:0 20px 60px #30455c0b}
.login h1{font-size:26px}
.login button{width:100%;margin-top:10px}
.login .muted{font-size:12px;line-height:1.6}
.mobilemenu{display:none}

dialog{padding:0;border:1px solid #e1e1e7;border-radius:22px;box-shadow:0 24px 90px #17243a30;width:min(1160px,94vw);max-height:91vh;color:inherit}
dialog::backdrop{background:#15253b55;backdrop-filter:blur(3px)}

/* Editors use two columns for short fields and full rows for content sections. */
.editor-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px 18px;min-width:0}
.editor-form>.field{min-width:0;margin:0}
.editor-form>.field-wide,.editor-form>.field:has(textarea),.editor-form>:not(.field){grid-column:1/-1}
.editor-form>.field input,.editor-form>.field select,.editor-form>.field textarea{min-width:0;max-width:100%}
@media(max-width:600px){.editor-form{grid-template-columns:minmax(0,1fr);gap:12px}}
.modalhead{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 28px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fffffff5;z-index:2}

.modalbody{padding:24px 28px;overflow:auto;max-height:calc(91vh - 150px);overscroll-behavior:contain}

.modalfoot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 28px;border-top:1px solid var(--line);background:#fafafa;position:sticky;bottom:0}
.modalfoot .error{margin-right:auto}
.preview{width:100%;height:440px;border:1px solid var(--line);border-radius:9px;object-fit:contain;background:#f4f5f8}
.ocrtext{white-space:pre-wrap;overflow:auto;max-height:330px;background:#f4f6f8;padding:15px;line-height:1.6;font-size:12px}
.dropzone{border:1.5px dashed #a6bdd9;border-radius:12px;text-align:center;padding:30px;background:#f5f9ff}
.dropzone.over{background:#e2eeff;border-color:var(--blue)}
#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#22354a;color:white;box-shadow:0 5px 30px #0002;border-radius:10px;padding:12px 20px;z-index:100;display:none;max-width:90vw}
.loading{padding:60px;text-align:center;color:#758297}
/* Local version changes are shown with a reachable refresh action. */
.app-version-notice{position:fixed;z-index:80;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:14px;width:max-content;max-width:calc(100vw - 32px);padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel,#fff);box-shadow:0 6px 24px #0002;color:var(--text,#17212b);font-size:13px}
.app-version-notice span{min-width:0;overflow-wrap:anywhere}
.app-version-notice button{flex:0 0 auto;min-height:40px;white-space:nowrap}
body:has(.app-version-notice) .main{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
@media(max-width:840px){.app-version-notice{gap:10px;padding:10px 12px;font-size:12px}.app-version-notice button{min-height:44px}}
.noticebar{background:#eaf1fa;color:#58718c;font-size:11px;padding:9px 12px;border-radius:8px;margin-top:12px}
.linkbutton{border:0;background:none;padding:0;color:var(--blue);text-align:left;white-space:normal}

.rowtitle{font-weight:600;display:block;max-width:22rem;overflow-wrap:anywhere}
.caption{font-size:11px;margin-top:4px;color:var(--muted)}
.dangerzone{border:1px solid #f0d8db}
.filelist{display:flex;flex-direction:column;gap:9px}
.fileline{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px;background:#f6f8fb;border-radius:8px}

.pilltabs{display:flex;gap:5px;background:#ebebef;border-radius:12px;padding:4px;margin:16px 0;max-width:100%;flex-wrap:wrap}
.pilltabs button{flex:1;background:none;border:0}
.pilltabs button.active{background:white;box-shadow:0 2px 4px #0001}

.server-dashboard{margin-top:24px}
.server-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,.8fr);gap:16px}
.server-panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 8px 30px #233a5a08;min-width:0}
.server-panel-head,.trend-head,.section-heading,.website-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.server-panel-head h2,.section-heading h2{margin:3px 0 2px}
.server-panel-head p,.section-heading p{margin:0}
.eyebrow{display:block;color:#7b8796;font-size:11px;font-weight:650;letter-spacing:.35px;text-transform:uppercase}
.gauge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}
.server-gauge{text-align:center;background:#f8fafc;border:1px solid #edf0f4;border-radius:18px;padding:18px 10px}
.gauge-ring{--gauge:0deg;--gauge-color:#0a84ff;width:112px;aspect-ratio:1;margin:auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gauge-color) var(--gauge),#e9edf2 0);position:relative}
.gauge-ring::after{content:"";position:absolute;inset:10px;border-radius:50%;background:#fff}
.gauge-ring>div{position:relative;z-index:1;display:flex;flex-direction:column}
.gauge-ring strong{font-size:24px;letter-spacing:-.6px}
.gauge-ring small{font-size:11px}
.server-gauge p{margin:12px 0 0;color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.trend-head small{display:block;color:var(--muted);font-size:11px}
.server-trend{height:115px;display:flex;gap:3px;align-items:flex-end;margin:14px 0 10px;padding:12px 10px 0;border-radius:14px;background:linear-gradient(#eef5ff55 1px,transparent 1px);background-size:100% 25%}
.server-trend i{display:block;flex:1;min-width:2px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#47a4ff,#0a76e8);opacity:.82;transition:height .25s}
.empty-trend{align-items:center;justify-content:center;color:var(--muted)}
.network-line{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:11px}
.server-side{display:flex;flex-direction:column;gap:16px}
.server-side .server-panel{flex:1}
.alert-list{display:flex;flex-direction:column;margin-top:12px}
.alert-row{display:flex;gap:10px;padding:11px 0;border-top:1px solid #eef0f3;min-width:0}
.alert-row:first-child{border-top:0}
.alert-row b,.alert-row small{display:block}
.alert-row small{color:var(--muted);margin-top:3px;overflow-wrap:anywhere}
.status-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:#ff9f0a;box-shadow:0 0 0 4px #ff9f0a18}
.status-dot.danger{background:#ff453a;box-shadow:0 0 0 4px #ff453a18}
.healthy-state{padding:34px 10px;text-align:center;color:#27865e}
.backup-line{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.backup-line>div{background:#f7f8fa;border-radius:14px;padding:14px}
.backup-line b{display:block;margin-top:5px;overflow-wrap:anywhere}
.service-panel{margin-top:16px;padding:0;overflow:hidden}
.service-panel summary{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 22px;color:inherit;list-style:none}
.service-panel summary::-webkit-details-marker{display:none}
.service-panel summary small{display:block;margin-top:3px}
.service-panel[open] summary{border-bottom:1px solid var(--line)}
.service-panel .tablewrap{padding:0 12px 14px}
.section-heading{margin:28px 2px 14px}
.website-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.website-card,.renewal-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;min-width:0}
.website-title h3{font-size:17px;margin:3px 0 0}
.website-card dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:20px 0}
.website-card dl>div{background:#f7f8fa;border-radius:12px;padding:11px;min-width:0}
.website-card dt{font-size:10px;color:var(--muted)}
.website-card dd{margin:5px 0 0;font-size:12px;font-weight:600;overflow-wrap:anywhere}
.button-link{display:inline-flex;align-items:center;justify-content:center;min-height:36px;border:1px solid #dce2e9;border-radius:8px;padding:7px 11px;background:#fff}
.renewal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.renewal-card strong{display:block;font-size:24px;margin-top:18px}
.renewal-card p{margin-bottom:0}
.quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0}
.quick-card{text-align:left;border-radius:18px;padding:20px;background:linear-gradient(135deg,#fff,#f5f9ff);min-height:126px;display:flex;flex-direction:column;align-items:flex-start}
.quick-card strong{font-size:22px;margin:13px 0 4px}
.quick-card small{color:var(--muted)}

[hidden]{display:none!important}
summary{cursor:pointer;color:#386ca6;padding:10px 0}
details{margin:10px 0}
iframe.preview{display:block;margin:12px 0}
.fileline>div:first-child{min-width:0;overflow-wrap:anywhere}


.website-messages{display:grid;grid-template-columns:minmax(190px,30%) minmax(0,1fr);gap:20px;min-height:380px}
.website-message-list{max-height:65vh;overflow:auto}
.website-message-thread{display:block;text-align:left;width:100%;margin-bottom:8px;padding:12px}
.website-message-thread p{margin:6px 0;overflow-wrap:anywhere}
.website-message-detail textarea{width:100%;box-sizing:border-box;margin:14px 0}
.website-message-history{max-height:45vh;overflow:auto}
.website-message{background:#f5f6f8;border-radius:12px;padding:12px;margin-bottom:10px;overflow-wrap:anywhere}
.website-message p{white-space:pre-wrap}
.website-message.reply{background:#eef6ff}
.website-message small{color:#777}


/* Shared desktop workspaces: one selection list and one detail surface. */
.orders-workspace,.customer-workspace{display:grid;grid-template-columns:minmax(260px,310px) minmax(0,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;margin:14px 0;min-height:580px}

.order-list,.customer-list{min-width:0;padding:10px;border-right:1px solid var(--line);background:#fafafa;max-height:calc(100vh - 170px);overflow:auto;overscroll-behavior:contain}

.order-list input,.customer-list input{width:100%;min-width:0}
.order-list .pilltabs,.customer-list .pilltabs{gap:2px;padding:3px}
.order-list .pilltabs button,.customer-list .pilltabs button{padding:6px;font-size:12px;min-width:0;white-space:normal}

.order-row,.customer-row{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;padding:11px 10px;text-align:left;white-space:normal;background:transparent;border:0;border-radius:11px;color:inherit;margin-bottom:4px;line-height:1.5;overflow-wrap:anywhere}

.order-row:hover,.customer-row:hover{background:#efeff1}
.order-row.active,.customer-row.active{background:#dedee1}
.order-row strong,.customer-row strong{font-size:13px}
.order-row small,.customer-row small{color:var(--muted)}

.order-detail,.customer-detail{min-width:0;padding:20px 24px;overflow-wrap:anywhere}
.order-detail .card,.customer-detail .card{box-shadow:none;padding:18px;margin:18px 0}
.order-detail .tablewrap,.customer-detail .tablewrap{min-width:0;max-width:100%;overflow:auto}

.detail-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}
.detail-header h2{font-size:20px}
.order-row-meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-variant-numeric:tabular-nums;font-size:12px}
.order-row-meta>span{white-space:nowrap;color:var(--muted)}
.order-detail .detail-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:start;margin-bottom:16px}
.order-detail .detail-header h2,.order-detail .detail-header h3,.order-detail .detail-header p{grid-column:1;margin:0}
.order-detail .detail-header h3{font-size:16px;font-weight:500}.order-detail .detail-header p{margin-top:2px;font-size:13px}
.order-detail .detail-header>.badge{grid-column:2;grid-row:1;align-self:start}
.detail-metrics .metric{padding:14px;min-height:104px}.detail-metrics .metric .value{letter-spacing:-.4px;margin:10px 0 0}.detail-metrics .metric small:empty{display:none}
.order-detail table{min-width:730px}.order-detail td:nth-child(n+2):not(:nth-child(5)){white-space:nowrap;overflow-wrap:normal;font-variant-numeric:tabular-nums}

.detail-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;background:#f7f7f9;border-radius:14px;padding:18px;margin:20px 0}
.detail-metrics>*{min-width:0}
.detail-metrics strong{display:block;font-size:20px;font-variant-numeric:tabular-nums}

.customer-stages{display:flex;gap:4px;padding:4px;background:#eeeef0;border-radius:11px;margin:20px 0;flex-wrap:wrap}
.customer-stages button{flex:1;border:0;background:transparent;color:inherit}
.customer-stages button.active{background:#fff;box-shadow:0 1px 5px #00000012}
.customer-detail .field{max-width:100%}

button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #007aff55;outline-offset:3px}
button,summary{-webkit-tap-highlight-color:transparent}
svg{flex-shrink:0}

.customer-cards,.server-access-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0}
.customer-card,.server-access-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;overflow-wrap:anywhere}
.customer-card h3,.server-access-card h3{font-size:18px}.customer-card .actions,.server-access-card .actions{margin-top:18px}.customer-card p{margin:8px 0;color:var(--muted)}
.delivery-line-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.delivery-line-grid>*{min-width:0}.delivery-line-grid input{width:100%}
@media(max-width:1000px){.orders-workspace,.customer-workspace{grid-template-columns:minmax(240px,290px) minmax(0,1fr)}
.detail-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:900px){.customer-cards,.server-access-grid{grid-template-columns:minmax(0,1fr)}.delivery-line-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.orders-workspace,.customer-workspace{grid-template-columns:minmax(0,1fr)}
.order-list,.customer-list{max-height:320px;border-right:0;border-bottom:1px solid var(--line)}
.order-detail,.customer-detail{padding:22px 18px}
.website-messages{grid-template-columns:minmax(0,1fr)}
.website-message-list{max-height:180px}
.website-message-history{max-height:35vh}
}

/* Overview follows the native app's metric, node, alert and website hierarchy. */
.native-overview{margin-top:26px}.native-overview-heading{display:flex;justify-content:space-between;align-items:center}.native-overview-heading h2{margin-bottom:4px}.native-overview-metrics{max-width:840px;grid-template-columns:repeat(4,minmax(0,1fr));margin:18px 0}.native-overview-metrics .metric{min-height:116px}.native-overview-panels{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.native-overview-panels>.card{margin:0}.native-overview .card{border-radius:16px}.native-overview .cardhead{margin-bottom:14px}.native-node-title{display:flex;justify-content:space-between;align-items:center;margin:22px 0 16px}.native-online{display:inline-block;width:8px;height:8px;border-radius:50%;background:#30c65a;margin-right:10px}.native-network{display:flex;justify-content:space-between;color:var(--muted);margin:16px 0}.native-node .server-trend{height:92px;background:none;padding:0;margin:28px 0 14px}.native-node .muted,.native-node small{font-size:12px}.native-overview .alert-row{border:0;padding:10px 0}.native-overview .alert-row b{font-weight:600}.native-sites{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.native-site{min-width:0;background:#f8f8f9;padding:14px;border-radius:12px}.native-site-title,.native-site-line{display:flex;align-items:center;justify-content:space-between;gap:8px}.native-site-title strong{font-size:13px}.native-site-title .badge{font-size:10px;padding:3px 6px}.native-site>small{display:block;margin:3px 0 8px;overflow-wrap:anywhere}.native-site-line{font-size:11px;margin:7px 0}.native-site .actions{justify-content:space-between;margin-top:8px;font-size:12px;gap:4px}.native-site-note{font-size:11px;margin:0 0 16px}.native-overview .server-access-grid{gap:14px}
@media(max-width:1100px){.native-sites{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:840px){.native-overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.native-overview-panels{grid-template-columns:1fr}.native-sites{grid-template-columns:1fr}.native-overview-heading{gap:10px}.native-site-title strong{font-size:15px}.native-site-line{font-size:13px}}

@media(max-width:1150px){.finance-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
:root{--sidebar:236px}
.main{padding:0 24px 36px}
.topbar{margin:0 -24px 24px;padding:14px 24px}
.metrics{grid-template-columns:repeat(2,1fr)}

.linegrid{grid-template-columns:1fr 1fr}
.server-layout{grid-template-columns:1fr}
.website-grid{grid-template-columns:1fr}
}

@media(max-width:840px){
 :root{font-size:16px}

 body{background:#f5f5f7;-webkit-text-size-adjust:100%}

 .shell,.main,.card,.metric,.field,.actions,.fileline>div{min-width:0}

 .main{margin:0;width:100%;padding:12px max(16px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}

 button,input,select,textarea{min-height:44px;font-size:16px;max-width:100%}

 button{touch-action:manipulation}

 input,select,textarea{width:100%;min-width:0}

 .check input{width:24px;height:24px;min-height:24px;flex:none}

 .check{min-height:44px;align-items:center}

 .sidebar{transform:translateX(-105%);width:min(240px,64vw);padding-top:calc(24px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom));box-shadow:20px 0 50px #0002;transition:transform .22s ease;overflow-y:auto;overscroll-behavior:contain;height:100dvh}

 .sidebar.open{transform:translateX(0)}

 .nav button{text-align:left;min-height:58px}

 .sidefoot{margin-top:auto;padding-top:20px}

 .mobileoverlay{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;margin:0;padding:0;border:0;border-radius:0;background:#11182755;z-index:19;backdrop-filter:blur(3px)}

 .mobilemenu{display:inline-flex;align-items:center;justify-content:center;min-width:44px}

 .topbar{position:sticky;top:0;z-index:10;margin:-12px -16px 20px;padding:calc(8px + env(safe-area-inset-top)) 16px 8px;background:#f5f5f7e8;backdrop-filter:blur(18px);display:flex;gap:10px;align-items:center;flex-wrap:wrap}

 .topbar b{flex:1;font-size:17px}
.topbar>span{font-size:12px}

 .orders-workspace,.customer-workspace{border-radius:14px;margin:16px 0;min-height:0}
.customer-stages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.customer-stages button{white-space:normal}
.detail-header{flex-wrap:wrap}
.detail-metrics{gap:12px;padding:14px}
.order-detail .tablewrap,.customer-detail .tablewrap{overflow:visible}.order-detail table{min-width:0}.detail-metrics{grid-template-columns:minmax(0,1fr)}

 


 .note,.error,.caption,.fileline,.details dd{overflow-wrap:anywhere}

 .metrics,.finance-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}
.finance-metrics .metric{min-height:148px;padding:16px 12px}

 .metric{padding:16px 12px;min-height:132px}
.metric .label{font-size:13px}

 .card{padding:16px;border-radius:18px}
.cardhead{flex-wrap:wrap;gap:10px}

 .split,.grid2{grid-template-columns:minmax(0,1fr)}

 


 .actions{display:flex;flex-wrap:wrap;gap:8px}
.actions button{flex:0 1 auto;white-space:normal}

 

 .tablewrap{overflow:visible}
.tablewrap table{display:block;width:100%;table-layout:fixed}
.tablewrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

 .tablewrap tbody{display:block}
.tablewrap tr{display:block;padding:10px 0;border-bottom:1px solid #e6e6eb}
.tablewrap tr:last-child{border-bottom:0}

 .tablewrap td{max-width:none;display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:7px 0;border:0;white-space:normal;overflow-wrap:anywhere;text-align:right;min-width:0}

 .tablewrap td::before{content:attr(data-label);text-align:left;color:#737780;font-size:13px;flex:0 0 30%;overflow-wrap:anywhere}

 .tablewrap td>*{min-width:0;max-width:70%}
.tablewrap td>.actions{justify-content:flex-end}
.tablewrap .num,.tablewrap .nowrap{white-space:normal}

 dialog{width:100%;max-width:100%;margin:auto 0 0;border-radius:24px 24px 0 0;max-height:94dvh;border-bottom:0}

 .modalhead{padding:18px 16px 12px;align-items:flex-start}
.modalhead h2{overflow-wrap:anywhere;font-size:21px}
.modalhead button{flex:none}
.modalbody{padding:14px 16px;max-height:calc(94dvh - 160px - env(safe-area-inset-bottom));overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

 .modalfoot{padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:8px;flex-wrap:wrap;background:#fff}
.modalfoot button{flex:1 1 110px}

 .preview{width:100%;max-width:100%;min-width:0;max-height:55dvh}
.formline{padding:12px}
.linegrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.linegrid>.field{min-width:0}
.linegrid>.field:first-child{grid-column:1/-1}

 .noticebar{display:flex;flex-direction:column;gap:8px}
.fileline{flex-wrap:wrap;gap:10px}
.fileline>div:first-child{flex:1 1 180px}

 .pilltabs{max-width:100%;overflow-x:auto;flex-wrap:nowrap;overscroll-behavior-x:contain}
.pilltabs button{flex:none;white-space:nowrap}

 .details{grid-template-columns:minmax(0,1fr)}
.details dd{margin:0 0 10px}
.login{padding:24px 16px;min-height:100dvh}
.login .card{width:100%;max-width:420px}

 .server-dashboard{margin-top:18px}
.server-panel{padding:16px;border-radius:18px}
.server-panel-head{align-items:flex-start}
.gauge-grid{gap:7px;margin:18px 0}
.server-gauge{padding:12px 4px;border-radius:14px}
.gauge-ring{width:min(88px,24vw)}
.gauge-ring::after{inset:8px}
.gauge-ring strong{font-size:19px}
.server-gauge p{font-size:10px}
.server-trend{height:95px}
.network-line{gap:8px 14px}
.backup-line{grid-template-columns:1fr}
.service-panel summary{padding:16px}
.website-card{padding:16px}
.website-card dl{grid-template-columns:1fr;margin:16px 0}
.website-card dl>div{display:flex;justify-content:space-between;gap:12px}
.website-card dd{margin:0;text-align:right}
.section-heading{margin-top:24px}
.quick-grid{grid-template-columns:1fr}
.renewal-grid{grid-template-columns:1fr 1fr}
.renewal-card{padding:15px}
.renewal-card strong{font-size:21px;margin-top:12px}

 #toast{max-width:calc(100vw - 32px);bottom:calc(20px + env(safe-area-inset-bottom));overflow-wrap:anywhere}

}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* Compact server data workspace */


.server-data-page>.card{padding:16px;margin:14px 0}
.server-data-page>.card>.cardhead{margin-bottom:12px;min-height:34px}
.server-data-page>.card>.cardhead h2{margin:0;font-size:16px}
.server-data-page>.card>.tablewrap{width:100%;margin:0}
.server-data-page>.card th,.server-data-page>.card td{padding:12px 14px}
@media(max-width:600px){.server-data-page>.card{padding:12px}.server-data-page>.card>.cardhead{gap:8px}}
/* Native Mac order and finance layout */
.nav button.active,.nav button.active:hover{background:#087bff;color:#fff}.nav button.active svg{color:#fff}


.orders-page .order-metrics,.finance-page .finance-metrics{gap:10px;grid-template-columns:repeat(5,minmax(0,1fr));margin:18px 0 12px}
.orders-page .order-metrics{max-width:1050px}
.orders-page .metric,.finance-page .finance-metrics .metric{min-height:114px;padding:16px;color:#222;background:white;border-color:#eeeef0;border-radius:14px}
.orders-page .metric .value,.finance-page .finance-metrics .value{margin:12px 0;letter-spacing:-.6px}
.metric .label{display:flex;align-items:center;justify-content:space-between;gap:6px}.metric-symbol{color:#0780ff;font-size:18px;font-weight:400}.order-metrics>.metric:nth-child(3) .metric-symbol{color:#31c650}.order-metrics>.metric:nth-child(4) .metric-symbol{color:#ff8c27}.order-metrics>.metric:nth-child(5) .metric-symbol{color:#c846ee}
.mac-summary-note{font-size:11px;line-height:1.7;color:#888;margin:12px 0 18px}.cost-warning{color:#f08328;font-size:11px;line-height:1.7}.mac-summary-note .cost-warning{display:inline-flex;align-items:center;max-width:100%;margin:4px 0 4px 6px;padding:6px 10px;border:1px solid #fed7aa;border-radius:8px;background:#fff7ed;color:#a84408;font:inherit;font-weight:600;text-align:left;white-space:normal;cursor:pointer}
.orders-workspace{grid-template-columns:minmax(280px,32%) minmax(0,1fr);border:0;border-top:1px solid var(--line);border-radius:0;margin:0 calc(-1 * clamp(20px,2vw,30px));overflow:visible;min-height:580px}
.order-browser{min-width:0;border-right:1px solid var(--line);padding:14px 12px;background:#fff}
.order-browser .pilltabs{padding:2px;gap:0;margin:6px auto 10px;max-width:290px;border-radius:7px;display:flex}.order-browser .pilltabs button{min-width:0;flex:1;font-size:12px;padding:4px 5px;white-space:nowrap;border-radius:6px;color:#333}.order-browser .pilltabs button.active{background:#0780ff;color:#fff;box-shadow:none}
.list-count{color:#888;text-align:center;font-size:11px;margin:10px 0 22px}.order-browser .order-list{padding:0 10px;border:0;background:#fff;max-height:calc(100vh - 210px)}
.order-row{padding:12px 10px;border-radius:8px;margin-bottom:1px}.order-row:not(.active){border-bottom:1px solid #ececee;border-radius:0}.order-row.active{background:#dedede}
.order-detail{padding:26px;min-width:0}.order-detail .detail-header{margin-bottom:24px}.order-detail .detail-header h2{font-size:19px}.order-detail .detail-header h3{font-size:14px}
.order-detail>.actions,.order-detail>div>.actions{padding-bottom:22px;border-bottom:1px solid var(--line);gap:8px;margin-bottom:24px}.order-detail button{font-size:12px;padding:6px 10px;min-height:28px}
.product-section h3{font-size:14px;margin:0 0 12px}.product-section>.tablewrap{border:1px solid #eee;border-radius:14px;padding:10px 14px}.product-section table{min-width:580px}.product-section th,.product-section td{padding:10px 4px;background:white;font-size:11px}.product-section td{font-size:12px}
.orders-page .detail-metrics,.finance-page .detail-metrics{padding:16px;gap:16px;background:#f9f9fa;border-radius:12px;margin:14px 0}.orders-page .detail-metrics .metric,.finance-page .detail-metrics .metric{border:0;background:none;padding:0;min-height:0;border-radius:0}.detail-metrics .metric .value{margin:7px 0 0}.detail-metrics .metric .label{font-size:11px}
.order-detail .detail-empty{display:block;min-height:0;margin:12px 0;padding:12px 14px;color:var(--muted);font-size:13px;line-height:1.5;text-align:left;overflow-wrap:anywhere}
.order-detail .card{padding:0;border:0;border-radius:0;margin:26px 0}.order-detail .cardhead{margin-bottom:12px}.order-detail .cardhead h2{font-size:14px}
.finance-scope{display:flex;align-items:center;justify-content:space-between;margin:18px 0 24px;gap:12px}.finance-scope label{display:flex;align-items:center;gap:10px}.finance-scope select{background:#f3f8ff;color:#0780ff;border:0;border-radius:6px;padding:5px 10px;font-size:13px}.finance-scope button{font-size:11px}
.finance-search{display:flex;align-items:center;justify-content:space-between;margin:0 0 24px;gap:16px}.finance-search>input{border:0;max-width:360px;padding:7px 10px;font-size:13px}.finance-search label{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:12px}.finance-search input[type=checkbox]{width:16px;height:16px}
.finance-workspace{display:grid;grid-template-columns:minmax(0,64%) minmax(0,36%);min-height:420px}.finance-invoice-list{min-width:0;padding-right:14px;border-right:1px solid var(--line)}.finance-invoice-list table{min-width:540px;table-layout:fixed}.finance-invoice-list th,.finance-invoice-list td{background:white;border:0;padding:8px;font-size:12px}.finance-invoice-list th{border-bottom:1px solid #ddd;text-align:left;font-size:11px}.finance-invoice-list th:first-child{width:29%}.finance-invoice-list th:nth-child(2){width:26%}.finance-invoice-list td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.finance-invoice-list tr:nth-child(even) td{background:#f5f5f6}.finance-invoice-list tr.selected td{background:#e6f1ff}.finance-invoice-list tbody tr{cursor:pointer}.finance-invoice-list tr:focus{outline:2px solid #0780ff;outline-offset:-2px}.finance-invoice-list strong{display:block;overflow:hidden;text-overflow:ellipsis;font-weight:500}.invoice-association{display:block;font-size:10px;margin-top:3px}.finance-detail{min-width:0;padding:20px}.finance-detail>.empty{min-height:300px;display:flex;flex-direction:column;justify-content:center}.finance-invoice-detail h2{font-size:17px;overflow-wrap:anywhere}.finance-invoice-detail .card{border:0;padding:0}.finance-invoice-detail .card h2{font-size:14px}.finance-invoice-detail .detail-metrics{grid-template-columns:1fr;gap:12px}.finance-invoice-detail .actions{gap:6px}.finance-invoice-detail button{padding:6px 10px;font-size:12px}
@media(max-width:1100px){.orders-page .order-metrics,.finance-page .finance-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.finance-workspace{grid-template-columns:minmax(0,58%) minmax(0,42%)}.orders-workspace{grid-template-columns:270px minmax(0,1fr)}}
@media(max-width:840px){.orders-page .order-metrics,.finance-page .finance-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.orders-workspace,.finance-workspace{grid-template-columns:minmax(0,1fr)}.order-browser{border-right:0;border-bottom:1px solid var(--line)}.order-browser .order-list{max-height:260px}.order-detail{padding:20px}.finance-invoice-list{border-right:0;padding:0}.finance-detail{border-top:1px solid var(--line);padding:18px 0}.finance-scope{flex-wrap:wrap}.finance-search{gap:8px}.finance-search>input{min-width:0;width:65%}.finance-scope .quiet{font-size:11px}}

@media(max-width:840px){.orders-workspace{margin-left:-16px;margin-right:-16px}}
@media(max-width:840px){.order-detail table,.product-section table,.finance-invoice-list table{min-width:0}.finance-invoice-list td{white-space:normal}.product-section>.tablewrap{overflow:hidden}.order-detail td:nth-child(n+2):not(:nth-child(5)){white-space:normal}}

.international-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}.international-toolbar strong{font-size:17px}.international-frame{display:block;width:100%;height:calc(100dvh - 118px);min-height:620px;border:1px solid var(--line);border-radius:12px;background:white}.international-toolbar button,.international-toolbar a{font-size:12px}@media(max-width:840px){.international-frame{height:calc(100dvh - 145px);min-height:620px}.international-toolbar{flex-wrap:wrap}.international-page{margin:0 -8px}}

/* iPhone workspace: touch controls, safe areas and list/detail navigation. */
.mobile-detail-back{display:none}
@media(max-width:840px){
 html{scroll-padding-top:80px}body{background:#f5f5f7}
 .main{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
 .topbar{flex-wrap:nowrap;margin-bottom:18px;background:#f5f5f7ee}.topbar>span{display:none}.topbar b{font-size:16px}
 
 .main button,.modalhead button,.modalfoot button,.modalbody button{min-height:44px;font-size:14px;padding:10px 12px}
 .main input,.main select,.main textarea,dialog input,dialog select,dialog textarea{font-size:16px!important;min-height:44px}
 .main input[type=checkbox],dialog input[type=checkbox]{min-height:22px;width:22px;height:22px}
 
 
 
 .orders-page .order-metrics,.finance-page .finance-metrics{gap:9px;margin:16px 0}.orders-page .metric,.finance-page .metric{padding:13px 11px;min-height:112px;border-radius:15px}
 .orders-page .metric .value,.finance-page .metric .value{letter-spacing:-.6px;}
 .orders-page .metric .label,.finance-page .metric .label{font-size:12px}.metric .caption{font-size:11px;line-height:1.45}.mac-summary-note{font-size:11px;line-height:1.6;margin:12px 0}
 .orders-workspace{margin:16px 0;border-radius:16px;overflow:hidden;background:#fff}.order-browser{padding:12px;border:0}.order-browser .order-list{max-height:none;overflow:visible}.order-browser .pilltabs{gap:2px}.order-browser .pilltabs button{padding:8px 7px;font-size:13px;flex:1}.order-browser .order-row{padding:14px 10px;text-align:left}.order-row strong{font-size:14px}.order-row>span{font-size:13px}
 .orders-workspace>.order-detail,.finance-workspace>.finance-detail{display:none}
 .mobile-detail-open>.order-browser,.mobile-detail-open>.finance-invoice-list{display:none}.mobile-detail-open>.order-detail,.mobile-detail-open>.finance-detail{display:block;padding:16px;border:0;min-width:0}
 .mobile-detail-back{display:inline-flex;margin-bottom:18px;align-items:center}.orders-page:has(.mobile-detail-open)>:not(.orders-workspace),.finance-page:has(.mobile-detail-open)>:not(.finance-workspace){display:none}
 .order-detail .detail-header{margin-bottom:16px}.order-detail .detail-header h2,.finance-invoice-detail h2{font-size:18px;overflow-wrap:anywhere}.order-detail .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.order-detail .actions button{width:100%}.detail-metrics{display:grid;grid-template-columns:1fr;gap:10px}.detail-metrics .metric{min-height:0}
 .finance-workspace{background:#fff;border-radius:16px;overflow:hidden}.finance-invoice-list{padding:0 12px}.finance-invoice-list tr{padding:14px 10px;margin:6px 0;border-radius:12px}.finance-scope{gap:8px}.finance-scope select{max-width:100%;flex:1}.finance-search{flex-wrap:wrap}.finance-search>input{width:100%}
 .tablewrap td{font-size:14px}.tablewrap td::before{font-size:12px}.tablewrap td>.actions{display:flex;flex-wrap:wrap}
 .international-toolbar{gap:8px;margin-bottom:8px}.international-toolbar strong{font-size:16px}.international-toolbar .actions{gap:6px}.international-toolbar button,.international-toolbar a{font-size:12px;padding:10px;min-height:44px}.international-frame{height:calc(100dvh - 125px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:300px;border-radius:12px}.international-page{margin:0 -8px}
 dialog{max-height:calc(100dvh - env(safe-area-inset-top) - 8px)}.modalhead h2{font-size:19px}.modalbody{max-height:calc(100dvh - 180px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.modalfoot button{flex:1}.modalbody .grid2{grid-template-columns:1fr}
 #toast{bottom:calc(20px + env(safe-area-inset-bottom));max-width:calc(100vw - 32px)}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.sidebar{transition:none}}

@media(max-width:840px){
 
 
 
 
 
 
 .orders-page>.order-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 8px}
 .orders-page>.order-metrics>.metric{padding:10px 9px;min-height:82px;border-radius:12px}
 .orders-page>.order-metrics>.metric:nth-child(1),.orders-page>.order-metrics>.metric:nth-child(3){min-height:82px;}
 .orders-page>.order-metrics>.metric .value{margin:5px 0;letter-spacing:-.5px}
 .orders-page>.order-metrics>.metric .label{font-size:11px;min-height:16px}.orders-page>.order-metrics>.metric .metric-symbol{display:none}
 .orders-page>.order-metrics>.metric small{font-size:10px;line-height:1.4;margin-top:0}
 .orders-page>.mac-summary-note{margin:8px 0;font-size:10px;line-height:1.4}
 .orders-page>.orders-workspace{margin:10px 0}.order-browser .list-count{margin:7px 0;font-size:11px}
 .topbar{margin-bottom:14px}.topbar .mobilemenu{font-size:20px}
}

.topbar-tools{display:flex;align-items:center;gap:12px;margin-left:auto}.web-label{color:var(--blue);font-size:12px}.topbar .page-refresh{min-height:36px;padding:6px 12px;font-size:13px;white-space:nowrap}.page-refresh:disabled{opacity:.55;cursor:wait}
@media(max-width:840px){.topbar-tools{gap:0}.topbar-tools .web-label{display:none}.topbar .page-refresh{min-height:44px;font-size:14px;padding:8px 10px}}

/* One customer navigation shared by desktop and phone. */
.international-page .international-toolbar{margin:0 0 14px;align-items:center}.international-toolbar select{width:auto;min-width:125px;font-size:13px;border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:#f7f9fc}.international-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;background:#f1f2f5;border-radius:10px;padding:4px}.international-stages button{display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:0;color:#616875;border-radius:7px;padding:10px;font-size:14px}.international-stages button.active{background:white;color:#007aff;box-shadow:0 1px 4px #00000012}.stage-count{font-size:11px;background:#e8edf5;padding:2px 6px;border-radius:9px}.stage-count:empty{display:none}.international-context-row{font-size:12px;color:#8b8e95;margin:12px 0 8px}.international-page .international-frame{height:calc(100dvh - 225px);min-height:420px;border:0;border-radius:0;background:white}
@media(max-width:840px){.international-page{margin:0}.international-page .international-toolbar{margin-bottom:10px}.international-toolbar select{min-height:44px;font-size:16px;max-width:150px}.international-stages{gap:2px;padding:3px}.international-stages button{padding:8px 2px;font-size:13px;gap:4px;min-height:44px}.stage-count{font-size:10px;padding:2px 4px}.international-context-row{margin:8px 0;font-size:11px}.international-page .international-frame{height:calc(100dvh - 215px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:320px}}

/* Compact, full-width order summary on desktop. */
@media(min-width:841px){
 .orders-page>.order-metrics{max-width:none;width:100%;display:grid;grid-template-columns:repeat(5,minmax(155px,1fr));gap:0;margin:16px 0 10px;padding:14px 0;border-top:1px solid #e9e9ed;border-bottom:1px solid #e9e9ed;overflow-x:auto}
 .orders-page>.order-metrics>.metric{min-height:0;padding:2px 18px;border:0;border-right:1px solid #e9e9ed;border-radius:0;background:transparent;box-shadow:none;text-align:left}
 .orders-page>.order-metrics>.metric:first-child{padding-left:0}
 .orders-page>.order-metrics>.metric:last-child{border-right:0}
 .orders-page>.order-metrics>.metric .label{font-size:12px;line-height:18px}
 .orders-page>.order-metrics>.metric .value{line-height:1.3;letter-spacing:-.4px;margin:8px 0 5px;font-variant-numeric:tabular-nums}
 .orders-page>.order-metrics>.metric small{font-size:11px;line-height:16px;color:#85858b}
 .orders-page>.order-metrics .metric-symbol{display:none}
 .orders-page>.order-metrics>button.metric:hover{background:#f7f9fc}
}

/* Order header: title/actions, then one wrapping filter toolbar. */



/* Missing purchase costs: drill down from the summary to editable orders. */
.mac-summary-note .cost-warning:hover{background:#ffedd5;border-color:#fdba74}
.mac-summary-note .cost-warning:focus-visible{outline:3px solid #80b8ff;outline-offset:2px}
.missing-cost-intro{margin:0 0 16px;color:var(--muted);line-height:1.6}
.missing-cost-order{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.missing-cost-info{min-width:0;flex:1}
.missing-cost-number{padding:0;background:none;color:var(--blue);font-size:15px;font-weight:650;text-align:left;overflow-wrap:anywhere}
.missing-cost-info p{margin:6px 0 0;font-size:13px;overflow-wrap:anywhere;line-height:1.5}
.missing-cost-hint{color:#a84408}
.missing-cost-edit{flex:none;min-height:40px}
@media(max-width:540px){.mac-summary-note .cost-warning{margin-left:0;min-height:42px}.missing-cost-order{align-items:stretch;flex-direction:column;gap:10px}.missing-cost-edit{align-self:flex-start;min-height:44px}}

/* Shipment correction preview uses the same quantities submitted for validation. */
.fulfillment-help,.fulfillment-preview{padding:12px 14px;margin:12px 0;border-radius:10px;background:#f3f7fc;color:#52657b;font-size:13px;line-height:1.6}
.fulfillment-preview p{margin:4px 0;overflow-wrap:anywhere}
.fulfillment-preview.has-error{background:#fff4ed;color:#a84408}

.login-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.login-tabs button{flex:1;white-space:nowrap}