:root{
    --accent:#10B981;
    --accent-dark:#059669;
    --accent-light:#ECFDF5;
    --ink:#0F172A;
    --ink-soft:#475569;
    --line:#E7EAEE;
    --bg-app:#FAFAFA;
    --radius-lg:20px;
    --radius-md:16px;
    --radius-sm:12px;
  }
  *{box-sizing:border-box;}
  body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif; background:var(--bg-app); color:var(--ink); -webkit-font-smoothing:antialiased;}
  h1,h2,h3,.display{font-family:'Plus Jakarta Sans','Inter',sans-serif;}
  ::-webkit-scrollbar{width:8px; height:8px;}
  ::-webkit-scrollbar-thumb{background:#D9DEE5; border-radius:20px;}
  ::-webkit-scrollbar-track{background:transparent;}
  .card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:0 1px 2px rgba(15,23,42,.03), 0 1px 1px rgba(15,23,42,.02);}
  .card-hover{transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;}
  .card-hover:hover{box-shadow:0 20px 44px -18px rgba(15,23,42,.16); border-color:#DEE2E8; transform:translateY(-2px);}
  .btn-primary{background:var(--accent); color:#fff; transition:all .18s ease;}
  .btn-primary:hover{background:var(--accent-dark); box-shadow:0 8px 20px -6px rgba(16,185,129,.55); transform:translateY(-1px);}
  .btn-primary:active{transform:translateY(0);}
  .btn-ghost{background:#fff; border:1px solid var(--line); color:var(--ink); transition:all .18s ease;}
  .btn-ghost:hover{background:#F8FAFB; border-color:#D8DCE2; transform:translateY(-1px);}
  .nav-item{transition:background .18s ease, color .18s ease, transform .12s ease; position:relative;}
  .nav-item:hover{background:#F3F6F5; transform:translateX(1px);}
  .nav-item.active{background:var(--accent-light); color:var(--accent-dark); font-weight:600;}
  .nav-item.active svg{color:var(--accent-dark);}
  .nav-item.active::before{content:'';position:absolute;left:-9px;top:50%;transform:translateY(-50%);width:3px;height:18px;background:var(--accent);border-radius:0 3px 3px 0;}
  .fade-in{animation:fadeIn .35s ease both;}
  @keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
  .pop-in{animation:popIn .2s cubic-bezier(.2,.9,.3,1.2) both; transform-origin:top right;}
  @keyframes popIn{from{opacity:0; transform:scale(.95) translateY(-6px);} to{opacity:1; transform:scale(1) translateY(0);}}
  .toast-in{animation:toastIn .35s cubic-bezier(.2,.9,.3,1.2) both;}
  @keyframes toastIn{from{opacity:0; transform:translateY(12px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}}
  .field{width:100%; border:1px solid var(--line); border-radius:12px; padding:10px 14px; font-size:14px; color:var(--ink); background:#fff; transition:border-color .15s ease, box-shadow .15s ease;}
  .field:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(16,185,129,.12);}
  .label-sm{font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; display:block;}
  .bar-track{height:6px; border-radius:999px; background:#EEF1F3; overflow:hidden;}
  .bar-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),#34D399);}
  .chip{font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px;}
  .scrollbar-thin::-webkit-scrollbar{width:5px;}
  .tick{color:var(--accent);}
  .room-illustration{background:
      radial-gradient(120% 100% at 15% 0%, #EAF6F1 0%, transparent 55%),
      linear-gradient(160deg,#F4F7F6 0%, #E7EFEC 45%, #DCE9E3 100%);
  }
  .map-mock{
    background:
      radial-gradient(circle at 50% 50%, rgba(16,185,129,.16) 0%, rgba(16,185,129,.08) 30%, transparent 60%),
      repeating-linear-gradient(0deg, #EEF2F1 0 1px, transparent 1px 34px),
      repeating-linear-gradient(90deg, #EEF2F1 0 1px, transparent 1px 34px),
      #F7FAF9;
  }
  .waveform span{display:inline-block; width:2.5px; margin-right:2px; background:#CBD5DB; border-radius:3px; vertical-align:middle;}
  .waveform span.played{background:var(--accent);}
  [data-view]{display:none;}
  [data-view].current{display:block;}
  .skel-icon{background:var(--accent-light); color:var(--accent-dark);}
  .switch{width:38px;height:22px;border-radius:999px;background:#E2E6EA;position:relative;transition:background .2s;cursor:pointer;flex-shrink:0;}
  .switch.on{background:var(--accent);}
  .switch .dot{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:999px;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
  .switch.on .dot{transform:translateX(16px);}

  /* ---------- v2 premium layer ---------- */
  .search-shell{background:#F5F6F8; border:1px solid transparent; border-radius:var(--radius-sm); transition:all .18s ease;}
  .search-shell:focus-within{background:#fff; border-color:var(--accent); box-shadow:0 0 0 4px rgba(16,185,129,.12);}
  .search-shell input{background:transparent; border:0; outline:none; font-size:13.5px; width:100%;}
  .search-shell input::placeholder{color:#9AA5B1;}
  .pill{border:1px solid var(--line); border-radius:999px; background:#fff; transition:all .18s ease;}
  .pill:hover{border-color:#D8DCE2; background:#F8FAFB;}
  .plan-badge{background:linear-gradient(135deg,#0F172A,#1E293B); color:#fff;}
  .avatar-btn{transition:all .18s ease;}
  .avatar-btn:hover{border-color:#D8DCE2; background:#F8FAFB;}
  table.data-table{width:100%; border-collapse:collapse; font-size:13px;}
  table.data-table th{text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); padding:0 12px 10px; border-bottom:1px solid var(--line);}
  table.data-table td{padding:13px 12px; border-bottom:1px solid var(--line); color:var(--ink);}
  table.data-table tr:last-child td{border-bottom:none;}
  table.data-table tr{transition:background .15s ease;}
  table.data-table tbody tr:hover{background:#FAFBFC;}
  .status-dot{width:6px; height:6px; border-radius:999px; display:inline-block; margin-right:6px;}
  .segmented{background:#F1F3F5; border-radius:12px; padding:3px; display:inline-flex; gap:2px;}
  .segmented button{border-radius:9px; padding:7px 14px; font-size:12.5px; font-weight:600; color:var(--ink-soft); transition:all .18s ease;}
  .segmented button.active{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(15,23,42,.1);}
  .avatar-lg{width:72px; height:72px; border-radius:20px;}
  .settings-row{display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line);}
  .settings-row:last-child{border-bottom:none;}

  /* ---------- Voice & Video Labs ---------- */
  .vv-tab{padding:10px 18px; border-radius:11px; font-size:13.5px; font-weight:600; color:var(--ink-soft); transition:all .18s ease; cursor:pointer;}
  .vv-tab:hover{color:var(--ink);}
  .vv-tab.active{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(15,23,42,.1);}
  .vv-panel{display:none;}
  .vv-panel.current{display:block;}
  .voice-card{border:1.5px solid var(--line); border-radius:16px; padding:16px; cursor:pointer; transition:all .18s ease; background:#fff;}
  .voice-card:hover{border-color:#D8DCE2; background:#FAFBFC;}
  .voice-card.selected{border-color:var(--accent); background:var(--accent-light); box-shadow:0 0 0 3px rgba(16,185,129,.12);}
  .voice-play-btn{width:36px; height:36px; border-radius:999px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:all .18s ease; flex-shrink:0;}
  .voice-play-btn:hover{border-color:var(--accent); color:var(--accent-dark);}
  .voice-card.selected .voice-play-btn{background:var(--accent); border-color:var(--accent); color:#fff;}
  .vv-range{-webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:999px; background:#EEF1F3; outline:none;}
  .vv-range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:999px; background:var(--accent); border:3px solid #fff; box-shadow:0 1px 4px rgba(15,23,42,.25); cursor:pointer;}
  .vv-range::-moz-range-thumb{width:16px; height:16px; border-radius:999px; background:var(--accent); border:3px solid #fff; box-shadow:0 1px 4px rgba(15,23,42,.25); cursor:pointer; border:none;}
  .beta-chip{background:linear-gradient(135deg,#7C3AED,#A855F7); color:#fff; font-size:10.5px; font-weight:700; padding:2.5px 8px; border-radius:999px; letter-spacing:.02em;}
  .video-placeholder{border:1.5px dashed var(--line); border-radius:18px; background:
      radial-gradient(120% 100% at 20% 0%, #F6F0FF 0%, transparent 55%),
      linear-gradient(160deg,#FAFAFC 0%, #F3F1F7 100%);}
  .history-row{display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; transition:background .15s ease;}
  .history-row:hover{background:#FAFBFC;}
  .icon-btn{width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:all .15s ease; flex-shrink:0;}
  .icon-btn:hover{background:#F1F3F5; color:var(--ink);}

  /* ---------- Voice Studio premium ---------- */
  .voice-tile{border:1.5px solid var(--line); border-radius:var(--radius-md); padding:14px; cursor:pointer; transition:all .22s cubic-bezier(.2,.8,.3,1); background:#fff; position:relative; overflow:hidden;}
  .voice-tile:hover{border-color:#D8DCE2; transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(15,23,42,.18);}
  .voice-tile.selected{border-color:var(--accent); background:var(--accent-light); box-shadow:0 0 0 3px rgba(16,185,129,.14);}
  .tile-avatar{width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:14px; flex-shrink:0; transition:transform .22s ease;}
  .voice-tile:hover .tile-avatar{transform:scale(1.06) rotate(-2deg);}
  .tile-chip{font-size:10.5px; font-weight:600; padding:2.5px 7px; border-radius:999px; background:#F1F3F5; color:var(--ink-soft);}
  .premium-chip{font-size:10px; font-weight:700; padding:2.5px 8px; border-radius:999px; background:linear-gradient(135deg,#F4CE7E,#D9A441); color:#5A3E0B; display:inline-flex; align-items:center; gap:3px;}
  .tile-play-btn{width:34px; height:34px; border-radius:999px; background:#F5F6F8; display:flex; align-items:center; justify-content:center; transition:all .2s ease; flex-shrink:0; color:var(--ink-soft);}
  .tile-play-btn:hover{background:var(--accent); color:#fff; transform:scale(1.08);}
  .voice-tile.selected .tile-play-btn{background:var(--accent); color:#fff;}

  .studio-textarea{width:100%; border:1.5px solid var(--line); border-radius:var(--radius-md); padding:18px; font-size:14.5px; line-height:1.65; color:var(--ink); background:#FAFBFC; transition:all .2s ease; resize:none;}
  .studio-textarea:focus{outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 4px rgba(16,185,129,.1);}

  .ai-action-btn{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:12.5px; font-weight:600; color:var(--ink-soft); transition:all .18s ease; cursor:pointer;}
  .ai-action-btn:hover{border-color:var(--accent); color:var(--accent-dark); background:var(--accent-light); transform:translateY(-1px);}
  .ai-action-btn.pressed{animation:aiPress .35s ease;}
  @keyframes aiPress{0%{transform:scale(1);} 40%{transform:scale(.94); background:var(--accent-light); border-color:var(--accent);} 100%{transform:scale(1);}}

  .generate-btn{position:relative; overflow:hidden; background:linear-gradient(135deg,var(--accent),#0EA371); color:#fff; transition:all .22s ease;}
  .generate-btn:hover{box-shadow:0 14px 32px -10px rgba(16,185,129,.6); transform:translateY(-1px);}
  .generate-btn::after{content:''; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-100%); transition:transform .7s ease;}
  .generate-btn:hover::after{transform:translateX(100%);}
  .generate-btn.generating{pointer-events:none; opacity:.92;}

  .gen-progress-wrap{display:none;}
  .gen-progress-wrap.active{display:block; animation:fadeIn .3s ease both;}
  .gen-progress-track{height:8px; border-radius:999px; background:#EEF1F3; overflow:hidden; position:relative;}
  .gen-progress-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),#34D399,var(--accent)); background-size:200% 100%; width:0%; transition:width .35s ease; animation:genShimmer 1.4s linear infinite;}
  @keyframes genShimmer{0%{background-position:0% 0;} 100%{background-position:200% 0;}}
  .gen-stage-label{transition:opacity .3s ease, transform .3s ease;}
  .gen-stage-label.stage-out{opacity:0; transform:translateY(-4px);}
  .gen-wave span{display:inline-block; width:3px; margin-right:2.5px; background:var(--accent); border-radius:3px; vertical-align:middle; opacity:.35; animation:genPulse 1s ease-in-out infinite;}
  @keyframes genPulse{0%,100%{transform:scaleY(.4); opacity:.35;} 50%{transform:scaleY(1); opacity:1;}}

  .timeline{position:relative; height:34px; display:flex; align-items:center; cursor:pointer;}
  .timeline-track{width:100%; height:5px; border-radius:999px; background:#EEF1F3; position:relative; overflow:visible;}
  .timeline-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),#34D399); width:0%; position:relative; transition:width .1s linear;}
  .timeline-thumb{position:absolute; top:50%; right:-6px; transform:translateY(-50%); width:13px; height:13px; border-radius:999px; background:#fff; border:2.5px solid var(--accent); box-shadow:0 1px 4px rgba(15,23,42,.25); opacity:0; transition:opacity .18s ease;}
  .timeline:hover .timeline-thumb{opacity:1;}

  .player-icon-btn{width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:all .18s ease;}
  .player-icon-btn:hover{border-color:#D8DCE2; background:#F8FAFB; color:var(--ink); transform:translateY(-1px);}
  .player-icon-btn.danger:hover{border-color:#FCA5A5; background:#FEF2F2; color:#DC2626;}

  .mini-wave span{display:inline-block; width:2px; margin-right:1.5px; background:#D7DCE1; border-radius:2px; vertical-align:middle;}
  .history-card{border:1px solid var(--line); border-radius:var(--radius-md); padding:16px; background:#fff; transition:all .22s cubic-bezier(.2,.8,.3,1); cursor:pointer;}
  .history-card:hover{transform:translateY(-3px) scale(1.01); box-shadow:0 16px 34px -16px rgba(15,23,42,.2); border-color:#DEE2E8;}
  .status-chip-ready{font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--accent-light); color:var(--accent-dark);}

  .slider-block:hover .vv-range::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(16,185,129,.16);}
  .slide-fade-in{animation:slideFadeIn .35s cubic-bezier(.2,.85,.3,1) both;}
  @keyframes slideFadeIn{from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}}