:root{
  /* Design System consumes the Quatron Brand Tokens (brand-tokens.css) as the
     single visual source of truth. Brand owns identity; these are the platform
     defaults before the Theme Engine applies runtime preferences. */
  --qtr-white:#FFFFFF;
  /* The brand defines no pure black; Ink (#0D1420) is its darkest value. This
     token keeps its name for existing call sites but resolves to Ink. */
  --qtr-black:var(--qt-ink);
  --qtr-page-light:var(--qt-neutral-50);
  --qtr-page-soft:var(--qt-neutral-100);
  --qtr-ink:var(--qt-ink);
  --qtr-ink-strong:var(--qt-ink);
  --qtr-muted:var(--qt-neutral-500);
  --qtr-line:var(--qt-neutral-200);
  --qtr-overlay:rgba(13,20,32,.34);
  --qtr-danger:var(--qt-status-destructive);
  --qtr-danger-soft:color-mix(in srgb,var(--qt-status-destructive) 14%,#fff);
  --qtr-success:var(--qt-status-verified);
  --qtr-success-soft:color-mix(in srgb,var(--qt-status-verified) 14%,#fff);
  /* Semantic text tier, from the brand text tokens. Use these wherever a status colour is
     TEXT; keep --qtr-success/-danger/-warning for fills and borders, where the display
     hue is correct and contrast does not apply. */
  --qtr-success-text: var(--qt-status-verified-text);
  --qtr-danger-text: var(--qt-status-destructive-text);
  --qtr-warning-text: var(--qt-status-warning-text);
  --qtr-info-text: var(--qt-status-info-text);
  --qtr-muted-text: var(--qt-neutral-text-muted);
  --qtr-warning:var(--qt-status-warning);
  --qtr-warning-soft:color-mix(in srgb,var(--qt-status-warning) 16%,#fff);
  --qtr-info:var(--qt-status-info);
  --qtr-info-soft:color-mix(in srgb,var(--qt-status-info) 14%,#fff);
  --qtr-on-accent:#FFFFFF;
  /* Brand product accents — Brand v1.2.
     The LEFT side is the platform's accent-key vocabulary, which the product
     registry and home-portal-renderer emit; the RIGHT side is the official
     product code from the Brand Identity System. Keeping the left side stable
     is deliberate: renaming it would mean a registry migration, and the brand
     owns the value, not the key the runtime happens to look up.
     `gold` and `bi` both resolve to QBI because Gold IS Business Intelligence's
     official accent in v1.2 — in v1.1 they were two different hues, which is
     precisely the drift the code-keyed tokens remove. */
  --qtr-product-platform:var(--qt-blue);            /* the shell wears Brand Blue, not a product accent */
  --qtr-product-identity:var(--qt-product-qip);
  --qtr-product-hcm:var(--qt-product-qhcm);
  --qtr-product-finance:var(--qt-product-qfin);
  --qtr-product-gold:var(--qt-product-qbi);
  --qtr-product-crm:var(--qt-product-qcrm);
  --qtr-product-manufacturing:var(--qt-product-qmfg);
  --qtr-product-pos:var(--qt-product-qpos);
  --qtr-product-bi:var(--qt-product-qbi);
  --qtr-product-ai:var(--qt-product-qai);
  --qtr-product-developer:var(--qt-component-qsdk);
  /* Products the Brand Identity System names that the platform did not yet have
     an accent for. Declared so a product can adopt its official accent by token
     rather than by inventing one. */
  --qtr-product-qoc:var(--qt-product-qoc);
  --qtr-product-qrp:var(--qt-product-qrp);
  --qtr-product-qdt:var(--qt-product-qdt);
  --qtr-product-qpay:var(--qt-product-qpay);
  --qtr-product-qbpp:var(--qt-product-qbpp);
  --qtr-product-qre:var(--qt-product-qre);
  --qtr-product-qinv:var(--qt-product-qinv);
  --qtr-product-qproc:var(--qt-product-qproc);
  --qtr-product-qsal:var(--qt-product-qsal);
  --qtr-product-qpm:var(--qt-product-qpm);
  --qtr-product-qam:var(--qt-product-qam);
  --qtr-product-qms:var(--qt-product-qms);
  --qtr-product-qdms:var(--qt-product-qdms);
  --qtr-shadow-color:rgba(13,20,32,.14);
  --qtr-shadow:var(--qt-shadow-ambient);
  --qtr-control-height:44px;
  --qtr-header-height:72px;
  --qtr-dock-collapsed:68px;
  --qtr-dock-expanded:220px;
  /* Spacing — Brand Tokens spacing.base 8 / spacing.dense 4. Every step is a
     multiple of 4 and every step from -2 up is a multiple of 8 or 8±4. The
     former 18/22/28 were off-grid and are corrected to 20/24/32. */
  --qtr-space-1:4px;
  --qtr-space-2:8px;
  --qtr-space-3:12px;
  --qtr-space-4:16px;
  --qtr-space-5:20px;
  --qtr-space-6:24px;
  --qtr-space-7:32px;
  /* Type scale — Brand Tokens typography.scale [12,13,14,16,20,24,32,44,60].
     Named steps below map onto that scale only; no off-scale size is defined. */
  --qtr-font-size-xs:12px;
  --qtr-font-size-sm:14px;
  --qtr-font-size-md:16px;
  --qtr-font-size-lg:20px;
  --qtr-font-size-xl:24px;
  --qtr-font-size-2xl:32px;
  --qtr-font-size-hero:44px;
  --qtr-line-body:1.5;
  --qtr-line-display:1.15;
  --qtr-line-arabic:1.7;
  --qtr-weight-regular:400;
  --qtr-weight-medium:500;
  --qtr-weight-semibold:600;
  --qtr-font:var(--qt-font-ui);
  --qtr-font-mono:var(--qt-font-mono);
  --accent:var(--qt-blue);
  --accent-hover:color-mix(in srgb,var(--qt-blue) 82%,var(--qt-ink));
  --accent-soft:color-mix(in srgb,var(--accent) 12%,transparent);
  --accent-border:color-mix(in srgb,var(--accent) 28%,transparent);
  --accent-text:color-mix(in srgb,var(--accent) 72%,var(--qt-ink) 28%);
  --background:linear-gradient(135deg,var(--qt-neutral-50),var(--qt-surface,var(--qtr-white)));
  --surface:color-mix(in srgb,var(--qt-surface,#fff) 88%,transparent);
  --surface-secondary:color-mix(in srgb,var(--qt-surface,#fff) 72%,transparent);
  --glass:color-mix(in srgb,var(--qt-surface,#fff) 88%,transparent);
  /* Borders and elevation derive from the brand border/ink, not a bespoke grey. */
  --glass-border:color-mix(in srgb,var(--qt-neutral-300) 72%,transparent);
  --glass-shadow:0 18px 46px color-mix(in srgb,var(--qt-ink) 10%,transparent);
  --blur:24px;
  /* Radius — Brand Tokens radius.control 6 / radius.card 10. `--radius` is the
     card register, `--radius-control` the control register. Pill (999px) and
     circle (50%) remain shape primitives, not radius steps. */
  --radius:var(--qt-radius-card);
  --radius-control:var(--qt-radius-control);
  --radius-card:var(--qt-radius-card);
  --radius-panel:var(--qt-radius-card);
  --density:var(--qtr-space-6);
  /* Motion — Brand Tokens motion.curve + motion.durations. */
  --motion:var(--qt-motion-base);
  --animation-speed:var(--qt-motion-fast);
  --qtr-motion-curve:var(--qt-motion-curve);
  --qtr-motion-fast:var(--qt-motion-fast);
  --qtr-motion-base:var(--qt-motion-base);
  --qtr-motion-reveal:var(--qt-motion-reveal);
  --text-primary:var(--qt-neutral-800);
  --text-secondary:var(--qt-neutral-600);
  --text-muted:var(--qt-neutral-500);
  /* Semantic aliases that product sheets already reference. Before Brand v1.1
     these were undefined, so the hardcoded fallback in each `var(--x,#hex)`
     WAS the rendered value — which is how five different blues, three reds and
     four card radii reached production. Defining them here binds every existing
     reference to the brand without editing the call sites. */
  --qtr-accent:var(--accent);
  --qtr-accent-soft:var(--accent-soft);
  --qtr-border:var(--qt-border,var(--qt-neutral-200));
  --qtr-surface:var(--qt-surface,var(--qtr-white));
  --qtr-surface-soft:var(--qt-neutral-100);
  --qtr-text:var(--text-primary);
  --qtr-text-secondary:var(--text-secondary);
  --text-tertiary:var(--qt-neutral-500);
  --surface-primary:var(--qtr-surface);
  --qtr-type-scale:1;
  /* Template/document preview accent. A company may override it per QRP branding;
     the platform default is brand Blue, not the former #2b59ff. */
  --tpl-accent:var(--accent);
  --focus-ring:0 0 0 4px var(--accent-soft);
  font-family:var(--qtr-font);
}

/* Typography — Brand Tokens typography.latin / .arabic bound per script rather
   than as one flat stack: Latin surfaces lead with IBM Plex Sans, Arabic
   surfaces with Tajawal, each falling back to the other. Arabic also takes the
   brand's 1.7 line height, which Latin body copy does not. The stacks are
   written out rather than composed from --qt-font-latin/--qt-font-arabic
   because each of those already ends in a generic family, and a generic in the
   middle of a stack terminates the chain. */
html[lang="ar"],[dir="rtl"]{
  --qtr-font:'Tajawal','IBM Plex Sans',system-ui,'Segoe UI',Tahoma,sans-serif;
  line-height:var(--qtr-line-arabic);
}
html[lang="en"],[dir="ltr"]{
  --qtr-font:'IBM Plex Sans','Tajawal',system-ui,'Segoe UI',Tahoma,sans-serif;
}

/* Dark mode — Brand Tokens color.mode.dark. Previously #F6FAFF / rgba(246,250,255,…),
   a palette with no brand origin; now the brand's own dark text and border. */
html[data-appearance="dark"]{
  --text-primary:var(--qt-neutral-100);
  --text-secondary:var(--qt-neutral-400);
  --text-muted:color-mix(in srgb,var(--qt-neutral-400) 82%,transparent);
  --glass-border:color-mix(in srgb,var(--qt-neutral-700) 84%,transparent);
}

html[data-contrast="high"]{
  --text-primary:var(--qtr-ink-strong);
  --text-secondary:var(--qtr-ink);
  --text-muted:var(--qtr-ink);
}

html[data-appearance="dark"][data-contrast="high"]{
  --text-primary:var(--qtr-white);
  --text-secondary:var(--qt-neutral-50);
  --text-muted:var(--qt-neutral-100);
}

html[data-qtr-motion="none"] *,html[data-qtr-motion="reduced"] *{
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important;
  scroll-behavior:auto!important;
}

body{
  background:var(--background)!important;
  color:var(--text-primary)!important;
}

.login{
  background:
    radial-gradient(circle at 12% -8%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 34%),
    radial-gradient(circle at 92% 24%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 30%),
    var(--background)!important;
}

.login-card,.qtr-surface{
  background:var(--glass)!important;
  border:1px solid var(--glass-border)!important;
  box-shadow:var(--glass-shadow)!important;
  backdrop-filter:blur(var(--blur)) saturate(180%)!important;
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%)!important;
  color:var(--text-primary)!important;
}

.btn.primary,.login-card .btn.primary{
  background:linear-gradient(155deg,var(--accent),var(--accent-hover))!important;
  color:#fff!important;
  border-color:color-mix(in srgb,var(--accent) 50%,transparent)!important;
}

.btn:not(.primary),.top-icon,.qtr-accent-text{
  color:var(--accent-text)!important;
}

.qtr-workspace-studio-drawer{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  z-index:61;
  width:min(440px,100vw);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transform:translateX(-106%);
  transition:transform var(--motion) cubic-bezier(.22,.9,.32,1);
  background:var(--glass);
  border-right:1px solid var(--glass-border);
  box-shadow:0 30px 90px color-mix(in srgb,var(--qt-ink) 22%,transparent);
  backdrop-filter:blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);
}

.qtr-workspace-studio-drawer.open{transform:translateX(0)}
.qtr-studio-scrim{position:fixed;inset:0;z-index:60;background:color-mix(in srgb,var(--qt-ink) 28%,transparent);opacity:0;pointer-events:none;transition:opacity var(--motion) ease}
.qtr-studio-scrim.open{opacity:1;pointer-events:auto}
.qtr-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px;border-bottom:1px solid var(--glass-border)}
.qtr-drawer-head h2{margin:0;color:var(--text-primary);font-size:1.1rem;font-weight:900}
.qtr-drawer-head p{margin:4px 0 0;color:var(--text-muted);line-height:1.45;font-size:.85rem}
.qtr-drawer-close{width:36px;height:36px;border-radius:999px;border:1px solid var(--glass-border);background:var(--surface-secondary);display:grid;place-items:center;color:var(--accent-text)}
.qtr-drawer-body{padding:20px 22px 26px;overflow-y:auto;display:grid;gap:24px}
.qtr-control-block{display:grid;gap:12px}
.qtr-control-block h3{margin:0;color:var(--text-muted);font-size:.74rem;font-weight:900}
.qtr-segmented{display:flex;gap:4px;padding:4px;border:1px solid var(--glass-border);background:var(--surface-secondary);border-radius:var(--radius-control)}
.qtr-segmented button{flex:1;min-height:36px;border:0;background:transparent;color:var(--text-muted);font-weight:800;border-radius:calc(var(--radius-control) - 4px)}
.qtr-segmented button.active{background:var(--accent);color:#fff}
.qtr-swatch-row{display:flex;flex-wrap:wrap;gap:10px}
.qtr-accent-swatch{width:36px;height:36px;border-radius:999px;border:2px solid transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--qt-ink) 8%,transparent)}
.qtr-accent-swatch.active{border-color:var(--text-primary);box-shadow:0 0 0 4px var(--accent-soft),inset 0 0 0 1px color-mix(in srgb,var(--qt-ink) 8%,transparent)}
.qtr-background-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qtr-background-tile{min-height:78px;text-align:start;border:1px solid var(--glass-border);background:var(--surface-secondary);border-radius:var(--radius-control);padding:12px;display:grid;gap:7px;color:var(--text-primary)}
.qtr-background-tile.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.qtr-tile-preview{height:24px;border-radius:999px;border:1px solid var(--glass-border)}
.qtr-slider-row{display:grid;grid-template-columns:84px 1fr 72px;align-items:center;gap:12px;padding:13px 14px;background:var(--surface-secondary);border:1px solid var(--glass-border);border-radius:var(--radius-control)}
.qtr-slider-row input[type="range"]{width:100%;accent-color:var(--accent)}
.qtr-personalize-fab{
  background:var(--glass)!important;
  border-color:var(--glass-border)!important;
  color:var(--accent-text)!important;
  backdrop-filter:blur(var(--blur)) saturate(180%)!important;
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%)!important;
}

.qtr-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.qtr-workspace-studio-drawer{width:min(480px,100vw)}
.qtr-drawer-head{padding:26px 26px 18px}
.qtr-drawer-head h2{font-size:1.22rem;letter-spacing:0}
.qtr-drawer-head p{max-width:310px;margin-top:6px;font-size:.9rem}
.qtr-drawer-close{transition:transform var(--motion) ease,background var(--motion) ease,border-color var(--motion) ease}
.qtr-drawer-close:hover{transform:scale(1.04);background:var(--accent-soft);border-color:var(--accent-border)}
.qtr-drawer-body{padding:22px 26px 30px;gap:28px}
.qtr-control-block{gap:14px}
.qtr-control-block h3{font-size:.78rem;letter-spacing:0;text-transform:none;color:var(--text-secondary)}
.qtr-segmented{min-height:50px;padding:5px;gap:5px;border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.qtr-segmented button{min-height:40px;cursor:pointer;transition:transform var(--motion) ease,background var(--motion) ease,color var(--motion) ease,box-shadow var(--motion) ease}
.qtr-segmented button:hover{transform:translateY(-1px);background:var(--accent-soft)}
.qtr-segmented button.active{box-shadow:0 14px 30px color-mix(in srgb,var(--accent) 20%,transparent)}
.qtr-background-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.qtr-background-tile{position:relative;min-height:154px;padding:12px;gap:12px;overflow:hidden;border-radius:20px;cursor:pointer;transition:transform var(--motion) ease,box-shadow var(--motion) ease,border-color var(--motion) ease,background var(--motion) ease}
.qtr-background-tile:hover{transform:translateY(-3px);box-shadow:0 20px 48px color-mix(in srgb,var(--accent) 13%,color-mix(in srgb,var(--qt-ink) 8%,transparent))}
.qtr-background-tile.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),0 22px 52px color-mix(in srgb,var(--accent) 14%,transparent)}
.qtr-background-tile.active::after{content:"";position:absolute;inset:9px;border:1px solid color-mix(in srgb,var(--accent) 58%,transparent);border-radius:16px;pointer-events:none}
.qtr-tile-preview{position:relative;display:block;height:86px;border-radius:16px;overflow:hidden;border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.qtr-tile-preview span:first-child{position:absolute;inset:auto 12px 12px;display:block;height:22px;border-radius:999px;background:rgba(255,255,255,.56);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.qtr-tile-preview span:last-child{position:absolute;top:12px;inset-inline-start:12px;width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.48);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.qtr-tile-copy{display:grid;gap:3px}
.qtr-tile-copy b{font-size:.88rem;color:var(--text-primary)}
.qtr-tile-copy small{min-height:32px;font-size:.73rem;line-height:1.45;color:var(--text-muted)}
.qtr-accent-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;align-items:center}
.qtr-accent-option{position:relative;width:42px;height:42px;min-width:42px;padding:0;border:0;background:transparent;display:grid;place-items:center;border-radius:999px;cursor:pointer;transition:transform var(--motion) ease}
.qtr-accent-option:hover{transform:scale(1.1)}
.qtr-accent-option:active{transform:scale(.96)}
.qtr-accent-option::before{content:"";position:absolute;inset:-4px;border-radius:inherit;border:1px solid transparent;transition:border-color var(--motion) ease,box-shadow var(--motion) ease}
.qtr-accent-option.active::before{border-color:color-mix(in srgb,var(--swatch) 70%,#fff 30%);box-shadow:0 0 0 4px color-mix(in srgb,var(--swatch) 16%,transparent)}
.qtr-accent-dot{width:32px;height:32px;border-radius:50%;background:linear-gradient(145deg,color-mix(in srgb,var(--swatch) 78%,#fff 22%),var(--swatch-hover));box-shadow:inset 0 1px 1px rgba(255,255,255,.42),0 10px 22px color-mix(in srgb,var(--swatch) 24%,transparent)}
.qtr-accent-check{position:absolute;color:#fff;font-weight:900;font-size:.78rem;line-height:1;opacity:0;transform:scale(.72);transition:opacity var(--motion) ease,transform var(--motion) ease;text-shadow:0 1px 4px color-mix(in srgb,var(--qt-ink) 28%,transparent)}
.qtr-accent-option.active .qtr-accent-check{opacity:1;transform:scale(1)}
.qtr-option-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.qtr-option-card{min-height:118px;padding:12px;border:1px solid var(--glass-border);border-radius:20px;background:var(--surface-secondary);color:var(--text-primary);display:grid;gap:10px;align-content:space-between;text-align:start;cursor:pointer;transition:transform var(--motion) ease,box-shadow var(--motion) ease,border-color var(--motion) ease,background var(--motion) ease}
.qtr-option-card:hover{transform:translateY(-2px);border-color:var(--accent-border);box-shadow:0 18px 42px color-mix(in srgb,var(--accent) 12%,transparent)}
.qtr-option-card.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),0 18px 44px color-mix(in srgb,var(--accent) 12%,transparent)}
.qtr-option-card b{font-size:.78rem;color:var(--text-primary)}
.qtr-density-preview,.qtr-type-preview,.qtr-radius-preview,.qtr-motion-preview,.qtr-glass-preview{min-height:62px;border-radius:16px;background:linear-gradient(145deg,var(--surface),var(--surface-secondary));border:1px solid var(--glass-border);display:grid;place-items:center;overflow:hidden}
.qtr-density-preview{align-content:center;gap:7px;padding:12px}
.qtr-density-preview i{display:block;width:70%;border-radius:999px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 36%,#fff 64%))}
.qtr-type-preview{gap:2px;text-align:center;padding:8px}
.qtr-type-preview strong{font-size:calc(1.25rem * var(--type-preview));line-height:1;color:var(--text-primary)}
.qtr-type-preview em{font-style:normal;font-size:calc(.74rem * var(--type-preview));color:var(--text-secondary)}
.qtr-type-preview small{max-width:100%;font-size:calc(.45rem * var(--type-preview));white-space:nowrap;color:var(--text-muted)}
.qtr-radius-preview i{width:62px;height:42px;background:linear-gradient(145deg,var(--accent),var(--accent-hover));box-shadow:0 14px 30px var(--accent-soft)}
.qtr-motion-preview{position:relative;display:block}
.qtr-motion-preview i{position:absolute;top:50%;width:12px;height:12px;border-radius:999px;background:var(--accent);transform:translateY(-50%)}
.qtr-motion-preview i:nth-child(1){inset-inline-start:22%}
.qtr-motion-preview i:nth-child(2){inset-inline-start:46%;opacity:.72}
.qtr-motion-preview i:nth-child(3){inset-inline-start:70%;opacity:.44}
.qtr-motion-full i{animation:qtr-motion-preview 1.25s ease-in-out infinite}
.qtr-motion-reduced i{animation:qtr-motion-preview 2.4s ease-in-out infinite}
.qtr-motion-none i{animation:none}
@keyframes qtr-motion-preview{0%,100%{transform:translateY(-50%) scale(.86)}50%{transform:translateY(-78%) scale(1.06)}}
.qtr-glass-preview{position:relative;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,#fff 80%),rgba(255,255,255,.25))}
.qtr-glass-preview i:first-child{position:absolute;inset:10px;border-radius:14px;background:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.38)}
.qtr-glass-preview i:last-child{position:absolute;width:42px;height:26px;border-radius:999px;background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.45)}
.qtr-glass-flat i{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.qtr-glass-medium i{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.qtr-glass-deep i{backdrop-filter:blur(26px) saturate(190%);-webkit-backdrop-filter:blur(26px) saturate(190%);box-shadow:0 18px 38px color-mix(in srgb,var(--qt-ink) 14%,transparent)}

.qtr-workspace-studio-drawer::before{content:"";position:absolute;inset:0 0 auto;height:120px;background:radial-gradient(circle at 16% 0,color-mix(in srgb,var(--accent) 20%,transparent),transparent 58%);pointer-events:none}
.qtr-drawer-head,.qtr-drawer-body{position:relative;z-index:1}
.qtr-drawer-head{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 82%,transparent),transparent)}
.qtr-control-block{position:relative;padding-top:2px}
.qtr-control-block+.qtr-control-block{padding-top:26px;border-top:1px solid color-mix(in srgb,var(--glass-border) 76%,transparent)}
.qtr-control-block h3{display:flex;align-items:center;gap:10px}
.qtr-control-block h3::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,color-mix(in srgb,var(--glass-border) 80%,transparent),transparent)}
.qtr-background-tile,.qtr-option-card{isolation:isolate}
.qtr-background-tile::before,.qtr-option-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(255,255,255,.18),transparent 42%);opacity:.42;pointer-events:none;z-index:-1}
.qtr-background-tile.active::before,.qtr-option-card.active::before{opacity:.7;background:radial-gradient(circle at 16% 12%,var(--accent-soft),transparent 42%),linear-gradient(160deg,rgba(255,255,255,.22),transparent 46%)}
.qtr-background-tile.active .qtr-tile-copy::after,.qtr-option-card.active::after{content:"✓";position:absolute;top:14px;inset-inline-end:14px;width:22px;height:22px;border-radius:999px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:.72rem;font-weight:900;box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 28%,transparent)}
.qtr-tile-preview::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 34%,color-mix(in srgb,var(--qt-ink) 10%,transparent));pointer-events:none}
.qtr-option-card:focus-visible,.qtr-background-tile:focus-visible,.qtr-accent-option:focus-visible,.qtr-segmented button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.qtr-option-card b{align-self:end}
.qtr-accent-grid{padding:3px}
.qtr-accent-option.active{animation:qtr-swatch-pop .26s cubic-bezier(.2,1.3,.3,1)}
@keyframes qtr-swatch-pop{0%{transform:scale(.92)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
.qtr-type-preview strong{letter-spacing:0}
.qtr-type-preview small{letter-spacing:.04em}
.qtr-glass-preview::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 22% 20%,rgba(255,255,255,.72),transparent 28%);opacity:.58}

@media(max-width:900px){
  .qtr-workspace-studio-drawer{width:100%;max-width:100vw}
  .qtr-background-grid{grid-template-columns:1fr}
  .qtr-accent-grid{grid-template-columns:repeat(4,42px);justify-content:start}
  .qtr-option-grid{grid-template-columns:1fr}
  .qtr-slider-row{grid-template-columns:1fr}
}

.qtr-workspace-builder{display:grid;gap:14px}
.qtr-widget-list{display:grid;gap:10px}
.qtr-widget-list>strong{font-size:.82rem;color:var(--text-secondary)}
.qtr-widget-row{display:grid;grid-template-columns:minmax(0,1fr) 110px auto;align-items:center;gap:10px;padding:10px;border:1px solid var(--glass-border);border-radius:var(--radius-control);background:var(--surface-secondary)}
.qtr-widget-toggle{display:flex;align-items:center;gap:10px;min-width:0;border:0;background:transparent;padding:0;color:var(--text-primary);font:inherit;font-weight:800;text-align:start;cursor:pointer}
.qtr-widget-toggle[aria-pressed="false"]{color:var(--text-secondary);opacity:.72}
.qtr-widget-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.qtr-widget-toggle svg{width:18px;height:18px;color:var(--accent-text);flex:none}
.qtr-widget-toggle span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qtr-widget-row select{height:36px;border:1px solid var(--glass-border);border-radius:calc(var(--radius-control) - 3px);background:var(--surface);color:var(--text-primary);padding-inline:8px}
.qtr-widget-order{display:flex;gap:5px}
.qtr-widget-order button{width:34px;height:34px;border:1px solid var(--glass-border);border-radius:calc(var(--radius-control) - 4px);background:var(--surface);color:var(--accent-text);display:grid;place-items:center}
.qtr-widget-order svg{width:15px;height:15px}
.qtr-workspace-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.qtr-workspace-tools button{min-height:40px;border:1px solid var(--glass-border);border-radius:var(--radius-control);background:var(--surface-secondary);color:var(--text-primary);display:flex;align-items:center;justify-content:center;gap:7px;font-weight:800}
.qtr-workspace-tools button.danger{color:var(--qtr-danger-text)}
.qtr-workspace-tools svg{width:16px;height:16px}
.qtr-workspace-reset-theme{min-height:40px;border:1px solid var(--glass-border);border-radius:var(--radius-control);background:var(--surface-secondary);color:var(--accent-text);padding:0 12px;font-weight:800;cursor:pointer}
@media(max-width:560px){.qtr-widget-row{grid-template-columns:1fr}.qtr-workspace-tools{grid-template-columns:1fr}}