@media (max-width: 600px) {
  .metadata-grid,
  .audio-details-panel {
    grid-template-columns: 1fr;
  }

  .mp3-chip {
    display: none;
  }
}

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #17312f;
  --muted: #6f7f7c;
  --mint: #2f756b;
  --mint-2: #78b9aa;
  --paper: #f5f8f7;
  --glow: rgba(78, 164, 145, .18);
}

body {
  font-family: "Vazirmatn", system-ui, sans-serif;
  font-weight: 400;
  background:
    radial-gradient(circle at 83% 8%, rgba(143, 201, 186, .16), transparent 24rem),
    #f3f7f6;
}

strong, h1, h2, h3, h4 { font-weight: 540; }
button, input, textarea, select { font-family: inherit; }
button { font-weight: 520; }
.brand strong, .topbar-title strong, .studio-heading h1, .panel-heading h2, .page-heading h1 { font-weight: 570; letter-spacing: -.02em; }
.field-label, .template-info strong, .wizard-step strong { font-weight: 520; }
.field-label .optional-tag { color: #66827d; background: #edf4f2; }
.button.primary { font-weight: 560; }

.app-shell.is-locked { display: none; }
.auth-gate { position: fixed; inset: 0; z-index: 9999; display: none; min-height: 100dvh; direction: rtl; place-items: center; padding: 24px; background: radial-gradient(circle at 80% 10%, rgba(92,166,150,.2), transparent 30rem), #eef4f2; }
.auth-gate.show { display: grid; animation: authIn .4s ease both; }
.auth-panel { width: min(100%, 430px); padding: 34px; border: 1px solid rgba(50,100,91,.12); border-radius: 24px; background: rgba(255,255,255,.93); box-shadow: 0 24px 70px rgba(26,67,60,.12); backdrop-filter: blur(14px); }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.auth-brand .brand-mark { display: grid; place-items: center; width: 46px; height: 46px; color: white; border-radius: 15px; background: linear-gradient(145deg, #1b4d46, #3f8f81); box-shadow: 0 12px 28px rgba(24,78,69,.2); }
.auth-brand svg { width: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.auth-brand div { display: grid; gap: 2px; }
.auth-brand strong { font-size: 15px; }
.auth-brand small { color: #80908d; font-size: 10px; }
.auth-copy { margin-bottom: 24px; }
.auth-copy h2 { margin: 0 0 5px; color: #172c2a; font-size: 29px; font-weight: 580; }
.auth-copy p { margin: 0; color: #788783; line-height: 1.9; font-size: 13px; }
.login-form { display: grid; gap: 10px; }
.login-form > label { color: #354c49; font-size: 12px; font-weight: 570; margin-top: 4px; }
.login-input { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 15px; border: 1px solid #d8e2df; border-radius: 14px; background: rgba(255,255,255,.78); transition: border .2s, box-shadow .2s, transform .2s; }
.login-input:focus-within { border-color: #6ba99c; box-shadow: 0 0 0 4px rgba(72,150,134,.1); transform: translateY(-1px); }
.login-input svg { width: 19px; fill: none; stroke: #7c918c; stroke-width: 1.6; }
.login-input input { width: 100%; border: 0; outline: 0; background: transparent; direction: ltr; text-align: left; font-size: 14px; }
.cookie-note { margin: 8px 0 0; color: #7b8d89; font-size: 10px; text-align: center; }
.field-hint.plain { display: block; margin: 5px 0 2px; color: #7b8d89; font-size: 9px; }
.auth-submit { width: 100%; height: 52px; justify-content: center; margin-top: 5px; border-radius: 14px !important; box-shadow: 0 14px 28px rgba(31,95,84,.2); }
.auth-submit svg { width: 18px; }
.auth-submit.loading span { opacity: .55; }
.auth-error { min-height: 21px; margin: 2px 0 0; color: #b83f4a; font-size: 11px; text-align: center; }
.dev-login-button { height: 38px; color: #53716b; border: 1px dashed #afc7c1; border-radius: 11px; background: transparent; cursor: pointer; font-size: 10px; }
.auth-foot { display: flex; justify-content: center; align-items:center; gap:8px; margin-top: 22px; color: #879491; font-size: 10px; }
.auth-foot span { display: flex; align-items: center; gap: 6px; }
.auth-foot svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.auth-foot button { min-height:36px; display:flex; align-items:center; gap:5px; padding:0 10px; border:1px solid rgba(105,72,128,.15); border-radius:11px; color:#624d6c; background:#f7f2fa; cursor:pointer; font-size:10px; }

.card, .stage-panel, .preview-card { border-color: rgba(54,101,93,.1) !important; box-shadow: 0 14px 45px rgba(33,69,62,.055) !important; }
.stage-panel.active { animation: panelReveal .45s cubic-bezier(.2,.8,.2,1) both; }
.template-card, .download-card, .stat-card, .archive-card, .gallery-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.template-card:hover, .download-card:hover, .archive-card:hover, .gallery-card:hover { transform: translateY(-4px); box-shadow: 0 18px 35px rgba(28,69,61,.11); }
.wizard-step.active span:first-child { animation: softPulse 2.8s ease-in-out infinite; }
.german-date-hint { display: block; margin-top: 7px; color: #81918e; font-size: 10px; }
.german-date-hint b { direction: ltr; color: #4d6e68; font-weight: 560; }
.sidebar-footer b { color: #bce0d7; font-weight: 520; }

.audio-track-card { display: block; padding: 14px; }
.audio-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.audio-list-head > div { display: grid; gap: 2px; }
.audio-list-head strong { font-size: 12px; }
.audio-list-head span { color: #7d8c89; font-size: 9px; }
.button.compact { width: auto; height: 34px; padding: 0 12px; font-size: 10px; }
.audio-track-list { display: grid; gap: 8px; margin-top: 12px; }
.audio-track { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px; border: 1px solid #e1e8e6; border-radius: 11px; background: #f9fbfa; }
.audio-track-index { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #34766c; background: #e7f2ef; font-size: 10px; }
.audio-track-copy { min-width: 0; }
.audio-track-copy strong, .audio-track-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-track-copy strong { font-size: 10px; font-weight: 540; }
.audio-track-copy small { color: #81908d; font-size: 8px; }
.audio-track-actions { display: flex; gap: 4px; direction: ltr; }
.audio-track-actions button { width: 29px; height: 29px; border: 1px solid #dbe5e2; border-radius: 8px; color: #58736e; background: white; cursor: pointer; }
.audio-track-actions button:hover { color: #225f55; border-color: #9cc5bc; }
.audio-track-actions button:disabled { opacity: .35; cursor: default; }
.audio-track-actions .danger { color: #b4535a; }
.audio-editor { margin-top: 14px; padding: 15px; border: 1px solid #dce8e5; border-radius: 14px; background: linear-gradient(135deg,#f7fbfa,#f3f7f6); }
.audio-editor-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; margin-bottom: 13px; }
.audio-editor-head strong, .audio-editor-head small { display: block; }
.audio-editor-head strong { font-size: 11px; }
.audio-editor-head small { margin-top: 2px; color: #758683; font-size: 8px; }
.audio-editor-head > span { padding: 3px 8px; border-radius: 999px; color: #39776c; background: #e4f1ed; font-size: 8px; white-space: nowrap; }
.waveform-shell { position: relative; overflow: hidden; min-height: 150px; border: 1px solid #d8e6e2; border-radius: 15px; background: linear-gradient(180deg,#fff,#f4f9f7); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.waveform-shell::before { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: rgba(51,102,94,.09); pointer-events: none; }
#waveform-canvas { display: block; width: 100%; height: 150px; cursor: crosshair; touch-action: none; user-select: none; }
.waveform-loading { position: absolute; inset: 0; display: none; place-items: center; align-content: center; gap: 8px; color: #65817b; background: rgba(247,251,250,.88); backdrop-filter: blur(3px); font-size: 9px; }
.waveform-loading.show { display: grid; }
.waveform-loading i { width: 25px; height: 25px; border: 2px solid #d6e3e0; border-top-color: #397e72; border-radius: 50%; animation: spin .7s linear infinite; }
.waveform-times { display: flex; justify-content: space-between; align-items: center; padding: 6px 3px 12px; color: #657975; direction: ltr; font-size: 8px; }
.waveform-times b { color: #8a9996; font-weight: 450; direction: rtl; }
.audio-editor-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.audio-editor-grid > label { color: #526864; font-size: 9px; }
.audio-editor-grid > label > div { display: flex; align-items: center; gap: 8px; min-height: 38px; margin-top: 5px; padding: 0 9px; border: 1px solid #dbe5e2; border-radius: 10px; background: white; }
.audio-editor-grid input[type="number"] { width: 100%; border: 0; outline: 0; direction: ltr; }
.audio-editor-grid input[type="range"] { min-width: 0; flex: 1; accent-color: #33786c; }
.audio-editor-grid b { color: #758783; font-size: 8px; font-weight: 500; white-space: nowrap; }
.noise-strength { display: flex; align-items: center; gap: 7px; margin-top: 7px; color: #6f7f7c; font-size: 8px; }
.noise-strength input { width: 115px; accent-color: #6c4f80; }
.noise-strength b { min-width: 28px; color: #6c4f80; font-weight: 600; }
.ai-guidance { margin: -5px 0 20px; padding: 13px; border: 1px solid #e0d6e7; border-radius: 14px; background: #fbf8fc; }
.ai-guidance label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ai-guidance label strong { color: #5d416c; font-size: 10px; }
.ai-guidance label small { color: #95869b; font-size: 8px; }
.ai-guidance > div { display: flex; gap: 8px; align-items: stretch; }
.ai-guidance textarea { flex: 1; min-width: 0; resize: vertical; border: 1px solid #ded4e4; border-radius: 10px; padding: 9px 11px; outline: 0; color: #423748; background: white; font: 9px/1.9 Tahoma,Vazirmatn,sans-serif; }
.ai-guidance textarea:focus { border-color: #8a6a99; box-shadow: 0 0 0 3px rgba(111,76,130,.1); }
.ai-guidance .button { height: auto; min-width: 126px; }

.share-hub { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 18px; padding: 22px; overflow: hidden; border: 1px solid rgba(71,142,128,.17); border-radius: 20px; background: linear-gradient(125deg, #eff8f5 0%, #f8fbfa 58%, #f5f0fa 100%); position: relative; }
.share-hub::after { content: ""; position: absolute; width: 150px; height: 150px; left: -55px; bottom: -100px; border-radius: 50%; background: rgba(104,80,133,.1); }
.share-hub-copy { display: flex; align-items: center; gap: 15px; position: relative; z-index: 1; }
.share-spark { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; color: white; border-radius: 16px; background: linear-gradient(145deg, #397e72, #5aa897); box-shadow: 0 11px 22px rgba(49,126,112,.22); }
.share-spark svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.share-hub-copy div { display: grid; gap: 2px; }
.share-hub-copy small { color: #5e827b; font-size: 10px; }
.share-hub-copy strong { color: #284943; font-size: 14px; font-weight: 560; }
.share-hub-copy p { margin: 0; color: #7c8c89; font-size: 10px; }
.share-actions { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
.share-picks { display: flex !important; grid-auto-flow: column; gap: 7px !important; margin-top: 8px; }
.share-picks label { display: flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid #d5e6e1; border-radius: 999px; color: #496a64; background: rgba(255,255,255,.72); font-size: 8px; cursor: pointer; }
.share-picks input { accent-color: #2b7165; }
.share-main { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; color: white; border: 0; border-radius: 13px; background: #245f56; cursor: pointer; }
.share-main svg, .share-channel svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.share-channel { display: grid; place-items: center; width: 44px; height: 44px; color: white; border: 0; border-radius: 13px; cursor: pointer; transition: transform .2s; }
.share-channel:hover { transform: translateY(-2px) scale(1.03); }
.share-channel.telegram { background: #2aabee; }
.share-media-button { height: 44px; padding: 0 12px; border: 1px solid #cfe0dc; border-radius: 12px; color: #33675f; background: white; cursor: pointer; font-size: 9px; transition: .2s; }
.share-media-button:hover { transform: translateY(-1px); border-color: #8fb8af; }
.share-media-button.pending { color: white; border-color: #d5893f; background: #d5893f; box-shadow: 0 0 0 6px rgba(213,137,63,.13); animation: softPulse 1.5s infinite; }
.permission-fieldset { margin: 16px 0 0; padding: 12px; border: 1px solid #dfe8e6; border-radius: 14px; }
.permission-fieldset legend { padding: 0 7px; color: #42675f; font-size: 10px; }
.permission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.permission-grid label { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 8px; border: 1px solid #e5ecea; border-radius: 10px; background: #fafcfc; cursor: pointer; }
.permission-grid input { margin-top: 4px; accent-color: #2e7569; }
.permission-grid span,.permission-grid b,.permission-grid small { display: block; min-width: 0; }
.permission-grid b { color: #345c55; font-size: 9px; font-weight: 590; }
.permission-grid small { color: #83918f; font-size: 7px; line-height: 1.65; }
.modal-card { max-height: 92vh; overflow: auto; }
.permission-summary { display: block; margin-top: 4px; color: #82918e; font-size: 7px; }
.dropzone.permission-disabled { display: none; }

.audit-controls { display: flex; gap: 10px; align-items: center; }
.sensitive-toggle { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border: 1px solid #d9e4e1; border-radius: 12px; background: white; color: #647773; font-size: 11px; cursor: pointer; }
.sensitive-toggle input { display: none; }
.sensitive-toggle span { width: 28px; height: 16px; border-radius: 999px; background: #cdd9d6; position: relative; transition: .2s; }
.sensitive-toggle span::after { content: ""; position: absolute; width: 12px; height: 12px; top: 2px; right: 2px; border-radius: 50%; background: white; transition: .2s; }
.sensitive-toggle input:checked + span { background: #397f72; }
.sensitive-toggle input:checked + span::after { transform: translateX(-12px); }
.audit-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .8fr); gap: 18px; align-items: start; }
.audit-feed, .project-gallery { padding: 0 !important; overflow: hidden; }
.audit-feed-list { max-height: 720px; overflow: auto; padding: 8px 20px 20px; }
.audit-item { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: start; padding: 16px 3px; border-bottom: 1px solid #edf2f1; }
.audit-dot { width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: #55a791; box-shadow: 0 0 0 5px rgba(85,167,145,.11); }
.audit-dot.danger { background: #d75862; box-shadow: 0 0 0 5px rgba(215,88,98,.11); }
.audit-main { min-width: 0; }
.audit-main > div { display: flex; justify-content: space-between; gap: 12px; }
.audit-main strong { color: #294640; font-size: 12px; font-weight: 620; }
.audit-main time { direction: ltr; color: #899793; font-size: 9px; }
.audit-main p { margin: 5px 0 4px; color: #617571; font-size: 10px; }
.audit-main p b { color: #385e57; font-weight: 590; }
.audit-main small { display: block; overflow: hidden; color: #95a09e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; direction: rtl; }
.integrity-chip { padding: 4px 7px; color: #547e76; border-radius: 999px; background: #edf6f3; font-size: 8px; white-space: nowrap; }
.integrity-chip.danger { color: #a43b35; background: #fdecea; }
.gallery-head { padding: 20px; border-bottom: 1px solid #edf2f1; }
.gallery-head h2 { margin: 0; font-size: 15px; }
.gallery-head span { color: #8b9996; font-size: 9px; }
.project-gallery-grid { max-height: 720px; overflow: auto; padding: 14px; display: grid; gap: 12px; }
.gallery-card { overflow: hidden; border: 1px solid #e7efed; border-radius: 15px; background: white; }
.gallery-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; background: #eef3f2; }
.gallery-card > div { padding: 12px; display: grid; gap: 3px; }
.gallery-card small { color: #8a9895; font-size: 8px; }
.gallery-card strong { font-size: 11px; color: #2e4b46; }
.gallery-card p { display: -webkit-box; margin: 2px 0 0; overflow: hidden; color: #778783; font-size: 9px; line-height: 1.7; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.archive-card { overflow: hidden; border: 1px solid #e0eae7; border-radius: 20px; background: white; box-shadow: 0 12px 30px rgba(28,71,63,.055); }
.archive-cover { position: relative; overflow: hidden; aspect-ratio: 16/10; background: #edf3f1; }
.archive-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.archive-cover span { position: absolute; right: 12px; top: 12px; padding: 5px 8px; color: white; border-radius: 999px; background: rgba(25,58,53,.74); backdrop-filter: blur(8px); font-size: 8px; }
.archive-copy { padding: 16px; }
.archive-copy > small { color: #8b9896; direction: ltr; }
.archive-copy h3 { margin: 5px 0 2px; color: #2a4842; font-size: 14px; }
.archive-copy p { margin: 0 0 12px; color: #768783; font-size: 10px; }
.archive-copy > div { display: grid; gap: 9px; border-top: 1px solid #edf2f1; padding-top: 11px; }
.archive-copy > div > span { color: #527069; font-size: 9px; }
.archive-copy audio { width: 100%; height: 34px; }
.empty-state { grid-column: 1/-1; padding: 55px 20px; text-align: center; color: #7c8c89; border: 1px dashed #ccdcd8; border-radius: 18px; background: rgba(255,255,255,.6); }
.empty-state strong { color: #395a54; }
.empty-state p { margin: 5px 0 0; font-size: 11px; }
.skeleton-card, .skeleton-line { border-radius: 18px; background: linear-gradient(90deg, #edf2f1 25%, #f7f9f8 50%, #edf2f1 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
.skeleton-card { height: 280px; }
.skeleton-line { height: 90px; margin: 20px; }

.button.loading { pointer-events: none; opacity: .72; }

@keyframes authIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes panelReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes floatOrb { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-12px,18px,0); } }
@keyframes softPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(64,139,126,.12); } 50% { box-shadow: 0 0 0 10px rgba(64,139,126,0); } }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (max-width: 1100px) {
  .audit-layout { grid-template-columns: 1fr; }
  .project-gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); max-height: none; }
  .archive-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .auth-gate { padding: 14px; }
  .auth-panel { padding: 26px 22px; }
  .audio-editor-grid { grid-template-columns: 1fr; }
  .share-hub { align-items: stretch; flex-direction: column; }
  .share-actions { display: grid; grid-template-columns: 1fr 1fr; justify-content: stretch; }
  .share-main { grid-column: 1/-1; justify-content: center; }
  .share-media-button { width: 100%; }
  .ai-guidance > div { flex-direction: column; }
  .ai-guidance .button { min-height: 40px; }
  .permission-grid { grid-template-columns: 1fr; }
  .archive-grid, .project-gallery-grid { grid-template-columns: 1fr; }
  .audit-controls { align-items: stretch; flex-direction: column; }
  .audit-item { grid-template-columns: 12px 1fr; }
  .integrity-chip { display: none; }
}

@media (max-width: 520px) {
  .audio-editor { margin-inline: -5px; padding: 11px; }
  .audio-editor-head { align-items: flex-start; flex-direction: column; }
  #waveform-canvas { height: 132px; }
  .waveform-shell { min-height: 132px; }
  .waveform-times b { display: none; }
  .share-picks { align-items: stretch; flex-direction: column; }
  .share-hub { padding: 16px; }
  .share-hub-copy { align-items: flex-start; }
  .share-spark { width: 40px; height: 40px; border-radius: 12px; }
}

/* Modern app skin: soft fintech surfaces with a feminine Islamic identity */
:root {
  --ink: #211a25;
  --muted: #756d79;
  --paper: #f7f5f8;
  --primary: #702b5b;
  --primary-dark: #3b183d;
  --primary-soft: #f5e8f0;
  --accent: #e79a62;
  --accent-soft: #fff1e7;
  --purple: #792f69;
  --purple-soft: #f4e9f2;
  --line: rgba(74,49,76,.11);
  --shadow: 0 22px 60px rgba(56,29,59,.09);
  --radius: 24px;
}

html { background: #f6f3f7; }
body { background: radial-gradient(circle at 12% 8%, rgba(234,157,188,.12), transparent 24rem), radial-gradient(circle at 88% 84%, rgba(119,192,176,.11), transparent 25rem), #f6f3f7; font-weight: 430; }
body::before { content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; opacity: .22; background-image: radial-gradient(rgba(102,46,86,.12) .65px, transparent .65px); background-size: 18px 18px; mask-image: linear-gradient(to bottom, #000, transparent 65%); }
::selection { color: #fff; background: #8a3b6d; }
* { scrollbar-color: #c8abc0 transparent; scrollbar-width: thin; }

.sidebar { width: 276px; padding: 22px 17px 18px; overflow: hidden auto; background: radial-gradient(circle at 20% 0, rgba(222,126,172,.24), transparent 16rem), linear-gradient(165deg,#28172f 0%,#1c1724 55%,#102a29 130%); border-left: 1px solid rgba(255,255,255,.07); box-shadow: -18px 0 55px rgba(36,20,40,.18); }
.main-wrap { margin-right: 276px; }
.brand { position: relative; padding: 3px 5px 28px; }
.brand::after { content: ""; position: absolute; right: 60px; bottom: 17px; width: 34px; height: 2px; border-radius: 4px; background: linear-gradient(90deg,#f3b07a,transparent); }
.brand-mark { overflow: hidden; border-radius: 17px; background: linear-gradient(145deg,#74315f,#3b1e48) !important; box-shadow: 0 12px 32px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.15) !important; }
.brand-mark img { display: block; width: 100%; height: 100%; padding: 5px; object-fit: contain; }
.brand strong { font-size: 17px; font-weight: 610; }
.brand span { color: #cbbbc8; }
.nav-caption { color: #a987a0; }
.nav-separator { background: linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent); }
.nav-item { min-height: 45px; padding: 11px 13px; color: #cfc4cf; border: 1px solid transparent; font-size: 11px; }
.nav-item:hover { color: #fff; border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.07); transform: translateX(-2px); }
.nav-item.active { color: #4a2145; background: linear-gradient(135deg,#fff,#f7edf4); box-shadow: 0 14px 30px rgba(0,0,0,.2); }
.nav-item.active::before { content: ""; position: absolute; right: 6px; width: 3px; height: 20px; border-radius: 9px; background: linear-gradient(#9b4a7c,#e79a62); }
.sidebar-tip { border-color: rgba(255,255,255,.09); background: linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025)); backdrop-filter: blur(10px); }
.tip-icon { background: linear-gradient(145deg,#cf6e9e,#e6a061); box-shadow: 0 8px 18px rgba(211,103,151,.24); }
.sidebar-footer b { color: #efd6e5; }

.topbar { height: 76px; padding: 0 32px; border-bottom-color: rgba(79,45,76,.08); background: rgba(250,248,251,.78); box-shadow: 0 8px 30px rgba(62,36,64,.04); backdrop-filter: blur(22px) saturate(1.3); }
.topbar-title .eyebrow { color: #7c3968; background: #f3e6ef; }
.topbar-title strong { font-size: 15px; }
.avatar { background: linear-gradient(145deg,#7b3566,#3e214a); box-shadow: 0 9px 20px rgba(94,43,81,.22); }
.icon-button { border-color: rgba(75,48,76,.1); background: rgba(255,255,255,.82); box-shadow: 0 7px 18px rgba(61,37,62,.055); }
.profile-menu { border-color: rgba(77,44,75,.1); border-radius: 17px; box-shadow: 0 24px 60px rgba(46,25,48,.16); }

main { padding: 32px 34px 58px; }
.studio-heading,.page-heading { position: relative; isolation: isolate; padding: 10px 3px 7px; animation: headerRise .55s cubic-bezier(.2,.8,.2,1) both; }
.studio-heading::before,.page-heading::before { content: ""; position: absolute; z-index: -1; right: -12px; top: -10px; width: 120px; height: 70px; border-radius: 50%; background: radial-gradient(circle,rgba(212,116,161,.14),transparent 68%); animation: headerGlow 5s ease-in-out infinite; }
.section-kicker { color: #a84f7e; }
.studio-heading h1,.page-heading h1 { color: #261c2b; font-size: clamp(23px,2.2vw,31px); font-weight: 580; letter-spacing: -.035em; }
.studio-heading p,.page-heading p { color: #817783; }

.card,.stage-panel,.preview-card,.table-card,.settings-main,.policy-card,.audit-feed,.project-gallery { border: 1px solid rgba(88,52,84,.09) !important; border-radius: 25px !important; background: rgba(255,255,255,.84) !important; box-shadow: 0 20px 55px rgba(54,30,56,.065) !important; backdrop-filter: blur(14px); }
.wizard { overflow: hidden; position: relative; background: linear-gradient(135deg,rgba(255,255,255,.96),rgba(249,241,247,.88)) !important; }
.wizard::after { content: ""; position: absolute; left: -20px; top: -45px; width: 130px; height: 130px; border-radius: 50%; background: rgba(225,144,180,.1); pointer-events: none; }
.wizard-step.active>span { border-color: #792f69; background: linear-gradient(145deg,#8b3d70,#4f244f); box-shadow: 0 0 0 5px #f4e7ef, 0 10px 22px rgba(113,45,91,.2); }
.wizard-step.completed>span { color: #3a7568; border-color: #b6ded4; background: #e6f3ef; }
.wizard-line.completed { background: linear-gradient(90deg,#b86b96,#6db09f); }
.mini-ring { background: conic-gradient(#8a3c70 calc(var(--progress)*1%),#f0e6ed 0); }
.overall-chip { border-color: rgba(91,53,86,.09); background: rgba(255,255,255,.8); box-shadow: 0 12px 26px rgba(53,30,55,.055); }

.button { overflow: hidden; position: relative; min-height: 43px; border-radius: 13px; font-weight: 520; }
.button::after,.share-main::after { content: ""; position: absolute; top: -90%; left: -35%; width: 24%; height: 280%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent); transform: rotate(22deg); transition: left .65s ease; }
.button:hover::after,.share-main:hover::after { left: 120%; }
.button.primary { color: #fff; background: linear-gradient(135deg,#7d3366,#4b244e 60%,#284d49); box-shadow: 0 13px 27px rgba(97,40,81,.22); }
.button.primary:hover { background: linear-gradient(135deg,#914174,#592757 60%,#2d5d56); transform: translateY(-2px); box-shadow: 0 17px 33px rgba(97,40,81,.27); }
.button.secondary { color: #6b2e5a; border-color: #ead7e3; background: #f9eff5; }
.quick-download,.share-main { overflow: hidden; position: relative; background: linear-gradient(135deg,#7d3366,#3e2548) !important; box-shadow: 0 13px 27px rgba(97,40,81,.2); }
.icon-button:hover { color: #7c3568; border-color: #d7b7cb; transform: translateY(-1px) rotate(-2deg); }

.text-input,.input-wrap textarea,.content-field textarea,.date-input,.speaker-input,.filename-input,.login-input { border-color: rgba(91,58,89,.14); background: rgba(253,252,253,.88); }
.text-input:focus,.input-wrap textarea:focus,.content-field textarea:focus,.date-input:focus-within,.speaker-input:focus-within,.filename-input:focus-within { border-color: #a45c86; box-shadow: 0 0 0 4px rgba(159,80,126,.1); }
.template-card.selected { border-color: #9a4d7c; box-shadow: 0 0 0 4px #f5e8f0, 0 16px 35px rgba(86,40,73,.11); }
.selection-check { color: #71305c; }
.live-badge { color: #396f65; background: #eaf5f1; }
.audio-editor { border-color: #ead9e4; background: linear-gradient(145deg,#fff,#faf4f8); }
.waveform-shell { border-color: #e4d3de; background: linear-gradient(180deg,#fff,#faf4f8); }
.process-card { border-color: #dfd0da; background: linear-gradient(135deg,#fbf4f8,#f2f8f6); }
.progress-track i { background: linear-gradient(90deg,#8f3f72,#df8f91,#5da390); }
.share-hub { border-color: rgba(135,60,103,.13); background: linear-gradient(125deg,#f8edf4,#fff 58%,#eff8f5); }
.share-spark { background: linear-gradient(145deg,#8e3e72,#d0779c); }

.stat-grid { gap: 16px; }
.stat-card { overflow: hidden; position: relative; min-height: 96px; border-color: rgba(88,52,84,.08); background: linear-gradient(145deg,#fff,#faf6f9); }
.stat-card::after { content: ""; position: absolute; left: -34px; bottom: -40px; width: 100px; height: 100px; border-radius: 50%; background: rgba(210,114,160,.08); }
.stat-card:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 22px 45px rgba(66,34,62,.11); }
.stat-icon.green { color: #347b6c; background: linear-gradient(145deg,#e6f5f0,#d9eee8); }
.stat-icon.blue { color: #6b3b78; background: linear-gradient(145deg,#f0e8f5,#e7dbef); }
.stat-icon.orange { color: #b66a35; background: linear-gradient(145deg,#fff0e3,#fae2cc); }

.auth-gate { padding: 26px; background: radial-gradient(circle at 16% 16%,rgba(233,147,187,.34),transparent 25rem), radial-gradient(circle at 86% 88%,rgba(91,166,151,.28),transparent 27rem), linear-gradient(145deg,#24152f,#121c24); }
.auth-gate::before,.auth-gate::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.auth-gate::before { width: 280px; height: 280px; right: -80px; top: -90px; border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 0 70px rgba(255,255,255,.04); animation: floatOrb 7s ease-in-out infinite; }
.auth-gate::after { width: 190px; height: 190px; left: 5%; bottom: -90px; background: rgba(220,124,168,.1); animation: floatOrb 9s ease-in-out infinite reverse; }
.auth-layout { display: grid; grid-template-columns: minmax(290px,.9fr) minmax(360px,430px); width: min(940px,100%); min-height: 590px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 34px; background: rgba(255,255,255,.06); box-shadow: 0 38px 100px rgba(0,0,0,.32); backdrop-filter: blur(28px); animation: authLayoutIn .65s cubic-bezier(.2,.8,.2,1) both; }
.auth-visual { display: grid; place-items: center; align-content: center; gap: 4px; padding: 40px; color: #fff; text-align: center; background: radial-gradient(circle at 50% 30%,rgba(223,132,174,.22),transparent 16rem); }
.auth-visual p { margin: 34px 0 0; font-size: clamp(25px,3vw,38px); font-weight: 640; letter-spacing: -.04em; }
.auth-visual small { color: #cbbdcc; font-size: 11px; }
.auth-orbit { display: grid; place-items: center; position: relative; width: 220px; height: 220px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; animation: orbitBreathe 5s ease-in-out infinite; }
.auth-orbit::before,.auth-orbit::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.auth-orbit::before { inset: 22px; }
.auth-orbit::after { inset: 48px; }
.auth-orbit img { z-index: 2; width: 116px; height: 116px; padding: 12px; border-radius: 34px; background: linear-gradient(145deg,#7a3263,#3d1d47); box-shadow: 0 30px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.15); }
.auth-orbit span { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #f2ad79; box-shadow: 0 0 24px #eaa36e; }
.auth-orbit span:nth-child(1) { top: 14px; right: 55px; animation: dotFloat 3s ease-in-out infinite; }
.auth-orbit span:nth-child(2) { left: 12px; bottom: 62px; width: 7px; height: 7px; background: #db8eb5; animation: dotFloat 4s ease-in-out infinite reverse; }
.auth-orbit span:nth-child(3) { right: 7px; bottom: 42px; width: 5px; height: 5px; background: #77baa9; animation: dotFloat 3.6s ease-in-out infinite; }
.auth-panel { width: auto; padding: 42px 40px; border: 0; border-radius: 32px 0 0 32px; background: rgba(255,255,255,.96); box-shadow: -25px 0 65px rgba(0,0,0,.12); backdrop-filter: blur(24px); }
.auth-brand .brand-mark { width: 54px; height: 54px; border-radius: 18px; }
.auth-brand .brand-mark img { width: 100%; padding: 5px; }
.auth-copy h2 { color: #291d2b; font-size: 32px; }
.auth-copy p { color: #817683; }
.login-input { height: 55px; border-radius: 16px; }
.login-input:focus-within { border-color: #a45583; box-shadow: 0 0 0 4px rgba(153,72,120,.11); }
.auth-submit { border: 0 !important; background: linear-gradient(135deg,#823668,#4d244e 70%,#244943) !important; }
.password-warning { display: block; margin-top: 5px; color: #9b7184; font-size: 8px; }

.audit-item { grid-template-columns: 12px minmax(0,1fr) auto; padding: 18px 3px; }
.audit-title-row { display: flex; justify-content: space-between; gap: 12px; }
.audit-user { display: flex; align-items: center; gap: 7px; margin: 5px 0 10px !important; }
.audit-user span { color: #9b8f9c; font-size: 8px; direction: ltr; }
.audit-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-bottom: 9px; }
.audit-facts>span { min-width: 0; overflow: hidden; padding: 7px 9px; color: #5f5661; border: 1px solid rgba(94,57,89,.08); border-radius: 10px; background: #faf7fa; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.audit-facts i { display: block; color: #a1517f; font-size: 7px; font-style: normal; }
.audit-main small { white-space: normal; line-height: 1.8; }
.integrity-chip { color: #6e3260; background: #f6eaf2; }

/* Guided Telegram sharing */
.share-hub { display: grid; gap: 15px; align-items: stretch; padding: 24px; }
.share-hub-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; z-index: 1; }
.share-hub-copy { min-width: 250px; }
.share-destinations { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 310px; }
.share-destination { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 9px; padding: 10px 11px; color: #6e6370; border: 1px solid #eadfe7; border-radius: 15px; background: rgba(255,255,255,.75); cursor: pointer; text-align: right; transition: transform .2s, border-color .2s, box-shadow .2s; }
.share-destination:hover { transform: translateY(-2px); }
.share-destination>span { display: grid; grid-row: 1/3; place-items: center; width: 34px; height: 34px; color: white; border-radius: 11px; }
.share-destination svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.share-destination.telegram>span { background: linear-gradient(145deg,#32aee8,#1687cb); }
.share-destination b { color: #342936; font-size: 10px; }
.share-destination small { color: #9a8e9a; font-size: 7px; }
.share-destination.active { border-color: #a75684; box-shadow: 0 0 0 3px rgba(148,66,116,.1),0 10px 25px rgba(71,35,66,.08); }
.share-picks { justify-self: start; margin: 0 !important; position: relative; z-index: 1; }
.share-flow { display: grid; grid-template-columns: minmax(0,1fr) 32px minmax(0,1fr); align-items: center; position: relative; z-index: 1; }
.share-step { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 92px; padding: 13px; border: 1px solid #eadfe7; border-radius: 17px; background: rgba(255,255,255,.84); transition: opacity .25s,border-color .25s,transform .25s,box-shadow .25s; }
.share-step-number { display: grid; place-items: center; width: 38px; height: 38px; color: #7f3768; border-radius: 13px; background: #f6eaf2; font-size: 12px; font-weight: 700; }
.share-step small,.share-step strong,.share-step p { display: block; }
.share-step small { color: #a05d84; font-size: 7px; }
.share-step strong { color: #352a36; font-size: 10px; }
.share-step p { margin: 2px 0 0; color: #948995; font-size: 7px; line-height: 1.7; }
.share-step.active { border-color: #b65f91; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(115,47,94,.1); }
.share-step.locked { opacity: .52; }
.share-step.done { border-color: #73b59e; background: #f3faf7; }
.share-step.done .share-step-number { color: white; background: #3d9a79; }
.share-step.done .share-step-number::before { content: "✓"; }
.share-step.done .share-step-number { font-size: 0; }
.share-flow-line { height: 2px; background: repeating-linear-gradient(90deg,#d7c5d1 0 5px,transparent 5px 9px); }
.share-flow-line.done { background: #69aa94; }
.share-media-button:disabled { color: #a89eaa; border-color: #ebe5e9; background: #f5f2f4; cursor: not-allowed; transform: none; }
.share-media-button.completed { color: #267a60; border-color: #b7dfd0; background: #eaf7f2; }
.share-guide { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; color: #65445b; border-radius: 12px; background: rgba(255,255,255,.68); font-size: 8px; position: relative; z-index: 1; }
.share-guide span::before { content: "←"; margin-left: 7px; color: #b15387; font-weight: 700; }
.share-reset { padding: 5px 9px; color: #74335f; border: 1px solid #dec5d5; border-radius: 9px; background: white; cursor: pointer; font-size: 8px; }
.share-actions { justify-content: flex-end; }
.share-main { min-width: 190px; justify-content: center; }
.share-api-note { margin: -4px 0 0; color: #9b8493; font-size: 7px; line-height: 1.8; position: relative; z-index: 1; }

.database-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.database-stat { display: flex; align-items: center; gap: 12px; min-height: 98px; padding: 17px; }
.database-stat>span { display: grid; place-items: center; width: 42px; height: 42px; color: #8b3b6d; border-radius: 14px; background: #f7eaf2; font-size: 17px; }
.database-stat small,.database-stat strong { display: block; }
.database-stat small { color: #958895; font-size: 8px; }
.database-stat strong { color: #332735; font-size: 19px; }
.database-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); gap: 16px; }
.database-projects,.database-tools { padding: 20px; }
.database-list { display: grid; gap: 8px; margin-top: 14px; }
.database-project { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid #eee5eb; border-radius: 13px; background: #fff; }
.database-project strong,.database-project small { display: block; }
.database-project strong { color: #3d303e; font-size: 10px; }
.database-project small { color: #9b8e9b; font-size: 7px; }
.danger-mini { padding: 7px 10px; color: #a43952; border: 1px solid #edcbd3; border-radius: 9px; background: #fff5f7; cursor: pointer; font-size: 8px; }
.database-tool { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid #eee8ec; }
.database-tool:last-child { border: 0; }
.database-tool>span { display: grid; place-items: center; width: 36px; height: 36px; color: #784060; border-radius: 11px; background: #f7edf3; }
.database-tool strong,.database-tool small { display: block; }
.database-tool strong { font-size: 9px; }
.database-tool small { color: #998e99; font-size: 7px; }
.database-empty { padding: 35px 10px; color: #958895; text-align: center; font-size: 9px; }
.database-confirm-copy { margin: 0 0 12px; color: #7d707e; font-size: 9px; line-height: 1.9; }
.database-confirm-copy strong { color: #9d314d; }

/* Clearly visible moving fintech accents around the main actions */
.button.primary::before,.share-main::before,.quick-download::before,.auth-submit::before {
  content: "";
  position: absolute;
  inset: 1px;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--orbit-angle),transparent 0 16%,#ffb275 24%,#f278b6 38%,transparent 48% 69%,#6ee0c2 80%,transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: actionOrbit 3s linear infinite;
}
.button.primary:hover::before,.share-main:hover::before,.quick-download:hover::before { animation-duration: 1.35s; filter: drop-shadow(0 0 5px rgba(239,116,179,.62)); }
.button.primary:disabled::before,.share-main:disabled::before { display: none; }
.nav-icon { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.nav-item:hover .nav-icon { transform: rotate(-7deg) scale(1.12); }
.view.active > * { animation: viewReveal .48s cubic-bezier(.2,.8,.2,1) both; }
.view.active > *:nth-child(2) { animation-delay: .06s; }
.view.active > *:nth-child(3) { animation-delay: .1s; }

/* Readable session-based activity report */
.audit-layout { grid-template-columns: minmax(0,1.55fr) minmax(360px,.75fr); }
.audit-feed-list { display: grid; gap: 15px; max-height: 900px; padding: 12px 18px 22px; }
.audit-session-card { overflow: hidden; padding: 18px; border: 1px solid rgba(104,59,96,.11); border-radius: 20px; background: linear-gradient(145deg,#fff,#fcf8fb); box-shadow: 0 12px 30px rgba(62,31,59,.055); }
.audit-session-card>header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid #eee6ec; }
.audit-session-user { display: flex; align-items: center; gap: 11px; min-width: 0; }
.audit-session-user>span { display: grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px; color: #fff; border-radius: 15px; background: linear-gradient(145deg,#914071,#3c3a57); box-shadow: 0 9px 20px rgba(111,47,90,.2); font-size: 15px; }
.audit-session-user strong,.audit-session-user small { display: block; }
.audit-session-user strong { color: #332735; font-size: 13px; }
.audit-session-user small { color: #958a96; font-size: 9px; direction: rtl; }
.audit-session-duration { min-width: 145px; padding: 10px 13px; border: 1px solid #eadde6; border-radius: 14px; background: #faf3f8; text-align: center; }
.audit-session-duration small,.audit-session-duration strong,.audit-session-duration span { display: block; }
.audit-session-duration small { color: #a35a83; font-size: 8px; }
.audit-session-duration strong { color: #622651; font-size: 15px; }
.audit-session-duration span { color: #9c909b; font-size: 7px; }
.audit-session-card .audit-facts { margin: 14px 0; }
.audit-session-card .audit-facts>span { overflow: visible; min-height: 53px; padding: 9px 11px; font-size: 10px; line-height: 1.6; text-overflow: initial; white-space: normal; }
.audit-session-card .audit-facts i { margin-bottom: 2px; font-size: 8px; }
.audit-actions-head { display: flex; align-items: center; justify-content: space-between; margin: 15px 1px 8px; }
.audit-actions-head strong { color: #4a3648; font-size: 10px; }
.audit-actions-head span { color: #a396a2; font-size: 8px; }
.audit-action-timeline { display: grid; gap: 0; max-height: 290px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.audit-action-timeline li { display: grid; grid-template-columns: 67px 13px minmax(0,1fr); align-items: start; position: relative; min-height: 48px; }
.audit-action-timeline li::before { content: ""; grid-column: 2; width: 9px; height: 9px; margin-top: 7px; border: 2px solid #fff; border-radius: 50%; background: #65a995; box-shadow: 0 0 0 2px #cce5dd; }
.audit-action-timeline li::after { content: ""; position: absolute; top: 18px; right: 72px; bottom: -7px; width: 1px; background: #e3dbe1; }
.audit-action-timeline li:last-child::after { display: none; }
.audit-action-timeline li.danger::before { background: #d75862; box-shadow: 0 0 0 2px #f0c8ce; }
.audit-action-timeline time { grid-column: 1; grid-row: 1; padding: 3px 0; color: #9a8e99; font-size: 8px; direction: ltr; }
.audit-action-timeline div { grid-column: 3; grid-row: 1; padding: 0 8px 10px 0; }
.audit-action-timeline strong,.audit-action-timeline small { display: block; }
.audit-action-timeline strong { color: #423441; font-size: 10px; }
.audit-action-timeline small { color: #968b96; font-size: 8px; }
.audit-session-card>footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 13px; padding-top: 12px; border-top: 1px solid #eee7ec; color: #978c97; font-size: 8px; }
.audit-session-card>footer .integrity-chip { margin-right: auto; }
.project-gallery-grid { max-height: 835px; }
.gallery-card img { aspect-ratio: 1; min-height: 230px; object-fit: cover; }
.gallery-card div { padding: 13px; }
.gallery-card strong { font-size: 11px; }
.gallery-card p { max-height: 74px; font-size: 9px; line-height: 1.8; }

/* Detailed visit analytics */
.analytics-heading { align-items: center; }
.analytics-range { display: flex; align-items: center; gap: 5px; padding: 5px; border: 1px solid rgba(92,53,87,.1); border-radius: 15px; background: rgba(255,255,255,.8); box-shadow: 0 12px 30px rgba(62,32,59,.05); }
.analytics-range>button:not(.icon-button) { min-height: 34px; padding: 0 12px; color: #8d7f8c; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font-size: 9px; }
.analytics-range>button.active { color: #fff; background: linear-gradient(135deg,#8b3b6e,#4e294f); box-shadow: 0 7px 16px rgba(112,43,89,.2); }
.analytics-range .icon-button { width: 34px; height: 34px; min-height: 34px; }
.analytics-live-strip { display: grid; grid-template-columns: 1.1fr repeat(3,1fr) auto; align-items: center; gap: 1px; margin-bottom: 17px; padding: 7px; overflow: hidden; }
.analytics-live-strip>div { display: flex; align-items: center; gap: 9px; min-height: 54px; padding: 8px 15px; border-left: 1px solid #eee7ec; }
.analytics-live-strip>div:nth-child(n+2) { display: grid; gap: 0; }
.analytics-live-strip>div:nth-child(4) { border-left: 0; }
.analytics-live-strip i { width: 9px; height: 9px; border-radius: 50%; background: #42af83; box-shadow: 0 0 0 6px rgba(66,175,131,.12); animation: analyticsLive 1.8s ease-in-out infinite; }
.analytics-live-strip small,.analytics-live-strip strong { display: block; }
.analytics-live-strip small { color: #938792; font-size: 8px; }
.analytics-live-strip strong { color: #342735; font-size: 17px; }
.analytics-live-strip>span { padding: 0 12px; color: #a195a0; font-size: 8px; white-space: nowrap; }
.analytics-kpis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin-bottom: 17px; }
.analytics-kpi { overflow: hidden; position: relative; min-height: 142px; padding: 17px; }
.analytics-kpi::after { content: ""; position: absolute; left: -27px; bottom: -38px; width: 115px; height: 115px; border-radius: 50%; background: var(--kpi-glow,rgba(158,72,127,.09)); }
.analytics-kpi>div { display: flex; align-items: center; gap: 8px; }
.analytics-kpi>div>span { display: grid; place-items: center; width: 32px; height: 32px; color: var(--kpi-color,#7f3568); border-radius: 11px; background: var(--kpi-bg,#f7eaf2); font-size: 14px; }
.analytics-kpi small { color: #8f838e; font-size: 9px; }
.analytics-kpi>strong { display: block; position: relative; z-index: 1; margin-top: 11px; color: #302431; font-size: clamp(23px,2.2vw,32px); font-weight: 610; letter-spacing: -.03em; }
.analytics-kpi>p { position: relative; z-index: 1; min-height: 20px; margin: 2px 0 0; font-size: 8px; }
.analytics-kpi .up { color: #2d906d; }.analytics-kpi .down { color: #c05063; }.analytics-kpi .neutral { color: #9b909a; }
.analytics-kpi.mint { --kpi-color:#267d68;--kpi-bg:#e5f5ef;--kpi-glow:rgba(72,170,140,.1); }
.analytics-kpi.blue { --kpi-color:#4d568e;--kpi-bg:#ececf8;--kpi-glow:rgba(92,99,171,.09); }
.analytics-kpi.orange { --kpi-color:#ad6938;--kpi-bg:#fff0e3;--kpi-glow:rgba(223,139,76,.1); }
.analytics-kpi.rose { --kpi-color:#a54d68;--kpi-bg:#f9e9ee;--kpi-glow:rgba(193,81,113,.09); }
.analytics-kpi.violet { --kpi-color:#713b89;--kpi-bg:#f0e8f5;--kpi-glow:rgba(125,67,155,.09); }
.analytics-main-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(300px,.55fr); gap: 15px; margin-bottom: 15px; }
.analytics-chart-card,.analytics-hours-card,.analytics-breakdown { padding: 20px; }
.analytics-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.analytics-card-head h2,.analytics-card-head span { display: block; }
.analytics-card-head h2 { margin: 0; color: #362a37; font-size: 13px; font-weight: 590; }
.analytics-card-head>div>span { color: #998d98; font-size: 8px; }
.chart-legend { display: flex; align-items: center; gap: 12px; }
.chart-legend span { color: #8f838e; font-size: 8px; }
.chart-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 5px; border-radius: 50%; background: #9a4778; }
.chart-legend .sessions::before { background: #e6a064; }
.analytics-chart { min-height: 285px; }
.analytics-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.analytics-grid line { stroke: #ece5ea; stroke-width: 1; stroke-dasharray: 4 5; }
.analytics-grid text { fill: #a398a2; font-size: 8px; text-anchor: end; }
.analytics-session-bars rect { fill: #e8a16d; opacity: .42; }
.analytics-area { fill: url(#analytics-area); }
.analytics-view-line { fill: none; stroke: #8f3f72; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.analytics-view-dots circle { fill: #fff; stroke: #8f3f72; stroke-width: 2; }
.analytics-axis-labels text { fill: #9e929c; font-size: 8px; text-anchor: middle; }
.hour-heatmap { display: grid; grid-template-columns: repeat(6,1fr); gap: 7px; direction: ltr; }
.hour-heatmap>span { display: grid; place-items: center; min-height: 48px; padding: 5px; color: #6e5968; border: 1px solid rgba(112,58,99,.08); border-radius: 11px; background: #fbf7fa; }
.hour-heatmap b,.hour-heatmap i { display: block; font-style: normal; }
.hour-heatmap b { font-size: 9px; }.hour-heatmap i { opacity: .78; font-size: 7px; }
.heatmap-scale { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 11px; color: #9d929c; font-size: 7px; }
.heatmap-scale i { width: 18px; height: 7px; border-radius: 3px; background: #f6edf3; }.heatmap-scale i:nth-of-type(2){background:#e4c4d7}.heatmap-scale i:nth-of-type(3){background:#bf7fa5}.heatmap-scale i:nth-of-type(4){background:#87406d}
.analytics-breakdown-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.analytics-breakdown.wide { grid-column: 1/-1; }
.metric-bars { display: grid; gap: 11px; }
.metric-bar-row>div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.metric-bar-row strong { overflow: hidden; color: #493b49; font-size: 9px; font-weight: 540; text-overflow: ellipsis; white-space: nowrap; }
.metric-bar-row span { color: #9b909a; font-size: 8px; white-space: nowrap; }
.metric-bar-row>i { display: block; height: 7px; margin-top: 5px; overflow: hidden; border-radius: 9px; background: #f0e9ee; }
.metric-bar-row>i>b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8b3c6e,#d2799c,#66a995); animation: metricGrow .7s cubic-bezier(.2,.8,.2,1) both; }
.metric-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; padding-top: 13px; border-top: 1px solid #eee7ec; }
.metric-tags>span { padding: 5px 8px; color: #756875; border: 1px solid #e9dfe6; border-radius: 9px; background: #fcf9fb; font-size: 8px; }
.metric-tags b { color: #863a6b; }
.metric-action-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.metric-action-grid>div { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 47px; padding: 9px 11px; border: 1px solid #eee4eb; border-radius: 12px; background: linear-gradient(145deg,#fff,#fbf7fa); }
.metric-action-grid span { color: #655967; font-size: 8px; }.metric-action-grid strong { color: #7d3565; font-size: 13px; }
.analytics-empty { display: grid; min-height: 74px; place-items: center; color: #a196a0; font-size: 9px; }
.analytics-visits-card { margin-top: 15px; padding: 20px; }
.analytics-visits-head { align-items: flex-start; }
.analytics-visits-head>span { padding: 5px 9px; color: #806d7c; border: 1px solid #eee2eb; border-radius: 9px; background: #fcf8fb; font-size: 8px; white-space: nowrap; }
.analytics-visits-table-wrap { overflow-x: auto; border: 1px solid #eee5ec; border-radius: 14px; background: #fff; }
.analytics-visits-table { width: 100%; min-width: 930px; border-collapse: collapse; direction: rtl; }
.analytics-visits-table th { padding: 11px 12px; color: #8b7c89; border-bottom: 1px solid #eee5ec; background: #fcf9fb; font-size: 8px; font-weight: 650; text-align: right; white-space: nowrap; }
.analytics-visits-table td { padding: 12px; color: #554756; border-bottom: 1px solid #f2ebf1; font-size: 9px; line-height: 1.65; vertical-align: top; }
.analytics-visits-table tbody tr:last-child td { border-bottom: 0; }
.analytics-visits-table tbody tr:hover { background: #fdf9fc; }
.analytics-visits-table td strong,.analytics-visits-table td small { display: block; }
.analytics-visits-table td strong { color: #3d2e3d; font-size: 10px; font-weight: 600; }
.analytics-visits-table td small { color: #968995; font-size: 8px; }
.analytics-visits-table td .analytics-visit-muted { color: #a398a2; }
.analytics-visit-status.active { color: #238467!important; }
.analytics-visit-status.ended { color: #897c89!important; }
.analytics-visit-status.open { color: #9b6b3f!important; }
.analytics-visits-empty { height: 90px; color: #a196a0!important; text-align: center; }
.analytics-visits-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; color: #8f818d; font-size: 8px; }
.analytics-visits-pagination>div { display: flex; gap: 7px; }
.analytics-visits-pagination .button { min-height: 35px; padding-inline: 12px; font-size: 9px; }

/* Real template library and position editor */
.template-library-intro { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; padding: 17px 19px; }
.template-library-intro>span { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; color: #fff; border-radius: 14px; background: linear-gradient(145deg,#9a4778,#d9829e); box-shadow: 0 10px 24px rgba(151,62,113,.22); }
.template-library-intro strong,.template-library-intro p { display: block; }
.template-library-intro strong { color: #382b39; font-size: 11px; }
.template-library-intro p { margin: 2px 0 0; color: #8e838f; font-size: 9px; }
.template-library-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.template-library-card { overflow: hidden; padding: 0; transition: transform .25s,box-shadow .25s,border-color .25s; }
.template-library-card:hover { transform: translateY(-5px); box-shadow: 0 25px 50px rgba(66,32,62,.12) !important; }
.template-library-card.selected { border-color: #a75181 !important; box-shadow: 0 0 0 4px #f4e5ee,0 20px 48px rgba(70,31,62,.1) !important; }
.template-library-cover { overflow: hidden; position: relative; aspect-ratio: 1; background: #eee8ed; }
.template-library-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.template-library-cover>span { position: absolute; right: 12px; top: 12px; padding: 5px 9px; color: #fff; border: 1px solid rgba(255,255,255,.24); border-radius: 9px; background: rgba(37,24,40,.65); backdrop-filter: blur(10px); font-size: 8px; }
.template-library-copy { padding: 15px; }
.template-library-copy>small { color: #a04e7c; font-size: 8px; }
.template-library-copy h3 { margin: 3px 0 0; color: #362a37; font-size: 14px; }
.template-library-copy p { min-height: 33px; margin: 3px 0 13px; color: #928793; font-size: 9px; }
.template-library-copy>div { display: flex; gap: 8px; }
.template-library-copy .button { flex: 1; }
.template-modal-card { width: min(1120px,96vw); }
.template-builder-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(340px,.9fr); gap: 22px; }
.template-file-picker { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 9px; border: 1px dashed #d9bdcf; border-radius: 13px; background: #fcf7fa; cursor: pointer; }
.template-file-picker input { position: absolute; opacity: 0; pointer-events: none; }
.template-file-picker>span { padding: 7px 10px; color: #fff; border-radius: 9px; background: #7f3567; font-size: 9px; }
.template-file-picker small { overflow: hidden; color: #8e818e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.zone-editors { display: grid; gap: 8px; margin-top: 14px; }
.zone-editor { display: grid; grid-template-columns: 95px repeat(6,minmax(62px,1fr)); align-items: center; gap: 7px; padding: 10px; border: 1px solid #eee3ea; border-radius: 13px; background: #fff; }
.zone-editor>div { display: flex; align-items: center; gap: 6px; }
.zone-editor strong { font-size: 9px; }
.zone-dot { width: 7px; height: 7px; border-radius: 50%; background: #823967; }
.zone-dot.date { background: #c61f35; }.zone-dot.speaker { background: #396e63; }
.zone-editor label { color: #958995; font-size: 7px; }
.zone-editor input[type="range"] { display: block; width: 100%; accent-color: #8a3b6e; }
.zone-editor input[type="color"] { display: block; width: 100%; height: 24px; padding: 0; border: 0; background: transparent; }
.zone-editor select { display: block; width: 100%; height: 26px; border: 1px solid #e5dbe2; border-radius: 7px; background: white; font-size: 8px; }
.template-builder-preview { position: sticky; top: 0; align-self: start; }
.template-preview-canvas { overflow: hidden; position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border: 1px solid #ded2da; border-radius: 20px; background: linear-gradient(145deg,#f4edf2,#eee7ec); box-shadow: 0 18px 45px rgba(66,34,61,.1); }
.template-preview-canvas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.template-preview-empty { color: #988d97; font-size: 10px; }
.template-preview-canvas>[data-preview-zone] { position: absolute; z-index: 2; line-height: 1.45; text-shadow: 0 1px 3px rgba(255,255,255,.5); pointer-events: none; }
.template-builder-preview>p { margin: 9px 0 0; color: #998d98; font-size: 8px; text-align: center; }

@keyframes headerRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes headerGlow { 0%,100% { transform: scale(.92); opacity: .65; } 50% { transform: scale(1.14); opacity: 1; } }
@keyframes authLayoutIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes orbitBreathe { 0%,100% { transform: scale(.96) rotate(-2deg); } 50% { transform: scale(1.03) rotate(2deg); } }
@keyframes dotFloat { 0%,100% { transform: translateY(-5px); opacity: .65; } 50% { transform: translateY(7px); opacity: 1; } }
@property --orbit-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes actionOrbit { to { --orbit-angle: 1turn; } }
@keyframes viewReveal { from { opacity: 0; transform: translateY(9px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes analyticsLive { 0%,100% { box-shadow: 0 0 0 4px rgba(66,175,131,.1); } 50% { box-shadow: 0 0 0 9px rgba(66,175,131,0); } }
@keyframes metricGrow { from { width: 0; } }

@media (max-width: 1000px) {
  .sidebar { width: 244px; }
  .main-wrap { margin-right: 244px; }
  main { padding-inline: 22px; }
  .audit-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .database-grid { grid-template-columns: 1fr 1fr; }
  .database-layout { grid-template-columns: 1fr; }
  .template-library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .template-builder-layout { grid-template-columns: 1fr; }
  .template-builder-preview { position: static; order: -1; max-width: 520px; margin: 0 auto; }
  .zone-editor { grid-template-columns: 80px repeat(3,minmax(70px,1fr)); }
  .analytics-main-grid { grid-template-columns: 1fr; }
  .analytics-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metric-action-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 860px) {
  .sidebar { width: min(86vw,310px); }
  .main-wrap { margin-right: 0; }
  .auth-layout { grid-template-columns: minmax(0,1fr) minmax(340px,410px); }
  .auth-visual { padding: 24px; }
  .auth-orbit { width: 180px; height: 180px; }
  .auth-orbit img { width: 96px; height: 96px; }
}

@media (max-width: 720px) {
  .auth-gate { align-items: stretch; padding: 12px; overflow: auto; }
  .auth-layout { display: block; width: min(100%,480px); min-height: 0; margin: auto; border-radius: 28px; }
  .auth-visual { display: none; }
  .auth-panel { padding: 30px 25px; border-radius: 27px; }
  .auth-brand { margin-bottom: 25px; }
  .topbar { height: 66px; padding: 0 14px; }
  main { padding: 18px 12px 42px; }
  .studio-heading,.page-heading { padding-inline: 4px; }
  .card,.stage-panel,.preview-card { border-radius: 19px !important; }
  .audit-facts { grid-template-columns: 1fr 1fr; }
  .table-card { border-radius: 18px !important; }
  .button,.icon-button,.nav-item { min-height: 44px; }
  .share-hub-head { align-items: stretch; flex-direction: column; }
  .share-destinations { min-width: 0; width: 100%; }
  .share-flow { grid-template-columns: 1fr; gap: 7px; }
  .share-flow-line { width: 2px; height: 18px; margin: -5px 30px; }
  .database-grid { grid-template-columns: 1fr 1fr; }
  .audit-layout { grid-template-columns: 1fr; }
  .audit-feed-list { max-height: none; }
  .template-library-grid { grid-template-columns: 1fr 1fr; }
  .analytics-live-strip { grid-template-columns: repeat(4,1fr); }
  .analytics-live-strip>span { grid-column: 1/-1; padding: 5px 12px; text-align: center; }
}

@media (max-width: 460px) {
  .auth-panel { padding: 27px 20px; }
  .auth-copy h2 { font-size: 28px; }
  .auth-brand .brand-mark { width: 48px; height: 48px; }
  .studio-heading,.page-heading { align-items: flex-start; flex-direction: column; }
  .studio-heading h1,.page-heading h1 { font-size: 22px; }
  .page-heading>.button { width: 100%; }
  .audit-facts { grid-template-columns: 1fr; }
  .audit-title-row { align-items: flex-start; flex-direction: column; gap: 2px; }
  .audio-track { grid-template-columns: 30px minmax(0,1fr); }
  .audio-track-actions { grid-column: 1/-1; justify-content: flex-end; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal-card { width: 100%; max-height: 92dvh; border-radius: 25px 25px 0 0; padding: 19px 16px; }
  .share-hub { padding: 16px; }
  .share-destinations { grid-template-columns: 1fr; }
  .share-step { grid-template-columns: 34px minmax(0,1fr); }
  .share-step .share-media-button { grid-column: 1/-1; width: 100%; }
  .share-guide { align-items: flex-start; flex-direction: column; }
  .share-actions,.share-main { width: 100%; }
  .database-grid { grid-template-columns: 1fr; }
  .database-stat { min-height: 82px; }
  .database-project { align-items: stretch; grid-template-columns: 1fr; }
  .danger-mini { width: 100%; min-height: 42px; }
  .template-library-grid { grid-template-columns: 1fr; }
  .template-library-intro { align-items: flex-start; }
  .template-library-copy>div { align-items: stretch; flex-direction: column; }
  .audit-session-card { padding: 14px; }
  .audit-session-card>header { align-items: stretch; flex-direction: column; }
  .audit-session-duration { min-width: 0; text-align: right; }
  .audit-session-card .audit-facts { grid-template-columns: 1fr; }
  .audit-session-card>footer { align-items: flex-start; flex-direction: column; }
  .audit-session-card>footer .integrity-chip { margin-right: 0; }
  .zone-editor { grid-template-columns: 1fr 1fr; }
  .zone-editor>div { grid-column: 1/-1; }
  .analytics-range { width: 100%; }
  .analytics-range>button:not(.icon-button) { flex: 1; }
  .analytics-live-strip { grid-template-columns: 1fr 1fr; }
  .analytics-live-strip>div { border: 0; }
  .analytics-live-strip>div:first-child { grid-column: 1/-1; }
  .analytics-kpis,.analytics-breakdown-grid { grid-template-columns: 1fr; }
  .analytics-breakdown.wide { grid-column: auto; }
  .metric-action-grid { grid-template-columns: 1fr 1fr; }
  .analytics-chart-card,.analytics-hours-card,.analytics-breakdown { padding: 15px; }
  .analytics-visits-card { padding: 15px; }
  .analytics-visits-head { align-items: stretch; flex-direction: column; }
  .analytics-visits-head>span { align-self: flex-start; }
  .analytics-visits-pagination { align-items: stretch; flex-direction: column; }
  .analytics-visits-pagination>div { width: 100%; }
  .analytics-visits-pagination .button { flex: 1; }
  .analytics-chart { overflow-x: auto; }
  .analytics-chart svg { width: 720px; max-width: none; }
  .hour-heatmap { grid-template-columns: repeat(4,1fr); }
}

@media (max-width: 380px) {
  .auth-gate { padding: 8px; }
  .auth-panel { padding: 24px 16px; }
  .auth-brand>div strong { font-size: 13px; }
  main { padding-inline: 8px; }
  .stage-panel,.preview-card,.card { padding-inline: 13px !important; }
  .wizard-progress { gap: 4px; }
  .wizard-node span { font-size: 7px; }
  .modal-actions { grid-template-columns: 1fr; }
  .modal-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Guided mobile flow and administrator prompt editor */
.mobile-flow-status { display:none; }
.stage-choice-actions { align-items:center; }
.stage-choice-actions>span { color:var(--muted); font-family:Tahoma,sans-serif; font-size:13px; line-height:1.8; }
.ai-prompt-card { margin-top:20px; padding:24px; }
.ai-prompt-head { display:flex; align-items:flex-start; gap:12px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.ai-prompt-head h2 { margin:3px 0 2px; font-size:16px; font-weight:540; }
.ai-prompt-head p { margin:0; color:var(--muted); font-family:Tahoma,sans-serif; font-size:9px; line-height:1.9; }
.ai-prompt-fields { display:grid; grid-template-columns:1fr 1fr; gap:15px; padding-top:18px; }
.ai-prompt-fields label { display:grid; gap:7px; }
.ai-prompt-fields label>span { display:flex; justify-content:space-between; gap:8px; font-size:11px; font-weight:520; }
.ai-prompt-fields label small { color:var(--muted); font-family:Tahoma,sans-serif; font-size:8px; font-weight:400; }
.ai-prompt-fields textarea { min-height:110px; width:100%; resize:vertical; padding:12px; border:1px solid var(--line); border-radius:13px; outline:none; background:#fff; color:var(--ink); font-size:11px; line-height:2; }
.ai-prompt-fields textarea:focus { border-color:#a45c86; box-shadow:0 0 0 4px rgba(159,80,126,.1); }
.ai-prompt-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding-top:14px; }
.ai-prompt-actions .button { min-height:39px; }
#ai-prompt-status { color:var(--success); font-family:Tahoma,sans-serif; font-size:9px; }
@media (max-width:620px) {
  .mobile-flow-status { display:flex; align-items:center; gap:10px; margin:10px 0 14px; padding:10px 12px; border:1px solid rgba(116,50,93,.12); border-radius:16px; background:linear-gradient(110deg,#fff7fb,#f2faf7); box-shadow:0 10px 26px rgba(76,37,70,.06); }
  .mobile-flow-mark { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; color:#fff; border-radius:11px; background:linear-gradient(145deg,#9a4b79,#4f7f75); box-shadow:0 8px 17px rgba(94,43,83,.17); animation:softPulse 2.6s ease-in-out infinite; }
  .mobile-flow-status div { min-width:0; display:grid; gap:1px; }
  .mobile-flow-status small { color:#97758c; font-family:Tahoma,sans-serif; font-size:8px; }
  .mobile-flow-status strong { overflow:hidden; color:#493141; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-flow-hint { margin-right:auto; color:#5a887d; font-family:Tahoma,sans-serif; font-size:8px; white-space:nowrap; }
  .ai-prompt-card { padding:17px 14px; }
  .ai-prompt-fields { grid-template-columns:1fr; }
  .ai-prompt-actions { display:grid; grid-template-columns:1fr; }
  .ai-prompt-actions .button { width:100%; }
  .wizard { gap:8px; padding:11px!important; scroll-snap-type:x mandatory; }
  .wizard-step { min-width:112px!important; flex-basis:112px!important; scroll-snap-align:center; }
  .wizard-step div { display:block!important; }
  .wizard-step div strong { font-size:12px; line-height:1.5; }
  .wizard-step div small { display:none!important; }
  .wizard-line { min-width:16px!important; flex-basis:16px!important; }
  .stage-choice-actions { align-items:stretch; flex-direction:column; }
  .stage-choice-actions .button { width:100%; }
  .preview-column { display:none!important; }
  .stage-panel[data-stage="3"]>.preview-column { display:block!important; margin:0 0 18px!important; }
}

/* 2026 visual system: luminous, soft and distinctly app-like */
:root { --primary:#76345f;--primary-dark:#452341;--primary-soft:#f7eaf2;--accent:#d8849f;--accent-soft:#fff0f5;--ink:#2e2530;--muted:#827681;--line:rgba(92,51,84,.11);--soft:#faf6f9;--success:#398b76;--radius:26px;--shadow:0 24px 70px rgba(63,32,61,.09); }
html { background: #f6f0f5; }
body { position: relative; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 10% 0%,rgba(247,207,226,.55),transparent 31rem),radial-gradient(circle at 82% 78%,rgba(195,229,221,.5),transparent 33rem),linear-gradient(145deg,#fbf8fb 0%,#f6f0f5 48%,#f1f7f5 100%); -webkit-font-smoothing: antialiased; }
body::before,body::after { content:""; position: fixed; z-index: -1; width: 28rem; height: 28rem; border-radius: 50%; filter: blur(80px); opacity: .2; pointer-events: none; animation: ambientFloat 16s ease-in-out infinite alternate; }
body::before { left: -12rem; top: 15vh; background: #dd8db1; }
body::after { right: 12vw; bottom: -16rem; background: #5db29e; animation-delay: -7s; }
.sidebar { width: 278px; padding: 24px 17px 18px; border-left: 1px solid rgba(255,255,255,.1); background: radial-gradient(circle at 20% 5%,rgba(217,117,165,.24),transparent 19rem),linear-gradient(160deg,#351d39 0%,#26172f 46%,#153a37 125%); box-shadow: -22px 0 70px rgba(42,20,43,.12); }
.main-wrap { margin-right: 278px; }
.brand { margin: 0 1px 19px; padding: 3px 5px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { overflow: hidden; color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 17px; background: linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.07)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 14px 35px rgba(9,4,12,.24); backdrop-filter: blur(12px); }
.brand strong { font-size: 15px; font-weight: 570; }.brand span { color: #cdbbce; }
.nav-list { gap: 5px; }.nav-caption { color: #a98daa; letter-spacing: .04em; }
.nav-item { min-height: 45px; padding: 11px 13px; color: #c9bacb; border: 1px solid transparent; border-radius: 14px; font-weight: 430; transition: transform .24s ease,background .24s,border-color .24s,color .24s; }
.nav-item::before { content:""; position:absolute; inset:8px auto 8px 5px; width:3px; border-radius:6px; background:linear-gradient(#f3a9c7,#77c0af); opacity:0; transform:scaleY(.2); transition:.25s; }
.nav-item:hover { color:#fff; border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.055); transform:translateX(-3px); }
.nav-item.active { color:#3c2340; border-color:rgba(255,255,255,.7); background:linear-gradient(135deg,#fff,#f9edf4); box-shadow:0 15px 34px rgba(9,4,12,.2),inset 0 1px 0 #fff; transform:translateX(-4px); }
.nav-item.active::before { opacity:1; transform:scaleY(1); }.nav-item.active .nav-icon { color:#813a6c; }
.sidebar-tip { border-radius: 18px; border-color:rgba(255,255,255,.1); background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025)); backdrop-filter:blur(12px); }
.tip-icon { background:linear-gradient(145deg,#d983a7,#8b4478); box-shadow:0 8px 20px rgba(0,0,0,.18); }
.topbar { height:78px; padding:0 34px; border-bottom:1px solid rgba(92,51,84,.08); background:rgba(255,252,254,.7); box-shadow:0 10px 38px rgba(62,29,59,.035); backdrop-filter:blur(24px) saturate(145%); }
.topbar-title .eyebrow { color:#874273; border:1px solid rgba(129,58,108,.1); border-radius:9px; background:#f8ebf2; }.topbar-title strong { font-weight:560; }
.avatar { border-radius:14px; background:linear-gradient(145deg,#8b3f72,#3c5f58); box-shadow:0 9px 22px rgba(96,42,80,.2); }
.profile { padding:5px 7px; border:1px solid transparent; border-radius:15px; transition:.2s; }.profile:hover { border-color:rgba(91,53,87,.1); background:rgba(255,255,255,.72); }
.profile-menu { top:55px; padding:9px; border-color:rgba(82,43,77,.1); border-radius:18px; background:rgba(255,255,255,.94); box-shadow:0 24px 70px rgba(48,23,47,.16); backdrop-filter:blur(24px); animation:menuReveal .22s ease both; }
main { max-width:1600px; padding:36px 38px 64px; }
.studio-heading,.page-heading { align-items:center; margin-bottom:25px; }.section-kicker { display:inline-flex; padding:4px 9px; color:#9b4d7b; border:1px solid rgba(155,77,123,.1); border-radius:999px; background:rgba(255,255,255,.58); letter-spacing:0; }
.studio-heading h1,.page-heading h1 { margin:5px 0 1px; color:#332635; font-size:clamp(24px,2.6vw,34px); font-weight:520; letter-spacing:-.025em; }.studio-heading p,.page-heading p { color:#8b7f8a; font-size:11px; }
.overall-chip { min-width:165px; padding:10px 13px; border-color:rgba(107,60,99,.1); border-radius:19px; background:rgba(255,255,255,.72); box-shadow:0 16px 40px rgba(69,35,66,.06); backdrop-filter:blur(15px); }
.mini-ring { width:48px; height:48px; background:conic-gradient(#ad5886 calc(var(--progress)*1%),#eee4eb 0); box-shadow:0 8px 19px rgba(119,51,96,.13); }.mini-ring::before { inset:5px; }.mini-ring span { color:#6c315b; font-weight:600; }
.card,.stage-panel,.preview-card,.table-card,.settings-main,.policy-card,.audit-feed,.project-gallery { border:1px solid rgba(97,50,90,.1)!important; border-radius:27px!important; background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,251,253,.76))!important; box-shadow:0 25px 75px rgba(64,31,61,.075),inset 0 1px 0 rgba(255,255,255,.96)!important; backdrop-filter:blur(22px) saturate(130%); }
.wizard { padding:16px 22px; border-radius:25px!important; background:linear-gradient(125deg,rgba(255,255,255,.94),rgba(251,239,246,.8),rgba(238,248,245,.76))!important; }
.wizard::before { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.8) 48%,transparent 62%); transform:translateX(115%); animation:wizardShine 8s ease-in-out infinite; pointer-events:none; }
.wizard-step { position:relative; z-index:1; min-width:175px; }.wizard-step>span { width:40px; height:40px; flex-basis:40px; border-color:rgba(108,61,101,.14); background:rgba(255,255,255,.82); box-shadow:0 7px 19px rgba(54,32,55,.05); }
.wizard-step.active>span { border-color:#a45783; background:linear-gradient(145deg,#a75482,#62305f); box-shadow:0 0 0 6px rgba(184,92,139,.11),0 12px 28px rgba(109,43,87,.22); }.wizard-step.active div strong { color:#6f325e; }.wizard-step div strong { font-weight:540; }
.wizard-line { height:2px; overflow:hidden; border-radius:4px; background:#eadfe7; }.wizard-line.completed { background:linear-gradient(90deg,#bd6c96,#67ad9e); }
.workspace-grid { gap:24px; }.stage-panel { position:relative; overflow:hidden; padding:30px; }.stage-panel::before { content:""; position:absolute; right:0; top:0; width:100%; height:4px; background:linear-gradient(90deg,#8f3f73,#e393b2,#6ab09f); opacity:.86; }
.stage-panel.active { animation:panelRevealPro .55s cubic-bezier(.2,.75,.2,1) both; }.panel-heading { padding-bottom:24px; }.panel-heading h2 { font-size:20px; font-weight:530; }.step-badge { padding:4px 10px; color:#8c4171; border:1px solid rgba(140,65,113,.1); border-radius:999px; background:#f9eaf2; }
.template-card { border-color:rgba(98,55,92,.11); border-radius:20px; padding:9px; background:rgba(255,255,255,.76); box-shadow:0 10px 30px rgba(62,34,62,.035); transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s; }.template-card:hover { transform:translateY(-7px) rotate(.15deg); box-shadow:0 24px 48px rgba(74,36,68,.13); }.template-card.selected { border-color:#a65380; box-shadow:0 0 0 4px rgba(171,85,130,.1),0 20px 48px rgba(76,37,70,.1); }.template-thumb { height:190px; border-radius:15px; }.selection-check { width:31px; height:31px; color:#fff; background:linear-gradient(145deg,#a04b7b,#543053); box-shadow:0 9px 22px rgba(67,28,60,.28); animation:checkPop .3s cubic-bezier(.2,1.5,.4,1) both; }
.input-wrap textarea,.content-field textarea,.text-input,.date-input,.speaker-input { border-color:rgba(96,58,91,.13)!important; border-radius:15px!important; background:rgba(255,255,255,.72)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.9); transition:border-color .25s,box-shadow .25s,transform .25s!important; }.input-wrap textarea:focus,.content-field textarea:focus,.text-input:focus,.date-input:focus-within,.speaker-input:focus-within { border-color:#b1648d!important; box-shadow:0 0 0 4px rgba(177,100,141,.1),0 12px 28px rgba(91,45,83,.06)!important; transform:translateY(-1px); }
.button { min-height:44px; border-radius:14px; font-weight:510; transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,filter .25s; }.button.primary { position:relative; overflow:hidden; border-color:rgba(255,255,255,.15); background:linear-gradient(120deg,#9c4878,#713460 55%,#315f58); box-shadow:0 14px 32px rgba(110,46,88,.25); }.button.primary::after { content:""; position:absolute; inset:-40% auto -40% -35%; width:25%; background:rgba(255,255,255,.33); transform:skewX(-22deg); animation:buttonSweep 4.8s ease-in-out infinite; }.button.primary:hover { filter:saturate(112%); transform:translateY(-3px) scale(1.01); box-shadow:0 19px 40px rgba(110,46,88,.3); }.button.secondary { color:#78365f; border-color:rgba(123,54,97,.12); background:#f9ebf2; }.button.ghost { border-color:rgba(91,55,87,.13); background:rgba(255,255,255,.65); }
.preview-column { top:100px; }.preview-card { padding:18px; }.canvas-shell { border:1px solid rgba(89,49,82,.12); border-radius:20px; box-shadow:0 22px 55px rgba(49,28,48,.14); }.quick-download { position:relative; overflow:hidden; height:43px; border:0; border-radius:14px; color:#fff; background:linear-gradient(120deg,#6e315e,#914b76,#397469); box-shadow:0 12px 28px rgba(100,43,80,.18); }
.modal-backdrop { background:rgba(31,17,32,.55); backdrop-filter:blur(13px) saturate(120%); }.modal-card { border:1px solid rgba(255,255,255,.72); border-radius:30px; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(250,242,247,.94)); box-shadow:0 45px 120px rgba(29,12,29,.3); animation:modalReveal .42s cubic-bezier(.2,.9,.25,1.05) both; }

/* Poster-only path */
.poster-path-card { margin-top:23px; padding:19px; border:1px solid rgba(123,57,102,.11); border-radius:23px; background:linear-gradient(135deg,#fff8fb,#f9f0f6 56%,#eff8f5); box-shadow:inset 0 1px 0 #fff; }
.poster-path-intro { display:flex; align-items:center; gap:12px; margin-bottom:13px; }.poster-path-intro>span { display:grid; place-items:center; width:42px; height:42px; color:#fff; border-radius:14px; background:linear-gradient(145deg,#b25886,#6f345f); box-shadow:0 12px 27px rgba(115,48,91,.22); animation:softFloat 3s ease-in-out infinite; }.poster-path-intro div { display:grid; }.poster-path-intro small { color:#a85a84; font-size:8px; }.poster-path-intro strong { font-size:13px; font-weight:540; }.poster-path-intro p { margin:1px 0 0; color:#8f828d; font-size:9px; }
.poster-path-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.poster-path-button { display:grid; grid-template-columns:43px minmax(0,1fr) auto; align-items:center; gap:11px; min-height:96px; padding:13px; text-align:right; border:1px solid rgba(101,55,94,.11); border-radius:18px; background:rgba(255,255,255,.82); cursor:pointer; transition:.28s cubic-bezier(.2,.8,.2,1); }.poster-path-button:hover { z-index:1; border-color:rgba(155,71,120,.3); transform:translateY(-4px); box-shadow:0 19px 38px rgba(75,35,69,.11); }.poster-path-button>span { display:grid; place-items:center; width:43px; height:43px; color:#8f3f70; border-radius:14px; background:#faeaf2; }.poster-path-button.full>span { color:#34756a; background:#e7f4f0; }.poster-path-button svg { width:22px; }.poster-path-button div { display:grid; min-width:0; }.poster-path-button small { color:#ad668c; font-size:8px; }.poster-path-button strong { color:#3e3040; font-size:10px; font-weight:560; }.poster-path-button p { margin:1px 0 0; color:#91858f; font-size:7px; }.poster-path-button>b { color:#8c3e6e; font-size:8px; font-weight:560; white-space:nowrap; }.poster-path-button.full>b { color:#34766b; }.poster-path-button.working { grid-template-columns:43px minmax(0,1fr) auto; cursor:wait; }.poster-build-spinner { width:28px!important; height:28px!important; margin:auto; border:2px solid #ead4e0; border-top-color:#8d3d6e; border-radius:50%!important; background:transparent!important; animation:spin .7s linear infinite; }
.poster-only-success { display:flex; align-items:center; gap:10px; margin-top:11px; padding:11px 13px; color:#346e62; border:1px solid rgba(57,139,118,.16); border-radius:15px; background:rgba(231,247,241,.84); animation:successReveal .4s ease both; }.poster-only-success>span { display:grid; place-items:center; width:30px; height:30px; color:#fff; border-radius:10px; background:#42927c; }.poster-only-success>div { display:grid; flex:1; }.poster-only-success strong { font-size:9px; }.poster-only-success small { color:#6d9289; font-size:7px; }.poster-only-success button { padding:7px 10px; color:#337468; border:0; border-radius:10px; background:#fff; cursor:pointer; font-size:8px; }.poster-only-success .poster-only-password { display:grid; gap:3px; min-width:160px; }.poster-only-success .poster-only-password span { color:#6d9289; font-size:7px; }.poster-only-success .poster-only-password input { min-height:28px; padding:5px 8px; font-size:8px; }.poster-only-success .poster-only-telegram { display:inline-flex; align-items:center; gap:5px; color:#fff; background:linear-gradient(135deg,#6d48d7,#ad3b91); }.poster-only-success .poster-only-telegram svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; }.poster-only-success #poster-only-telegram-status { color:#8d4c72; }.compact-actions>span { color:#938691; font-size:8px; }

/* Selective AI generation and reassuring progress */
.ai-output-picker { margin:0 0 17px; padding:16px; border:1px solid rgba(126,60,106,.12); border-radius:21px; background:linear-gradient(135deg,#fff9fc,#f8eef4); }.ai-output-picker-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }.ai-output-picker-head>div { display:grid; grid-template-columns:28px 1fr; column-gap:9px; }.ai-output-picker-head>div>span { grid-row:1/3; display:grid; place-items:center; width:28px; height:28px; color:#fff; border-radius:9px; background:linear-gradient(145deg,#9e4a79,#66305d); }.ai-output-picker-head strong { font-size:11px; font-weight:550; }.ai-output-picker-head small { color:#91838e; font-size:8px; }.ai-output-picker-head>b { padding:5px 9px; color:#8b3e6d; border-radius:999px; background:#fff; font-size:8px; font-weight:520; }
.ai-output-options { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.ai-output-option { position:relative; display:grid; grid-template-columns:38px 1fr; align-items:center; gap:10px; min-height:75px; padding:11px; border:1px solid rgba(101,59,97,.1); border-radius:16px; background:rgba(255,255,255,.72); cursor:pointer; opacity:.62; transition:.25s; }.ai-output-option:hover { opacity:1; transform:translateY(-2px); }.ai-output-option.selected { opacity:1; border-color:rgba(157,71,120,.3); box-shadow:0 10px 27px rgba(86,40,78,.08),inset 0 0 0 2px rgba(169,82,128,.06); }.ai-output-option>input { position:absolute; opacity:0; }.ai-output-check { position:absolute; left:9px; top:8px; display:grid; place-items:center; width:18px; height:18px; color:transparent; border:1px solid #d5c8d1; border-radius:6px; background:#fff; font-size:9px; transition:.2s; }.ai-output-option.selected .ai-output-check { color:#fff; border-color:#914471; background:#914471; transform:scale(1.05); }.ai-output-icon { display:grid; place-items:center; width:38px; height:38px; color:#fff; border-radius:13px; background:linear-gradient(145deg,#af5b88,#743861); }.ai-output-icon.description { background:linear-gradient(145deg,#4f9587,#336c65); }.ai-output-icon svg { width:19px; }.ai-output-option>span:last-child { display:grid; }.ai-output-option strong { font-size:9px; font-weight:550; }.ai-output-option small { color:#90848e; font-size:7px; }
.ai-guidance { margin:0 0 16px; padding:15px; border-radius:19px; background:linear-gradient(135deg,#fbf4f8,#f4f8f7); }.ai-start-button { min-width:190px!important; }
.ai-progress-card { position:relative; overflow:hidden; margin:0 0 17px; padding:19px; color:#fff; border:1px solid rgba(255,255,255,.14); border-radius:23px; background:radial-gradient(circle at 13% 8%,rgba(230,125,174,.28),transparent 15rem),linear-gradient(135deg,#3c203f,#2c1c37 55%,#174a45); box-shadow:0 24px 60px rgba(51,22,49,.2); }.ai-progress-card::after { content:""; position:absolute; inset:-40% -20%; background:conic-gradient(from 90deg,transparent,rgba(255,255,255,.08),transparent 24%); animation:aiAurora 7s linear infinite; }.ai-progress-visual,.ai-progress-track,.ai-progress-timeline,.ai-wait-note { position:relative; z-index:1; }.ai-progress-visual { display:flex; align-items:center; gap:14px; }.ai-progress-visual>div { display:grid; flex:1; }.ai-progress-visual small { color:#e7bed2; font-size:8px; }.ai-progress-visual strong { font-size:13px; font-weight:520; }.ai-progress-visual p { margin:2px 0 0; color:#bfb1c0; font-size:8px; }.ai-progress-visual>b { color:#fff; font-size:18px; font-weight:520; direction:ltr; }.ai-thinking-orb { position:relative; display:grid; place-items:center; width:55px; height:55px; flex:0 0 55px; border:1px solid rgba(255,255,255,.2); border-radius:19px; background:rgba(255,255,255,.09); box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 14px 30px rgba(0,0,0,.16); }.ai-thinking-orb svg { width:24px; color:#fff; }.ai-thinking-orb>i { position:absolute; inset:-5px; border:1px solid transparent; border-top-color:#dc88ad; border-radius:22px; animation:spin 2.4s linear infinite; }.ai-thinking-orb>i:nth-child(2) { inset:-10px; border-top-color:transparent; border-left-color:#70b9a8; animation-duration:3.2s; animation-direction:reverse; }.ai-thinking-orb>i:nth-child(3) { inset:8px; border-right-color:rgba(255,255,255,.4); animation-duration:1.8s; }.ai-progress-track { height:9px; margin:18px 0 13px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.1); }.ai-progress-track>i { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#e087ad,#f0b8ce,#69b5a4); box-shadow:0 0 18px rgba(224,135,173,.6); transition:width .7s ease; }.ai-progress-track>span { position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); transform:translateX(-100%); animation:progressGlimmer 1.8s linear infinite; }.ai-progress-timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }.ai-progress-timeline span { position:relative; color:#8d8291; font-size:7px; text-align:center; }.ai-progress-timeline span::before { content:""; display:block; width:7px; height:7px; margin:0 auto 4px; border:1px solid #736879; border-radius:50%; background:#34253b; }.ai-progress-timeline span.active { color:#fff; }.ai-progress-timeline span.active::before { border-color:#e690b4; background:#e690b4; box-shadow:0 0 0 5px rgba(230,144,180,.14); animation:softPulse 1.4s infinite; }.ai-progress-timeline span.done { color:#a2cec4; }.ai-progress-timeline span.done::before { border-color:#67b09f; background:#67b09f; }.ai-wait-note { display:flex; align-items:center; gap:8px; margin-top:14px; padding:9px 11px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:rgba(255,255,255,.055); }.ai-wait-note p { flex:1; margin:0; color:#c4b8c5; font-size:8px; }.ai-wait-note time { color:#fff; font-size:8px; direction:ltr; }.ai-wait-dots { display:flex; gap:3px; }.ai-wait-dots i { width:4px; height:4px; border-radius:50%; background:#e08caf; animation:waitDot 1.2s ease-in-out infinite; }.ai-wait-dots i:nth-child(2){animation-delay:.18s}.ai-wait-dots i:nth-child(3){animation-delay:.36s}
.ai-inline-status { display:flex; align-items:center; gap:10px; margin:0 0 16px; padding:12px; color:#a14050; border:1px solid rgba(190,73,91,.14); border-radius:16px; background:#fff0f2; animation:successReveal .35s ease both; }.ai-inline-status>span { display:grid; place-items:center; width:30px; height:30px; color:#fff; border-radius:10px; background:#c65463; }.ai-inline-status>div { display:grid; flex:1; }.ai-inline-status strong { font-size:9px; }.ai-inline-status p { margin:1px 0 0; color:#a86c74; font-size:8px; }.ai-inline-status button { padding:7px 10px; color:#a23e4e; border:0; border-radius:9px; background:#fff; cursor:pointer; font-size:8px; }.ai-inline-status.success { color:#327361; border-color:rgba(57,139,118,.15); background:#eaf7f2; }.ai-inline-status.success>span { background:#40917a; }.ai-inline-status.success p { color:#678d82; }
.content-field { border-radius:20px; transition:.3s; }

/* Refined user and admin creation */
.user-modal-card { width:min(850px,96vw); padding:25px; }.user-modal-head p { margin:2px 0 0; color:#8f818d; font-size:9px; }.user-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.user-form-grid>label { display:grid; gap:6px; color:#5a4957; font-size:9px; }.user-form-grid>label>span { display:flex; justify-content:space-between; }.user-form-grid small { color:#aa9ba7; font-size:7px; }.form-block-title { display:flex; align-items:center; gap:9px; margin:18px 0 9px; }.form-block-title>span,.permission-fieldset legend>span { display:inline-grid; place-items:center; width:25px; height:25px; color:#fff; border-radius:8px; background:linear-gradient(145deg,#9e4a79,#5c3058); }.form-block-title>div { display:grid; }.form-block-title strong { font-size:10px; }.form-block-title small { color:#948792; font-size:8px; }
.role-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.role-choice-grid>label { position:relative; display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:10px; min-height:74px; padding:11px; border:1px solid rgba(96,55,91,.1); border-radius:17px; background:#fff; cursor:pointer; opacity:.66; transition:.25s; }.role-choice-grid>label.selected { opacity:1; border-color:rgba(154,68,116,.34); box-shadow:0 10px 28px rgba(86,39,78,.08),inset 0 0 0 2px rgba(166,77,124,.06); }.role-choice-grid input { position:absolute; opacity:0; }.role-choice-icon { display:grid; place-items:center; width:38px; height:38px; color:#8e3f6e; border-radius:12px; background:#f9e9f1; }.role-choice-grid label:nth-child(2) .role-choice-icon { color:#34776b; background:#e8f5f1; }.role-choice-grid>label>span:nth-of-type(2) { display:grid; }.role-choice-grid strong { font-size:9px; }.role-choice-grid small { color:#91848f; font-size:7px; }.role-choice-grid i { padding:4px 7px; color:#9c6484; border-radius:999px; background:#fbf0f5; font-size:7px; font-style:normal; }
.permission-fieldset { margin-top:18px; padding:14px; border-color:rgba(94,53,89,.11); border-radius:19px; background:rgba(255,255,255,.5); }.permission-fieldset legend { display:flex; align-items:center; gap:7px; padding:0 8px; color:#59374f; font-size:10px; }.permission-fieldset>p { margin:0 0 9px; color:#958791; font-size:8px; }.permission-grid { gap:8px; }.permission-grid label { position:relative; min-height:62px; padding:10px; border-color:rgba(96,56,91,.09); border-radius:14px; background:rgba(255,255,255,.78); transition:.22s; }.permission-grid label:has(input:checked) { border-color:rgba(155,69,117,.27); background:#fff7fb; box-shadow:inset 0 0 0 2px rgba(170,78,127,.045); }.permission-grid input { accent-color:#91416f; }.permission-grid b { color:#4c3648; font-size:9px; font-weight:540; }.permission-grid small { color:#948791; font-size:7px; }.permission-grid em { align-self:center; padding:3px 6px; color:#4b8478; border-radius:999px; background:#e8f5f1; font-size:7px; font-style:normal; }.admin-permission-block { border-style:dashed; background:linear-gradient(135deg,#fbf3f8,#f1f8f6); animation:successReveal .3s ease both; }
.gemini-test-button { display:inline-flex; width:max-content; margin-top:8px; padding:6px 10px; color:#7f3c67; border:1px solid rgba(127,60,103,.14); border-radius:9px; background:#fff; cursor:pointer; font-size:8px; }.gemini-test-button:disabled { opacity:.55; cursor:wait; }

/* Complete user management */
.users-table { min-width:980px; }.users-table th:last-child,.users-table td:last-child { min-width:260px; }.users-table tbody tr { transition:opacity .22s,background .22s; }.users-table tbody tr:hover { background:rgba(250,243,248,.58); }.users-table tbody tr.user-inactive { opacity:.67; background:#faf9fa; }
.status-tag { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:999px; }.status-tag i { width:6px; height:6px; border-radius:50%; background:#3f9b78; box-shadow:0 0 0 4px rgba(63,155,120,.1); }.status-tag.inactive { color:#8b7178; background:#f4ecef; }.status-tag.inactive i { background:#a6848e; box-shadow:none; }
.user-row-actions { display:flex; align-items:center; gap:6px; direction:rtl; }.user-action { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:34px; padding:0 9px; color:#60465b; border:1px solid rgba(100,61,91,.11); border-radius:10px; background:#fff; cursor:pointer; font-size:8px; transition:transform .2s,border-color .2s,background .2s,box-shadow .2s; }.user-action svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; }.user-action:hover { z-index:1; transform:translateY(-2px); border-color:rgba(147,66,113,.28); background:#fff8fc; box-shadow:0 8px 18px rgba(75,36,68,.08); }.user-action.pause { color:#8c6539; background:#fffaf1; }.user-action.activate { color:#28765f; background:#eff9f5; }.user-action.delete { color:#aa3e52; background:#fff5f6; }.protected-account { display:inline-flex; align-items:center; min-height:32px; padding:0 10px; color:#796978; border:1px dashed rgba(104,72,99,.15); border-radius:10px; background:#faf7f9; font-size:8px; }
.users-empty { padding:34px; color:#91858e; text-align:center; }
.user-delete-card { width:min(430px,94vw); text-align:center; }.delete-user-icon { display:grid; place-items:center; width:62px; height:62px; margin:0 auto 13px; color:#fff; border-radius:20px; background:linear-gradient(145deg,#c65367,#7f304b); box-shadow:0 16px 36px rgba(151,52,78,.24); }.delete-user-icon svg { width:28px; fill:none; stroke:currentColor; stroke-width:1.7; }.user-delete-card h2 { margin:0; font-size:20px; }.user-delete-card>p:not(.auth-error) { margin:6px auto 15px; max-width:350px; color:#8b7d87; font-size:9px; line-height:1.9; }.delete-user-summary { display:flex; align-items:center; gap:10px; padding:11px; text-align:right; border:1px solid rgba(103,61,92,.1); border-radius:15px; background:#fff9fc; }.delete-user-summary>span { display:grid; place-items:center; width:39px; height:39px; color:#fff; border-radius:12px; background:linear-gradient(145deg,#8f416d,#4f314d); }.delete-user-summary>div { display:grid; }.delete-user-summary strong { font-size:10px; }.delete-user-summary small { color:#988a94; font-size:8px; direction:ltr; text-align:right; }.danger-button { color:#fff; border-color:transparent; background:linear-gradient(120deg,#bc4960,#87344e); box-shadow:0 12px 25px rgba(165,55,80,.2); }.danger-button:hover { transform:translateY(-2px); filter:saturate(112%); }.danger-button:disabled { opacity:.55; cursor:wait; transform:none; }

@keyframes ambientFloat { to { transform:translate3d(80px,-45px,0) scale(1.12); } }
@keyframes menuReveal { from { opacity:0; transform:translateY(-8px) scale(.97); } }
@keyframes wizardShine { 0%,55% { transform:translateX(115%); } 80%,100% { transform:translateX(-115%); } }
@keyframes panelRevealPro { from { opacity:0; transform:translateY(16px) scale(.99); filter:blur(3px); } to { opacity:1; transform:none; filter:none; } }
@keyframes buttonSweep { 0%,55% { left:-35%; } 85%,100% { left:125%; } }
@keyframes checkPop { from { opacity:0; transform:scale(.55) rotate(-18deg); } }
@keyframes modalReveal { from { opacity:0; transform:translateY(24px) scale(.97); } }
@keyframes softFloat { 50% { transform:translateY(-4px) rotate(3deg); } }
@keyframes successReveal { from { opacity:0; transform:translateY(7px); } }
@keyframes aiAurora { to { transform:rotate(1turn); } }
@keyframes progressGlimmer { to { transform:translateX(100%); } }
@keyframes waitDot { 0%,100% { transform:translateY(0); opacity:.4; } 50% { transform:translateY(-4px); opacity:1; } }

@media (max-width:1100px) { .sidebar{width:250px}.main-wrap{margin-right:250px}main{padding-inline:24px}.poster-path-actions{grid-template-columns:1fr}.wizard-step{min-width:145px}.wizard-step div small{display:none} }
@media (max-width:860px) { .sidebar{width:min(86vw,310px)}.main-wrap{margin-right:0}.topbar{height:68px;padding-inline:15px}main{padding:22px 13px 48px}.wizard{overflow-x:auto;scrollbar-width:none}.wizard-step{min-width:135px}.wizard-line{min-width:28px}.stage-panel{padding:23px}.poster-path-button{min-height:92px}.user-form-grid{grid-template-columns:1fr}.user-modal-card{width:100%} }
@media (max-width:620px) { .studio-heading,.page-heading{align-items:flex-start}.overall-chip{width:100%;margin-top:12px}.template-thumb{height:155px}.poster-path-card{padding:13px}.poster-path-button{grid-template-columns:39px minmax(0,1fr);padding:11px}.poster-path-button>b{grid-column:2}.poster-path-intro{align-items:flex-start}.ai-output-options,.role-choice-grid,.permission-grid{grid-template-columns:1fr}.ai-output-picker-head{align-items:flex-start;flex-direction:column}.ai-guidance>div{flex-direction:column}.ai-start-button{width:100%;min-height:48px!important}.ai-progress-visual{align-items:flex-start;flex-wrap:wrap}.ai-progress-visual>div{min-width:calc(100% - 75px)}.ai-progress-visual>b{margin-right:69px}.ai-progress-timeline span{font-size:6px}.compact-actions{align-items:stretch;flex-direction:column}.compact-actions .button{width:100%} }
@media (max-width:460px) { .card,.stage-panel,.preview-card{border-radius:23px!important}.stage-panel{padding:19px 15px}.template-grid{gap:9px}.template-card{padding:6px;border-radius:16px}.template-thumb{height:135px}.template-info em{display:none}.poster-path-button p{display:none}.poster-path-button{min-height:84px}.poster-path-intro strong{font-size:11px}.poster-only-success{align-items:flex-start;flex-wrap:wrap}.poster-only-success button{width:100%}.ai-progress-card{padding:15px}.ai-thinking-orb{width:48px;height:48px;flex-basis:48px}.ai-progress-visual>div{min-width:calc(100% - 64px)}.user-modal-card{padding:20px 15px}.role-choice-grid>label{grid-template-columns:35px 1fr}.role-choice-grid i{display:none} }
@media (max-width:720px) { .users-table th:last-child,.users-table td:last-child { position:sticky; left:0; z-index:2; min-width:142px; background:rgba(255,255,255,.96); box-shadow:8px 0 18px rgba(52,27,49,.06); }.users-table th:last-child { z-index:3; background:#faf7f9; }.user-row-actions { gap:4px; }.user-action { width:37px; min-width:37px; height:37px; padding:0; }.user-action span { display:none; }.protected-account { padding-inline:7px; }.user-delete-card .modal-actions { display:grid; grid-template-columns:1fr 1fr; }.user-delete-card .button { width:100%; } }

/* Midnight Orchid — richer contrast with teal and warm-gold accents */
:root {
  --primary: #6046ce;
  --primary-dark: #3e2a98;
  --primary-soft: #efecff;
  --accent: #d7923e;
  --accent-soft: #fff4e3;
  --purple: #a13e7a;
  --purple-soft: #faeaf3;
  --ink: #261c35;
  --muted: #756b80;
  --line: rgba(74,53,121,.13);
  --soft: #f6f3fc;
  --success: #14806d;
  --shadow: 0 26px 75px rgba(49,34,91,.11);
}

html { background: #f4f2fa; }
body {
  background:
    radial-gradient(circle at 7% 0%,rgba(111,79,220,.2),transparent 31rem),
    radial-gradient(circle at 93% 74%,rgba(22,152,136,.16),transparent 34rem),
    radial-gradient(circle at 49% 42%,rgba(209,71,139,.09),transparent 28rem),
    linear-gradient(145deg,#fbfaff 0%,#f4f2fb 50%,#eef9f7 100%);
}
body::before { background:#7452df; opacity:.16; }
body::after { background:#1aa592; opacity:.15; }
::selection { color:#fff; background:#6448cf; }
* { scrollbar-color:#a59ad7 transparent; }

.sidebar {
  border-left-color:rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 12% 2%,rgba(221,73,145,.3),transparent 20rem),
    radial-gradient(circle at 95% 95%,rgba(18,151,139,.2),transparent 21rem),
    linear-gradient(165deg,#211337 0%,#351640 49%,#103b43 125%);
  box-shadow:-24px 0 75px rgba(31,17,60,.2);
}
.brand-mark { background:linear-gradient(145deg,#704dda,#a63d7a 58%,#167f78)!important; }
.brand span { color:#d6cde9; }
.brand::after { background:linear-gradient(90deg,#efb45b,#d35999,transparent); }
.nav-caption { color:#b6a6cf; }
.nav-item { color:#d5cee5; }
.nav-item::before { background:linear-gradient(#efb45b,#dc5a9b,#43c6b3); }
.nav-item:hover { border-color:rgba(255,255,255,.11); background:rgba(255,255,255,.075); }
.nav-item.active {
  color:#34206d;
  border-color:rgba(255,255,255,.82);
  background:linear-gradient(135deg,#fff,#f2efff 70%,#e9fbf7);
  box-shadow:0 16px 38px rgba(8,4,25,.26),inset 0 1px 0 #fff;
}
.nav-item.active .nav-icon { color:#6046ce; }
.nav-item.active .nav-count { color:#5038b5; background:#e8e3ff; }
.tip-icon { background:linear-gradient(145deg,#e2a347,#c94d89 60%,#2c9d90); }
.sidebar-footer b { color:#e4dcf5; }
.sidebar-footer span { background:#44d1b9; box-shadow:0 0 0 4px rgba(68,209,185,.12); }

.topbar {
  border-bottom-color:rgba(79,55,139,.1);
  background:rgba(251,250,255,.79);
  box-shadow:0 12px 42px rgba(58,39,109,.06);
}
.topbar-title .eyebrow { color:#5638bd; border-color:rgba(96,70,206,.12); background:#eeeaff; }
.avatar { background:linear-gradient(145deg,#684bdb,#9f3f7a 62%,#168177); box-shadow:0 10px 25px rgba(87,57,178,.25); }
.icon-button { color:#4f406f; border-color:rgba(80,60,129,.12); background:rgba(255,255,255,.86); }
.icon-button:hover { color:#5f43ca; border-color:#bbb0e8; background:#f7f5ff; }
.profile:hover { border-color:rgba(86,61,151,.12); background:rgba(255,255,255,.8); }
.profile-menu { border-color:rgba(77,53,134,.13); box-shadow:0 25px 75px rgba(38,22,78,.18); }

.studio-heading::before,.page-heading::before { background:radial-gradient(circle,rgba(106,74,211,.17),transparent 68%); }
.section-kicker { color:#a54b78; border-color:rgba(165,75,120,.13); background:rgba(255,247,252,.76); }
.studio-heading h1,.page-heading h1 { color:#281b46; }
.studio-heading p,.page-heading p { color:#746b7d; }
.overall-chip { border-color:rgba(80,57,139,.12); box-shadow:0 16px 38px rgba(60,40,111,.08); }
.mini-ring { background:conic-gradient(#6548cf calc(var(--progress)*1%),#e7e3f2 0); box-shadow:0 9px 22px rgba(91,62,190,.17); }
.mini-ring span { color:#4f34b1; }

.card,.stage-panel,.preview-card,.table-card,.settings-main,.policy-card,.audit-feed,.project-gallery {
  border-color:rgba(78,56,135,.13)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(249,247,255,.86))!important;
  box-shadow:0 27px 78px rgba(48,31,91,.095),inset 0 1px 0 rgba(255,255,255,.98)!important;
}
.stage-panel::before { height:5px; background:linear-gradient(90deg,#6145ce,#cf4f90 51%,#17a08e 80%,#e4a44c); }
.step-badge { color:#583cbd; border-color:rgba(96,70,206,.13); background:#eeebff; }
.wizard { background:linear-gradient(125deg,rgba(255,255,255,.98),rgba(241,237,255,.88),rgba(232,250,246,.82))!important; }
.wizard-step.active>span { border-color:#6a4bd7; background:linear-gradient(145deg,#7456dc,#5534b9 58%,#963a79); box-shadow:0 0 0 6px rgba(104,75,212,.12),0 13px 30px rgba(72,45,164,.27); }
.wizard-step.active div strong { color:#5638bb; }
.wizard-step.completed>span { color:#147966; border-color:#9ed9cd; background:#e1f7f1; }
.wizard-line { background:#e5e0f0; }
.wizard-line.completed { background:linear-gradient(90deg,#6a4bd4,#cb5491,#26a997); }

.template-card { border-color:rgba(78,57,130,.14); background:rgba(255,255,255,.86); }
.template-card:hover { border-color:rgba(96,70,206,.28); box-shadow:0 25px 52px rgba(57,37,107,.15); }
.template-card.selected { border-color:#684bd0; box-shadow:0 0 0 4px rgba(103,74,207,.11),0 21px 50px rgba(59,38,112,.14); }
.selection-check { color:#fff; background:linear-gradient(145deg,#7152d7,#4930a1 58%,#a63f7c); }
.number-tag { color:#9a6020; background:#fff0d9; }
.live-badge { color:#127763; background:#e2f7f1; }
.live-badge i,.live-dot { background:#19a184; box-shadow:0 0 0 3px rgba(25,161,132,.13); }

.input-wrap textarea,.content-field textarea,.text-input,.date-input,.speaker-input,.filename-input,.login-input {
  border-color:rgba(79,59,130,.16)!important;
  background:rgba(255,255,255,.86)!important;
}
.input-wrap textarea:focus,.content-field textarea:focus,.text-input:focus,.date-input:focus-within,.speaker-input:focus-within,.filename-input:focus-within,.login-input:focus-within {
  border-color:#7155d5!important;
  box-shadow:0 0 0 4px rgba(105,78,207,.11),0 12px 29px rgba(70,47,135,.07)!important;
}
.date-input button { color:#533bb0; background:#ece8ff; }
.switch input:checked+span { background:linear-gradient(90deg,#684bd0,#9a3f7a); }

.button.primary,.auth-submit {
  background:linear-gradient(120deg,#694bd4 0%,#5535b3 43%,#a23f7a 75%,#16877d 125%)!important;
  box-shadow:0 15px 35px rgba(76,50,170,.29);
}
.button.primary:hover,.auth-submit:hover { background:linear-gradient(120deg,#7558de,#6040c3 43%,#b14887 75%,#179689 125%)!important; box-shadow:0 20px 43px rgba(75,48,170,.34); }
.button.secondary { color:#5339b0; border-color:rgba(99,72,198,.15); background:#eeebff; }
.button.ghost { color:#524763; border-color:rgba(78,57,126,.15); }
.quick-download,.share-main { background:linear-gradient(120deg,#6447cb,#4a2d9c 49%,#a03d78 78%,#148478)!important; box-shadow:0 15px 34px rgba(75,49,163,.26); }

.poster-path-card { border-color:rgba(82,60,140,.14); background:linear-gradient(135deg,#faf8ff,#f2eeff 53%,#e9faf6); }
.poster-path-intro>span { background:linear-gradient(145deg,#7153d6,#a4417d 65%,#198a7e); box-shadow:0 13px 29px rgba(78,50,169,.25); }
.poster-path-intro small,.poster-path-button small { color:#8052b5; }
.poster-path-button { border-color:rgba(79,59,131,.13); background:rgba(255,255,255,.9); }
.poster-path-button:hover { border-color:rgba(105,76,210,.33); box-shadow:0 20px 42px rgba(60,39,112,.13); }
.poster-path-button>span { color:#5f42c1; background:#ece8ff; }
.poster-path-button.full>span { color:#147e6c; background:#e1f7f1; }
.poster-path-button>b { color:#573ab6; }
.poster-path-button.full>b { color:#137765; }

.audio-editor { border-color:#dad3ef; background:linear-gradient(145deg,#fff,#f5f2ff 62%,#edf9f6); }
.waveform-shell { border-color:#d8d0ee; background:linear-gradient(180deg,#fff,#f2effd); }
.audio-track { border-color:#ded8ee; background:#faf9ff; }
.audio-track-index,.option-icon { color:#5b40bb; background:#ece9ff; }
.process-card { border-color:#d8d0ec; background:linear-gradient(135deg,#f5f2ff,#ebf8f5); }
.progress-track i { background:linear-gradient(90deg,#694bd3,#d44f90,#1aa18e); }

.ai-output-picker { border-color:rgba(91,66,166,.15); background:linear-gradient(135deg,#fbf9ff,#f2eeff 62%,#ecf9f6); }
.ai-output-picker-head>div>span,.ai-output-icon,.form-block-title>span,.permission-fieldset legend>span { background:linear-gradient(145deg,#7152d7,#5635b5 58%,#9f3e7a); }
.ai-output-option.selected { border-color:rgba(103,76,207,.34); box-shadow:0 11px 29px rgba(64,42,124,.1),inset 0 0 0 2px rgba(105,76,209,.07); }
.ai-output-option.selected .ai-output-check { border-color:#6347c8; background:#6347c8; }
.ai-output-icon.description { background:linear-gradient(145deg,#24a28f,#147368); }
.ai-progress-card { background:radial-gradient(circle at 13% 8%,rgba(216,71,143,.31),transparent 16rem),linear-gradient(135deg,#271647,#382164 55%,#104b50); box-shadow:0 26px 65px rgba(39,21,82,.25); }
.ai-thinking-orb>i { border-top-color:#e45d9e; }.ai-thinking-orb>i:nth-child(2) { border-left-color:#42c4b1; }
.ai-progress-track>i { background:linear-gradient(90deg,#8b6aee,#e75c9f,#42c4b1); box-shadow:0 0 19px rgba(124,92,229,.65); }
.ai-progress-card.is-waiting .ai-progress-track>i { position:relative; overflow:hidden; }
.ai-progress-card.is-waiting .ai-progress-track>i::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent); animation:progressGlimmer 1.35s linear infinite; }
.ai-progress-card.is-waiting #ai-progress-percent { max-width:88px; font-size:8px; line-height:1.6; text-align:center; }
.ai-cancel { min-height:30px; padding:0 10px; color:#f1dcea; border:1px solid rgba(255,255,255,.15); border-radius:9px; background:rgba(255,255,255,.07); cursor:pointer; font-size:8px; transition:.2s; }
.ai-cancel:hover { color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.13); }

.stat-card { border-color:rgba(79,58,132,.12); background:linear-gradient(145deg,#fff,#f5f2ff); }
.stat-card::after { background:rgba(104,76,207,.1); }
.stat-icon.green { color:#147b68; background:linear-gradient(145deg,#e1f8f1,#ccefe6); }
.stat-icon.blue { color:#5438b7; background:linear-gradient(145deg,#eeebff,#dfd9fa); }
.stat-icon.orange { color:#a8651f; background:linear-gradient(145deg,#fff4e2,#f8dfb9); }
.analytics-range>button.active { background:linear-gradient(135deg,#694bd2,#4c309f 62%,#9c3c77); box-shadow:0 8px 18px rgba(78,49,173,.25); }
.analytics-kpi.plum { --kpi-color:#5c3dc1;--kpi-bg:#ece8ff;--kpi-glow:rgba(101,74,207,.13); }
.analytics-kpi.mint { --kpi-color:#147c69;--kpi-bg:#def6ef;--kpi-glow:rgba(23,159,134,.12); }
.analytics-kpi.blue { --kpi-color:#2d6eaa;--kpi-bg:#e6f2ff;--kpi-glow:rgba(55,126,191,.11); }
.analytics-kpi.orange { --kpi-color:#a66420;--kpi-bg:#fff1dc;--kpi-glow:rgba(222,151,62,.13); }
.analytics-kpi.rose { --kpi-color:#aa3f72;--kpi-bg:#fae8f1;--kpi-glow:rgba(205,75,137,.12); }
.analytics-kpi.violet { --kpi-color:#7236aa;--kpi-bg:#f1e8fa;--kpi-glow:rgba(132,64,180,.11); }
.analytics-view-line { stroke:#6448cc; }.analytics-view-dots circle { stroke:#6448cc; }
.chart-legend span::before { background:#6448cc; }.chart-legend .sessions::before { background:#d99642; }

.auth-gate { background:radial-gradient(circle at 12% 10%,rgba(221,69,143,.38),transparent 26rem),radial-gradient(circle at 88% 88%,rgba(24,166,150,.32),transparent 29rem),linear-gradient(145deg,#1c1039,#251747 52%,#0d3039); }
.auth-layout { border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.075); box-shadow:0 42px 115px rgba(8,5,27,.46); }
.auth-visual { background:radial-gradient(circle at 50% 30%,rgba(118,82,222,.3),transparent 17rem); }
.auth-visual small { color:#d3c9e6; }
.auth-orbit img { background:linear-gradient(145deg,#7150da,#a23e79 60%,#177e76); }
.auth-orbit span { background:#efb257; box-shadow:0 0 25px rgba(239,178,87,.75); }
.auth-orbit span:nth-child(2) { background:#e05b9d; }.auth-orbit span:nth-child(3) { background:#43c7b4; }
.auth-panel { background:linear-gradient(155deg,rgba(255,255,255,.985),rgba(246,243,255,.97)); }
.auth-copy h2 { color:#281a45; }.login-form>label { color:#45345f; }
.auth-brand .brand-mark { background:linear-gradient(145deg,#704dda,#9f3d79 62%,#168177)!important; }
.auth-foot { color:#746881; }

@media (max-width:720px) {
  .users-table th:last-child,.users-table td:last-child { background:rgba(250,249,255,.98); }
  .users-table th:last-child { background:#f2effb; }
}

/* خوانایی و عملکرد: آخرین لایهٔ رابط، سبک‌تر و یکپارچه‌تر */
body { font-size:15px; line-height:1.75; }
.nav-item { min-height:46px; font-size:13px; }
.nav-caption,.brand span,.sidebar-tip p,.sidebar-footer { font-size:10px; }
.topbar-title strong { font-size:15px; }
.field-label,.content-label label { font-size:12px; }
.field-hint,.panel-heading p,.form-section-head small,.option-row small,.content-label>div { font-size:10px; line-height:1.75; }
.button,.poster-only-output-actions button,.archive-publish-button { min-height:44px; font-size:12px; }
.panel-heading h2 { font-size:21px; }
.template-info strong,.option-row strong,.audio-section-title strong,.download-card strong { font-size:12px; }
.template-info small,.audio-section-title small,.download-card small { font-size:10px; }
.input-wrap textarea,.content-field textarea,.text-input,.date-input input,.speaker-input input,.filename-input input { font-size:14px; }

.telegram-direct-panel {
  padding:18px;
  border-color:rgba(53,139,180,.2);
  background:linear-gradient(135deg,#f7fbff,#f4f1ff 58%,#effbf7);
  box-shadow:0 18px 42px rgba(50,68,128,.09);
}
.telegram-direct-panel small { font-size:10px; }
.telegram-direct-panel strong { margin-block:2px; font-size:14px; }
.telegram-direct-panel p { color:#5f6d78; font-size:11px; line-height:1.85; }
.telegram-direct-panel button { min-height:48px; font-size:12px; background:linear-gradient(120deg,#327dc3,#6547c9 56%,#a43e83); }
.telegram-direct-panel button.sending,
.telegram-direct-panel button.sending:disabled {
  opacity:.76;
  color:#fff;
  cursor:wait;
  filter:saturate(.82);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 9px 22px rgba(71,62,144,.15);
}
.telegram-direct-panel button.sending svg { display:none; }
.telegram-direct-panel button.sending::after {
  content:"";
  width:19px;
  height:19px;
  flex:0 0 19px;
  border:2px solid rgba(255,255,255,.36);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .72s linear infinite;
}
.poster-only-success strong { font-size:12px; }
.poster-only-success small,#poster-only-telegram-status { font-size:10px; line-height:1.75; }
.archive-publish-copy,.archive-publish-options small,.archive-publish-status { font-size:11px; }
.archive-publish-options b { font-size:13px; }

@media (max-width:620px) {
  body { font-size:16px; background:#f6f4fa; }
  main { padding:14px 10px 42px; }
  .topbar { height:62px; padding-inline:10px; background:#fff; backdrop-filter:none; }
  .topbar-title strong { font-size:15px; }
  .menu-toggle,.profile .avatar { width:42px; height:42px; }
  .studio-heading,.page-heading { margin-bottom:15px; }
  .studio-heading h1,.page-heading h1 { font-size:22px; }
  .studio-heading p,.page-heading p { font-size:12px; }
  .wizard { margin-inline:-10px; padding:10px 12px; border-radius:0!important; }
  .wizard-step { min-width:48px; flex-basis:48px; }
  .wizard-step>span { width:40px; height:40px; flex-basis:40px; }
  .wizard-line { min-width:22px; }
  .stage-panel { padding:19px 14px!important; border-radius:20px!important; }
  .panel-heading { padding-bottom:17px; }
  .panel-heading h2 { font-size:20px; }
  .panel-heading p { font-size:11px; }
  .field-label { margin-top:16px; font-size:13px; }
  .input-wrap textarea,.content-field textarea,.text-input,.date-input input,.speaker-input input,.filename-input input { font-size:16px; }
  .input-wrap textarea,.content-field textarea,.text-input { padding:13px; }
  .button,.poster-path-button,.option-row,.archive-publish-options label { min-height:48px; }
  .button { padding-inline:14px; font-size:13px; }
  .poster-path-button strong { font-size:13px; }
  .poster-path-button small,.poster-path-button>b { font-size:10px; }
  .poster-path-button p { display:block; font-size:10px; }
  .poster-only-success { display:grid; grid-template-columns:auto 1fr; padding:14px; }
  .poster-only-output-actions { grid-column:1/-1; width:100%; }
  .poster-only-success>button { grid-column:1/-1; min-height:44px; }
  .telegram-direct-panel { grid-template-columns:44px minmax(0,1fr); padding:14px; border-radius:18px; }
  .telegram-direct-icon { width:44px; height:44px; }
  .telegram-direct-panel button { grid-column:1/-1; width:100%; margin-top:4px; }
  .archive-publish-modal-card { padding:19px 15px; }
  .archive-publish-options label { padding:13px 11px; }
  .modal-actions { display:grid; grid-template-columns:1fr 1.5fr; }
  .modal-actions .button { width:100%; }
  .archive-grid { gap:13px; }
  .archive-card { border-radius:18px; box-shadow:0 10px 28px rgba(58,34,73,.07); }
  .preview-card { padding:12px!important; }
  .card,.stage-panel,.preview-card,.table-card,.settings-main,.policy-card,.audit-feed,.project-gallery { backdrop-filter:none; }
}

html.low-power body { background:#f5f4f7; }
html.low-power *,html.low-power *::before,html.low-power *::after {
  /* Keep lightweight feedback motion on phones.  Low-power mode only
     removes expensive blur below; it must not make the interface look frozen. */
  transition-duration:.16s!important;
}
html.low-power .card,html.low-power .stage-panel,html.low-power .preview-card,html.low-power .table-card,
html.low-power .settings-main,html.low-power .policy-card,html.low-power .audit-feed,html.low-power .project-gallery,
html.low-power .topbar,html.low-power .modal-backdrop { backdrop-filter:none!important; box-shadow:0 7px 22px rgba(52,34,65,.06)!important; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* Guided wizard decisions and mobile focus */
.progress-only-heading {
  justify-content: flex-end;
  padding-block: 0;
}
.poster-path-card {
  padding: 15px;
  background: linear-gradient(135deg,rgba(250,248,255,.96),rgba(241,238,255,.84) 54%,rgba(234,249,245,.88));
}
.poster-path-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.poster-choice-button {
  width: 100%;
  min-height: 58px;
  height: auto;
  padding: 11px 15px;
  text-align: right;
}
.poster-choice-button > span:not(.poster-build-spinner) {
  display: grid;
  flex: 1;
  gap: 1px;
  min-width: 0;
}
.poster-choice-button small {
  color: currentColor;
  font-size: 9px;
  font-weight: 420;
  opacity: .72;
}
.poster-choice-button strong {
  font-size: 12px;
  font-weight: 560;
  line-height: 1.65;
}
.poster-choice-button > svg:last-child { margin-inline-start: auto; }
.poster-choice-button.working { cursor: wait; }
.poster-choice-button .poster-build-spinner {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px;
  border: 2px solid rgba(106,75,215,.18);
  border-top-color: #6849cf;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.final-section-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 25px;
  padding: 0 3px;
}
.final-section-heading > span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(145deg,#7153d6,#a4417d 68%,#168a7d);
  box-shadow: 0 8px 19px rgba(78,50,169,.2);
  font-size: 11px;
}
.final-section-heading > div { display: grid; gap: 1px; }
.final-section-heading strong { font-size: 13px; font-weight: 560; }
.final-section-heading small { color: var(--muted); font-size: 9px; }
.telegram-first-heading { margin-top: 0; }
.final-section-heading + .share-hub,
.final-section-heading + .download-grid { margin-top: 11px; }

@media (max-width: 860px) {
  .stage-panel,
  .process-card,
  .ai-progress-card,
  #poster-only-success,
  #continue-audio-options,
  #process-audio,
  [data-ai-output] { scroll-margin-top: 150px; }
  .poster-path-actions { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .progress-only-heading { display: none; }
  .mobile-flow-status {
    position: sticky;
    z-index: 22;
    top: 62px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 8px 10px;
    margin: 8px 0 14px;
    padding: 10px 12px 9px;
    background: rgba(255,250,253,.97);
    box-shadow: 0 12px 30px rgba(68,34,66,.11);
    backdrop-filter: blur(14px);
  }
  .mobile-flow-hint { margin-right: 0; align-self: center; }
  .mobile-progress-track {
    grid-column: 1 / -1;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8e2ef;
  }
  .mobile-progress-track > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#6a4bd4,#c94e8c 58%,#25a590);
    transition: width .4s ease;
  }
  .poster-path-card { padding: 11px; }
  .poster-choice-button {
    min-height: 62px;
    padding: 12px 13px;
    font-size: 13px;
  }
  .poster-choice-button small { font-size: 10px; }
  .poster-choice-button strong { font-size: 13px; }
  .final-section-heading { align-items: flex-start; }
  .final-section-heading strong { font-size: 14px; }
  .final-section-heading small { font-size: 10px; line-height: 1.7; }
}

/* Installable app shell --------------------------------------------------- */
.app-splash {
  position: fixed; inset: 0; z-index: 12000; display: grid; place-content: center;
  justify-items: center; gap: 10px; padding: env(safe-area-inset-top) 20px env(safe-area-inset-bottom);
  color: #fff; background: radial-gradient(circle at 18% 12%,rgba(229,84,153,.42),transparent 28rem),
    radial-gradient(circle at 85% 88%,rgba(31,191,168,.32),transparent 28rem),linear-gradient(155deg,#241447,#321b54 58%,#0c4245);
  transition: opacity .28s ease,visibility .28s ease;
}
.app-splash.ready { opacity: 0; visibility: hidden; pointer-events: none; }
.app-splash-mark { width: 88px; height: 88px; display:grid; place-items:center; border-radius:28px; background:#fff; box-shadow:0 26px 70px rgba(0,0,0,.25); }
.app-splash-mark img { width:70px; height:70px; }
.app-splash strong { font-size:22px; font-weight:620; }
.app-splash span { min-height:24px; color:#e8e0ef; font-size:12px; }
.app-splash i { width:92px; height:4px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.18); }
.app-splash i::after { content:""; display:block; width:45%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#f28cbd,#82e5d6); animation:splashProgress 1.15s ease-in-out infinite alternate; }
@keyframes splashProgress { to { transform:translateX(-120%); } }

.network-status { display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:0 11px; border:1px solid #d9ece8; border-radius:999px; color:#287869; background:#effaf7; font-size:10px; font-weight:550; }
.network-status::before { content:""; width:7px; height:7px; border-radius:50%; background:#2eb89d; box-shadow:0 0 0 4px rgba(46,184,157,.12); }
.network-status>i { display:none; }
.network-status.offline { color:#8c5c27; border-color:#efddc5; background:#fff8ee; }
.network-status.offline::before { background:#d18a3d; box-shadow:0 0 0 4px rgba(209,138,61,.12); }

.install-sheet { position:fixed; inset:0; z-index:11000; display:grid; align-items:end; padding:16px; background:rgba(18,12,28,.62); backdrop-filter:blur(8px); }
.install-sheet-card { position:relative; width:min(460px,100%); margin:auto; padding:27px; border:1px solid rgba(255,255,255,.7); border-radius:28px; background:linear-gradient(145deg,#fff,#fbf7ff); box-shadow:0 30px 90px rgba(24,12,36,.32); animation:installUp .28s ease both; }
.install-sheet-close { position:absolute; left:17px; top:15px; width:39px; height:39px; border:0; border-radius:50%; color:#685873; background:#f0ebf4; cursor:pointer; font-size:23px; }
.install-app-icon { width:72px; height:72px; display:grid; place-items:center; border-radius:22px; background:#fff; box-shadow:0 15px 40px rgba(72,39,91,.14); }
.install-app-icon img { width:61px; height:61px; }
.install-sheet h2 { margin:17px 0 4px; font-size:20px; }
.install-sheet p { margin:0 0 16px; color:#75687b; font-size:12px; }
.install-sheet ul { margin:0 0 18px; padding-right:20px; color:#4e4254; font-size:12px; }
.install-sheet .button { width:100%; min-height:50px; }
.ios-install-steps ol { display:grid; gap:9px; margin:10px 0 15px; padding:0; list-style:none; }
.ios-install-steps>img { width:100%; display:block; margin:3px 0 12px; border-radius:18px; }
.ios-install-steps li { display:flex; align-items:center; gap:10px; padding:11px; border:1px solid #ebe4f0; border-radius:15px; background:#fff; }
.ios-install-steps li b { width:29px; height:29px; display:grid; place-items:center; flex:0 0 29px; border-radius:10px; color:#fff; background:linear-gradient(140deg,#6a49d4,#b23f82); }
.ios-install-steps li span { font-size:11px; }
.ios-install-steps small { display:block; color:#76677b; font-size:10px; }
@keyframes installUp { from { opacity:0; transform:translateY(24px) scale(.98); } }

.mobile-app-nav,.mobile-stage-actions,.mobile-start-over { display:none; }
#auth-gate.show ~ #mobile-app-nav,#auth-gate.show ~ #mobile-stage-actions { display:none!important; }
.app-update-banner { position:fixed; z-index:1000; left:20px; bottom:20px; display:flex; align-items:center; gap:10px; max-width:440px; padding:13px; border:1px solid rgba(255,255,255,.18); border-radius:18px; color:#fff; background:linear-gradient(120deg,#4f2a75,#183e50); box-shadow:0 18px 50px rgba(24,15,37,.25); }
.app-update-banner div { flex:1; min-width:0; }
.app-update-banner strong,.app-update-banner small { display:block; }
.app-update-banner strong { font-size:12px; }.app-update-banner small { color:#dcd1e4; font-size:9px; }
.app-update-banner button { min-height:36px; padding:0 11px; border:0; border-radius:10px; color:#fff; background:rgba(255,255,255,.12); cursor:pointer; }
#app-update-apply { background:#fff; color:#50346a; }

.audio-source-panel { padding:15px; border:1px solid #e8e2ec; border-radius:22px; background:rgba(255,255,255,.68); }
.audio-source-panel[hidden] { display:none!important; }.audio-source-panel.active { animation:sourcePanelIn .26s ease both; }
.audio-source-panel .dropzone { margin:0; }
.startup-online-required { display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:12px; padding:15px; border:1px solid #efd8bd; border-radius:18px; background:linear-gradient(135deg,#fffaf2,#fff4e5); }
.startup-online-required>span { width:46px; height:46px; display:grid; place-items:center; color:#fff; border-radius:15px; background:linear-gradient(145deg,#c47835,#aa496b); }
.startup-online-required svg { width:25px; }.startup-online-required strong,.startup-online-required small { display:block; }.startup-online-required strong { font-size:13px; }.startup-online-required small { margin-top:2px; color:#7e6d62; font-size:9px; line-height:1.8; }
.startup-online-required .button { grid-column:1/-1; width:100%; min-height:48px; }
.audio-method-picker { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.audio-method-card { display:grid; grid-template-columns:46px minmax(0,1fr) 28px; align-items:center; gap:11px; min-height:76px; padding:11px 12px; border:1px solid #e5dfea; border-radius:18px; color:#54475e; background:#fff; text-align:right; cursor:pointer; transition:border-color .2s,transform .2s,box-shadow .2s; }
.audio-method-card>span { width:44px; height:44px; display:grid; place-items:center; color:#7351c8; border-radius:14px; background:#eee9fa; }.audio-method-card>span svg { width:23px; }
.audio-method-card strong,.audio-method-card small { display:block; }.audio-method-card strong { font-size:12px; }.audio-method-card small { color:#837789; font-size:9px; }.audio-method-card>b { width:26px; height:26px; display:grid; place-items:center; color:#7e6b8c; border-radius:9px; background:#f4f0f7; font-size:9px; }
.audio-method-card.active { border-color:#8062d5; background:linear-gradient(135deg,#fbf9ff,#f2efff 65%,#eef9f6); box-shadow:0 0 0 3px rgba(112,77,199,.08); transform:translateY(-1px); }.audio-method-card.active>span { color:#fff; background:linear-gradient(145deg,#6746cf,#b63f83 62%,#169385); }.audio-method-card.active>b { color:#fff; background:#6c49c8; }
.channel-intake-card { display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:13px; min-height:245px; padding:22px; border:1px solid rgba(74,151,137,.18); border-radius:20px; background:radial-gradient(circle at 0 100%,rgba(103,72,207,.08),transparent 38%),linear-gradient(145deg,#fbf9ff,#effaf7); }
.channel-intake-icon { width:56px; height:56px; display:grid; place-items:center; color:#fff; border-radius:18px; background:linear-gradient(145deg,#6545cf,#b63e83 64%,#168f83); box-shadow:0 13px 28px rgba(94,54,165,.2); }.channel-intake-icon svg { width:29px; }
.channel-intake-copy { min-width:0; }.channel-intake-copy small,.channel-intake-copy strong,.channel-intake-copy p { display:block; }.channel-intake-copy small { color:#4d9083; font-size:9px; }.channel-intake-copy strong { margin-top:2px; font-size:15px; }.channel-intake-copy p { margin:4px 0 0; color:#786d7d; font-size:10px; line-height:1.9; }
.channel-intake-card>.button { grid-column:1/-1; width:100%; min-height:50px; }
.channel-intake-wait { grid-column:1/-1; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; padding:13px; color:#356e64; border:1px solid rgba(41,149,129,.2); border-radius:15px; background:rgba(236,249,245,.9); }.channel-intake-wait>i { width:30px; height:30px; border:3px solid rgba(35,148,128,.16); border-top-color:#299580; border-radius:50%; animation:inboxSpin .9s linear infinite; }.channel-intake-wait strong,.channel-intake-wait small { display:block; }.channel-intake-wait strong { font-size:11px; }.channel-intake-wait small { color:#709087; font-size:8px; line-height:1.8; }.channel-intake-wait time { font-size:10px; font-variant-numeric:tabular-nums; }
.channel-intake-cancel { grid-column:1/-1; justify-self:center; min-height:38px; padding:0 15px; color:#875576; border:1px solid #e6d9e2; border-radius:11px; background:#fff; cursor:pointer; font-size:9px; }
.audio-transfer-note { margin:12px 2px 0; color:#817589; text-align:center; font-size:9px; }.audio-transfer-note button { padding:3px 5px; color:#6848bf; border:0; border-bottom:1px dashed rgba(104,72,191,.4); background:transparent; cursor:pointer; font:inherit; font-weight:600; }
.bot-inbox-tools { margin-top:12px; border:1px solid rgba(100,72,156,.15); border-radius:18px; background:rgba(251,249,253,.78); overflow:hidden; }
.bot-inbox-tools>summary { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:64px; padding:10px 12px; color:#4e3d59; cursor:pointer; list-style:none; }
.bot-inbox-tools>summary::-webkit-details-marker { display:none; }
.bot-inbox-tools>summary>span { display:grid; place-items:center; width:40px; height:40px; color:#fff; border-radius:13px; background:linear-gradient(145deg,#6746cf,#b63f83 62%,#169385); }
.bot-inbox-tools>summary svg { width:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.bot-inbox-tools>summary strong,.bot-inbox-tools>summary small { display:block; }.bot-inbox-tools>summary strong { font-size:12px; }.bot-inbox-tools>summary small { color:#817489; font-size:9px; line-height:1.75; }
.bot-inbox-tools>summary>b { padding:4px 8px; color:#6d4bc6; border-radius:999px; background:#eee8fb; font-size:8px; font-weight:600; }
.bot-inbox-tools[open]>summary { border-bottom:1px solid rgba(100,72,156,.11); background:linear-gradient(135deg,#fbf8ff,#f2faf8); }
.bot-inbox-card { display:grid; gap:12px; padding:12px; }
.bot-inbox-head { display:flex; align-items:center; gap:10px; min-width:0; }
.bot-inbox-head>span { width:42px; height:42px; display:grid; place-items:center; flex:0 0 42px; color:#fff; border-radius:14px; background:linear-gradient(145deg,#6746cf,#b63f83 62%,#169385); }
.bot-inbox-head svg { width:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.bot-inbox-head strong,.bot-inbox-head small { display:block; }.bot-inbox-head strong { font-size:12px; }.bot-inbox-head small { color:#7c7082; font-size:9px; line-height:1.7; }
.bot-inbox-separation-note { margin:0; padding:9px 10px; color:#655b6b; border-radius:12px; background:#f5f1fa; font-size:9px; line-height:1.85; }
.bot-inbox-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:0; padding:0; list-style:none; }.bot-inbox-steps li { display:flex; align-items:center; gap:7px; min-height:48px; padding:8px; border:1px solid #ece5f0; border-radius:13px; background:#fff; }.bot-inbox-steps b { display:grid; place-items:center; width:22px; height:22px; flex:0 0 22px; color:#6d4bc6; border-radius:7px; background:#eee8fb; font-size:8px; }.bot-inbox-steps span { color:#675d6c; font-size:8px; line-height:1.7; }
.bot-inbox-actions { display:flex; align-items:center; gap:8px; }.bot-inbox-actions .button { min-height:44px; flex:1; }.bot-inbox-cancel,#refresh-bot-inbox { min-height:40px; padding:0 9px; color:#745b86; border:1px solid #e5dbea; border-radius:11px; background:#fff; cursor:pointer; font-size:9px; }
.bot-inbox-waiting { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:9px; padding:10px; color:#3d665f; border:1px solid rgba(44,151,130,.19); border-radius:14px; background:#effaf7; }.bot-inbox-waiting>i { width:26px; height:26px; border:3px solid rgba(35,148,128,.16); border-top-color:#299580; border-radius:50%; animation:inboxSpin .9s linear infinite; }.bot-inbox-waiting strong,.bot-inbox-waiting small { display:block; }.bot-inbox-waiting strong { font-size:10px; }.bot-inbox-waiting small { color:#6f918a; font-size:8px; }.bot-inbox-waiting time { color:#338474; font-size:9px; font-variant-numeric:tabular-nums; }
.bot-inbox-list { display:grid; gap:7px; width:100%; }.bot-inbox-item { display:flex; align-items:center; gap:9px; padding:9px; border:1px solid #dfece8; border-radius:13px; background:#fff; }.bot-inbox-item>div { flex:1; min-width:0; }.bot-inbox-item strong,.bot-inbox-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.bot-inbox-item small { color:#817688; font-size:8px; }.bot-inbox-item button { min-height:40px; }.bot-inbox-state { flex:0 0 auto; min-width:48px; padding:3px 6px; border-radius:999px; color:#24715c; background:#e7f4ef; font-size:8px; text-align:center; }.bot-inbox-item.is-loading { opacity:.82; }.bot-inbox-item.is-loading .bot-inbox-state { color:#9a641d; background:#fff1d9; }.bot-inbox-item.is-failed .bot-inbox-state { color:#a43f50; background:#fae5e8; }
@keyframes inboxSpin { to { transform:rotate(360deg); } } @keyframes sourcePanelIn { from { opacity:0; transform:translateY(5px); } }
.import-guide-platforms { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.import-guide-platforms section { padding:15px; border:1px solid #e7e1ed; border-radius:16px; background:#fbf9fc; }
.import-guide-platforms ol { margin:8px 0 0; padding-right:18px; color:#74697a; font-size:10px; }
.device-storage-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; margin-bottom:16px; padding:15px; }
.device-storage-card>div:first-child { display:flex; align-items:center; gap:10px; }.device-storage-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:#fff; background:linear-gradient(145deg,#6344ce,#159b8b); }
.device-storage-card p { margin:0; }.device-storage-card strong,.device-storage-card small { display:block; }.device-storage-card small { color:#7b7080; font-size:9px; }
.device-storage-list { grid-column:1/-1; display:grid; gap:7px; padding-top:12px; border-top:1px solid #ebe5ef; }
.device-storage-row { display:flex; align-items:center; gap:10px; padding:10px; border-radius:13px; background:#f8f5fa; }
.device-storage-row div { flex:1; min-width:0; }.device-storage-row strong,.device-storage-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.device-storage-row small { color:#817488; font-size:9px; }
.device-storage-row button { min-height:38px; border:1px solid #efd4db; border-radius:11px; color:#a34055; background:#fff5f7; cursor:pointer; }
.archive-local-actions { display:flex!important; flex-wrap:wrap; gap:7px; margin-top:10px; }
.archive-local-actions button { min-height:38px; padding:0 10px; border:1px solid #e2d8ea; border-radius:11px; color:#5e4770; background:#faf7fc; cursor:pointer; font-size:9px; }

html.is-offline [data-online-only] { opacity:.48; pointer-events:none; }
html.is-offline .ai-banner::after { content:"برای ساخت کپشن باید به اینترنت وصل شوید."; display:block; flex-basis:100%; color:#94652f; font-size:10px; }

.caption-connectivity-blocked>:not(.panel-heading):not(.caption-connectivity-card) { display:none!important; }
.caption-connectivity-card { display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:14px; margin-bottom:18px; padding:18px; border:1px solid rgba(105,73,183,.17); border-radius:22px; background:linear-gradient(135deg,#fbf8ff,#f2efff 58%,#eefaf7); box-shadow:0 16px 42px rgba(70,42,112,.08); }
.caption-connectivity-orb { position:relative; display:grid; place-items:center; width:56px; height:56px; color:#fff; border-radius:18px; background:linear-gradient(145deg,#6849cc,#af4080 65%,#178f84); box-shadow:0 12px 27px rgba(94,53,155,.2); }
.caption-connectivity-orb svg { width:28px; }.caption-connectivity-orb i { position:absolute; inset:-5px; border:2px solid transparent; border-top-color:#a88af0; border-left-color:#43b9a8; border-radius:22px; opacity:0; }
.caption-connectivity-card.is-checking .caption-connectivity-orb i,.caption-connectivity-card.is-waiting .caption-connectivity-orb i { opacity:1; animation:inboxSpin 1.2s linear infinite; }
.caption-connectivity-card.is-offline { border-color:rgba(205,130,53,.22); background:linear-gradient(135deg,#fffaf2,#fff5e7 62%,#f8f4fb); }.caption-connectivity-card.is-offline .caption-connectivity-orb { background:linear-gradient(145deg,#c87932,#ae4c72); }
.caption-connectivity-copy { min-width:0; }.caption-connectivity-copy small,.caption-connectivity-copy strong,.caption-connectivity-copy p { display:block; }.caption-connectivity-copy small { color:#7655bd; font-size:9px; }.caption-connectivity-copy strong { margin-top:1px; color:#3c3046; font-size:14px; font-weight:650; }.caption-connectivity-copy p { max-width:650px; margin:3px 0 0; color:#756b7a; font-size:10px; line-height:1.9; }
.caption-connectivity-actions { display:flex; align-items:stretch; gap:8px; }.caption-connectivity-actions .button { min-height:46px; white-space:nowrap; }
.ai-initial-action { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 17px; padding:16px; border:1px solid rgba(87,65,167,.16); border-radius:20px; background:linear-gradient(135deg,#fcfaff,#f2efff 62%,#edf9f6); }
.ai-initial-action>div { display:grid; gap:2px; }.ai-initial-action strong { color:#43344e; font-size:12px; }.ai-initial-action small { color:#83768a; font-size:9px; line-height:1.8; }.ai-initial-action .button { min-width:210px; min-height:48px; }

@media (max-width:860px) {
  html,body { min-height:100%; min-height:100dvh; }
  body { padding-bottom:calc(154px + env(safe-area-inset-bottom)); }
  .main-wrap { min-height:100dvh; }
  main { padding-bottom:calc(178px + env(safe-area-inset-bottom))!important; }
  .mobile-app-nav { position:fixed; z-index:48; left:8px; right:8px; bottom:max(8px,env(safe-area-inset-bottom)); height:64px; display:grid; grid-template-columns:repeat(4,1fr); padding:5px; border:1px solid rgba(102,74,129,.13); border-radius:22px; background:rgba(255,255,255,.96); box-shadow:0 16px 48px rgba(42,24,58,.18); }
  .mobile-app-nav button { display:grid; place-items:center; gap:1px; min-width:0; min-height:52px; border:0; border-radius:17px; color:#8a7d90; background:transparent; cursor:pointer; font-size:10px; }
  .mobile-app-nav button svg { width:22px; height:22px; }.mobile-app-nav button.active { color:#fff; background:linear-gradient(145deg,#6545cf,#b73e83 66%,#149482); box-shadow:0 10px 24px rgba(91,53,175,.22); }
  .mobile-stage-actions { position:fixed; z-index:49; left:8px; right:8px; bottom:calc(78px + env(safe-area-inset-bottom)); min-height:66px; display:grid; grid-template-columns:minmax(92px,.68fr) minmax(0,1.5fr); gap:8px; padding:8px; border:1px solid rgba(102,74,129,.14); border-radius:21px; background:rgba(255,255,255,.97); box-shadow:0 14px 42px rgba(42,24,58,.17); }
  .mobile-stage-actions button { min-width:0; min-height:50px; display:flex; align-items:center; justify-content:center; gap:7px; border-radius:15px; cursor:pointer; font-size:12px; font-weight:650; }
  .mobile-stage-actions svg { width:19px; }.mobile-stage-prev { color:#594a63; border:1px solid #e3dce8; background:#fff; }.mobile-stage-primary { color:#fff; border:0; background:linear-gradient(112deg,#6545cf,#b63f83 63%,#169385); box-shadow:0 9px 23px rgba(99,59,179,.2); }.mobile-stage-actions button:disabled { opacity:.52; box-shadow:none; cursor:not-allowed; }
  .mobile-stage-actions .mobile-stage-primary.sending,
  .mobile-stage-actions .mobile-stage-primary.sending:disabled { opacity:.72; cursor:wait; box-shadow:0 6px 16px rgba(99,59,179,.14); }
  .mobile-stage-primary.sending svg { display:none; }
  .mobile-stage-primary.sending:after { content:""; width:18px; height:18px; flex:0 0 18px; border:2px solid rgba(255,255,255,.38); border-top-color:#fff; border-radius:50%; animation:spin .75s linear infinite; }
  .mobile-stage-prev[hidden]+.mobile-stage-primary { grid-column:1/-1; }
  .sidebar { padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
  .topbar { padding-top:env(safe-area-inset-top); height:calc(62px + env(safe-area-inset-top))!important; }
  .mobile-start-over { min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:6px; margin-inline:10px 0; padding:0 11px; border:1px solid rgba(102,72,144,.16); border-radius:13px; color:#6545a9; background:linear-gradient(120deg,#faf7ff,#f1f8f6); cursor:pointer; font-size:11px; font-weight:570; white-space:nowrap; }
  .mobile-start-over svg { width:18px; height:18px; }
  .network-status { width:32px; padding:0; justify-content:center; }.network-status span { display:none; }
  .stage-panel>.panel-actions { display:none!important; }
  .poster-path-actions .next-step { display:none!important; }
  .audio-source-panel { padding:10px; border-radius:18px; }
  .audio-method-picker { grid-template-columns:1fr; }.audio-method-card { min-height:68px; }
  .channel-intake-card { grid-template-columns:50px minmax(0,1fr); min-height:230px; padding:16px; }.channel-intake-icon { width:48px; height:48px; border-radius:16px; }.channel-intake-copy strong { font-size:14px; }
  #browse-audio,#start-channel-intake,#generate-ai-content,#telegram-direct-send { display:none!important; }
  .bot-inbox-tools { border-radius:16px; }
  .bot-inbox-tools>summary { grid-template-columns:38px minmax(0,1fr) auto; min-height:58px; padding:9px 10px; }
  .bot-inbox-tools>summary>span { width:38px; height:38px; }
  .bot-inbox-card { padding:10px; }
  .bot-inbox-steps { grid-template-columns:1fr; }.bot-inbox-steps li { min-height:42px; }
  .bot-inbox-actions { width:100%; flex-direction:column; }.bot-inbox-actions .button,.bot-inbox-cancel,#refresh-bot-inbox { width:100%; }
  .bot-inbox-item { display:grid; grid-template-columns:auto minmax(0,1fr); }.bot-inbox-item button { grid-column:1/-1; width:100%; }
  .caption-connectivity-card { grid-template-columns:48px minmax(0,1fr); padding:15px; border-radius:19px; }.caption-connectivity-orb { width:46px; height:46px; border-radius:15px; }.caption-connectivity-orb svg { width:23px; }.caption-connectivity-actions { grid-column:1/-1; flex-direction:column; }.caption-connectivity-actions .button { width:100%; white-space:normal; }
  .ai-initial-action { align-items:stretch; flex-direction:column; padding:14px; }.ai-initial-action .button { width:100%; min-width:0; }
  .import-guide-platforms { grid-template-columns:1fr; }
  .device-storage-card { grid-template-columns:1fr; }.device-storage-card .button { width:100%; }.device-storage-list { grid-column:1; }
  .app-update-banner { left:10px; right:10px; bottom:calc(158px + env(safe-area-inset-bottom)); max-width:none; }
  .mobile-stage-actions[hidden] ~ .app-update-banner { bottom:calc(82px + env(safe-area-inset-bottom)); }
  .toast-stack { bottom:calc(158px + env(safe-area-inset-bottom))!important; }
  input,textarea,select { font-size:16px!important; }
  .poster-only-archive-link { display:none!important; }
  .poster-only-new-link:not([hidden]) { display:inline-flex; width:100%; min-height:46px; align-items:center; justify-content:center; border:0; border-radius:12px; color:#fff; background:linear-gradient(110deg,#6244d2,#b73f83 64%,#159889); }
  .telegram-publish-success { min-height:390px; display:grid; place-items:center; align-content:center; gap:16px; padding:28px 18px; text-align:center; border:1px solid rgba(64,151,119,.18); border-radius:24px; background:radial-gradient(circle at 50% 0,rgba(111,79,209,.13),transparent 42%),linear-gradient(145deg,#fbf9ff,#effaf6); }
  .telegram-publish-success[hidden] { display:none!important; }
  .telegram-publish-success-icon { width:82px; height:82px; display:grid; place-items:center; border-radius:27px; color:#fff; background:linear-gradient(145deg,#6748d1,#ba4385 58%,#1a9a88); box-shadow:0 18px 38px rgba(93,54,168,.24); }
  .telegram-publish-success-icon svg { width:42px; height:42px; stroke-width:2.4; }
  .telegram-publish-success small { color:#4f8a79; font-size:10px; }
  .telegram-publish-success h3 { margin:3px 0 5px; color:#3e3046; font-size:22px; }
  .telegram-publish-success p { max-width:420px; margin:0; color:#776d7b; font-family:Tahoma,sans-serif; font-size:11px; line-height:2; }
  .telegram-publish-success .button { width:min(100%,320px); margin-top:5px; }
  .stage-panel[data-stage="8"].mobile-publish-success > :not(.telegram-publish-success) { display:none!important; }
}

@media (max-width:430px) {
  .topbar { padding-inline:10px!important; gap:6px; }
  .topbar-title { flex:1; min-width:0; gap:6px; }
  .topbar-title strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
  .topbar-actions { flex:0 0 auto; gap:5px; }
  .mobile-start-over { min-height:40px; margin-inline:4px 0; padding-inline:9px; font-size:10px; }
  .stage-panel { border-radius:18px!important; padding:15px!important; }
  .panel-heading { padding-bottom:14px; }
  .panel-heading h2 { font-size:17px!important; }.panel-heading p { font-size:10px!important; line-height:1.85; }
  .button { min-height:48px; font-size:13px; }
  .mobile-app-nav { left:6px; right:6px; border-radius:20px; }
  .mobile-stage-actions { left:6px; right:6px; grid-template-columns:88px minmax(0,1fr); border-radius:19px; }.mobile-stage-actions button { min-height:48px; font-size:11px; }
  .dropzone { min-height:205px!important; padding:16px!important; }
  .upload-illustration { width:54px; height:54px; border-radius:17px; }
  .content-field textarea { min-height:112px; line-height:1.85; }
  .share-hub { padding:14px!important; border-radius:19px!important; }
  .share-hub-head,.share-hub-copy { min-width:0; }
  .telegram-direct-panel { margin:11px 0!important; padding:12px!important; gap:10px!important; border-radius:16px!important; }
  .telegram-direct-icon { width:42px!important; height:42px!important; border-radius:13px!important; }
  .telegram-direct-panel button { min-height:50px!important; }
  .download-card { min-height:64px; }
  .install-sheet { padding:8px; }.install-sheet-card { padding:23px 18px; border-radius:24px; }
}

@media (max-width:350px) {
  .topbar-title strong { font-size:12px; }
  .mobile-start-over { width:42px; padding:0; margin-left:2px; }
  .mobile-start-over span { display:none; }
  .profile .avatar { width:31px; height:31px; }
}

@media (prefers-reduced-motion:reduce) {
  .app-splash i::after,.app-splash,.install-sheet-card { animation:none!important; transition:none!important; }
}
html.low-power .install-sheet,html.low-power .mobile-app-nav,html.low-power .mobile-stage-actions { backdrop-filter:none!important; }

/* -----------------------------------------------------------------------
   Studio visual refresh
   Presentation-only layer. Keep this block last so the existing workflow,
   controls and feature-specific states remain untouched while the surfaces
   share one calm, readable visual system.
------------------------------------------------------------------------ */
:root {
  --ui-ink: #2a2035;
  --ui-muted: #756a7d;
  --ui-subtle: #938798;
  --ui-canvas: #f7f5fb;
  --ui-card: rgba(255,255,255,.94);
  --ui-line: rgba(82,54,98,.13);
  --ui-brand: #6849cf;
  --ui-brand-dark: #4d328f;
  --ui-plum: #943c80;
  --ui-teal: #1f9b8b;
  --ui-warm: #dc925b;
  --ui-shadow: 0 18px 50px rgba(50,31,70,.075);
  --ui-radius: 22px;
}

html { background: var(--ui-canvas); }
body {
  color: var(--ui-ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(119,87,215,.12), transparent 28rem),
    radial-gradient(circle at 96% 82%, rgba(31,164,145,.1), transparent 30rem),
    var(--ui-canvas);
  font-weight: 430;
  letter-spacing: -.005em;
  text-rendering: optimizeLegibility;
}
body::before { opacity: .1; }

.sidebar {
  width: 258px;
  padding: 24px 15px 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(218,80,154,.24), transparent 17rem),
    radial-gradient(circle at 100% 100%, rgba(29,158,145,.18), transparent 18rem),
    linear-gradient(165deg, #251735 0%, #20182b 58%, #123b3d 132%);
  box-shadow: -16px 0 48px rgba(40,21,54,.2);
}
.main-wrap { margin-right: 258px; }
.brand { padding: 2px 5px 25px; }
.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 17px;
  background: linear-gradient(145deg,#7d3b71,#422354) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.17) !important;
}
.brand strong { font-size: 16px; font-weight: 600; }
.brand span { font-size: 10px; color: #c7b9cd; }
.nav-list { gap: 5px; }
.nav-item {
  min-height: 46px;
  border-radius: 14px;
  padding: 11px 12px;
  color: #d0c5d3;
  font-size: 12px;
}
.nav-item.active {
  color: #432146;
  background: linear-gradient(135deg,#fff,#f8edf6);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.nav-item.active::before { right: 5px; width: 3px; height: 22px; border-radius: 99px; background: linear-gradient(#9b4dca,#2ba89b); }
.nav-icon { width: 23px; height: 23px; }
.nav-icon svg { width: 21px; }
.sidebar-tip { border-radius: 17px; padding: 14px 12px; background: rgba(255,255,255,.06); }
.sidebar-tip strong { font-size: 12px; }
.sidebar-tip p { font-size: 10px; line-height: 1.75; }
.sidebar-footer { font-size: 9px; }
.sidebar-install { margin-top: 10px; min-height: 42px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; color: #eadfeb; background: rgba(255,255,255,.06); cursor: pointer; font-size: 10px; }
.sidebar-install svg { width: 16px; vertical-align: middle; margin-left: 5px; }

.topbar {
  height: 78px;
  padding-inline: 30px;
  border-bottom-color: rgba(82,54,98,.1);
  background: rgba(253,252,255,.88);
  box-shadow: 0 10px 32px rgba(60,38,78,.045);
  backdrop-filter: blur(18px) saturate(1.15);
}
.topbar-title { gap: 11px; }
.topbar-title .eyebrow { padding: 5px 9px; border-radius: 999px; color: #7650bc; background: #f0eafb; font-size: 9px; }
.topbar-title strong { color: #2f223a; font-size: 16px; font-weight: 600; }
.topbar-actions { gap: 11px; }
.autosave { padding-left: 14px; }
.autosave strong { font-size: 10px; }
.autosave small { font-size: 9px; }
.network-status { min-height: 34px; }
.profile { gap: 10px; }
.profile-copy strong { font-size: 12px; }
.profile-copy small { font-size: 9px; }
.avatar { width: 40px; height: 40px; border-radius: 14px; }
.icon-button { width: 40px; height: 40px; border-radius: 12px; }

main { padding: 30px 32px 64px; }
.studio-heading,.page-heading { margin-bottom: 22px; padding: 7px 2px 5px; }
.section-kicker { padding: 5px 10px; border-radius: 999px; font-size: 10px; }
.studio-heading h1,.page-heading h1 { margin: 6px 0 2px; color: #2d2140; font-size: clamp(24px,2.35vw,32px); font-weight: 570; letter-spacing: -.035em; }
.studio-heading p,.page-heading p { color: var(--ui-muted); font-size: 12px; line-height: 1.9; }
.overall-chip { min-height: 58px; padding: 8px 12px; border-radius: 17px; border-color: var(--ui-line); background: rgba(255,255,255,.84); }
.overall-chip small { font-size: 9px; }.overall-chip strong { font-size: 11px; }
.mini-ring { width: 44px; height: 44px; }

.card,.stage-panel,.preview-card,.table-card,.settings-main,.policy-card,.audit-feed,.project-gallery {
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-card) !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: blur(13px) saturate(1.06);
}
.wizard { min-height: 76px; padding: 16px 20px; margin-bottom: 22px; border-radius: 20px !important; border-color: var(--ui-line); background: linear-gradient(135deg,rgba(255,255,255,.97),rgba(248,244,252,.9)) !important; box-shadow: 0 12px 32px rgba(59,38,79,.06); }
.wizard-step { gap: 10px; }
.wizard-step>span { width: 38px; height: 38px; flex-basis: 38px; }
.wizard-step div strong { color: #6b5f70; font-size: 11px; font-weight: 570; }
.wizard-step div small { color: #968b9b; font-size: 9px; }
.wizard-step.active>span { background: linear-gradient(145deg,#7656d9,#8e3c86); box-shadow: 0 0 0 5px #f0e9fa, 0 9px 20px rgba(103,69,191,.2); }
.wizard-step.active div strong { color: var(--ui-brand-dark); }
.wizard-line { margin-inline: 14px; background: #e6deea; }
.wizard-line.completed { background: linear-gradient(90deg,#9d73db,#55b4a1); }

.workspace-grid { gap: 24px; }
.stage-panel { padding: 30px; }
.panel-heading { padding-bottom: 23px; }
.panel-heading h2 { margin: 7px 0 2px; color: #30243c; font-size: 21px; font-weight: 590; }
.panel-heading p { color: var(--ui-muted); font-size: 11px; line-height: 1.9; }
.step-badge { padding: 5px 10px; border-radius: 999px; color: #6543ae; background: #f0eafb; font-size: 9px; }
.help-button { width: 32px; height: 32px; border-color: #e1d7e8; color: #735f80; background: #fbf9fd; }
.template-grid { gap: 16px; }
.template-card { padding: 9px; border-radius: 18px; border-color: var(--ui-line); background: #fff; }
.template-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(67,38,75,.11); }
.template-card.selected { border-color: #8b61d6; box-shadow: 0 0 0 4px #f0eafa, 0 16px 34px rgba(82,47,122,.1); }
.template-thumb { height: 190px; border-radius: 13px; }
.template-info { padding: 10px 5px 3px; }
.template-info strong { font-size: 12px; font-weight: 570; }.template-info small { font-size: 9px; }.template-info em { font-size: 8px; }
.form-section { margin-top: 26px; padding-top: 23px; }
.form-section-head strong { font-size: 13px; }.form-section-head small { font-size: 9px; }
.field-label { margin-top: 16px; font-size: 11px; font-weight: 540; }
.input-wrap textarea,.content-field textarea,.text-input { min-height: 48px; padding: 12px 14px; border-radius: 13px; border-color: var(--ui-line); color: var(--ui-ink); background: #fcfbfe; font-size: 13px; }
.input-wrap textarea { min-height: 84px; }
.field-hint { color: #887b8d; font-size: 9px; line-height: 1.8; }
.date-input,.speaker-input { height: 48px; border-radius: 13px; border-color: var(--ui-line); background: #fcfbfe; }
.panel-actions { margin-top: 29px; padding-top: 20px; }
.panel-actions>span { color: #85788a; font-size: 10px; }
.button { min-height: 46px; padding-inline: 19px; border-radius: 13px; font-size: 12px; font-weight: 560; }
.button.primary { background: linear-gradient(120deg,#6a4bd4 0%,#85449f 54%,#248f82 130%); box-shadow: 0 12px 25px rgba(92,60,181,.19); }
.button.primary:hover { background: linear-gradient(120deg,#7656df,#954cae 54%,#299a8c 130%); }
.button.secondary { color: #6542ad; border-color: #e1d5f1; background: #f5f0fc; }
.button.ghost { color: #655b70; border-color: #dfd7e5; background: #fff; }
.quick-download,.share-main { min-height: 46px; border-radius: 13px; background: linear-gradient(120deg,#6a4bd4,#82409b 59%,#237f78) !important; }
.preview-column { top: 100px; }
.preview-card { padding: 18px; }
.preview-header { margin-bottom: 15px; }.preview-header strong { font-size: 13px; }
.canvas-shell { border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(78,50,96,.08); }
.preview-meta { padding: 13px 3px; }.preview-meta strong { font-size: 10px; }.preview-meta small,.preview-meta>span { font-size: 8px; }

.dropzone { min-height: 290px; border-radius: 18px; border-color: #d8cae6; background: linear-gradient(145deg,#fcfaff,#f3faf8); }
.dropzone:hover,.dropzone.dragover,.dropzone:focus { border-color: #8062d5; background: #f9f6ff; box-shadow: 0 0 0 4px #eee8fb; }
.upload-illustration { width: 72px; height: 72px; border-radius: 22px; color: #6746c9; background: #eee8fb; }
.dropzone strong { font-size: 15px; }.dropzone p { font-size: 10px; }.dropzone small { font-size: 8px; }
.audio-file-card,.audio-track,.option-row { border-radius: 14px; border-color: var(--ui-line); background: #fbf9fd; }
.audio-file-card { padding: 14px; }.file-copy strong { font-size: 12px; }.file-copy span { font-size: 9px; }
.audio-editor { padding: 18px; border-radius: 18px; border-color: #e1d5e7; background: linear-gradient(145deg,#fff,#faf5fb); }
.audio-editor-head strong { font-size: 13px; }.audio-editor-head small { font-size: 9px; }
.waveform-shell { min-height: 172px; border-radius: 17px; border-color: #dacde5; background: linear-gradient(180deg,#fff,#f8f3fa); }
#waveform-canvas { height: 172px; }
.process-card { padding: 16px; border-radius: 16px; }.process-head strong { font-size: 12px; }.process-head small { font-size: 8px; }
.progress-track { height: 8px; border-radius: 999px; background: #e9e1ed; }.progress-track i { border-radius: inherit; background: linear-gradient(90deg,#704fd5,#d55c9f 58%,#2ca695); }

.share-hub { padding: 25px; border-radius: 22px; border-color: rgba(112,76,185,.16); background: linear-gradient(135deg,#f8f1fc 0%,#fff 55%,#edf9f6 100%); }
.share-hub-copy strong { color: #33253d; font-size: 15px; }.share-hub-copy small { font-size: 10px; }.share-hub-copy p { font-size: 10px; line-height: 1.8; }
.share-destination { min-height: 58px; border-radius: 15px; }.share-destination b { font-size: 11px; }.share-destination small { font-size: 8px; }
.share-step { min-height: 98px; border-radius: 17px; }.share-step strong { font-size: 11px; }.share-step p { font-size: 8px; }
.share-main { min-height: 48px; font-size: 12px; }
.final-section-heading { margin-top: 28px; }.final-section-heading strong { font-size: 14px; }.final-section-heading small { font-size: 10px; }

.analytics-visits-table th { padding: 13px 14px; font-size: 10px; }.analytics-visits-table td { padding: 14px; font-size: 10px; }.analytics-visits-table td strong { font-size: 11px; }.analytics-visits-table td small { font-size: 9px; }
.audit-session-card { border-radius: 20px; }.audit-session-user strong { font-size: 14px; }.audit-session-duration strong { font-size: 16px; }
.archive-grid { gap: 20px; }.archive-card { border-radius: 20px; }.archive-copy h3 { font-size: 15px; }.archive-copy p { font-size: 11px; }

/* The installed mobile shell keeps both navigation layers visible without
   covering the working area or shrinking touch targets. */
@media (max-width: 860px) {
  body { padding-bottom: calc(158px + env(safe-area-inset-bottom)); }
  .main-wrap { margin-right: 0; }
  .topbar { height: calc(68px + env(safe-area-inset-top)) !important; padding-inline: 15px; }
  main { padding: 20px 14px calc(178px + env(safe-area-inset-bottom)) !important; }
  .wizard { margin: 0 -2px 15px; padding: 12px 14px; border-radius: 18px !important; }
  .mobile-flow-status { position: sticky; top: calc(68px + env(safe-area-inset-top)); z-index: 28; border-color: rgba(103,70,178,.13); border-radius: 16px; background: rgba(253,251,255,.96); box-shadow: 0 12px 28px rgba(63,38,81,.1); }
  .stage-panel { padding: 22px; border-radius: 21px !important; }
  .panel-heading h2 { font-size: 20px; }.panel-heading p { font-size: 11px; }
  .template-thumb { height: 180px; }
  .mobile-stage-actions { left: 10px; right: 10px; bottom: calc(78px + env(safe-area-inset-bottom)); min-height: 70px; padding: 9px; border-radius: 20px; border-color: rgba(103,70,178,.14); background: rgba(255,255,255,.97); box-shadow: 0 15px 38px rgba(54,32,72,.18); }
  .mobile-stage-actions button { min-height: 52px; border-radius: 15px; font-size: 13px; }
  .mobile-stage-primary { background: linear-gradient(120deg,#6a4bd4,#87459f 58%,#248f82); }
  .mobile-app-nav { left: 10px; right: 10px; bottom: max(9px,env(safe-area-inset-bottom)); height: 66px; border-radius: 20px; border-color: rgba(103,70,178,.13); box-shadow: 0 15px 40px rgba(54,32,72,.18); }
  .mobile-app-nav button { min-height: 54px; border-radius: 16px; font-size: 11px; }.mobile-app-nav button svg { width: 23px; height: 23px; }
  .preview-column { position: static; }.stage-panel>.preview-column { margin-top: 21px; }
  .share-hub { padding: 18px; }.share-hub-head { gap: 14px; }.share-destinations { min-width: 0; width: 100%; }
  .analytics-visits-table { min-width: 980px; }
}

@media (max-width: 560px) {
  main { padding-inline: 10px !important; }
  .studio-heading,.page-heading { margin-bottom: 15px; padding-inline: 3px; }
  .studio-heading h1,.page-heading h1 { font-size: 22px; }.studio-heading p,.page-heading p { font-size: 11px; }
  .stage-panel { padding: 17px !important; }.panel-heading { padding-bottom: 17px; }.panel-heading h2 { font-size: 18px; }
  .template-grid { gap: 11px; }.template-thumb { height: 158px; }.template-info strong { font-size: 11px; }
  .form-section { margin-top: 19px; padding-top: 18px; }.input-wrap textarea { min-height: 78px; }
  .dropzone { min-height: 235px; padding: 19px; }.upload-illustration { width: 60px; height: 60px; }
  .share-hub { padding: 15px; border-radius: 18px; }.share-hub-copy strong { font-size: 14px; }.share-hub-copy p { font-size: 9px; }
  .share-flow { grid-template-columns: 1fr; gap: 8px; }.share-flow-line { display: none; }.share-step { min-height: 82px; }
  .share-destinations { grid-template-columns: 1fr; }.share-picks { justify-self: stretch; }.share-picks label { justify-content: center; min-height: 30px; font-size: 9px; }
  .analytics-visits-card { padding: 13px; }.analytics-visits-table-wrap { border-radius: 13px; }
}

@media (max-width: 380px) {
  .topbar { padding-inline: 9px; }.topbar-title strong { font-size: 13px; }.topbar-title .eyebrow { display: none; }
  .mobile-start-over { min-height: 38px; padding-inline: 8px; font-size: 10px; }.stage-panel { padding: 15px !important; }
  .mobile-stage-actions { left: 6px; right: 6px; grid-template-columns: 84px minmax(0,1fr); }.mobile-stage-actions button { font-size: 11px; }
  .mobile-app-nav { left: 6px; right: 6px; }.mobile-app-nav button { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}
html.low-power body::before { display: none; }
html.low-power .card,html.low-power .stage-panel,html.low-power .preview-card,html.low-power .table-card,html.low-power .settings-main,html.low-power .policy-card,html.low-power .audit-feed,html.low-power .project-gallery { backdrop-filter: none !important; box-shadow: 0 8px 22px rgba(50,31,70,.06) !important; }

/* Final interaction fixes ------------------------------------------------ */
/* The existing wizard at the top is the single progress source. */
.mobile-flow-status { display: none !important; }

.audio-add-picker { position: relative; display: inline-flex; }
.audio-add-picker > #add-audio { position: relative; z-index: 2; min-width: 106px; }
.audio-add-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  right: 0;
  width: 224px;
  padding: 6px;
  border: 1px solid rgba(103,70,178,.17);
  border-radius: 15px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 42px rgba(47,29,66,.18);
  animation: audioMenuIn .2s ease both;
}
.audio-add-menu[hidden] { display: none !important; }
.audio-add-menu button {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  align-items: center;
  column-gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 7px 8px;
  border: 0;
  border-radius: 11px;
  color: #40334c;
  background: transparent;
  text-align: right;
  cursor: pointer;
}
.audio-add-menu button:hover { background: #f5f0fc; }
.audio-add-menu button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; background: linear-gradient(145deg,#6b4bd5,#a94692); font-size: 17px; }
.audio-add-menu button:last-child > span { background: linear-gradient(145deg,#2f9ed0,#2575b4); font-size: 15px; }
.audio-add-menu button b,.audio-add-menu button small { display: block; }
.audio-add-menu button b { font-size: 10px; font-weight: 600; }.audio-add-menu button small { color: #8c8192; font-size: 8px; }

/* Show a real busy affordance for every AI action, including the mobile
   wizard action that proxies the same button. */
.ai-start-button.is-busy,
[data-generate].is-busy,
#ai-inline-retry.is-busy {
  position: relative;
  cursor: wait !important;
  pointer-events: none;
  opacity: .78;
}
.ai-start-button.is-busy > svg,
[data-generate].is-busy > svg { opacity: .15; }
.ai-start-button.is-busy::before,
[data-generate].is-busy::before,
#ai-inline-retry.is-busy::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  inset-inline-start: 14px;
  inset-block-start: 50%;
  margin-top: -9px;
  border: 2px solid rgba(255,255,255,.38);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .75s linear infinite !important;
}
[data-generate].is-busy::before { width: 12px; height: 12px; inset-inline-start: 8px; margin-top: -7px; border-width: 1.5px; }
#ai-inline-retry.is-busy::before { border-color: rgba(161,64,80,.25); border-top-color: #a14050; }
.mobile-stage-primary.sending::after,
.mobile-stage-primary.sending-ai::after { animation: spin .75s linear infinite !important; }

@keyframes audioMenuIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

/* Low-power devices still receive short, meaningful feedback animations.
   Heavy blur remains disabled, but stage transitions, progress and spinners
   must not look frozen. */
html.low-power .stage-panel.active,
html.low-power .view.active > *,
html.low-power .audio-source-panel.active,
html.low-power .audio-add-menu { animation-duration: .42s !important; animation-iteration-count: 1 !important; }
html.low-power .button.primary::before,
html.low-power .share-main::before,
html.low-power .quick-download::before { animation: actionOrbit 3.2s linear infinite !important; }
html.low-power .ai-progress-card::after { animation: aiAurora 7s linear infinite !important; }
html.low-power .ai-thinking-orb > i,
html.low-power .ai-progress-track > span,
html.low-power .ai-progress-timeline span.active::before,
html.low-power .ai-wait-dots i,
html.low-power .mobile-stage-primary.sending::after,
html.low-power .mobile-stage-primary.sending-ai::after,
html.low-power .ai-start-button.is-busy::before,
html.low-power [data-generate].is-busy::before { animation-iteration-count: infinite !important; animation-duration: 1.2s !important; }

@media (max-width: 620px) {
  .audio-add-picker { width: 100%; justify-content: flex-end; }
  .audio-add-menu { left: 0; right: auto; width: min(224px, calc(100vw - 42px)); }
}

@media (prefers-reduced-motion: reduce) {
  .audio-add-menu { animation: none; }
  .ai-start-button.is-busy::before,
  [data-generate].is-busy::before,
  #ai-inline-retry.is-busy::before,
  .mobile-stage-primary.sending::after,
  .mobile-stage-primary.sending-ai::after { animation-duration: 1.4s !important; }
}