:root{
  --qtr-white:#FFFFFF;
  --qtr-black:#000000;
  --qtr-page-light:#F4F8FF;
  --qtr-page-soft:#EEF5FB;
  --qtr-ink:#10233F;
  --qtr-ink-strong:#061D35;
  --qtr-muted:#60758F;
  --qtr-line:rgba(155,174,198,.36);
  --qtr-overlay:rgba(9,20,35,.34);
  --qtr-danger:#B42318;
  --qtr-danger-soft:#FEE4E2;
  --qtr-success:#166534;
  --qtr-success-soft:#DCFCE7;
  --qtr-warning:#92400E;
  --qtr-warning-soft:#FEF3C7;
  --qtr-info:#1D4ED8;
  --qtr-info-soft:#DBEAFE;
  --qtr-on-accent:#FFFFFF;
  --qtr-shadow-color:rgba(20,42,70,.14);
  --qtr-shadow:0 18px 60px var(--qtr-shadow-color);
  --qtr-control-height:44px;
  --qtr-header-height:72px;
  --qtr-dock-collapsed:68px;
  --qtr-dock-expanded:220px;
  --qtr-space-1:4px;
  --qtr-space-2:8px;
  --qtr-space-3:12px;
  --qtr-space-4:16px;
  --qtr-space-5:18px;
  --qtr-space-6:22px;
  --qtr-space-7:28px;
  --qtr-font:Tajawal,Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --accent:#1677D2;
  --accent-hover:#0B5CAD;
  --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%,#061D35 28%);
  --background:linear-gradient(135deg,#F9FBFF,#FFFFFF);
  --surface:rgba(255,255,255,.88);
  --surface-secondary:rgba(255,255,255,.72);
  --glass:rgba(255,255,255,.88);
  --glass-border:rgba(203,216,232,.72);
  --glass-shadow:0 18px 46px rgba(8,45,85,.10);
  --blur:24px;
  --radius:22px;
  --radius-control:14px;
  --density:22px;
  --motion:.24s;
  --animation-speed:.16s;
  --text-primary:#061D35;
  --text-secondary:#40566F;
  --text-muted:#66788D;
  --focus-ring:0 0 0 4px var(--accent-soft);
}

html[data-appearance="dark"]{
  --text-primary:#F6FAFF;
  --text-secondary:rgba(246,250,255,.76);
  --text-muted:rgba(246,250,255,.62);
  --glass-border:rgba(214,229,247,.16);
}

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:#FFFFFF;
  --text-secondary:#F6FAFF;
  --text-muted:#E7EEF8;
}

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 rgba(8,45,85,.22);
  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:rgba(5,20,38,.28);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 rgba(0,0,0,.08)}
.qtr-accent-swatch.active{border-color:var(--text-primary);box-shadow:0 0 0 4px var(--accent-soft),inset 0 0 0 1px rgba(0,0,0,.08)}
.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%,rgba(8,45,85,.08))}
.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 rgba(0,0,0,.28)}
.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 rgba(8,45,85,.14)}

.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%,rgba(0,0,0,.10));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)}
.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}}