:root {
  --bg: #0b0f1b;
  --panel: #121829;
  --panel-strong: #171e32;
  --panel-soft: #1b2339;
  --line: #27314b;
  --line-soft: rgba(143, 158, 192, 0.13);
  --text: #f4f5fb;
  --muted: #929bb2;
  --muted-2: #6f7891;
  --violet: #9878ff;
  --violet-strong: #7655e9;
  --teal: #45d6bc;
  --amber: #f0b866;
  --coral: #f18181;
  --green: #51d59a;
  font-family: "DM Sans", "Noto Sans SC", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.hidden { display: none !important; }

.login-view { min-height: 100vh; display: grid; place-items: center; position: relative; overflow: hidden; padding: 32px 18px 68px; background: radial-gradient(ellipse at 50% 40%, #2f245e 0%, #191538 38%, #0c1020 76%); }
.login-view::before { content: ""; position: absolute; inset: 0; opacity: .38; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(ellipse at center, black, transparent 78%); }
.login-stars, .login-stars::before, .login-stars::after { position: absolute; inset: 0; pointer-events: none; background-repeat: repeat; }
.login-stars { opacity: .65; background-image: radial-gradient(circle at 12% 22%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 78% 18%, #c3b7ff 0 1px, transparent 1.8px), radial-gradient(circle at 65% 69%, #fff 0 1px, transparent 1.7px), radial-gradient(circle at 22% 81%, #9e85ff 0 1px, transparent 1.6px); background-size: 310px 260px, 430px 340px, 370px 290px, 520px 420px; }
.login-stars::before { content: ""; opacity: .4; transform: rotate(16deg); background-image: radial-gradient(circle at 28% 38%, #fff 0 1px, transparent 1.7px), radial-gradient(circle at 86% 78%, #c3b7ff 0 1px, transparent 1.7px); background-size: 360px 300px, 420px 340px; }
.login-stars::after { content: ""; opacity: .2; background-image: radial-gradient(circle at 10% 65%, #f2cbff 0 1px, transparent 2px), radial-gradient(circle at 92% 45%, #fff 0 1px, transparent 2px); background-size: 390px 360px, 570px 440px; }
.login-orbit { position: absolute; width: 520px; height: 520px; border: 1px solid rgba(154, 126, 255, .16); border-radius: 50%; transform: rotate(-20deg); box-shadow: 0 0 90px rgba(114, 79, 229, .12); }
.orbit-one { top: -180px; right: -160px; }
.orbit-two { bottom: -300px; left: -250px; width: 620px; height: 620px; border-color: rgba(73, 207, 187, .12); }
.login-card { position: relative; width: min(100%, 444px); padding: 36px 38px 30px; border: 1px solid rgba(175, 157, 255, .23); border-radius: 22px; background: rgba(20, 15, 49, .82); box-shadow: 0 24px 72px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.07); backdrop-filter: blur(18px); z-index: 1; }
.login-brand { display: flex; align-items: center; gap: 10px; justify-content: center; color: #c8b9ff; font-size: 12px; font-weight: 700; letter-spacing: .18em; margin-bottom: 24px; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #a888ff, #6742d3); box-shadow: 0 7px 18px rgba(112,74,224,.32); }
.brand-mark.large { width: 36px; height: 36px; }
.brand-mark svg { width: 19px; height: 19px; stroke-width: 2.1; }
.login-card h1 { margin: 0; text-align: center; font-size: 30px; letter-spacing: .04em; }
.login-subtitle { margin: 10px 0 28px; text-align: center; color: #a89fc6; font-size: 13px; }
.login-form { display: grid; gap: 10px; }
.login-form label { color: #c1b9dc; font-size: 13px; margin-top: 4px; }
.field-wrap { position: relative; display: flex; align-items: center; border: 1px solid rgba(163, 141, 231, .28); border-radius: 13px; background: rgba(11, 8, 29, .58); transition: .2s; }
.field-wrap:focus-within { border-color: #9d7cff; box-shadow: 0 0 0 3px rgba(146,113,255,.12); }
.field-wrap > svg { width: 17px; color: #8f82b6; margin-left: 16px; flex: none; }
.field-wrap input { width: 100%; border: 0; outline: 0; color: #fff; background: transparent; padding: 16px 14px; font-size: 15px; }
.field-wrap input::placeholder { color: #716787; }
.input-action { width: 38px; height: 38px; margin-right: 3px; color: #8d80af; }
.login-button { margin-top: 14px; width: 100%; justify-content: center; padding: 15px 18px; font-size: 15px; }
.form-error { min-height: 18px; margin: 3px 0 0; color: #f28caa; text-align: center; font-size: 12px; }
.login-foot { display: flex; justify-content: center; align-items: center; gap: 7px; color: #7c729b; font-size: 11px; margin-top: 10px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(81,213,154,.12); }
.login-copyright { position: absolute; bottom: 22px; color: #716892; font-size: 11px; letter-spacing: .08em; z-index: 1; }
.login-copyright span { margin: 0 7px; opacity: .6; }

.app-view { min-height: 100vh; display: flex; background: var(--bg); }
.sidebar { width: 244px; flex: 0 0 244px; min-height: 100vh; display: flex; flex-direction: column; padding: 24px 15px 17px; border-right: 1px solid var(--line-soft); background: #101625; }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 30px; }
.brand-lockup { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-lockup strong { display: block; font-size: 14px; letter-spacing: .02em; }
.brand-lockup span { display: block; color: #68748d; font-size: 8px; font-weight: 700; letter-spacing: .16em; margin-top: 3px; }
.icon-button { width: 34px; height: 34px; padding: 0; border: 0; display: inline-grid; place-items: center; color: var(--muted); border-radius: 9px; background: transparent; transition: .2s; }
.icon-button:hover { color: #fff; background: rgba(255,255,255,.07); }
.icon-button svg { width: 17px; height: 17px; }
.sidebar-collapse { color: #6d7890; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-label { color: #657089; font-size: 10px; font-weight: 700; letter-spacing: .14em; padding: 0 13px 9px; }
.nav-label-spaced { margin-top: 24px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 13px; color: #8792aa; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: left; font-size: 13px; transition: .2s; }
.nav-item svg { width: 17px; height: 17px; }
.nav-item:hover { color: #d6dbed; background: rgba(255,255,255,.04); }
.nav-item.active { color: #d5c9ff; border-color: rgba(149, 116, 247, .18); background: rgba(132, 94, 230, .14); }
.nav-item.active svg { color: var(--violet); }
.nav-item b { margin-left: auto; color: #a595df; background: rgba(139,105,240,.2); border-radius: 10px; padding: 2px 7px; font-size: 10px; }
.sidebar-bottom { margin-top: auto; }
.help-card { display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid rgba(85, 212, 183, .14); border-radius: 12px; background: rgba(43, 169, 150, .08); }
.help-icon { width: 27px; height: 27px; display: grid; place-items: center; color: var(--teal); border-radius: 8px; background: rgba(64, 210, 184, .14); flex: none; }
.help-icon svg { width: 14px; }
.help-card strong, .help-card span { display: block; }
.help-card strong { color: #c0f1e6; font-size: 11px; }
.help-card span { max-width: 120px; color: #759d9c; font-size: 9px; line-height: 1.45; margin-top: 2px; }
.text-icon-button { width: 25px; height: 25px; display: grid; place-items: center; margin-left: auto; color: #80cfc0; border: 0; border-radius: 6px; background: transparent; }
.text-icon-button:hover { background: rgba(255,255,255,.08); }
.text-icon-button svg { width: 14px; }
.sidebar-user { display: flex; align-items: center; gap: 9px; padding: 19px 8px 0; margin-top: 19px; border-top: 1px solid var(--line-soft); }
.avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; color: #e9ddff; border: 1px solid rgba(177,145,255,.35); border-radius: 10px; background: linear-gradient(145deg, #6650a7, #39275d); font-size: 12px; font-weight: 700; }
.avatar.small { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; }
.sidebar-user strong, .sidebar-user span { display: block; }
.sidebar-user strong { color: #ccd2e1; font-size: 11px; }
.sidebar-user span { color: #69748b; font-size: 9px; margin-top: 3px; }
.sidebar-user .icon-button { margin-left: auto; }

.main-content { flex: 1; min-width: 0; }
.topbar { height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; border-bottom: 1px solid var(--line-soft); background: rgba(11,15,27,.7); }
.breadcrumb { display: flex; align-items: center; gap: 8px; color: #657088; font-size: 12px; }
.breadcrumb svg { width: 14px; }
.breadcrumb strong { color: #d9ddec; font-weight: 500; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.notification-button { position: relative; }
.notification-button span { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px var(--bg); }
.topbar-divider { width: 1px; height: 25px; background: var(--line); }
.topbar-user { display: flex; align-items: center; gap: 9px; color: #707c94; }
.topbar-user strong, .topbar-user span { display: block; }
.topbar-user strong { color: #d7dbe8; font-size: 11px; font-weight: 500; }
.topbar-user span { color: var(--green); font-size: 9px; margin-top: 2px; }
.topbar-user > svg { width: 14px; margin-left: 3px; }
.mobile-brand { display: none; align-items: center; gap: 8px; }
.mobile-brand strong { font-size: 13px; }
.page-shell { max-width: 1440px; padding: 38px 40px 56px; margin: 0 auto; }
.page-section { display: block; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 31px; }
.page-heading.compact-heading { align-items: center; margin-bottom: 26px; }
.eyebrow { color: #76819b; font-size: 10px; letter-spacing: .14em; font-weight: 700; margin: 0 0 8px; }
.page-heading h2 { margin: 0; color: #f0f1f8; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; font-weight: 600; }
.page-heading h2 + p { color: #7f8aa1; font-size: 12px; margin: 9px 0 0; }
.heading-wave { color: #a78bff; font-size: 20px; vertical-align: 3px; margin-left: 4px; }
.primary-button, .secondary-button, .ghost-button, .filter-button, .danger-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 9px; white-space: nowrap; transition: .2s; }
.primary-button { padding: 11px 16px; color: #fff; background: linear-gradient(135deg, #a486ff, #7657de); box-shadow: 0 8px 22px rgba(110, 78, 226, .22); font-size: 12px; font-weight: 600; }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 11px 28px rgba(110,78,226,.3); }
.primary-button:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.primary-button svg, .secondary-button svg, .ghost-button svg, .filter-button svg, .danger-button svg { width: 15px; height: 15px; }
.secondary-button { padding: 10px 13px; color: #c5cbe0; border: 1px solid #343f5c; background: #1b2337; font-size: 11px; }
.secondary-button:hover { border-color: #667298; background: #242e47; }
.ghost-button { padding: 8px 4px; color: #a897eb; background: transparent; font-size: 11px; }
.ghost-button:hover { color: #c9bfff; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.stat-card { min-height: 148px; padding: 17px 18px 14px; position: relative; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 13px; background: var(--panel); }
.stat-card::after { content: ""; position: absolute; width: 120px; height: 90px; top: -44px; right: -31px; border-radius: 50%; opacity: .12; filter: blur(1px); }
.accent-violet::after { background: var(--violet); }.accent-teal::after { background: var(--teal); }.accent-amber::after { background: var(--amber); }.accent-coral::after { background: var(--coral); }
.stat-top { display: flex; align-items: center; justify-content: space-between; color: #8791a8; font-size: 11px; }
.stat-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; }
.stat-icon svg { width: 15px; height: 15px; }
.accent-violet .stat-icon { color: var(--violet); background: rgba(152,120,255,.13); }.accent-teal .stat-icon { color: var(--teal); background: rgba(69,214,188,.12); }.accent-amber .stat-icon { color: var(--amber); background: rgba(240,184,102,.12); }.accent-coral .stat-icon { color: var(--coral); background: rgba(241,129,129,.12); }
.stat-card > strong { display: block; color: #f3f4fa; font-size: 32px; font-weight: 600; letter-spacing: -.04em; margin: 16px 0 13px; }
.stat-meta { display: flex; justify-content: space-between; color: #69748c; font-size: 9px; }
.trend { display: inline-flex; align-items: center; gap: 4px; }.trend svg { width: 11px; height: 11px; }.trend.up { color: var(--green); }.trend.neutral { color: #a6adbf; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr); gap: 14px; margin-top: 14px; }
.panel { border: 1px solid var(--line-soft); border-radius: 13px; background: var(--panel); }
.quick-panel, .activity-panel { min-height: 230px; padding: 20px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.panel-heading h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }.panel-heading .eyebrow { margin-bottom: 6px; }
.quick-dropzone { min-height: 142px; display: flex; align-items: center; gap: 15px; margin-top: 25px; padding: 18px; border: 1px dashed #374462; border-radius: 11px; background: rgba(20,29,48,.5); }
.quick-dropzone:hover, .quick-dropzone.dragover { border-color: #8f73ee; background: rgba(116,87,216,.08); }
.quick-upload-icon { width: 43px; height: 43px; display: grid; place-items: center; flex: none; color: var(--violet); border-radius: 12px; background: rgba(152,120,255,.13); }.quick-upload-icon svg { width: 21px; }
.quick-dropzone strong, .quick-dropzone span { display: block; }.quick-dropzone strong { color: #dde0ed; font-size: 12px; }.quick-dropzone span { color: #79859e; font-size: 10px; margin-top: 6px; }.quick-dropzone .secondary-button { margin-left: auto; }
.activity-list { display: flex; flex-direction: column; gap: 14px; margin-top: 23px; }.activity-item { display: flex; align-items: center; gap: 10px; }.activity-dot { width: 28px; height: 28px; display: grid; place-items: center; flex: none; border-radius: 8px; }.activity-dot svg { width: 14px; }.activity-dot.violet { color: var(--violet); background: rgba(152,120,255,.12); }.activity-dot.teal { color: var(--teal); background: rgba(69,214,188,.12); }.activity-dot.amber { color: var(--amber); background: rgba(240,184,102,.12); }.activity-item strong, .activity-item span { display: block; }.activity-item strong { color: #cbd1e0; font-size: 11px; font-weight: 500; }.activity-item span { color: #6f7b94; font-size: 9px; margin-top: 3px; }.activity-time { margin-left: auto; color: #68748b; font-size: 9px; }
.library-preview { padding: 20px; margin-top: 14px; }.library-preview .panel-heading { margin-bottom: 18px; }
.table-scroll { overflow-x: auto; }.qr-table { width: 100%; border-collapse: collapse; min-width: 680px; }.qr-table th { color: #68748b; font-size: 9px; font-weight: 600; text-align: left; letter-spacing: .08em; padding: 0 12px 11px; border-bottom: 1px solid var(--line-soft); }.qr-table td { color: #aeb6c8; font-size: 11px; padding: 12px; border-bottom: 1px solid rgba(143,158,192,.08); vertical-align: middle; }.qr-table tr:last-child td { border-bottom: 0; }.qr-table tbody tr:hover { background: rgba(255,255,255,.018); }.qr-table td:first-child, .qr-table th:first-child { padding-left: 3px; }.qr-mini { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; background: #fff; overflow: hidden; }.qr-mini img, .qr-mini canvas { width: 30px !important; height: 30px !important; image-rendering: pixelated; }.asset-cell { display: flex; align-items: center; gap: 10px; }.asset-cell strong { display: block; color: #dce0eb; font-size: 11px; font-weight: 500; }.asset-cell span { display: block; color: #69748c; font-size: 9px; margin-top: 3px; max-width: 270px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.status-pill { display: inline-flex; align-items: center; gap: 5px; color: #69d6a8; font-size: 9px; }.status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.table-actions { display: flex; justify-content: flex-end; gap: 2px; }.table-actions .icon-button { width: 29px; height: 29px; }.empty-state { display: grid; place-items: center; min-height: 180px; color: #7b869d; text-align: center; }.empty-state svg { width: 32px; height: 32px; color: #58637c; margin-bottom: 10px; }.empty-state strong { display: block; color: #b4bbcc; font-size: 12px; }.empty-state span { display: block; margin-top: 6px; color: #6e7991; font-size: 10px; }

.library-panel { padding: 18px 20px; }.library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }.search-box { width: min(320px,100%); display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid #2b3651; border-radius: 9px; background: #151d30; }.search-box:focus-within { border-color: #8062e4; }.search-box svg { width: 15px; color: #738099; }.search-box input { width: 100%; height: 37px; border: 0; outline: 0; color: #e8eaf1; background: transparent; font-size: 11px; }.search-box input::placeholder { color: #667188; }.toolbar-actions { display: flex; align-items: center; gap: 11px; }.filter-button { padding: 9px 12px; color: #9ba6bc; border: 1px solid #303b57; background: #182135; font-size: 10px; }.filter-button:hover { background: #212c46; }.filter-button svg { width: 14px; }

.create-panel { padding: 24px; }.create-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 28px; }.create-left, .create-right { min-width: 0; }.inner-heading { align-items: center; margin-bottom: 16px; }.file-limit, .secure-label { color: #71809b; font-size: 9px; letter-spacing: .08em; }.secure-label { display: inline-flex; align-items: center; gap: 5px; color: #64cfa9; letter-spacing: 0; }.secure-label svg { width: 12px; }.dropzone { min-height: 340px; display: grid; place-items: center; position: relative; padding: 28px; border: 1px dashed #3c4968; border-radius: 12px; background: #141d30; transition: .2s; }.dropzone.dragover { border-color: var(--violet); background: rgba(126,95,226,.09); }.dropzone:hover { border-color: #7180a7; }.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: auto; }.dropzone #dropPlaceholder { display: flex; flex-direction: column; align-items: center; text-align: center; }.drop-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 13px; color: var(--violet); border-radius: 15px; background: rgba(152,120,255,.14); }.drop-icon svg { width: 25px; height: 25px; }.dropzone strong { color: #dfe2ed; font-size: 13px; }.dropzone span { color: #7d899f; font-size: 10px; margin-top: 6px; }.dropzone .secondary-button { margin-top: 17px; }.dropzone small { color: #606d86; font-size: 9px; margin-top: 12px; }.preview-state { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 15px; }.preview-state img { max-width: 100%; max-height: 235px; object-fit: contain; border-radius: 7px; box-shadow: 0 10px 25px rgba(0,0,0,.25); }.preview-info { align-self: stretch; display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: 9px; background: #1a2237; }.preview-info strong { color: #cfd5e3; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.preview-info span { color: #77839b; font-size: 9px; }.text-button { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 4px; color: #e28c98; border: 0; background: transparent; font-size: 10px; white-space: nowrap; }.text-button svg { width: 13px; }.text-button:hover { color: #ffacb5; }.create-right { padding: 0 5px; }.input-label { display: block; color: #a9b2c5; font-size: 11px; margin: 18px 0 8px; }.text-input { width: 100%; height: 42px; padding: 0 13px; color: #e6e9f1; border: 1px solid #2d3955; border-radius: 9px; outline: none; background: #151e32; font-size: 11px; }.text-input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(142,108,240,.1); }.text-input::placeholder { color: #69758e; }.url-input { display: flex; align-items: center; height: 42px; overflow: hidden; border: 1px solid #2d3955; border-radius: 9px; background: #151e32; }.url-input:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(142,108,240,.1); }.url-input span { color: #67738b; padding-left: 12px; font-size: 10px; white-space: nowrap; }.url-input input { min-width: 0; flex: 1; height: 100%; padding: 0 11px 0 3px; color: #cfd5e4; border: 0; outline: 0; background: transparent; font-size: 10px; }.input-help { color: #6b7790; font-size: 10px; line-height: 1.6; margin: 9px 0 0; }.generate-button { width: 100%; margin-top: 30px; padding: 13px 16px; }

.settings-panel { padding: 8px 22px; }.settings-row { min-height: 81px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line-soft); }.settings-row:last-child { border-bottom: 0; }.settings-row h3 { margin: 0; color: #d9deea; font-size: 12px; font-weight: 500; }.settings-row p { margin: 6px 0 0; color: #78849a; font-size: 10px; }.settings-input { max-width: 330px; }.toggle { position: relative; width: 39px; height: 22px; flex: none; }.toggle input { opacity: 0; width: 0; height: 0; }.toggle span { position: absolute; inset: 0; border-radius: 20px; background: #2b3650; cursor: pointer; transition: .2s; }.toggle span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; border-radius: 50%; background: #aab4c9; transition: .2s; }.toggle input:checked + span { background: #7353d8; }.toggle input:checked + span::before { transform: translateX(17px); background: #fff; }.danger-button { padding: 9px 12px; color: #f29aa0; border: 1px solid rgba(231,111,126,.22); background: rgba(231,111,126,.08); font-size: 10px; }.danger-button:hover { background: rgba(231,111,126,.15); }

.toast { position: fixed; right: 23px; top: 22px; z-index: 20; max-width: min(330px, calc(100% - 46px)); padding: 11px 14px; color: #e8ecf6; border: 1px solid rgba(98, 215, 169, .25); border-radius: 9px; background: #162b2d; box-shadow: 0 10px 28px rgba(0,0,0,.26); font-size: 11px; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: .25s; }.toast.show { opacity: 1; transform: translateY(0); }.toast.error { border-color: rgba(241,129,129,.25); background: #32202d; }
.modal-backdrop { position: fixed; inset: 0; z-index: 15; display: grid; place-items: center; padding: 20px; background: rgba(4,6,13,.74); backdrop-filter: blur(8px); }.modal-card { width: min(100%, 410px); position: relative; padding: 28px 28px 25px; text-align: center; border: 1px solid rgba(151,126,243,.25); border-radius: 16px; background: #161d31; box-shadow: 0 22px 70px rgba(0,0,0,.46); }.modal-close { position: absolute; top: 12px; right: 12px; }.modal-kicker { display: inline-flex; align-items: center; gap: 7px; color: #68d5a8; font-size: 10px; }.modal-success { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(81,213,154,.14); }.modal-success svg { width: 13px; }.modal-card h2 { margin: 12px 0 7px; color: #eef0f7; font-size: 21px; letter-spacing: -.02em; }.modal-subtitle { margin: 0; color: #7d88a0; font-size: 11px; }.modal-qr-wrap { width: 228px; height: 228px; display: grid; place-items: center; position: relative; margin: 22px auto 18px; padding: 15px; border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.25); }.modal-qr-wrap #qrcode, .modal-qr-wrap #qrcode img, .modal-qr-wrap #qrcode canvas { width: 198px !important; height: 198px !important; }.modal-qr-wrap #qrcode img, .modal-qr-wrap #qrcode canvas { display: block; image-rendering: pixelated; }.qr-corner { width: 12px; height: 12px; position: absolute; border-color: var(--violet); border-style: solid; }.corner-tl { top: 7px; left: 7px; border-width: 2px 0 0 2px; }.corner-tr { top: 7px; right: 7px; border-width: 2px 2px 0 0; }.corner-bl { bottom: 7px; left: 7px; border-width: 0 0 2px 2px; }.corner-br { bottom: 7px; right: 7px; border-width: 0 2px 2px 0; }.modal-url { display: flex; align-items: center; gap: 6px; padding: 9px 11px; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: #11182a; }.modal-url span { flex: 1; color: #9ca7bd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }.modal-url .icon-button { width: 24px; height: 24px; color: #a896ef; }.modal-url .icon-button svg { width: 14px; }.modal-actions { display: flex; gap: 9px; margin-top: 17px; }.modal-actions > * { flex: 1; }.image-modal-card { width: min(100%, 650px); }.image-modal-card h2 { text-align: left; margin-bottom: 17px; }.image-modal-card > img { display: block; width: 100%; max-height: 62vh; object-fit: contain; border-radius: 8px; background: #0c1220; }

@media (max-width: 1050px) { .sidebar { width: 218px; flex-basis: 218px; }.topbar { padding: 0 28px; }.page-shell { padding-left: 28px; padding-right: 28px; }.content-grid { grid-template-columns: 1fr; }.activity-panel { min-height: 180px; }.activity-list { flex-direction: row; flex-wrap: wrap; }.activity-item { min-width: 220px; flex: 1; } }
@media (max-width: 820px) { .sidebar { width: 70px; flex-basis: 70px; padding-left: 10px; padding-right: 10px; }.sidebar-top { justify-content: center; padding: 0 0 30px; }.brand-lockup > div:last-child, .sidebar-collapse, .nav-label, .nav-item span, .nav-item b, .help-card, .sidebar-user > div:not(.avatar), .sidebar-user .icon-button { display: none; }.brand-lockup { justify-content: center; }.nav-item { justify-content: center; padding: 0; }.sidebar-user { justify-content: center; padding-left: 0; padding-right: 0; }.topbar { padding: 0 22px; }.breadcrumb { display: none; }.mobile-brand { display: flex; }.topbar-actions { margin-left: auto; }.page-shell { padding: 28px 22px 44px; }.create-layout { grid-template-columns: 1fr; }.dropzone { min-height: 270px; }.create-right { padding: 0; } }
@media (max-width: 620px) { .login-card { padding: 30px 22px 24px; border-radius: 18px; }.login-card h1 { font-size: 27px; }.stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }.stat-card { min-height: 135px; padding: 14px; }.stat-card > strong { font-size: 27px; margin: 13px 0 10px; }.stat-meta { flex-direction: column; gap: 4px; }.page-heading { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 22px; }.page-heading .primary-button { align-self: stretch; }.page-heading.compact-heading { margin-bottom: 21px; }.quick-panel, .activity-panel, .library-preview, .create-panel, .library-panel { padding: 15px; }.quick-dropzone { align-items: flex-start; flex-wrap: wrap; gap: 10px; padding: 14px; }.quick-dropzone .secondary-button { width: 100%; margin-left: 0; }.library-toolbar { align-items: stretch; flex-direction: column; }.search-box { width: 100%; }.toolbar-actions { justify-content: space-between; }.create-panel { padding: 15px; }.dropzone { min-height: 255px; padding: 18px; }.preview-state img { max-height: 190px; }.modal-card { padding-left: 20px; padding-right: 20px; }.modal-qr-wrap { width: 210px; height: 210px; }.modal-qr-wrap #qrcode, .modal-qr-wrap #qrcode img, .modal-qr-wrap #qrcode canvas { width: 180px !important; height: 180px !important; } }
.asset-thumb { width: 34px; height: 34px; flex: none; object-fit: cover; border-radius: 7px; cursor: zoom-in; }
.url-input span { display: block; max-width: 64%; overflow: hidden; text-overflow: ellipsis; }
.button-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: button-spin .7s linear infinite; }
.toggle input:disabled + span { cursor: default; opacity: .78; }
@keyframes button-spin { to { transform: rotate(360deg); } }