[x-cloak] { display: none !important; }
:root { --bg:#f8fafc; --panel:#fff; --text:#0f172a; --muted:#64748b; --line:#e2e8f0; --primary:#18181b; --accent:#f1f5f9; --radius:10px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--text); }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); font-size:14px; } .app-shell { min-height:100vh; display:grid; grid-template-columns:228px minmax(0,1fr); }.sidebar { background:var(--panel); border-right:1px solid var(--line); padding:24px 12px; display:flex; flex-direction:column; }.brand { color:var(--text); font-weight:750; font-size:19px; letter-spacing:-.03em; text-decoration:none; padding:0 12px 28px; }.sidebar-label { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:12px 12px 6px; }.sidebar nav { display:grid; gap:2px; }.sidebar nav a { border-radius:7px; color:#475569; padding:9px 12px; text-decoration:none; font-weight:500; }.sidebar nav a:hover,.sidebar nav a.active { color:var(--text); background:var(--accent); }.plan { margin:auto 8px 0; background:#f8fafc; border:1px solid var(--line); border-radius:8px; font-weight:650; padding:10px; }.plan span { display:block; color:var(--muted); font-size:12px; font-weight:400; margin-top:3px; }.main { max-width:1320px; padding:42px clamp(20px,5vw,72px); width:100%; }.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:28px; }.eyebrow { color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.08em; margin:0 0 8px; text-transform:uppercase; } h1 { font-size:30px; letter-spacing:-.04em; margin:0; } h2 { font-size:16px; letter-spacing:-.02em; margin:0; }.muted { color:var(--muted); margin:7px 0 0; }.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 1px 2px rgb(15 23 42 / .03); }.card-header { border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; }.table-wrap { overflow:auto; } table { border-collapse:collapse; min-width:720px; width:100%; } th { color:var(--muted); background:#fcfcfd; font-size:12px; font-weight:600; text-align:left; } th,td { border-bottom:1px solid var(--line); padding:13px 20px; white-space:nowrap; } tbody tr:last-child td { border-bottom:none; }.sku { color:var(--muted); display:block; font-size:12px; margin-top:2px; }.badge { background:#fef3c7; border-radius:999px; color:#92400e; display:inline-block; font-size:12px; font-weight:700; min-width:28px; padding:3px 9px; text-align:center; }.button { background:var(--primary); border:1px solid var(--primary); border-radius:7px; color:#fff; cursor:pointer; display:inline-block; font:inherit; font-weight:600; padding:8px 12px; text-decoration:none; white-space:nowrap; }.button:hover { background:#27272a; }.button.secondary { background:#fff; color:#334155; border-color:var(--line); }.button:disabled { cursor:not-allowed; opacity:.45; }.empty,.loading,.empty-state { color:var(--muted); padding:32px 20px; text-align:center; }.empty-state { text-align:left; }.empty-state h2 { margin-bottom:8px; }.empty-state p { color:var(--muted); margin:0 0 20px; }.error { color:#b91c1c; background:#fef2f2; border-bottom:1px solid #fecaca; margin:0; padding:12px 20px; }.modal-backdrop { align-items:center; background:rgb(15 23 42 / .45); display:flex; inset:0; justify-content:center; padding:20px; position:fixed; }.modal { background:#fff; border-radius:var(--radius); box-shadow:0 18px 50px rgb(15 23 42 / .25); max-width:520px; padding:0; width:100%; }.modal > .muted { padding:20px; }.icon-button { background:none; border:0; color:var(--muted); cursor:pointer; font-size:24px; line-height:1; }.form-row { display:grid; gap:14px; grid-template-columns:1fr 1fr; padding:0 20px 20px; }.form-row label { color:#334155; font-size:12px; font-weight:650; }.form-row input { border:1px solid var(--line); border-radius:7px; display:block; margin-top:6px; padding:9px; width:100%; }.modal-actions { border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; padding:14px 20px; } @media (max-width:760px) { .app-shell { grid-template-columns:1fr; }.sidebar { display:none; }.main { padding:26px 16px; }.page-header { flex-direction:column; }.form-row { grid-template-columns:1fr; } }
.badge.neutral{background:#e2e8f0;color:#334155}.table-input{border:1px solid var(--line);border-radius:6px;font:inherit;padding:6px 8px;width:84px}.file-input{margin:0 12px 12px 0}.sync-progress{background:#e2e8f0;height:3px;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:20}.sync-progress i{animation:progress 1.25s ease-in-out infinite;background:#18181b;display:block;height:100%;width:36%}@keyframes progress{from{transform:translateX(-110%)}to{transform:translateX(310%)}}.default-rule{align-items:end;display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px;padding:18px 20px}.default-rule>div{flex:1 1 260px}.default-rule label:not(.check){font-size:12px;font-weight:650}.default-rule input[type=number]{border:1px solid var(--line);border-radius:7px;display:block;font:inherit;margin-top:6px;padding:8px;width:90px}.modal-wide{max-width:760px}.po-lines{max-height:360px;overflow:auto;padding:0 20px 12px}.po-line{align-items:center;border-bottom:1px solid var(--line);display:grid;gap:12px;grid-template-columns:auto minmax(160px,1fr) auto 72px;padding:12px 2px}.po-line small{color:var(--muted);display:block}.po-line input[type=number]{border:1px solid var(--line);border-radius:6px;font:inherit;padding:7px;width:72px}
.text-button{align-items:center;background:transparent;border:0;color:#2563eb;cursor:pointer;display:inline-flex;font:inherit;font-size:12px;margin-top:7px;padding:0;text-decoration:underline}.section-subhead .text-button{border:1px solid var(--line);border-radius:7px;color:#334155;font-size:14px;font-weight:600;margin:0;padding:8px 12px;text-decoration:none}.section-subhead .text-button:hover{background:#f8fafc}
.modal-backdrop{z-index:20}.supplier-backdrop{z-index:30}.link-button{background:none;border:0;color:#2563eb;cursor:pointer;font:inherit;font-weight:650;padding:0;text-decoration:underline}
.po-details{max-height:360px;overflow:auto}.po-details table{min-width:0}.button.danger{background:#b91c1c;border-color:#b91c1c}
.status-badge{border-radius:999px;display:inline-block;font-size:12px;font-weight:700;padding:4px 9px;text-transform:capitalize}.status-draft{background:#e2e8f0;color:#334155}.status-ordered{background:#dbeafe;color:#1d4ed8}.status-partially_received{background:#fef3c7;color:#92400e}.status-received{background:#dcfce7;color:#166534}.status-cancelled{background:#fee2e2;color:#991b1b}.settings-section{margin-top:18px}
.settings-nav{border-left:1px solid var(--line);display:grid;margin:5px 0 8px 12px;padding-left:7px}.settings-nav a{font-size:12px;padding:6px 8px!important}.digest-settings{align-items:end;display:flex;flex-wrap:wrap;gap:16px;padding:20px}.digest-settings>div{flex:1 1 230px}.digest-settings label:not(.check){font-size:12px;font-weight:650}.digest-settings input[type=email]{border:1px solid var(--line);border-radius:7px;display:block;font:inherit;margin-top:6px;padding:8px;width:230px}.digest-settings .error{flex-basis:100%}.danger-link{color:#b91c1c}
.rule-import{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.rule-import label{font-size:12px;font-weight:650}.visually-hidden{height:1px!important;margin:-1px!important;overflow:hidden!important;position:absolute!important;width:1px!important;clip:rect(0 0 0 0)!important}
.import-top{padding:14px 20px}.import-preview .section-subhead{padding-top:14px}.import-ok{color:#166534;font-weight:650}.import-error{color:#b91c1c;font-weight:650}
.sync-action{align-items:center;display:flex;gap:10px}.sync-action .muted{margin:0}.page-enter{opacity:0;transform:translateY(3px)}.page-enter-active{opacity:1;transform:none;transition:opacity 150ms ease,transform 150ms ease}.reorder-settings .default-rule{margin:0}.rule-defaults .section-subhead,.rule-exceptions .section-subhead{align-items:center;display:flex;justify-content:space-between;padding:8px 20px 10px}.rule-defaults .section-subhead{padding-top:18px}.section-subhead h3{font-size:14px;margin:0}
.card-header,.default-rule,.digest-settings,.rule-import,.section-subhead,.button-group,.modal-actions{align-items:center}.form-row-single{grid-template-columns:1fr}.form-row textarea{border:1px solid var(--line);border-radius:7px;display:block;font:inherit;margin-top:6px;min-height:76px;padding:9px;resize:vertical;width:100%}.default-rule>label,.digest-settings>label,.rule-import>label,.rule-import>span{align-self:center}.reorder-settings .card-header{border-bottom:0}.reorder-settings .default-rule{border:0}.reorder-settings .rule-exceptions .section-subhead{border:0}.default-rule>.check,.default-rule>.button,.digest-settings>.check,.digest-settings>.button{align-self:flex-end;margin-bottom:1px}
.button-group{display:flex;gap:8px}.form-row select{background:#fff;border:1px solid var(--line);border-radius:7px;display:block;font:inherit;margin-top:6px;padding:9px;width:100%}
.reorder-settings .default-rule{align-items:end;display:grid;grid-template-columns:auto 100px 100px auto;max-width:100%;width:fit-content}.reorder-settings .default-rule>.check{align-items:center;align-self:end;display:flex;height:38px;margin:0}.reorder-settings .default-rule>.button{align-self:end;height:38px;justify-self:start;margin:0}.reorder-settings .default-rule>label:not(.check){align-self:end}.digest-settings{align-items:end;display:grid;grid-template-columns:minmax(220px,1fr) auto 230px auto}.digest-settings>div{align-self:center}.digest-settings>.check{align-items:center;align-self:end;display:flex;height:38px;margin:0}.digest-settings>.button{align-self:end;height:38px;margin:0}.billing-settings{align-items:center;display:grid;gap:16px;grid-template-columns:minmax(220px,1fr) auto auto;padding:20px}.billing-settings>div{align-self:center}.billing-settings>.button{height:38px;margin:0}.billing-settings>.error{grid-column:1/-1;margin:0}.button-spinner{animation:button-spin .75s linear infinite;border:2px solid rgb(255 255 255 / .45);border-radius:999px;border-top-color:#fff;display:inline-block;height:13px;margin-right:7px;vertical-align:-2px;width:13px}.button.secondary .button-spinner{border-color:rgb(51 65 85 / .3);border-top-color:#334155}@keyframes button-spin{to{transform:rotate(360deg)}}@media (max-width:760px){.reorder-settings .default-rule,.digest-settings,.billing-settings{grid-template-columns:1fr;width:100%}.reorder-settings .default-rule>.check,.reorder-settings .default-rule>.button,.digest-settings>.check,.digest-settings>.button,.billing-settings>.button{align-self:auto}.digest-settings>div,.billing-settings>div{align-self:auto}}
.access-gate{align-items:center;background:var(--bg);display:flex;inset:0;justify-content:center;padding:24px;position:fixed;z-index:50}.access-gate-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgb(15 23 42 / .12);max-width:460px;padding:32px;width:100%}.access-gate-card h1{font-size:27px;margin:0}.access-gate-card .button{margin-top:24px}.access-gate-card .error{border:1px solid #fecaca;border-radius:7px;margin-top:18px;padding:10px}
.modal form { padding-top:20px; }
.modal-error { background:#fef2f2; border-bottom:1px solid #fecaca; color:#b91c1c; margin:0; padding:10px 20px; }