.function-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px 14px;background:rgba(9,12,28,.9);border:1px solid var(--line);border-top:0}.function-tab{min-width:0;min-height:64px;display:flex;align-items:center;gap:11px;text-align:left;padding:10px 13px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:#101329;color:#ded9ef;font:inherit;cursor:pointer;transition:.18s ease}.function-tab:hover{border-color:rgba(168,85,247,.35);transform:translateY(-1px)}.function-tab.active{border-color:rgba(192,132,252,.58);background:linear-gradient(135deg,rgba(93,42,175,.46),rgba(28,24,62,.94));box-shadow:0 0 22px rgba(124,58,237,.13)}.function-tab>span:last-child{min-width:0;display:flex;flex-direction:column}.function-tab strong{font-size:12px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.function-tab small{margin-top:3px;color:#9590aa;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.function-icon{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;background:rgba(168,85,247,.12);color:#c084fc;font-weight:950}.function-tab.active .function-icon{background:linear-gradient(135deg,#6d28d9,#a855f7);color:#fff}.tool-page{min-width:0}#toolVoice .input-panel{border-radius:18px;margin-top:14px;border-top:1px solid var(--line)}

.transcript-tool,.keys-tool{padding:14px 26px 26px;background:rgba(9,12,28,.86);border-left:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0 0 24px 24px}.portal-panel{background:linear-gradient(180deg,rgba(15,18,39,.94),rgba(11,14,31,.96));border:1px solid var(--line);border-radius:18px;box-shadow:0 0 0 1px rgba(124,58,237,.045) inset}.tool-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px}.tool-kicker{display:block;color:#a87af5;font-size:9px;font-weight:950;letter-spacing:.14em}.tool-heading h1{margin:4px 0 0;font-size:24px;letter-spacing:-.04em}.tool-heading p{margin:6px 0 0;color:#a7a2bb;font-size:11px}.provider-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(110,231,183,.2);border-radius:999px;background:rgba(110,231,183,.06);font-size:10px}.provider-pill>span{width:7px;height:7px;border-radius:50%;background:#6ee7b7;box-shadow:0 0 10px #6ee7b7}

.tt-settings{display:grid;grid-template-columns:1.35fr .7fr 1fr;gap:12px;margin-top:12px;padding:14px}.tt-setting-block{min-width:0}.portal-label{display:block;margin-bottom:7px;color:#dcd7eb;font-size:10px;font-weight:850}.portal-label span{color:#77728c;font-weight:600}.tt-provider-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tt-provider-card{display:block;padding:10px 11px;border:1px solid rgba(255,255,255,.075);border-radius:11px;background:#101329;cursor:pointer}.tt-provider-card input{position:absolute;opacity:0}.tt-provider-card.active{border-color:rgba(168,85,247,.62);background:linear-gradient(135deg,rgba(93,42,175,.28),#101329)}.tt-provider-card div{display:flex;align-items:center;gap:6px}.tt-provider-card strong{font-size:11px}.tt-provider-card small{display:block;margin-top:4px;color:#8f8aa4;font-size:8px}.recommended{padding:3px 5px;border-radius:999px;background:#a3e635;color:#18210a;font-size:6px;font-weight:950;text-transform:uppercase}.portal-input{width:100%;height:42px;padding:0 12px;border:1px solid rgba(139,92,246,.2);border-radius:10px;background:#101329;color:#f2eff9;font:inherit;font-size:11px;outline:none}.portal-input:focus{border-color:rgba(168,85,247,.58);box-shadow:0 0 0 3px rgba(124,58,237,.08)}select.portal-input{appearance:auto}.tt-known .portal-input{height:42px}
.portal-error{position:relative;display:flex;align-items:center;gap:9px;margin:12px 0;padding:11px 42px 11px 13px;border:1px solid rgba(244,63,94,.28);border-radius:12px;background:rgba(76,16,32,.28);color:#ffd8e0;font-size:10px}.portal-error-action{margin-left:auto;min-height:30px;padding:0 10px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#281633;color:#fff;font:inherit;font-size:9px;font-weight:850;cursor:pointer}.portal-error-close{position:absolute;right:8px;top:7px;width:28px;height:28px;border:0;border-radius:8px;background:rgba(255,255,255,.05);color:#fff;font-size:17px;cursor:pointer}

.tt-source{margin-top:12px;padding:14px}.tt-tabs{display:inline-flex;gap:5px;padding:4px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:#0b0e1e}.tt-tab{min-height:36px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:#aaa5ba;font:inherit;font-size:10px;font-weight:850;cursor:pointer}.tt-tab.active{background:linear-gradient(135deg,#6d28d9,#a855f7);color:#fff}.tt-source-content{margin-top:14px}.portal-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.portal-row-head>strong,.portal-row-head h2{margin:0;font-size:12px}.portal-row-head>span{color:#88839a;font-size:9px}.tt-drop-zone{min-height:150px;margin-top:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px dashed rgba(168,85,247,.25);border-radius:14px;background:#0c0f20;cursor:pointer}.tt-drop-zone:hover{border-color:rgba(168,85,247,.52);background:#0e1125}.tt-upload-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:rgba(168,85,247,.12);color:#c084fc;font-size:20px}.tt-drop-zone strong{font-size:11px}.tt-drop-zone small,.portal-muted{color:#827d94;font-size:9px}.tt-selected-files{display:grid;gap:7px;margin-top:9px}.tt-file-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:#0e1123}.tt-file-row>div{min-width:0;flex:1}.tt-file-row strong{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tt-file-row small{color:#827d94;font-size:8px}.tt-file-remove{width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:#9e99ac;font-size:16px;cursor:pointer}.portal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}.portal-primary,.portal-secondary,.portal-link-btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:10px;font:inherit;font-size:10px;font-weight:900;text-decoration:none;cursor:pointer}.portal-primary{border:1px solid rgba(192,132,252,.4);background:linear-gradient(135deg,#6d28d9,#a855f7);color:#fff;box-shadow:0 0 18px rgba(139,92,246,.15)}.portal-primary:disabled{opacity:.45;cursor:not-allowed}.portal-secondary{border:1px solid rgba(255,255,255,.08);background:#11152a;color:#e8e3f2}.portal-secondary.small{min-height:32px;padding:0 10px;font-size:8px}.portal-link-btn{border:1px solid rgba(168,85,247,.2);background:rgba(124,58,237,.08);color:#c9a7ff}.tt-link-row{display:flex;align-items:end;gap:9px}.tt-link-grow{flex:1;min-width:0}.tt-link-row .portal-primary{height:42px}.tt-video-info{margin-top:12px;padding:12px;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:#0e1123}.tt-video-title{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.06)}.tt-video-title>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(168,85,247,.12);color:#c084fc}.tt-video-title div{min-width:0}.tt-video-title strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tt-video-title small{display:block;margin-top:3px;color:#858097;font-size:8px}.tt-link-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.tt-link-result{margin-top:12px}

.tt-results-section{margin-top:12px}.tt-results{display:grid;gap:9px;margin-top:9px}.tt-result-card,.tt-link-result-card{padding:12px;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:linear-gradient(180deg,#101329,#0d1022)}.tt-result-card.ok{border-color:rgba(110,231,183,.16)}.tt-result-card.failed{border-color:rgba(244,63,94,.2)}.tt-result-head{display:flex;align-items:center;gap:9px}.tt-result-number{width:27px;height:27px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:rgba(168,85,247,.13);color:#c084fc;font-size:9px;font-weight:950}.tt-result-copy{min-width:0;flex:1}.tt-result-copy strong{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tt-result-copy small{display:block;margin-top:3px;color:#858097;font-size:8px}.tt-result-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.tt-transcript-text{margin-top:9px;padding:11px;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:#090c1a;color:#e6e1ef;font-size:10px;line-height:1.75;white-space:pre-wrap;max-height:420px;overflow:auto}.tt-download-link{background:linear-gradient(135deg,#5b21b6,#7c3aed);color:#fff}

.keys-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.key-card{padding:17px}.key-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.key-card-head strong{display:block;font-size:14px}.key-card-head small{display:block;margin-top:4px;color:#8d88a2;font-size:9px}.key-badge{padding:5px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:#12162a;color:#8f8a9e;font-size:8px;font-weight:900}.key-badge.saved{border-color:rgba(110,231,183,.2);background:rgba(110,231,183,.06);color:#86e9b9}.key-input-row{display:grid;grid-template-columns:1fr auto;gap:7px}.key-input-row .portal-secondary{height:42px}.key-actions{align-items:center}.key-message{min-height:16px;margin:8px 0 0;color:#8e89a0;font-size:9px}.key-message.good{color:#75deb0}.key-message.bad{color:#ffb3c2}.keys-note{margin:10px 3px 0;color:#77728b;font-size:9px}

@media(max-width:900px){.function-nav{grid-template-columns:1fr 1fr 1fr;padding:9px 8px}.function-tab{min-height:54px;padding:8px;gap:7px}.function-icon{width:29px;height:29px}.function-tab strong{font-size:9px}.function-tab small{display:none}.transcript-tool,.keys-tool{padding:10px 14px 18px}.tool-heading{padding:14px}.tool-heading h1{font-size:18px}.tool-heading p{font-size:9px}.tt-settings{grid-template-columns:1fr 1fr;padding:11px}.tt-known{grid-column:1/-1}.keys-grid{grid-template-columns:1fr}.tt-source{padding:11px}}
@media(max-width:560px){.function-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.function-tab{justify-content:center;text-align:center;flex-direction:column;gap:4px;min-height:60px;padding:6px 4px}.function-tab strong{font-size:8px}.function-icon{width:27px;height:27px;font-size:11px}.tool-heading{align-items:flex-start}.provider-pill{font-size:8px}.tt-settings{grid-template-columns:1fr}.tt-known{grid-column:auto}.tt-provider-grid{grid-template-columns:1fr 1fr}.tt-link-row{align-items:stretch;flex-direction:column}.tt-link-row .portal-primary{width:100%}.tt-link-options{grid-template-columns:1fr}.portal-actions>*{flex:1}.key-actions .portal-link-btn{flex-basis:100%}.portal-error{align-items:flex-start;flex-wrap:wrap}.portal-error-action{margin-left:0}}

/* =========================================================
   JJ Mstudio layout refresh v3.1
   Same visual theme, wider workspace, simpler hierarchy.
   ========================================================= */
.studio-shell{
  width:min(1460px,calc(100% - 36px));
  margin:22px auto 48px;
}
.studio-header{
  height:78px;
  padding:0 24px;
  border-radius:24px 24px 0 0;
}
.brand-mark{font-size:40px}
.brand-copy strong{font-size:20px}

/* Compact product navigation: one clean tab row instead of three large cards. */
.function-nav{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  padding:7px 22px 8px;
  background:rgba(9,12,28,.9);
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-top:0;
}
.function-tab{
  min-height:44px;
  justify-content:center;
  text-align:center;
  padding:0 14px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:#aaa5ba;
  transform:none!important;
}
.function-tab:hover{
  border-color:rgba(168,85,247,.15);
  background:rgba(255,255,255,.025);
}
.function-tab.active{
  border-color:rgba(168,85,247,.28);
  background:linear-gradient(135deg,rgba(109,40,217,.22),rgba(168,85,247,.08));
  box-shadow:none;
  color:#fff;
}
.function-tab>span:last-child{display:block}
.function-tab strong{font-size:11px;letter-spacing:.01em}
.function-tab small,.function-icon{display:none}

/* Voice + SRT: large writing canvas on the left, controls on the right. */
#toolVoice.active{
  display:grid;
  grid-template-columns:minmax(0,1.72fr) minmax(350px,.72fr);
  grid-template-areas:
    "voiceInput voiceControls"
    "voiceInput voiceProject"
    "voiceAdvanced voiceAdvanced"
    "voiceProgress voiceProgress"
    "voiceStatus voiceStatus"
    "voiceResult voiceResult";
  gap:14px;
  padding:18px 22px 24px;
  background:rgba(9,12,28,.86);
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:0 0 24px 24px;
}
#toolVoice .input-panel{
  grid-area:voiceInput;
  margin:0;
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  min-width:0;
}
#toolVoice .input-panel textarea{
  min-height:490px;
  height:calc(100% - 76px);
  resize:vertical;
  font-size:15px;
  line-height:1.85;
}
#toolVoice .middle-grid{
  grid-area:voiceControls;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  padding:0;
  background:transparent;
  border:0;
  min-width:0;
}
#toolVoice .voice-summary-panel,
#toolVoice .tune-panel{
  min-height:auto;
  padding:17px;
}
#toolVoice .gem-side{display:none}
#toolVoice .selected-voice-wrap{
  grid-template-columns:74px minmax(0,1fr);
  gap:13px;
}
#toolVoice .avatar-wrap,#toolVoice .selected-avatar{width:74px;height:74px}
#toolVoice .selected-avatar{border-radius:21px}
#toolVoice .change-voice{
  grid-column:1/-1;
  width:100%;
  min-height:36px;
}
#toolVoice .project-row{
  grid-area:voiceProject;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  padding:0;
  background:transparent;
  border:0;
  min-width:0;
}
#toolVoice .project-box{padding:14px 15px}
#toolVoice .advanced-toggle,#toolVoice .generate-btn{min-height:52px}
#toolVoice .generate-btn{font-size:13px}
#toolVoice .advanced-panel{grid-area:voiceAdvanced;margin:0;padding:18px}
#toolVoice .progress-wrap{grid-area:voiceProgress;margin:0}
#toolVoice .status{grid-area:voiceStatus;margin:0}
#toolVoice .result-panel{grid-area:voiceResult;margin:0;padding:18px}
#toolVoice .result-main{grid-template-columns:58px minmax(0,1fr) 190px;gap:18px}

/* Transcript + Downloader: keep only the controls people need, with more breathing room. */
.transcript-tool,.keys-tool{
  padding:20px 22px 28px;
}
.tool-heading{
  padding:6px 2px 16px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.tool-kicker,.provider-pill{display:none}
.tool-heading h1{
  margin:0;
  font-size:28px;
  letter-spacing:-.045em;
}
.tool-heading p{
  margin-top:7px;
  font-size:11px;
  line-height:1.6;
}
.tt-settings{
  grid-template-columns:minmax(300px,1.15fr) minmax(180px,.55fr) minmax(260px,1fr);
  gap:14px;
  margin-top:0;
  padding:18px;
}
.portal-label{font-size:11px;margin-bottom:8px}
.tt-provider-card{padding:12px 13px;border-radius:12px}
.tt-provider-card strong{font-size:12px}
.tt-provider-card small{font-size:9px;margin-top:5px}
.portal-input{height:44px;font-size:12px}
.tt-known .portal-input{height:44px}
.tt-source{margin-top:14px;padding:20px}
.tt-tabs{margin-bottom:2px}
.tt-tab{min-height:38px;font-size:11px}
.tt-source-content{margin-top:16px}
.portal-row-head>strong,.portal-row-head h2{font-size:13px}
.portal-row-head>span{font-size:10px}
.tt-drop-zone{min-height:210px;margin-top:12px;border-radius:16px}
.tt-upload-icon{width:44px;height:44px;border-radius:13px;font-size:23px}
.tt-drop-zone strong{font-size:12px}
.tt-drop-zone small,.portal-muted{font-size:10px}
.portal-primary,.portal-secondary,.portal-link-btn{min-height:41px;font-size:11px;padding:0 16px}
.tt-link-row .portal-primary{height:44px}
.tt-video-info{padding:16px;border-radius:15px}
.tt-video-title strong{font-size:12px}
.tt-video-title small{font-size:9px}
.tt-link-options{gap:14px;margin-top:14px}
.tt-results-section{margin-top:16px}
.tt-result-card,.tt-link-result-card{padding:15px;border-radius:15px}
.tt-result-copy strong{font-size:11px}
.tt-result-copy small{font-size:9px}
.tt-transcript-text{font-size:11px;line-height:1.8;padding:14px}

/* API Keys: calm two-card settings page. */
.keys-grid{
  width:min(1080px,100%);
  margin:0 auto;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.key-card{padding:22px}
.key-card-head{margin-bottom:20px}
.key-card-head strong{font-size:16px}
.key-card-head small{font-size:10px}
.key-badge{font-size:9px;padding:6px 9px}
.key-input-row{gap:9px}
.key-input-row .portal-secondary{height:44px}
.key-message{font-size:10px}
.keys-note{width:min(1080px,100%);margin:12px auto 0;font-size:10px}

@media(max-width:1100px){
  .studio-shell{width:min(100% - 22px,1100px);margin-top:12px}
  #toolVoice.active{
    grid-template-columns:1fr;
    grid-template-areas:
      "voiceInput"
      "voiceControls"
      "voiceProject"
      "voiceAdvanced"
      "voiceProgress"
      "voiceStatus"
      "voiceResult";
    padding:14px;
  }
  #toolVoice .input-panel textarea{min-height:280px;height:auto}
  #toolVoice .middle-grid{grid-template-columns:minmax(0,1fr) minmax(280px,.7fr)}
  #toolVoice .voice-summary-panel,#toolVoice .tune-panel{min-height:150px}
  #toolVoice .project-row{grid-template-columns:minmax(0,1fr) minmax(220px,.55fr) minmax(240px,.62fr)}
  .tt-settings{grid-template-columns:1fr 1fr}
  .tt-known{grid-column:1/-1}
}

@media(max-width:760px){
  .studio-shell{width:calc(100% - 12px);margin:6px auto 24px}
  .studio-header{height:64px;padding:0 14px;border-radius:18px 18px 0 0}
  .brand-mark{font-size:32px}
  .brand-copy strong{font-size:15px}
  .brand-copy small{font-size:9px}
  .function-nav{padding:6px;gap:4px}
  .function-tab{min-height:42px;padding:0 5px;border-radius:9px}
  .function-tab strong{font-size:9px}
  #toolVoice.active{padding:9px;gap:9px}
  #toolVoice .input-panel{padding:14px}
  #toolVoice .input-panel textarea{min-height:230px;font-size:12px}
  #toolVoice .middle-grid{grid-template-columns:1fr;gap:9px}
  #toolVoice .project-row{grid-template-columns:1fr;gap:8px}
  #toolVoice .voice-summary-panel,#toolVoice .tune-panel{min-height:auto;padding:13px}
  #toolVoice .result-main{grid-template-columns:42px minmax(0,1fr);gap:10px}
  #toolVoice .downloads{grid-column:1/-1;grid-template-columns:1fr 1fr}
  .transcript-tool,.keys-tool{padding:12px 10px 18px}
  .tool-heading{padding:3px 3px 12px}
  .tool-heading h1{font-size:20px}
  .tool-heading p{font-size:9px}
  .tt-settings{grid-template-columns:1fr;padding:12px;gap:11px}
  .tt-known{grid-column:auto}
  .tt-source{padding:12px;margin-top:10px}
  .tt-drop-zone{min-height:150px}
  .keys-grid{grid-template-columns:1fr;gap:10px}
  .key-card{padding:16px}
}

@media(max-width:430px){
  .function-tab strong{font-size:8px}
  .tool-heading h1{font-size:18px}
  .portal-actions>*{flex:1}
  .key-actions .portal-link-btn{flex-basis:100%}
}