/* Brand layer: carries the home page's look to every inner page — the logo's colours as gradient tiles, the soft
   multi-colour halo behind page titles, gradient accents and white rounded cards. Loaded last on every page; it only
   restyles, so a page without it still works. Colours come from the tokens in style.css / store.css (dark mode too). */
:root{
  --tone-0:linear-gradient(135deg,#2d9cf0,#1f6fe5);
  --tone-1:linear-gradient(135deg,#2fa84f,#1f8ff0);
  --tone-2:linear-gradient(135deg,#f7931e,#e8352d);
  --tone-3:linear-gradient(135deg,#f9c623,#2fa84f);
  --tone-4:linear-gradient(135deg,#e8352d,#f7931e 55%,#f9c623);
  --tone-5:linear-gradient(135deg,#8f6bff,#1f6fe5);
  --brand-halo:radial-gradient(40% 60% at 18% 30%,rgba(31,111,229,.10),transparent 70%),radial-gradient(32% 55% at 55% 20%,rgba(232,53,45,.06),transparent 70%),radial-gradient(38% 60% at 85% 45%,rgba(47,168,79,.08),transparent 70%);
  --btn-grad:linear-gradient(135deg,#2d9cf0,#1f6fe5);
  --btn-glow:0 6px 16px -6px rgba(31,111,229,.55);
}
@media (prefers-color-scheme:dark){:root{
  --brand-halo:radial-gradient(40% 60% at 18% 30%,rgba(45,156,240,.16),transparent 70%),radial-gradient(32% 55% at 55% 20%,rgba(232,53,45,.10),transparent 70%),radial-gradient(38% 60% at 85% 45%,rgba(47,168,79,.12),transparent 70%);
  --btn-glow:0 6px 18px -6px rgba(45,156,240,.6);
}}
.tone-0{--tone:var(--tone-0)}.tone-1{--tone:var(--tone-1)}.tone-2{--tone:var(--tone-2)}.tone-3{--tone:var(--tone-3)}.tone-4{--tone:var(--tone-4)}.tone-5{--tone:var(--tone-5)}

/* ---------- admin and console shell ---------- */
.admin-ui .workspace{position:relative;isolation:isolate}
.admin-ui .workspace:before{content:"";position:absolute;inset:0 0 auto;height:340px;z-index:-1;pointer-events:none;background:var(--brand-halo)}
.admin-ui .head-row{align-items:center;gap:18px}
.admin-ui .head-row>.head-main{display:flex;align-items:center;gap:16px;min-width:0}
.admin-ui .page-ico{flex:none;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:#fff;background:var(--tone,var(--tone-0));box-shadow:0 10px 24px -12px rgba(31,111,229,.55),inset 0 1px 0 rgba(255,255,255,.25)}
.admin-ui .page-ico .svgicon{width:26px;height:26px;color:#fff;stroke-width:1.8}
.admin-ui .head-row h1{font-size:30px;font-weight:650;letter-spacing:-.025em;line-height:1.15}
.admin-ui .head-row h1+p{margin-top:5px;color:var(--c-text-2);font-size:14px}
.admin-ui .breadcrumb strong{color:var(--c-accent-text)}
.admin-ui .workspace>.tabs{margin-bottom:22px}

/* Sidebar: every page sits on a small colour tile, coloured by its group, like the home page's service tiles. */
.admin-ui .side-head{border-bottom:0;box-shadow:inset 0 -1px 0 var(--c-sep-2)}
.admin-ui .side-head:after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;border-radius:2px;background:var(--brand-gradient);opacity:.85}
.admin-ui .sidebar-group{text-transform:none;letter-spacing:.02em;font-size:11.5px;color:var(--c-text-3,var(--c-text-2));padding-top:20px}
.admin-ui .side-link{gap:11px;min-height:36px;padding:6px 10px;border-radius:10px}
.admin-ui .side-link .svgicon{box-sizing:border-box;width:26px;height:26px;padding:5px;border-radius:8px;color:#fff;background:var(--tone,var(--tone-0));stroke-width:2;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.admin-ui .side-link.active .svgicon{color:#fff}
.admin-ui .side-link.active{background:var(--c-surface);color:var(--c-text);box-shadow:0 1px 2px rgba(0,0,0,.05),0 4px 14px -6px rgba(0,0,0,.12)}
.admin-ui .side-link.active:after{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--tone,var(--tone-0))}
.admin-ui .side-link:hover:not(.active){background:color-mix(in srgb,var(--c-text) 5%,transparent)}
@media(max-width:1150px){.admin-ui .side-link .svgicon{width:30px;height:30px;padding:6px}.admin-ui .side-link.active:after{display:none}}

/* Cards, panels and settings */
.admin-ui .card,.admin-ui .panel,.admin-ui .stat-card,.admin-ui .set-card{border:1px solid var(--c-sep-2);border-radius:var(--r-card,18px);background:var(--c-surface);box-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 24px -14px rgba(16,24,40,.14)}
.admin-ui .panel-head{border-bottom:1px solid var(--c-sep-2)}
.admin-ui .panel-head h2,.admin-ui .panel-head h3,.admin-ui .card>h2:first-child,.admin-ui .card>h3:first-child,.admin-ui .set-head b,.admin-ui .set-head strong{display:inline-flex;align-items:center;gap:9px}
.admin-ui .panel-head h2:before,.admin-ui .panel-head h3:before,.admin-ui .card>h2:first-child:before,.admin-ui .card>h3:first-child:before,.admin-ui .set-head>div:first-child>:first-child:before{content:"";flex:none;width:4px;height:1em;border-radius:2px;background:linear-gradient(180deg,#2d9cf0,#1f6fe5 45%,#e8352d 75%,#f9c623);display:inline-block;margin-right:9px;vertical-align:-2px}
.admin-ui .page-body h2{letter-spacing:-.01em}

/* Overview: stat tiles get the gradient icon tiles of the home page. */
.admin-ui .stat-card{position:relative;overflow:hidden}
.admin-ui .stat-card:after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:var(--tone,var(--tone-0));opacity:.07;pointer-events:none}
.admin-ui .stat-icon{--tone:var(--tone-0);background:var(--tone);color:#fff;box-shadow:0 8px 18px -10px rgba(31,111,229,.6)}
.admin-ui .stat-icon.green{--tone:var(--tone-1)}
.admin-ui .stat-icon.purple{--tone:var(--tone-5)}
.admin-ui .stat-icon.amber{--tone:var(--tone-2)}
.admin-ui .stat-icon.red{--tone:var(--tone-4)}
.admin-ui .stat-icon .svgicon{color:#fff}
.admin-ui .stat-card:nth-child(2){--tone:var(--tone-1)}.admin-ui .stat-card:nth-child(3){--tone:var(--tone-5)}.admin-ui .stat-card:nth-child(4){--tone:var(--tone-2)}
.admin-ui .quick{background:var(--c-surface);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.admin-ui .quick:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c-accent) 35%,var(--c-sep-2));box-shadow:0 10px 22px -14px rgba(31,111,229,.5)}
.admin-ui .quick .svgicon{box-sizing:border-box;width:34px;height:34px;padding:7px;border-radius:10px;color:#fff;background:var(--tone-0)}
.admin-ui .quick:nth-child(5n+2) .svgicon{background:var(--tone-1)}.admin-ui .quick:nth-child(5n+3) .svgicon{background:var(--tone-2)}
.admin-ui .quick:nth-child(5n+4) .svgicon{background:var(--tone-3)}.admin-ui .quick:nth-child(5n+5) .svgicon{background:var(--tone-4)}

/* Settings: full width, active section as a brand-blue pill. */
.admin-ui .set-layout{max-width:none;grid-template-columns:236px minmax(0,1fr);gap:24px}
.admin-ui .set-side{border-radius:var(--r-card,18px)}
.admin-ui .set-link.on,.admin-ui .set-link.on:hover{background:var(--btn-grad);color:#fff;box-shadow:var(--btn-glow)}
.admin-ui .set-link.on small{color:rgba(255,255,255,.85)}

/* Buttons and fields */
.admin-ui button.primary,.admin-ui .btn.primary,.admin-ui a.btn.primary,.admin-ui .btn-primary{background:var(--btn-grad);border-color:transparent;color:#fff;box-shadow:var(--btn-glow)}
.admin-ui button.primary:hover:not(:disabled),.admin-ui .btn.primary:hover,.admin-ui .btn-primary:hover{filter:brightness(1.06);box-shadow:0 8px 20px -6px rgba(31,111,229,.6)}
.admin-ui input:focus,.admin-ui select:focus,.admin-ui textarea:focus{border-color:var(--c-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-accent) 16%,transparent);outline:0}

/* Tables */
.admin-ui table th{background:color-mix(in srgb,var(--c-bg-2) 70%,transparent);color:var(--c-text-2);font-weight:600;font-size:12px;letter-spacing:.02em}
.admin-ui table tbody tr{transition:background .15s ease}
.admin-ui table tbody tr:hover{background:color-mix(in srgb,var(--c-accent) 5%,transparent)}

/* Empty states: a soft tile instead of bare text */
.admin-ui p.empty,.admin-ui .empty-state{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--c-text-2)}
.admin-ui p.empty:before,.admin-ui .empty-state:before{content:"";width:44px;height:44px;border-radius:13px;background:var(--brand-halo),var(--c-bg-2);box-shadow:inset 0 0 0 1px var(--c-sep-2)}

/* ---------- permission checkboxes (roles page) ---------- */
.perm-editor{display:grid;gap:14px}
.perm-group{border:1px solid var(--c-sep-2);border-radius:14px;padding:12px 14px;background:var(--c-surface)}
.perm-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.perm-group-head b{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.perm-group-head b:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tone,var(--tone-0))}
.perm-group-head button{font-size:12px;padding:3px 10px;min-height:26px}
.perm-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 12px}
.perm-item{display:flex;align-items:flex-start;gap:8px;padding:7px 9px;border-radius:9px;cursor:pointer;font-size:13px;line-height:1.35}
.perm-item:hover{background:color-mix(in srgb,var(--c-accent) 6%,transparent)}
.perm-item input{margin-top:2px;accent-color:#1f6fe5;width:16px;height:16px;flex:none}
.perm-item small{display:block;color:var(--c-text-2);font-size:11px;font-family:var(--font-mono,ui-monospace,monospace)}
.perm-item.locked{opacity:.7;cursor:default}
.role-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:6px 0 22px}
.role-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid var(--c-sep-2);border-radius:var(--r-card,18px);background:var(--c-surface);box-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 24px -14px rgba(16,24,40,.14)}
.role-card-top{display:flex;align-items:center;gap:12px}
.role-badge{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;background:var(--tone,var(--tone-0));box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.role-card h3{margin:0;font-size:16px}
.role-card .meta{color:var(--c-text-2);font-size:12px}
.role-card .perm-chips{display:flex;flex-wrap:wrap;gap:5px;max-height:84px;overflow:hidden;mask-image:linear-gradient(180deg,#000 70%,transparent)}
.role-card .perm-chips span{font-size:11.5px;padding:2px 8px;border-radius:999px;background:var(--c-bg-2);color:var(--c-text-2)}
.role-card .actions{display:flex;gap:8px;margin-top:auto}
.role-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border-radius:999px;background:var(--c-bg-2);font-size:12.5px;font-weight:600}
.role-pill i{width:18px;height:18px;border-radius:6px;background:var(--tone,var(--tone-0));display:inline-block}
.sole-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--c-accent) 7%,var(--c-surface));border:1px solid color-mix(in srgb,var(--c-accent) 20%,transparent);font-size:13px;color:var(--c-text);margin-bottom:16px}

/* ---------- storefront inner pages ---------- */
.page-hero{position:relative;overflow:hidden;isolation:isolate}
.page-hero:before{content:"";position:absolute;inset:-35% -10% auto;height:560px;z-index:-1;pointer-events:none;background:var(--brand-halo)}
.page-hero h1 .accent,.page-hero h1 em{font-style:normal;background:var(--brand-gradient-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.store-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:42px 20px}
.store-empty:before{content:"";width:52px;height:52px;border-radius:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E") center/26px no-repeat,var(--tone-0);box-shadow:0 10px 24px -12px rgba(31,111,229,.55)}
.segmented>.on,.segmented>.active,.segmented>.selected,.segmented>[aria-selected=true],.segmented>[aria-current=page]{color:var(--c-accent-text)}
.btn-primary{background:var(--btn-grad);border-color:transparent;box-shadow:var(--btn-glow)}
.btn-primary:hover{filter:brightness(1.06)}
@media (forced-colors:active){.page-hero h1 .accent,.page-hero h1 em{background:none;color:CanvasText;-webkit-text-fill-color:currentColor}}
@media (prefers-reduced-motion:reduce){.admin-ui .quick{transition:none}.admin-ui .quick:hover{transform:none}}
.modal-box.wide{max-width:880px;width:min(880px,94vw);max-height:88vh;overflow:auto}
.modal-box.wide>.row.end{position:sticky;bottom:-26px;margin:0 -26px -26px;padding:14px 26px;background:var(--c-elevated);border-top:1px solid var(--c-sep-2)}
.banner{position:relative;overflow:hidden;isolation:isolate;background:var(--c-surface);border:1px solid var(--c-sep-2);box-shadow:0 1px 2px rgba(0,0,0,.03),0 10px 28px -16px rgba(16,24,40,.18)}
.banner:after{content:"";position:absolute;inset:0;z-index:-1;background:var(--brand-halo);opacity:.9;pointer-events:none}
.banner:before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,#2d9cf0,#1f6fe5 30%,#e8352d 60%,#f9c623 80%,#2fa84f)}
.page-hero .page-label{display:inline-flex;align-items:center;gap:8px;letter-spacing:.14em}
.page-hero .page-label:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-gradient)}

/* ---------- customer console ---------- */
.console .dashboard-main{position:relative;isolation:isolate}
.console .dashboard-main:before{content:"";position:absolute;inset:0 0 auto;height:320px;z-index:-1;pointer-events:none;background:var(--brand-halo)}
.console .dash-welcome .head-main{display:flex;align-items:center;gap:16px;min-width:0}
.console .page-ico{flex:none;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:#fff;font-size:22px;background:var(--tone,var(--tone-0));box-shadow:0 10px 24px -12px rgba(31,111,229,.55),inset 0 1px 0 rgba(255,255,255,.25)}
.console .side-link{gap:10px;border-radius:10px;position:relative}
.console .side-link .ico{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:12px;line-height:1;color:#fff;background:var(--tone,var(--tone-0));box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.console .side-link.active{background:var(--c-surface);color:var(--c-text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.05),0 4px 14px -6px rgba(0,0,0,.12)}
.console .side-link.active .ico{color:#fff}
.console .side-link.active:after{content:"";position:absolute;left:-8px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--tone,var(--tone-0))}
.console .dash-metric,.console .chart-panel{position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 24px -14px rgba(16,24,40,.14)}
.console .dicon{--tone:var(--tone-0);background:var(--tone)!important;color:#fff!important;box-shadow:0 8px 18px -10px rgba(31,111,229,.6)}
.console .dash-metric:nth-child(2) .dicon{--tone:var(--tone-1)}.console .dash-metric:nth-child(3) .dicon{--tone:var(--tone-2)}.console .dash-metric:nth-child(4) .dicon{--tone:var(--tone-4)}
.console .dash-metric:after{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;background:var(--tone-0);opacity:.06;pointer-events:none}
.console .dash-metric:nth-child(2):after{background:var(--tone-1)}.console .dash-metric:nth-child(3):after{background:var(--tone-2)}.console .dash-metric:nth-child(4):after{background:var(--tone-4)}
.console .chart-panel h3:before,.console .section-head h2:before{content:"";display:inline-block;width:4px;height:1em;border-radius:2px;margin-right:9px;vertical-align:-2px;background:linear-gradient(180deg,#2d9cf0,#1f6fe5 45%,#e8352d 75%,#f9c623)}
.console .quick-link{transition:background .15s ease}
.console .quick-link:hover{background:color-mix(in srgb,var(--c-accent) 6%,transparent)}

/* ---------- help centre ---------- */
.hp-hero{position:relative;overflow:hidden;isolation:isolate;background:transparent}
.hp-hero:before{content:"";position:absolute;inset:-40% -10% auto;height:560px;z-index:-1;pointer-events:none;background:var(--brand-halo)}
.hp-hero .page-label{display:inline-flex;align-items:center;gap:8px;letter-spacing:.14em}
.hp-hero .page-label:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-gradient)}
.hp-cat-card{transition:transform .18s ease,box-shadow .18s ease}
.hp-cat-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(31,111,229,.45)}
.hp-cat-icon{--tone:var(--tone-0);background:var(--tone)!important;color:#fff!important;border-radius:12px;box-shadow:0 8px 18px -10px rgba(31,111,229,.55)}
.hp-cats>:nth-child(6n+2) .hp-cat-icon{--tone:var(--tone-1)}.hp-cats>:nth-child(6n+3) .hp-cat-icon{--tone:var(--tone-2)}
.hp-cats>:nth-child(6n+4) .hp-cat-icon{--tone:var(--tone-3)}.hp-cats>:nth-child(6n+5) .hp-cat-icon{--tone:var(--tone-4)}.hp-cats>:nth-child(6n+6) .hp-cat-icon{--tone:var(--tone-5)}
@media (prefers-reduced-motion:reduce){.hp-cat-card{transition:none}.hp-cat-card:hover{transform:none}}
.sup-spec{display:grid;gap:4px;padding:14px 16px;margin:6px 0 10px;border-radius:14px;background:color-mix(in srgb,var(--c-accent) 5%,var(--c-surface));border:1px solid color-mix(in srgb,var(--c-accent) 18%,transparent)}
.sup-spec>.row b{font-size:15px}
.inbox-list{display:grid;gap:8px;max-height:320px;overflow:auto}
.inbox-msg{padding:10px 12px;border-radius:12px;background:var(--c-bg-2);border:1px solid var(--c-sep-2)}
.inbox-msg p{margin:6px 0 0;white-space:pre-wrap;word-break:break-word}