@import url("https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700&display=swap");
/* Shared design system. Palette sampled from Sangster's back-to-school flyer (navy / royal blue / yellow). Logo & photo are from that flyer: replace with approved assets. */
:root{
  --navy:#06145f; --royal:#0a2a9e; --blue:#1f56d6; --sky:#eaf1ff; --sky-2:#f5f8ff; --yellow:#fcdf18; --yellow-2:#ffe95a; --yellow-ink:#3a3000;
  --bg:#f4f7fd; --surface:#ffffff; --surface-2:#eef3fc; --ink:#0b1440; --ink-2:#4a5680; --line:#dbe3f5;
  --brand:var(--royal); --brand-ink:#fff; --brand-2:var(--sky); --accent:var(--yellow); --accent-ink:var(--navy);
  --ok:#0f7a45; --ok-bg:#e2f6ea; --warn:#8a5a00; --warn-bg:#fff4d0; --bad:#b3261e; --bad-bg:#fde8e6; --info:#1f4e8c; --info-bg:#e6eefa; --sim:#6b2fa3; --sim-bg:#f1e8fa;
  --radius:16px; --radius-sm:12px; --shadow:0 1px 2px rgba(6,20,95,.06),0 8px 24px rgba(6,20,95,.07); --shadow-lg:0 4px 8px rgba(6,20,95,.08),0 24px 48px rgba(6,20,95,.14);
  --font:"Montserrat","Segoe UI",system-ui,-apple-system,Roboto,sans-serif; --font-display:"Montserrat","Segoe UI",system-ui,sans-serif; --script:"Kaushan Script","Brush Script MT",cursive;
  --gutter:18px; --max:1240px; --tap:46px;
}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:500 15.5px/1.55 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;margin:0 0 .5em;color:var(--navy);letter-spacing:-.01em} h1{font-size:2rem;font-weight:800} h2{font-size:1.45rem;font-weight:800} h3{font-size:1.1rem;font-weight:700}
a{color:var(--blue);font-weight:600} a:hover{text-decoration:none}
:focus-visible{outline:3px solid #1b57d6;outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:10px 14px;z-index:100} .skip:focus{left:8px;top:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:var(--tap);padding:0 22px;border-radius:999px;border:2px solid transparent;background:linear-gradient(180deg,var(--blue),var(--royal));color:#fff;font:700 .95rem var(--font);cursor:pointer;text-decoration:none;box-shadow:0 4px 14px rgba(10,42,158,.28);transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(10,42,158,.34)} .btn:active{transform:none} .btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn.secondary{background:#fff;color:var(--royal);border-color:var(--royal);box-shadow:none} .btn.secondary:hover{background:var(--sky)}
.btn.accent{background:linear-gradient(180deg,var(--yellow-2),var(--yellow));color:var(--navy);box-shadow:0 4px 14px rgba(252,223,24,.5);font-weight:800} .btn.accent:hover{box-shadow:0 8px 22px rgba(252,223,24,.6)}
.btn.danger{background:linear-gradient(180deg,#d4382f,var(--bad));box-shadow:none} .btn.ghost{background:transparent;color:var(--royal);box-shadow:none} .btn.ghost:hover{background:var(--sky);transform:none}
.btn.sm{min-height:36px;padding:0 16px;font-size:.84rem} .btn.block{width:100%}
input,select,textarea{font:500 1rem var(--font);color:var(--ink);min-height:var(--tap);padding:9px 14px;border:1.5px solid #b9c6e6;border-radius:var(--radius-sm);background:#fff;max-width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,86,214,.15)} textarea{min-height:96px}
label{display:block;font-weight:700;font-size:.9rem;margin:12px 0 5px;color:var(--navy)} .field{margin-bottom:8px} .hint{color:var(--ink-2);font-size:.88rem;font-weight:500} .err{color:var(--bad);font-size:.9rem;font-weight:600}
input[type=checkbox],input[type=radio]{min-height:auto;width:20px;height:20px;accent-color:var(--royal);padding:0}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:500;margin:8px 0} .check input{margin-top:3px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.grid{display:grid;gap:18px} .g2{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} .g-products{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .between{justify-content:space-between} .stack>*+*{margin-top:14px} .right{margin-left:auto}
.badge{display:inline-block;padding:3px 11px;border-radius:99px;font-size:.74rem;font-weight:800;letter-spacing:.01em;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok)} .badge.warn{background:var(--warn-bg);color:var(--warn)} .badge.bad{background:var(--bad-bg);color:var(--bad)} .badge.info{background:var(--info-bg);color:var(--info)} .badge.sim{background:var(--sim-bg);color:var(--sim)}
.notice{border-left:5px solid var(--blue);background:var(--info-bg);padding:12px 16px;border-radius:12px;margin:12px 0} .notice.warn{border-color:#e0a100;background:var(--warn-bg)} .notice.bad{border-color:var(--bad);background:var(--bad-bg)} .notice.ok{border-color:var(--ok);background:var(--ok-bg)} .notice.sim{border-color:var(--sim);background:var(--sim-bg)}
table{border-collapse:collapse;width:100%} th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top} th{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);background:var(--sky-2);font-weight:800} tbody tr:hover{background:var(--sky-2)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)} .num{text-align:right;font-variant-numeric:tabular-nums} .mono{font-family:ui-monospace,Menlo,monospace;font-size:.86em}
.tabs{display:flex;gap:6px;margin:18px 0;overflow-x:auto;padding:5px;background:var(--surface-2);border-radius:999px;width:fit-content;max-width:100%} .tabs button{background:none;border:0;border-radius:999px;padding:0 18px;font:700 .9rem var(--font);cursor:pointer;color:var(--ink-2);min-height:40px;white-space:nowrap} .tabs button[aria-selected=true]{background:#fff;color:var(--royal);box-shadow:var(--shadow)}
.toasts{position:fixed;right:14px;bottom:14px;display:grid;gap:8px;z-index:90;max-width:min(92vw,400px)} .toast{background:var(--navy);color:#fff;padding:13px 18px;border-radius:14px;box-shadow:var(--shadow-lg);font-weight:600} .toast.bad{background:var(--bad)} .toast.ok{background:var(--ok)}
.modal-bg{position:fixed;inset:0;background:rgba(6,20,95,.5);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:80;padding:16px} .modal{background:#fff;border-radius:22px;max-width:560px;width:100%;max-height:90vh;overflow:auto;padding:26px;box-shadow:var(--shadow-lg)}
.spinner{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--royal);border-radius:50%;animation:spin .8s linear infinite;display:inline-block} @keyframes spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}*{scroll-behavior:auto!important;transition:none!important}}
.empty{text-align:center;padding:44px 16px;color:var(--ink-2)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:5px 16px} .kv dt{color:var(--ink-2);font-weight:600} .kv dd{margin:0}
.total-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0} .total-row.big{font-weight:800;font-size:1.12rem;color:var(--navy);border-top:2px solid var(--navy);margin-top:8px;padding-top:10px}
.simbar{background:var(--sim);color:#fff;text-align:center;font-weight:700;font-size:.72rem;padding:5px 10px;letter-spacing:.06em;text-transform:uppercase}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}
.ico{width:1.25em;height:1.25em;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.22em}

.toast{display:flex;gap:16px;align-items:center;justify-content:space-between;animation:rise .25s ease-out} @keyframes rise{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.toast-act{background:var(--yellow);color:var(--navy);border:0;border-radius:999px;padding:6px 14px;font:800 .82rem var(--font);cursor:pointer;white-space:nowrap}
.link-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 8px;margin-left:-8px;border-radius:8px;font:700 .86rem var(--font);color:var(--royal);cursor:pointer} .link-btn:hover{background:var(--sky)}
.link-btn.danger{color:var(--bad)} .link-btn.danger:hover{background:var(--bad-bg)}
.link-btn{min-height:40px}
.toast-act{min-height:36px}
.sr{width:1px!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;left:0;top:0}
textarea{width:100%;resize:vertical;line-height:1.5} .modal textarea,.modal input:not([type=checkbox]):not([type=radio]),.modal select{width:100%;margin-top:6px} .modal textarea{min-height:130px} .modal h2{margin-bottom:8px} .modal>p{margin-top:0}