/* =====================================================================
   كَيْم | QAYM — طبقة الهوية الهادئة (آخر ملف أنماط يُحمَّل)
   الألوان مأخوذة من نظام التخليص الكمركي لشركة الفرات: أخضر الختم، ذهبي الحافة، ورقي فاتح.
   هذا الملف هو مصدر الألوان الوحيد؛ يعيد تعريف الرموز القديمة حتى تلتزم كل الشاشات.
   ===================================================================== */

/* ---------- الرموز: نهاري (الافتراضي) ---------- */
html:root {
  /* عاجي دافئ بدل الأبيض الصارخ، ونص فحمي ناعم بدل الأسود */
  --q-paper: #F3F0E8;
  --q-card: #FBF9F4;
  --q-card-2: #F6F2E9;
  --q-ink: #173A28;
  --q-ink-2: #34584A;
  --q-text: #25302A;
  --q-muted: #6B736C;
  --q-line: #E2DCCD;
  --q-soft: #EEE9DD;
  --q-seal: #1F6B43;
  --q-seal-2: #2F8F5B;
  --q-seal-soft: #E7F2EB;
  --q-hero: #14532D;
  --q-gold: #C9A24A;
  --q-gold-soft: #F7EEDA;
  --q-ok: #2F6B4F;
  --q-ok-soft: #E6F2EC;
  --q-warn: #9A6B12;
  --q-warn-soft: #FBF2DF;
  --q-bad: #B23B3B;
  --q-bad-soft: #FBECEC;
  --q-info: #2A5A7A;
  --q-header: rgba(243, 240, 232, .94);
  --q-shadow: 0 1px 1px rgba(60, 45, 20, .04), 0 6px 20px -8px rgba(60, 45, 20, .10);
  --q-shadow-lift: 0 14px 34px -12px rgba(40, 35, 20, .20);
  --q-r: 14px;
  --q-r-sm: 7px;
  --q-ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
  --font-base: "Plex", Tahoma, "Segoe UI", Arial, sans-serif !important;
  --font-sans: var(--font-base) !important; --font-main: var(--font-base) !important; --font-family: var(--font-base) !important;
  --font-mono: var(--font-base) !important; --font-digits: var(--font-base) !important;

  /* ربط الرموز القديمة (style.css / experience.css / app.css) بالهوية الجديدة */
  --qaym-deep-emerald: var(--q-hero) !important;
  --qaym-soft-mint: var(--q-seal-2) !important;
  --qaym-mint-glow: rgba(31, 107, 67, .14) !important;
  --qaym-amber-gold: var(--q-gold) !important;
  --qaym-amber-gradient: var(--q-gold) !important;
  --qaym-bg-canvas: var(--q-paper) !important;
  --qaym-bg: var(--q-paper) !important;
  --qaym-bg-ice: var(--q-paper) !important;
  --qaym-glass-card: var(--q-card) !important;
  --qaym-glass-border: var(--q-line) !important;
  --qaym-glass-blur: none !important;
  --qaym-surface: var(--q-card) !important;
  --qaym-surface-hover: var(--q-card-2) !important;
  --qaym-subtle: var(--q-soft) !important;
  --qaym-border: var(--q-line) !important;
  --qaym-border-subtle: var(--q-soft) !important;
  --qaym-border-focus: var(--q-seal) !important;
  --qaym-primary-dark: var(--q-hero) !important;
  --qaym-blue-tech: var(--q-seal) !important;
  --qaym-cyan-accent: var(--q-seal-2) !important;
  --qaym-emerald-success: var(--q-ok) !important;
  --text-primary: var(--q-text) !important;
  --text-title: var(--q-ink) !important;
  --text-main: var(--q-text) !important;
  --text-body: var(--q-text) !important;
  --text-secondary: var(--q-ink-2) !important;
  --text-muted: var(--q-muted) !important;
  --bg-app: var(--q-paper) !important;
  --bg-surface: var(--q-card) !important;
  --bg-subtle: var(--q-soft) !important;
  --border-light: var(--q-line) !important;
  --border-strong: #CFC6B2 !important;
  --brand-primary: var(--q-seal) !important;
  --brand-primary-light: var(--q-seal-soft) !important;
  --brand-primary-hover: var(--q-hero) !important;
  --status-paid: var(--q-ok) !important;
  --status-pending: var(--q-warn) !important;
  --status-void: var(--q-bad) !important;
  --accent-primary: var(--q-seal) !important;
  --accent-primary-light: var(--q-seal-soft) !important;
  --accent-success: var(--q-ok) !important;
  --accent-danger: var(--q-bad) !important;
  --accent-warning: var(--q-gold) !important;
  --color-bg: var(--q-paper) !important;
  --color-surface: var(--q-card) !important;
  --color-text: var(--q-text) !important;
  --color-muted: var(--q-muted) !important;
  --color-border: var(--q-line) !important;
  --color-primary: var(--q-seal) !important;
  --color-primary-hover: var(--q-hero) !important;
  --color-primary-soft: var(--q-seal-soft) !important;
  --color-on-primary: #FFFFFF !important;
  --color-secondary: var(--q-gold) !important;
  --color-on-secondary: #1E1A10 !important;
  --color-accent: var(--q-gold) !important;
  --ok: var(--q-ok) !important;
  --warn: var(--q-warn) !important;
  --bad: var(--q-bad) !important;
  --info: var(--q-info) !important;
  --radius: var(--q-r) !important;
  --radius-sm: var(--q-r-sm) !important;
  --radius-md: var(--q-r) !important;
  --radius-lg: 12px !important;
  --radius-panel: 12px !important;
  --radius-card: var(--q-r) !important;
  --radius-button: 8px !important;
  --radius-input: 8px !important;
  --shadow-fluid: var(--q-shadow) !important;
  --shadow-active: var(--q-shadow-lift) !important;
  --shadow-subtle: 0 1px 2px rgba(20, 40, 30, .05) !important;
  --shadow-card: var(--q-shadow) !important;
  --shadow-hover: var(--q-shadow) !important;
  --shadow-ambient: var(--q-shadow) !important;
  --shadow-floating: var(--q-shadow-lift) !important;
  --shadow-sm: 0 1px 2px rgba(20, 40, 30, .05) !important;
  --shadow-md: var(--q-shadow-lift) !important;
  --arc-ease: var(--q-ease) !important;
  --copilot-bg: var(--q-card) !important;
  --auth-accent: var(--q-seal) !important;
  --auth-glow: rgba(31, 107, 67, .16) !important;
}

/* ---------- الرموز: ليلي (اختياري من الإعدادات) ---------- */
html.qaym-dark:root {
  --q-paper: #1E2823;
  --q-card: #26322C;
  --q-card-2: #2C3933;
  --q-ink: #F0F6F2;
  --q-ink-2: #D2E2D8;
  --q-text: #ECF3EE;
  --q-muted: #A9BBB0;
  --q-line: #3A4A42;
  --q-soft: #2F3D36;
  --q-seal: #86D4A8;
  --q-seal-2: #A3E0BE;
  --q-seal-soft: #2E4238;
  --q-hero: #2F5A44;
  --q-gold: #E8C66E;
  --q-gold-soft: #3A3326;
  --q-ok: #7DD3A5;
  --q-ok-soft: #2C4237;
  --q-warn: #E8C66E;
  --q-warn-soft: #3A3326;
  --q-bad: #F29A9A;
  --q-bad-soft: #4A3333;
  --q-info: #9CC6E4;
  --q-header: rgba(30, 40, 35, .94);
  --q-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 4px 14px rgba(0, 0, 0, .22);
  --q-shadow-lift: 0 8px 24px rgba(0, 0, 0, .3);
  --color-on-primary: #10241A !important;
  --border-strong: #4A5C52 !important;
  color-scheme: dark !important;
}

/* ---------- الأساس ---------- */
html, body { background: var(--q-paper) !important; color: var(--q-text); }
body { font-size: calc(15px * var(--app-font-scale-num, 1)); line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { color: var(--q-ink); font-weight: 700; letter-spacing: 0; line-height: 1.35; text-wrap: balance; }
/* سلّم خطوط ثابت: عناوين متدرجة، نص مريح، لا أحجام عشوائية */
.content h1, .page-head h1, .head h1 { font-size: 1.62rem; font-weight: 700; margin: 0 0 4px; }
.content h2, .card h2 { font-size: 1.12rem; font-weight: 650; margin: 0 0 10px; }
.content h3, .card h3 { font-size: .98rem; font-weight: 650; }
.content p, .card p { max-width: 72ch; text-wrap: pretty; }
.muted, .small.muted, .page-head .sub, .head .sub { color: var(--q-muted) !important; }
.small { font-size: .86rem; }
.stat .lbl, .kpi-label { font-size: .8rem !important; font-weight: 500; }
.stat .num { font-size: 1.75rem; line-height: 1.2; }
a { color: var(--q-ink-2); }
::selection { background: var(--q-seal-soft); color: var(--q-ink); }
:focus-visible { outline: 2px solid var(--q-seal) !important; outline-offset: 2px; }

/* ---------- الهدوء: لا ظلال متوهجة، لا زجاج، لا ميلان، لا انقلاب ---------- */
body::before, body::after,
.living-canvas::before, .living-canvas::after,
.qaym-gateway::before, .ambient-glow-wrapper, .art-orbit, .console-art::before,
.hint-pulse-sparkle, .copilot-hint-bubble, .lamp-spotlight { display: none !important; content: none !important; }
* { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none !important; }
*, *::before, *::after { perspective: none !important; }
[class*="flip"]:not(.qaym-allow-flip), [class*="tilt"] { transform: none !important; }

/* ---------- الحركة: حيّة لكن هادئة (تحترم «تقليل الحركة» بالنظام) ---------- */
:root { --q-dur: .22s; --q-spring: cubic-bezier(.2, .9, .3, 1.15); }
@keyframes q-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes q-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes q-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes q-slide-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes q-sheen { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes q-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* دخول الصفحة: العناصر تطلع بالتتابع */
.content > *, .arc-center > * { animation: q-rise .42s var(--q-ease) both !important; }
.content > :nth-child(2) { animation-delay: .05s !important; } .content > :nth-child(3) { animation-delay: .1s !important; }
.content > :nth-child(4) { animation-delay: .15s !important; } .content > :nth-child(5) { animation-delay: .2s !important; }
.grid > .card, .grid > .stat, .grid > .kpi-card { animation: q-rise .4s var(--q-ease) both !important; }
.grid > :nth-child(2) { animation-delay: .06s !important; } .grid > :nth-child(3) { animation-delay: .12s !important; } .grid > :nth-child(4) { animation-delay: .18s !important; }
tbody tr { animation: q-fade .3s ease-out both !important; }
dialog[open] { animation: q-pop .24s var(--q-ease) both !important; }
#toasts > * { animation: q-slide-in .28s var(--q-ease) both !important; }
main > .gateway-card { animation: q-pop .45s var(--q-ease) both !important; }

/* تفاعل اللمس والمرور */
.card, .qaym-card, .kpi-card, .stat, .pos-product-tile, .menu-item-card, .plan-card, .btn, .dock-key, .arc-module-link, .badge {
  transition: transform var(--q-dur) var(--q-ease), box-shadow var(--q-dur) var(--q-ease), background-color .16s, border-color .16s, color .16s !important;
}
a.card:hover, .stat:hover, .kpi-card:hover, .pos-product-tile:hover, .menu-item-card:hover, .arc-module-link:hover { transform: translateY(-3px) !important; box-shadow: var(--q-shadow-lift) !important; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled), .pos-product-tile:active, .menu-item-card:active { transform: scale(.97) !important; transition-duration: .06s !important; }
.btn.primary { position: relative; overflow: hidden; }
.btn.primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); background-size: 250% 100%; background-position: 200% 0; pointer-events: none; }
.btn.primary:hover::after { animation: q-sheen .9s ease-out; }
.stat::before { transform-origin: right; animation: q-bar .6s .2s var(--q-ease) both; }
.badge { display: inline-flex; align-items: center; }
tbody tr { transition: background-color .14s !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* ---------- الأسطح ---------- */
.card, .qaym-card, .qaym-managed-panel, .qaym-table-container, .filter-toolbar, .kpi-card, .stat,
dialog, .auth-card, .pos-product-tile, .user-profile-pill, .workspace-tools-menu, .workspace-panel-list, .arc-palette {
  background: var(--q-card) !important;
  border: 1px solid var(--q-line) !important;
  border-radius: var(--q-r) !important;
  box-shadow: var(--q-shadow) !important;
  color: var(--q-text);
}
.card:hover, .qaym-card:hover, .kpi-card:hover, .stat:hover, .pos-product-tile:hover { border-color: #D3C8AE !important; }
html.qaym-dark .card:hover, html.qaym-dark .pos-product-tile:hover { border-color: #4A5C52 !important; }
dialog::backdrop { background: rgba(18, 40, 28, .38) !important; backdrop-filter: none !important; }

/* بطاقات المؤشرات: رقم واضح، شريط ذهبي رفيع كما في الفرات */
.stat .num, .kpi-val, .metric-val { color: var(--q-ink) !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; }
.stat .lbl, .kpi-label, .metric-label { color: var(--q-muted) !important; }
.stat::before { background: var(--q-gold) !important; opacity: 1 !important; height: 3px !important; }

/* ---------- الجداول ---------- */
table th, .qaym-table th {
  background: var(--q-card-2) !important; color: var(--q-ink-2) !important;
  font-weight: 600 !important; font-size: .86em; border-bottom: 1px solid var(--q-line) !important;
}
table td, .qaym-table td { border-color: var(--q-soft) !important; }
table tbody tr:hover td, .qaym-table tbody tr:hover td { background: var(--q-seal-soft) !important; }

/* ---------- الأزرار ---------- */
.btn, button.btn, .btn-qaym-secondary, .btn-topbar-icon {
  border-radius: 8px !important; box-shadow: none !important; font-weight: 600;
  background: var(--q-card) !important; border: 1px solid var(--q-line) !important; color: var(--q-ink-2) !important;
}
.btn:hover, .btn-topbar-icon:hover { background: var(--q-soft) !important; }
.btn.primary, .btn-primary, .btn-qaym-primary, button[type=submit].btn, .gateway-primary {
  background: var(--q-seal) !important; border-color: var(--q-seal) !important; color: #FFFFFF !important;
}
html.qaym-dark .btn.primary, html.qaym-dark .gateway-primary, html.qaym-dark .btn-qaym-primary { color: #10241A !important; }
.btn.primary:hover, .btn-qaym-primary:hover, .gateway-primary:hover { background: var(--q-hero) !important; border-color: var(--q-hero) !important; }
.btn.danger, .btn-danger { color: var(--q-bad) !important; border-color: color-mix(in srgb, var(--q-bad) 35%, var(--q-line)) !important; }
.btn.danger:hover { background: var(--q-bad-soft) !important; }
.btn:disabled, button:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- الحقول ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea {
  background: var(--q-card) !important; border: 1px solid var(--q-line) !important; border-radius: 8px !important;
  color: var(--q-text) !important; box-shadow: none !important;
}
input:focus, select:focus, textarea:focus { border-color: var(--q-seal) !important; box-shadow: 0 0 0 3px rgba(31, 107, 67, .14) !important; outline: none !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--q-seal); }

/* ---------- الشارات والتنبيهات ---------- */
.badge.ok, .badge-status.delivered { background: var(--q-ok-soft) !important; color: var(--q-ok) !important; border-color: transparent !important; }
.badge.warn, .badge-status.pending { background: var(--q-warn-soft) !important; color: var(--q-warn) !important; border-color: transparent !important; }
.badge.bad { background: var(--q-bad-soft) !important; color: var(--q-bad) !important; border-color: transparent !important; }
.badge.info, .badge-status.new { background: var(--q-seal-soft) !important; color: var(--q-seal) !important; border-color: transparent !important; }
.alert { border-radius: var(--q-r) !important; box-shadow: none !important; }
.alert.warn { background: var(--q-warn-soft) !important; color: var(--q-warn) !important; border: 1px solid color-mix(in srgb, var(--q-warn) 25%, transparent) !important; }
.alert.bad { background: var(--q-bad-soft) !important; color: var(--q-bad) !important; }
.alert.ok { background: var(--q-ok-soft) !important; color: var(--q-ok) !important; }
.alert.info, .alert:not(.warn):not(.bad):not(.ok) { background: var(--q-gold-soft) !important; color: var(--q-ink) !important; border: 1px solid color-mix(in srgb, var(--q-gold) 30%, transparent) !important; }

/* ---------- الرأس والتنقل ---------- */
.topbar, .qaym-header, .arc-topbar, header.app-header { background: var(--q-header) !important; border-bottom: 1px solid var(--q-line) !important; box-shadow: none !important; }
.nav a.active, .arc-dock .active, .dock-item.active, .dock-item[aria-current="page"] {
  background: var(--q-seal-soft) !important; color: var(--q-seal) !important; box-shadow: inset 0 -2px 0 var(--q-seal) !important;
}
.arc-dock, .dock, .qaym-dock {
  background: var(--q-card) !important; border: 1px solid var(--q-line) !important; box-shadow: var(--q-shadow-lift) !important; border-radius: 12px !important;
}
.copilot-orb { background: var(--q-seal) !important; color: #fff !important; box-shadow: var(--q-shadow-lift) !important; }

/* شريط التنقل السفلي (Arc Dock): أبيض بحد رفيع بدل الأخضر الداكن */
html .arc-dock-container, html .living-canvas .arc-dock-container, html .arc-console .arc-dock-container {
  background: var(--q-card) !important; border: 1px solid var(--q-line) !important; border-radius: 12px !important; box-shadow: var(--q-shadow-lift) !important;
}
html .dock-key, html .living-canvas .dock-key { border-radius: 8px !important; color: var(--q-muted) !important; background: transparent !important; min-height: 58px !important; }
html .dock-key:hover { transform: translateY(-2px) !important; background: var(--q-soft) !important; color: var(--q-ink) !important; }
html .dock-key.active, html .arc-console .dock-key.active, html .living-canvas .dock-key.active {
  transform: none !important; background: var(--q-seal-soft) !important; color: var(--q-seal) !important; box-shadow: inset 0 -2px 0 var(--q-seal) !important;
}
html .dock-key.active::after { display: none !important; }
html .dock-more { border-inline-start: 1px solid var(--q-line) !important; }

/* العربية لا تتحمل تباعد الحروف */
html[lang="ar"] body *:not(bdi):not(code):not(kbd) { letter-spacing: 0 !important; }

/* ---------- التنبيهات المنبثقة ---------- */
#toasts > * { border-radius: var(--q-r) !important; box-shadow: var(--q-shadow-lift) !important; }

/* ---------- التحميل ---------- */
.boot { color: var(--q-muted); }
.fx-skel { border-radius: var(--q-r-sm); min-height: 18px; background: var(--q-soft); }

/* ---------- الطباعة: أسود على أبيض دائماً ---------- */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  .card, dialog { box-shadow: none !important; border-color: #ccc !important; }
}

/* ---------- نافذة الترحيب بأول دخول (welcome.js) ---------- */
.qw-root { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px; }
.qw-backdrop { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(14, 38, 26, .55), rgba(8, 20, 14, .78)); opacity: 0; transition: opacity .45s var(--q-ease); }
.qw-card {
  position: relative; width: min(620px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  background: linear-gradient(180deg, #0F2219 0%, #0B1A13 100%); color: #E9E3D3;
  border: 1px solid rgba(201, 162, 74, .28); border-radius: 22px; padding: 34px 34px 26px;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .04);
  opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .5s var(--q-ease), transform .6s cubic-bezier(.2, .9, .25, 1);
}
.qw-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px 220px at 85% -10%, rgba(201, 162, 74, .16), transparent 70%), radial-gradient(360px 240px at 0% 110%, rgba(47, 143, 91, .14), transparent 70%); }
.qw-root.is-on .qw-backdrop { opacity: 1; }
.qw-root.is-on .qw-card { opacity: 1; transform: none; }
.qw-root.is-leaving .qw-backdrop { opacity: 0; }
.qw-root.is-leaving .qw-card { opacity: 0; transform: translateY(10px) scale(.98); }
.qw-x { position: absolute; top: 14px; inset-inline-start: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(233, 227, 211, .14); background: transparent; color: #CFC8B6; font-size: 20px; line-height: 1; cursor: pointer; transition: background .2s, transform .2s; }
.qw-x:hover { background: rgba(233, 227, 211, .08); transform: rotate(90deg); }
.qw-head { position: relative; text-align: center; }
.qw-seal-box { width: 84px; height: 84px; margin: 0 auto 16px; }
.qw-seal { width: 100%; height: 100%; overflow: visible; }
.qw-seal .qw-ring { fill: none; stroke: #C9A24A; stroke-width: 1.4; stroke-dasharray: 340; stroke-dashoffset: 340; opacity: .9; }
.qw-seal .qw-ring-2 { stroke: rgba(201, 162, 74, .4); stroke-dasharray: 3 5; stroke-dashoffset: 0; opacity: 0; transform-origin: 60px 60px; }
.qw-seal .qw-mark { fill: none; stroke: #6FCB97; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; opacity: .35; }
.qw-seal .qw-check { fill: none; stroke: #E8C66E; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.qw-root.is-on .qw-ring { animation: qw-draw 1.1s .15s var(--q-ease) forwards; }
.qw-root.is-on .qw-ring-2 { animation: qw-fadein .6s .9s forwards, qw-spin 24s 1s linear infinite; }
.qw-root.is-on .qw-mark { animation: qw-draw .9s .45s var(--q-ease) forwards; }
.qw-root.is-on .qw-check { animation: qw-draw .45s 1.15s var(--q-ease) forwards; }
@keyframes qw-draw { to { stroke-dashoffset: 0; } }
@keyframes qw-fadein { to { opacity: 1; } }
@keyframes qw-spin { to { transform: rotate(360deg); } }
.qw-eyebrow { margin: 0 0 10px; color: #C9A24A; font-size: .8rem; font-weight: 600; }
.qw-title { margin: 0; color: #F3EEE1 !important; font-size: clamp(1.45rem, 3.6vw, 1.95rem); line-height: 1.4; font-weight: 700; }
.qw-title span { color: #CFC8B6; font-weight: 500; font-size: .82em; }
.qw-title em { font-style: normal; color: #E8C66E; font-weight: 700; }
.qw-lead { margin: 12px auto 0; max-width: 46ch; color: #A9B3AA; font-size: .94rem; line-height: 1.8; }
.qw-head > * { opacity: 0; transform: translateY(8px); }
.qw-root.is-on .qw-head > * { animation: q-rise .55s var(--q-ease) forwards; }
.qw-root.is-on .qw-head > :nth-child(2) { animation-delay: .35s; } .qw-root.is-on .qw-head > :nth-child(3) { animation-delay: .45s; } .qw-root.is-on .qw-head > :nth-child(4) { animation-delay: .55s; }
.qw-root.is-on .qw-head > .qw-seal-box { animation-delay: 0s; }
.qw-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.qw-step { opacity: 0; transform: translateY(10px); }
.qw-root.is-on .qw-step { animation: q-rise .5s calc(.7s + var(--i) * .1s) var(--q-ease) forwards; }
.qw-step button {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; text-align: start;
  padding: 14px 16px; border-radius: 14px; cursor: pointer; font: inherit; color: inherit;
  background: rgba(233, 227, 211, .035); border: 1px solid rgba(233, 227, 211, .09);
  transition: background .25s, border-color .25s, transform .25s var(--q-ease);
}
.qw-step button:hover, .qw-step button:focus-visible { background: rgba(201, 162, 74, .08); border-color: rgba(201, 162, 74, .38); transform: translateX(-3px); }
.qw-num { font-weight: 700; font-size: .82rem; color: #C9A24A; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(201, 162, 74, .35); font-variant-numeric: tabular-nums; }
.qw-step-body { display: grid; gap: 2px; }
.qw-step-body b { color: #F1ECDF; font-weight: 600; font-size: .98rem; }
.qw-step-body small { color: #98A398; font-size: .84rem; line-height: 1.6; }
.qw-arrow { color: #C9A24A; opacity: .5; transition: opacity .2s, transform .25s; }
.qw-step button:hover .qw-arrow { opacity: 1; transform: translateX(-4px); }
.qw-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(233, 227, 211, .08); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; opacity: 0; }
.qw-root.is-on .qw-foot { animation: q-fade .5s 1.05s forwards; }
.qw-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.qw-chip { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; color: #CFC8B6; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(233, 227, 211, .12); }
.qw-chip i { width: 6px; height: 6px; border-radius: 50%; background: #6FCB97; box-shadow: 0 0 0 4px rgba(111, 203, 151, .15); }
.qw-chip-quiet { color: #8E998F; }
.qw-actions { display: flex; gap: 8px; margin-inline-start: auto; }
.qw-btn { font: inherit; font-weight: 600; font-size: .92rem; border-radius: 999px; padding: 11px 20px; cursor: pointer; transition: transform .2s var(--q-ease), box-shadow .25s, background .2s; }
.qw-btn-ghost { background: transparent; color: #CFC8B6; border: 1px solid rgba(233, 227, 211, .16); }
.qw-btn-ghost:hover { background: rgba(233, 227, 211, .06); }
.qw-btn-primary { border: 0; color: #1E1808; background: linear-gradient(135deg, #F0D78C, #C9A24A 55%, #A9832F); box-shadow: 0 10px 26px -10px rgba(201, 162, 74, .7); }
.qw-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(201, 162, 74, .85); }
@media (max-width: 560px) {
  .qw-card { padding: 28px 20px 20px; border-radius: 18px; }
  .qw-actions { width: 100%; } .qw-actions .qw-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .qw-head > *, .qw-step, .qw-foot { opacity: 1 !important; transform: none !important; }
  .qw-seal .qw-ring, .qw-seal .qw-mark, .qw-seal .qw-check { stroke-dashoffset: 0 !important; }
  .qw-seal .qw-ring-2 { opacity: 1 !important; }
}