*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  button, a, [role="button"] { -webkit-tap-highlight-color: transparent; }

  :root {
    --bg:        #0f1117;
    --surface:   #181c27;
    --surface2:  #1f2535;
    --border:    #2a2f42;
    --border2:   #3a4058;
    --text:      #e2e6f0;
    --muted:     #5a6282;
    --accent:    #2563eb;
    --accent2:   #3b82f6;
    --green:     #2dd47e;
    --sans:      'DM Sans', sans-serif;
    --display:   'Syne', sans-serif;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    height: 100vh;
    overflow: hidden;
    /* Prevent elastic scroll bounce on iOS */
    overscroll-behavior: none;
  }

  /* views — each fills exactly the screen */
  .view {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .view.hidden { display: none; }
  /* pricing view — flex column, fills viewport exactly */
  #pricingView {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }
  #pricingView > nav {
    flex-shrink: 0;
  }
  /* each sub-page fills remaining height after nav */
  #pricingCards, #featuresPage {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #pricingCards::-webkit-scrollbar,
  #featuresPage::-webkit-scrollbar { display: none; }
  /* how it works scrolls freely but no visible scrollbar */
  #howItWorksPage {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  #howItWorksPage::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  #appView { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s; }
  #appView.visible { opacity: 1; transform: translateY(0); }

  /* background glow */
  .bg-glow {
    position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  }
  .bg-glow::before {
    content: ''; position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
    width: 900px; height: 500px;
    background: radial-gradient(ellipse at center, rgba(124,111,255,0.18) 0%, transparent 70%);
    border-radius: 50%; animation: floatGlow 8s ease-in-out infinite alternate;
  }
  .bg-glow::after {
    content: ''; position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
    width: 600px; height: 300px;
    background: radial-gradient(ellipse at center, rgba(59,130,246,0.1) 0%, transparent 65%);
    border-radius: 50%; animation: floatGlow 6s ease-in-out infinite alternate-reverse;
  }
  @keyframes floatGlow {
    from { transform: translateX(-50%) scale(1); opacity: 0.8; }
    to   { transform: translateX(-50%) scale(1.1); opacity: 1; }
  }
  .arc-deco {
    position: absolute; top: -180px; left: 50%; transform: translateX(-50%);
    width: 700px; height: 360px; border: 1px solid rgba(124,111,255,0.14); border-radius: 50%; pointer-events: none;
  }
  .arc-deco::after {
    content: ''; position: absolute; inset: 20px; border: 1px solid rgba(59,130,246,0.07); border-radius: 50%;
  }

  /* navigation */
  nav {
    position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between;
    padding: 22px 48px; border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px); background: rgba(15,17,23,0.7);
  }
  .nav-logo {
    font-family: var(--display); font-size: 1.25rem; font-weight: 800; color: var(--text);
    letter-spacing: -0.02em; text-decoration: none; cursor: pointer;
  }
  .nav-logo span { color: var(--accent2); }
  .nav-links { display: flex; gap: 32px; list-style: none; }
  .nav-links a {
    font-size: 0.85rem; font-weight: 500; color: var(--muted); text-decoration: none;
    transition: color 0.2s; cursor: pointer;
  }
  .nav-links a:hover { color: var(--text); }
  .nav-cta {
    font-size: 0.82rem; font-weight: 600; padding: 9px 20px; border-radius: 8px;
    border: 1px solid var(--border2); background: var(--surface2); color: var(--text);
    cursor: pointer; text-decoration: none; transition: all 0.2s;
  }
  .nav-cta:hover { border-color: var(--accent); color: var(--accent2); }

  /* hero (pricing) */
  .hero {
    position: relative; z-index: 1; text-align: center; padding: 36px 24px 24px;
  }
  .hero-pill {
    display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent2);
    background: rgba(124,111,255,0.12); border: 1px solid rgba(124,111,255,0.3);
    padding: 5px 14px; border-radius: 20px; margin-bottom: 12px;
  }
  .hero-pill::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent2);
    animation: blink 1.6s step-end infinite;
  }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
  .hero h1 {
    font-family: var(--display); font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 800;
    line-height: 1.08; letter-spacing: -0.03em; color: var(--text); max-width: 680px; margin: 0 auto 10px;
  }
  .hero h1 em {
    font-style: normal; background: linear-gradient(135deg, var(--accent2), #60a5fa);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  }
  .hero p {
    font-size: 0.92rem; color: var(--muted); font-weight: 300; max-width: 440px; margin: 0 auto 20px; line-height: 1.55;
  }

  /* toggle */
  .toggle-wrap {
    display: inline-flex; align-items: center; gap: 12px; font-size: 0.85rem; color: var(--muted);
    background: var(--surface); border: 1px solid var(--border); padding: 6px 18px; border-radius: 100px;
  }
  .toggle-wrap .lbl { transition: color 0.2s; }
  .toggle-wrap .lbl.on { color: var(--text); font-weight: 500; }
  .toggle { position: relative; width: 40px; height: 22px; cursor: pointer; flex-shrink: 0; }
  .toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
  .t-track { position: absolute; inset: 0; border-radius: 100px; background: var(--border2); transition: background 0.25s; }
  .toggle input:checked + .t-track { background: var(--accent); }
  .t-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: white; transition: transform 0.25s; pointer-events: none; }
  .toggle input:checked ~ .t-thumb { transform: translateX(18px); }
  .save-badge {
    font-size: 0.68rem; font-weight: 700; background: rgba(124,111,255,0.15); color: var(--green);
    border: 1px solid rgba(124,111,255,0.3); padding: 2px 8px; border-radius: 20px;
  }

  /* pricing cards (original – fully restored) */
  .cards-section {
    position: relative; z-index: 1; padding: 0 24px 32px;
  }
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1320px;
    margin: 0 auto;
    align-items: start;
  }
  .plan-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    padding: 18px 16px; position: relative; transition: transform 0.25s, box-shadow 0.25s;
    animation: fadeUp 0.6s ease both;
    font-size: 0.92rem;
  }
  .plan-card:nth-child(1) { animation-delay: 0.1s; }
  .plan-card:nth-child(2) { animation-delay: 0.22s; }
  .plan-card:nth-child(3) { animation-delay: 0.34s; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .plan-card:hover { transform: translateY(-5px); box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
  .plan-card.featured {
    border-color: var(--accent); background: linear-gradient(160deg, #1a2340 0%, #0a0c14 60%);
    box-shadow: 0 0 0 1px var(--accent), 0 0 60px rgba(124,111,255,0.22); transform: translateY(-8px);
  }
  .plan-card.featured:hover { transform: translateY(-14px); }
  .plan-card.featured::before {
    content: ''; position: absolute; inset: -1px; border-radius: 17px;
    background: linear-gradient(135deg, rgba(124,111,255,0.35), transparent 55%);
    pointer-events: none; z-index: -1;
  }
  .plan-name {
    font-family: var(--display); font-size: 1rem; font-weight: 700; color: var(--text);
    margin-bottom: 4px; display: flex; align-items: center; gap: 10px;
  }
  .popular-badge {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    background: var(--accent); color: white; padding: 3px 9px; border-radius: 20px;
  }
  .plan-price {
    font-family: var(--display); font-size: 2.4rem; font-weight: 800; letter-spacing: -0.04em;
    color: var(--text); margin: 10px 0 2px; line-height: 1;
  }
  .plan-price.custom { font-size: 2rem; }
  .plan-billing { font-size: 0.75rem; color: var(--muted); margin-bottom: 16px; }
  .p-divider { height: 1px; background: var(--border); margin-bottom: 14px; }
  .features-label {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 10px;
  }
  .features-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
  .features-list li {
    display: flex; align-items: flex-start; gap: 8px; font-size: 0.82rem; color: var(--text); line-height: 1.4;
  }
  .features-list li::before { content: '✓'; color: var(--green); font-size: 0.75rem; font-weight: 700; margin-top: 2px; flex-shrink: 0; }
  .new-tag {
    font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    background: rgba(124,111,255,0.12); color: var(--green); border: 1px solid rgba(124,111,255,0.25);
    padding: 2px 6px; border-radius: 4px; margin-left: 4px; vertical-align: middle;
  }
  .plan-btn {
    width: 100%; font-family: var(--display); font-size: 0.9rem; font-weight: 700;
    letter-spacing: 0.02em; padding: 14px; border-radius: 10px; cursor: pointer;
    transition: all 0.2s; border: 1px solid var(--border2); background: transparent; color: var(--text);
  }
  .plan-btn:hover { border-color: var(--accent2); color: var(--accent2); background: rgba(124,111,255,0.08); }
  .plan-btn.free-btn { border-color: var(--green); color: var(--green); position: relative; overflow: hidden; }
  .plan-btn.free-btn::after {
    content: ''; position: absolute; inset: 0; background: rgba(124,111,255,0.07); opacity: 0; transition: opacity 0.2s;
  }
  .plan-btn.free-btn:hover {
    background: rgba(124,111,255,0.12); border-color: var(--green); color: var(--green);
    box-shadow: 0 4px 20px rgba(124,111,255,0.25); transform: translateY(-1px);
  }
  .plan-btn.free-btn:hover::after { opacity: 1; }
  .plan-btn.primary {
    background: var(--accent); border-color: var(--accent); color: white;
    box-shadow: 0 4px 24px rgba(124,111,255,0.4);
  }
  .plan-btn.primary:hover {
    background: #4c3fe0; border-color: #4c3fe0; color: white;
    box-shadow: 0 8px 32px rgba(124,111,255,0.55); transform: translateY(-1px);
  }

  footer {
    position: relative; z-index: 1; text-align: center; padding: 14px 24px;
    border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--muted);
  }

  /* --- FEATURES PAGE (separate, not interfering) --- */
  .features-page {
    position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 24px 20px 32px;
  }
  .features-header { text-align: center; margin-bottom: 24px; }
  .features-header h1 {
    font-family: var(--display); font-size: 2rem; font-weight: 800; letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--accent2), #a5b4fc);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    margin-bottom: 8px;
  }
  .features-header p { font-size: 0.95rem; color: var(--muted); max-width: 600px; margin: 0 auto; }

  .features-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px;
  }
  .features-grid-6 { grid-template-rows: auto; }
  @media (max-width: 900px) { .features-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .features-grid { grid-template-columns: 1fr; } }

  .feature-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px 18px;
    transition: transform 0.3s, box-shadow 0.3s; backdrop-filter: blur(4px);
  }
  .feature-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,0.4); border-color: var(--accent2); }
  .feature-icon { font-size: 1.8rem; margin-bottom: 10px; color: var(--accent2); }
  .feature-card h3 {
    font-family: var(--display); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em;
    margin-bottom: 8px; color: var(--text);
  }
  .feature-card h3 span {
    font-size: 0.75rem; background: rgba(124,111,255,0.2); color: var(--green);
    padding: 2px 6px; border-radius: 30px; margin-left: 8px; vertical-align: middle;
  }
  .feature-desc { font-size: 0.88rem; color: #b0c0d0; line-height: 1.5; margin-bottom: 12px; }
  .feature-stats { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: 12px; }
  .feature-stats i { color: var(--green); }

  .feature-row2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
  @media (max-width: 600px) { .feature-row2 { grid-template-columns: 1fr; } }

  .highlight-card {
    background: var(--surface2); border: 1px solid var(--border2); border-radius: 16px; padding: 20px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .highlight-card .stat { font-size: 2rem; font-weight: 800; font-family: var(--display); color: var(--green); }
  .highlight-card p { font-size: 0.95rem; color: var(--text); }
  .highlight-card small { color: var(--muted); }

  .features-cta { text-align: center; margin: 24px 0 8px; }
  .features-cta button {
    background: var(--accent); border: none; font-family: var(--display); font-size: 1rem; font-weight: 700;
    padding: 13px 36px; border-radius: 60px; color: white; cursor: pointer;
    box-shadow: 0 6px 20px rgba(124,111,255,0.4); transition: 0.2s;
  }
  .features-cta button:hover { background: #4c3fe0; transform: scale(1.02); }

  /* VocalReport App — fits to viewport, no scroll */
  #appView {
    background: #0f1117; font-family: 'DM Sans', sans-serif; color: #f8f9fc;
    height: 100vh; display: flex; flex-direction: column; overflow: hidden;
  }
  .app-nav {
    background: #002060; display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px; flex-shrink: 0;
  }
  .app-nav-logo { font-family: var(--display); font-size: 1rem; font-weight: 800; color: white; letter-spacing: -0.01em; }
  .app-nav-logo span { color: var(--accent2); }
  .back-btn {
    font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2); padding: 7px 16px; border-radius: 6px; cursor: pointer;
    transition: all 0.2s; display: flex; align-items: center; gap: 6px;
  }
  .back-btn:hover { background: rgba(255,255,255,0.2); color: white; }
  .plumber-wrap {
    flex: 1; overflow-y: auto; display: flex; align-items: flex-start;
    justify-content: center; padding: 20px 16px 20px;
  }
  .plumber-container { width: 100%; max-width: 680px; }
  .p-header {
    background: #002060; color: white; padding: 24px 28px; border-radius: 4px 4px 0 0; display: flex; align-items: center; gap: 16px;
  }
  .p-logo-circle { width: 52px; height: 52px; border-radius: 50%; background: white; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
  .p-header-text h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1; }
  .p-header-text p { font-size: 0.78rem; opacity: 0.7; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 3px; }
  .p-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(124,111,255,0.12); border-top: none; padding: 28px; color: #f8f9fc; }
  .p-section-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(168,159,255,0.55); margin-bottom: 10px; }
  .p-upload-zone {
    border: 2px dashed rgba(124,111,255,0.35); border-radius: 12px; padding: 32px 24px; text-align: center; cursor: pointer;
    transition: all 0.2s; margin-bottom: 0; position: relative; background: rgba(124,111,255,0.04);
  }
  .p-upload-zone:hover, .p-upload-zone.drag, .p-upload-zone.dragover { border-color: rgba(124,111,255,0.7); background: rgba(124,111,255,0.1); }
  .p-upload-zone.loaded { border-color: #2a8c4a; background: #f0fff5; border-style: solid; }
  .p-upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
  .p-upload-icon { font-size: 2rem; margin-bottom: 8px; }
  .p-upload-text { font-size: 0.85rem; color: rgba(168,159,255,0.6); }
  .p-upload-text strong { color: #a89fff; display: block; font-size: 0.9rem; margin-bottom: 2px; }
  .p-mic-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
  .p-mic-btn {
    width: 68px; height: 68px; border-radius: 50%; border: 3px solid rgba(124,111,255,0.6); background: rgba(124,111,255,0.15); color: #a89fff;
    font-size: 1.6rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.2s;
  }
  .p-mic-btn:hover { background: rgba(124,111,255,0.3); border-color: #7c6fff; color: white; }
  .p-mic-btn.recording { background: #e63000; border-color: #e63000; color: white; animation: mpulse 1.3s ease-in-out infinite; }
  @keyframes mpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(230,48,0,0.35); } 50% { box-shadow: 0 0 0 14px rgba(230,48,0,0); } }
  .p-status-block { flex: 1; }
  .p-status-indicator { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7fa3; margin-bottom: 8px; }
  .p-dot { width: 7px; height: 7px; border-radius: 50%; background: #6b7fa3; flex-shrink: 0; }
  .p-dot.live { background: #e63000; animation: mblink 0.9s step-end infinite; }
  @keyframes mblink { 0%,100%{opacity:1} 50%{opacity:0.2} }
  .p-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .p-btn {
    font-family: 'Barlow', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.07em;
    text-transform: uppercase; padding: 8px 16px; border: 1.5px solid #c8d4e8; background: rgba(255,255,255,0.06);
    color: #c8cdd8; cursor: pointer; border-radius: 2px; transition: all 0.15s;
  }
  .p-btn:hover { background: #f0f4fa; border-color: #1a4a9e; color: #1a4a9e; }
  .p-transcript-wrap { border: 1.5px solid #c8d4e8; border-radius: 2px; background: #f0f4fa; min-height: 180px; padding: 16px 18px; margin-bottom: 20px; }
  #pTranscript { font-size: 1rem; line-height: 1.75; color: #1a1a2e; min-height: 148px; outline: none; white-space: pre-wrap; word-break: break-word; }
  #pTranscript:empty::before { content: attr(data-placeholder); color: #c8d4e8; font-style: italic; pointer-events: none; }
  .p-interim { color: #6b7fa3; font-style: italic; }
  .p-char-count { text-align: right; font-size: 0.7rem; color: #6b7fa3; margin-top: 4px; letter-spacing: 0.06em; }
  .p-action-bar { background: #002060; padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; border-radius: 0 0 4px 4px; flex-wrap: wrap; gap: 12px; }
  .p-action-bar .p-word-count { font-size: 0.78rem; color: rgba(255,255,255,0.6); letter-spacing: 0.08em; }
  .p-download-btn {
    font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 12px 28px; border: none; background: white; color: #002060;
    cursor: pointer; border-radius: 2px; transition: all 0.15s; display: flex; align-items: center; gap: 8px;
  }
  .p-download-btn:hover { background: #e0e8ff; }
  .p-browser-warn { background: #fff3cd; border: 1px solid #ffc107; border-radius: 2px; padding: 10px 14px; font-size: 0.82rem; color: #7a5800; margin-bottom: 16px; display: none; }
  .p-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(16px); background: #002060; color: white; padding: 10px 22px; font-size: 0.82rem; letter-spacing: 0.06em; border-radius: 2px; opacity: 0; transition: all 0.3s ease; pointer-events: none; white-space: nowrap; z-index: 999; }
  .p-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* modals (all reused) */
  .modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(6px); z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
  }
  .modal-backdrop.open { opacity: 1; pointer-events: all; }
  .modal {
    background: var(--surface); border: 1px solid var(--border2); border-radius: 20px; width: 100%;
    max-width: 460px; padding: 36px 32px 28px; position: relative;
    transform: translateY(20px) scale(0.97); transition: transform 0.35s ease;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6);
  }
  .modal-backdrop.open .modal { transform: translateY(0) scale(1); }
  .modal-close {
    position: absolute; top: 16px; right: 18px; width: 30px; height: 30px; border: 1px solid var(--border);
    border-radius: 50%; background: transparent; color: var(--muted); font-size: 1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.15s;
  }
  .modal-close:hover { border-color: var(--text); color: var(--text); }

  /* auth modal */
  .auth-tabs { display: flex; gap: 12px; margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
  .auth-tab { font-size: 1.1rem; font-weight: 600; color: var(--muted); cursor: pointer; padding: 0 4px 6px; transition: 0.2s; border-bottom: 2px solid transparent; }
  .auth-tab.active { color: var(--accent2); border-bottom-color: var(--accent2); }
  .auth-form { display: flex; flex-direction: column; gap: 18px; margin: 20px 0; }
  .auth-input { background: var(--surface2); border: 1px solid var(--border2); border-radius: 10px; padding: 14px 16px; font-size: 0.9rem; color: var(--text); font-family: var(--sans); }
  .auth-input:focus { outline: none; border-color: var(--accent2); }
  .auth-btn { background: var(--accent); border: none; border-radius: 10px; padding: 14px; font-weight: 700; color: white; cursor: pointer; transition: 0.2s; font-size: 0.9rem; }
  .auth-btn:hover { background: #4c3fe0; }
  .social-login { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
  .social-btn {
    display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--surface2);
    border: 1px solid var(--border2); border-radius: 10px; padding: 12px; color: var(--text);
    text-decoration: none; font-weight: 500; transition: 0.2s; cursor: pointer;
  }
  .social-btn:hover { border-color: var(--accent2); background: rgba(59,130,246,0.1); }
  .social-btn i { font-size: 1.2rem; }
  .auth-divider { text-align: center; font-size: 0.8rem; color: var(--muted); margin: 8px 0; position: relative; }
  .auth-divider::before, .auth-divider::after { content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--border2); }
  .auth-divider::before { left: 0; } .auth-divider::after { right: 0; }
  .auth-error { color: #ff6b6b; font-size: 0.8rem; margin-top: -8px; }

  /* payment / upgrade shared */
  .modal-plan-badge {
    display: inline-flex; align-items: center; gap: 7px; font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent2);
    background: rgba(124,111,255,0.12); border: 1px solid rgba(124,111,255,0.3);
    padding: 4px 12px; border-radius: 20px; margin-bottom: 16px;
  }
  .modal h2 { font-family: var(--display); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 6px; }
  .modal-subtitle { font-size: 0.85rem; color: var(--muted); margin-bottom: 24px; line-height: 1.5; }
  .modal-price-row {
    display: flex; align-items: baseline; gap: 8px; margin-bottom: 24px; padding: 16px 18px;
    background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
  }
  .modal-price-amount { font-family: var(--display); font-size: 2.2rem; font-weight: 800; color: var(--text); }
  .modal-price-label { font-size: 0.78rem; color: var(--muted); }
  .modal-features { list-style: none; margin-bottom: 24px; display: flex; flex-direction: column; gap: 8px; }
  .modal-features li { display: flex; align-items: center; gap: 9px; font-size: 0.84rem; color: var(--text); }
  .modal-features li::before { content: '✓'; color: var(--green); font-size: 0.76rem; font-weight: 700; flex-shrink: 0; }
  .modal-divider { height: 1px; background: var(--border); margin: 20px 0; }
  .paypal-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; text-align: center; }
  #paypal-button-container { min-height: 50px; }
  .sandbox-notice { margin-top: 14px; text-align: center; font-size: 0.72rem; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px; }
  .sandbox-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(250,200,80,0.15); color: #f5c842; border: 1px solid rgba(245,200,66,0.3); padding: 2px 7px; border-radius: 4px; }
  .paypal-config-warn { background: rgba(245,200,66,0.1); border: 1px solid rgba(245,200,66,0.35); border-radius: 8px; padding: 12px 16px; font-size: 0.8rem; color: #f5c842; line-height: 1.5; margin-bottom: 12px; }
  .payment-success { text-align: center; padding: 20px 0; display: none; }
  .payment-success .success-icon { font-size: 3rem; margin-bottom: 12px; animation: popIn 0.4s ease; }
  @keyframes popIn { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
  .payment-success h3 { font-family: var(--display); font-size: 1.4rem; font-weight: 800; margin-bottom: 8px; }
  .payment-success p { font-size: 0.85rem; color: var(--muted); margin-bottom: 20px; }
  .launch-app-btn {
    font-family: var(--display); font-size: 1rem; font-weight: 700; padding: 14px 32px; border-radius: 10px;
    border: none; background: var(--green); color: #0a2015; cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .launch-app-btn:hover { background: #25c06e; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(124,111,255,0.4); }
  .upgrade-offer { text-align: center; padding: 20px 0 10px; }
  .upgrade-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .upgrade-pro-btn, .upgrade-enterprise-btn {
    flex: 1 1 140px; font-family: var(--display); font-weight: 700; font-size: 0.9rem;
    padding: 12px 18px; border-radius: 10px; cursor: pointer; border: none; transition: all 0.2s;
  }
  .upgrade-pro-btn { background: var(--accent); color: white; box-shadow: 0 4px 14px rgba(124,111,255,0.5); }
  .upgrade-pro-btn:hover { background: #4c3fe0; transform: translateY(-2px); }
  .upgrade-enterprise-btn { background: transparent; border: 1.5px solid var(--accent2); color: var(--accent2); }
  .upgrade-enterprise-btn:hover { background: rgba(59,130,246,0.1); border-color: #60a5fa; }

  /* ── HOW IT WORKS PAGE ───────────────────────────────────────── */
  .hiw-page { position:relative; z-index:2; max-width:1100px; margin:0 auto; padding:24px 20px 32px; }
  .hiw-header { text-align:center; margin-bottom:24px; }
  .hiw-header h1 { font-family:var(--display); font-size:clamp(1.6rem,4vw,2.4rem); font-weight:800; letter-spacing:-0.03em; color:var(--text); max-width:640px; margin:8px auto 8px; line-height:1.1; }
  .hiw-header h1 em { font-style:normal; background:linear-gradient(135deg,var(--accent2),#60a5fa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
  .hiw-header p { font-size:0.9rem; color:var(--muted); max-width:500px; margin:0 auto; line-height:1.55; }

  .hiw-steps { display:flex; flex-direction:column; gap:0; }

  .hiw-step {
    display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center;
    padding:28px 0; border-bottom:1px solid var(--border);
  }
  .hiw-step:last-child { border-bottom:none; }
  .hiw-step-reverse { direction:rtl; }
  .hiw-step-reverse > * { direction:ltr; }
  @media(max-width:700px) {
    .hiw-step, .hiw-step-reverse { grid-template-columns:1fr; direction:ltr; gap:30px; }
  }

  /* step number */
  .hiw-step-num {
    font-family:var(--display); font-size:2.5rem; font-weight:800; letter-spacing:-0.04em;
    color:transparent; -webkit-text-stroke:2px var(--border2); line-height:1; margin-bottom:8px;
  }
  .hiw-step-content h3 { font-family:var(--display); font-size:1.3rem; font-weight:800; letter-spacing:-0.02em; color:var(--text); margin-bottom:8px; }
  .hiw-step-content p { font-size:0.88rem; color:#8899bb; line-height:1.6; margin-bottom:12px; }
  .hiw-step-content code { background:rgba(59,130,246,0.12); color:var(--accent2); padding:2px 7px; border-radius:4px; font-size:0.85em; }
  .hiw-tip { font-size:0.82rem; color:var(--muted); background:var(--surface2); border:1px solid var(--border); border-left:3px solid var(--accent2); border-radius:6px; padding:10px 14px; line-height:1.5; }

  /* mock UI cards */
  .hiw-step-visual { display:flex; flex-direction:column; align-items:center; }
  .hiw-mock {
    width:100%; max-width:300px; background:var(--surface); border:1px solid var(--border2);
    border-radius:12px; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,0.4);
    transition:transform 0.3s; animation:fadeUp 0.6s ease both;
  }
  .hiw-mock:hover { transform:translateY(-4px); }
  .hiw-mock-topbar { background:var(--surface2); padding:7px 12px; display:flex; gap:6px; align-items:center; border-bottom:1px solid var(--border); }
  .hiw-mock-topbar span { width:8px; height:8px; border-radius:50%; background:var(--border2); }
  .hiw-mock-topbar span:first-child { background:#ff5f57; }
  .hiw-mock-topbar span:nth-child(2) { background:#febc2e; }
  .hiw-mock-topbar span:nth-child(3) { background:#28c840; }
  .hiw-mock-body { padding:14px 14px; }

  /* upload mock */
  .hiw-file-icon { font-size:1.6rem; text-align:center; margin-bottom:4px; }
  .hiw-file-label { font-size:0.75rem; color:var(--accent2); text-align:center; margin-bottom:10px; font-weight:600; }
  .hiw-upload-arrow { text-align:center; font-size:1.1rem; color:var(--muted); margin-bottom:6px; }
  .hiw-dashed-zone { border:2px dashed var(--border2); border-radius:6px; padding:10px; text-align:center; font-size:0.75rem; color:var(--muted); }

  /* mic mock */
  .hiw-mic-circle { font-size:1.8rem; width:54px; height:54px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; margin:0 auto 8px; box-shadow:0 0 0 0 rgba(124,111,255,0.5); }
  .hiw-mic-pulse { animation:micpulse 1.5s ease-in-out infinite; }
  @keyframes micpulse { 0%,100%{box-shadow:0 0 0 0 rgba(124,111,255,0.5)} 50%{box-shadow:0 0 0 12px rgba(124,111,255,0)} }
  .hiw-live-badge { text-align:center; font-size:0.65rem; font-weight:700; letter-spacing:0.12em; color:#e63000; margin-bottom:8px; }
  .hiw-wave { display:flex; align-items:center; justify-content:center; gap:3px; height:24px; margin-bottom:8px; }
  .hiw-wave span { width:3px; background:var(--accent2); border-radius:2px; animation:wave 1s ease-in-out infinite; }
  .hiw-wave span:nth-child(1){height:6px;animation-delay:0s}
  .hiw-wave span:nth-child(2){height:14px;animation-delay:0.1s}
  .hiw-wave span:nth-child(3){height:22px;animation-delay:0.2s}
  .hiw-wave span:nth-child(4){height:16px;animation-delay:0.3s}
  .hiw-wave span:nth-child(5){height:22px;animation-delay:0.2s}
  .hiw-wave span:nth-child(6){height:12px;animation-delay:0.1s}
  .hiw-wave span:nth-child(7){height:6px;animation-delay:0s}
  @keyframes wave { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(0.4)} }
  .hiw-transcript-preview { font-size:0.72rem; color:var(--muted); font-style:italic; line-height:1.4; border-left:2px solid var(--accent2); padding-left:8px; }

  /* review mock */
  .hiw-review-text { font-size:0.78rem; color:var(--text); line-height:1.55; margin-bottom:8px; }
  .hiw-edit-hint { font-size:0.7rem; color:var(--accent2); display:flex; align-items:center; gap:6px; }

  /* download mock */
  .hiw-doc-preview { background:white; border-radius:6px; padding:10px; margin-bottom:10px; }
  .hiw-doc-header { font-size:0.6rem; font-weight:800; letter-spacing:0.1em; color:#002060; text-align:center; margin-bottom:8px; border-bottom:2px solid #002060; padding-bottom:4px; }
  .hiw-doc-lines { display:flex; flex-direction:column; gap:5px; }
  .hiw-doc-line { height:6px; background:#e4ecf5; border-radius:4px; }
  .hiw-doc-line.hiw-filled { height:auto; background:transparent; font-size:0.65rem; color:#1a1a2e; font-style:italic; }
  .hiw-download-btn-mock { background:#002060; color:white; text-align:center; border-radius:4px; padding:8px; font-size:0.75rem; font-weight:700; letter-spacing:0.06em; }

  /* connector */
  .hiw-connector { display:flex; flex-direction:column; align-items:center; gap:3px; margin-top:8px; }
  .hiw-dot-line { width:2px; height:20px; background:repeating-linear-gradient(to bottom,var(--border2) 0,var(--border2) 4px,transparent 4px,transparent 8px); }
  .hiw-arrow-down { color:var(--accent2); font-size:0.9rem; }

  /* team callout */
  .hiw-team-callout {
    display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,#1a2340,var(--surface));
    border:1px solid var(--accent); border-radius:12px; padding:16px 20px; margin:20px 0 10px;
    box-shadow:0 0 24px rgba(124,111,255,0.12); flex-wrap:wrap;
  }
  .hiw-team-icon { font-size:2rem; flex-shrink:0; }
  .hiw-team-callout h4 { font-family:var(--display); font-size:1rem; font-weight:800; color:var(--text); margin-bottom:4px; }
  .hiw-team-callout p { font-size:0.82rem; color:var(--muted); line-height:1.45; margin:0; }
  .hiw-team-callout > div { flex:1; min-width:180px; }
  .hiw-cta-btn { font-family:var(--display); font-size:0.85rem; font-weight:700; padding:10px 20px; background:var(--accent); border:none; color:white; border-radius:8px; cursor:pointer; white-space:nowrap; transition:all 0.2s; flex-shrink:0; }
  .hiw-cta-btn:hover { background:#4c3fe0; transform:translateY(-1px); }

  /* nav active state */
  .nav-links a.nav-active { color: var(--accent2) !important; }

  /* ── RESPONSIVE DESIGN ──────────────────────────────────────── */
  /* Tablet (≤900px) */
  @media (max-width: 900px) {
    .nav { padding: 0 20px; }
    .nav-links { gap: 18px; }
    .cards-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .cards-grid .plan-card:last-child { grid-column: unset; max-width: unset; }
    .hiw-step, .hiw-step-reverse { grid-template-columns: 1fr; direction: ltr; gap: 24px; }
    .feature-grid { grid-template-columns: 1fr 1fr; }
    .feature-row2 { flex-direction: column; }
  }

  /* Mobile (≤640px) */
  @media (max-width: 640px) {
    /* Nav */
    .nav { padding: 0 14px; height: 54px; }
    .nav-links { display: none; }
    .nav-cta { font-size: 0.75rem; padding: 7px 14px; }
    .nav-logo { font-size: 1.2rem; }

    /* Hero / pricing */
    .hero { padding: 40px 16px 24px; }
    .hero h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
    .cards-section { padding: 0 12px 40px; }
    .cards-grid { grid-template-columns: 1fr; }
    .cards-grid .plan-card:last-child { grid-column: auto; max-width: 100%; }
    .plan-card.featured { transform: none; }

    /* Features page */
    .feature-grid { grid-template-columns: 1fr; }
    .feature-row2 { flex-direction: column; }
    .hiw-page { padding: 30px 14px 60px; }
    .hiw-team-callout { flex-direction: column; text-align: center; }

    /* App view */
    .app-nav { padding: 8px 14px; }
    .app-nav-logo { font-size: 0.88rem; }
    .back-btn { font-size: 0.72rem; padding: 5px 10px; }
    .plumber-wrap { padding: 12px 8px; }
    .p-header { padding: 14px 16px; gap: 10px; }
    .p-header-text h2 { font-size: 1.1rem; }
    .p-card { padding: 16px; }
    .p-mic-row { gap: 10px; }
    .p-mic-btn { width: 54px; height: 54px; font-size: 1.3rem; }
    .p-btn-row { flex-wrap: wrap; gap: 6px; }
    .p-action-bar { padding: 12px 16px; flex-direction: column; gap: 10px; align-items: stretch; }
    .p-download-btn { text-align: center; }
    .mode-tab { font-size: 0.75rem; padding: 10px 14px; }
    .p-transcript-wrap { min-height: 120px; }
    #pTranscript { min-height: 90px; font-size: 0.92rem; }

    /* Excel mode */
    .xl-add-col-row { flex-direction: column; }
    .xl-add-col-btn { width: 100%; }
    .xl-active-col-row { flex-direction: column; align-items: flex-start; }

    /* Invite section */
    .invite-section { padding: 16px; }
    .invite-input-row { flex-direction: column; }
    .invite-send-btn { width: 100%; justify-content: center; }
    .invite-copy-row { flex-direction: column; gap: 8px; }
    .invite-copy-btn { width: 100%; }

    /* Modals */
    .modal { padding: 24px 18px; margin: 12px; max-width: calc(100vw - 24px); }
    .modal-price-row { flex-direction: column; gap: 2px; align-items: flex-start; }

    /* Footer */
    footer { font-size: 0.7rem; padding: 20px 14px; text-align: center; }
  }

  /* Very small (≤380px) */
  @media (max-width: 380px) {
    .p-header-text h2 { font-size: 0.95rem; }
    .plan-price { font-size: 2.5rem; }
    .hiw-mock { max-width: 100%; }
  }

  .nav-hamburger {
    display: none; background: none; border: 1px solid rgba(255,255,255,0.3);
    color: white; font-size: 1.1rem; padding: 5px 10px; border-radius: 6px; cursor: pointer;
  }
  @media (max-width: 640px) {
    .nav-hamburger { display: block; }
    .nav-links {
      display: none; position: absolute; top: 54px; left: 0; right: 0;
      background: #001040; flex-direction: column; gap: 0; padding: 8px 0; z-index: 999;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .nav-links.open { display: flex; }
    .nav-links li { width: 100%; }
    .nav-links a { display: block; padding: 14px 20px; font-size: 0.95rem; color: rgba(255,255,255,0.8) !important; }
    .nav-links a.nav-active { color: var(--accent2) !important; background: rgba(59,130,246,0.1); }
  }
  .nav { position: relative; }
  /* Tag workflow */
  .p-tag-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .p-tag-btn {
    padding: 8px 16px; border-radius: 20px; border: 2px solid #c8d4e8;
    background: white; color: #1a1a2e; font-family: var(--display); font-weight: 700;
    font-size: 0.82rem; cursor: pointer; transition: all 0.18s; letter-spacing: 0.03em;
  }
  .p-tag-btn:hover { border-color: #1a4a9e; color: #1a4a9e; }
  .p-tag-btn.active { background: #1a4a9e; color: white; border-color: #1a4a9e; }
  .p-tag-btn.filled { border-color: #16a34a; color: #16a34a; background: #f0fdf4; }
  .p-tag-btn.filled.active { background: #16a34a; color: white; border-color: #16a34a; }
  .p-active-tag-banner {
    background: #eff6ff; border: 1.5px solid #93c5fd; border-radius: 8px;
    padding: 10px 14px; font-size: 0.83rem; color: #4c3fe0; margin-bottom: 4px;
    display: flex; align-items: center; gap: 8px;
  }
  .p-save-tag-btn {
    background: #1a4a9e; color: white; border: none; border-radius: 8px;
    padding: 11px 22px; font-family: var(--display); font-weight: 800; font-size: 0.9rem;
    cursor: pointer; transition: background 0.18s;
  }
  .p-save-tag-btn:hover { background: #002060; }
  .p-save-hint { font-size: 0.78rem; color: #8899aa; margin-left: 10px; }
  .p-filled-list { display: flex; flex-direction: column; gap: 8px; }
  .p-filled-item {
    background: #f0fdf4; border: 1.5px solid #86efac; border-radius: 8px;
    padding: 10px 14px; display: flex; align-items: flex-start; gap: 10px;
  }
  .p-filled-tag { font-family: var(--display); font-weight: 800; font-size: 0.8rem; color: #16a34a; min-width: 90px; padding-top: 2px; }
  .p-filled-preview { font-size: 0.83rem; color: #0f1117; flex: 1; line-height: 1.5; }
  .p-filled-edit { background: none; border: none; color: #6b7280; cursor: pointer; font-size: 0.78rem; text-decoration: underline; white-space: nowrap; }
  .p-filled-edit:hover { color: #1a4a9e; }

  .mode-tabs { display:flex; gap:0; margin-bottom:0; border-bottom:2px solid #c8d4e8; }
  .mode-tab {
    font-family:'Barlow',sans-serif; font-size:0.88rem; font-weight:700; letter-spacing:0.06em;
    text-transform:uppercase; padding:12px 22px; border:none; background:transparent;
    color:#6b7fa3; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px;
    transition:all 0.18s;
  }
  .mode-tab:hover { color:#1a4a9e; }
  .mode-tab.active { color:#1a4a9e; border-bottom-color:#1a4a9e; background:#f0f4ff; }

  /* ── DARK THEME MASTER RESET — overrides all old light-theme app rules ── */
  #appView,
  #appView * {
    border-color: inherit;
  }
  /* Nav */
  .app-nav { background: #0a0c14 !important; border-bottom: 1px solid rgba(124,111,255,0.2) !important; }
  /* Old plumber container — not used in new layout but neutralise */
  .plumber-wrap { background: transparent !important; }
  .plumber-container { background: transparent !important; }
  .p-header { background: rgba(10,12,20,0.8) !important; color: #f8f9fc !important; }
  /* Status indicator */
  .p-status-indicator { color: rgba(168,159,255,0.65) !important; }
  .p-dot { background: rgba(168,159,255,0.3) !important; }
  /* Action bar */
  .p-action-bar { background: rgba(8,10,18,0.9) !important; border-top: 1px solid rgba(124,111,255,0.15) !important; }
  /* Transcript */
  .p-transcript-wrap { border-color: rgba(124,111,255,0.2) !important; background: rgba(124,111,255,0.06) !important; }
  /* Buttons — base reset for app buttons */
  .p-btn { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: rgba(196,187,255,0.8) !important; font-family: var(--sans) !important; }
  .p-btn:hover { background: rgba(255,255,255,0.12) !important; border-color: rgba(124,111,255,0.4) !important; color: white !important; }
  .p-save-tag-btn { background: linear-gradient(135deg,#7c6fff,#4c3fe0) !important; color: white !important; border: none !important; }
  .p-save-tag-btn:hover { background: linear-gradient(135deg,#9080ff,#6050f0) !important; }
  /* Mode tabs → editor subtabs */
  .mode-tab, .editor-subtab { font-family: var(--sans) !important; color: rgba(168,159,255,0.5) !important; background: transparent !important; border-bottom-color: transparent !important; }
  .mode-tab.active, .editor-subtab.active { color: #a89fff !important; border-bottom-color: #7c6fff !important; background: transparent !important; }
  /* Excel builder */
  .xl-col-builder { background: rgba(124,111,255,0.05) !important; border-color: rgba(124,111,255,0.2) !important; }
  .xl-add-col-btn { background: rgba(124,111,255,0.2) !important; color: #a89fff !important; font-family: var(--sans) !important; }
  .xl-col-input { background: rgba(255,255,255,0.05) !important; border-color: rgba(124,111,255,0.2) !important; color: #f8f9fc !important; font-family: var(--sans) !important; }
  .xl-pill { background: rgba(124,111,255,0.1) !important; border-color: rgba(124,111,255,0.25) !important; color: #a89fff !important; }
  /* Toast */
  #pToast, .p-toast { background: rgba(124,111,255,0.92) !important; color: white !important; }


  /* ── EXCEL MODE UI ──────────────────────────────────────────── */
  .xl-col-builder { background:#f8faff; border:1.5px solid #c8d4e8; border-radius:6px; padding:16px 18px; }
  .xl-col-list { display:flex; flex-wrap:wrap; gap:8px; min-height:36px; margin-bottom:12px; }
  .xl-col-tag {
    display:inline-flex; align-items:center; gap:7px; background:#002060; color:white;
    font-size:0.78rem; font-weight:600; letter-spacing:0.05em; padding:6px 12px; border-radius:20px;
  }
  .xl-col-tag .xl-col-remove { cursor:pointer; opacity:0.6; font-size:0.9rem; line-height:1; }
  .xl-col-tag .xl-col-remove:hover { opacity:1; }
  .xl-add-col-row { display:flex; gap:8px; align-items:center; }
  .xl-col-input {
    flex:1; font-family:'Barlow',sans-serif; font-size:0.88rem; padding:9px 14px;
    border:1px solid rgba(124,111,255,0.25); border-radius:8px; background:rgba(255,255,255,0.05); color:#f8f9fc; outline:none;
  }
  .xl-col-input:focus { border-color:#1a4a9e; }
  .xl-add-col-btn {
    font-family:'Barlow',sans-serif; font-size:0.82rem; font-weight:700; letter-spacing:0.06em;
    padding:9px 16px; background:#1a4a9e; color:white; border:none; border-radius:4px; cursor:pointer;
    white-space:nowrap; transition:background 0.15s;
  }
  .xl-add-col-btn:hover { background:#002060; }
  .xl-col-hint { font-size:0.76rem; color:#6b7fa3; margin-top:10px; font-style:italic; }
  .xl-active-col-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .xl-active-label { font-size:0.8rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:#6b7fa3; white-space:nowrap; }
  .xl-col-pills { display:flex; flex-wrap:wrap; gap:7px; }
  .xl-pill {
    font-size:0.8rem; font-weight:600; padding:6px 14px; border-radius:20px;
    border:1px solid rgba(124,111,255,0.25); background:rgba(124,111,255,0.1); color:#a89fff; cursor:pointer; transition:all 0.15s;
  }
  .xl-pill:hover { border-color:#1a4a9e; color:#1a4a9e; }
  .xl-pill.active { background:#1a4a9e; border-color:#1a4a9e; color:white; }
  .xl-live-preview {
    min-height:44px; background:#f0f4ff; border:1.5px dashed #1a4a9e; border-radius:6px;
    padding:10px 16px; margin-top:12px; font-size:0.95rem; color:#1a1a2e; font-style:italic; display:none;
  }
  .xl-live-preview.active { display:block; }
  .xl-live-interim { color:#6b7fa3; }
  .xl-table-wrap { overflow-x:auto; border-radius:6px; border:1.5px solid #c8d4e8; }
  .xl-empty-state { padding:28px; text-align:center; font-size:0.85rem; color:#6b7fa3; font-style:italic; }
  .xl-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
  .xl-table th {
    background:#002060; color:white; font-family:'Barlow Condensed',sans-serif;
    font-weight:700; letter-spacing:0.08em; text-transform:uppercase; font-size:0.78rem;
    padding:10px 14px; text-align:left; white-space:nowrap;
  }
  .xl-table td { padding:9px 14px; border-bottom:1px solid #e8eef8; color:#1a1a2e; vertical-align:middle; }
  .xl-table tr:last-child td { border-bottom:none; }
  .xl-table tr:nth-child(even) td { background:#f8faff; }
  .xl-table tr:hover td { background:rgba(124,111,255,0.08); }
  .xl-table td[contenteditable="true"]:focus { outline:2px solid rgba(124,111,255,0.6); border-radius:2px; background:rgba(124,111,255,0.12); }
  .xl-row-num { width:36px; color:#6b7fa3; font-size:0.75rem; text-align:center; font-weight:600; }
  .xl-del-cell { width:30px; text-align:center; }
  .xl-del-btn { background:none; border:none; color:#c8d4e8; cursor:pointer; font-size:1rem; padding:2px 4px; }
  .xl-del-btn:hover { color:#e63000; }
  .free-expired-marker::after {
    content: "TRIAL EXPIRED"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: #c0392b; color: white; padding: 4px 8px; border-radius: 20px; font-size: 0.7rem;
    font-weight: bold; white-space: nowrap; z-index: 10; border: 1px solid #e74c3c;
  }
  .trial-timer { font-size: 0.75rem; color: var(--muted); margin-top: 8px; background: rgba(0,0,0,0.3); padding: 4px 8px; border-radius: 30px; display: inline-block; }

  /* ── INVITE TEAMMATES SECTION ─────────────────────────────── */
  .invite-section {
    background: rgba(8,10,18,0.9); border: none; border-top: 1px solid rgba(124,111,255,0.18);
    padding: 0; margin-top: 0;
  }
  .invite-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px; flex-wrap: wrap; gap: 10px;
  }
  .invite-title {
    display: flex; align-items: center; gap: 10px;
  }
  .invite-title h3 {
    font-family: var(--sans); font-size: 0.85rem; font-weight: 700;
    letter-spacing: 0; text-transform: none; color: #a89fff; margin: 0;
  }
  .invite-slots-badge {
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 20px; background: rgba(124,111,255,0.15); color: #a89fff; border: 1px solid rgba(124,111,255,0.3);
    white-space: nowrap;
  }
  .invite-slots-badge.full { background: #fff0ee; color: #c0392b; border-color: #f5c6c0; }
  .invite-tier-note {
    font-size: 0.75rem; color: #6b7fa3; font-style: italic;
  }
  .invite-input-row {
    display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;
  }
  .invite-email-input {
    flex: 1; min-width: 200px; font-family: var(--sans); font-size: 0.88rem;
    padding: 10px 14px; border: 1px solid rgba(124,111,255,0.25); border-radius: 8px; background: rgba(255,255,255,0.05);
    color: #f8f9fc; outline: none; transition: border-color 0.2s;
  }
  .invite-email-input:focus { border-color: rgba(124,111,255,0.6); background: rgba(124,111,255,0.08); }
  .invite-email-input::placeholder { color: #aab8cc; }
  .invite-send-btn {
    font-family: var(--sans); font-size: 0.85rem; font-weight: 700;
    letter-spacing: 0; text-transform: none; padding: 10px 22px;
    background: linear-gradient(135deg, #7c6fff, #4c3fe0); color: white; border: none; border-radius: 8px; cursor: pointer;
    transition: all 0.2s; white-space: nowrap; display: flex; align-items: center; gap: 7px;
  }
  .invite-send-btn:hover { background: linear-gradient(135deg, #9080ff, #6050f0); }
  .invite-send-btn:disabled { background: #c8d4e8; color: #8a9ab5; cursor: not-allowed; }
  .invite-list { display: flex; flex-direction: column; gap: 8px; }
  .invite-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    background: rgba(124,111,255,0.07); border: 1px solid rgba(124,111,255,0.18); border-radius: 9px;
    animation: inviteSlideIn 0.3s ease;
  }
  @keyframes inviteSlideIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
  .invite-avatar {
    width: 32px; height: 32px; border-radius: 50%; background: #002060;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700; color: white; flex-shrink: 0; letter-spacing: 0.02em;
  }
  .invite-item-email { flex: 1; font-size: 0.85rem; color: #f8f9fc; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .invite-status {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
  }
  .invite-status.pending { background: #fff8e1; color: #b07d00; border: 1px solid #f5e09e; }
  .invite-status.accepted { background: #e6f9ef; color: #1a7a42; border: 1px solid #a8e8c2; }
  .invite-remove-btn {
    width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); background: transparent;
    color: rgba(255,255,255,0.35); cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; transition: all 0.15s; flex-shrink: 0;
  }
  .invite-remove-btn:hover { border-color: #c0392b; color: #c0392b; background: #fff0ee; }
  .invite-empty-state {
    text-align: center; padding: 20px; color: rgba(168,159,255,0.4); font-size: 0.82rem;
  }
  .invite-upgrade-notice {
    background: rgba(124,111,255,0.07); border: 1px dashed rgba(124,111,255,0.25); border-radius: 10px; padding: 16px 18px;
    text-align: center; font-size: 0.82rem; color: rgba(168,159,255,0.7); line-height: 1.55;
  }
  .invite-upgrade-notice strong { color: #a89fff; display: block; margin-bottom: 4px; font-size: 0.88rem; }
  .invite-upgrade-notice a { color: #7c6fff; cursor: pointer; text-decoration: underline; }
  .invite-divider { height: 1px; background: #e4ecf5; margin: 20px 0; }
  .invite-copy-row {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  }
  .invite-link-box {
    flex: 1; font-family: var(--sans); font-size: 0.78rem; padding: 8px 12px;
    border: 1px solid rgba(124,111,255,0.2); border-radius: 8px; background: rgba(255,255,255,0.04); color: rgba(168,159,255,0.6);
    user-select: all; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .invite-copy-btn {
    font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0;
    text-transform: none; padding: 8px 14px; border: 1px solid rgba(124,111,255,0.3); background: rgba(124,111,255,0.12);
    color: #a89fff; border-radius: 8px; cursor: pointer; transition: all 0.15s; white-space: nowrap;
  }
  .invite-copy-btn:hover { background: #e8f0fe; }
  .invite-copy-btn.copied { border-color: #2a8c4a; color: #2a8c4a; background: #f0fff5; }

  /* Invite signup modal */
  .invite-modal-wrap { max-width: 440px; }
  .invite-modal-icon { font-size: 2.8rem; margin-bottom: 12px; text-align: center; }
  .invite-modal-context {
    background: #f0f4ff; border-radius: 8px; padding: 12px 16px; margin-bottom: 20px;
    font-size: 0.82rem; color: #4a5a7a; line-height: 1.55; border-left: 3px solid #1a4a9e;
  }
  .invite-modal-context strong { color: #002060; }

/* ── DOC PREVIEW MODE ────────────────────────────────────── */
.pv-layout {
  display: flex;
  gap: 16px;
  height: 580px;
}

/* Left panel — document */
.pv-doc-panel {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
}
.pv-doc-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #c8cdd8;
  font-weight: 600;
  background: rgba(255,255,255,0.02);
  flex-shrink: 0;
}
.pv-doc-hint {
  font-size: 11px;
  color: #7c6fff;
  font-weight: 400;
}
.pv-doc-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pv-doc-body::-webkit-scrollbar { width: 5px; }
.pv-doc-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* Individual paragraphs */
.pv-para {
  padding: 12px 14px;  /* slightly taller tap target */
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.18s ease;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.pv-para:hover {
  background: rgba(124,111,255,0.08);
  border-color: rgba(124,111,255,0.25);
}
.pv-para.pv-active {
  background: rgba(124,111,255,0.15);
  border-color: rgba(124,111,255,0.5);
}
.pv-para.pv-edited {
  border-left: 3px solid #7c6fff;
  padding-left: 11px;
}
.pv-para.pv-heading .pv-para-text {
  font-weight: 700;
  font-size: 15px;
  color: #e8eaf0;
}
.pv-para-text {
  font-size: 13px;
  color: #b0b8c8;
  line-height: 1.6;
  flex: 1;
}
.pv-edit-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.18s;
}
.pv-para:hover .pv-edit-badge {
  background: rgba(124,111,255,0.2);
  color: #a89fff;
}
.pv-para.pv-edited .pv-edit-badge {
  background: rgba(34,197,94,0.15);
  color: #4ade80;
}

/* Right panel — mic */
.pv-mic-panel {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.pv-mic-panel::-webkit-scrollbar { width: 4px; }
.pv-mic-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.pv-mic-idle {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 32px 20px;
  min-height: 200px;
}
.pv-idle-icon { font-size: 36px; opacity: 0.5; }
.pv-idle-text { font-size: 13px; color: #6b7280; text-align: center; line-height: 1.5; }

.pv-mic-active {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(124,111,255,0.3);
  border-radius: 14px;
  padding: 16px;
}
.pv-active-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7c6fff;
  font-weight: 600;
}
.pv-active-section {
  font-size: 12px;
  color: #a0a8b8;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 8px 10px;
  line-height: 1.4;
  border-left: 2px solid #7c6fff;
}
.pv-transcript-wrap {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 10px;
  min-height: 80px;
  max-height: 140px;
  overflow-y: auto;
  font-size: 13px;
  color: #e8eaf0;
  line-height: 1.6;
}
.pv-mic-btns {
  display: flex;
  gap: 8px;
}
.pv-cancel-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  color: #6b7280;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  align-self: flex-start;
}
.pv-cancel-btn:hover { border-color: #ef4444; color: #ef4444; }

/* Filled list in mic panel */
.pv-filled-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4ade80;
  font-weight: 600;
  padding: 4px 0;
}
.pv-filled-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pv-filled-item {
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.15);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pv-filled-original {
  font-size: 11px;
  color: #6b7280;
  font-style: italic;
}
.pv-filled-new {
  font-size: 12px;
  color: #c8cdd8;
}

@media (max-width: 700px) {
  .pv-layout { flex-direction: column; height: auto; }
  .pv-mic-panel { width: 100%; }
}

/* Selection highlight in edited paragraphs */
.pv-edit-mark {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
  border-radius: 3px;
  padding: 0 2px;
  font-style: normal;
}

/* Selection preview in mic panel */
.pv-selection-preview {
  font-size: 12px;
  color: #a0a8b8;
  background: rgba(124,111,255,0.08);
  border: 1px solid rgba(124,111,255,0.2);
  border-radius: 8px;
  padding: 8px 12px;
  line-height: 1.5;
}
.pv-sel-highlight {
  color: #c8c0ff;
  background: rgba(124,111,255,0.15);
  border-radius: 3px;
  padding: 1px 4px;
}

/* User text selection color within doc paragraphs */
.pv-para-text::selection,
.pv-para-text *::selection {
  background: rgba(124,111,255,0.35);
  color: #fff;
}

/* ── TRANSCRIPT LETTER ANIMATION ─────────────────────────── */

/* Pulsing border when mic is live */
.pv-transcript-wrap:has(#pvTranscript.pv-listening) {
  border-color: rgba(124,111,255,0.5);
  box-shadow: 0 0 0 2px rgba(124,111,255,0.12);
}

/* Interim text — letters fade + slide in */
.pv-interim-anim {
  color: #7c6fff;
  opacity: 0.85;
}
.pv-letter {
  display: inline;
  animation: pvLetterIn 0.18s ease both;
}
@keyframes pvLetterIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Final confirmed words — subtle pop-in */
.pv-word {
  display: inline;
}
.pv-word-new {
  animation: pvWordPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes pvWordPop {
  from { opacity: 0; transform: scale(0.88) translateY(3px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* Transcript area — subtle glow when recording */
#pvTranscript.pv-listening {
  caret-color: #7c6fff;
}

/* ── IMAGE PANEL ─────────────────────────────────────────────── */
.pv-img-panel {
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 12px;
}
.pv-img-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #a89fff;
}
.pv-img-add-btn {
  margin-left: auto;
  background: rgba(124,111,255,0.15);
  border: 1px solid rgba(124,111,255,0.35);
  color: #a89fff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.pv-img-add-btn:hover { background: rgba(124,111,255,0.28); }
.pv-img-hint {
  font-size: 0.73rem;
  color: #6b7280;
  margin-bottom: 10px;
  line-height: 1.4;
}
.pv-img-size-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.pv-img-size-row label {
  font-size: 0.74rem;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 5px;
}
.pv-img-size-row input[type="number"] {
  width: 62px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  color: #e2e8f0;
  padding: 3px 6px;
  font-size: 0.74rem;
  text-align: center;
}
.pv-img-size-row input[type="number"]:focus {
  outline: none;
  border-color: rgba(124,111,255,0.5);
}
.pv-img-lock-label {
  color: #6b7280;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.pv-img-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: none;
}
.pv-img-list::-webkit-scrollbar { display: none; }
.pv-img-item {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 7px 9px;
  cursor: grab;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  user-select: none;
}
.pv-img-item:active { cursor: grabbing; }
.pv-img-item.dragging { opacity: 0.4; border-style: dashed; }
.pv-img-item.drag-over { border-color: #7c6fff; background: rgba(124,111,255,0.1); }
.pv-img-item.placing {
  border-color: #34d399;
  background: rgba(52,211,153,0.08);
  box-shadow: 0 0 0 2px rgba(52,211,153,0.2);
}
.pv-img-thumb {
  width: 42px;
  height: 38px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
}
.pv-img-info {
  flex: 1;
  min-width: 0;
}
.pv-img-name {
  font-size: 0.72rem;
  color: #d1d5db;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv-img-placed-label {
  font-size: 0.67rem;
  color: #34d399;
  margin-top: 2px;
}
.pv-img-actions {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.pv-img-place-btn {
  background: rgba(52,211,153,0.15);
  border: 1px solid rgba(52,211,153,0.3);
  color: #34d399;
  border-radius: 5px;
  font-size: 0.67rem;
  font-weight: 600;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.pv-img-place-btn:hover { background: rgba(52,211,153,0.28); }
.pv-img-place-btn.active {
  background: rgba(52,211,153,0.3);
  box-shadow: 0 0 0 1px #34d399;
}
.pv-img-remove-btn {
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.25);
  color: #f87171;
  border-radius: 5px;
  font-size: 0.67rem;
  padding: 3px 7px;
  cursor: pointer;
  transition: background 0.15s;
}
.pv-img-remove-btn:hover { background: rgba(248,113,113,0.22); }
.pv-img-placing-hint {
  margin-top: 10px;
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.25);
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 0.74rem;
  color: #34d399;
  text-align: center;
  animation: pvPlacePulse 1.5s ease-in-out infinite;
}
@keyframes pvPlacePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
/* Photo placement marker in doc */
.pv-photo-marker {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(52,211,153,0.06);
  border: 1px dashed rgba(52,211,153,0.35);
  border-radius: 6px;
  padding: 6px 10px;
  margin: 4px 0;
  font-size: 0.73rem;
  color: #34d399;
}
.pv-photo-marker img {
  height: 32px;
  width: 42px;
  object-fit: cover;
  border-radius: 4px;
}
.pv-photo-marker-remove {
  margin-left: auto;
  background: none;
  border: none;
  color: #f87171;
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0 2px;
}

/* ═══════════════════════════════════════════════════════════════
   NEW APP SHELL — Tabs + Sidebar + Voice Drawer
   ═══════════════════════════════════════════════════════════════ */

/* ── Top bar ── */
.app-topbar {
  display: flex; align-items: center;
  padding: 0; height: 48px; flex-shrink: 0;
  background: #0f1117; border-bottom: 1px solid rgba(255,255,255,0.07);
  z-index: 20; position: relative;
}

/* LEFT: logo — same width as icon sidebar (76px) */
.app-topbar-logo {
  width: 76px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #0a0c14;
}
.app-logo-img {
  height: 36px;
  width: 36px;
  object-fit: cover;
  object-position: 43% 55%;
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* 4px gap — matches sidebar→editor spacing */
.app-topbar-gap-left  { width: 4px; flex-shrink: 0; background: rgba(0,0,0,0.4); }
/* 10px gap — matches editor→voice panel spacing */
.app-topbar-gap-right { width: 10px; flex-shrink: 0; background: rgba(0,0,0,0.4); }

/* MIDDLE: tools & status — flex:1 */
.app-topbar-middle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: rgba(15,17,25,0.98);
}

/* RIGHT: account — 300px matches voice panel */
.app-topbar-right {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 14px;
  background: #0a0c14;
}

/* Keep old topbar-left selector working for any legacy refs */
.app-topbar-left { display: flex; align-items: center; gap: 14px; }
.app-timer-pill {
  font-size: 0.72rem; color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 3px 10px;
  min-width: 148px;           /* fixed width — prevents shifting toggle btn as time changes */
  white-space: nowrap;
  display: inline-block;
}
.app-cancel-plan-btn {
  font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.5);
  background: transparent; border: 1px solid rgba(255,255,255,0.15);
  padding: 5px 10px; border-radius: 6px; cursor: pointer; transition: all 0.2s;
}
.app-cancel-plan-btn:hover { color: #ff6b6b; border-color: #ff6b6b; }

/* ── Shell: sidebar + content ── */
.app-shell {
  display: flex;
  height: calc(100vh - 48px);
  height: calc(100dvh - 48px); /* dynamic viewport height for mobile browsers */
  overflow: hidden;
}

/* ── Sidebar ── */
.app-sidebar {
  width: 72px; flex-shrink: 0;
  background: #0a0c14;
  border-right: none;
  margin-right: 4px;
  display: flex; flex-direction: column;
  padding: 10px 0; gap: 2px; overflow: hidden;
}
.app-tab-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 10px 4px; cursor: pointer;
  background: none; border: none; color: rgba(255,255,255,0.38);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  transition: all 0.15s; border-radius: 8px; margin: 0 6px;
  position: relative;
}
.app-tab-btn .tab-icon { font-size: 1.1rem; line-height: 1; }
.app-tab-btn .tab-label { font-size: 0.58rem; }
.app-tab-btn:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
.app-tab-btn.active { background: rgba(124,111,255,0.15); color: #a89fff; }
.app-tab-btn.active::before {
  content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; background: #7c6fff; border-radius: 0 3px 3px 0;
}
.tab-badge {
  position: absolute; top: 6px; right: 8px;
  background: #ef4444; color: white; font-size: 0.55rem; font-weight: 700;
  padding: 1px 4px; border-radius: 8px; min-width: 14px; text-align: center;
}
.sidebar-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 6px 10px; }
.sidebar-invite-btn { margin-top: auto; }

/* ── Content area ── */
/* .app-content: see authoritative definition below */
.app-tab-panel { flex: 1; min-height: 0; overflow: hidden; }

/* ── Editor subtabs ── */
.editor-subtabs {
  display: flex; align-items: center; gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0 12px; flex-shrink: 0; background: rgba(255,255,255,0.01);
  height: 40px;
}
.editor-subtab {
  padding: 0 14px; height: 40px; background: none; border: none;
  color: rgba(255,255,255,0.45); font-size: 0.78rem; font-weight: 600;
  cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s;
  white-space: nowrap;
}
.editor-subtab:hover { color: rgba(255,255,255,0.75); }
.editor-subtab.active { color: #a89fff; border-bottom-color: #7c6fff; }
.editor-subtab-spacer { flex: 1; }
.editor-submit-review-btn {
  font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: all 0.15s;
  white-space: nowrap;
}
.editor-submit-review-btn:hover { background: rgba(124,111,255,0.18); color: #a89fff; border-color: rgba(124,111,255,0.4); }

/* ── Upload area (inside editor) ── */
.pv-upload-area {
  padding: 20px; flex-shrink: 0;
}

/* ── Full-width doc panel (replaces pv-layout) ── */
.pv-doc-fullpanel {
  flex: 1; display: flex; flex-direction: column;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; margin: 10px 12px; overflow: hidden;
}
.pv-doc-header {
  padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,0.1);
  background: #f9fafb;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: #c8cdd8; font-weight: 600; flex-shrink: 0;
  background: rgba(255,255,255,0.02);
}
.pv-doc-header-actions { display: flex; align-items: center; gap: 14px; }
.p-action-bar-inline { display: flex; align-items: center; gap: 10px; }
.p-download-btn-sm {
  font-size: 0.72rem; font-weight: 700; padding: 5px 12px; border-radius: 6px;
  background: rgba(124,111,255,0.15); border: 1px solid rgba(124,111,255,0.3);
  color: #60a5fa; cursor: pointer; transition: all 0.15s;
}
.p-download-btn-sm:hover { background: rgba(124,111,255,0.3); }

/* ── Voice FAB (floating action button) ── */
.voice-fab {
  position: absolute; bottom: 20px; right: 20px; z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 64px; height: 64px; border-radius: 50%; padding: 0;
  background: linear-gradient(135deg, #7c6fff, #4c3fe0);
  border: none; color: white; cursor: pointer;
  box-shadow: 0 4px 20px rgba(124,111,255,0.5);
  font-size: 1.4rem; line-height: 1; transition: transform 0.15s, box-shadow 0.15s;
}
.voice-fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(124,111,255,0.65); }
.voice-fab[aria-expanded="true"] { background: linear-gradient(135deg, #4ade80, #16a34a); }
.voice-fab-label { font-size: 0.48rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

/* ── Slide-up voice drawer ── */
.voice-drawer {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 25;
  background: #0a0c14;
  border-top: 1px solid rgba(124,111,255,0.3);
  border-radius: 18px 18px 0 0;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
  max-height: 60vh; display: flex; flex-direction: column;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.6);
}
.voice-drawer.open { transform: translateY(0); }
.voice-drawer-handle {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 16px 6px; cursor: pointer; flex-shrink: 0;
}
.voice-drawer-grip {
  width: 44px; height: 5px; background: rgba(255,255,255,0.25);
  border-radius: 3px; flex-shrink: 0;
  transition: background 0.15s;
}
.voice-drawer-handle:hover .voice-drawer-grip { background: rgba(255,255,255,0.4); }
.voice-drawer-title { font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.6); flex: 1; text-align: center; }
.voice-drawer-close { background: none; border: none; color: rgba(255,255,255,0.4); cursor: pointer; font-size: 1rem; padding: 2px 6px; }
.voice-drawer-body { flex: 1; overflow-y: auto; padding: 10px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.voice-drawer-body::-webkit-scrollbar { width: 4px; }
.voice-drawer-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* ── Redesigned mic active inside drawer ── */
.pv-active-top { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.pv-transcript-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.pv-mic-btns { display: flex; gap: 6px; align-items: center; }
.pv-cancel-btn { 
  background: none; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.5);
  padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 0.78rem;
}

/* ── Tab panel header ── */
.tab-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 10px; border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0; gap: 12px;
}
.tab-panel-title { font-size: 0.9rem; font-weight: 700; color: #f8f9fc; }
.tab-search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 6px 12px; flex: 1; max-width: 280px;
}
.tab-search-icon { font-size: 0.85rem; opacity: 0.5; }
.tab-search-input {
  background: none; border: none; outline: none; color: #f8f9fc;
  font-size: 0.82rem; font-family: var(--sans); flex: 1;
}
.tab-search-input::placeholder { color: rgba(255,255,255,0.3); }
.tab-header-action-btn {
  font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.6);
  background: rgba(124,111,255,0.12); border: 1px solid rgba(124,111,255,0.25);
  padding: 6px 14px; border-radius: 8px; cursor: pointer; transition: all 0.15s;
  white-space: nowrap;
}
.tab-header-action-btn:hover { background: rgba(124,111,255,0.22); color: #a89fff; }
.tab-panel-scroll { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.tab-panel-scroll::-webkit-scrollbar { width: 4px; }
.tab-panel-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* ── Templates tab ── */
.tpl-section-label {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.35); margin: 4px 0 8px;
}
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-bottom: 6px; }
.tpl-tab-card {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px; padding: 12px; cursor: pointer; text-align: left;
  transition: all 0.15s; width: 100%; position: relative;
}
.tpl-tab-card:hover { background: rgba(124,111,255,0.1); border-color: rgba(124,111,255,0.3); }
.tpl-card-icon { font-size: 1.4rem; flex-shrink: 0; }
.tpl-card-info { flex: 1; min-width: 0; }
.tpl-card-name { display: block; font-size: 0.8rem; font-weight: 600; color: #f8f9fc; }
.tpl-card-desc { display: block; font-size: 0.7rem; color: rgba(255,255,255,0.4); line-height: 1.3; margin-top: 2px; }
.tpl-card-cat { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(124,111,255,0.7); background: rgba(124,111,255,0.1); border-radius: 4px; padding: 2px 5px; white-space: nowrap; flex-shrink: 0; }
.tpl-tab-card-sm .tpl-card-name { font-size: 0.75rem; }

/* ── Review tab ── */
.review-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; color: rgba(255,255,255,0.4); text-align: center; }
.review-empty-icon { font-size: 2.5rem; }
.review-empty-title { font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.6); }
.review-empty-sub { font-size: 0.78rem; }
.review-submit-btn {
  margin-top: 8px; padding: 9px 20px; border-radius: 8px; cursor: pointer;
  background: rgba(124,111,255,0.15); border: 1px solid rgba(124,111,255,0.35);
  color: #a89fff; font-size: 0.8rem; font-weight: 600; transition: all 0.15s;
}
.review-submit-btn:hover { background: rgba(124,111,255,0.28); }
.review-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.review-card-top { display: flex; flex-direction: column; gap: 4px; }
.review-card-meta { display: flex; align-items: center; gap: 10px; }
.review-doc-name { font-size: 0.85rem; font-weight: 600; color: #f8f9fc; flex: 1; }
.review-status-badge { font-size: 0.68rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.review-badge-pending  { background: rgba(245,158,11,0.15); color: #f59e0b; }
.review-badge-approved { background: rgba(124,111,255,0.15); color: #7c6fff; }
.review-badge-rejected { background: rgba(239,68,68,0.15); color: #ef4444; }
.review-card-info { display: flex; gap: 10px; font-size: 0.72rem; color: rgba(255,255,255,0.4); }
.review-card-summary { font-size: 0.74rem; color: rgba(255,255,255,0.5); }
.review-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.review-action-btn {
  font-size: 0.75rem; font-weight: 600; padding: 5px 12px; border-radius: 6px;
  cursor: pointer; border: 1px solid; transition: all 0.15s;
}
.review-approve  { background: rgba(124,111,255,0.12); border-color: rgba(124,111,255,0.3);  color: #7c6fff; }
.review-reject   { background: rgba(239,68,68,0.1);   border-color: rgba(239,68,68,0.25);  color: #ef4444; }
.review-edit-btn { background: rgba(124,111,255,0.12);border-color: rgba(124,111,255,0.3); color: #a89fff; }
.review-download { background: rgba(124,111,255,0.12);  border-color: rgba(124,111,255,0.3);   color: #60a5fa; }
.review-comments { display: flex; flex-direction: column; gap: 6px; }
.review-comment { font-size: 0.75rem; color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.04); border-radius: 6px; padding: 6px 10px; }
.review-comment strong { color: rgba(255,255,255,0.7); }
.review-add-comment { display: flex; gap: 8px; }
.review-comment-input {
  flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px; padding: 7px 10px; color: #f8f9fc; font-size: 0.78rem; font-family: var(--sans);
  outline: none;
}
.review-comment-input:focus { border-color: rgba(124,111,255,0.4); }
.review-comment-send {
  padding: 7px 14px; border-radius: 7px; cursor: pointer; font-size: 0.75rem; font-weight: 600;
  background: rgba(124,111,255,0.18); border: 1px solid rgba(124,111,255,0.3); color: #a89fff; transition: all 0.15s;
}
.review-comment-send:hover { background: rgba(124,111,255,0.3); }

/* ── Phrases tab ── */
.phrase-add-form {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0;
  background: rgba(255,255,255,0.02);
}
.phrase-input, .phrase-textarea {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 8px 12px; color: #f8f9fc; font-size: 0.8rem;
  font-family: var(--sans); outline: none; resize: vertical;
}
.phrase-input:focus, .phrase-textarea:focus { border-color: rgba(124,111,255,0.4); }
.phrase-input-sm { max-width: 180px; }
.phrase-save-btn {
  align-self: flex-start; font-size: 0.78rem; font-weight: 700; padding: 7px 16px; border-radius: 8px;
  background: rgba(124,111,255,0.2); border: 1px solid rgba(124,111,255,0.4); color: #a89fff; cursor: pointer;
  transition: all 0.15s;
}
.phrase-save-btn:hover { background: rgba(124,111,255,0.35); }
.phrase-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.15s;
}
.phrase-card:hover { border-color: rgba(124,111,255,0.25); }
.phrase-card-top { display: flex; align-items: center; gap: 8px; }
.phrase-name { font-size: 0.82rem; font-weight: 700; color: #f8f9fc; flex: 1; }
.phrase-tag { font-size: 0.65rem; font-weight: 700; background: rgba(59,130,246,0.15); color: #60a5fa; padding: 2px 7px; border-radius: 4px; }
.phrase-actions { display: flex; gap: 6px; margin-left: auto; }
.phrase-copy-btn {
  font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 6px;
  background: rgba(124,111,255,0.15); border: 1px solid rgba(124,111,255,0.3); color: #a89fff; cursor: pointer;
}
.phrase-delete-btn { font-size: 0.72rem; padding: 4px 8px; border-radius: 6px; background: none; border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.35); cursor: pointer; }
.phrase-text { font-size: 0.78rem; color: rgba(255,255,255,0.55); line-height: 1.5; }
.phrases-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; color: rgba(255,255,255,0.4); text-align: center; }
.phrases-empty-icon { font-size: 2.2rem; }
.phrases-empty-title { font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,0.55); }
.phrases-empty-sub { font-size: 0.76rem; }

/* ── Workflow tab ── */
.workflow-stats { display: flex; gap: 10px; margin-bottom: 16px; }
.workflow-stat {
  flex: 1; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px; padding: 12px; text-align: center;
}
.workflow-stat-num { font-size: 1.6rem; font-weight: 700; color: #f8f9fc; }
.workflow-stat-label { font-size: 0.68rem; color: rgba(255,255,255,0.4); margin-top: 2px; }
.workflow-section-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 8px; }
.workflow-team { display: flex; flex-direction: column; gap: 8px; }
.workflow-member {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px; padding: 10px 14px;
}
.workflow-avatar { width: 36px; height: 36px; border-radius: 50%; border: 1px solid; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.workflow-member-info { flex: 1; min-width: 0; }
.workflow-member-name { font-size: 0.82rem; font-weight: 600; color: #f8f9fc; }
.workflow-member-doc { font-size: 0.7rem; color: rgba(255,255,255,0.4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-badge { font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.workflow-badge-editing, .workflow-badge-drafting { background: rgba(124,111,255,0.15); color: #a89fff; }
.workflow-badge-reviewing { background: rgba(245,158,11,0.15); color: #f59e0b; }
.workflow-badge-idle { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.4); }
.workflow-submissions { display: flex; flex-direction: column; gap: 6px; }
.workflow-sub-row { display: flex; align-items: center; gap: 10px; font-size: 0.76rem; color: rgba(255,255,255,0.5); padding: 7px 10px; background: rgba(255,255,255,0.02); border-radius: 7px; }
.workflow-sub-icon { font-size: 0.9rem; flex-shrink: 0; }
.workflow-sub-name { flex: 1; color: rgba(255,255,255,0.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-sub-by { color: rgba(255,255,255,0.4); }
.workflow-sub-time { font-size: 0.68rem; color: rgba(255,255,255,0.3); flex-shrink: 0; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .app-sidebar { width: 56px; }
  .app-tab-btn .tab-label { display: none; }
  .pv-doc-fullpanel { margin: 0; }
  .editor-submit-review-btn { display: none; }
  .workflow-stats { flex-direction: column; }
  .tpl-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   FIXES — scrolling, layout, bottom bar, invite collapse
   ═══════════════════════════════════════════════════════════════ */

/* app-content must scroll on its own axis */
.app-content {
  overflow-y: auto !important;
  overflow-x: hidden;
}

/* Each tab panel fills content height and scrolls internally */
.app-tab-panel {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Editor panel: flex column, scroll the inner content */
/* previewMode: flex column filling remaining height */
/* pvWorkspace fills remaining height */
#pvWorkspace {
  flex: 1;
  min-height: 0;
}

/* Doc full panel scrolls its body */
.pv-doc-fullpanel {
  min-height: 0;
  max-height: calc(100vh - 160px);
}

/* Upload area — clean, no template gallery */
.pv-upload-area {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Bottom bar with submit button */
.editor-submit-review-btn-full {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  background: rgba(124,111,255,0.12);
  border: 1px solid rgba(124,111,255,0.3);
  color: #a89fff;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--sans);
}
.editor-submit-review-btn-full:hover {
  background: rgba(124,111,255,0.25);
  color: #c4bbff;
}

/* Invite section — collapsible header */
.invite-section {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.invite-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.invite-header:hover { background: rgba(255,255,255,0.02); }
#inviteSectionBody { padding: 0 16px 16px; }

/* Tab panel scrollable area */
.tab-panel-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  min-height: 0;
}

/* Fix excel mode to scroll */
/* ═══════════════════════════════════════════════════════════════
   CRITICAL LAYOUT FIXES — v3
   ═══════════════════════════════════════════════════════════════ */

/* appView must be flex column to stack topbar above shell */
#appView {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  overflow: hidden !important;
}
#appView.hidden { display: none !important; }

/* app-shell fills remaining height below topbar */
.app-shell {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* app-content: flex column, scrollable */
.app-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* All tab panels start hidden; shown via JS */
/* All panels hidden by default — JS adds .active to show one */
.app-tab-panel {
  display: none !important;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.app-tab-panel.active {
  display: flex !important;
  flex-direction: column;
}
/* Editor needs row layout for 3-col design */
#tabPanel_editor.active {
  flex-direction: row !important;
}

/* Editor panel scrolls its own content */
/* previewMode: flex column taking remaining editor height */
/* pvWorkspace: flex column, fills all remaining space */
#pvWorkspace {
  display: none; /* shown by JS */
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
#pvWorkspace.visible {
  display: flex !important;
}

/* Doc full panel: takes all space, scrolls body */
.pv-doc-fullpanel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  margin: 0;
  background: #ffffff;
  border: none;
  border-radius: 0;
}

.pv-doc-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pv-doc-body::-webkit-scrollbar { width: 5px; }
.pv-doc-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* Upload area — no grow, just sits at top */
.pv-upload-area {
  flex-shrink: 0;
  padding: 20px 16px;
}

/* Tab panels with scroll areas */
#tabPanel_templates,
#tabPanel_review,
#tabPanel_phrases,
#tabPanel_workflow {
  overflow: hidden;
}

.tab-panel-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Bottom bar sits at the very bottom of editor panel */
/* Invite section: flush to bottom, collapsible */
.invite-section {
  flex-shrink: 0;
  background: rgba(12,14,20,0.6);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.invite-header {
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.invite-header:hover { background: rgba(255,255,255,0.03); }
#inviteSectionBody {
  padding: 0 16px 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* ═══════════════════════════════════════════════════════════════
   FINAL DESIGN OVERHAUL v4
   – Dark theme consistency
   – Sidebar accent colors
   – Upload zone dark styling
   – Invite section dark re-skin
   – Width constraints for A4 view
   – Submit buttons visible & working
   ═══════════════════════════════════════════════════════════════ */

/* ── App shell sizing — constrain width, center content ── */
.app-shell {
  max-width: 100%;
  margin: 0;
  width: 100%;
}
#appView {
  background: var(--bg);
}

/* ── Top bar — dark, accent border ── */
/* app-topbar dark theme: see canonical block above */
.app-nav-logo {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #f8f9fc !important;
  letter-spacing: -0.02em;
}
.app-nav-logo span { color: #7c6fff !important; }
.app-timer-pill {
  font-size: 0.7rem;
  color: rgba(168,159,255,0.6) !important;
  background: rgba(124,111,255,0.08) !important;
  border: 1px solid rgba(124,111,255,0.2) !important;
}

/* ── Sidebar — rich indigo/slate gradient ── */
.app-sidebar {
  background: #0a0c14 !important;
  border-right: none !important;
  margin-right: 4px !important;
  width: 76px !important;
}
.app-tab-btn {
  color: rgba(255,255,255,0.5) !important;
  border-radius: 10px !important;
  margin: 0 7px !important;
  padding: 9px 4px !important;
  transition: all 0.18s ease !important;
}
.app-tab-btn .tab-icon { font-size: 1.15rem; }
.app-tab-btn .tab-label {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
}
.app-tab-btn:hover {
  background: rgba(124,111,255,0.12) !important;
  color: rgba(200,193,255,0.85) !important;
}
.app-tab-btn.active {
  background: rgba(124,111,255,0.2) !important;
  color: #c4bbff !important;
}
.app-tab-btn.active::before {
  background: #7c6fff !important;
  width: 3px;
  height: 55%;
}
.sidebar-divider {
  background: rgba(124,111,255,0.15) !important;
  margin: 6px 12px !important;
}

/* ── Editor subtabs ── */
.editor-subtabs {
  background: rgba(10,12,20,0.8) !important;
  border-bottom: 1px solid rgba(124,111,255,0.15) !important;
}
.editor-subtab {
  color: rgba(168,159,255,0.5) !important;
  font-size: 0.8rem !important;
}
.editor-subtab:hover { color: rgba(196,187,255,0.8) !important; }
.editor-subtab.active {
  color: #a89fff !important;
  border-bottom-color: #7c6fff !important;
}

/* ── Upload zone — dark themed ── */
.pv-upload-area {
  padding: 20px 16px !important;
  background: transparent !important;
}
.p-upload-zone {
  border: 2px dashed rgba(124,111,255,0.35) !important;
  border-radius: 12px !important;
  padding: 32px 24px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  position: relative !important;
  background: rgba(124,111,255,0.04) !important;
  margin-bottom: 0 !important;
}
.p-upload-zone:hover,
.p-upload-zone.drag {
  border-color: rgba(124,111,255,0.7) !important;
  background: rgba(124,111,255,0.1) !important;
}
.p-upload-zone input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
}
.p-upload-icon {
  font-size: 2.2rem !important;
  margin-bottom: 10px !important;
  display: block !important;
}
.p-upload-text {
  font-size: 0.85rem !important;
  color: rgba(168,159,255,0.6) !important;
}
.p-upload-text strong {
  color: #a89fff !important;
  display: block !important;
  font-size: 0.92rem !important;
  margin-bottom: 4px !important;
  font-weight: 700 !important;
}
.p-upload-text span { color: rgba(168,159,255,0.5) !important; font-size: 0.8rem !important; }

/* ── Doc panel header ── */
.pv-doc-header {
  background: rgba(13,15,26,0.8) !important;
  border-bottom: 1px solid rgba(124,111,255,0.12) !important;
  color: #c4bbff !important;
}
.pv-doc-hint { color: rgba(124,111,255,0.6) !important; }

/* ── Tab panel header ── */
.tab-panel-header {
  background: rgba(10,12,20,0.6) !important;
  border-bottom: 1px solid rgba(124,111,255,0.15) !important;
}
.tab-panel-title { color: #c4bbff !important; }
.tab-search-wrap {
  background: rgba(124,111,255,0.07) !important;
  border: 1px solid rgba(124,111,255,0.2) !important;
}
.tab-search-input { color: #f8f9fc !important; }
.tab-search-input::placeholder { color: rgba(168,159,255,0.35) !important; }
.tab-header-action-btn {
  background: rgba(124,111,255,0.15) !important;
  border: 1px solid rgba(124,111,255,0.3) !important;
  color: #a89fff !important;
}
.tab-header-action-btn:hover {
  background: rgba(124,111,255,0.28) !important;
  color: #c4bbff !important;
}

/* ── Submit for review button (bottom of editor) — VISIBLE ── */
.editor-submit-review-btn-full {
  display: block !important;
  width: 100% !important;
  padding: 11px 16px !important;
  background: linear-gradient(135deg, rgba(124,111,255,0.25), rgba(76,63,224,0.2)) !important;
  border: 1px solid rgba(124,111,255,0.45) !important;
  border-radius: 9px !important;
  color: #c4bbff !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.18s !important;
  font-family: var(--sans) !important;
  letter-spacing: 0.02em !important;
}
.editor-submit-review-btn-full:hover {
  background: linear-gradient(135deg, rgba(124,111,255,0.4), rgba(76,63,224,0.35)) !important;
  border-color: rgba(124,111,255,0.7) !important;
  color: white !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(124,111,255,0.25) !important;
}

/* Download button: see canonical .p-download-btn-sm above */

/* ── Voice FAB ── */
.voice-fab {
  background: linear-gradient(135deg, #7c6fff, #4c3fe0) !important;
  box-shadow: 0 4px 20px rgba(124,111,255,0.45) !important;
}

/* ── Voice drawer ── */
.voice-drawer {
  background: rgba(13,15,26,0.98) !important;
  border-top: 1px solid rgba(124,111,255,0.3) !important;
}
.voice-drawer-title { color: rgba(196,187,255,0.7) !important; }
.voice-drawer-grip { background: rgba(124,111,255,0.3) !important; }
.voice-drawer-close { color: rgba(168,159,255,0.5) !important; }

/* ── p-save-tag-btn (Replace button) ── */
.p-save-tag-btn {
  background: linear-gradient(135deg, #7c6fff, #4c3fe0) !important;
  color: white !important;
  border: none !important;
  padding: 7px 16px !important;
  border-radius: 7px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-size: 0.8rem !important;
  transition: all 0.15s !important;
}
.p-save-tag-btn:hover {
  background: linear-gradient(135deg, #9080ff, #6050f0) !important;
  box-shadow: 0 3px 12px rgba(124,111,255,0.4) !important;
}

/* ── p-btn (Clear, etc.) ── */
.p-btn {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(196,187,255,0.8) !important;
  padding: 6px 12px !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  transition: all 0.15s !important;
}
.p-btn:hover {
  background: rgba(255,255,255,0.1) !important;
  color: white !important;
}

/* ── Status text & indicators ── */
.p-status-indicator { color: rgba(168,159,255,0.65) !important; }
.p-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(168,159,255,0.3);
}
.p-dot.live {
  background: #7c6fff !important;
  box-shadow: 0 0 0 3px rgba(124,111,255,0.25) !important;
  animation: livePulse 1.3s ease-in-out infinite !important;
}
@keyframes livePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(124,111,255,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(124,111,255,0); }
}
#pvStatusText, #xlStatusText { color: rgba(196,187,255,0.65) !important; font-size: 0.78rem !important; }

/* ── Active section / editing label ── */
.pv-active-label { color: rgba(124,111,255,0.7) !important; font-size: 0.7rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; }
.pv-active-section { color: #f8f9fc !important; font-size: 0.82rem !important; line-height: 1.4 !important; }

/* ── Transcript box ── */
.pv-transcript-wrap {
  background: rgba(124,111,255,0.06) !important;
  border: 1px solid rgba(124,111,255,0.2) !important;
  border-radius: 10px !important;
  min-height: 72px !important;
  padding: 10px 12px !important;
}
#pvTranscript {
  color: #f8f9fc !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  outline: none !important;
  min-height: 50px !important;
}
#pvTranscript:empty::before {
  content: attr(data-placeholder);
  color: rgba(168,159,255,0.35) !important;
  pointer-events: none !important;
}
.p-char-count { color: rgba(168,159,255,0.5) !important; font-size: 0.74rem !important; }

/* ── Idle state ── */
.pv-mic-idle {
  background: rgba(124,111,255,0.04) !important;
  border: 1px dashed rgba(124,111,255,0.2) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}
.pv-idle-icon { font-size: 1.8rem !important; }
.pv-idle-text { color: rgba(168,159,255,0.55) !important; font-size: 0.82rem !important; text-align: center !important; line-height: 1.5 !important; }

/* ── Filled list ── */
.pv-filled-header { color: #a89fff !important; font-size: 0.74rem !important; font-weight: 700 !important; margin-bottom: 6px !important; }
.pv-filled-item { background: rgba(124,111,255,0.07) !important; border: 1px solid rgba(124,111,255,0.15) !important; border-radius: 8px !important; padding: 8px 10px !important; }
.pv-filled-original { color: rgba(255,255,255,0.45) !important; font-size: 0.74rem !important; }
.pv-filled-new { color: #a89fff !important; font-size: 0.74rem !important; }
.p-filled-edit {
  background: rgba(124,111,255,0.15) !important; border: 1px solid rgba(124,111,255,0.3) !important;
  color: #a89fff !important; font-size: 0.7rem !important; padding: 3px 9px !important;
  border-radius: 5px !important; cursor: pointer !important;
}

/* ── INVITE SECTION — full dark retheme ── */
.invite-section {
  background: rgba(8,10,18,0.9) !important;
  border-top: 1px solid rgba(124,111,255,0.18) !important;
  padding: 0 !important;
  margin: 0 !important;
}
.invite-header {
  padding: 12px 16px !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}
.invite-title h3 {
  font-family: var(--sans) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #a89fff !important;
}
.invite-slots-badge {
  background: rgba(124,111,255,0.15) !important;
  color: #a89fff !important;
  border: 1px solid rgba(124,111,255,0.3) !important;
  font-size: 0.65rem !important;
}
.invite-slots-badge.full {
  background: rgba(239,68,68,0.15) !important;
  color: #f87171 !important;
  border-color: rgba(239,68,68,0.3) !important;
}
.invite-tier-note { color: rgba(168,159,255,0.45) !important; font-size: 0.72rem !important; font-style: normal !important; }
#inviteSectionBody { padding: 0 16px 14px !important; background: transparent !important; }
.invite-upgrade-notice {
  background: rgba(124,111,255,0.07) !important;
  border: 1px dashed rgba(124,111,255,0.25) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  color: rgba(168,159,255,0.7) !important;
  font-size: 0.8rem !important;
  text-align: center !important;
}
.invite-upgrade-notice strong {
  color: #a89fff !important;
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 0.84rem !important;
}
.invite-upgrade-notice a {
  color: #7c6fff !important;
  text-decoration: underline !important;
}
.invite-email-input {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(124,111,255,0.25) !important;
  border-radius: 8px !important;
  color: #f8f9fc !important;
  font-family: var(--sans) !important;
  font-size: 0.84rem !important;
  padding: 9px 12px !important;
}
.invite-email-input:focus { border-color: rgba(124,111,255,0.6) !important; background: rgba(124,111,255,0.08) !important; }
.invite-email-input::placeholder { color: rgba(168,159,255,0.35) !important; }
.invite-send-btn {
  background: linear-gradient(135deg, #7c6fff, #4c3fe0) !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: var(--sans) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 9px 18px !important;
  cursor: pointer !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: all 0.15s !important;
}
.invite-send-btn:hover { background: linear-gradient(135deg, #9080ff, #6050f0) !important; }
.invite-send-btn:disabled { background: rgba(124,111,255,0.2) !important; color: rgba(168,159,255,0.4) !important; cursor: not-allowed !important; }
.invite-item {
  background: rgba(124,111,255,0.07) !important;
  border: 1px solid rgba(124,111,255,0.18) !important;
  border-radius: 9px !important;
}
.invite-avatar {
  background: linear-gradient(135deg, #7c6fff, #4c3fe0) !important;
  color: white !important;
  font-size: 0.78rem !important;
}
.invite-item-email { color: #f8f9fc !important; }
.invite-status.pending { background: rgba(245,158,11,0.12) !important; color: #f59e0b !important; border: 1px solid rgba(245,158,11,0.25) !important; }
.invite-status.accepted { background: rgba(124,111,255,0.12) !important; color: #7c6fff !important; border: 1px solid rgba(124,111,255,0.25) !important; }
.invite-remove-btn {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.35) !important;
}
.invite-remove-btn:hover { border-color: #f87171 !important; color: #f87171 !important; background: rgba(239,68,68,0.1) !important; }
.invite-empty-state { color: rgba(168,159,255,0.4) !important; font-style: normal !important; }
.invite-link-box {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(124,111,255,0.2) !important;
  border-radius: 8px !important;
  color: rgba(168,159,255,0.6) !important;
  font-family: var(--sans) !important;
}
.invite-copy-btn {
  background: rgba(124,111,255,0.12) !important;
  border: 1px solid rgba(124,111,255,0.3) !important;
  color: #a89fff !important;
  border-radius: 8px !important;
  font-family: var(--sans) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.invite-copy-btn:hover { background: rgba(124,111,255,0.25) !important; }
.invite-copy-btn.copied { border-color: #7c6fff !important; color: #7c6fff !important; background: rgba(124,111,255,0.1) !important; }

/* ── p-section-label dark ── */
.p-section-label { color: rgba(168,159,255,0.55) !important; }

/* ── Word count / status bar ── */
.p-word-count { color: rgba(168,159,255,0.5) !important; font-size: 0.76rem !important; }

/* ── Action bar ── */
.p-action-bar {
  background: rgba(8,10,18,0.9) !important;
  border-top: 1px solid rgba(124,111,255,0.15) !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ── Excel mode cards ── */
.p-card {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(124,111,255,0.12) !important;
  color: #f8f9fc !important;
}

/* ── Toast ── */
#pToast {
  background: rgba(124,111,255,0.92) !important;
  color: white !important;
  border-radius: 24px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  box-shadow: 0 6px 24px rgba(124,111,255,0.4) !important;
}

/* ── Paragraph text in document ── */
.pv-para-text { color: #c8cdd8 !important; }
.pv-para.pv-heading .pv-para-text { color: #e8eaf0 !important; }
.pv-edit-badge { color: rgba(168,159,255,0.5) !important; background: rgba(255,255,255,0.05) !important; }
.pv-para.pv-edited .pv-edit-badge { background: rgba(124,111,255,0.15) !important; color: #4ade80 !important; }

/* ── Review tab cards ── */
.review-card { background: rgba(255,255,255,0.03) !important; border-color: rgba(124,111,255,0.15) !important; }
.review-doc-name { color: #f8f9fc !important; }
.review-card-info { color: rgba(168,159,255,0.5) !important; }
.review-card-summary { color: rgba(168,159,255,0.6) !important; }
.review-comment-input {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(124,111,255,0.2) !important;
  color: #f8f9fc !important;
}
.review-comment-input::placeholder { color: rgba(168,159,255,0.35) !important; }

/* ── Phrases tab ── */
.phrase-input, .phrase-textarea {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(124,111,255,0.2) !important;
  color: #f8f9fc !important;
}
.phrase-input::placeholder, .phrase-textarea::placeholder { color: rgba(168,159,255,0.35) !important; }
.phrase-card { background: rgba(255,255,255,0.03) !important; border-color: rgba(124,111,255,0.12) !important; }
.phrase-name { color: #f8f9fc !important; }
.phrase-text { color: rgba(196,187,255,0.65) !important; }

/* ── Workflow tab ── */
.workflow-stat { background: rgba(255,255,255,0.03) !important; border-color: rgba(124,111,255,0.12) !important; }
.workflow-stat-num { color: #c4bbff !important; }
.workflow-stat-label { color: rgba(168,159,255,0.5) !important; }
.workflow-member { background: rgba(255,255,255,0.03) !important; border-color: rgba(124,111,255,0.12) !important; }
.workflow-member-name { color: #f8f9fc !important; }
.workflow-member-doc { color: rgba(168,159,255,0.5) !important; }
.workflow-section-label { color: rgba(168,159,255,0.4) !important; }
.workflow-sub-row { background: rgba(255,255,255,0.02) !important; }
.workflow-sub-name { color: rgba(196,187,255,0.8) !important; }
.workflow-sub-by, .workflow-sub-time { color: rgba(168,159,255,0.4) !important; }

/* ── Template cards ── */
.tpl-tab-card {
  background: rgba(124,111,255,0.05) !important;
  border-color: rgba(124,111,255,0.15) !important;
}
.tpl-tab-card:hover {
  background: rgba(124,111,255,0.14) !important;
  border-color: rgba(124,111,255,0.38) !important;
}
.tpl-card-name { color: #f8f9fc !important; }
.tpl-card-desc { color: rgba(168,159,255,0.5) !important; }
.tpl-section-label { color: rgba(168,159,255,0.4) !important; }

/* ── Phrase save / add buttons ── */
.phrase-save-btn {
  background: rgba(124,111,255,0.18) !important;
  border-color: rgba(124,111,255,0.4) !important;
  color: #a89fff !important;
}
.phrase-save-btn:hover { background: rgba(124,111,255,0.32) !important; color: #c4bbff !important; }

/* ── Upload zone pointer-events fix ── */
.p-upload-zone {
  position: relative !important;
  overflow: hidden !important;
}
.p-upload-zone input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 5 !important;
  font-size: 0 !important; /* prevent layout shift */
}
.p-upload-zone .p-upload-icon,
.p-upload-zone .p-upload-text {
  position: relative !important;
  z-index: 1 !important;
  pointer-events: none !important; /* let clicks fall through to the input */
}

/* ── Upload zone as label — reliable click anywhere ── */
label.p-upload-zone {
  display: block !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
label.p-upload-zone input[type="file"] {
  display: none !important;  /* hidden — label click opens picker natively */
  position: static !important;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — blues + white theme
   ═══════════════════════════════════════════════════════════════ */

/* Theme toggle button */
.theme-toggle-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  width: 34px; height: 34px; border-radius: 8px;
  cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  margin-left: 4px;
}
.theme-toggle-btn:hover { background: rgba(255,255,255,0.15); color: white; }

/* ── Light mode variables ── */
#appView.light-mode {
  --bg:       #f0f4ff;
  --surface:  #ffffff;
  --surface2: #e8f0fe;
  --border:   #c8d4e8;
  --border2:  #a0b4d4;
  --text:     #0f1117;
  --muted:    #4a6080;
  --accent:   #1a4a9e;
  --accent2:  #7c6fff;
  --green:    #1a7a42;
  background: #f0f4ff !important;
  color: #0f1117 !important;
}

/* ── Topbar ── */
#appView.light-mode .app-topbar {
  background: #ffffff !important;
  border-bottom: 1px solid #c8d4e8 !important;
  box-shadow: 0 1px 6px rgba(124,111,255,0.1) !important;
}
#appView.light-mode .app-nav-logo { color: #0f1117 !important; }
#appView.light-mode .app-nav-logo span { color: #7c6fff !important; }
#appView.light-mode .app-timer-pill {
  color: #4a6080 !important;
  background: #e8f0fe !important;
  border-color: #c8d4e8 !important;
}
#appView.light-mode .theme-toggle-btn {
  background: #e8f0fe !important;
  border-color: #c8d4e8 !important;
  color: #7c6fff !important;
}
#appView.light-mode .back-btn {
  background: #e8f0fe !important;
  border-color: #c8d4e8 !important;
  color: #1a4a9e !important;
}

/* ── Sidebar ── */
#appView.light-mode .app-sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 60%, #e8f0fe 100%) !important;
  border-right: 1px solid #c8d4e8 !important;
}
#appView.light-mode .app-tab-btn { color: #6b8ab5 !important; }
#appView.light-mode .app-tab-btn:hover {
  background: #e8f0fe !important;
  color: #1a4a9e !important;
}
#appView.light-mode .app-tab-btn.active {
  background: #dce8ff !important;
  color: #1a4a9e !important;
}
#appView.light-mode .app-tab-btn.active::before { background: #7c6fff !important; }
#appView.light-mode .sidebar-divider { background: #c8d4e8 !important; }

/* ── App content background ── */
#appView.light-mode .app-content { background: #f4f7ff !important; }
/* ── Editor subtabs ── */
#appView.light-mode .editor-subtabs {
  background: #ffffff !important;
  border-bottom: 1px solid #c8d4e8 !important;
}
#appView.light-mode .editor-subtab { color: #6b8ab5 !important; }
#appView.light-mode .editor-subtab:hover { color: #1a4a9e !important; }
#appView.light-mode .editor-subtab.active {
  color: #1a4a9e !important;
  border-bottom-color: #7c6fff !important;
}

/* ── Upload zone ── */
#appView.light-mode .pv-upload-area { background: transparent !important; }
#appView.light-mode label.p-upload-zone,
#appView.light-mode .p-upload-zone {
  border-color: #93b4e8 !important;
  background: #f0f6ff !important;
}
#appView.light-mode .p-upload-zone:hover,
#appView.light-mode label.p-upload-zone:hover {
  border-color: #7c6fff !important;
  background: #e4eeff !important;
}
#appView.light-mode .p-upload-text { color: #4a6080 !important; }
#appView.light-mode .p-upload-text strong { color: #1a4a9e !important; }
#appView.light-mode .p-upload-text span { color: #6b8ab5 !important; }

/* ── Doc panel ── */
#appView.light-mode .pv-doc-fullpanel {
  background: #ffffff !important;
  border: 1px solid #c8d4e8 !important;
  box-shadow: 0 2px 12px rgba(124,111,255,0.08) !important;
}
#appView.light-mode .pv-doc-header {
  background: #f0f4ff !important;
  border-bottom: 1px solid #c8d4e8 !important;
  color: #0f1117 !important;
}
#appView.light-mode .pv-doc-hint { color: #7c6fff !important; }
#appView.light-mode .pv-para-text { color: #0f1117 !important; }
#appView.light-mode .pv-para.pv-heading .pv-para-text { color: #0f1117 !important; }
#appView.light-mode .pv-para:hover {
  background: #e8f0fe !important;
  border-color: #93b4e8 !important;
}
#appView.light-mode .pv-para.pv-active {
  background: #dce8ff !important;
  border-color: #7c6fff !important;
}
#appView.light-mode .pv-para.pv-edited { border-left-color: #7c6fff !important; }
#appView.light-mode .pv-edit-badge { background: #e8f0fe !important; color: #4a6080 !important; }
#appView.light-mode .pv-para.pv-edited .pv-edit-badge { background: #e6f9ef !important; color: #1a7a42 !important; }

/* ── Voice FAB ── */
#appView.light-mode .voice-fab {
  background: linear-gradient(135deg, #7c6fff, #1a4a9e) !important;
  box-shadow: 0 4px 20px rgba(124,111,255,0.4) !important;
}

/* ── Voice drawer ── */
#appView.light-mode .voice-drawer {
  background: #ffffff !important;
  border-top: 1px solid #c8d4e8 !important;
  box-shadow: 0 -4px 24px rgba(124,111,255,0.12) !important;
}
#appView.light-mode .voice-drawer-title { color: #4a6080 !important; }
#appView.light-mode .voice-drawer-grip { background: #c8d4e8 !important; }
#appView.light-mode .voice-drawer-close { color: #6b8ab5 !important; }
#appView.light-mode .pv-mic-idle {
  background: #f0f6ff !important;
  border-color: #93b4e8 !important;
}
#appView.light-mode .pv-idle-text { color: #4a6080 !important; }
#appView.light-mode .pv-active-label { color: #7c6fff !important; }
#appView.light-mode .pv-active-section { color: #0f1117 !important; }
#appView.light-mode .pv-transcript-wrap {
  background: #f8fbff !important;
  border-color: #93b4e8 !important;
}
#appView.light-mode #pvTranscript { color: #0f1117 !important; }
#appView.light-mode #pvTranscript:empty::before { color: #93b4e8 !important; }
#appView.light-mode #pvStatusText, #appView.light-mode #xlStatusText { color: #4a6080 !important; }
#appView.light-mode .p-char-count { color: #6b8ab5 !important; }
#appView.light-mode .p-save-tag-btn {
  background: linear-gradient(135deg, #7c6fff, #1a4a9e) !important;
  color: white !important;
}
#appView.light-mode .p-btn {
  background: #e8f0fe !important;
  border-color: #c8d4e8 !important;
  color: #1a4a9e !important;
}
#appView.light-mode .p-btn:hover { background: #dce8ff !important; color: #0f1117 !important; }
#appView.light-mode .pv-cancel-btn {
  background: transparent !important;
  border-color: #c8d4e8 !important;
  color: #6b8ab5 !important;
}
#appView.light-mode .p-mic-btn {
  background: white !important;
  border-color: #1a4a9e !important;
  color: #1a4a9e !important;
}
#appView.light-mode .p-mic-btn:hover { background: #1a4a9e !important; color: white !important; }
#appView.light-mode .p-mic-btn.recording { background: #e63000 !important; border-color: #e63000 !important; color: white !important; }

/* ── Filled list ── */
#appView.light-mode .pv-filled-header { color: #1a4a9e !important; }
#appView.light-mode .pv-filled-item { background: #e8f0fe !important; border-color: #c8d4e8 !important; }
#appView.light-mode .pv-filled-original { color: #6b8ab5 !important; }
#appView.light-mode .pv-filled-new { color: #1a4a9e !important; }

/* ── Download button ── */
#appView.light-mode .p-download-btn-sm {
  background: #dce8ff !important;
  border-color: #93b4e8 !important;
  color: #1a4a9e !important;
}
#appView.light-mode .p-download-btn-sm:hover { background: #c8d8f8 !important; }

/* ── Submit for review ── */
#appView.light-mode .editor-submit-review-btn-full {
  background: linear-gradient(135deg, #dce8ff, #c8d8f8) !important;
  border-color: #93b4e8 !important;
  color: #1a4a9e !important;
}
#appView.light-mode .editor-submit-review-btn-full:hover {
  background: linear-gradient(135deg, #c8d8f8, #b0c8f0) !important;
  border-color: #7c6fff !important;
  color: #0f1117 !important;
  box-shadow: 0 3px 12px rgba(124,111,255,0.2) !important;
  transform: translateY(-1px) !important;
}

/* ── Tab panel headers ── */
#appView.light-mode .tab-panel-header {
  background: #ffffff !important;
  border-bottom: 1px solid #c8d4e8 !important;
}
#appView.light-mode .tab-panel-title { color: #0f1117 !important; }
#appView.light-mode .tab-search-wrap {
  background: #f0f4ff !important;
  border-color: #c8d4e8 !important;
}
#appView.light-mode .tab-search-input { color: #0f1117 !important; }
#appView.light-mode .tab-search-input::placeholder { color: #93b4e8 !important; }
#appView.light-mode .tab-header-action-btn {
  background: #e8f0fe !important;
  border-color: #93b4e8 !important;
  color: #1a4a9e !important;
}

/* ── Templates tab ── */
#appView.light-mode .tpl-tab-card {
  background: #f4f8ff !important;
  border-color: #c8d4e8 !important;
}
#appView.light-mode .tpl-tab-card:hover {
  background: #dce8ff !important;
  border-color: #7c6fff !important;
}
#appView.light-mode .tpl-card-name { color: #0f1117 !important; }
#appView.light-mode .tpl-card-desc { color: #4a6080 !important; }
#appView.light-mode .tpl-card-cat {
  background: #e8f0fe !important;
  color: #1a4a9e !important;
}
#appView.light-mode .tpl-section-label { color: #6b8ab5 !important; }

/* ── Review tab ── */
#appView.light-mode .review-card {
  background: #ffffff !important;
  border-color: #c8d4e8 !important;
  box-shadow: 0 1px 6px rgba(124,111,255,0.06) !important;
}
#appView.light-mode .review-doc-name { color: #0f1117 !important; }
#appView.light-mode .review-card-info { color: #6b8ab5 !important; }
#appView.light-mode .review-card-summary { color: #4a6080 !important; }
#appView.light-mode .review-comment { background: #f0f4ff !important; color: #0f1117 !important; }
#appView.light-mode .review-comment strong { color: #0f1117 !important; }
#appView.light-mode .review-comment-input {
  background: #f0f4ff !important;
  border-color: #c8d4e8 !important;
  color: #0f1117 !important;
}
#appView.light-mode .review-empty-title { color: #1a4a9e !important; }
#appView.light-mode .review-empty { color: #6b8ab5 !important; }
#appView.light-mode .review-submit-btn {
  background: #e8f0fe !important;
  border-color: #93b4e8 !important;
  color: #1a4a9e !important;
}

/* ── Phrases tab ── */
#appView.light-mode .phrase-add-form {
  background: #f4f8ff !important;
  border-bottom: 1px solid #c8d4e8 !important;
}
#appView.light-mode .phrase-input,
#appView.light-mode .phrase-textarea {
  background: #ffffff !important;
  border-color: #c8d4e8 !important;
  color: #0f1117 !important;
}
#appView.light-mode .phrase-input::placeholder,
#appView.light-mode .phrase-textarea::placeholder { color: #93b4e8 !important; }
#appView.light-mode .phrase-card {
  background: #ffffff !important;
  border-color: #c8d4e8 !important;
}
#appView.light-mode .phrase-name { color: #0f1117 !important; }
#appView.light-mode .phrase-text { color: #4a6080 !important; }
#appView.light-mode .phrase-tag { background: #e8f0fe !important; color: #1a4a9e !important; }
#appView.light-mode .phrase-copy-btn {
  background: #e8f0fe !important;
  border-color: #93b4e8 !important;
  color: #1a4a9e !important;
}
#appView.light-mode .phrase-save-btn {
  background: linear-gradient(135deg, #7c6fff, #1a4a9e) !important;
  border: none !important;
  color: white !important;
}
#appView.light-mode .phrases-empty { color: #6b8ab5 !important; }
#appView.light-mode .phrases-empty-title { color: #1a4a9e !important; }

/* ── Workflow tab ── */
#appView.light-mode .workflow-stat {
  background: #ffffff !important;
  border-color: #c8d4e8 !important;
  box-shadow: 0 1px 6px rgba(124,111,255,0.06) !important;
}
#appView.light-mode .workflow-stat-num { color: #1a4a9e !important; }
#appView.light-mode .workflow-stat-label { color: #6b8ab5 !important; }
#appView.light-mode .workflow-section-label { color: #6b8ab5 !important; }
#appView.light-mode .workflow-member {
  background: #ffffff !important;
  border-color: #c8d4e8 !important;
}
#appView.light-mode .workflow-member-name { color: #0f1117 !important; }
#appView.light-mode .workflow-member-doc { color: #6b8ab5 !important; }
#appView.light-mode .workflow-sub-row { background: #f0f4ff !important; }
#appView.light-mode .workflow-sub-name { color: #0f1117 !important; }
#appView.light-mode .workflow-sub-by, #appView.light-mode .workflow-sub-time { color: #6b8ab5 !important; }
#appView.light-mode .workflow-badge-editing,
#appView.light-mode .workflow-badge-drafting { background: #dce8ff !important; color: #1a4a9e !important; }
#appView.light-mode .workflow-badge-reviewing { background: #fef3c7 !important; color: #92600a !important; }
#appView.light-mode .workflow-badge-idle { background: #f0f4ff !important; color: #6b8ab5 !important; }

/* ── Invite section ── */
#appView.light-mode .invite-section {
  background: #f4f8ff !important;
  border-top: 1px solid #c8d4e8 !important;
}
#appView.light-mode .invite-title h3 { color: #1a4a9e !important; }
#appView.light-mode .invite-tier-note { color: #6b8ab5 !important; }
#appView.light-mode .invite-slots-badge {
  background: #e8f0fe !important;
  color: #1a4a9e !important;
  border-color: #c8d4e8 !important;
}
#appView.light-mode #inviteSectionBody { background: transparent !important; }
#appView.light-mode .invite-upgrade-notice {
  background: #e8f0fe !important;
  border-color: #93b4e8 !important;
  color: #4a6080 !important;
}
#appView.light-mode .invite-upgrade-notice strong { color: #1a4a9e !important; }
#appView.light-mode .invite-upgrade-notice a { color: #7c6fff !important; }
#appView.light-mode .invite-email-input {
  background: #ffffff !important;
  border-color: #c8d4e8 !important;
  color: #0f1117 !important;
}
#appView.light-mode .invite-email-input:focus { border-color: #7c6fff !important; }
#appView.light-mode .invite-email-input::placeholder { color: #93b4e8 !important; }
#appView.light-mode .invite-send-btn {
  background: linear-gradient(135deg, #7c6fff, #1a4a9e) !important;
}
#appView.light-mode .invite-link-box {
  background: #f0f4ff !important;
  border-color: #c8d4e8 !important;
  color: #4a6080 !important;
}
#appView.light-mode .invite-copy-btn {
  background: #e8f0fe !important;
  border-color: #93b4e8 !important;
  color: #1a4a9e !important;
}
#appView.light-mode .invite-item {
  background: #f0f6ff !important;
  border-color: #c8d4e8 !important;
}
#appView.light-mode .invite-item-email { color: #0f1117 !important; }
#appView.light-mode .invite-empty-state { color: #93b4e8 !important; }
#appView.light-mode .invite-status.pending { background: #fef9e7 !important; color: #92600a !important; border-color: #f5e09e !important; }
#appView.light-mode .invite-status.accepted { background: #e6f9ef !important; color: #1a7a42 !important; border-color: #a8e8c2 !important; }
#appView.light-mode .invite-remove-btn {
  background: #f0f4ff !important;
  border-color: #c8d4e8 !important;
  color: #6b8ab5 !important;
}

/* ── Toast ── */
#appView.light-mode #pToast {
  background: rgba(26,74,158,0.92) !important;
  box-shadow: 0 6px 24px rgba(124,111,255,0.3) !important;
}

/* ── p-card (Excel mode) ── */
#appView.light-mode .p-card {
  background: #ffffff !important;
  border-color: #c8d4e8 !important;
  color: #0f1117 !important;
}
#appView.light-mode .p-section-label { color: #6b8ab5 !important; }
#appView.light-mode .p-word-count { color: #6b8ab5 !important; }
#appView.light-mode .p-action-bar {
  background: #f0f4ff !important;
  border-top: 1px solid #c8d4e8 !important;
}

/* ── Paragraph selection preview ── */
#appView.light-mode .pv-sel-highlight { color: #0f1117 !important; background: #dce8ff !important; border-radius: 3px; padding: 0 3px; }

/* ═══════════════════════════════════════════════════════════════
   ACCOUNT MENU
   ═══════════════════════════════════════════════════════════════ */
.account-menu-wrap { position: relative; }
.account-btn {
  display: flex !important; align-items: center !important; gap: 7px !important;
  background: rgba(124,111,255,0.1) !important; border: 1px solid rgba(124,111,255,0.25) !important;
  border-radius: 8px !important; padding: 5px 11px !important; cursor: pointer !important;
  color: #c4bbff !important; font-size: 0.78rem !important; font-weight: 600 !important; font-family: var(--sans) !important;
  transition: all 0.15s !important;
}
.account-btn:hover { background: rgba(124,111,255,0.2); border-color: rgba(124,111,255,0.45); }
.account-btn-avatar { font-size: 1rem; line-height: 1; }
.account-btn-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-btn-arrow { font-size: 0.65rem; opacity: 0.6; }
.account-dropdown {
  position: absolute !important; top: calc(100% + 6px) !important; right: 0 !important;
  background: #14172a !important; border: 1px solid rgba(124,111,255,0.3) !important;
  border-radius: 10px !important; min-width: 200px !important; z-index: 200 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  overflow: hidden !important;
}
.account-dropdown-user { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.account-dropdown-email { font-size: 0.78rem; color: #c4bbff; font-weight: 600; }
.account-dropdown-plan { font-size: 0.7rem; color: rgba(168,159,255,0.5); margin-top: 2px; }
.account-dropdown-divider { height: 1px; background: rgba(255,255,255,0.07); }
.account-dropdown-item {
  display: block !important; width: 100% !important; text-align: left !important;
  padding: 10px 14px !important; background: none !important; border: none !important;
  color: rgba(196,187,255,0.8) !important; font-size: 0.8rem !important; font-family: var(--sans) !important;
  cursor: pointer !important; transition: background 0.15s !important;
}
.account-dropdown-item:hover { background: rgba(124,111,255,0.12); color: white; }
.account-signout { color: #f87171 !important; }
.account-signout:hover { background: rgba(239,68,68,0.1) !important; }

/* ── Light mode account menu ── */
#appView.light-mode .account-btn { background: #e8f0fe !important; border-color: #93b4e8 !important; color: #1a4a9e !important; }
#appView.light-mode .account-dropdown { background: #ffffff !important; border-color: #c8d4e8 !important; box-shadow: 0 8px 32px rgba(124,111,255,0.15) !important; }
#appView.light-mode .account-dropdown-user { border-bottom-color: #e8f0fe !important; }
#appView.light-mode .account-dropdown-email { color: #0f1117 !important; }
#appView.light-mode .account-dropdown-plan { color: #6b8ab5 !important; }
#appView.light-mode .account-dropdown-item { color: #0f1117 !important; }
#appView.light-mode .account-dropdown-item:hover { background: #e8f0fe !important; }
#appView.light-mode .account-signout { color: #dc2626 !important; }

/* ═══════════════════════════════════════════════════════════════
   PHRASE CARDS — SQUARE GRID
   ═══════════════════════════════════════════════════════════════ */
.phrase-card-sq {
  background: rgba(124,111,255,0.07) !important;
  border: 1px solid rgba(124,111,255,0.15) !important;
  border-radius: 10px !important;
  padding: 12px !important;
  display: flex !important; flex-direction: column !important; gap: 8px !important;
  min-height: 130px !important;
  transition: border-color 0.15s, background 0.15s !important;
}
.phrase-card-sq:hover { background: rgba(124,111,255,0.12); border-color: rgba(124,111,255,0.35); }
.phrase-sq-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.phrase-sq-name { font-size: 0.8rem !important; font-weight: 700 !important; color: #f8f9fc !important; flex: 1 !important; line-height: 1.3 !important; }
.phrase-sq-text { font-size: 0.75rem !important; color: rgba(196,187,255,0.65) !important; line-height: 1.5 !important; flex: 1 !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.phrase-sq-actions { display: flex; gap: 6px; margin-top: auto; }
/* scroll area needs to be grid for square cards */
#phrasesTabContent { overflow-y: auto !important; }

/* light mode square phrase cards */
#appView.light-mode .phrase-card-sq { background: #f4f8ff !important; border-color: #c8d4e8 !important; }
#appView.light-mode .phrase-card-sq:hover { background: #e8f0fe !important; border-color: #7c6fff !important; }
#appView.light-mode .phrase-sq-name { color: #0f1117 !important; }
#appView.light-mode .phrase-sq-text { color: #4a6080 !important; }

/* ═══════════════════════════════════════════════════════════════
   WORKFLOW REPORT TABLE
   ═══════════════════════════════════════════════════════════════ */
.wf-table-header {
  display: flex; align-items: center; justify-content: space-between;
  margin: 18px 0 8px;
}
.wf-add-row-btn {
  font-size: 0.75rem; font-weight: 700; padding: 5px 12px;
  background: rgba(124,111,255,0.15); border: 1px solid rgba(124,111,255,0.3);
  border-radius: 7px; color: #a89fff; cursor: pointer; transition: all 0.15s; font-family: var(--sans);
}
.wf-add-row-btn:hover { background: rgba(124,111,255,0.28); }
.wf-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid rgba(124,111,255,0.15); }
.wf-table {
  width: 100%; border-collapse: collapse; font-size: 0.78rem;
  background: rgba(255,255,255,0.02);
}
.wf-table thead th {
  background: rgba(124,111,255,0.1); color: rgba(196,187,255,0.8);
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; padding: 9px 10px; text-align: left;
  border-bottom: 1px solid rgba(124,111,255,0.2); white-space: nowrap;
}
.wf-table-row td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: middle; }
.wf-table-row:last-child td { border-bottom: none; }
.wf-table-row:hover td { background: rgba(124,111,255,0.05); }
.wf-cell-input {
  background: transparent !important; border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 5px !important; padding: 5px 7px !important; color: #f8f9fc !important;
  font-size: 0.76rem !important; font-family: var(--sans) !important; width: 100% !important;
  transition: border-color 0.15s !important;
}
.wf-cell-input:focus { outline: none; border-color: rgba(124,111,255,0.5); background: rgba(124,111,255,0.06); }
.wf-cell-select {
  background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 5px !important; padding: 5px 6px !important; color: #f8f9fc !important;
  font-size: 0.76rem !important; font-family: var(--sans) !important; cursor: pointer !important; width: 100% !important;
}
.wf-cell-select:focus { outline: none; border-color: rgba(124,111,255,0.5); }
.wf-progress-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 80px; }
.wf-progress-input { width: 60px !important; text-align: center; }
.wf-progress-bar { height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.wf-progress-fill { height: 100%; background: linear-gradient(90deg, #7c6fff, #7c6fff); border-radius: 2px; transition: width 0.3s; }
.wf-delete-row-btn {
  background: none; border: 1px solid rgba(255,255,255,0.1); border-radius: 5px;
  color: rgba(255,255,255,0.3); cursor: pointer; padding: 4px 7px; font-size: 0.72rem;
  transition: all 0.15s;
}
.wf-delete-row-btn:hover { border-color: #f87171; color: #f87171; background: rgba(239,68,68,0.1); }
.wf-role-pill {
  font-size: 0.6rem; font-weight: 700; background: rgba(124,111,255,0.15);
  color: #a89fff; border-radius: 4px; padding: 1px 5px; margin-left: 5px; vertical-align: middle;
}
/* light mode workflow table */
#appView.light-mode .wf-table-wrap { border-color: #c8d4e8 !important; }
#appView.light-mode .wf-table { background: #ffffff !important; }
#appView.light-mode .wf-table thead th { background: #e8f0fe !important; color: #1a4a9e !important; border-bottom-color: #c8d4e8 !important; }
#appView.light-mode .wf-table-row td { border-bottom-color: #f0f4ff !important; }
#appView.light-mode .wf-table-row:hover td { background: #f4f8ff !important; }
#appView.light-mode .wf-cell-input { background: #f8fbff !important; border-color: #c8d4e8 !important; color: #0f1117 !important; }
#appView.light-mode .wf-cell-select { background: #f8fbff !important; border-color: #c8d4e8 !important; color: #0f1117 !important; }

/* ═══════════════════════════════════════════════════════════════
   ROLES & RATING CRITERIA TAB
   ═══════════════════════════════════════════════════════════════ */
.roles-section {
  background: rgba(255,255,255,0.02) !important; border: 1px solid rgba(124,111,255,0.15) !important;
  border-radius: 12px !important; padding: 16px !important;
}
.roles-section-title { font-size: 0.88rem !important; font-weight: 700 !important; color: #c4bbff !important; margin-bottom: 4px !important; }
.roles-section-sub { font-size: 0.75rem !important; color: rgba(168,159,255,0.55) !important; margin-bottom: 14px !important; }
.roles-empty, .criteria-empty {
  font-size: 0.8rem; color: rgba(168,159,255,0.4); text-align: center; padding: 14px 0;
}
.roles-table { overflow-x: auto; margin-bottom: 14px; border-radius: 8px; border: 1px solid rgba(124,111,255,0.15); }
.roles-tbl { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.roles-tbl thead th {
  background: rgba(124,111,255,0.1); color: rgba(196,187,255,0.8);
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(124,111,255,0.2);
}
.roles-tbl tbody td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; }
.roles-tbl tbody tr:last-child td { border-bottom: none; }
.roles-tbl tbody tr:hover td { background: rgba(124,111,255,0.05); }
.roles-tbl-name { color: #f8f9fc !important; font-weight: 600 !important; }
.roles-tbl-email { color: rgba(168,159,255,0.5) !important; font-size: 0.73rem !important; }
.role-badge {
  display: inline-block; font-size: 0.65rem; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em;
}
.role-badge-report-writer { background: rgba(124,111,255,0.15); color: #7c6fff; }
.role-badge-editor        { background: rgba(124,111,255,0.15); color: #a89fff; }
.role-badge-reviewer      { background: rgba(245,158,11,0.15);  color: #f59e0b; }
.role-badge-admin         { background: rgba(239,68,68,0.15);   color: #f87171; }
.role-badge-viewer        { background: rgba(255,255,255,0.07); color: rgba(196,187,255,0.5); }
.role-select {
  background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(124,111,255,0.25) !important;
  border-radius: 6px !important; padding: 5px 8px !important; color: #f8f9fc !important;
  font-size: 0.76rem !important; font-family: var(--sans) !important; cursor: pointer !important;
}
.role-unassign-btn {
  font-size: 0.7rem; padding: 4px 10px; border-radius: 6px;
  background: none; border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.15s;
}
.role-unassign-btn:hover { border-color: #f87171; color: #f87171; }
.roles-add-form {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding-top: 12px; border-top: 1px solid rgba(124,111,255,0.1);
}
.role-input {
  background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(124,111,255,0.2) !important;
  border-radius: 7px !important; padding: 7px 10px !important; color: #f8f9fc !important;
  font-size: 0.78rem !important; font-family: var(--sans) !important; outline: none !important; min-width: 120px !important;
}
.role-input:focus { border-color: rgba(124,111,255,0.5); }
.role-add-btn {
  background: linear-gradient(135deg, rgba(124,111,255,0.25), rgba(76,63,224,0.2)) !important;
  border: 1px solid rgba(124,111,255,0.4) !important; border-radius: 7px !important;
  color: #c4bbff !important; font-size: 0.78rem !important; font-weight: 700 !important;
  padding: 7px 14px !important; cursor: pointer !important; transition: all 0.15s !important; font-family: var(--sans) !important;
  white-space: nowrap !important;
}
.role-add-btn:hover { background: rgba(124,111,255,0.35); border-color: rgba(124,111,255,0.7); }
/* Criteria */
.criteria-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.criteria-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.criteria-add-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid rgba(124,111,255,0.1); margin-top: 4px; }
.criteria-name-input {
  flex: 1 !important; min-width: 160px !important; background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(124,111,255,0.2) !important; border-radius: 7px !important; padding: 7px 10px !important;
  color: #f8f9fc !important; font-size: 0.78rem !important; font-family: var(--sans) !important; outline: none !important;
}
.criteria-name-input:focus { border-color: rgba(124,111,255,0.5); }
.criteria-score-input {
  width: 60px !important; background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(124,111,255,0.2) !important; border-radius: 7px !important; padding: 7px 8px !important;
  color: #f8f9fc !important; font-size: 0.78rem !important; font-family: var(--sans) !important;
  text-align: center !important; outline: none !important;
}
.criteria-sep { font-size: 0.75rem; color: rgba(168,159,255,0.5); white-space: nowrap; }
.criteria-delete-btn {
  background: none; border: 1px solid rgba(255,255,255,0.1); border-radius: 5px;
  color: rgba(255,255,255,0.3); cursor: pointer; padding: 4px 8px; font-size: 0.7rem;
}
.criteria-delete-btn:hover { border-color: #f87171; color: #f87171; }
/* Review ratings */
.review-rating-section {
  background: rgba(124,111,255,0.05) !important; border: 1px solid rgba(124,111,255,0.15) !important;
  border-radius: 8px !important; padding: 10px 12px !important; margin: 6px 0 !important;
}
.review-rating-title { font-size: 0.74rem !important; font-weight: 700 !important; color: #a89fff !important; margin-bottom: 8px !important; }
.review-rating-score { color: #7c6fff; }
.review-rating-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 0.76rem; }
.review-rating-label { flex: 1 !important; color: rgba(196,187,255,0.7) !important; }
.review-rating-input {
  width: 52px !important; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(124,111,255,0.25) !important;
  border-radius: 5px !important; padding: 3px 6px !important; color: #f8f9fc !important; font-family: var(--sans) !important;
  font-size: 0.76rem !important; text-align: center !important; outline: none !important;
}
.review-rating-max { font-size: 0.7rem; color: rgba(168,159,255,0.4); min-width: 30px; }
/* light mode roles/criteria */
#appView.light-mode .roles-section { background: #ffffff !important; border-color: #c8d4e8 !important; }
#appView.light-mode .roles-section-title { color: #0f1117 !important; }
#appView.light-mode .roles-section-sub { color: #6b8ab5 !important; }
#appView.light-mode .roles-tbl thead th { background: #e8f0fe !important; color: #1a4a9e !important; }
#appView.light-mode .roles-tbl tbody td { border-bottom-color: #f0f4ff !important; }
#appView.light-mode .roles-tbl-name { color: #0f1117 !important; }
#appView.light-mode .roles-tbl-email { color: #6b8ab5 !important; }
#appView.light-mode .role-select, #appView.light-mode .criteria-name-input,
#appView.light-mode .criteria-score-input, #appView.light-mode .role-input {
  background: #f8fbff !important; border-color: #c8d4e8 !important; color: #0f1117 !important;
}
#appView.light-mode .review-rating-section { background: #f0f6ff !important; border-color: #93b4e8 !important; }
#appView.light-mode .review-rating-label { color: #4a6080 !important; }
#appView.light-mode .review-rating-input { background: #ffffff !important; border-color: #c8d4e8 !important; color: #0f1117 !important; }
#appView.light-mode .wf-role-pill { background: #e8f0fe !important; color: #1a4a9e !important; }

/* ═══════════════════════════════════════════════════════════════
   FEATURE CSS — Toast · Language · Format Toolbar · Mobile · PDF
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. UNIFIED TOAST SYSTEM ───────────────────────────────────── */
.vr-toast-container {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 340px;
  width: calc(100vw - 40px);
}
.vr-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--sans);
  pointer-events: all;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  border: 1px solid transparent;
}
.vr-toast.show {
  opacity: 1;
  transform: translateX(0);
}
.vr-toast-success {
  background: rgba(18, 50, 30, 0.96);
  border-color: rgba(124,111,255,0.35);
  color: #4ade80;
}
.vr-toast-error {
  background: rgba(50, 15, 15, 0.96);
  border-color: rgba(239,68,68,0.35);
  color: #f87171;
}
.vr-toast-warning {
  background: rgba(45, 35, 10, 0.96);
  border-color: rgba(245,158,11,0.35);
  color: #fbbf24;
}
.vr-toast-info {
  background: rgba(13, 20, 40, 0.96);
  border-color: rgba(124,111,255,0.35);
  color: #a89fff;
}
.vr-toast-icon { font-size: 1rem; flex-shrink: 0; }
.vr-toast-msg  { flex: 1; line-height: 1.4; }
.vr-toast-close {
  background: none; border: none; color: inherit; opacity: 0.5;
  cursor: pointer; font-size: 0.8rem; padding: 0 2px; flex-shrink: 0;
}
.vr-toast-close:hover { opacity: 1; }

/* light mode toasts */
/* duplicate vr-toast-success removed */
/* duplicate vr-toast-error removed */
/* duplicate vr-toast-warning removed */
/* duplicate vr-toast-info removed */

/* ── 2. LANGUAGE SELECTOR ──────────────────────────────────────── */
.voice-drawer-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.voice-lang-select {
  background: rgba(124,111,255,0.12) !important;
  border: 1px solid rgba(124,111,255,0.25) !important;
  border-radius: 6px !important;
  color: #a89fff !important;
  font-size: 0.72rem !important;
  font-family: var(--sans) !important;
  padding: 4px 6px !important;
  cursor: pointer !important;
  max-width: 130px !important;
}
.voice-lang-select:focus { outline: none !important; border-color: rgba(124,111,255,0.6) !important; }
#appView.light-mode .voice-lang-select {
  background: #e8f0fe !important; border-color: #93b4e8 !important; color: #1a4a9e !important;
}

/* ── 3. FORMAT TOOLBAR ─────────────────────────────────────────── */
.pv-format-toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(124,111,255,0.15);
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  flex-wrap: wrap;
}
.fmt-btn {
  background: none !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  color: rgba(196,187,255,0.7) !important;
  font-size: 0.8rem !important;
  font-family: var(--sans) !important;
  padding: 4px 8px !important;
  cursor: pointer !important;
  transition: all 0.12s !important;
  min-width: 28px !important;
  text-align: center !important;
  line-height: 1.2 !important;
}
.fmt-btn:hover {
  background: rgba(124,111,255,0.2) !important;
  border-color: rgba(124,111,255,0.3) !important;
  color: #c4bbff !important;
}
.fmt-btn:active {
  background: rgba(124,111,255,0.35) !important;
  color: white !important;
}
.fmt-select {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(124,111,255,0.2) !important;
  border-radius: 5px !important;
  color: rgba(196,187,255,0.8) !important;
  font-size: 0.72rem !important;
  font-family: var(--sans) !important;
  padding: 3px 5px !important;
  cursor: pointer !important;
}
.fmt-size-select { width: 56px !important; }
.fmt-divider {
  width: 1px;
  height: 18px;
  background: rgba(124,111,255,0.2);
  margin: 0 3px;
  flex-shrink: 0;
}
/* Connect toolbar to transcript box visually */
.pv-format-toolbar + .pv-transcript-wrap {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* light mode toolbar */
#appView.light-mode .pv-format-toolbar { background: #f4f8ff !important; border-color: #c8d4e8 !important; }
#appView.light-mode .fmt-btn { color: #4a6080 !important; }
#appView.light-mode .fmt-btn:hover { background: #dce8ff !important; color: #1a4a9e !important; }
#appView.light-mode .fmt-select { background: #ffffff !important; border-color: #c8d4e8 !important; color: #0f1117 !important; }

/* ── 4. REMOVE DOC BUTTON ──────────────────────────────────────── */
.pv-doc-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.pv-doc-header-left #pvDocName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pv-remove-doc-btn {
  background: none !important;
  border: 1px solid rgba(239,68,68,0.25) !important;
  border-radius: 5px !important;
  color: rgba(248,113,113,0.6) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.15s !important;
}
.pv-remove-doc-btn:hover {
  background: rgba(239,68,68,0.12) !important;
  border-color: rgba(239,68,68,0.6) !important;
  color: #f87171 !important;
}
#appView.light-mode .pv-remove-doc-btn {
  border-color: rgba(220,38,38,0.3) !important;
  color: rgba(220,38,38,0.6) !important;
}
#appView.light-mode .pv-remove-doc-btn:hover {
  background: #fef2f2 !important; color: #dc2626 !important;
}

/* ── 5. PDF DOWNLOAD BUTTON ────────────────────────────────────── */
.p-download-pdf-btn {
  background: rgba(124,111,255,0.12) !important;
  border-color: rgba(124,111,255,0.3) !important;
  color: #7c6fff !important;
}
.p-download-pdf-btn:hover {
  background: rgba(124,111,255,0.25) !important;
  border-color: rgba(124,111,255,0.6) !important;
  color: #4ade80 !important;
}
#appView.light-mode .p-download-pdf-btn {
  background: #e6f9ef !important; border-color: #86efac !important; color: #15803d !important;
}

/* ── 6. MOBILE — comprehensive ─────────────────────────────────── */
@media (max-width: 768px) {
  /* App shell: sidebar collapses to bottom tab bar on mobile */
  .app-shell {
    flex-direction: column !important;
  }
  .app-sidebar {
    width: 100% !important;
    height: calc(56px + env(safe-area-inset-bottom)) !important;
    flex-direction: row !important;
    padding: 0 4px !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    border-right: none !important;
    border-top: 1px solid rgba(124,111,255,0.18) !important;
    order: 2 !important; /* bottom */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: space-around !important;
    scrollbar-width: none !important;
  }
  .app-sidebar::-webkit-scrollbar { display: none !important; }
  .app-content {
    order: 1 !important;
    height: calc(100vh - 48px - 56px) !important; /* full - topbar - bottom bar */
    /* iOS safe area */
    height: calc(100dvh - 48px - 56px - env(safe-area-inset-bottom)) !important;
  }
  .app-tab-btn {
    flex-direction: column !important;
    padding: 6px 8px !important;
    margin: 0 2px !important;
    min-width: 48px !important;
    flex: 1 !important;
    border-radius: 6px !important;
  }
  .app-tab-btn .tab-icon { font-size: 1.2rem !important; }
  .app-tab-btn .tab-label { font-size: 0.55rem !important; display: block !important; }
  .app-tab-btn.active::before { display: none !important; }
  /* Bottom bar active: subtle top highlight instead of left bar */
  .app-tab-btn.active {
    background: rgba(124,111,255,0.18) !important;
    color: #c4bbff !important;
  }
  .sidebar-divider { display: none !important; }

  /* Topbar compact — no padding override, sections handle spacing */
  .app-topbar { height: 44px !important; }
  .app-topbar-logo { width: 52px !important; }
  .app-nav-logo { font-size: 0.9rem !important; }
  .app-timer-pill { display: none !important; }
  .account-btn-name { display: none !important; }
  .account-btn { padding: 5px 8px !important; }

  /* Doc panel */
  .pv-doc-fullpanel { margin: 0 !important; border-radius: 0 !important; }
  .pv-doc-header { padding: 8px 10px !important; font-size: 0.78rem !important; flex-wrap: wrap; gap: 6px; }
  .pv-doc-header-actions { width: 100% !important; }
  .hide-mobile { display: none !important; }

  /* Voice FAB — bigger touch target on mobile */
  .voice-fab {
    width: 72px !important;
    height: 72px !important;
    bottom: 16px !important;
    right: 16px !important;
    font-size: 1.6rem !important;
  }

  /* Voice drawer — full height on mobile, with bottom nav padding */
  .voice-drawer {
    max-height: calc(80vh - 56px) !important;
    border-radius: 20px 20px 0 0 !important;
    /* Ensure drawer doesn't overlap iOS home indicator */
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  .voice-drawer-body {
    padding: 10px 12px 20px !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }

  /* Mic button — large touch target */
  .p-mic-btn {
    touch-action: manipulation !important;
    width: 80px !important;
    height: 80px !important;
    font-size: 2rem !important;
    border-width: 3px !important;
  }

  /* Action buttons — full width */
  .pv-mic-btns { flex-wrap: wrap !important; gap: 8px !important; }
  .p-save-tag-btn { flex: 1 !important; padding: 12px !important; font-size: 0.85rem !important; }
  .p-btn { flex: 1 !important; padding: 10px !important; }
  .pv-cancel-btn { width: 100% !important; padding: 10px !important; text-align: center !important; }

  /* Format toolbar — scrollable on mobile */
  .pv-format-toolbar { overflow-x: auto !important; flex-wrap: nowrap !important; }

  /* Language selector */
  .voice-lang-select { max-width: 100px !important; font-size: 0.68rem !important; }

  /* Transcript — taller on mobile */
  #pvTranscript { min-height: 100px !important; font-size: 1rem !important; }

  /* Upload zone — bigger tap target on mobile */
  .p-upload-zone { padding: 40px 20px !important; }
  .p-upload-icon { font-size: 2.8rem !important; }
  #pvUploadLabel { font-size: 1rem !important; }

  /* Phrase grid — 2 cols on mobile */
  #phrasesTabContent {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Workflow table — horizontal scroll */
  .wf-table-wrap { overflow-x: auto !important; }
  .wf-table { min-width: 600px !important; }

  /* Review/Roles cards */
  .roles-add-form { flex-direction: column !important; }
  .role-input { min-width: unset !important; width: 100% !important; }

  /* Tab panel headers */
  .tab-panel-header { padding: 10px 12px !important; gap: 8px !important; flex-wrap: wrap; }
  .tab-panel-title { font-size: 0.82rem !important; }

  /* Download buttons */
  .p-action-bar-inline { gap: 6px !important; }
  .p-download-btn-sm { font-size: 0.68rem !important; padding: 4px 8px !important; }

  /* Remove doc button text */
  .pv-remove-doc-btn { font-size: 0.6rem !important; padding: 2px 5px !important; }

  /* Editor subtabs */
  .editor-subtabs { padding: 0 8px !important; }
  .editor-subtab { padding: 0 10px !important; font-size: 0.72rem !important; }
}

/* Light mode bottom nav bar override */
@media (max-width: 768px) {
  #appView.light-mode .app-sidebar {
    background: #0a0c14 !important;
  }
  #appView.light-mode .app-content {
    background: #F8FAFC !important;
  }
}

/* Extra small phones */
@media (max-width: 380px) {
  .app-tab-btn .tab-label { display: none !important; }
  .app-tab-btn { min-width: 40px !important; }
  .voice-fab { width: 64px !important; height: 64px !important; }
  .p-mic-btn { width: 72px !important; height: 72px !important; }
  #phrasesTabContent { grid-template-columns: 1fr !important; }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .app-sidebar { width: 64px !important; }
  .app-tab-btn .tab-label { font-size: 0.52rem !important; }
  .pv-doc-fullpanel { margin: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════
   FIXES: Voice commands, heading, scroll, excel, theme position
   ══════════════════════════════════════════════════════════════ */

/* ── Theme toggle now on left — gap from logo ── */
.app-topbar-left { gap: 10px !important; }
.app-topbar-left .theme-toggle-btn {
  margin-left: 2px !important;
}

/* ── Voice commands help button ── */
.voice-cmd-help-btn {
  background: rgba(124,111,255,0.12) !important;
  border: 1px solid rgba(124,111,255,0.28) !important;
  border-radius: 6px !important;
  color: #a89fff !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 4px 9px !important;
  cursor: pointer !important;
  font-family: var(--sans) !important;
  white-space: nowrap !important;
  transition: all 0.15s !important;
}
.voice-cmd-help-btn:hover,
.voice-cmd-help-btn.active {
  background: rgba(124,111,255,0.28) !important;
  border-color: rgba(124,111,255,0.5) !important;
  color: #c4bbff !important;
}
#appView.light-mode .voice-cmd-help-btn {
  background: #e8f0fe !important; border-color: #93b4e8 !important; color: #1a4a9e !important;
}

/* ── Voice commands help panel ── */
.vc-help-panel {
  background: rgba(124,111,255,0.07) !important;
  border: 1px solid rgba(124,111,255,0.2) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
}
.vc-help-title {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #a89fff !important;
  margin-bottom: 10px !important;
}
.vc-help-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.vc-help-item {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  font-size: 0.75rem !important;
}
.vc-cmd {
  background: rgba(124,111,255,0.18) !important;
  border: 1px solid rgba(124,111,255,0.3) !important;
  border-radius: 5px !important;
  padding: 2px 7px !important;
  color: #c4bbff !important;
  font-family: 'Courier New', monospace !important;
  font-size: 0.72rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.vc-desc {
  color: rgba(168,159,255,0.6) !important;
  flex: 1 !important;
}
#appView.light-mode .vc-help-panel { background: #f0f4ff !important; border-color: #c8d4e8 !important; }
#appView.light-mode .vc-help-title { color: #1a4a9e !important; }
#appView.light-mode .vc-cmd { background: #dce8ff !important; border-color: #93b4e8 !important; color: #1a4a9e !important; }
#appView.light-mode .vc-desc { color: #4a6080 !important; }

/* ── Heading indicator in doc view ── */
.pv-para.pv-heading {
  border-left: 3px solid rgba(124,111,255,0.4) !important;
  padding-left: 10px !important;
}
.pv-para.pv-heading::after {
  content: 'Heading';
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(124,111,255,0.5);
  background: rgba(124,111,255,0.08);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
/* Inserted paragraph (appended below heading) */
.pv-para.pv-inserted {
  border-left: 3px solid rgba(124,111,255,0.5) !important;
  background: rgba(124,111,255,0.04) !important;
}

/* ── Workflow tab: proper scroll ── */
#workflowTabContent {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 !important;
  display: block !important;
  padding-bottom: 20px !important;
}
#tabPanel_workflow {
  overflow: hidden !important;
}

/* ── Excel mode: no scrollbar on outer container ── */
.xl-table-wrap {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* ── Remove team member ── */
.invite-item-removed {
  opacity: 0.5 !important;
}
.invite-item-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
.invite-item-name {
  font-size: 0.72rem !important;
  color: rgba(168,159,255,0.5) !important;
}
.invite-remove-member-btn {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  background: rgba(239,68,68,0.1) !important;
  border: 1px solid rgba(239,68,68,0.3) !important;
  color: #f87171 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s !important;
}
.invite-remove-member-btn:hover {
  background: rgba(239,68,68,0.22) !important;
  border-color: rgba(239,68,68,0.55) !important;
}
#appView.light-mode .invite-remove-member-btn {
  background: #fef2f2 !important; border-color: #fca5a5 !important; color: #dc2626 !important;
}

/* ── Spell check underline — native browser styling, just ensure visible ── */
#pvTranscript { white-space: pre-wrap !important; }

/* ══════════════════════════════════════════════════════════════
   PASTE TABLE MODE + PLACE ALL IMAGES
   ══════════════════════════════════════════════════════════════ */

/* ── Paste Table wrapper ── */
.paste-table-wrap {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 16px !important;
  gap: 14px !important;
}

/* ── Instructions banner ── */
.paste-table-instructions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: rgba(124,111,255,0.08) !important;
  border: 1px solid rgba(124,111,255,0.2) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  flex-shrink: 0 !important;
}
.paste-instr-icon { font-size: 2rem; flex-shrink: 0; }
.paste-instr-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.paste-instr-text strong {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #c4bbff !important;
}
.paste-instr-text span {
  font-size: 0.78rem !important;
  color: rgba(168,159,255,0.6) !important;
}

/* ── Paste textarea ── */
.paste-target-wrap {
  flex-shrink: 0 !important;
}
.paste-target-area {
  width: 100% !important;
  min-height: 100px !important;
  max-height: 160px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 2px dashed rgba(124,111,255,0.3) !important;
  border-radius: 10px !important;
  padding: 14px !important;
  color: #f8f9fc !important;
  font-size: 0.8rem !important;
  font-family: 'Courier New', monospace !important;
  resize: vertical !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  box-sizing: border-box !important;
}
.paste-target-area:focus {
  border-color: rgba(124,111,255,0.7) !important;
  background: rgba(124,111,255,0.07) !important;
}
.paste-target-area::placeholder { color: rgba(168,159,255,0.35) !important; }

/* ── Preview wrapper ── */
.paste-preview-wrap {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: 0 !important;
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(124,111,255,0.15) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.paste-preview-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  background: rgba(124,111,255,0.08) !important;
  border-bottom: 1px solid rgba(124,111,255,0.15) !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
.paste-preview-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.8rem !important;
  color: #c4bbff !important;
  font-weight: 600 !important;
}
.paste-preview-badge {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  background: rgba(124,111,255,0.2) !important;
  color: #a89fff !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
}
.paste-preview-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.paste-option-label {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.76rem !important;
  color: rgba(168,159,255,0.7) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.paste-option-label input[type="checkbox"] { cursor: pointer !important; accent-color: #7c6fff !important; }
.paste-action-btn {
  font-size: 0.73rem !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  border: 1px solid !important;
  font-family: var(--sans) !important;
  transition: all 0.15s !important;
}
.paste-action-clear {
  background: rgba(239,68,68,0.1) !important;
  border-color: rgba(239,68,68,0.3) !important;
  color: #f87171 !important;
}
.paste-action-clear:hover {
  background: rgba(239,68,68,0.22) !important;
}

/* ── Preview table scroll area ── */
.paste-preview-scroll {
  flex: 1 !important;
  overflow: auto !important;
  padding: 0 14px 10px !important;
  min-height: 0 !important;
}
.paste-preview-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.78rem !important;
}
.paste-preview-table th {
  background: rgba(124,111,255,0.18) !important;
  color: #c4bbff !important;
  font-weight: 700 !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(124,111,255,0.2) !important;
  text-align: left !important;
  white-space: nowrap !important;
  position: sticky !important;
  top: 0 !important;
}
.paste-preview-table td {
  padding: 6px 10px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  color: #f8f9fc !important;
  vertical-align: top !important;
  min-width: 80px !important;
}
.paste-preview-table tr:nth-child(even) td { background: rgba(124,111,255,0.04) !important; }
.paste-preview-table td:focus,
.paste-preview-table th:focus {
  outline: 2px solid rgba(124,111,255,0.5) !important;
  outline-offset: -2px !important;
  background: rgba(124,111,255,0.12) !important;
}

/* ── Action bar at bottom of paste mode ── */
.paste-action-bar {
  padding: 10px 14px !important;
  border-top: 1px solid rgba(124,111,255,0.12) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* ── Place All button ── */
.pv-img-place-all-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, rgba(124,111,255,0.2), rgba(16,185,129,0.15)) !important;
  border: 1px solid rgba(124,111,255,0.35) !important;
  color: #7c6fff !important;
  cursor: pointer !important;
  font-family: var(--sans) !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
}
.pv-img-place-all-btn:hover:not(:disabled) {
  background: rgba(124,111,255,0.3) !important;
  border-color: rgba(124,111,255,0.6) !important;
}
.pv-img-place-all-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* Light mode paste table */
#appView.light-mode .paste-table-instructions { background: #f0f4ff !important; border-color: #c8d4e8 !important; }
#appView.light-mode .paste-instr-text strong  { color: #0f1117 !important; }
#appView.light-mode .paste-instr-text span    { color: #6b8ab5 !important; }
#appView.light-mode .paste-target-area {
  background: #f8fbff !important; border-color: #93b4e8 !important;
  color: #0f1117 !important;
}
#appView.light-mode .paste-target-area:focus  { border-color: #7c6fff !important; background: #eef4ff !important; }
#appView.light-mode .paste-preview-wrap       { background: #ffffff !important; border-color: #c8d4e8 !important; }
#appView.light-mode .paste-preview-header     { background: #e8f0fe !important; border-color: #c8d4e8 !important; }
#appView.light-mode .paste-preview-title      { color: #0f1117 !important; }
#appView.light-mode .paste-preview-table th   { background: #dce8ff !important; color: #1a4a9e !important; border-color: #c8d4e8 !important; }
#appView.light-mode .paste-preview-table td   { color: #0f1117 !important; border-color: #e8f0fe !important; }
#appView.light-mode .paste-option-label       { color: #4a6080 !important; }

/* ══════════════════════════════════════════════════════════════
   SUPPORTING DOCUMENTS — submit bar + review card
   ══════════════════════════════════════════════════════════════ */

/* Submit bar row — label + button side by side */
.submit-support-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  flex-wrap: wrap !important;
}

/* Attach docs label — looks like a secondary button */
.support-docs-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  font-family: var(--sans) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(196,187,255,0.7) !important;
  transition: all 0.15s !important;
  flex-shrink: 0 !important;
}
.support-docs-label:hover {
  background: rgba(124,111,255,0.15) !important;
  border-color: rgba(124,111,255,0.4) !important;
  color: #c4bbff !important;
}
.support-docs-label.has-docs {
  background: rgba(124,111,255,0.12) !important;
  border-color: rgba(124,111,255,0.35) !important;
  color: #7c6fff !important;
}

/* Submit button stays flex-1 to fill remaining space */
.editor-submit-review-btn-full { flex: 1 !important; }

/* Review card — supporting docs section */
.review-support-docs {
  background: rgba(124,111,255,0.06) !important;
  border: 1px solid rgba(124,111,255,0.15) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  margin: 6px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.review-support-title {
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #a89fff !important;
}
.review-support-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.support-doc-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.72rem !important;
  background: rgba(124,111,255,0.12) !important;
  border: 1px solid rgba(124,111,255,0.25) !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  color: #c4bbff !important;
  max-width: 200px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.review-zip-btn {
  align-self: flex-start !important;
  background: linear-gradient(135deg, rgba(124,111,255,0.2), rgba(16,185,129,0.15)) !important;
  border: 1px solid rgba(124,111,255,0.35) !important;
  color: #7c6fff !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  font-family: var(--sans) !important;
  transition: all 0.15s !important;
}
.review-zip-btn:hover {
  background: rgba(124,111,255,0.3) !important;
  border-color: rgba(124,111,255,0.6) !important;
}

/* Light mode */
#appView.light-mode .support-docs-label {
  background: #f4f8ff !important; border-color: #c8d4e8 !important; color: #4a6080 !important;
}
#appView.light-mode .support-docs-label.has-docs {
  background: #e6f9ef !important; border-color: #86efac !important; color: #15803d !important;
}
#appView.light-mode .review-support-docs {
  background: #f0f4ff !important; border-color: #c8d4e8 !important;
}
#appView.light-mode .review-support-title { color: #1a4a9e !important; }
#appView.light-mode .support-doc-chip {
  background: #dce8ff !important; border-color: #93b4e8 !important; color: #1a4a9e !important;
}
#appView.light-mode .review-zip-btn {
  background: #e6f9ef !important; border-color: #86efac !important; color: #15803d !important;
}

/* ── Editor mode container — isolates Word/Excel modes ── */
/* ══════════════════════════════════════════════════════════════
   EDITOR TAB — clean flex column, no overflow clutter
   ══════════════════════════════════════════════════════════════ */

/* Editor tab panel: strict flex column filling parent height */
/* Subtab bar: fixed height, never grows */

/* ══════════════════════════════════════════════════════════════
   VOICE EDIT BUTTON — inline in doc header (replaces floating FAB)
   ══════════════════════════════════════════════════════════════ */
.voice-header-btn {
  touch-action: manipulation !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: linear-gradient(135deg, #7c6fff, #4c3fe0) !important;
  border: none !important;
  border-radius: 8px !important;
  color: white !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  font-family: var(--sans) !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s !important;
  box-shadow: 0 2px 10px rgba(124,111,255,0.35) !important;
  flex-shrink: 0 !important;
}
.voice-header-btn:hover {
  background: linear-gradient(135deg, #9080ff, #6050f0) !important;
  box-shadow: 0 4px 16px rgba(124,111,255,0.55) !important;
  transform: translateY(-1px) !important;
}
.voice-header-btn[aria-expanded="true"] {
  background: linear-gradient(135deg, #4ade80, #16a34a) !important;
  box-shadow: 0 2px 10px rgba(74,222,128,0.35) !important;
}
.voice-header-btn-label { font-size: 0.72rem !important; }

/* hide old floating FAB (safety) */
.voice-fab { display: none !important; }

#appView.light-mode .voice-header-btn {
  box-shadow: 0 2px 10px rgba(124,111,255,0.25) !important;
}

/* ══════════════════════════════════════════════════════════════
   SETTINGS / HELP BUTTON — topbar
   ══════════════════════════════════════════════════════════════ */
.topbar-settings-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 7px !important;
  color: rgba(196,187,255,0.7) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  font-family: var(--sans) !important;
  padding: 5px 11px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s !important;
}
.topbar-settings-btn:hover {
  background: rgba(124,111,255,0.18) !important;
  border-color: rgba(124,111,255,0.4) !important;
  color: #c4bbff !important;
}
#appView.light-mode .topbar-settings-btn {
  background: #f0f4ff !important; border-color: #c8d4e8 !important; color: #4a6080 !important;
}
#appView.light-mode .topbar-settings-btn:hover {
  background: #dce8ff !important; color: #1a4a9e !important;
}

/* ══════════════════════════════════════════════════════════════
   ONBOARDING MODAL
   ══════════════════════════════════════════════════════════════ */
.onb-backdrop {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.75);
  display: none; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; transition: opacity 0.3s ease;
  pointer-events: none;
}
.onb-backdrop.onb-open {
  display: flex;
  opacity: 1;
  pointer-events: all;
}

.onb-modal {
  background: #0f1117;
  border: 1px solid rgba(124,111,255,0.25);
  border-radius: 18px;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(124,111,255,0.1);
  transform: translateY(20px); transition: transform 0.3s ease;
}
.onb-backdrop.onb-open .onb-modal { transform: translateY(0); }

/* Header */
.onb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 0;
  flex-shrink: 0;
}
.onb-logo {
  font-family: var(--display); font-size: 1rem; font-weight: 800;
  color: #f8f9fc; letter-spacing: -0.01em;
}
.onb-logo span { color: #7c6fff; }
.onb-skip-btn {
  background: none; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px; color: rgba(168,159,255,0.5);
  font-size: 0.74rem; font-family: var(--sans); font-weight: 600;
  padding: 4px 12px; cursor: pointer; transition: all 0.15s;
}
.onb-skip-btn:hover { border-color: rgba(124,111,255,0.4); color: #a89fff; }

/* Slides container */
.onb-slides-wrap {
  flex: 1; overflow: hidden; position: relative;
  padding: 24px 28px 8px;
  min-height: 0;
}
.onb-slide {
  display: none; flex-direction: column; gap: 14px;
  animation: onbFadeIn 0.3s ease;
}
.onb-slide.active { display: flex; }
@keyframes onbFadeIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.onb-slide-icon { font-size: 2.8rem; line-height: 1; }
.onb-slide-title {
  font-family: var(--display); font-size: 1.3rem; font-weight: 700;
  color: #f8f9fc; line-height: 1.2; margin: 0;
}
.onb-slide-body {
  font-size: 0.875rem; color: rgba(196,187,255,0.75);
  line-height: 1.65; margin: 0;
}
.onb-slide-body strong { color: #c4bbff; }
.onb-slide-body em { color: #a89fff; font-style: normal; }
.onb-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.onb-tag {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; background: rgba(124,111,255,0.15);
  border: 1px solid rgba(124,111,255,0.3); border-radius: 20px;
  color: #a89fff; padding: 3px 10px;
}
.onb-tip {
  background: rgba(124,111,255,0.08); border: 1px solid rgba(124,111,255,0.18);
  border-radius: 8px; padding: 10px 13px;
  font-size: 0.78rem; color: rgba(168,159,255,0.65); line-height: 1.5;
}
/* Voice commands grid on slide 3 */
.onb-cmd-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.onb-cmd {
  display: flex; flex-direction: column; gap: 3px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px; padding: 8px 10px;
}
.onb-cmd-phrase {
  font-family: 'Courier New', monospace; font-size: 0.72rem;
  color: #c4bbff; background: rgba(124,111,255,0.12);
  border-radius: 4px; padding: 2px 6px; align-self: flex-start;
}
.onb-cmd-desc { font-size: 0.73rem; color: rgba(168,159,255,0.55); }

/* Dots */
.onb-dots {
  display: flex; justify-content: center; gap: 7px;
  padding: 10px 0 6px; flex-shrink: 0;
}
.onb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(124,111,255,0.25); cursor: pointer;
  transition: all 0.2s;
}
.onb-dot.active {
  background: #7c6fff; transform: scale(1.3);
  box-shadow: 0 0 6px rgba(124,111,255,0.5);
}

/* Navigation */
.onb-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px 20px; flex-shrink: 0;
  border-top: 1px solid rgba(124,111,255,0.1);
}
.onb-arrow-btn {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; color: rgba(196,187,255,0.7);
  font-size: 0.82rem; font-weight: 700; font-family: var(--sans);
  padding: 8px 18px; cursor: pointer; transition: all 0.15s;
}
.onb-arrow-btn:hover:not(:disabled) {
  background: rgba(124,111,255,0.2); border-color: rgba(124,111,255,0.4); color: white;
}
.onb-arrow-btn:disabled { opacity: 0.3; cursor: default; }
.onb-next {
  background: linear-gradient(135deg, rgba(124,111,255,0.25), rgba(76,63,224,0.2)) !important;
  border-color: rgba(124,111,255,0.4) !important; color: #c4bbff !important;
}
.onb-next:hover {
  background: linear-gradient(135deg, rgba(124,111,255,0.45), rgba(76,63,224,0.35)) !important;
  color: white !important;
}
.onb-counter { font-size: 0.76rem; color: rgba(168,159,255,0.45); font-family: var(--sans); }

/* Light mode onboarding */
#appView.light-mode .onb-modal {
  background: #ffffff !important; border-color: #c8d4e8 !important;
  box-shadow: 0 24px 80px rgba(124,111,255,0.15) !important;
}
#appView.light-mode .onb-logo { color: #0f1117 !important; }
#appView.light-mode .onb-skip-btn { border-color: #c8d4e8 !important; color: #6b8ab5 !important; }
#appView.light-mode .onb-slide-title { color: #0f1117 !important; }
#appView.light-mode .onb-slide-body { color: #4a6080 !important; }
#appView.light-mode .onb-slide-body strong { color: #1a4a9e !important; }
#appView.light-mode .onb-tip { background: #f0f4ff !important; border-color: #c8d4e8 !important; color: #4a6080 !important; }
#appView.light-mode .onb-cmd { background: #f8fbff !important; border-color: #e8f0fe !important; }
#appView.light-mode .onb-cmd-phrase { background: #dce8ff !important; color: #1a4a9e !important; }
#appView.light-mode .onb-cmd-desc { color: #6b8ab5 !important; }
#appView.light-mode .onb-tag { background: #dce8ff !important; border-color: #93b4e8 !important; color: #1a4a9e !important; }
#appView.light-mode .onb-nav { border-top-color: #e8f0fe !important; }
#appView.light-mode .onb-arrow-btn { background: #f4f8ff !important; border-color: #c8d4e8 !important; color: #4a6080 !important; }
#appView.light-mode .onb-dot { background: #c8d4e8 !important; }
#appView.light-mode .onb-dot.active { background: #7c6fff !important; box-shadow: 0 0 6px rgba(124,111,255,0.4) !important; }

/* Mobile adjustments */
@media (max-width: 600px) {
  .onb-modal { border-radius: 14px 14px 0 0; max-height: 95vh; }
  .onb-backdrop { align-items: flex-end; padding: 0; }
  .onb-cmd-grid { grid-template-columns: 1fr; }
  .onb-slides-wrap { padding: 18px 18px 6px; }
  .voice-header-btn-label { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   EDITOR LAYOUT — SINGLE AUTHORITATIVE RULES (do not add more)
   All previous conflicting rules have been removed.
   switchMode() in excel-mode.js sets style.cssText directly.
   ══════════════════════════════════════════════════════════════ */

#tabPanel_editor {
  height: 100%;
  min-height: 0;
  overflow: visible;
}

#tabPanel_editor .editor-subtabs {
  flex-shrink: 0;
}

.editor-mode-container {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* previewMode: JS sets display via style.cssText — CSS just defines defaults */
#previewMode { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: visible; }

/* excelMode: hidden by default via HTML style="display:none;"
   JS sets full style.cssText when switching — CSS does not touch display */
#excelMode {
  min-height: 0;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge */
}
#excelMode::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

/* Bottom bar always a thin strip at the bottom */
.editor-bottom-bar {
  flex-shrink: 0;
  padding: 10px 16px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(124,111,255,0.12);
  background: rgba(10,12,20,0.7);
}

#appView.light-mode .editor-bottom-bar {
  background: #f0f4ff;
  border-top-color: #c8d4e8;
}

/* ══════════════════════════════════════════════════════════════
   FIXES: Help btn position · Editor bar · Invite modal
   ══════════════════════════════════════════════════════════════ */

/* ── Help button on the LEFT — smaller, matches timer pill style ── */
.topbar-settings-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 20px !important;
  color: rgba(196,187,255,0.6) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  font-family: var(--sans) !important;
  padding: 3px 10px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
}
.topbar-settings-btn:hover {
  background: rgba(124,111,255,0.18) !important;
  border-color: rgba(124,111,255,0.4) !important;
  color: #c4bbff !important;
}
#appView.light-mode .topbar-settings-btn {
  background: rgba(124,111,255,0.06) !important;
  border-color: rgba(124,111,255,0.15) !important;
  color: #4a6080 !important;
}

/* ── Editor subtabs — match tab-panel-header exactly ── */
.editor-subtabs-header {
  /* inherits tab-panel-header styles — same bg, border, padding, height */
}
.editor-mode-tabs {
  display: flex;
  align-items: center;
  gap: 0;
}
/* Override old editor-subtabs background rules */
.editor-subtabs-header .editor-subtab {
  padding: 0 16px !important;
  height: 42px !important;
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: rgba(196,187,255,0.5) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  font-family: var(--sans) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
}
.editor-subtabs-header .editor-subtab:hover {
  color: rgba(196,187,255,0.85) !important;
}
.editor-subtabs-header .editor-subtab.active {
  color: #a89fff !important;
  border-bottom-color: #7c6fff !important;
}
#appView.light-mode .editor-subtabs-header .editor-subtab {
  color: #6b8ab5 !important;
}
#appView.light-mode .editor-subtabs-header .editor-subtab.active {
  color: #1a4a9e !important;
  border-bottom-color: #7c6fff !important;
}

/* ── Invite Modal ── */
.invite-standalone-modal {
  width: min(520px, 96vw) !important;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: #0f1117 !important;
  border: 1px solid rgba(124,111,255,0.25) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55) !important;
}
.invite-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 16px;
  border-bottom: 1px solid rgba(124,111,255,0.12);
  flex-shrink: 0;
}
.invite-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.invite-modal-icon-hd { font-size: 1.6rem; line-height: 1; }
.invite-modal-title h2 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #f8f9fc !important;
  margin: 0 0 3px !important;
}
.modal-close-x {
  background: none !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 7px !important;
  color: rgba(255,255,255,0.4) !important;
  font-size: 0.9rem !important;
  width: 30px !important;
  height: 30px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.modal-close-x:hover {
  background: rgba(239,68,68,0.12) !important;
  border-color: rgba(239,68,68,0.4) !important;
  color: #f87171 !important;
}
.invite-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* light mode invite modal */
#appView.light-mode .invite-standalone-modal {
  background: #ffffff !important;
  border-color: #c8d4e8 !important;
}
#appView.light-mode .invite-modal-header {
  border-bottom-color: #e8f0fe !important;
}
#appView.light-mode .invite-modal-title h2 { color: #0f1117 !important; }
#appView.light-mode .modal-close-x {
  border-color: #c8d4e8 !important; color: #6b8ab5 !important;
}

/* ══════════════════════════════════════════════════════════════
   ENTERPRISE PLAN — card + contact modal + upgrade buttons
   ══════════════════════════════════════════════════════════════ */

/* Enterprise plan card */
.plan-card-enterprise {
  border-color: rgba(168,159,255,0.4) !important;
  background: linear-gradient(160deg, #16143a 0%, #0f1117 60%) !important;
  box-shadow: 0 0 0 1px rgba(124,111,255,0.3), 0 0 50px rgba(124,111,255,0.1) !important;
  animation-delay: 0.46s !important;
}
.plan-card-enterprise:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 0 0 1px rgba(124,111,255,0.5), 0 20px 60px rgba(124,111,255,0.2) !important;
}
.enterprise-badge {
  font-size: 0.55rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  background: linear-gradient(135deg, #7c6fff, #4c3fe0) !important;
  color: white !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
}
.enterprise-price {
  font-size: 2rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #a89fff, #7c6fff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.enterprise-contact-btn {
  background: linear-gradient(135deg, #7c6fff, #4c3fe0) !important;
  border: none !important;
  color: white !important;
  font-weight: 700 !important;
  padding: 12px !important;
  border-radius: 10px !important;
  width: 100% !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  margin-top: 12px !important;
  transition: all 0.2s !important;
  font-family: var(--display) !important;
}
.enterprise-contact-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(124,111,255,0.45) !important;
}

/* Upgrade/expired modal enterprise button */
.upgrade-contact-btn {
  background: rgba(124,111,255,0.12) !important;
  border: 1px solid rgba(124,111,255,0.35) !important;
  color: #a89fff !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  font-family: var(--display) !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
}
.upgrade-contact-btn:hover {
  background: rgba(124,111,255,0.25) !important;
  border-color: rgba(124,111,255,0.6) !important;
  color: #c4bbff !important;
}

/* Enterprise contact modal */
.enterprise-contact-modal {
  width: min(540px, 96vw) !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  border-radius: 16px !important;
  background: #0f1117 !important;
  border: 1px solid rgba(124,111,255,0.3) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6) !important;
  padding: 28px !important;
}
.enterprise-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.enterprise-modal-icon { font-size: 2.2rem; }
.enterprise-modal-header h2 {
  font-size: 1.2rem !important;
  color: #f8f9fc !important;
  margin: 0 0 4px !important;
}
.enterprise-modal-header .modal-subtitle {
  font-size: 0.8rem !important;
  color: rgba(168,159,255,0.6) !important;
  margin: 0 !important;
}
.enterprise-features-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 22px;
  background: rgba(124,111,255,0.06);
  border: 1px solid rgba(124,111,255,0.15);
  border-radius: 10px;
  padding: 14px;
}
.ent-feat {
  font-size: 0.78rem;
  color: rgba(196,187,255,0.75);
  line-height: 1.4;
}
.enterprise-contact-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ent-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ent-input {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(124,111,255,0.2) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  color: #f8f9fc !important;
  font-size: 0.82rem !important;
  font-family: var(--sans) !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s !important;
}
.ent-input:focus { border-color: rgba(124,111,255,0.5) !important; }
.ent-input::placeholder { color: rgba(168,159,255,0.35) !important; }
.ent-textarea { resize: vertical !important; min-height: 80px !important; }
.enterprise-submit-btn {
  background: linear-gradient(135deg, #7c6fff, #4c3fe0) !important;
  border: none !important;
  border-radius: 10px !important;
  color: white !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  font-family: var(--display) !important;
  padding: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  margin-top: 4px !important;
}
.enterprise-submit-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(124,111,255,0.4) !important;
}
.ent-disclaimer {
  font-size: 0.72rem !important;
  color: rgba(168,159,255,0.4) !important;
  text-align: center !important;
  margin: 2px 0 0 !important;
}

/* Light mode enterprise */
#appView.light-mode .enterprise-contact-modal {
  background: #ffffff !important; border-color: #c8d4e8 !important;
}
#appView.light-mode .enterprise-modal-header h2 { color: #0f1117 !important; }
#appView.light-mode .ent-feat { color: #4a6080 !important; }
#appView.light-mode .enterprise-features-list { background: #f0f4ff !important; border-color: #c8d4e8 !important; }
#appView.light-mode .ent-input { background: #f8fbff !important; border-color: #c8d4e8 !important; color: #0f1117 !important; }

/* Mobile enterprise */
@media (max-width: 600px) {
  .enterprise-features-list { grid-template-columns: 1fr; }
  .ent-form-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   HAMBURGER MENU — mobile nav fixes
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav-hamburger { display: block !important; }
  .nav-links {
    display: none !important;
    position: absolute !important;
    top: 54px !important; left: 0 !important; right: 0 !important;
    background: rgba(8,10,20,0.98) !important;
    flex-direction: column !important;
    gap: 0 !important; padding: 8px 0 !important;
    z-index: 999 !important;
    border-bottom: 1px solid rgba(124,111,255,0.2) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
  }
  .nav-links.open { display: flex !important; }
  .nav-links li { width: 100% !important; }
  .nav-links a {
    display: block !important;
    padding: 14px 22px !important;
    font-size: 1rem !important;
    color: rgba(255,255,255,0.85) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }
  .nav-links a:hover { background: rgba(124,111,255,0.1) !important; color: white !important; }
  .nav-links a.nav-active { color: #7c6fff !important; background: rgba(124,111,255,0.08) !important; }
  .nav-hamburger {
    background: none !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: white !important;
    font-size: 1.1rem !important;
    padding: 5px 11px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    min-width: 36px !important;
  }
}

/* ── Place All button in doc header ── */
.pv-img-place-all-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, rgba(124,111,255,0.2), rgba(16,185,129,0.15)) !important;
  border: 1px solid rgba(124,111,255,0.35) !important;
  color: #7c6fff !important;
  cursor: pointer !important;
  font-family: var(--sans) !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.pv-img-place-all-btn:hover:not(:disabled) {
  background: rgba(124,111,255,0.3) !important;
  border-color: rgba(124,111,255,0.6) !important;
}
.pv-img-place-all-btn:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }
#appView.light-mode .pv-img-place-all-btn {
  background: #e6f9ef !important; border-color: #86efac !important; color: #15803d !important;
}

/* ── Pricing cards responsive ── */
@media (max-width: 1100px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 760px !important;
  }
}
@media (max-width: 560px) {
  .cards-grid {
    grid-template-columns: 1fr !important;
    max-width: 400px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   PROFESSIONAL LIGHT MODE PALETTE
   Primary: #1E40AF (corporate blue) | Accent: #0EA5E9 (sky)
   BG: #F8FAFC | Text: #0F172A | Success: #059669
   Applied ONLY to #appView — pricing page stays dark always
   ══════════════════════════════════════════════════════════════ */

/* Core app shell */
#appView.light-mode {
  background: #F8FAFC !important;
  color: #0F172A !important;
}
#appView.light-mode 
#appView.light-mode .app-nav-logo { color: #0F172A !important; }
#appView.light-mode .app-nav-logo span { color: #1E40AF !important; }
#appView.light-mode .app-timer-pill {
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
  color: #1E40AF !important;
}

/* Sidebar */
#appView.light-mode .app-sidebar {
  background: #0a0c14 !important;
  border-right: none !important;
}
#appView.light-mode .app-tab-btn { color: rgba(255,255,255,0.65) !important; }
#appView.light-mode .app-tab-btn.active {
  background: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
}
#appView.light-mode .app-tab-btn:hover { color: #ffffff !important; background: rgba(255,255,255,0.1) !important; }
#appView.light-mode .sidebar-divider { background: rgba(255,255,255,0.15) !important; }

/* App content area */
#appView.light-mode .app-content { background: #F8FAFC !important; }
#appView.light-mode #quillEditor { background: #dde1eb !important; }
#appView.light-mode #quillEditor .ql-container { background: #dde1eb !important; }
#appView.light-mode .tab-panel-header {
  background: #ffffff !important;
  border-bottom: 1px solid #E2E8F0 !important;
}
#appView.light-mode .tab-panel-title { color: #0F172A !important; }
#appView.light-mode .tab-panel-scroll { background: #F8FAFC !important; }

/* Tab panel backgrounds */
#appView.light-mode .app-tab-panel { background: #F8FAFC !important; }
#appView.light-mode #tabPanel_editor { background: #F8FAFC !important; }

/* Editor subtabs */
#appView.light-mode .editor-subtabs-header {
  background: #ffffff !important;
  border-bottom: 1px solid #E2E8F0 !important;
}
#appView.light-mode .editor-subtab { color: #64748B !important; }
#appView.light-mode .editor-subtab.active { color: #1E40AF !important; border-bottom-color: #1E40AF !important; }

/* Doc panel */
#appView.light-mode .pv-doc-fullpanel { background: #ffffff !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; }
#appView.light-mode .pv-doc-header {
  background: #F1F5F9 !important;
  border-bottom: 1px solid #E2E8F0 !important;
}
#appView.light-mode #pvDocName { color: #0F172A !important; }
#appView.light-mode .pv-doc-hint { color: #64748B !important; }
#appView.light-mode .pv-para { color: #0F172A !important; border-bottom-color: #E2E8F0 !important; }
#appView.light-mode .pv-para:hover { background: #EFF6FF !important; }
#appView.light-mode .pv-para.pv-heading { border-left-color: #1E40AF !important; color: #0F172A !important; }
#appView.light-mode .pv-edit-badge { color: #64748B !important; }
#appView.light-mode .pv-para.pv-edited { background: #F0FDF4 !important; }

/* Upload zone */
#appView.light-mode .p-upload-zone {
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
}
#appView.light-mode .p-upload-zone:hover { background: #DBEAFE !important; border-color: #1E40AF !important; }
#appView.light-mode #pvUploadLabel { color: #1E40AF !important; }
#appView.light-mode #pvUploadSub { color: #64748B !important; }

/* Buttons */
#appView.light-mode .voice-header-btn {
  background: linear-gradient(135deg, #1E40AF, #1E3A8A) !important;
  color: #ffffff !important;
}
#appView.light-mode .p-download-btn-sm {
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
  color: #1E40AF !important;
}
#appView.light-mode .p-download-pdf-btn {
  background: #F0FDF4 !important;
  border-color: #BBF7D0 !important;
  color: #059669 !important;
}
#appView.light-mode .pv-remove-doc-btn {
  border-color: rgba(239,68,68,0.3) !important;
  color: rgba(220,38,38,0.7) !important;
}
#appView.light-mode .tab-header-action-btn {
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
  color: #1E40AF !important;
}

/* Voice drawer */
#appView.light-mode .voice-drawer {
  background: #ffffff !important;
  border-top: 2px solid #1E40AF !important;
  box-shadow: 0 -4px 24px rgba(30,64,175,0.12) !important;
}
#appView.light-mode .voice-drawer-handle { background: #F1F5F9 !important; border-bottom: 1px solid #E2E8F0 !important; }
#appView.light-mode .voice-drawer-title { color: #0F172A !important; }
#appView.light-mode .voice-drawer-grip { background: #CBD5E1 !important; }
#appView.light-mode .p-mic-btn {
  background: linear-gradient(135deg, #1E40AF, #0EA5E9) !important;
  border-color: #1E40AF !important;
  color: #ffffff !important;
}
#appView.light-mode .p-mic-btn.recording {
  background: linear-gradient(135deg, #DC2626, #EF4444) !important;
}
#appView.light-mode #pvTranscript {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}
#appView.light-mode .pv-transcript-wrap {
  border-color: #CBD5E1 !important;
  background: #F8FAFC !important;
}
#appView.light-mode .pv-save-tag-btn {
  background: linear-gradient(135deg, #1E40AF, #0EA5E9) !important;
  color: #ffffff !important;
}
#appView.light-mode .p-btn {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #334155 !important;
}
#appView.light-mode .pv-cancel-btn { color: #64748B !important; border-color: #E2E8F0 !important; }
#appView.light-mode #pvStatusText { color: #475569 !important; }
#appView.light-mode .p-char-count { color: #64748B !important; }
#appView.light-mode .pv-active-label { color: #64748B !important; }
#appView.light-mode #pvActiveSection { color: #0F172A !important; }

/* Format toolbar */
#appView.light-mode .pv-format-toolbar { background: #F1F5F9 !important; border-color: #E2E8F0 !important; }
#appView.light-mode .fmt-btn { color: #475569 !important; }
#appView.light-mode .fmt-btn:hover { background: #DBEAFE !important; color: #1E40AF !important; }
#appView.light-mode .fmt-select { background: #ffffff !important; border-color: #CBD5E1 !important; color: #0F172A !important; }

/* Templates */
#appView.light-mode .tpl-tab-card {
  background: #ffffff !important;
  border-color: #E2E8F0 !important;
}
#appView.light-mode .tpl-tab-card:hover { background: #EFF6FF !important; border-color: #1E40AF !important; }
#appView.light-mode .tpl-card-name { color: #0F172A !important; font-weight: 700 !important; }
#appView.light-mode .tpl-card-desc { color: #475569 !important; }
#appView.light-mode .tpl-card-cat {
  background: #EFF6FF !important;
  color: #1E40AF !important;
  border: 1px solid #BFDBFE !important;
}
#appView.light-mode .tpl-section-label { color: #1E40AF !important; font-weight: 700 !important; }
#appView.light-mode .tpl-tab-card .tpl-card-icon { opacity: 1 !important; }

/* Phrases */
#appView.light-mode .phrase-card-sq { background: #ffffff !important; border-color: #E2E8F0 !important; }
#appView.light-mode .phrase-sq-name { color: #0F172A !important; }
#appView.light-mode .phrase-sq-text { color: #475569 !important; }
#appView.light-mode .phrase-copy-btn { background: #EFF6FF !important; border-color: #BFDBFE !important; color: #1E40AF !important; }

/* Review */
#appView.light-mode .review-card { background: #ffffff !important; border-color: #E2E8F0 !important; }
#appView.light-mode .review-doc-name { color: #0F172A !important; }
#appView.light-mode .review-author, #appView.light-mode .review-time { color: #64748B !important; }
#appView.light-mode .review-card-summary { color: #475569 !important; }
#appView.light-mode .review-comment-input { background: #F8FAFC !important; border-color: #CBD5E1 !important; color: #0F172A !important; }

/* Workflow */
#appView.light-mode .workflow-stat { background: #ffffff !important; border-color: #E2E8F0 !important; }
#appView.light-mode .workflow-stat-num { color: #1E40AF !important; }
#appView.light-mode .workflow-stat-label { color: #64748B !important; }
#appView.light-mode .workflow-member { background: #ffffff !important; border-color: #E2E8F0 !important; }
#appView.light-mode .workflow-member-name { color: #0F172A !important; }
#appView.light-mode .workflow-member-doc { color: #64748B !important; }
#appView.light-mode .wf-table-wrap { border-color: #E2E8F0 !important; }
#appView.light-mode .wf-table thead th { background: #EFF6FF !important; color: #1E40AF !important; border-color: #BFDBFE !important; }
#appView.light-mode .wf-table-row td { border-bottom-color: #F1F5F9 !important; }
#appView.light-mode .wf-cell-input, #appView.light-mode .wf-cell-select {
  background: #F8FAFC !important; border-color: #CBD5E1 !important; color: #0F172A !important;
}

/* Roles */
#appView.light-mode .roles-section { background: #ffffff !important; border-color: #E2E8F0 !important; }
#appView.light-mode .roles-section-title { color: #0F172A !important; }
#appView.light-mode .roles-section-sub { color: #64748B !important; }
#appView.light-mode .roles-tbl thead th { background: #EFF6FF !important; color: #1E40AF !important; }
#appView.light-mode .roles-tbl-name { color: #0F172A !important; }
#appView.light-mode .roles-tbl-email { color: #64748B !important; }
#appView.light-mode .role-input, #appView.light-mode .role-select,
#appView.light-mode .criteria-name-input, #appView.light-mode .criteria-score-input {
  background: #F8FAFC !important; border-color: #CBD5E1 !important; color: #0F172A !important;
}
#appView.light-mode .role-add-btn { background: #1E40AF !important; border-color: #1E40AF !important; color: #ffffff !important; }

/* Account menu */
#appView.light-mode .account-btn { background: #EFF6FF !important; border-color: #BFDBFE !important; color: #1E40AF !important; }
#appView.light-mode .account-dropdown { background: #ffffff !important; border-color: #E2E8F0 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important; }
#appView.light-mode .account-dropdown-email { color: #0F172A !important; }
#appView.light-mode .account-dropdown-item { color: #334155 !important; }
#appView.light-mode .account-dropdown-item:hover { background: #EFF6FF !important; }

/* Toasts */
#appView.light-mode .vr-toast-success { background: #F0FDF4 !important; border-color: #BBF7D0 !important; color: #166534 !important; }
#appView.light-mode .vr-toast-info    { background: #EFF6FF !important; border-color: #BFDBFE !important; color: #1E40AF !important; }
#appView.light-mode .vr-toast-warning { background: #FFFBEB !important; border-color: #FDE68A !important; color: #92400E !important; }
#appView.light-mode .vr-toast-error   { background: #FEF2F2 !important; border-color: #FECACA !important; color: #991B1B !important; }

/* Invite modal */
#appView.light-mode .invite-standalone-modal { background: #ffffff !important; border-color: #E2E8F0 !important; }
#appView.light-mode .invite-modal-title h2 { color: #0F172A !important; }
#appView.light-mode .invite-slots-badge { background: #EFF6FF !important; color: #1E40AF !important; }
#appView.light-mode .invite-email-input { background: #F8FAFC !important; border-color: #CBD5E1 !important; color: #0F172A !important; }
#appView.light-mode .invite-send-btn { background: #1E40AF !important; color: #ffffff !important; }

/* Editor bottom bar */
#appView.light-mode .editor-bottom-bar { background: #ffffff !important; border-top-color: #E2E8F0 !important; }
#appView.light-mode .editor-submit-review-btn-full { background: #1E40AF !important; color: #ffffff !important; border-color: #1E40AF !important; }
#appView.light-mode .support-docs-label { background: #F1F5F9 !important; border-color: #CBD5E1 !important; color: #475569 !important; }

/* Onboarding modal */
#appView.light-mode .onb-modal { background: #ffffff !important; border-color: #E2E8F0 !important; }
#appView.light-mode .onb-slide-title { color: #0F172A !important; }
#appView.light-mode .onb-slide-body { color: #475569 !important; }

/* Theme toggle button */
#appView.light-mode .theme-toggle-btn { background: #EFF6FF !important; border-color: #BFDBFE !important; color: #1E40AF !important; }
#appView.light-mode .topbar-settings-btn { background: #F1F5F9 !important; border-color: #E2E8F0 !important; color: #475569 !important; }

/* Search inputs */
#appView.light-mode .tab-search-wrap { background: #ffffff !important; border-color: #E2E8F0 !important; }
#appView.light-mode .tab-search-input { color: #0F172A !important; }
#appView.light-mode .tab-search-input::placeholder { color: #94A3B8 !important; }

/* Image panel */
#appView.light-mode .pv-img-panel { border-top-color: #E2E8F0 !important; }
#appView.light-mode .pv-img-hint { color: #64748B !important; }
#appView.light-mode .pv-img-item { background: #F8FAFC !important; border-color: #E2E8F0 !important; }
#appView.light-mode .pv-img-name { color: #0F172A !important; }
#appView.light-mode .pv-img-place-all-btn { background: #F0FDF4 !important; border-color: #BBF7D0 !important; color: #059669 !important; }

/* Voice commands help */
#appView.light-mode .vc-help-panel { background: #EFF6FF !important; border-color: #BFDBFE !important; }
#appView.light-mode .vc-help-title { color: #1E40AF !important; }
#appView.light-mode .vc-cmd { background: #DBEAFE !important; border-color: #93C5FD !important; color: #1E40AF !important; }
#appView.light-mode .vc-desc { color: #475569 !important; }

/* ══════════════════════════════════════════════════════════════════
   SLATE PROFESSIONAL PALETTE — FINAL AUTHORITATIVE OVERRIDE
   Applied to #appView.light-mode ONLY. Pricing page always dark.
   ══════════════════════════════════════════════════════════════════ */

/* ── Core layout ── */
#appView.light-mode {
  background: #F8FAFC !important;
  color: #0F172A !important;
}
#appView.light-mode 
#appView.light-mode .app-sidebar {
  background: #FFFFFF !important;
  border-right: 1px solid #E2E8F0 !important;
}
#appView.light-mode .app-content {
  background: #F8FAFC !important;
}

/* ── Nav logo & branding ── */
#appView.light-mode .app-nav-logo { color: #0F172A !important; }
#appView.light-mode .app-nav-logo span { color: #1E40AF !important; }

/* ── Sidebar tabs ── */
#appView.light-mode .app-tab-btn {
  color: #475569 !important;
  background: transparent !important;
}
#appView.light-mode .app-tab-btn:hover {
  background: #EFF6FF !important;
  color: #1E40AF !important;
}
#appView.light-mode .app-tab-btn.active {
  background: #EFF6FF !important;
  color: #1E40AF !important;
}
#appView.light-mode .app-tab-btn.active::before {
  background: #1E40AF !important;
}
#appView.light-mode .tab-label { color: inherit !important; }
#appView.light-mode .tab-icon  { color: inherit !important; }
#appView.light-mode .sidebar-divider { background: #E2E8F0 !important; }

/* ── Tab panel headers ── */
#appView.light-mode .tab-panel-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
}
#appView.light-mode .tab-panel-title { color: #0F172A !important; }
#appView.light-mode .tab-search-wrap {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}
#appView.light-mode .tab-search-input { color: #0F172A !important; }
#appView.light-mode .tab-search-input::placeholder { color: #94A3B8 !important; }
#appView.light-mode .tab-header-action-btn {
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
  color: #1E40AF !important;
}

/* ── Editor subtabs ── */
#appView.light-mode .editor-subtabs-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
}
#appView.light-mode .editor-subtab { color: #64748B !important; }
#appView.light-mode .editor-subtab:hover { color: #1E40AF !important; }
#appView.light-mode .editor-subtab.active {
  color: #1E40AF !important;
  border-bottom-color: #1E40AF !important;
}

/* ── Doc area ── */
#appView.light-mode .pv-doc-fullpanel {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
}
#appView.light-mode .pv-doc-header {
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
}
#appView.light-mode .pv-doc-header-left span { color: #0F172A !important; }
#appView.light-mode .pv-para {
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}
#appView.light-mode .pv-para:hover { background: #F0F7FF !important; }
#appView.light-mode .pv-para.pv-active { background: #EFF6FF !important; border-color: #1E40AF !important; }
#appView.light-mode .pv-heading { color: #0F172A !important; font-weight: 700 !important; }
#appView.light-mode .pv-edit-badge { color: #94A3B8 !important; }
#appView.light-mode .pv-edited .pv-edit-badge { color: #16A34A !important; }

/* ── Upload zone ── */
#appView.light-mode .pv-upload-area { background: transparent !important; }
#appView.light-mode .p-upload-zone {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #475569 !important;
}
#appView.light-mode .p-upload-zone:hover { border-color: #1E40AF !important; }
#appView.light-mode #pvUploadLabel { color: #0F172A !important; }
#appView.light-mode #pvUploadSub   { color: #64748B !important; }

/* ── Voice drawer ── */
#appView.light-mode .voice-drawer {
  background: #FFFFFF !important;
  border-top: 1px solid #E2E8F0 !important;
}
#appView.light-mode .voice-drawer-title  { color: #475569 !important; }
#appView.light-mode .voice-drawer-grip   { background: #CBD5E1 !important; }
#appView.light-mode .pv-idle-text        { color: #475569 !important; }
#appView.light-mode .pv-active-label     { color: #64748B !important; }
#appView.light-mode .pv-active-section   { color: #0F172A !important; }
#appView.light-mode #pvStatusText        { color: #475569 !important; }

/* ── Format toolbar ── */
#appView.light-mode .pv-format-toolbar { background: #F8FAFC !important; border-color: #E2E8F0 !important; }
#appView.light-mode .pv-fmt-btn { background: #F1F5F9 !important; border-color: #CBD5E1 !important; color: #0F172A !important; }
#appView.light-mode .pv-fmt-select { background: #F1F5F9 !important; border-color: #CBD5E1 !important; color: #0F172A !important; }

/* ── Transcript ── */
#appView.light-mode #pvTranscript {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}
#appView.light-mode .pv-transcript-footer { color: #64748B !important; }

/* ── Buttons ── */
#appView.light-mode .p-btn {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}
#appView.light-mode .p-save-tag-btn {
  background: #1E40AF !important;
  color: #FFFFFF !important;
}
#appView.light-mode .p-download-btn-sm {
  background: #1E40AF !important;
  color: #FFFFFF !important;
  border-color: #1E40AF !important;
}
#appView.light-mode .voice-header-btn {
  background: linear-gradient(135deg, #1E40AF, #1D4ED8) !important;
  color: #FFFFFF !important;
}
#appView.light-mode .pv-remove-doc-btn {
  background: #FEF2F2 !important;
  border-color: #FECACA !important;
  color: #DC2626 !important;
}

/* ── Templates tab ── */
#appView.light-mode .tpl-tab-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}
#appView.light-mode .tpl-tab-card:hover {
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
}
#appView.light-mode .tpl-card-name { color: #0F172A !important; font-weight: 700 !important; }
#appView.light-mode .tpl-card-desc { color: #475569 !important; }
#appView.light-mode .tpl-card-icon { color: #1E40AF !important; }
#appView.light-mode .tpl-section-label { color: #64748B !important; font-weight: 700 !important; }
#appView.light-mode .tpl-recently-badge { background: #EFF6FF !important; color: #1E40AF !important; }

/* ── Dark mode template visibility fix (when NOT light) ── */
.tpl-card-name        { color: #E2E8F0 !important; }
.tpl-card-desc        { color: rgba(196,187,255,0.65) !important; }
.tpl-section-label    { color: rgba(196,187,255,0.6) !important; letter-spacing: 0.08em !important; }
.tpl-tab-card         { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; }
.tpl-tab-card:hover   { background: rgba(124,111,255,0.12) !important; border-color: rgba(124,111,255,0.3) !important; }

/* ── Phrases tab ── */
#appView.light-mode .phrase-card-sq {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}
#appView.light-mode .phrase-card-name { color: #0F172A !important; }
#appView.light-mode .phrase-card-text { color: #475569 !important; }
#appView.light-mode .phrase-card-tags { color: #64748B !important; }
#appView.light-mode .phrase-add-form  { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
#appView.light-mode .phrase-input     { background: #F8FAFC !important; border-color: #CBD5E1 !important; color: #0F172A !important; }

/* ── Review tab ── */
#appView.light-mode .review-card       { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
#appView.light-mode .review-card-title { color: #0F172A !important; }
#appView.light-mode .review-card-meta  { color: #64748B !important; }
#appView.light-mode .review-status     { color: #475569 !important; }

/* ── Workflow tab ── */
#appView.light-mode .wf-table          { background: #FFFFFF !important; }
#appView.light-mode .wf-table th       { background: #F1F5F9 !important; color: #0F172A !important; border-color: #E2E8F0 !important; }
#appView.light-mode .wf-table td       { color: #0F172A !important; border-color: #E2E8F0 !important; }
#appView.light-mode .wf-table tr:hover { background: #F0F7FF !important; }

/* ── Roles tab ── */
#appView.light-mode .roles-section     { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
#appView.light-mode .role-member-row   { border-color: #E2E8F0 !important; }
#appView.light-mode .role-member-name  { color: #0F172A !important; }
#appView.light-mode .role-select       { background: #F8FAFC !important; border-color: #CBD5E1 !important; color: #0F172A !important; }

/* ── Account menu & topbar ── */
#appView.light-mode .account-btn {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}
#appView.light-mode .account-dropdown {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12) !important;
}
#appView.light-mode .account-dropdown-email { color: #0F172A !important; }
#appView.light-mode .account-dropdown-plan  { color: #475569 !important; }
#appView.light-mode .account-dropdown-item  { color: #475569 !important; }
#appView.light-mode .account-dropdown-item:hover { background: #F1F5F9 !important; color: #0F172A !important; }
#appView.light-mode .app-timer-pill {
  background: #EFF6FF !important;
  color: #1E40AF !important;
  border-color: #BFDBFE !important;
}
#appView.light-mode .theme-toggle-btn {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}
#appView.light-mode .topbar-settings-btn {
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
  color: #1E40AF !important;
}

/* ── Editor bottom bar ── */
#appView.light-mode .editor-bottom-bar {
  background: #FFFFFF !important;
  border-top: 1px solid #E2E8F0 !important;
}
#appView.light-mode .editor-submit-review-btn-full {
  background: linear-gradient(135deg, #1E40AF, #1D4ED8) !important;
  color: #FFFFFF !important;
}

/* ── Excel mode ── */
#appView.light-mode .p-card           { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
#appView.light-mode .p-section-label  { color: #64748B !important; font-weight: 700 !important; }
#appView.light-mode .xl-col-input     { background: #F8FAFC !important; border-color: #CBD5E1 !important; color: #0F172A !important; }
#appView.light-mode .xl-table th      { background: #F1F5F9 !important; color: #0F172A !important; }
#appView.light-mode .xl-table td      { color: #0F172A !important; border-color: #E2E8F0 !important; }

/* ── Toast ── */
/* vr-toast light mode handled by type-specific rules below */

/* ── Place All btn light mode ── */
#appView.light-mode .pv-img-place-all-btn {
  background: #DCFCE7 !important;
  border-color: #86EFAC !important;
  color: #15803D !important;
}

/* ── Scrollbars light ── */
#appView.light-mode ::-webkit-scrollbar-track { background: #F1F5F9 !important; }
#appView.light-mode ::-webkit-scrollbar-thumb { background: #CBD5E1 !important; }

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE — all modals (payment, upgrade, logout, cancel)
   These are inside #appView so inherit the scoped light vars,
   but need explicit overrides for hardcoded dark shadows/colors
   ══════════════════════════════════════════════════════════════ */
#appView.light-mode .modal {
  background: #ffffff !important;
  border-color: #c8d4e8 !important;
  box-shadow: 0 16px 60px rgba(124,111,255,0.12) !important;
  color: #0f1117 !important;
}
#appView.light-mode .modal h2 {
  color: #0f1117 !important;
}
#appView.light-mode .modal-subtitle {
  color: #4a6080 !important;
}
#appView.light-mode .modal-plan-badge {
  background: rgba(124,111,255,0.08) !important;
  border-color: rgba(124,111,255,0.2) !important;
  color: #1a4a9e !important;
}
#appView.light-mode .modal-close {
  color: #4a6080 !important;
  border-color: #c8d4e8 !important;
}
#appView.light-mode .modal-close:hover {
  background: rgba(220,38,38,0.08) !important;
  color: #dc2626 !important;
}
#appView.light-mode .modal-backdrop {
  background: rgba(15,32,96,0.5) !important;
}
/* Payment modal */
#appView.light-mode #paymentModal .modal {
  background: #ffffff !important;
}
#appView.light-mode .modal-divider {
  border-color: #e2e8f0 !important;
}
/* Upgrade modal */
#appView.light-mode .upgrade-offer p {
  color: #4a6080 !important;
}
#appView.light-mode .upgrade-pro-btn {
  background: #1a4a9e !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(26,74,158,0.3) !important;
}
#appView.light-mode .upgrade-enterprise-btn {
  background: #f0f4ff !important;
  border-color: #c8d4e8 !important;
  color: #1a4a9e !important;
}
#appView.light-mode .upgrade-contact-btn {
  background: #f0f4ff !important;
  border-color: rgba(26,74,158,0.3) !important;
  color: #1a4a9e !important;
}
/* Logout modal */
#appView.light-mode #logoutModal .modal {
  background: #ffffff !important;
}
/* Cancel modal */
#appView.light-mode #cancelSubModal .modal {
  background: #ffffff !important;
}
#appView.light-mode #cancelSubModal div[style*="background"] {
  background: #f0f4ff !important;
  border-color: #c8d4e8 !important;
  color: #4a6080 !important;
}
/* Sub expired modal */
#appView.light-mode #subExpiredModal .modal {
  background: #ffffff !important;
}
/* Payment modal form elements */
#appView.light-mode .paypal-btn-container {
  background: #f8fafc !important;
  border-color: #c8d4e8 !important;
}

/* ══════════════════════════════════════════════════════════════
   IMAGE SIZE — unit toggle (px / cm)
   ══════════════════════════════════════════════════════════════ */
.pv-img-unit-toggle {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(124,111,255,0.3);
  flex-shrink: 0;
}
.pv-unit-btn {
  background: none;
  border: none;
  color: rgba(168,159,255,0.5);
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--sans);
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}
.pv-unit-btn.active {
  background: rgba(124,111,255,0.25);
  color: #c4bbff;
}
.pv-unit-btn:hover:not(.active) {
  background: rgba(124,111,255,0.1);
  color: #a89fff;
}
#appView.light-mode .pv-unit-btn {
  color: #6b8ab5;
}
#appView.light-mode .pv-unit-btn.active {
  background: rgba(124,111,255,0.15);
  color: #1a4a9e;
}

/* ── Toast light mode — base (untyped) ── */
#appView.light-mode .vr-toast {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-color: rgba(255,255,255,0.1) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
}


  100% { background-position: -200% 0; }
}
/* Light mode */
#appView.light-mode .vr-data-loader-box {
  background: #ffffff !important;
  border-color: #c8d4e8 !important;
  box-shadow: 0 16px 60px rgba(124,111,255,0.1) !important;
}
#appView.light-mode .vr-data-loader-text { color: #0f1117 !important; }
#appView.light-mode .vr-data-loader-sub  { color: #6b8ab5 !important; }
#appView.light-mode .vr-dl-ring {
  border-color: rgba(124,111,255,0.15) !important;
  border-top-color: #7c6fff !important;
}
#appView.light-mode .vr-sk-line {
  background: linear-gradient(90deg,
    rgba(124,111,255,0.06) 25%,
    rgba(124,111,255,0.14) 50%,
    rgba(124,111,255,0.06) 75%) !important;
  background-size: 200% 100% !important;
}


/* ══════════════════════════════════════════════════════════════
   INLINE TAB SKELETON LOADERS
   Shown inside each tab while Firestore data loads.
   Replaced by real content when _hydrateFromDb fires.
   ══════════════════════════════════════════════════════════════ */
.vr-tab-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  width: 100%;
}
.vr-sk-card {
  background: var(--surface2);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border);
}
.vr-sk-card.vr-sk-tall {
  padding: 16px 14px;
  gap: 10px;
}
.vr-sk-table-row {
  background: var(--surface2);
  border-radius: 6px;
  padding: 10px 14px;
  border: 1px solid var(--border);
}
.vr-sk-line {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(
    90deg,
    var(--border) 25%,
    var(--border2) 50%,
    var(--border) 75%
  );
  background-size: 200% 100%;
  animation: vrSkShimmer 1.4s ease infinite;
}
.vr-sk-w80 { width: 80%; }
.vr-sk-w70 { width: 70%; }
.vr-sk-w60 { width: 60%; }
.vr-sk-w50 { width: 50%; }
.vr-sk-w40 { width: 40%; }
.vr-sk-w30 { width: 30%; }
@keyframes vrSkShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Light mode */
#appView.light-mode .vr-sk-card,
#appView.light-mode .vr-sk-table-row {
  background: #f0f4ff !important;
  border-color: #e2e8f0 !important;
}
#appView.light-mode .vr-sk-line {
  background: linear-gradient(
    90deg,
    #e2e8f0 25%,
    #c8d4e8 50%,
    #e2e8f0 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: vrSkShimmer 1.4s ease infinite !important;
}

/* ══════════════════════════════════════════════════════════════
   TAB NOTIFICATION BADGES
   ══════════════════════════════════════════════════════════════ */
.tab-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--sans);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(239,68,68,0.5);
  animation: badge-pop 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes badge-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
/* Make tab buttons position:relative so badge positions correctly */
.app-tab-btn { position: relative; }
/* Light mode */
#appView.light-mode .tab-badge {
  box-shadow: 0 1px 4px rgba(239,68,68,0.4) !important;
}

/* ══════════════════════════════════════════════════════════════
   DATABASE SYNC STATUS INDICATOR
   ══════════════════════════════════════════════════════════════ */
.app-db-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(168,159,255,0.7);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
  transition: all 0.3s ease;
  cursor: default;
  flex-shrink: 0;
  min-width: 90px;
}
.db-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(168,159,255,0.5);
  transition: all 0.3s ease;
  flex-shrink: 0;
}
/* States */
.app-db-status.db-connecting .db-status-dot { background: #f59e0b; animation: dbPulse 1.2s ease-in-out infinite; }
.app-db-status.db-connecting .db-status-label { color: #f59e0b; }
.app-db-status.db-connected  .db-status-dot  { background: #7c6fff; box-shadow: 0 0 0 2px rgba(124,111,255,0.2); }
.app-db-status.db-connected  .db-status-label { color: #7c6fff; }
.app-db-status.db-saving     .db-status-dot  { background: #60a5fa; animation: dbPulse 0.8s ease-in-out infinite; }
.app-db-status.db-saving     .db-status-label { color: #60a5fa; }
.app-db-status.db-saved      .db-status-dot  { background: #7c6fff; }
.app-db-status.db-saved      .db-status-label { color: #7c6fff; }
.app-db-status.db-error      .db-status-dot  { background: #ef4444; }
.app-db-status.db-error      .db-status-label { color: #ef4444; }
.app-db-status.db-offline    .db-status-dot  { background: #6b7280; }
.app-db-status.db-offline    .db-status-label { color: #6b7280; }

@keyframes dbPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

/* Hide on mobile - too crowded */
@media (max-width: 768px) {
  .app-db-status { display: none !important; }
}

/* Light mode */
#appView.light-mode .app-db-status {
  background: #f0f4ff !important;
  border-color: #c8d4e8 !important;
  color: #4a6080 !important;
}
#appView.light-mode .app-db-status.db-connecting .db-status-label { color: #92600a !important; }
#appView.light-mode .app-db-status.db-connecting .db-status-dot  { background: #f59e0b !important; }
#appView.light-mode .app-db-status.db-connected  .db-status-label { color: #059669 !important; }
#appView.light-mode .app-db-status.db-connected  .db-status-dot  { background: #059669 !important; }
#appView.light-mode .app-db-status.db-saving     .db-status-label { color: #4c3fe0 !important; }
#appView.light-mode .app-db-status.db-saving     .db-status-dot  { background: #4c3fe0 !important; }
#appView.light-mode .app-db-status.db-saved      .db-status-label { color: #059669 !important; }
#appView.light-mode .app-db-status.db-saved      .db-status-dot  { background: #059669 !important; }
#appView.light-mode .app-db-status.db-error      .db-status-label { color: #dc2626 !important; }
#appView.light-mode .app-db-status.db-error      .db-status-dot  { background: #dc2626 !important; }
#appView.light-mode .app-db-status.db-offline    .db-status-label { color: #6b7280 !important; }

/* ══════════════════════════════════════════════════════════════
   MOBILE EXPERIENCE OVERHAUL — clean & professional
   Target: iOS/Android, 320–768px viewports
   ══════════════════════════════════════════════════════════════ */

/* ── 1. BOTTOM NAV — cleaner, more refined ─────────────────── */
@media (max-width: 768px) {

  /* Stronger glass effect on bottom nav */
  .app-sidebar {
    background: rgba(10, 12, 20, 0.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.4) !important;
    gap: 0 !important;
  }

  /* Tab buttons — cleaner proportions */
  .app-tab-btn {
    gap: 3px !important;
    padding: 8px 4px 10px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    position: relative !important;
    transition: color 0.15s !important;
    min-height: 52px !important;
  }

  /* Active indicator: thin line at top of tab (like iOS) */
  .app-tab-btn.active {
    background: transparent !important;
    color: #a89fff !important;
  }
  .app-tab-btn.active::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 50% !important;
    transform: translateX(-50%) !important;
    width: 28px !important; height: 2px !important;
    background: #7c6fff !important;
    border-radius: 0 0 2px 2px !important;
  }

  /* Inactive tabs slightly dimmer */
  .app-tab-btn:not(.active) {
    color: rgba(255,255,255,0.3) !important;
  }

  .app-tab-btn .tab-icon {
    font-size: 1.25rem !important;
    line-height: 1 !important;
  }
  .app-tab-btn .tab-label {
    font-size: 0.52rem !important;
    letter-spacing: 0.04em !important;
    font-weight: 600 !important;
  }

  /* ── 2. TOPBAR — tighter, cleaner ──────────────────────────── */
  /* topbar height preserved from base rule */

  .app-nav-logo {
    font-size: 1rem !important;
    letter-spacing: -0.02em !important;
  }

  /* Help button — icon only on mobile */
  .topbar-settings-btn {
    font-size: 0.7rem !important;
    padding: 5px 8px !important;
  }

  /* Account button — cleaner */
  .account-btn {
    padding: 5px 10px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
  }

  /* ── 3. CONTENT AREA — breathing room ──────────────────────── */
  .app-content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }

  /* ── 4. TAB PANEL HEADERS — clean ──────────────────────────── */
  .tab-panel-header {
    padding: 14px 16px 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    background: rgba(255,255,255,0.01) !important;
  }

  .tab-panel-title {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
  }

  /* ── 5. PHRASE CARDS — better mobile layout ─────────────────── */
  #phrasesTabContent {
    padding: 12px !important;
    gap: 10px !important;
    display: grid !important;
    grid-template-columns: 1fr !important; /* single col for readability */
  }

  .phrase-card {
    border-radius: 12px !important;
    padding: 14px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
  }

  .phrase-card-name {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
  }

  .phrase-card-text {
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
    color: rgba(255,255,255,0.55) !important;
  }

  /* Copy button — proper touch target */
  .phrase-copy-btn, .p-copy-btn {
    min-height: 36px !important;
    min-width: 64px !important;
    border-radius: 8px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
  }

  /* Phrase form inputs */
  .p-phrase-form input,
  .p-phrase-form textarea,
  #phraseNameInput, #phraseTagInput, #phraseTextInput {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    padding: 12px 14px !important;
    border-radius: 10px !important;
  }

  /* ── 6. VOICE DRAWER — polished ─────────────────────────────── */
  .voice-drawer {
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -16px 60px rgba(0,0,0,0.6) !important;
  }

  /* Drag handle pill on voice drawer */
  .voice-drawer::before {
    content: '' !important;
    display: block !important;
    width: 36px !important;
    height: 4px !important;
    background: rgba(255,255,255,0.15) !important;
    border-radius: 2px !important;
    margin: 10px auto 4px !important;
  }

  /* Status text — more readable */
  #pvStatusText {
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.5) !important;
  }

  /* ── 7. UPLOAD ZONE — clean card ────────────────────────────── */
  .p-upload-zone, #pvUploadZone {
    border-radius: 16px !important;
    border: 1.5px dashed rgba(124,111,255,0.3) !important;
    background: rgba(124,111,255,0.04) !important;
    padding: 36px 20px !important;
    margin: 16px !important;
    transition: all 0.2s !important;
  }
  .p-upload-zone:active, #pvUploadZone:active {
    background: rgba(124,111,255,0.09) !important;
    border-color: rgba(124,111,255,0.5) !important;
  }

  /* ── 8. SUBMIT BUTTON — prominent ──────────────────────────── */
  .editor-submit-review-btn-full,
  #submitReviewBtn {
    border-radius: 12px !important;
    padding: 14px !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.01em !important;
    background: rgba(124,111,255,0.15) !important;
    border: 1px solid rgba(124,111,255,0.35) !important;
  }

  /* ── 9. MODALS — full-screen feel on mobile ─────────────────── */
  .modal {
    max-width: 100% !important;
    width: calc(100% - 24px) !important;
    max-height: 88vh !important;
    border-radius: 20px !important;
    overflow-y: auto !important;
    margin: 0 12px !important;
  }

  /* ── 10. SCROLL — momentum on all scroll areas ──────────────── */
  .tab-panel-scroll,
  #reviewTabContent,
  #rolesTabContent,
  #workflowTabContent,
  #phrasesTabContent,
  #tplTabContent {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* ── 11. GENERAL TOUCH TARGETS — all interactive elements ───── */
  button, [role="button"], select, input[type="checkbox"] {
    min-height: 36px !important;
    touch-action: manipulation !important;
  }

  /* Prevent double-tap zoom on buttons */
  button, a {
    touch-action: manipulation !important;
  }

  /* ── 12. REVIEW CARDS — mobile friendly ─────────────────────── */
  .review-card {
    border-radius: 12px !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
  }

  .review-action-btn {
    padding: 8px 14px !important;
    font-size: 0.75rem !important;
    border-radius: 8px !important;
  }

  /* ── 13. WORKFLOW TABLE — clean scroll ──────────────────────── */
  .wf-table-wrap {
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    margin: 0 12px 12px !important;
  }

  /* ── 14. ROLES — stacked layout ─────────────────────────────── */
  .roles-add-form {
    gap: 8px !important;
    padding: 12px !important;
  }

  /* ── 15. TOAST NOTIFICATIONS — above bottom nav ─────────────── */
  #vrToastContainer {
    bottom: calc(64px + env(safe-area-inset-bottom) + 8px) !important;
    right: 12px !important;
    left: 12px !important;
    max-width: none !important;
  }

  .vr-toast {
    border-radius: 12px !important;
    padding: 12px 14px !important;
    font-size: 0.82rem !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
  }
}

/* ── LIGHT MODE mobile overrides — match dark refinements ──── */
@media (max-width: 768px) {
  #appView.light-mode .app-sidebar {
    background: #fff !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.08) !important;
  }
  #appView.light-mode .app-tab-btn:not(.active) {
    color: rgba(0,0,0,0.35) !important;
  }
  #appView.light-mode .app-tab-btn.active {
    color: #7c6fff !important;
  }
  #appView.light-mode .app-tab-btn.active::before {
    background: #7c6fff !important;
  }
  #appView.light-mode .app-topbar {
    background: rgba(255,255,255,0.98) !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  }
  #appView.light-mode .p-upload-zone,
  #appView.light-mode #pvUploadZone {
    border-color: rgba(124,111,255,0.25) !important;
    background: rgba(124,111,255,0.03) !important;
  }
  #appView.light-mode #vrToastContainer .vr-toast {
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    color: #111 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
  }
}

/* ── Input font-size: 16px on ALL phones prevents iOS auto-zoom ── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ── TEAM SHARING & REVIEW ENHANCEMENTS ──────────────────────── */

/* Owner-only review action buttons */
.review-delete-btn {
  background: rgba(220, 38, 38, 0.1) !important;
  color: #f87171 !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
}
.review-delete-btn:hover {
  background: rgba(220, 38, 38, 0.22) !important;
  border-color: rgba(220, 38, 38, 0.5) !important;
}
.review-rename-btn {
  background: rgba(124, 111, 255, 0.1) !important;
  color: #a78bfa !important;
  border-color: rgba(124, 111, 255, 0.3) !important;
}
.review-rename-btn:hover {
  background: rgba(124, 111, 255, 0.2) !important;
}

/* Comment structure */
.review-comment {
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  margin-bottom: 8px;
}
.review-comment-meta {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.review-comment-meta strong {
  color: var(--text);
}
.review-comment-time {
  color: var(--muted);
  font-size: 0.72rem;
}
.review-comment-edited {
  color: var(--muted);
  font-size: 0.7rem;
  font-style: italic;
}
.review-comment-text {
  font-size: 0.84rem;
  color: var(--text);
  line-height: 1.5;
}
.review-comment-edit-area {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.84rem;
  padding: 8px 10px;
  resize: vertical;
  margin-top: 4px;
}
.review-comment-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.review-comment-action-btn {
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 5px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.review-comment-action-btn:hover {
  background: var(--surface2);
  color: var(--text);
}
.review-comment-save-btn {
  color: var(--green) !important;
  border-color: rgba(124,111,255,0.3) !important;
}
.review-comment-save-btn:hover {
  background: rgba(124,111,255,0.1) !important;
}
.review-comment-cancel-btn {
  color: var(--muted) !important;
}
.review-comment-del-btn {
  color: #f87171 !important;
  border-color: rgba(220,38,38,0.25) !important;
  margin-left: auto;
}
.review-comment-del-btn:hover {
  background: rgba(220,38,38,0.1) !important;
}

/* Light mode overrides */
#appView.light-mode .review-comment {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}
#appView.light-mode .review-comment-edit-area {
  background: #fff;
  border-color: #d0d5e8;
  color: #1a1a2e;
}
#appView.light-mode .review-comment-action-btn {
  border-color: #d0d5e8;
  color: #5a6282;
}
#appView.light-mode .review-comment-action-btn:hover {
  background: #f0f4ff;
  color: #1a1a2e;
}

/* Phrase saved-by attribution */
.phrase-saved-by {
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 4px;
}

/* Team badge on invite section for free users */
.invite-free-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124,111,255,0.15);
  color: #7c6fff;
  border: 1px solid rgba(124,111,255,0.3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 6px;
}

/* ── ROLES TAB — read-only notice for non-owners ─────────────── */
.roles-readonly-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #a78bfa;
  background: rgba(124,111,255,0.08);
  border: 1px solid rgba(124,111,255,0.2);
  border-radius: 6px;
  padding: 5px 12px;
  margin-bottom: 10px;
}
.criteria-item-readonly {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 7px;
  margin-bottom: 6px;
}
.criteria-name-ro {
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 500;
  flex: 1;
}
.criteria-score-ro {
  font-size: 0.85rem;
  color: var(--green);
  font-weight: 700;
  min-width: 28px;
  text-align: right;
}

/* ── TEAM MEMBER topbar indicator ────────────────────────────── */
.team-member-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(124,111,255,0.12);
  color: #7c6fff;
  border: 1px solid rgba(124,111,255,0.25);
  letter-spacing: 0.03em;
}

#appView.light-mode .roles-readonly-notice {
  background: rgba(124,111,255,0.06);
  color: #6d28d9;
}
#appView.light-mode .criteria-item-readonly {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.07);
}

/* ── WORKFLOW AVATAR INITIALS ─────────────────────────────────── */
.workflow-avatar-initials {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  font-family: var(--display);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* ── EMAILJS SETUP NOTICE (inside invite modal) ───────────────── */
.emailjs-setup-notice {
  display: flex;
  gap: 12px;
  background: rgba(124,111,255,0.07);
  border: 1px solid rgba(124,111,255,0.25);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.emailjs-notice-icon { font-size: 1.4rem; flex-shrink: 0; padding-top: 2px; }
.emailjs-notice-body { flex: 1; min-width: 0; }
.emailjs-notice-title {
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 700;
  color: #a78bfa;
  margin-bottom: 4px;
}
.emailjs-notice-sub {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 10px;
}
.emailjs-link {
  color: #a78bfa;
  text-decoration: underline;
  font-weight: 600;
  margin-left: 4px;
}
.emailjs-setup-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.emailjs-input {
  width: 100%;
  padding: 7px 11px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text);
  font-family: monospace;
  font-size: 0.78rem;
  outline: none;
  transition: border-color 0.15s;
}
.emailjs-input:focus { border-color: #7c6fff; }
.emailjs-input::placeholder { color: var(--muted); font-family: var(--sans); }
.emailjs-save-btn {
  align-self: flex-start;
  margin-top: 2px;
  padding: 7px 18px;
  background: linear-gradient(135deg, #7c6fff, #4c3fe0);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--display);
  cursor: pointer;
  transition: opacity 0.15s;
}
.emailjs-save-btn:hover { opacity: 0.88; }
.emailjs-template-guide {
  margin-top: 10px;
  font-size: 0.75rem;
}
.emailjs-template-guide summary {
  color: #a78bfa;
  cursor: pointer;
  font-weight: 600;
  padding: 3px 0;
  user-select: none;
}
.emailjs-template-body {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.15);
  border-radius: 6px;
  color: var(--muted);
  line-height: 1.6;
}
.emailjs-template-body code {
  background: rgba(124,111,255,0.15);
  color: #c4b5fd;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.76rem;
}
.emailjs-template-body ul { margin: 6px 0 6px 16px; }
.emailjs-template-body li { margin-bottom: 3px; }
.emailjs-template-body p { margin-bottom: 6px; }

/* Light mode overrides */
#appView.light-mode .emailjs-setup-notice {
  background: rgba(124,111,255,0.05);
  border-color: rgba(124,111,255,0.2);
}
#appView.light-mode .emailjs-input {
  background: #fff;
  border-color: #d0d5e8;
  color: #1a1a2e;
}
#appView.light-mode .emailjs-template-body {
  background: rgba(0,0,0,0.04);
  color: #5a6282;
}

/* ── ROLES TAB UPDATES ────────────────────────────────────────── */
.roles-slot-info {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 8px 0 10px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  display: inline-block;
}
.roles-no-invites {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 10px 0 4px;
  font-style: italic;
}
.roles-member-select {
  flex: 1;
  min-width: 0;
}
.role-remove-btn {
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 5px;
  border: 1px solid rgba(220,38,38,0.3);
  background: rgba(220,38,38,0.08);
  color: #f87171;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.role-remove-btn:hover {
  background: rgba(220,38,38,0.18);
  border-color: rgba(220,38,38,0.5);
}

/* Read-only rating value for Report Writers */
.review-rating-value-ro {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--green);
  min-width: 32px;
  text-align: right;
}

/* Role badges — updated colours for 3-role system */
.role-badge-admin        { background: rgba(239,68,68,0.12);  color: #f87171; border-color: rgba(239,68,68,0.3); }
.role-badge-editor       { background: rgba(124,111,255,0.12);color: #a78bfa; border-color: rgba(124,111,255,0.3); }
.role-badge-report-writer{ background: rgba(124,111,255,0.12); color: #7c6fff; border-color: rgba(124,111,255,0.3); }

#appView.light-mode .roles-slot-info {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}

/* ── INVITE LIST UPDATES ─────────────────────────────────────── */
.invite-item-accepted {
  border-color: rgba(124,111,255,0.25) !important;
  background: rgba(124,111,255,0.04) !important;
}
.invite-avatar-joined {
  background: rgba(124,111,255,0.2) !important;
  color: #7c6fff !important;
  border-color: rgba(124,111,255,0.4) !important;
}
.invite-item-joined {
  font-size: 0.7rem;
  color: #7c6fff;
  margin-top: 2px;
}
.invite-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}
.invite-assign-role-btn {
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 5px;
  border: 1px solid rgba(124,111,255,0.4);
  background: rgba(124,111,255,0.12);
  color: #a78bfa;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.invite-assign-role-btn:hover {
  background: rgba(124,111,255,0.22);
}

/* ═══════════════════════════════════════════════════════════════
   WORD-LIKE DOCUMENT EDITOR
   ═══════════════════════════════════════════════════════════════ */

/* Gray canvas — like Word's background */
.pv-doc-body {
  background: #ffffff !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow-y: auto;
  scrollbar-width: none;
}

.pv-doc-body::-webkit-scrollbar { display: none !important; }
#appView.light-mode .pv-doc-body { background: #f8f9fc !important; }

/* White A4 page */
.pv-doc-page {
  background: #ffffff;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 32px 64px 48px;
  box-shadow: none;
  border-radius: 0;
  font-family: Calibri, 'Segoe UI', Arial, sans-serif;
  font-size: 11pt;
  line-height: 1.6;
  color: #000;
  box-sizing: border-box;
}

/* Paragraph elements inside the page */
.pv-doc-page .pv-para {
  display: block !important;
  margin: 0 0 6px !important;
  padding: 2px 4px !important;
  border: 1px solid transparent !important;
  border-radius: 2px !important;
  outline: none !important;
  min-height: 1.4em !important;
  cursor: text !important;
  color: #000 !important;
  font-size: inherit !important;
  font-weight: normal !important;
  background: transparent !important;
  transition: border-color 0.15s, background 0.15s !important;
  position: static !important;
  justify-content: unset !important;
  align-items: unset !important;
  gap: unset !important;
}
.pv-doc-page .pv-para:hover {
  border-color: rgba(37, 99, 235, 0.4) !important;
  background: rgba(37, 99, 235, 0.04) !important;
}
.pv-doc-page .pv-para:focus,
.pv-doc-page .pv-para.pv-active {
  border-color: #7c6fff !important;
  background: rgba(37, 99, 235, 0.05) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}
.pv-doc-page .pv-para.pv-edited {
  border-left: 3px solid #7c6fff !important;
  padding-left: 9px !important;
}

/* Headings */
.pv-doc-page h1.pv-para { font-size: 20pt !important; font-weight: 700 !important; margin: 12px 0 6px !important; color: #1a1a2e !important; }
.pv-doc-page h2.pv-para { font-size: 16pt !important; font-weight: 700 !important; margin: 10px 0 5px !important; color: #1a1a2e !important; }
.pv-doc-page h3.pv-para { font-size: 13pt !important; font-weight: 700 !important; margin: 8px 0 4px !important;  color: #1a1a2e !important; }
.pv-doc-page h4.pv-para { font-size: 12pt !important; font-weight: 700 !important; font-style: italic !important; color: #1a1a2e !important; }
.pv-doc-page h5.pv-para { font-size: 11pt !important; font-weight: 700 !important; color: #1a1a2e !important; }
.pv-doc-page h6.pv-para { font-size: 11pt !important; font-weight: 700 !important; font-style: italic !important; color: #555 !important; }

/* Edit marks */
.pv-doc-page .pv-edit-mark {
  background: rgba(255, 235, 59, 0.5) !important;
  color: #000 !important;
  border-radius: 2px !important;
  padding: 0 1px !important;
}

/* Pasted table block */
.pv-doc-page .pv-table-paste {
  background: rgba(0,0,0,0.03) !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  margin: 8px 0 !important;
}

/* Selection highlight */
.pv-doc-page ::selection {
  background: rgba(37, 99, 235, 0.25) !important;
  color: #000 !important;
}

/* ── Document formatting toolbar ──────────────────────────── */
.pv-doc-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 8px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  flex-wrap: nowrap;
  flex-shrink: 0;
  overflow-x: auto;
  height: 32px;
}
.pv-doc-toolbar::-webkit-scrollbar { display: none; }
.pv-tb-btn {
  padding: 2px 6px;
  min-width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #0f1117;
  transition: all 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pv-tb-btn:hover { background: #e5e7eb; border-color: #d1d5db; }
.pv-tb-btn:active { background: #dbeafe; border-color: #93c5fd; color: #4c3fe0; }
.pv-tb-select {
  height: 24px;
  padding: 0 3px;
  font-size: 11px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  color: #0f1117;
  cursor: pointer;
  outline: none;
}
.pv-tb-size { width: 56px; }
.pv-toolbar-sep {
  width: 1px;
  height: 14px;
  background: #d1d5db;
  margin: 0 3px;
  flex-shrink: 0;
}

/* ── Responsive page ──────────────────────────────────────── */
@media (max-width: 860px) {
  .pv-doc-page { padding: 32px 24px 48px !important; }
  .pv-toolbar-sep.hide-mobile,
  .pv-toolbar-group.hide-mobile { display: none !important; }
}
@media (max-width: 600px) {
  .pv-doc-page { padding: 24px 16px 40px !important; }
  .pv-doc-toolbar { padding: 4px 8px; gap: 2px; }
}

/* ═══════════════════════════════════════════════════════════════
   EXCEL TABLE EDITOR IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════ */

.xl-col-header {
  background: #e8eef8 !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  cursor: text !important;
  color: #1a1a2e !important;
}
.xl-col-header:focus {
  outline: 2px solid rgba(124,111,255,0.7) !important;
  background: rgba(124,111,255,0.1) !important;
}
.xl-data-row td[contenteditable] { cursor: text; }
.xl-data-row td[contenteditable]:empty::before {
  content: attr(placeholder);
  color: #aaa;
  pointer-events: none;
}

/* Copy to Doc Editor button */
.xl-copy-to-doc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 7px 16px;
  background: linear-gradient(135deg, #7c6fff, #4c3fe0);
  color: white;
  border: none;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--display);
  cursor: pointer;
  transition: opacity 0.15s;
}
.xl-copy-to-doc-btn:hover { opacity: 0.88; }

/* ═══════════════════════════════════════════════════════════════
   3-COLUMN EDITOR LAYOUT  (BetterTasks-inspired)
   Left nav (sidebar) | Middle doc editor | Right voice panel
   ═══════════════════════════════════════════════════════════════ */

/* ── Editor tab panel: row layout ── */
#tabPanel_editor {
  height: 100% !important;
  overflow: visible !important;
  gap: 10px;
}

/* ── Middle column: document editor ── */
.editor-main-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: visible; /* must be visible so toolbar dropdowns are not clipped */
  background: var(--bg, #0a0c14);
  border-right: none;
}

/* Sub-tab bar */
.editor-subtabs-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 12px;
  height: 42px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.01);
}
.editor-subtabs-spacer { flex: 1; }
.editor-subtabs-bar .editor-subtab {
  padding: 0 16px;
  height: 42px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255,255,255,0.45);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.editor-subtabs-bar .editor-subtab:hover { color: rgba(255,255,255,0.75); }
.editor-subtabs-bar .editor-subtab.active { color: #a89fff; border-bottom-color: #7c6fff; }

/* ── Right column: permanent voice panel ── */
.editor-voice-panel {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #0a0c14;
  border-left: none;
  margin-left: 0;
  overflow: hidden;
  /* Remove all slide-up drawer styles */
  position: static !important;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-top: none !important;
  max-height: none !important;
}

/* Voice panel header */
.voice-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: 42px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
}
.voice-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
}
.voice-panel-icon { font-size: 1rem; }
.voice-panel-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Voice panel body */
.voice-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.voice-panel-body::-webkit-scrollbar { width: 4px; }
.voice-panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* Idle hint */
.vp-idle-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 16px;
  text-align: center;
  color: rgba(255,255,255,0.25);
  font-size: 0.78rem;
  line-height: 1.5;
}
.vp-idle-icon { font-size: 1.8rem; opacity: 0.4; }

/* Voice status card */
.vp-status-label {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #a89fff;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

/* Waveform */
.vp-waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 40px;
  margin: 0 auto 14px;
}
.vp-bar {
  display: inline-block;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #a89fff, #7c6fff);
  height: 8px;
  transform-origin: center bottom;
  animation: vpBarIdle 1.4s ease-in-out infinite;
}
.vp-waveform.active .vp-bar {
  animation: vpBarActive 0.5s ease-in-out infinite;
}
.vp-bar:nth-child(1) { animation-delay: 0.0s; }
.vp-bar:nth-child(2) { animation-delay: 0.1s; }
.vp-bar:nth-child(3) { animation-delay: 0.2s; }
.vp-bar:nth-child(4) { animation-delay: 0.05s; }
.vp-bar:nth-child(5) { animation-delay: 0.15s; }
.vp-bar:nth-child(6) { animation-delay: 0.25s; }
.vp-bar:nth-child(7) { animation-delay: 0.1s; }
.vp-bar:nth-child(8) { animation-delay: 0.2s; }
@keyframes vpBarIdle {
  0%, 100% { height: 6px;  opacity: 0.3; }
  50%       { height: 14px; opacity: 0.6; }
}
@keyframes vpBarActive {
  0%, 100% { height: 8px;  }
  50%       { height: 32px; }
}

/* Timer row */
.vp-timer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}
.vp-timer-icon { font-size: 0.9rem; opacity: 0.5; }
.vp-timer-display {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #e2e8f0;
  letter-spacing: 0.05em;
}
.vp-timer-display.urgent { color: #f87171; animation: vpTimerUrgent 1s ease infinite; }
@keyframes vpTimerUrgent { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
.vp-timer-reset {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: #94a3b8;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s;
}
.vp-timer-reset:hover { background: rgba(255,255,255,0.12); color: #e2e8f0; }

/* Live transcript */
.vp-live-transcript {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.8rem;
  color: #c8d6e5;
  line-height: 1.5;
  min-height: 48px;
  max-height: 100px;
  overflow-y: auto;
}
.vp-live-transcript .interim { color: rgba(168,159,255,0.6); font-style: italic; }

/* ── LINE-SNAPPED VOICE TOOLBAR (Jenni.ai style) ────────────────────────── */
#lineToolbar {
  position: fixed;
  z-index: 9995;
  display: none;           /* JS shows it */
  align-items: center;
  gap: 2px;                /* tighter gap between icons */
  transform: translateY(-50%);
  pointer-events: all;
  transition: opacity 0.15s ease;
  opacity: 0;
}
#lineToolbar.lt-visible {
  display: flex;
  opacity: 1;
}
#lineToolbar.lt-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Individual toolbar buttons */
.lt-btn {
  width: 20px;             /* smaller icons */
  height: 20px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  transition: transform 0.12s ease, opacity 0.12s;
  position: relative;
  outline: none;
  flex-shrink: 0;
  opacity: 0.75;           /* slightly muted so they don't distract */
}
.lt-btn:hover  { transform: scale(1.15); opacity: 1; }
.lt-btn:active { transform: scale(0.88); }

/* Tooltip — only on hover, small */
.lt-btn::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 5px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15,17,23,0.92);
  color: #e2e8f0;
  font-size: 0.62rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 10000;
}
.lt-btn:hover::after { opacity: 1; }

/* Mic button */
.lt-btn-mic {
  width: 24px;             /* slightly larger than the others — still compact */
  height: 24px;
  background: #7c6fff;
  color: #fff;
  box-shadow: 0 1px 8px rgba(124,111,255,0.45);
  opacity: 1 !important;   /* always full opacity for mic */
}
.lt-btn-mic:hover {
  background: #6b5ce7;
  box-shadow: 0 2px 12px rgba(124,111,255,0.65);
}
.lt-btn-mic.lt-recording {
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,0.5);
  animation: ltMicPulse 1.2s ease-out infinite;
}
@keyframes ltMicPulse {
  0%   { box-shadow: 0 0 0 0   rgba(239,68,68,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(239,68,68,0);   }
  100% { box-shadow: 0 0 0 0   rgba(239,68,68,0);    }
}
.lt-mic-svg { width: 12px; height: 12px; color: #fff; }

/* Ripple ring on mic */
.lt-mic-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(239,68,68,0.4);
  opacity: 0;
  pointer-events: none;
}
.lt-btn-mic.lt-recording .lt-mic-ring {
  animation: ltRingExpand 1.2s ease-out infinite;
}
@keyframes ltRingExpand {
  0%   { inset:-3px;  opacity:0.7; }
  100% { inset:-12px; opacity:0; }
}

/* Delete, undo, photos buttons */
.lt-btn-del, .lt-btn-undo, .lt-btn-photos {
  background: rgba(20,22,34,0.90);
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
}
.lt-btn-del:hover    { background: rgba(239,68,68,0.85);   color:#fff; border-color: transparent; }
.lt-btn-undo:hover   { background: rgba(124,111,255,0.85); color:#fff; border-color: transparent; }
.lt-btn-photos:hover { background: rgba(52,211,153,0.85);  color:#fff; border-color: transparent; }

/* Photos badge — shows count when images are loaded */
.lt-btn-photos.lt-has-photos::before {
  content: attr(data-count);
  position: absolute;
  top: -4px;
  right: -4px;
  background: #34d399;
  color: #064e3b;
  font-size: 9px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  line-height: 1;
}

/* ── UPDATED VOICE PANEL SIDEBAR CONTROLS ── */
.vp-controls-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 12px 14px;
  background: rgba(124,111,255,0.06);
  border: 1px solid rgba(124,111,255,0.15);
  border-radius: 14px;
  margin-bottom: 4px;
}

/* Big mic button in the sidebar */
.vp-main-mic {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: #7c6fff;
  color: #fff;
  cursor: pointer;
  display: none;       /* hidden on desktop — shown on mobile/tablet via @media */
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 20px rgba(124,111,255,0.45);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  flex-shrink: 0;
  outline: none;
}
.vp-main-mic:hover {
  background: #6b5ce7;
  box-shadow: 0 6px 28px rgba(124,111,255,0.65);
  transform: scale(1.05);
}
.vp-main-mic:active { transform: scale(0.95); }
.vp-main-mic.recording {
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,0.5);
  animation: vpMicPulse 1.2s ease-out infinite;
}
@keyframes vpMicPulse {
  0%   { box-shadow: 0 0 0 0   rgba(239,68,68,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(239,68,68,0);   }
  100% { box-shadow: 0 0 0 0   rgba(239,68,68,0);    }
}
.vp-mic-svg { width: 30px; height: 30px; color: #fff; }

/* Ripple ring on sidebar mic */
.vp-mic-ripple {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(239,68,68,0.35);
  opacity: 0;
  pointer-events: none;
}
.vp-main-mic.recording .vp-mic-ripple {
  animation: vpRipple 1.2s ease-out infinite;
}
@keyframes vpRipple {
  0%   { inset:-6px;  opacity:0.6; }
  100% { inset:-20px; opacity:0; }
}

/* Mic row inside active state */
.voice-panel-mic-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.voice-panel-mic-btn { flex-shrink: 0; }
.voice-panel-status  { flex: 1; min-width: 0; }

/* Format bar (compact in right panel) */
.voice-fmt-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
}

/* Submit area at bottom of voice panel */
.voice-panel-submit {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Light mode overrides ── */
#appView.light-mode .editor-voice-panel {
  background: #f8f9fc;
  border-left-color: rgba(0,0,0,0.08);
}
#appView.light-mode .voice-panel-header {
  background: #fff;
  border-bottom-color: rgba(0,0,0,0.08);
}
#appView.light-mode .voice-panel-title { color: #0f1117; }
#appView.light-mode .editor-main-col { background: #f0f2f8; }
#appView.light-mode .editor-subtabs-bar { border-bottom-color: rgba(0,0,0,0.08); }
#appView.light-mode .editor-subtabs-bar .editor-subtab { color: rgba(0,0,0,0.45); }
#appView.light-mode .editor-subtabs-bar .editor-subtab.active { color: #4c3fe0; border-bottom-color: #4c3fe0; }

/* ── Responsive: collapse voice panel on small screens ── */
@media (max-width: 900px) {
  .editor-voice-panel {
    position: absolute !important;
    top: 0; right: 0; bottom: 0;
    z-index: 30;
    width: 280px;
    transform: translateX(100%) !important;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: -4px 0 24px rgba(0,0,0,0.4) !important;
  }
  .editor-voice-panel.mobile-open {
    transform: translateX(0) !important;
  }
  #tabPanel_editor { position: relative; }
  .editor-main-col { width: 100%; }
}
@media (max-width: 600px) {
  .editor-voice-panel { width: 100%; }
}

/* ── Hide old voice drawer styles that no longer apply ── */
/* The #voiceDrawer is now .editor-voice-panel — override all slide-up rules */
#voiceDrawer.voice-drawer {
  position: static !important;
  transform: none !important;
  border-radius: 0 !important;
  border-top: none !important;
  max-height: none !important;
  box-shadow: none !important;
}

/* ── Doc panel on white: override dark-theme colours ── */
.pv-doc-header { color: #0f1117 !important; }
.pv-doc-header-left #pvDocName { color: #0f1117 !important; }
.pv-doc-hint { color: #6b7280 !important; }
.pv-remove-doc-btn { color: #6b7280 !important; border-color: rgba(0,0,0,0.12) !important; }
.pv-remove-doc-btn:hover { color: #ef4444 !important; background: rgba(239,68,68,0.07) !important; }
.p-download-btn-sm { background: rgba(0,0,0,0.05) !important; color: #0f1117 !important; border-color: rgba(0,0,0,0.12) !important; }
.p-download-btn-sm:hover { background: rgba(124,111,255,0.1) !important; color: #4c3fe0 !important; }
/* Doc toolbar on white */
.pv-doc-toolbar { background: #f8f9fc !important; border-bottom-color: #e5e7eb !important; }

/* ── Topbar 3-section layout — light mode ── */
#appView.light-mode .app-topbar-logo {
  background: #fff;
  border-right: none;
}
#appView.light-mode .app-logo-img {
  opacity: 1;
}
#appView.light-mode .app-topbar-middle { background: transparent; }
#appView.light-mode .app-topbar-right  { background: transparent; }

/* Responsive: compress logo section on small screens */
@media (max-width: 700px) {
  .app-topbar-logo   { width: 52px; }
  .app-topbar-right  { width: auto; min-width: 120px; }
  .app-topbar-gap-right { width: 4px; }
}

/* ── Pricing page nav logo ── */
.nav-logo-img {
  height: 28px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* ═══ QUILL EDITOR ════════════════════════════════════════════ */
/* ══ QUILL EDITOR — clean reset ════════════════════════════ */

/* previewMode: flex column, overflow visible for dropdowns */
#previewMode {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: visible;
  position: relative;
}

/* Toolbar wrapper */
#quillToolbar {
  flex-shrink: 0;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0;
  position: relative;
  z-index: 50;
  overflow: visible;
}

/* Quill-generated toolbar */
.ql-toolbar.ql-snow {
  border: none !important;
  padding: 6px 8px !important;
  background: #ffffff !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 50 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px !important;
}

/* Toolbar button groups */
.ql-toolbar.ql-snow .ql-formats {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 6px !important;
}

/* Toolbar buttons */
.ql-toolbar.ql-snow button {
  width: 28px !important;
  height: 28px !important;
  padding: 3px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #374151 !important;
}
.ql-toolbar.ql-snow button:hover {
  background: #f3f4f6 !important;
  color: #111 !important;
}
.ql-toolbar.ql-snow button.ql-active {
  background: #e5e7eb !important;
  color: #111 !important;
}
.ql-toolbar.ql-snow button .ql-stroke { stroke: #374151 !important; }
.ql-toolbar.ql-snow button:hover .ql-stroke { stroke: #111 !important; }
.ql-toolbar.ql-snow button .ql-fill { fill: #374151 !important; }

/* Picker labels */
.ql-toolbar.ql-snow .ql-picker-label {
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  background: #fff !important;
}
.ql-toolbar.ql-snow .ql-picker-label .ql-stroke { stroke: #374151 !important; }

/* Dropdown options — MUST have high z-index and position:absolute */
.ql-toolbar.ql-snow .ql-picker-options {
  position: absolute !important;
  z-index: 9999 !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
  padding: 4px !important;
  min-width: 80px !important;
  margin-top: 2px !important;
}
.ql-toolbar.ql-snow .ql-picker-options .ql-picker-item {
  color: #111111 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  display: block !important;
}
.ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover,
.ql-toolbar.ql-snow .ql-picker-options .ql-picker-item.ql-selected {
  background: #f3f4f6 !important;
  color: #111 !important;
}

/* Quill container */
.ql-container.ql-snow {
  border: none !important;
  flex: 1 !important;
  min-height: 0 !important;
  font-family: Calibri, 'Segoe UI', Arial, sans-serif !important;
  font-size: 11pt !important;
  overflow-y: auto !important;
  background: #ffffff !important;
}

/* Editor writing area */
.ql-editor {
  min-height: 100% !important;
  /* Responsive padding: generous on desktop, compact on mobile */
  padding: 40px clamp(16px, 6vw, 72px) !important;
  font-size: clamp(10pt, 1.5vw, 11pt) !important;
  line-height: 1.7 !important;
  color: #111111 !important;
  caret-color: #111111 !important;
  background: #ffffff !important;
  outline: none !important;
  isolation: isolate;
  /* Paper feel — max width like an A4 page, centred */
  max-width: 860px !important;
  margin: 0 auto !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.08) !important;
}
.ql-editor * {
  color: unset;
}
.ql-editor p, .ql-editor li, .ql-editor td, .ql-editor th,
.ql-editor h1, .ql-editor h2, .ql-editor h3,
.ql-editor h4, .ql-editor h5, .ql-editor h6 {
  color: #111111 !important;
}
.ql-editor.ql-blank::before {
  color: #9ca3af !important;
  font-style: italic !important;
  left: clamp(16px, 6vw, 72px) !important;
}

/* Table styles */
.ql-editor table {
  border-collapse: collapse !important;
  margin: 8px 0 !important;
}
.ql-editor td, .ql-editor th {
  border: 1px solid #000000 !important;
  padding: 6px 10px !important;
  background: #ffffff !important;
  color: #111111 !important;
  min-width: 60px !important;
  position: relative !important;
}
.ql-editor th { font-weight: 700 !important; background: #f5f5f5 !important; }
.ql-editor img { max-width: 100%; cursor: pointer; }

/* Custom download button */
.ql-custom-btn {
  background: rgba(124,111,255,0.1);
  color: #7c6fff;
  border: 1px solid rgba(124,111,255,0.3) !important;
  border-radius: 5px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 4px;
}
.ql-custom-btn:hover { background: rgba(124,111,255,0.2); }

/* ═══ QUILL RULER ═════════════════════════════════════════════ */
#quillRuler {
  flex-shrink: 0;
  background: #1a1d2e;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  border-top: 1px solid rgba(255,255,255,0.06);
  height: 28px;
  position: relative;
  overflow: visible;
  user-select: none;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.ruler-track {
  position: relative;
  height: 100%;
  margin: 0 2px;
}
.ruler-scale {
  position: absolute;
  inset: 0;
}
.ruler-mark {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 6px;
  background: rgba(255,255,255,0.25);
  transform: translateX(-50%);
}
.ruler-major {
  height: 12px;
  background: rgba(255,255,255,0.45);
}
.ruler-major::after {
  content: attr(data-val);
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
}
/* Margin drag handles */
.ruler-margin-left,
.ruler-margin-right {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 12px;
  cursor: ew-resize;
  background: rgba(124,111,255,0.45);
  border: 2px solid rgba(124,111,255,0.8);
  border-radius: 3px;
  z-index: 3;
  transform: translateX(-50%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.ruler-margin-right { transform: translateX(50%); }
.ruler-margin-left::after,
.ruler-margin-right::after {
  content: '⇔';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 8px;
  color: #fff;
  pointer-events: none;
}
.ruler-margin-left:hover,
.ruler-margin-right:hover {
  background: rgba(124,111,255,0.75);
  border-color: #a89fff;
}

/* ═══ IMAGE INTERACTION ════════════════════════════════════════ */

/* ── #quillEditor sizing (Quill puts .ql-container inside this) ── */
#quillEditor {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #e8eaf0; /* grey page background so white paper stands out */
}
/* .ql-container scrolls and provides the page-like scroll area */
#quillEditor .ql-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: #e8eaf0;
  padding: 20px 0 40px;
}
#quillEditor img {
  max-width: 100%;
  height: auto;
  cursor: pointer;
  transition: outline 0.1s;
}
#quillEditor img:hover { outline: 1px dashed rgba(124,111,255,0.5); }

/* ═══ TABLE PASTE — style pasted tables ══════════════════════ */
#quillEditor table {
  border-collapse: collapse !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 8px 0 !important;
  table-layout: auto !important;
  display: table !important;
}
#quillEditor td,
#quillEditor th {
  border: 1px solid #aaa !important;
  padding: 6px 10px !important;
  vertical-align: top !important;
  min-width: 60px !important;
  color: #111 !important;
  background: #fff !important;
  font-size: 11pt !important;
}
#quillEditor th {
  background: #f8f9fc !important;
  font-weight: 700 !important;
}
#quillEditor tr:nth-child(even) td { background: #fafafa !important; }

/* ── Table: black borders white bg ── */
#quillEditor table { border-collapse: collapse !important; }
#quillEditor td, #quillEditor th { border: 1px solid #000 !important; background: #ffffff !important; color: #111 !important; }
#quillEditor th { font-weight: 700 !important; background: #f5f5f5 !important; }


/* Editor tab panel needs overflow:visible so toolbar dropdowns work */
#tabPanel_editor.active {
  overflow: visible !important;
}
#tabPanel_editor.active .editor-main-col {
  overflow: visible !important;
}

/* ══ VIRTUAL ASSESSMENTS ══════════════════════════════════════ */
.assess-new-btn {
  background: rgba(124,111,255,0.15) !important;
  color: #a89fff !important;
  border: 1px solid rgba(124,111,255,0.3) !important;
  padding: 7px 14px !important;
  border-radius: 7px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  cursor: pointer;
}
.assess-new-btn:hover { background: rgba(124,111,255,0.25) !important; }

.assess-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.assess-card-top  { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.assess-card-title { font-weight: 600; font-size: 0.92rem; color: #e2e6f0; }
.assess-card-date  { font-size: 0.75rem; color: rgba(255,255,255,0.35); white-space: nowrap; }
.assess-card-desc  { font-size: 0.82rem; color: rgba(255,255,255,0.55); }
.assess-card-steps { display: flex; flex-wrap: wrap; gap: 5px; }
.assess-card-step  { font-size: 0.72rem; background: rgba(255,255,255,0.06); border-radius: 4px; padding: 2px 7px; color: rgba(255,255,255,0.6); }
.assess-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.assess-card-link  {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.75rem;
  color: #a89fff;
  cursor: pointer;
}
.assess-share-btn {
  background: rgba(124,111,255,0.12);
  border: 1px solid rgba(124,111,255,0.25);
  color: #a89fff;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.assess-share-btn:hover { background: rgba(124,111,255,0.22); }
.assess-share-wa {
  background: rgba(37,211,102,0.1) !important;
  border-color: rgba(37,211,102,0.25) !important;
  color: #25d366 !important;
}
.assess-share-wa:hover { background: rgba(37,211,102,0.2) !important; }
.assess-del-btn {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
  color: #f87171;
  border-radius: 6px;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 0.82rem;
}
.assess-del-btn:hover { background: rgba(239,68,68,0.2); }

/* Step items in creation modal */
.assess-step-item {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  padding: 8px 10px;
}
.assess-step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(124,111,255,0.2);
  color: #a89fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.assess-step-text { flex: 1; font-size: 0.85rem; color: #e2e6f0; }
.assess-step-del  {
  background: rgba(239,68,68,0.1); border: none;
  color: #f87171; border-radius: 4px;
  padding: 2px 6px; cursor: pointer; font-size: 0.8rem;
}

/* ══ PROJECTS SYSTEM ══════════════════════════════════════════ */
.proj-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.03);
  transition: border-color 0.15s;
}
.proj-list-item:hover    { border-color: rgba(124,111,255,0.3); }
.proj-list-item.proj-active { border-color: rgba(124,111,255,0.5); background: rgba(124,111,255,0.06); }
.proj-item-name  { font-weight: 600; font-size: 0.9rem; color: #e2e6f0; }
.proj-item-meta  { font-size: 0.78rem; color: rgba(255,255,255,0.45); margin-top: 2px; }
.proj-item-desc  { font-size: 0.78rem; color: rgba(255,255,255,0.4); margin-top: 3px; }
.proj-item-date  { font-size: 0.72rem; color: rgba(255,255,255,0.28); margin-top: 4px; }
.proj-current-tag {
  font-size: 0.65rem; background: rgba(124,111,255,0.2); color: #a89fff;
  border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: middle;
}
.proj-btn {
  padding: 5px 10px; border-radius: 6px; border: none;
  font-size: 0.75rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.proj-btn-open { background: rgba(124,111,255,0.15); color: #a89fff; }
.proj-btn-open:hover { background: rgba(124,111,255,0.25); }
.proj-btn-save { background: rgba(124,111,255,0.15); color: #a89fff; }
.proj-btn-save:hover { background: rgba(124,111,255,0.25); }
.proj-btn-del  { background: rgba(239,68,68,0.1); color: #f87171; }
.proj-btn-del:hover { background: rgba(239,68,68,0.2); }

/* ── Editor action buttons in subtabs bar ── */
.editor-action-btn {
  flex-shrink: 0;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.65);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  margin-left: 4px;
}
.editor-action-btn:hover {
  background: rgba(255,255,255,0.13);
  color: #fff;
}
#appView.light-mode .editor-action-btn {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.1);
  color: #374151;
}
#appView.light-mode .editor-action-btn:hover {
  background: rgba(0,0,0,0.1);
  color: #111;
}

/* ══ SHARED MODAL SYSTEM ══════════════════════════════════════
   Covers: Assessment modal, Project modals, any future modals   */

/* Backdrop */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.modal-backdrop.open { opacity: 1 !important; pointer-events: all !important; }

/* Card */
.modal-card {
  background: #1a1c2e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn 0.25s ease;
}
@keyframes modalIn {
  from { transform: translateY(16px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* Header */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: #e2e6f0;
  margin: 0;
}

/* Close button */
.modal-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  border-radius: 6px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 0.85rem;
  transition: all 0.15s;
  flex-shrink: 0;
}
.modal-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* Body */
.modal-body { padding: 20px 22px; }

/* Labels */
.modal-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Inputs */
.modal-input {
  display: block;
  width: 100%;
  padding: 10px 13px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #e2e6f0;
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  resize: vertical;
}
.modal-input::placeholder { color: rgba(255,255,255,0.25); }
.modal-input:focus {
  border-color: rgba(124,111,255,0.55);
  box-shadow: 0 0 0 3px rgba(124,111,255,0.12);
  background: rgba(255,255,255,0.09);
}

/* Buttons */
.modal-btn-primary {
  padding: 10px 20px;
  background: #7c6fff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.modal-btn-primary:hover { background: #6355e0; }

.modal-btn-secondary {
  padding: 10px 20px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.modal-btn-secondary:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Assessment step items */
.assess-step-item {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  padding: 9px 11px;
}
.assess-step-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(124,111,255,0.2); color: #a89fff;
  font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.assess-step-text { flex: 1; font-size: 0.85rem; color: #e2e6f0; }
.assess-step-del {
  background: rgba(239,68,68,0.1); border: none;
  color: #f87171; border-radius: 4px;
  padding: 2px 7px; cursor: pointer; font-size: 0.8rem;
}

/* Light mode modals */
#appView.light-mode .modal-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}
#appView.light-mode .modal-header { border-bottom-color: #e5e7eb !important; }
#appView.light-mode .modal-title { color: #111 !important; }
#appView.light-mode .modal-close { background: #f3f4f6 !important; border-color: #e5e7eb !important; color: #374151 !important; }
#appView.light-mode .modal-close:hover { background: #e5e7eb !important; color: #111 !important; }
#appView.light-mode .modal-label { color: #6b7280 !important; }
#appView.light-mode .modal-input {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111 !important;
}
#appView.light-mode .modal-input::placeholder { color: #9ca3af !important; }
#appView.light-mode .modal-input:focus { border-color: #7c6fff !important; }
#appView.light-mode .modal-btn-secondary {
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}

/* Project export button */
.proj-btn-export { background: rgba(59,130,246,0.15); color: #93c5fd; }
.proj-btn-export:hover { background: rgba(59,130,246,0.25); }

/* ── OCR Data Extractor ──────────────────────────────────────── */
#ocrDropZone:hover,
#ocrDropZone.drag-over {
  border-color: rgba(124,111,255,0.8);
  background: rgba(124,111,255,0.09);
}
#ocrDropZone.drag-over { transform: scale(1.01); }

.ocr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  color: #c8d6e5;
}
.ocr-table thead tr {
  background: rgba(124,111,255,0.15);
}
.ocr-table th {
  padding: 9px 12px;
  text-align: left;
  font-weight: 600;
  color: #a89fff;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  white-space: nowrap;
  min-width: 80px;
}
.ocr-table th[contenteditable]:hover,
.ocr-table td[contenteditable]:hover {
  background: rgba(124,111,255,0.08);
  outline: none;
}
.ocr-table th[contenteditable]:focus,
.ocr-table td[contenteditable]:focus {
  background: rgba(124,111,255,0.15);
  outline: 1px solid rgba(124,111,255,0.5);
  outline-offset: -1px;
}
.ocr-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: top;
}
.ocr-table tbody tr:hover td {
  background: rgba(255,255,255,0.02);
}
.ocr-row-num {
  width: 36px;
  text-align: center;
  color: #4a5568;
  font-size: 0.72rem;
  user-select: none;
}
.ocr-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  opacity: 0.4;
  transition: opacity 0.15s;
  padding: 2px 4px;
}
.ocr-del-btn:hover { opacity: 1; }
.ocr-empty {
  padding: 32px 20px;
  text-align: center;
  color: #4a5568;
  font-size: 0.82rem;
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   TOOLS DROPDOWN + TOOL PAGES
   ══════════════════════════════════════════════════════════════ */

/* ── Tools dropdown ── */
.tools-dropdown-wrap {
  position: relative;
  display: inline-flex;
}
.tools-dropdown-btn { margin-left: 4px; }
.tools-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #1a1d2e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  min-width: 200px;
  z-index: 500;
  overflow: hidden;
  padding: 4px;
}
.tools-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  transition: background 0.14s;
  color: #e2e8f0;
}
.tools-dropdown-item:hover { background: rgba(124,111,255,0.12); }
.tools-item-icon { font-size: 1.2rem; flex-shrink: 0; }
.tools-item-title { font-size: 0.82rem; font-weight: 600; color: #e2e8f0; }
.tools-item-desc  { font-size: 0.72rem; color: #6b7fa3; margin-top: 1px; }

/* ── Tool page overlay ── */
#toolPageOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #0a0c14;
  flex-direction: column;
  overflow-y: auto;
}
.tool-page-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  height: 52px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: sticky;
  top: 0;
  z-index: 10;
}
.tool-back-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: #94a3b8;
  border-radius: 7px;
  padding: 5px 13px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
  white-space: nowrap;
}
.tool-back-btn:hover { background: rgba(255,255,255,0.12); color: #e2e8f0; }
.tool-page-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.01em;
}

/* ── Tool page body ── */
.tool-page { width: 100%; }
.tool-page-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Hero */
.tool-hero { text-align: center; padding-bottom: 8px; }
.tool-hero-icon { font-size: 2.8rem; margin-bottom: 10px; }
.tool-hero-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #e2e8f0;
  margin: 0 0 8px;
}
.tool-hero-desc {
  font-size: 0.88rem;
  color: #6b7fa3;
  line-height: 1.6;
  margin: 0;
}

/* Drop zone */
.tool-dropzone {
  border: 2px dashed rgba(124,111,255,0.35);
  border-radius: 14px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  background: rgba(124,111,255,0.04);
  transition: all 0.18s;
}
.tool-dropzone:hover,
.tool-dropzone.drag-over {
  border-color: rgba(124,111,255,0.7);
  background: rgba(124,111,255,0.09);
}
.tool-dz-icon  { font-size: 2rem; margin-bottom: 10px; }
.tool-dz-title { font-size: 0.95rem; font-weight: 600; color: #c8d6e5; margin-bottom: 4px; }
.tool-dz-link  { color: #a89fff; text-decoration: underline; }
.tool-dz-sub   { font-size: 0.76rem; color: #4a5568; }

/* Options row */
.tool-options-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 12px 16px;
}
.tool-opt-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
  display: flex;
  gap: 8px;
  align-items: center;
}
.tool-opt-val { color: #a89fff; min-width: 36px; }
.tool-range {
  flex: 1;
  min-width: 120px;
  accent-color: #7c6fff;
}
.tool-opt-hint { font-size: 0.72rem; color: #4a5568; }

/* File list */
.tool-file-list { display: flex; flex-direction: column; gap: 6px; }
.tool-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 0.82rem;
  transition: background 0.14s;
}
.tool-file-item.dragging { opacity: 0.4; }
.tool-file-item.drag-target { border-color: #7c6fff; background: rgba(124,111,255,0.1); }
.tool-file-drag-handle {
  color: #4a5568;
  cursor: grab;
  font-size: 1rem;
  flex-shrink: 0;
}
.tool-file-drag-handle:active { cursor: grabbing; }
.tool-file-order {
  width: 20px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #4a5568;
  flex-shrink: 0;
}
.tool-file-icon  { flex-shrink: 0; font-size: 1.1rem; }
.tool-file-name  { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c8d6e5; }
.tool-file-size  { flex-shrink: 0; color: #4a5568; font-size: 0.72rem; }
.tool-file-remove {
  background: none; border: none; cursor: pointer;
  color: #4a5568; font-size: 0.85rem; padding: 2px 4px; flex-shrink: 0;
  transition: color 0.14s;
}
.tool-file-remove:hover { color: #f87171; }

/* Action bar */
.tool-action-bar {
  display: flex;
  gap: 10px;
  align-items: center;
}
.tool-btn-primary {
  background: linear-gradient(135deg, #7c6fff, #5a4fd4);
  border: none;
  color: #fff;
  border-radius: 9px;
  padding: 10px 22px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.01em;
}
.tool-btn-primary:hover  { background: linear-gradient(135deg, #9585ff, #6b5fe4); transform: translateY(-1px); }
.tool-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.tool-btn-ghost {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #94a3b8;
  border-radius: 9px;
  padding: 9px 18px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.14s;
}
.tool-btn-ghost:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }

/* Progress */
.tool-progress-label {
  font-size: 0.78rem;
  color: #a89fff;
  font-weight: 500;
  margin-bottom: 6px;
}
.tool-progress-track {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.tool-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #7c6fff, #a89fff);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Results */
.tool-results { display: flex; flex-direction: column; gap: 8px; }
.tool-results-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #6b7fa3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.tool-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 9px;
  padding: 12px 14px;
  flex-wrap: wrap;
}
.tool-result-item.tool-result-error { border-color: rgba(248,113,113,0.2); background: rgba(248,113,113,0.05); }
.tool-result-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tool-result-name  { font-size: 0.82rem; font-weight: 600; color: #c8d6e5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-result-saving { font-size: 0.75rem; color: #6b7fa3; }
.tool-result-saving.good { color: #34d399; }
.tool-result-sizes  { font-size: 0.72rem; color: #4a5568; }
.tool-result-err    { font-size: 0.75rem; color: #f87171; }
.tool-btn-download {
  background: rgba(52,211,153,0.15);
  border: 1px solid rgba(52,211,153,0.3);
  color: #34d399;
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
  transition: all 0.14s;
  white-space: nowrap;
}
.tool-btn-download:hover { background: rgba(52,211,153,0.25); }

/* Download area */
.tool-download-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(52,211,153,0.07);
  border: 1px solid rgba(52,211,153,0.2);
  border-radius: 12px;
  padding: 16px 20px;
  flex-wrap: wrap;
}
.tool-download-info { display: flex; align-items: center; gap: 12px; }
.tool-download-icon { font-size: 1.5rem; }
.tool-download-title { font-size: 0.88rem; font-weight: 700; color: #e2e8f0; }
.tool-download-size  { font-size: 0.75rem; color: #6b7fa3; margin-top: 2px; }
.tool-btn-download-big {
  padding: 10px 24px;
  font-size: 0.88rem;
}

/* Responsive */
@media (max-width: 600px) {
  .tool-page-inner { padding: 24px 16px 40px; }
  .tool-result-item { flex-direction: column; align-items: flex-start; }
  .tool-download-area { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════
   TOOLS DROPDOWN
   ══════════════════════════════════════════════════════════════ */
.tools-dropdown-wrap {
  position: relative;
  display: inline-block;
  margin-left: 4px;
}
.tools-dropdown-btn {
  background: linear-gradient(135deg, rgba(124,111,255,0.2), rgba(90,79,212,0.2)) !important;
  border-color: rgba(124,111,255,0.35) !important;
  color: #a89fff !important;
}
.tools-dropdown-btn:hover {
  background: linear-gradient(135deg, rgba(124,111,255,0.35), rgba(90,79,212,0.35)) !important;
  color: #d4cfff !important;
}
.tools-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #1a1d2e;
  border: 1px solid rgba(124,111,255,0.3);
  border-radius: 12px;
  padding: 6px;
  min-width: 220px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 9999;
}
.tools-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  color: #c8d6e5;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.tools-menu-item:hover {
  background: rgba(124,111,255,0.12);
}
.tools-menu-icon { font-size: 1.4rem; flex-shrink: 0; }
.tools-menu-label { font-size: 0.85rem; font-weight: 600; color: #e2e8f0; }
.tools-menu-desc  { font-size: 0.72rem; color: #6b7fa3; margin-top: 1px; }

/* ══════════════════════════════════════════════════════════════
   TOOL PAGE OVERLAY
   ══════════════════════════════════════════════════════════════ */
#toolPageOverlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: #0a0c14;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Top bar */
.tool-page-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  height: 52px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.tool-page-back {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: #94a3b8;
  border-radius: 8px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.tool-page-back:hover { background: rgba(255,255,255,0.13); color: #fff; }
.tool-page-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.01em;
}

/* Individual tool page */
.tool-page {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 20px 60px;
  gap: 24px;
}

/* Hero section */
.tool-hero { text-align: center; }
.tool-hero-icon  { font-size: 2.8rem; margin-bottom: 10px; }
.tool-hero-title { font-size: 1.6rem; font-weight: 800; color: #e2e8f0; margin: 0 0 8px; }
.tool-hero-sub   { font-size: 0.88rem; color: #6b7fa3; margin: 0; }

/* Upload zone */
.tool-upload-zone {
  width: 100%;
  max-width: 640px;
  border: 2px dashed rgba(124,111,255,0.4);
  border-radius: 16px;
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  background: rgba(124,111,255,0.04);
  transition: all 0.2s;
  flex-shrink: 0;
}
.tool-upload-zone:hover,
.tool-upload-zone.drag-over {
  border-color: rgba(124,111,255,0.8);
  background: rgba(124,111,255,0.09);
}
.tool-upload-icon    { font-size: 2rem; margin-bottom: 10px; }
.tool-upload-primary { font-size: 0.95rem; font-weight: 600; color: #c8d6e5; margin-bottom: 4px; }
.tool-upload-link    { color: #a89fff; text-decoration: underline; }
.tool-upload-secondary { font-size: 0.78rem; color: #4a5568; }

/* File list */
.tool-file-list {
  width: 100%;
  max-width: 640px;
}
.tool-file-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: #6b7fa3;
  margin-bottom: 8px;
  padding: 0 2px;
}
.tool-clear-btn {
  background: none;
  border: none;
  color: #f87171;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0;
}
.tool-clear-btn:hover { text-decoration: underline; }
.tool-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 9px;
  margin-bottom: 6px;
  font-size: 0.82rem;
  color: #c8d6e5;
}
.tool-bundle-row { cursor: grab; }
.tool-bundle-row.dragging { opacity: 0.4; }
.tool-bundle-row.drag-target { border-color: rgba(124,111,255,0.7); background: rgba(124,111,255,0.1); }
.tool-drag-handle { color: #4a5568; font-size: 1rem; cursor: grab; flex-shrink: 0; }
.tool-file-icon  { flex-shrink: 0; }
.tool-file-name  { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-file-size  { flex-shrink: 0; font-size: 0.72rem; color: #4a5568; }
.tool-file-remove {
  background: none; border: none; cursor: pointer;
  color: #f87171; opacity: 0.5; font-size: 0.85rem; padding: 0 2px;
  flex-shrink: 0;
}
.tool-file-remove:hover { opacity: 1; }

/* Actions bar */
.tool-actions {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tool-quality-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tool-quality-label { font-size: 0.8rem; color: #94a3b8; font-weight: 600; flex-shrink: 0; }
.tool-range { flex: 1; min-width: 120px; accent-color: #7c6fff; }
.tool-range-val { font-size: 0.8rem; color: #a89fff; font-weight: 700; width: 36px; text-align: right; }
.tool-text-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #e2e8f0;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.85rem;
  min-width: 180px;
}
.tool-text-input:focus { outline: none; border-color: rgba(124,111,255,0.5); }
.tool-primary-btn {
  background: linear-gradient(135deg, #7c6fff, #5a4fd4);
  border: none;
  color: #fff;
  border-radius: 10px;
  padding: 12px 28px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: all 0.15s;
  align-self: flex-start;
}
.tool-primary-btn:hover  { background: linear-gradient(135deg, #9180ff, #7060e8); transform: translateY(-1px); }
.tool-primary-btn:active { transform: translateY(0); }
.tool-primary-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Results */
.tool-results { width: 100%; max-width: 640px; }
.tool-results-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #86efac;
  margin-bottom: 14px;
}
.tool-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.tool-result-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tool-result-card.tool-result-error { border-color: rgba(248,113,113,0.3); }
.tool-result-name { font-size: 0.82rem; font-weight: 600; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-result-sizes { font-size: 0.78rem; color: #6b7fa3; }
.tool-result-old { text-decoration: line-through; }
.tool-result-new { color: #86efac; font-weight: 600; }
.tool-result-saving { font-size: 0.75rem; color: #6b7fa3; }
.tool-result-saving.good { color: #86efac; }
.tool-result-err { font-size: 0.78rem; color: #f87171; }
.tool-dl-btn {
  display: inline-block;
  margin-top: 6px;
  background: rgba(124,111,255,0.2);
  border: 1px solid rgba(124,111,255,0.4);
  color: #a89fff;
  border-radius: 7px;
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: all 0.15s;
  cursor: pointer;
}
.tool-dl-btn:hover { background: rgba(124,111,255,0.35); color: #d4cfff; }

/* Bundle result */
.tool-bundle-result {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(134,239,172,0.2);
  border-radius: 14px;
  padding: 18px 20px;
  flex-wrap: wrap;
}
.tool-bundle-pdf-icon { font-size: 2.4rem; flex-shrink: 0; }
.tool-bundle-info { flex: 1; min-width: 140px; }
.tool-bundle-fname { font-size: 0.9rem; font-weight: 700; color: #e2e8f0; margin-bottom: 3px; }
.tool-bundle-meta  { font-size: 0.75rem; color: #6b7fa3; }
.tool-dl-big {
  padding: 9px 22px !important;
  font-size: 0.88rem !important;
  border-radius: 9px !important;
}

/* ── AssemblyAI key badge ───────────────────────────────────── */
.aai-key-badge {
  flex-shrink: 0;
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.15s;
  white-space: nowrap;
}
.aai-key-badge.has-key {
  background: rgba(134,239,172,0.12);
  border-color: rgba(134,239,172,0.35);
  color: #86efac;
}
.aai-key-badge.no-key {
  background: rgba(251,191,36,0.1);
  border-color: rgba(251,191,36,0.3);
  color: #fbbf24;
}
.aai-key-badge:hover { filter: brightness(1.2); }

#aaiKeyInput:focus {
  border-color: rgba(124,111,255,0.6) !important;
  box-shadow: 0 0 0 2px rgba(124,111,255,0.15);
}

/* ── Photo Gallery v2 ────────────────────────────────────────────────────── */
.pv-view-toggle { display:flex; gap:3px; margin-left:auto; }
.pv-view-btn { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); color:#a0aec0; border-radius:5px; padding:2px 7px; font-size:13px; cursor:pointer; transition:all .15s; }
.pv-view-btn.active,.pv-view-btn:hover { background:rgba(124,111,255,0.22); color:#c4b8ff; border-color:#7c6fff; }

/* Gallery grid */
.pv-img-list.pv-gallery-view { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:4px 0; overflow-y:auto; max-height:420px; }
.pv-gallery-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:8px; overflow:hidden; cursor:grab; transition:border-color .15s; }
.pv-gallery-card:active { cursor:grabbing; }
.pv-gallery-card.dragging { opacity:0.4; border-style:dashed; }
.pv-gallery-card.drag-over { border-color:#7c6fff; background:rgba(124,111,255,0.1); }
.pv-gallery-card.placing { border-color:#34d399; box-shadow:0 0 0 2px rgba(52,211,153,0.25); }

.pv-gallery-thumb-wrap { position:relative; aspect-ratio:4/3; background:#111; overflow:hidden; }
.pv-gallery-thumb { width:100%; height:100%; object-fit:cover; display:block; }

.pv-gallery-placed-badge { position:absolute; top:5px; left:5px; background:rgba(52,211,153,0.9); color:#064e3b; font-size:10px; font-weight:600; padding:2px 6px; border-radius:4px; max-width:90%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.pv-gallery-thumb-actions { position:absolute; bottom:0; left:0; right:0; display:flex; gap:3px; padding:5px; background:linear-gradient(transparent,rgba(0,0,0,0.75)); opacity:0; transition:opacity .15s; }
.pv-gallery-card:hover .pv-gallery-thumb-actions { opacity:1; }
.pv-gal-btn { flex:1; padding:4px 0; font-size:12px; border:none; border-radius:4px; cursor:pointer; background:rgba(255,255,255,0.15); color:#fff; transition:background .15s; }
.pv-gal-btn:hover { background:rgba(255,255,255,0.28); }
.pv-gal-place.active { background:rgba(52,211,153,0.4); }
.pv-gal-remove:hover { background:rgba(248,113,113,0.5); }
.pv-gal-annotate:hover { background:rgba(124,111,255,0.5); }

/* Caption input */
.pv-gallery-caption-wrap { padding:5px 6px; }
.pv-caption-input { width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:5px; color:#e2e8f0; font-size:11px; padding:4px 7px; box-sizing:border-box; outline:none; transition:border-color .15s; }
.pv-caption-input:focus { border-color:#7c6fff; background:rgba(124,111,255,0.1); }
.pv-caption-input::placeholder { color:#718096; }
.pv-caption-list { margin-top:4px; font-size:11px; }

/* Annotate button in list view */
.pv-img-annotate-btn { background:rgba(124,111,255,0.12); border:1px solid rgba(124,111,255,0.3); color:#a89fff; border-radius:5px; padding:3px 7px; font-size:11px; cursor:pointer; transition:background .15s; }
.pv-img-annotate-btn:hover { background:rgba(124,111,255,0.28); }

/* Caption below photo in doc preview */
.pv-photo-caption { font-size:12px; color:#718096; font-style:italic; text-align:center; padding:4px 8px 2px; border-bottom:1px solid rgba(255,255,255,0.07); }
.pv-photo-marker-meta { display:flex; align-items:center; justify-content:space-between; padding:4px 8px; font-size:11px; color:#718096; }

/* ── Annotation Modal ─────────────────────────────────────────────────────── */
.pv-annot-modal-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:9999; align-items:center; justify-content:center; padding:16px; }
.pv-annot-modal { background:#1a1a2e; border:1px solid rgba(255,255,255,0.12); border-radius:12px; display:flex; flex-direction:column; max-width:900px; width:100%; max-height:90vh; overflow:hidden; }
.pv-annot-toolbar { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.08); flex-wrap:wrap; background:rgba(255,255,255,0.03); }
.pv-annot-title { font-size:13px; font-weight:600; color:#e2e8f0; white-space:nowrap; }
.pv-annot-tools { display:flex; gap:3px; }
.pv-annot-tool { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); color:#a0aec0; border-radius:5px; padding:4px 10px; font-size:14px; cursor:pointer; transition:all .15s; }
.pv-annot-tool.active,.pv-annot-tool:hover { background:rgba(124,111,255,0.28); color:#c4b8ff; border-color:#7c6fff; }
.pv-annot-colors { display:flex; gap:4px; }
.pv-annot-color { width:20px; height:20px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform .1s; }
.pv-annot-color.active,.pv-annot-color:hover { transform:scale(1.25); border-color:#fff; }
.pv-annot-size-wrap label { font-size:11px; color:#718096; display:flex; align-items:center; gap:5px; }
.pv-annot-size-wrap input[type=range] { width:70px; accent-color:#7c6fff; }
.pv-annot-undo,.pv-annot-clear { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); color:#a0aec0; border-radius:5px; padding:4px 10px; font-size:11px; cursor:pointer; transition:background .15s; white-space:nowrap; }
.pv-annot-undo:hover { background:rgba(99,179,237,0.2); color:#63b3ed; }
.pv-annot-clear:hover { background:rgba(248,113,113,0.2); color:#fc8181; }
.pv-annot-save { background:#7c6fff; border:none; color:#fff; border-radius:6px; padding:5px 14px; font-size:12px; font-weight:600; cursor:pointer; transition:background .15s; white-space:nowrap; }
.pv-annot-save:hover { background:#6355e0; }
.pv-annot-cancel { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); color:#a0aec0; border-radius:6px; padding:5px 10px; font-size:12px; cursor:pointer; white-space:nowrap; }
.pv-annot-cancel:hover { background:rgba(248,113,113,0.2); color:#fc8181; }
.pv-annot-canvas-wrap { flex:1; overflow:auto; display:flex; align-items:center; justify-content:center; padding:16px; background:#111; }
#pvAnnotCanvas { cursor:crosshair; max-width:100%; border-radius:4px; display:block; }

/* Light mode overrides */
#appView.light-mode .pv-gallery-card { background:rgba(0,0,0,0.03); border-color:#e2e8f0; }
#appView.light-mode .pv-caption-input { background:#f7fafc; border-color:#e2e8f0; color:#2d3748; }
#appView.light-mode .pv-caption-input:focus { border-color:#7c6fff; background:#fff; }
#appView.light-mode .pv-photo-caption { color:#64748b; border-bottom-color:#e2e8f0; }
#appView.light-mode .pv-view-btn { background:rgba(0,0,0,0.05); border-color:#e2e8f0; color:#64748b; }
#appView.light-mode .pv-view-btn.active { background:rgba(124,111,255,0.12); color:#6355e0; }

/* ══════════════════════════════════════════════════════════════════
   MOBILE EXPERIENCE — hamburger, drawer, bottom bar, voice sheet
   ══════════════════════════════════════════════════════════════════ */

/* ── Hamburger button in topbar ────────────────────────────────── */
.mobile-menu-btn {
  display: none; /* hidden on desktop, shown via @media */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  margin-right: 2px;
  flex-shrink: 0;
  touch-action: manipulation;
  order: -1; /* always leftmost in topbar */
}
.mobile-menu-btn:active { background: rgba(124,111,255,0.15); }
.mobile-menu-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
}
.mobile-menu-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.8);
  border-radius: 2px;
  transition: all 0.2s;
}
#appView.light-mode .mobile-menu-icon span { background: rgba(0,0,0,0.7); }

/* ── Mobile menu drawer ────────────────────────────────────────── */
.mobile-menu-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9990;
}
.mobile-menu-drawer.open { display: block; }
.mobile-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
  animation: mbbFadeIn 0.2s ease;
}
@keyframes mbbFadeIn { from { opacity: 0; } to { opacity: 1; } }
.mobile-menu-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #14162b;
  border-radius: 20px 20px 0 0;
  padding: 12px 0 calc(20px + env(safe-area-inset-bottom));
  animation: mbbSlideUp 0.25s cubic-bezier(0.32,0.72,0,1);
  max-height: 85vh;
  overflow-y: auto;
}
@keyframes mbbSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.mobile-menu-handle {
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  margin: 0 auto 12px;
}
.mobile-menu-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 20px 8px;
}
.mobile-menu-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.mobile-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 12px;
  background: transparent;
  border: none;
  color: #e2e8f0;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 10px;
  text-align: left;
  touch-action: manipulation;
  transition: background 0.12s;
}
.mobile-menu-item:active { background: rgba(124,111,255,0.18); }
.mobile-menu-editor {
  background: rgba(124,111,255,0.12) !important;
  border: 1px solid rgba(124,111,255,0.25) !important;
  color: #c4b8ff !important;
  font-weight: 600;
  margin-bottom: 4px;
}
.mobile-menu-editor:active { background: rgba(124,111,255,0.28) !important; }
.mobile-menu-item-icon { font-size: 1.3rem; width: 28px; text-align: center; flex-shrink: 0; }
.mobile-menu-item-label { font-size: 1rem; font-weight: 500; }
.mobile-menu-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 8px 0; }

/* Light mode drawer */
#appView.light-mode .mobile-menu-panel { background: #f8fafc; }
#appView.light-mode .mobile-menu-item { color: #2d3748; }
#appView.light-mode .mobile-menu-item:active { background: rgba(124,111,255,0.1); }

/* ── Mobile bottom bar ─────────────────────────────────────────── */
.mobile-bottom-bar {
  display: none; /* hidden on desktop, shown by JS only when logged in */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9980;
  height: calc(72px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: transparent;
  pointer-events: none; /* allow clicks through except on mic */
  align-items: flex-end;
  justify-content: center;
}
.mbb-btn { display: none; } /* unused — editor and menu moved to hamburger */
/* Mic FAB */
.mbb-mic-fab {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #7c6fff;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(124,111,255,0.6);
  touch-action: manipulation;
  transition: transform 0.1s, background 0.15s;
  margin-bottom: 12px;
  flex-shrink: 0;
  pointer-events: all; /* restore clicks on the mic itself */
}
.mbb-mic-fab:active { transform: scale(0.93); background: #6b5ce7; }
.mbb-mic-fab.recording {
  background: #ef4444;
  box-shadow: 0 4px 20px rgba(239,68,68,0.55);
  animation: mbbMicPulse 1.2s ease-out infinite;
}
@keyframes mbbMicPulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
.mbb-mic-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(239,68,68,0.4);
  opacity: 0;
  pointer-events: none;
}
.mbb-mic-fab.recording .mbb-mic-ring {
  animation: mbbRingExpand 1.2s ease-out infinite;
}
@keyframes mbbRingExpand {
  0%   { inset: -4px; opacity: 0.7; }
  100% { inset: -16px; opacity: 0; }
}

#appView.light-mode .mobile-bottom-bar { background: #fff; border-top-color: #e2e8f0; }
#appView.light-mode .mbb-btn { color: rgba(0,0,0,0.45); }
#appView.light-mode .mbb-btn.active { color: #6355e0; }

/* ── Mobile voice sheet ────────────────────────────────────────── */
.mobile-voice-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9985;
}
.mobile-voice-sheet.open { display: block; }
.mvs-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  animation: mbbFadeIn 0.2s ease;
}
.mvs-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #14162b;
  border-radius: 24px 24px 0 0;
  padding: 12px 20px calc(32px + env(safe-area-inset-bottom));
  animation: mbbSlideUp 0.28s cubic-bezier(0.32,0.72,0,1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 420px;
  max-height: 88dvh;
  overflow-y: auto;
}
.mvs-handle {
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  margin: 0 auto 4px;
}
.mvs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mvs-title {
  font-size: 1rem;
  font-weight: 600;
  color: #e2e8f0;
}
.mvs-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}
.mvs-waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 44px;
}
.mvs-bar {
  display: block;
  width: 4px;
  height: 8px;
  background: rgba(124,111,255,0.4);
  border-radius: 2px;
  transition: height 0.1s ease;
}
.mvs-waveform.active .mvs-bar {
  background: #7c6fff;
  animation: mvsBarAnim 0.6s ease-in-out infinite;
}
.mvs-waveform.active .mvs-bar:nth-child(2) { animation-delay: 0.08s; }
.mvs-waveform.active .mvs-bar:nth-child(3) { animation-delay: 0.16s; }
.mvs-waveform.active .mvs-bar:nth-child(4) { animation-delay: 0.24s; }
.mvs-waveform.active .mvs-bar:nth-child(5) { animation-delay: 0.12s; }
.mvs-waveform.active .mvs-bar:nth-child(6) { animation-delay: 0.2s; }
.mvs-waveform.active .mvs-bar:nth-child(7) { animation-delay: 0.06s; }
@keyframes mvsBarAnim {
  0%,100% { height: 8px; }
  50% { height: 32px; }
}
.mvs-status {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  min-height: 20px;
}
.mvs-transcript {
  min-height: 48px;
  max-height: 90px;
  overflow-y: auto;
  font-size: 1rem;
  line-height: 1.5;
  color: #e2e8f0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 12px;
  white-space: pre-wrap;
}
.mvs-transcript:empty::before {
  content: 'Your transcription will appear here…';
  color: rgba(255,255,255,0.25);
  font-style: italic;
}
.mvs-actions {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mvs-mic-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #7c6fff;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(124,111,255,0.5);
  touch-action: manipulation;
  transition: transform 0.1s, background 0.15s;
}
.mvs-mic-btn:active { transform: scale(0.93); }
.mvs-mic-btn.recording {
  background: #ef4444;
  box-shadow: 0 4px 20px rgba(239,68,68,0.5);
  animation: mbbMicPulse 1.2s ease-out infinite;
}
#appView.light-mode .mvs-panel { background: #fff; }
#appView.light-mode .mvs-title { color: #2d3748; }
#appView.light-mode .mvs-status { color: #64748b; }
#appView.light-mode .mvs-transcript { background: #f8fafc; border-color: #e2e8f0; color: #2d3748; }

/* ── Mobile breakpoint overrides ───────────────────────────────── */
@media (max-width: 768px) {
  /* Show mobile-only elements */
  .mobile-menu-btn    { display: flex !important; }
  .mobile-bottom-bar  { display: flex !important; }
  .vp-main-mic        { display: flex !important; } /* big record button — mobile/tablet only */

  /* Hide desktop sidebar entirely — replaced by mobile bottom bar + hamburger */
  .app-sidebar { display: none !important; }

  /* Content fills full height — mic bar floats over it */
  .app-content {
    height: calc(100dvh - 48px) !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
  .app-shell { flex-direction: row !important; }

  /* Editor: full width, no right panel */
  .editor-main-col { width: 100% !important; min-width: 0 !important; }
  .editor-voice-panel { display: none !important; } /* voice panel → mobile sheet */

  /* Cursor followers: hide on touch devices */
  #lineToolbar { display: none !important; }

  /* Editor subtabs bar — hide non-essential buttons, keep core */
  .editor-action-btn { font-size: 0.7rem !important; padding: 4px 8px !important; }
  .editor-subtabs-bar { overflow-x: auto; gap: 4px !important; padding: 0 8px !important; }
  .editor-submit-review-btn { display: none !important; }

  /* Quill toolbar — scrollable */
  #quillToolbar { overflow-x: auto; flex-wrap: nowrap !important; }

  /* Ruler — hidden on mobile (not useful at small sizes) */
  #quillRuler { display: none !important; }

  /* Editor paper — full width, no extra margin on mobile */
  .ql-editor { padding: 20px 16px !important; max-width: 100% !important; margin: 0 !important; box-shadow: none !important; }
  .ql-editor.ql-blank::before { left: 16px !important; }
  #quillEditor .ql-container { padding: 0; }
  #quillEditor { background: #ffffff; }

  /* Touch-friendly tap targets throughout */
  .ql-formats button, .ql-formats select { min-width: 36px !important; min-height: 36px !important; }

  /* Tab panels — full width */
  .app-tab-panel { padding: 8px !important; }
  .tab-panel-header { padding: 10px 12px !important; }

  /* Topbar — tighten on mobile */
  .app-topbar { padding: 0 8px !important; }
  .app-topbar-gap-left, .app-topbar-gap-right { display: none !important; }
  .app-topbar-middle { gap: 6px !important; }
  .app-timer-pill { display: none !important; }
  .account-btn-name { display: none !important; }
  .account-btn { padding: 5px 8px !important; }
  .topbar-settings-btn { display: none !important; } /* moved to hamburger */
}

/* ══════════════════════════════════════════════════════════════
   MOBILE VOICE SHEET — EXTENDED STYLES (echocraft fixes)
   ══════════════════════════════════════════════════════════════ */

/* ── Mobile topbar brand name ─────────────────────────────────── */
.mobile-topbar-brand {
  display: none; /* hidden on desktop */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #c4b8ff;
  pointer-events: none;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .mobile-topbar-brand {
    display: block;
  }
  /* Hamburger at far left — ensure correct order */
  .app-topbar {
    position: relative;       /* for absolute brand centering */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .mobile-menu-btn {
    order: -1 !important;     /* first child visually */
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  /* Hide desktop logo area on mobile */
  .app-topbar-logo,
  .app-topbar-gap-left,
  .app-topbar-gap-right,
  .app-topbar-middle {
    display: none !important;
  }
  /* Account stays on the right */
  .app-topbar-right {
    margin-left: auto !important;
  }
}
#appView.light-mode .mobile-topbar-brand {
  color: #6355e0;
}

/* ── FAB — bigger & more prominent ───────────────────────────── */
@media (max-width: 768px) {
  .mbb-mic-fab {
    width: 68px !important;
    height: 68px !important;
    margin-top: -14px !important;   /* lifts it above the bottom bar */
    box-shadow: 0 6px 28px rgba(124,111,255,0.65) !important;
  }
}

/* ── Voice sheet header row ─────────────────────────────────── */
.mvs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mvs-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── AssemblyAI badge in mobile sheet ─────────────────────────── */
.mvs-api-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.mvs-api-badge.has-key {
  background: rgba(124,111,255,0.15);
  border-color: rgba(124,111,255,0.4);
  color: #a89fff;
}
.mvs-api-badge.no-key {
  background: rgba(251,191,36,0.1);
  border-color: rgba(251,191,36,0.3);
  color: #fbbf24;
}

/* ── API status text line ─────────────────────────────────────── */
.mvs-api-status {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  text-align: center;
  line-height: 1.4;
  min-height: 16px;
}
#appView.light-mode .mvs-api-status { color: rgba(0,0,0,0.35); }

/* ── Timer row inside voice sheet ────────────────────────────── */
.mvs-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.mvs-timer-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mvs-timer-display {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #a89fff;
  min-width: 3ch;
  text-align: right;
}
.mvs-timer-display.urgent {
  color: #f87171;
  animation: mvsTimerUrgent 0.5s ease-in-out infinite alternate;
}
@keyframes mvsTimerUrgent {
  from { opacity: 1; }
  to   { opacity: 0.45; }
}
.mvs-timer-reset {
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 14px;
  background: rgba(124,111,255,0.15);
  border: 1px solid rgba(124,111,255,0.3);
  color: #a89fff;
  cursor: pointer;
  touch-action: manipulation;
}
.mvs-timer-reset:active { background: rgba(124,111,255,0.28); }

/* ── Mic button — larger & more prominent ────────────────────── */
.mvs-mic-btn {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50%;
  background: #7c6fff;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 28px rgba(124,111,255,0.6);
  touch-action: manipulation;
  transition: transform 0.1s, background 0.15s;
  position: relative;
}
.mvs-mic-btn:active { transform: scale(0.92); }
.mvs-mic-btn.recording {
  background: #ef4444;
  box-shadow: 0 6px 28px rgba(239,68,68,0.6);
  animation: mbbMicPulse 1.2s ease-out infinite;
}
/* Ring on mic button (same as FAB) */
.mvs-mic-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(239,68,68,0.4);
  opacity: 0;
  pointer-events: none;
}
.mvs-mic-btn.recording .mvs-mic-ring {
  animation: mbbRingExpand 1.2s ease-out infinite;
}

/* ── Photos section in mobile sheet ─────────────────────────── */
.mvs-photos-section {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mvs-photos-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mvs-photos-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #c4b8ff;
  flex: 1;
}
.mvs-photos-add-btn {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 14px;
  background: rgba(124,111,255,0.2);
  border: 1px solid rgba(124,111,255,0.35);
  color: #a89fff;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}
.mvs-photos-add-btn:active { background: rgba(124,111,255,0.35); }
.mvs-photos-hint {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
  font-style: italic;
}
.mvs-photos-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mvs-photo-thumb {
  position: relative;
  width: 72px;
  flex-shrink: 0;
}
.mvs-photo-thumb img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(124,111,255,0.25);
  display: block;
}
.mvs-photo-name {
  display: block;
  font-size: 0.58rem;
  color: rgba(255,255,255,0.4);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 72px;
  margin-top: 2px;
}
.mvs-photo-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef4444;
  border: none;
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  line-height: 1;
}
.mvs-photos-place-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  background: rgba(124,111,255,0.2);
  border: 1px solid rgba(124,111,255,0.4);
  color: #c4b8ff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s;
}
.mvs-photos-place-btn:active { background: rgba(124,111,255,0.35); }

/* ── Light mode overrides for new elements ───────────────────── */
#appView.light-mode .mvs-api-badge.has-key { background: rgba(124,111,255,0.1); border-color: rgba(124,111,255,0.3); color: #6355e0; }
#appView.light-mode .mvs-api-badge.no-key  { background: rgba(245,158,11,0.1);  border-color: rgba(245,158,11,0.3);  color: #b45309; }
#appView.light-mode .mvs-timer-display     { color: #6355e0; }
#appView.light-mode .mvs-timer-reset       { background: rgba(99,85,224,0.1); border-color: rgba(99,85,224,0.25); color: #6355e0; }
#appView.light-mode .mvs-photos-section    { border-top-color: #e2e8f0; }
#appView.light-mode .mvs-photos-title      { color: #6355e0; }
#appView.light-mode .mvs-photos-add-btn    { background: rgba(99,85,224,0.1); border-color: rgba(99,85,224,0.25); color: #6355e0; }
#appView.light-mode .mvs-photos-hint       { color: rgba(0,0,0,0.35); }
#appView.light-mode .mvs-photo-name        { color: rgba(0,0,0,0.45); }
#appView.light-mode .mvs-photos-place-btn  { background: rgba(99,85,224,0.1); border-color: rgba(99,85,224,0.3); color: #6355e0; }

/* ══════════════════════════════════════════════════════════════════
   REVIEW TAB — new statuses, dashboard, request changes modal
   ══════════════════════════════════════════════════════════════════ */

/* ── New status badges ─────────────────────────────────────────── */
.review-badge-in_review         { background: rgba(59,130,246,0.15);  color: #93c5fd; border-color: rgba(59,130,246,0.35); }
.review-badge-changes_requested { background: rgba(168,85,247,0.15);  color: #c4b5fd; border-color: rgba(168,85,247,0.35); }
.review-badge-archived          { background: rgba(107,114,128,0.15); color: #9ca3af; border-color: rgba(107,114,128,0.3); }

/* ── Review card left-border accent by status ──────────────────── */
.review-status-in_review         { border-left: 3px solid #3b82f6 !important; }
.review-status-changes_requested { border-left: 3px solid #a855f7 !important; }
.review-status-archived          { border-left: 3px solid #6b7280 !important; opacity: 0.7; }

/* ── New action buttons ────────────────────────────────────────── */
.review-in-review  { background: rgba(59,130,246,0.14);  color: #93c5fd; border-color: rgba(59,130,246,0.35); }
.review-in-review:hover { background: rgba(59,130,246,0.3); }
.review-changes    { background: rgba(168,85,247,0.14);  color: #c4b5fd; border-color: rgba(168,85,247,0.35); }
.review-changes:hover { background: rgba(168,85,247,0.3); }
.review-archive-btn{ background: rgba(107,114,128,0.14); color: #9ca3af; border-color: rgba(107,114,128,0.3); }
.review-archive-btn:hover { background: rgba(107,114,128,0.28); }

/* ── Changes-requested comment style ──────────────────────────── */
.review-comment-change-req {
  background: rgba(168,85,247,0.07);
  border-left: 3px solid rgba(168,85,247,0.5);
  border-radius: 6px;
  padding: 8px 10px !important;
}
.review-comment-type-badge {
  display: inline-block;
  background: rgba(168,85,247,0.18);
  color: #c4b5fd;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Dashboard / list toggle ───────────────────────────────────── */
.rv-view-toggle {
  display: flex;
  gap: 3px;
  margin-right: 8px;
}
.rv-view-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.55);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.14s;
}
.rv-view-btn.active,
.rv-view-btn:hover {
  background: rgba(124,111,255,0.2);
  color: #c4b8ff;
  border-color: rgba(124,111,255,0.4);
}

/* ── Dashboard stats grid ──────────────────────────────────────── */
.rv-dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px 16px 8px;
}
.rv-dash-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
  border-top: 3px solid var(--dash-color, #7c6fff);
}
.rv-dash-stat:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.16);
}
.rv-dash-stat-count {
  font-size: 2rem;
  font-weight: 700;
  color: var(--dash-color, #c4b8ff);
  line-height: 1;
}
.rv-dash-stat-label {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  font-weight: 500;
}

/* ── Dashboard list table ──────────────────────────────────────── */
.rv-dash-list {
  margin: 8px 16px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
}
.rv-dash-list-header {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr 1fr 1fr;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rv-dash-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr 1fr 1fr;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  align-items: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
  transition: background 0.1s;
}
.rv-dash-row:last-child { border-bottom: none; }
.rv-dash-row:hover { background: rgba(255,255,255,0.03); }
.rv-dash-col-name  { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
.rv-dash-col-author{ color: rgba(255,255,255,0.55); font-size: 0.75rem; }
.rv-dash-col-date  { color: rgba(255,255,255,0.4); font-size: 0.72rem; }
.rv-dash-col-actions { display: flex; gap: 4px; justify-content: flex-end; }
.rv-dash-action {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
}
.rv-dash-action:hover { background: rgba(124,111,255,0.2); color: #c4b8ff; }
.rv-dash-empty {
  padding: 24px;
  text-align: center;
  color: rgba(255,255,255,0.3);
  font-size: 0.85rem;
}

/* ── Request Changes Modal ─────────────────────────────────────── */
.rc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(3px);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.rc-modal {
  background: #1a1c2e;
  border: 1px solid rgba(168,85,247,0.3);
  border-radius: 14px;
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.rc-modal-backdrop.open .rc-modal {
  transform: translateY(0);
  opacity: 1;
}
.rc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(168,85,247,0.08);
}
.rc-modal-title { font-size: 0.95rem; font-weight: 600; color: #e2e8f0; }
.rc-modal-close {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
}
.rc-modal-close:hover { background: rgba(248,113,113,0.2); color: #f87171; }
.rc-modal-body { padding: 18px; }
.rc-modal-label { display: block; font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-bottom: 8px; font-weight: 500; }
.rc-required { color: #f87171; margin-left: 2px; }
.rc-modal-textarea {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(168,85,247,0.3);
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 0.88rem;
  padding: 10px 12px;
  resize: vertical;
  min-height: 110px;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.15s;
}
.rc-modal-textarea:focus { border-color: rgba(168,85,247,0.7); }
.rc-modal-textarea::placeholder { color: rgba(255,255,255,0.25); }
.rc-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.rc-modal-cancel {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  border-radius: 7px;
  padding: 7px 16px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.12s;
}
.rc-modal-cancel:hover { background: rgba(255,255,255,0.1); }
.rc-modal-confirm {
  background: rgba(168,85,247,0.8);
  border: none;
  color: #fff;
  border-radius: 7px;
  padding: 7px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.rc-modal-confirm:hover { background: rgba(168,85,247,1); }

/* Light mode overrides */
#appView.light-mode .rv-dash-stat       { background: #fff; border-color: #e2e8f0; }
#appView.light-mode .rv-dash-stat:hover { background: #f8fafc; }
#appView.light-mode .rv-dash-stat-label { color: #64748b; }
#appView.light-mode .rv-dash-list       { background: #fff; border-color: #e2e8f0; }
#appView.light-mode .rv-dash-list-header{ background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
#appView.light-mode .rv-dash-row        { color: #2d3748; border-color: #f1f5f9; }
#appView.light-mode .rv-dash-row:hover  { background: #f8fafc; }
#appView.light-mode .rv-dash-col-author { color: #64748b; }
#appView.light-mode .rv-dash-col-date   { color: #94a3b8; }
#appView.light-mode .rv-dash-action     { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
#appView.light-mode .rv-view-btn        { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
#appView.light-mode .rv-view-btn.active { background: rgba(124,111,255,0.1); color: #6355e0; }
#appView.light-mode .rc-modal           { background: #fff; border-color: rgba(168,85,247,0.2); }
#appView.light-mode .rc-modal-header    { background: rgba(168,85,247,0.05); border-color: #f3e8ff; }
#appView.light-mode .rc-modal-title     { color: #2d3748; }
#appView.light-mode .rc-modal-label     { color: #64748b; }
#appView.light-mode .rc-modal-textarea  { background: #f9fafb; border-color: rgba(168,85,247,0.3); color: #2d3748; }
#appView.light-mode .rc-modal-footer    { border-color: #f1f5f9; }
#appView.light-mode .rc-modal-cancel    { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }

/* ── Archived reports toggle ───────────────────────────────────── */
.rv-archived-toggle {
  padding: 8px 16px 0;
}
.rv-archived-toggle button {
  background: rgba(107,114,128,0.1);
  border: 1px solid rgba(107,114,128,0.25);
  color: #9ca3af;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.12s;
}
.rv-archived-toggle button:hover {
  background: rgba(107,114,128,0.2);
  color: #d1d5db;
}

/* ══════════════════════════════════════════════════════════════════
   EDITOR CONTEXT MENU — right-click / long-press
   ══════════════════════════════════════════════════════════════════ */
.ed-ctx-menu {
  position: fixed;
  z-index: 99999;
  background: #1e2130;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 4px 0;
  min-width: 210px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  animation: ctxFadeIn 0.1s ease;
  user-select: none;
}
@keyframes ctxFadeIn { from { opacity:0; transform:scale(0.97); } to { opacity:1; transform:scale(1); } }

.ed-ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: none;
  color: #e2e8f0;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
  white-space: nowrap;
}
.ed-ctx-item:hover { background: rgba(255,255,255,0.08); }
.ed-ctx-item:active { background: rgba(124,111,255,0.2); }
.ed-ctx-item.ed-ctx-danger { color: #f87171; }
.ed-ctx-item.ed-ctx-danger:hover { background: rgba(239,68,68,0.12); }
.ed-ctx-icon {
  width: 20px;
  text-align: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  opacity: 0.85;
}
.ed-ctx-arrow {
  margin-left: auto;
  opacity: 0.5;
  font-size: 0.7rem;
}
.ed-ctx-sep {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 3px 8px;
}

/* Light mode context menu */
#appView.light-mode .ed-ctx-menu { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
#appView.light-mode .ed-ctx-item { color: #2d3748; }
#appView.light-mode .ed-ctx-item:hover { background: #f7fafc; }
#appView.light-mode .ed-ctx-item.ed-ctx-danger { color: #e53e3e; }
#appView.light-mode .ed-ctx-sep { background: #e2e8f0; }

/* ── Image selected state ─────────────────────────────────────── */
.ed-img-selected {
  outline: 2px solid #7c6fff !important;
  outline-offset: 2px;
}

/* ── Image corner resize overlay ─────────────────────────────── */
.ed-resize-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 100;
}
.ed-resize-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #7c6fff;
  border: 2px solid #fff;
  border-radius: 2px;
  pointer-events: all;
  z-index: 101;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.ed-resize-nw { top: -5px;    left: -5px;    cursor: nw-resize; }
.ed-resize-ne { top: -5px;    right: -5px;   cursor: ne-resize; }
.ed-resize-se { bottom: -5px; right: -5px;   cursor: se-resize; }
.ed-resize-sw { bottom: -5px; left: -5px;    cursor: sw-resize; }

/* ── Table picker ─────────────────────────────────────────────── */
.ed-table-picker {
  position: fixed;
  z-index: 99999;
  background: #1e2130;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  animation: ctxFadeIn 0.1s ease;
}
.ed-tp-title {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ed-tp-grid {
  display: grid;
  grid-template-columns: repeat(6, 22px);
  gap: 3px;
  margin-bottom: 8px;
}
.ed-tp-cell {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.ed-tp-cell.active { background: rgba(124,111,255,0.45); border-color: #7c6fff; }
.ed-tp-cell:hover { background: rgba(124,111,255,0.25); }
.ed-tp-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  text-align: center;
  margin-bottom: 8px;
}
.ed-tp-btn {
  width: 100%;
  background: #7c6fff;
  border: none;
  color: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s;
}
.ed-tp-btn:hover { background: #6355e0; }
#appView.light-mode .ed-table-picker { background: #fff; border-color: #e2e8f0; }
#appView.light-mode .ed-tp-title { color: #64748b; }
#appView.light-mode .ed-tp-cell { border-color: #e2e8f0; }
#appView.light-mode .ed-tp-label { color: #64748b; }

/* ══════════════════════════════════════════════════════════════════
   IMAGE ANNOTATION MODAL
   ══════════════════════════════════════════════════════════════════ */
.img-annot-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(3px);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.img-annot-modal {
  background: #1a1c2e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  max-width: 900px;
  width: 100%;
  max-height: 92vh;
  overflow: hidden;
}
.img-annot-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  flex-wrap: wrap;
}
.img-annot-title { font-size: 0.85rem; font-weight: 600; color: #e2e8f0; white-space: nowrap; }
.img-annot-tools { display: flex; gap: 3px; }
.img-annot-tool {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: #a0aec0;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.14s;
  min-width: 36px;
  min-height: 36px;
}
.img-annot-tool.active,
.img-annot-tool:hover { background: rgba(124,111,255,0.28); color: #c4b8ff; border-color: #7c6fff; }
.img-annot-colors { display: flex; gap: 5px; }
.img-annot-color {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.1s;
}
.img-annot-color.active, .img-annot-color:hover { transform: scale(1.3); border-color: #fff; }
.img-annot-size-wrap {
  font-size: 0.75rem;
  color: #718096;
  display: flex;
  align-items: center;
  gap: 5px;
}
.img-annot-size-wrap input[type=range] { width: 70px; accent-color: #7c6fff; }
.img-annot-action {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: #a0aec0;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  min-height: 36px;
}
.img-annot-action:hover { background: rgba(99,179,237,0.2); color: #63b3ed; }
.img-annot-save {
  background: #7c6fff;
  border: none;
  color: #fff;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
  white-space: nowrap;
}
.img-annot-save:hover { background: #6355e0; }
.img-annot-cancel {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #a0aec0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  min-height: 36px;
  white-space: nowrap;
}
.img-annot-cancel:hover { background: rgba(248,113,113,0.2); color: #fc8181; }
.img-annot-canvas-wrap {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #111;
}
#imgAnnotCanvas { cursor: crosshair; max-width: 100%; border-radius: 4px; display: block; touch-action: none; }

/* ══════════════════════════════════════════════════════════════════
   REVIEW EDITOR MODAL (full-screen reviewer workspace)
   ══════════════════════════════════════════════════════════════════ */
.vre-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 9990;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.vre-backdrop.open { opacity: 1; }
.vre-modal {
  background: #f5f7fa;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
  height: 100%;
  max-height: 100vh;
  overflow: hidden;
  transform: translateY(16px);
  transition: transform 0.25s ease;
  box-shadow: 0 0 60px rgba(0,0,0,0.5);
}
.vre-backdrop.open .vre-modal { transform: translateY(0); }
.vre-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #1a1c2e;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.vre-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #e2e8f0;
  flex: 1;
  min-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vre-header-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.vre-btn {
  padding: 6px 13px;
  border-radius: 7px;
  border: none;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
  white-space: nowrap;
  min-height: 34px;
}
.vre-btn-approve  { background: rgba(34,197,94,0.2);  color: #4ade80; border: 1px solid rgba(34,197,94,0.35); }
.vre-btn-approve:hover { background: rgba(34,197,94,0.35); }
.vre-btn-changes  { background: rgba(168,85,247,0.2); color: #c084fc; border: 1px solid rgba(168,85,247,0.35); }
.vre-btn-changes:hover { background: rgba(168,85,247,0.35); }
.vre-btn-reject   { background: rgba(239,68,68,0.18); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.vre-btn-reject:hover { background: rgba(239,68,68,0.3); }
.vre-btn-save     { background: rgba(124,111,255,0.2); color: #c4b8ff; border: 1px solid rgba(124,111,255,0.35); }
.vre-btn-save:hover { background: rgba(124,111,255,0.35); }
.vre-btn-close    { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.1); }
.vre-btn-close:hover { background: rgba(248,113,113,0.2); color: #f87171; }
.vre-editor-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #e8eaf0;
}
/* Review Quill toolbar */
#vrReviewToolbar {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 4px 8px;
  flex-shrink: 0;
}
/* Review Quill editor */
#vrReviewEditor {
  flex: 1;
  overflow-y: auto;
  background: #e8eaf0;
  padding: 20px 0;
}
#vrReviewEditor .ql-editor {
  background: #fff;
  max-width: 860px;
  margin: 0 auto;
  min-height: 500px;
  padding: 40px clamp(16px, 6vw, 72px);
  box-shadow: 0 1px 8px rgba(0,0,0,0.08);
  font-size: 11pt;
  line-height: 1.7;
  color: #111;
}
/* Review comment panel */
.vre-comments-panel {
  width: 260px;
  min-width: 260px;
  background: #fff;
  border-left: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vre-comments-title {
  padding: 10px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.vre-comments-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.vre-comment-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 0.78rem;
}
.vre-comment-author { font-weight: 600; color: #2d3748; }
.vre-comment-text { color: #4a5568; margin-top: 2px; line-height: 1.4; }
.vre-comment-time { color: #94a3b8; font-size: 0.7rem; margin-top: 3px; }
.vre-add-comment {
  display: flex;
  gap: 5px;
  padding: 8px;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.vre-comment-input {
  flex: 1;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.78rem;
  outline: none;
  color: #2d3748;
  background: #f8fafc;
}
.vre-comment-input:focus { border-color: #7c6fff; }
.vre-comment-send {
  background: #7c6fff;
  border: none;
  color: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}
.vre-comment-send:hover { background: #6355e0; }

/* Mobile review modal */
@media (max-width: 768px) {
  .vre-modal { max-width: 100%; }
  .vre-header { padding: 8px 10px; }
  .vre-btn { padding: 5px 9px; font-size: 0.7rem; min-height: 32px; }
  .vre-title { font-size: 0.8rem; }
  .vre-comments-panel { display: none; } /* hidden on mobile — comments still accessible via review tab */
}

/* ══════════════════════════════════════════════════════════════════
   REVIEW MODAL — image right-click + annotation helper hint
   ══════════════════════════════════════════════════════════════════ */

/* Hint bar shown above review editor to guide reviewers */
.vre-hint-bar {
  background: rgba(124,111,255,0.1);
  border-bottom: 1px solid rgba(124,111,255,0.2);
  padding: 6px 14px;
  font-size: 0.75rem;
  color: #a89fff;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.vre-hint-bar span { opacity: 0.7; }

/* Selected image inside review Quill */
#vrReviewEditor .ql-editor img {
  cursor: context-menu;
  max-width: 100%;
  transition: outline 0.1s;
}
#vrReviewEditor .ql-editor img:hover {
  outline: 2px dashed rgba(124,111,255,0.5);
}

/* Table cells in review editor */
#vrReviewEditor .ql-editor td,
#vrReviewEditor .ql-editor th {
  border: 1px solid #aaa !important;
  padding: 6px 10px !important;
  min-width: 60px !important;
  color: #111 !important;
  background: #fff !important;
}

/* ── Context menu responsive — mobile full-width at bottom ──────── */
@media (max-width: 600px) {
  .ed-ctx-menu {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    border-radius: 16px 16px 0 0 !important;
    min-width: unset !important;
    width: 100% !important;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5) !important;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ed-ctx-item {
    padding: 14px 20px !important;
    font-size: 1rem !important;
  }
  .ed-ctx-sep { margin: 4px 12px !important; }
  /* Table picker full width on mobile */
  .ed-table-picker {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    border-radius: 16px 16px 0 0 !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
  .ed-tp-grid { grid-template-columns: repeat(6, 36px) !important; gap: 5px !important; }
  .ed-tp-cell { width: 36px !important; height: 36px !important; }
}

/* ── Review modal responsive ────────────────────────────────────── */
@media (max-width: 768px) {
  .vre-backdrop { padding: 0 !important; }
  .vre-modal { border-radius: 0 !important; }
  .vre-header { padding: 8px !important; }
  .vre-header-actions { gap: 4px !important; }
  .vre-btn { padding: 5px 8px !important; font-size: 0.7rem !important; }
  #vrReviewEditor .ql-editor {
    padding: 20px 16px !important;
    max-width: 100% !important;
    box-shadow: none !important;
  }
  .vre-comments-panel { display: none !important; }
}

/* ── Image annotation modal responsive ─────────────────────────── */
@media (max-width: 600px) {
  .img-annot-toolbar { padding: 8px !important; gap: 6px !important; }
  .img-annot-title { display: none; }
  .img-annot-tool { min-width: 40px !important; min-height: 40px !important; font-size: 16px !important; }
  .img-annot-color { width: 28px !important; height: 28px !important; }
  .img-annot-save, .img-annot-cancel { min-height: 40px !important; padding: 8px 14px !important; }
}

/* ── Resize handles — bigger tap target on mobile ───────────────── */
@media (max-width: 768px) {
  .ed-resize-handle {
    width: 16px !important;
    height: 16px !important;
  }
}