/* QuickGen component styles. Class prefix .qg-*. All values via tokens. Shipped through styles.css. */
/* Buttons */
.qg-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--button-height-md);min-width:var(--button-height-md);padding:0 22px;border-radius:var(--button-radius);border:1px solid transparent;font:600 var(--text-body-sm)/1 var(--font-ui);letter-spacing:.005em;white-space:nowrap;cursor:pointer;text-decoration:none;user-select:none;transition:background var(--motion-hover),color var(--motion-hover),border-color var(--motion-hover),box-shadow var(--motion-hover),transform var(--motion-hover)}
.qg-btn[data-size="sm"]{height:var(--button-height-sm);min-width:var(--button-height-sm);padding:0 16px;font-size:var(--text-label);gap:8px}
.qg-btn[data-size="lg"]{height:var(--button-height-lg);min-width:var(--button-height-lg);padding:0 28px;font-size:var(--text-body)}
.qg-btn[data-full="true"]{width:100%}
.qg-btn:active:not(:disabled){transform:scale(var(--press-scale))}
.qg-btn:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.qg-btn:disabled,.qg-btn[aria-disabled="true"]{cursor:not-allowed;opacity:.42}
.qg-btn[data-variant="primary"]{background:var(--button-primary-bg);color:var(--button-primary-fg)}
.qg-btn[data-variant="primary"]:hover:not(:disabled){background:var(--button-primary-bg-hover)}
.qg-btn[data-variant="accent"]{background:var(--button-accent-bg);color:var(--button-accent-fg)}
.qg-btn[data-variant="accent"]:hover:not(:disabled){background:var(--button-accent-bg-hover);box-shadow:var(--shadow-glow-violet)}
.qg-btn[data-variant="secondary"]{background:var(--button-secondary-bg);color:var(--button-secondary-fg);border-color:var(--button-secondary-border)}
.qg-btn[data-variant="secondary"]:hover:not(:disabled){border-color:var(--color-border-interactive);background:var(--color-surface-2)}
.qg-btn[data-variant="ghost"]{background:transparent;color:var(--button-ghost-fg)}
.qg-btn[data-variant="ghost"]:hover:not(:disabled){background:var(--button-ghost-bg-hover)}
.qg-btn[data-variant="signal"]{color:#fff;background:linear-gradient(var(--qg-violet-500),var(--qg-violet-500)) padding-box,var(--gradient-signal) border-box;border:1.5px solid transparent;overflow:hidden;isolation:isolate}
.qg-btn[data-variant="signal"]::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gradient-signal);opacity:0;transition:opacity var(--motion-ui)}
.qg-btn[data-variant="signal"]:hover:not(:disabled)::before{opacity:1}
.qg-btn[data-variant="signal"]:hover:not(:disabled){color:var(--qg-ink-950);box-shadow:var(--shadow-glow-cyan)}
.qg-btn[data-variant="danger"]{background:var(--color-danger);color:#fff}
.qg-btn[data-loading="true"]{color:transparent!important;pointer-events:none}
.qg-btn__spin{position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:qg-spin .8s linear infinite}
.qg-btn[data-variant="primary"] .qg-btn__spin{color:var(--button-primary-fg)}.qg-btn[data-variant="accent"] .qg-btn__spin,.qg-btn[data-variant="signal"] .qg-btn__spin{color:#fff}.qg-btn[data-variant="secondary"] .qg-btn__spin,.qg-btn[data-variant="ghost"] .qg-btn__spin{color:var(--color-text)}
.qg-iconbtn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--qg-radius-pill);border:1px solid transparent;background:transparent;color:var(--color-text);cursor:pointer;transition:background var(--motion-hover),border-color var(--motion-hover),transform var(--motion-hover),color var(--motion-hover)}
.qg-iconbtn[data-size="sm"]{width:36px;height:36px}.qg-iconbtn[data-size="lg"]{width:54px;height:54px}
.qg-iconbtn:hover:not(:disabled){background:var(--button-ghost-bg-hover)}
.qg-iconbtn[data-variant="secondary"]{background:var(--color-surface);border-color:var(--color-border-strong)}
.qg-iconbtn[data-variant="secondary"]:hover:not(:disabled){border-color:var(--color-border-interactive)}
.qg-iconbtn[data-variant="solid"]{background:var(--button-primary-bg);color:var(--button-primary-fg)}
.qg-iconbtn[data-variant="solid"]:hover:not(:disabled){background:var(--button-primary-bg-hover)}
.qg-iconbtn[data-variant="accent"]{background:var(--color-accent);color:#fff}
.qg-iconbtn[data-variant="accent"]:hover:not(:disabled){background:var(--color-accent-hover);box-shadow:var(--shadow-glow-violet)}
.qg-iconbtn[data-variant="glass"]{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(12px)}
.qg-iconbtn[data-variant="glass"]:hover:not(:disabled){background:rgba(255,255,255,.24)}
.qg-iconbtn:active:not(:disabled){transform:scale(.94)}
.qg-iconbtn:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.qg-iconbtn:disabled{opacity:.4;cursor:not-allowed}
.qg-link{display:inline-flex;align-items:center;gap:6px;color:var(--color-text-accent);font-weight:600;text-decoration:none;border-radius:4px;transition:color var(--motion-hover)}
.qg-link[data-variant="inline"]{display:inline;font-weight:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.qg-link[data-variant="quiet"]{color:var(--color-text-2);font-weight:500}
.qg-link:hover{color:var(--color-accent-hover)}.qg-link[data-variant="quiet"]:hover{color:var(--color-text)}
.qg-link svg{transition:transform var(--motion-hover)}.qg-link:hover svg{transform:translateX(3px)}
/* Badges */
.qg-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--badge-radius);font:600 11px/1 var(--font-ui);letter-spacing:.04em;white-space:nowrap;background:var(--color-surface-2);color:var(--color-text-2);border:1px solid var(--color-border)}
.qg-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.qg-badge[data-tone="queued"]{background:var(--color-surface-2);color:var(--color-text-2)}
.qg-badge[data-tone="generating"]{background:var(--color-accent-soft);color:var(--color-text-accent);border-color:transparent}
.qg-badge[data-tone="generating"] .qg-badge__dot{animation:qg-pulse 1.2s ease-in-out infinite}
.qg-badge[data-tone="ready"]{background:var(--color-success-soft);color:var(--color-success);border-color:transparent}
.qg-badge[data-tone="failed"]{background:var(--color-danger-soft);color:var(--color-danger);border-color:transparent}
.qg-badge[data-tone="ai"]{background:rgba(17,19,38,.62);color:#fff;border-color:rgba(255,255,255,.18);backdrop-filter:blur(10px);text-transform:uppercase;letter-spacing:.1em;font-size:10px}
.qg-badge[data-tone="ai-inline"]{background:var(--color-accent-soft);color:var(--color-text-accent);border-color:transparent;text-transform:uppercase;letter-spacing:.1em;font-size:10px}
.qg-badge[data-tone="demo"]{background:var(--color-signal-soft);color:var(--color-text-signal);border-color:transparent;text-transform:uppercase;letter-spacing:.1em;font-size:10px}
.qg-badge[data-tone="placeholder"]{background:transparent;color:var(--color-text-muted);border-style:dashed;border-color:var(--color-border-interactive);text-transform:uppercase;letter-spacing:.1em;font-size:10px}
/* Tabs & segmented */
.qg-tabs{position:relative;display:inline-flex;gap:4px;padding:4px;border-radius:var(--tab-radius);background:var(--tab-track-bg);border:1px solid var(--color-border);max-width:100%;overflow-x:auto;scrollbar-width:none}
.qg-tabs::-webkit-scrollbar{display:none}
.qg-tabs[data-full="true"]{display:flex;width:100%}.qg-tabs[data-full="true"] .qg-tab{flex:1}
.qg-tabs__ind{position:absolute;top:4px;bottom:4px;left:0;border-radius:var(--tab-radius);background:var(--tab-indicator-bg);box-shadow:var(--shadow-sm);transition:transform var(--qg-dur-slow) var(--qg-ease-enter),width var(--qg-dur-slow) var(--qg-ease-enter);pointer-events:none}
[data-theme="dark"] .qg-tabs__ind{background:var(--qg-ink-800)}
.qg-tab{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border:0;background:transparent;border-radius:var(--tab-radius);font:600 var(--text-body-sm)/1.1 var(--font-ui);color:var(--color-text-muted);cursor:pointer;white-space:nowrap;transition:color var(--motion-hover)}
.qg-tab:hover{color:var(--color-text)}.qg-tab[aria-selected="true"],.qg-tab[aria-checked="true"]{color:var(--color-text)}
.qg-tab:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-focus)}
.qg-tab:disabled{opacity:.4;cursor:not-allowed}
.qg-tabs[data-size="sm"] .qg-tab{min-height:32px;padding:0 12px;font-size:var(--text-label)}
.qg-tabs[data-size="lg"] .qg-tab{min-height:48px;padding:0 22px;font-size:var(--text-body)}
.qg-lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--qg-radius-pill);border:1px solid var(--color-border-strong);background:var(--color-surface)}
.qg-lang button{min-width:36px;height:30px;padding:0 8px;border:0;border-radius:var(--qg-radius-pill);background:transparent;color:var(--color-text-muted);font:700 12px/1 var(--font-ui);letter-spacing:.06em;cursor:pointer;transition:background var(--motion-hover),color var(--motion-hover)}
.qg-lang button[aria-pressed="true"]{background:var(--color-text);color:var(--color-bg)}
.qg-lang button:hover:not([aria-pressed="true"]){color:var(--color-text)}
.qg-lang button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-focus)}
/* Nav */
.qg-nav{position:sticky;top:0;z-index:var(--z-nav);height:var(--nav-height);display:flex;align-items:center;transition:background var(--motion-ui),box-shadow var(--motion-ui)}
.qg-nav[data-elevated="true"]{background:var(--nav-bg);backdrop-filter:var(--material-glass-blur);-webkit-backdrop-filter:var(--material-glass-blur);box-shadow:0 1px 0 var(--color-border)}
.qg-nav__in{display:flex;align-items:center;gap:28px;width:100%;max-width:var(--container-wide);margin:0 auto;padding:0 var(--page-margin)}
.qg-nav__links{display:flex;align-items:center;gap:4px;margin-right:auto}
.qg-nav__link{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:var(--qg-radius-pill);border:0;background:transparent;color:var(--color-text-2);font:600 var(--text-body-sm)/1 var(--font-ui);text-decoration:none;cursor:pointer;transition:background var(--motion-hover),color var(--motion-hover)}
.qg-nav__link:hover,.qg-nav__link[aria-expanded="true"]{color:var(--color-text);background:var(--button-ghost-bg-hover)}
.qg-nav__link:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.qg-nav__end{display:flex;align-items:center;gap:10px}
.qg-nav__burger{display:none}
@media (max-width:960px){.qg-nav__links,.qg-nav__end .qg-nav__hide-m{display:none}.qg-nav__burger{display:inline-grid}.qg-nav__in{justify-content:space-between}}
.qg-menu{position:absolute;z-index:var(--z-dropdown);top:calc(100% + 10px);left:0;width:min(560px,calc(100vw - 32px));padding:10px;border-radius:var(--qg-radius-xl);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-xl);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;animation:qg-rise var(--qg-dur-base) var(--qg-ease-enter)}
.qg-menu__item{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:var(--qg-radius-lg);color:var(--color-text);text-decoration:none;border:0;background:transparent;text-align:left;cursor:pointer;font:inherit;transition:background var(--motion-hover)}
.qg-menu__item:hover,.qg-menu__item:focus-visible{background:var(--color-surface-2);outline:none}
.qg-menu__icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--color-accent-soft);color:var(--color-text-accent)}
/* Cards */
.qg-card{position:relative;display:flex;flex-direction:column;border-radius:var(--card-radius);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);overflow:hidden;transition:box-shadow var(--motion-ui),transform var(--motion-ui),border-color var(--motion-ui)}
.qg-card[data-interactive="true"]{cursor:pointer}
.qg-card[data-interactive="true"]:hover{box-shadow:var(--card-shadow-hover);transform:translateY(-2px)}
.qg-card[data-interactive="true"]:focus-within{box-shadow:var(--ring-focus)}
.qg-card[data-selected="true"]{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent),var(--shadow-md)}
.qg-card__media{position:relative;overflow:hidden;background:var(--color-surface-2)}
.qg-card__body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px}
.qg-card__title{margin:0;font:600 var(--text-h5)/1.3 var(--font-display);letter-spacing:-.015em;color:var(--color-text)}
.qg-card__desc{margin:0;font-size:var(--text-body-sm);line-height:var(--leading-body-sm);color:var(--color-text-muted);text-wrap:pretty}
.qg-card__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.qg-cat{font:700 11px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)}
/* Media placeholder */
.qg-ph{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;background:radial-gradient(70% 55% at 50% 38%,rgba(221,215,255,.95),rgba(221,215,255,0) 70%),radial-gradient(60% 50% at 80% 90%,rgba(120,228,235,.5),rgba(120,228,235,0) 70%),linear-gradient(180deg,#EEEBFF,#E4E6F0);color:var(--qg-ink-600)}
.qg-ph[data-tone="dark"]{background:radial-gradient(70% 55% at 50% 36%,rgba(112,87,255,.5),rgba(112,87,255,0) 70%),radial-gradient(60% 50% at 80% 92%,rgba(120,228,235,.22),rgba(120,228,235,0) 70%),linear-gradient(180deg,#1A1C30,#0A0B18);color:#A3A6BD}
.qg-ph__label{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:center;text-align:center;font:600 11px/1.35 var(--font-ui);letter-spacing:.02em}
.qg-ph__sil{width:46%;max-width:180px;aspect-ratio:3/4;border-radius:46% 46% 18% 18%/38% 38% 18% 18%;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.1));box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.qg-ph[data-tone="dark"] .qg-ph__sil{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
/* Forms */
.qg-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.qg-field__label{font:600 var(--text-label)/1.2 var(--font-ui);color:var(--color-text);display:flex;justify-content:space-between;gap:12px}
.qg-field__hint{font-size:var(--text-caption);line-height:var(--leading-caption);color:var(--color-text-muted)}
.qg-field__hint[data-tone="error"]{color:var(--color-danger)}.qg-field__hint[data-tone="success"]{color:var(--color-success)}
.qg-field__count{font:500 var(--text-caption)/1 var(--font-mono);color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.qg-input,.qg-textarea,.qg-select{width:100%;min-height:var(--input-height);padding:0 16px;border-radius:var(--input-radius);border:1px solid var(--input-border);background:var(--input-bg);color:var(--color-text);font:500 var(--text-body)/1.4 var(--font-ui);transition:border-color var(--motion-hover),box-shadow var(--motion-hover)}
.qg-textarea{padding:14px 16px;min-height:120px;resize:vertical;line-height:1.55}
.qg-input::placeholder,.qg-textarea::placeholder{color:var(--color-text-disabled)}
.qg-input:hover:not(:disabled),.qg-textarea:hover:not(:disabled),.qg-select:hover:not(:disabled){border-color:var(--input-border-hover)}
.qg-input:focus,.qg-textarea:focus,.qg-select:focus{outline:none;border-color:var(--input-border-focus);box-shadow:0 0 0 4px var(--color-focus-halo)}
.qg-input[aria-invalid="true"],.qg-textarea[aria-invalid="true"],.qg-select[aria-invalid="true"]{border-color:var(--color-danger)}
.qg-input:disabled,.qg-textarea:disabled,.qg-select:disabled{opacity:.5;cursor:not-allowed;background:var(--color-surface-2)}
.qg-select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2372758A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.qg-prompt{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 18px;min-height:60px;border-radius:var(--qg-radius-pill);border:1px solid var(--input-border);background:var(--input-bg);box-shadow:var(--shadow-sm);transition:border-color var(--motion-hover),box-shadow var(--motion-hover)}
.qg-prompt:focus-within{border-color:var(--input-border-focus);box-shadow:0 0 0 4px var(--color-focus-halo),var(--shadow-md)}
.qg-prompt input{flex:1;min-width:0;border:0;background:transparent;color:var(--color-text);font:500 var(--text-body)/1.4 var(--font-ui);outline:none}
.qg-prompt input::placeholder{color:var(--color-text-disabled)}
.qg-check{display:inline-flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:var(--text-body-sm);line-height:1.45;color:var(--color-text);min-height:24px}
.qg-check input{position:absolute;opacity:0;width:22px;height:22px;margin:0;cursor:pointer}
.qg-check{position:relative}
.qg-check__box{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--color-border-interactive);background:var(--color-surface);display:grid;place-items:center;color:#fff;transition:background var(--motion-hover),border-color var(--motion-hover)}
.qg-check__box svg{transform:scale(0);transition:transform var(--qg-dur-fast) var(--qg-ease-spring)}
.qg-check input:checked+.qg-check__box{background:var(--color-accent);border-color:var(--color-accent)}
.qg-check input:checked+.qg-check__box svg{transform:scale(1)}
.qg-check input:focus-visible+.qg-check__box{box-shadow:var(--ring-focus)}
.qg-check input:disabled+.qg-check__box{opacity:.45}
.qg-check input[aria-invalid="true"]+.qg-check__box{border-color:var(--color-danger)}
.qg-check:has(input:disabled){cursor:not-allowed;color:var(--color-text-disabled)}
.qg-switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:var(--text-body-sm);color:var(--color-text)}
.qg-switch{position:relative}
.qg-switch input{position:absolute;opacity:0;width:44px;height:26px;margin:0;cursor:pointer}
.qg-switch__track{flex:none;position:relative;width:44px;height:26px;border-radius:999px;background:var(--color-border-strong);transition:background var(--motion-ui)}
.qg-switch__thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--qg-dur-base) var(--qg-ease-spring)}
.qg-switch input:checked+.qg-switch__track{background:var(--color-accent)}
.qg-switch input:checked+.qg-switch__track .qg-switch__thumb{transform:translateX(18px)}
.qg-switch input:focus-visible+.qg-switch__track{box-shadow:var(--ring-focus)}
.qg-switch input:disabled+.qg-switch__track{opacity:.45}
.qg-switch:has(input:disabled){cursor:not-allowed;color:var(--color-text-disabled)}
.qg-slider{display:flex;flex-direction:column;gap:10px}
.qg-slider input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:24px;background:transparent;cursor:pointer;margin:0}
.qg-slider input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--color-accent) var(--_p,50%),var(--color-border-strong) var(--_p,50%))}
.qg-slider input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--color-accent) var(--_p,50%),var(--color-border-strong) var(--_p,50%))}
.qg-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 1px var(--qg-ink-a16),var(--shadow-md);transition:transform var(--motion-hover)}
.qg-slider input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 1px var(--qg-ink-a16),var(--shadow-md)}
.qg-slider input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.08)}
.qg-slider input[type=range]:focus-visible{outline:none}
.qg-slider input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--ring-focus)}
.qg-slider input[type=range]:disabled{opacity:.45;cursor:not-allowed}
.qg-upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:180px;padding:24px;border-radius:var(--qg-radius-xl);border:1.5px dashed var(--color-border-interactive);background:var(--color-surface);text-align:center;cursor:pointer;transition:border-color var(--motion-hover),background var(--motion-hover)}
.qg-upload:hover,.qg-upload[data-drag="true"]{border-color:var(--color-accent);background:var(--color-accent-soft)}
.qg-upload:focus-within{box-shadow:var(--ring-focus)}
.qg-upload[data-state="error"]{border-color:var(--color-danger);background:var(--color-danger-soft)}
.qg-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.qg-upload__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--color-accent-soft);color:var(--color-text-accent)}
/* Progress / skeleton */
.qg-progress{position:relative;height:6px;border-radius:99px;background:var(--color-surface-3);overflow:hidden}
.qg-progress__bar{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--gradient-signal);transition:width var(--qg-dur-slow) var(--qg-ease-standard)}
.qg-progress[data-indeterminate="true"] .qg-progress__bar{width:40%!important;animation:qg-indet 1.4s var(--qg-ease-standard) infinite}
@keyframes qg-indet{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
.qg-progress[data-tone="error"] .qg-progress__bar{background:var(--color-danger)}
.qg-skel{display:block;border-radius:var(--qg-radius-sm);background:linear-gradient(90deg,var(--color-skeleton) 0%,var(--color-skeleton-shine) 50%,var(--color-skeleton) 100%);background-size:200% 100%;animation:qg-shimmer 1.6s linear infinite}
/* Accordion */
.qg-acc{display:flex;flex-direction:column;border-top:1px solid var(--color-border)}
.qg-acc__item{border-bottom:1px solid var(--color-border)}
.qg-acc__btn{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:72px;padding:20px 4px;border:0;background:transparent;color:var(--color-text);text-align:left;font:600 var(--text-h5)/1.35 var(--font-display);letter-spacing:-.01em;cursor:pointer}
.qg-acc__btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-focus);border-radius:8px}
.qg-acc__chev{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--color-surface-2);transition:transform var(--motion-ui),background var(--motion-ui)}
.qg-acc__btn[aria-expanded="true"] .qg-acc__chev{transform:rotate(45deg);background:var(--color-accent);color:#fff}
.qg-acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--qg-dur-slow) var(--qg-ease-enter)}
.qg-acc__panel[data-open="true"]{grid-template-rows:1fr}
.qg-acc__panel>div{overflow:hidden}
.qg-acc__panel p{margin:0;padding:0 56px 24px 4px;color:var(--color-text-2);font-size:var(--text-body);line-height:var(--leading-body);max-width:72ch;text-wrap:pretty}
/* Tooltip */
.qg-tip{position:relative;display:inline-flex}
.qg-tip__bubble{position:absolute;z-index:var(--z-tooltip);left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);padding:7px 10px;border-radius:8px;background:var(--qg-ink-950);color:var(--qg-ink-25);font:600 12px/1.3 var(--font-ui);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--motion-hover),transform var(--motion-hover)}
[data-theme="dark"] .qg-tip__bubble{background:var(--qg-ink-25);color:var(--qg-ink-950)}
.qg-tip[data-placement="bottom"] .qg-tip__bubble{bottom:auto;top:calc(100% + 8px);transform:translate(-50%,-4px)}
.qg-tip[data-open="true"] .qg-tip__bubble{opacity:1;transform:translate(-50%,0)}
/* Overlays */
.qg-overlay{position:fixed;inset:0;z-index:var(--z-modal);background:var(--color-overlay);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px;animation:qg-fade var(--qg-dur-base) var(--qg-ease-standard)}
@keyframes qg-fade{from{opacity:0}to{opacity:1}}
.qg-modal{position:relative;width:min(520px,100%);max-height:calc(100dvh - 32px);overflow:auto;border-radius:var(--qg-radius-2xl);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-xl);border:1px solid var(--color-border);padding:32px;animation:qg-pop var(--qg-dur-slow) var(--qg-ease-enter)}
@keyframes qg-pop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.qg-modal__close{position:absolute;top:16px;right:16px}
.qg-modal h2{margin:0 40px 8px 0;font:600 var(--text-h4)/1.25 var(--font-display);letter-spacing:-.015em}
.qg-modal__body{color:var(--color-text-2);font-size:var(--text-body);line-height:var(--leading-body)}
.qg-modal__actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:28px}
@media (max-width:560px){.qg-overlay{place-items:end stretch;padding:0}.qg-modal{width:100%;border-radius:28px 28px 0 0;padding:28px 20px calc(20px + env(safe-area-inset-bottom));animation-name:qg-sheet}.qg-modal__actions{flex-direction:column-reverse}.qg-modal__actions .qg-btn{width:100%}}
@keyframes qg-sheet{from{transform:translateY(100%)}to{transform:none}}
.qg-drawer-ov{position:fixed;inset:0;z-index:var(--z-drawer);background:var(--color-overlay);animation:qg-fade var(--qg-dur-base) var(--qg-ease-standard)}
.qg-drawer{position:fixed;z-index:var(--z-drawer);top:0;bottom:0;right:0;width:min(420px,100%);background:var(--color-bg-raised);color:var(--color-text);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;animation:qg-slide-r var(--qg-dur-slow) var(--qg-ease-enter)}
.qg-drawer[data-side="left"]{right:auto;left:0;animation-name:qg-slide-l}
.qg-drawer[data-side="bottom"]{top:auto;left:0;width:100%;max-height:88dvh;border-radius:28px 28px 0 0;animation-name:qg-sheet}
@keyframes qg-slide-r{from{transform:translateX(100%)}to{transform:none}}@keyframes qg-slide-l{from{transform:translateX(-100%)}to{transform:none}}
.qg-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px;padding:0 16px 0 24px;border-bottom:1px solid var(--color-border)}
.qg-drawer__body{flex:1;overflow:auto;padding:24px}
.qg-toast{display:flex;align-items:flex-start;gap:12px;width:min(400px,calc(100vw - 32px));padding:14px 14px 14px 16px;border-radius:var(--qg-radius-lg);background:var(--qg-ink-950);color:var(--qg-ink-25);box-shadow:var(--shadow-xl);font-size:var(--text-body-sm);line-height:1.45;animation:qg-pop var(--qg-dur-slow) var(--qg-ease-enter)}
[data-theme="dark"] .qg-toast{background:var(--qg-ink-850);border:1px solid var(--color-border-strong)}
.qg-toast__icon{flex:none;margin-top:1px}
.qg-toast[data-tone="success"] .qg-toast__icon{color:var(--qg-green-300)}.qg-toast[data-tone="error"] .qg-toast__icon{color:var(--qg-red-300)}.qg-toast[data-tone="info"] .qg-toast__icon{color:var(--qg-cyan-300)}
.qg-toast__title{font-weight:700}.qg-toast__msg{color:#C9CBDB}
.qg-toasts{position:fixed;z-index:var(--z-toast);bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center}
/* Empty */
.qg-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:40px 24px;border-radius:var(--qg-radius-xl);border:1px dashed var(--color-border-interactive);background:var(--color-surface)}
.qg-empty[data-tone="error"]{border-style:solid;border-color:transparent;background:var(--color-danger-soft)}
.qg-empty__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--color-surface-2);color:var(--color-text-muted)}
.qg-empty[data-tone="error"] .qg-empty__icon{background:var(--color-surface);color:var(--color-danger)}
.qg-empty h3{margin:4px 0 0;font:600 var(--text-h5)/1.3 var(--font-display)}
.qg-empty p{margin:0;max-width:40ch;color:var(--color-text-muted);font-size:var(--text-body-sm);line-height:1.55}
/* Players */
.qg-audio{display:flex;align-items:center;gap:14px;padding:12px 18px 12px 12px;border-radius:var(--qg-radius-pill);background:var(--player-bg);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);min-width:0}
.qg-audio[data-layout="stacked"]{flex-wrap:wrap;border-radius:var(--qg-radius-xl);padding:16px}
.qg-audio__time{flex:none;font:500 12px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--color-text-muted);min-width:76px;text-align:right}
.qg-wave{flex:1;min-width:60px;display:flex;align-items:center;gap:2px;height:40px;cursor:pointer;border-radius:6px}
.qg-wave:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-focus)}
.qg-wave i{flex:1;min-width:2px;border-radius:2px;background:var(--player-wave-idle);transition:background var(--qg-dur-fast),transform var(--qg-dur-fast);transform-origin:center}
.qg-wave i[data-on="true"]{background:var(--player-wave-played)}
.qg-wave[data-tone="signal"] i[data-on="true"]{background:var(--gradient-signal);background-attachment:fixed}
.qg-video{position:relative;border-radius:var(--qg-radius-xl);overflow:hidden;background:var(--qg-ink-1000);color:#fff;isolation:isolate}
.qg-video__stage{position:relative;width:100%;transition:aspect-ratio var(--motion-scene)}
.qg-video__stage>video,.qg-video__stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qg-video__bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:14px;background:var(--gradient-protect-bottom)}
.qg-video__scrub{flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.24);position:relative;cursor:pointer}
.qg-video__scrub span{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:#fff}
.qg-video__cap{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);max-width:86%;padding:6px 12px;border-radius:8px;background:rgba(10,11,24,.72);font:600 14px/1.4 var(--font-ui);text-align:center}
.qg-aspect{align-self:flex-start;display:inline-flex;gap:6px;padding:4px;border-radius:var(--qg-radius-lg);background:var(--color-surface-2);border:1px solid var(--color-border)}
.qg-aspect button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:64px;min-height:64px;padding:8px 10px;border:0;border-radius:14px;background:transparent;color:var(--color-text-muted);font:600 12px/1 var(--font-mono);cursor:pointer;transition:background var(--motion-hover),color var(--motion-hover)}
.qg-aspect button[aria-checked="true"]{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-sm)}
[data-theme="dark"] .qg-aspect button[aria-checked="true"]{background:var(--qg-ink-800)}
.qg-aspect button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-focus)}
.qg-aspect__glyph{border:1.5px solid currentColor;border-radius:4px}
/* Living Frame */
.qg-lf{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate}
.qg-lf canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.qg-lf__fallback{position:absolute;inset:0;background:var(--gradient-mesh-light)}
[data-theme="dark"] .qg-lf__fallback,.qg-lf[data-tone="dark"] .qg-lf__fallback{background:var(--gradient-night)}
.qg-lf__slot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:var(--frame-radius);overflow:hidden;z-index:2}
.qg-lf__ring{position:absolute;inset:-10px;border-radius:calc(var(--frame-radius) + 10px);pointer-events:none;z-index:1;padding:1.5px;background:var(--gradient-iris);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.9}