:root {
  --bg: #070b12; --surface: #0c121d; --surface-2: #111a28; --surface-3: #162132;
  --line: rgba(148, 174, 207, .14); --line-strong: rgba(148, 174, 207, .24);
  --text: #f0f6ff; --muted: #8fa0b7; --faint: #5f7087; --cyan: #65e7f5;
  --blue: #6a8dff; --green: #64e6aa; --amber: #f7c66a; --red: #ff7d8e;
  --radius: 18px; --shadow: 0 22px 70px rgba(0,0,0,.3);
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 70% -20%, rgba(54,96,160,.15), transparent 42%), var(--bg); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.hidden { display: none !important; }
.ambient { position: fixed; z-index: 0; width: 360px; height: 360px; border-radius: 50%; filter: blur(110px); opacity: .12; pointer-events: none; }
.ambient-a { top: -150px; right: 8vw; background: var(--blue); }
.ambient-b { bottom: -180px; left: -100px; background: var(--cyan); }
.center-screen { position: relative; z-index: 2; min-height: 100vh; display: grid; place-content: center; padding: 24px; }
#boot-screen { color: var(--muted); text-align: center; }
.boot-mark { display: flex; height: 42px; gap: 5px; align-items: center; justify-content: center; }
.boot-mark span { width: 5px; height: 14px; border-radius: 6px; background: var(--cyan); animation: wave 1s ease-in-out infinite; }
.boot-mark span:nth-child(2) { height: 30px; animation-delay: .12s; }.boot-mark span:nth-child(3) { height: 20px; animation-delay: .24s; }
@keyframes wave { 50% { transform: scaleY(.5); opacity: .55; } }

.login-card { width: min(100%, 430px); padding: 34px; border: 1px solid var(--line-strong); border-radius: 26px; background: rgba(12,18,29,.88); box-shadow: var(--shadow); backdrop-filter: blur(24px); }
.brand-lockup, .sidebar-brand { display: flex; align-items: center; gap: 14px; }.brand-lockup h1 { margin: 2px 0 0; font-size: 27px; letter-spacing: -.04em; }
.brand-symbol { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(101,231,245,.35); border-radius: 16px; color: var(--cyan); font-weight: 800; letter-spacing: -.08em; background: linear-gradient(145deg,rgba(101,231,245,.14),rgba(106,141,255,.08)); box-shadow: inset 0 0 24px rgba(101,231,245,.05); }
.brand-symbol.small { width: 39px; height: 39px; border-radius: 12px; font-size: 13px; }
.eyebrow { margin: 0; color: var(--cyan); font-size: 10px; font-weight: 750; letter-spacing: .17em; text-transform: uppercase; }
.login-intro { color: var(--muted); margin: 28px 0 24px; line-height: 1.7; }.security-note { margin: 21px 0 0; color: var(--faint); font-size: 12px; text-align: center; }.security-note span { color: var(--green); margin-right: 5px; }
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 20px;padding:4px;border:1px solid var(--line);border-radius:12px;background:rgba(5,10,17,.38)}.auth-tab{min-height:38px;border:0;border-radius:9px;color:var(--muted);background:transparent;cursor:pointer;font:inherit;font-size:12px;font-weight:750}.auth-tab.active{color:#07151a;background:linear-gradient(135deg,var(--cyan),#89f3c9)}.code-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.code-input-row .button{height:41px}.auth-continue{display:block;margin:18px auto 0}.account-balance{padding:5px 9px;border:1px solid rgba(101,231,245,.2);border-radius:99px;color:var(--cyan);background:rgba(101,231,245,.06);font-size:10px;white-space:nowrap}

.form-stack, .studio-form { display: grid; gap: 17px; }
label { display: grid; gap: 8px; color: #b9c6d8; font-size: 13px; font-weight: 600; }
input, textarea, select { width: 100%; border: 1px solid var(--line-strong); border-radius: 11px; outline: 0; color: var(--text); background: rgba(5,10,17,.7); padding: 11px 12px; transition: border-color 160ms, box-shadow 160ms, background 160ms; }
textarea { resize: vertical; line-height: 1.7; min-height: 76px; }
input:hover, textarea:hover, select:hover { border-color: rgba(148,174,207,.38); }
input:focus, textarea:focus, select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(101,231,245,.11); background: rgba(9,16,26,.9); }
input:disabled, textarea:disabled, select:disabled { cursor: not-allowed; opacity: .52; }
select option { background: var(--surface); }
.form-error { min-height: 18px; margin: 0; color: var(--red); font-size: 12px; line-height: 1.5; }

.button, .icon-button, .nav-item, .text-button { position: relative; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 170ms, background 170ms, border-color 170ms, box-shadow 170ms, transform 130ms, opacity 170ms; }
.button { min-height: 42px; display: inline-flex; justify-content: center; align-items: center; gap: 9px; padding: 0 16px; border: 1px solid transparent; border-radius: 11px; font-size: 13px; font-weight: 750; white-space: nowrap; }
.button.wide { width: 100%; }.button.primary { color: #061319; background: linear-gradient(135deg,var(--cyan),#89f3c9); box-shadow: 0 8px 28px rgba(101,231,245,.13); }.button.primary:hover { filter: brightness(1.07); box-shadow: 0 11px 34px rgba(101,231,245,.22); transform: translateY(-1px); }
.button.secondary { color: #cfdbea; border-color: var(--line-strong); background: rgba(17,26,40,.78); }.button.secondary:hover, .button.ghost:hover { color: white; border-color: rgba(101,231,245,.35); background: rgba(25,39,59,.86); transform: translateY(-1px); }
.button.ghost { color: var(--muted); border-color: var(--line); background: transparent; }.button:active, .icon-button:active, .nav-item:active, .text-button:active { transform: scale(.97); }
.button:focus-visible, .icon-button:focus-visible, .nav-item:focus-visible, .text-button:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.button:disabled, .icon-button:disabled { cursor: wait; opacity: .62; transform: none; filter: none; }
.button[data-state="success"] { color: #06140e; background: var(--green); }.button[data-state="error"] { color: white; background: #b93f55; }
.spinner { display: none; width: 15px; height: 15px; flex: 0 0 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .65s linear infinite; }.loading .spinner { display: inline-block; }.loading > .button-label { opacity: .75; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-button { width: 38px; height: 38px; display: inline-grid; place-items: center; flex: 0 0 38px; border: 1px solid var(--line); border-radius: 10px; background: rgba(17,26,40,.65); color: var(--muted); }.icon-button:hover { color: var(--cyan); background: var(--surface-3); border-color: rgba(101,231,245,.3); transform: translateY(-1px); }.icon-button .spinner { grid-area: 1/1; }.icon-button.loading > span:not(.spinner) { opacity: 0; }
.text-button { padding: 4px 0; color: var(--cyan); background: none; font-size: 12px; font-weight: 700; }.text-button:hover { color: white; }.back-button { margin-bottom: 22px; }

.app-shell { position: relative; z-index: 1; min-height: 100vh; display: grid; grid-template-columns: 246px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; z-index: 30; display: flex; flex-direction: column; padding: 22px 15px; border-right: 1px solid var(--line); background: rgba(7,11,18,.88); backdrop-filter: blur(22px); }
.sidebar-brand { padding: 0 9px 25px; }.sidebar-brand div:last-child { display: grid; gap: 3px; }.sidebar-brand strong { font-size: 15px; }.sidebar-brand span { color: var(--faint); font-size: 10px; letter-spacing: .08em; }
#main-nav { display: grid; gap: 6px; }.nav-item { width: 100%; min-height: 43px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 10px; color: var(--muted); background: transparent; text-align: left; font-size: 13px; font-weight: 650; }.nav-item:hover { color: white; background: rgba(22,33,50,.7); transform: translateX(2px); }.nav-item.active { color: var(--cyan); background: linear-gradient(90deg,rgba(101,231,245,.11),rgba(101,231,245,.025)); box-shadow: inset 2px 0 var(--cyan); }.nav-icon { width: 20px; font-size: 17px; text-align: center; }
.sidebar-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 15px 8px 0; border-top: 1px solid var(--line); }.user-chip { min-width: 0; display: flex; align-items: center; gap: 10px; }.user-chip > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 50%; background: rgba(106,141,255,.16); color: #aabaff; font-weight: 800; }.user-chip div { min-width: 0; display: grid; }.user-chip strong { overflow: hidden; text-overflow: ellipsis; font-size: 12px; }.user-chip small { color: var(--faint); font-size: 10px; }
.workspace { min-width: 0; display: flex; flex-direction: column; }.topbar { height: 78px; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 0 clamp(20px,3vw,42px); border-bottom: 1px solid var(--line); background: rgba(7,11,18,.8); backdrop-filter: blur(20px); }.topbar h2 { margin: 3px 0 0; font-size: 20px; letter-spacing: -.03em; }.topbar-status { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }.topbar-status time { color: var(--faint); margin-left: 8px; }.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }.mobile-menu { display: none; }
.content-area { width: 100%; max-width: 1600px; margin: 0 auto; padding: clamp(25px,3vw,44px); flex: 1; }.page { display: none; opacity: 0; transform: translateY(6px); }.page.active { display: block; animation: page-in 220ms ease-out forwards; }@keyframes page-in { to { opacity: 1; transform: translateY(0); } }
.hero-row { min-height: 115px; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }.hero-row.compact { min-height: 104px; }.hero-row h3, .section-heading h3, .app-detail-head h3 { margin: 0 0 7px; font-size: clamp(22px,2.3vw,32px); letter-spacing: -.04em; }.hero-row p, .app-detail-head p { margin: 0; color: var(--muted); line-height: 1.7; font-size: 13px; }
.stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-bottom: 39px; }.stat-card { min-height: 112px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg,rgba(17,26,40,.9),rgba(9,15,24,.75)); }.stat-label { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; }.stat-icon { color: var(--cyan); }.stat-value { margin-top: 16px; font-size: 27px; font-weight: 780; letter-spacing: -.04em; }.stat-value small { margin-left: 4px; color: var(--faint); font-size: 11px; font-weight: 500; }
.section-heading { min-height: 62px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 12px; }.section-heading h3 { margin-top: 5px; font-size: 21px; }.section-actions { display: flex; align-items: center; gap: 8px; }
.badge { display: inline-flex; min-height: 23px; align-items: center; padding: 0 9px; border: 1px solid rgba(100,230,170,.24); border-radius: 99px; color: var(--green); background: rgba(100,230,170,.07); font-size: 10px; font-weight: 750; }.badge.muted { color: var(--muted); border-color: var(--line); background: var(--surface); }.badge.warn { color: var(--amber); border-color: rgba(247,198,106,.25); background: rgba(247,198,106,.07); }.badge.error { color: var(--red); border-color: rgba(255,125,142,.25); background: rgba(255,125,142,.07); }
.gpu-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }.gpu-card { min-height: 166px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(12,18,29,.78); transition: transform 190ms, border-color 190ms, box-shadow 190ms; }.gpu-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: 0 15px 35px rgba(0,0,0,.18); }.gpu-card.unavailable { opacity: .6; }.gpu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }.gpu-name { min-width: 0; }.gpu-name strong { display: block; font-size: 12px; }.gpu-name span { display: block; margin-top: 3px; overflow: hidden; color: var(--faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.util-value { font-size: 19px; font-weight: 750; color: var(--cyan); }.metric { margin-top: 15px; }.metric-row { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }.bar { height: 5px; margin-top: 7px; overflow: hidden; border-radius: 5px; background: rgba(148,174,207,.1); }.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--blue),var(--cyan)); }.gpu-foot { display: flex; justify-content: space-between; margin-top: 15px; color: var(--faint); font-size: 10px; }
.skeleton-card, .row-skeleton { position: relative; overflow: hidden; background: #101824 !important; }.skeleton-card::after, .row-skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent); animation:shimmer 1.45s infinite; }@keyframes shimmer { to { transform:translateX(100%); } }.row-skeleton { height: 27px; border-radius: 8px; }

.app-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }.app-card { min-height: 230px; display: flex; flex-direction: column; padding: 23px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg,rgba(17,26,40,.88),rgba(10,16,26,.73)); transition: transform 190ms, box-shadow 190ms, border-color 190ms; }.app-card:hover { transform: translateY(-3px); border-color: rgba(101,231,245,.27); box-shadow: 0 18px 42px rgba(0,0,0,.24); }.app-card h4 { margin: 18px 0 7px; font-size: 18px; }.app-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }.app-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 20px; }.app-card-foot small { color: var(--faint); }.app-icon { width: 53px; height: 53px; display: flex; align-items: center; justify-content: center; gap: 3px; border: 1px solid rgba(101,231,245,.22); border-radius: 16px; background: rgba(101,231,245,.07); }.waveform-icon i { width: 3px; height: 16px; border-radius: 4px; background: var(--cyan); }.waveform-icon i:nth-child(2),.waveform-icon i:nth-child(4){height:27px}.waveform-icon i:nth-child(3){height:37px}
.app-workspace-open .content-area{max-width:none;padding:24px clamp(18px,2.2vw,34px) 44px}.app-workspace-open .fish-composer,.app-workspace-open .clone-workspace,.app-workspace-open .asr-workspace{width:min(1280px,100%)}.app-workspace-open .fish-composer{grid-template-columns:320px minmax(0,1fr)}.app-workspace-open .inpaint-layout{grid-template-columns:minmax(0,1fr) 400px;min-height:650px}.app-workspace-open .inpaint-file-drop{min-height:530px}
@media(min-width:761px){.app-shell.app-workspace-open{grid-template-columns:210px minmax(0,1fr)}.app-workspace-open .sidebar{padding-inline:12px}.app-workspace-open .sidebar-brand{padding-inline:5px}.app-workspace-open .nav-item{padding-inline:9px}}
.studio-history-panel{margin-top:20px;padding:26px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,rgba(17,26,40,.9),rgba(9,15,24,.82));box-shadow:0 18px 55px rgba(0,0,0,.18)}.studio-history-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.studio-history-head h3{margin:5px 0 3px;font-size:22px}.studio-history-head>div>span{color:var(--faint);font-size:11px}.studio-history-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.studio-history-item{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 16px;border:1px solid rgba(148,174,207,.12);border-radius:14px;background:rgba(5,10,17,.38)}.studio-history-copy{min-width:0}.studio-history-copy>div{display:flex;align-items:center;gap:8px}.studio-history-copy strong{color:#d8e3ef;font-size:12px}.studio-history-copy .badge{min-height:20px;padding-inline:7px;font-size:9px}.studio-history-copy p{margin:7px 0 5px;overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.studio-history-copy time{color:var(--faint);font-size:9px}.studio-history-result{flex:0 0 auto}.studio-history-action{padding:7px 10px;border:1px solid rgba(101,231,245,.22);border-radius:8px;color:var(--cyan);background:rgba(101,231,245,.055);cursor:pointer;font:inherit;font-size:10px;font-weight:700;text-decoration:none;white-space:nowrap}.studio-history-action:hover{color:#fff;border-color:rgba(101,231,245,.42);background:rgba(101,231,245,.1)}.studio-history-expired{color:var(--faint);font-size:10px}.studio-history-empty{min-height:150px;display:flex;align-items:center;justify-content:center;gap:14px;color:var(--faint);text-align:left}.studio-history-empty>span{font-size:28px}.studio-history-empty strong{color:var(--muted);font-size:13px}.studio-history-empty p{margin:5px 0 0;font-size:11px}.studio-history-loading{min-height:180px;display:flex;align-items:center;justify-content:center;gap:6px}.studio-history-loading span{width:6px;height:24px;border-radius:9px;background:var(--cyan);animation:wave 1s ease-in-out infinite}.studio-history-loading span:nth-child(2){height:40px;animation-delay:.12s}.studio-history-loading span:nth-child(3){height:30px;animation-delay:.24s}
.app-detail-head { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }.title-line { display: flex; align-items: center; gap: 12px; }.title-line h3 { margin: 0; }.fish-attribution { display: inline-block; margin-top: 8px; color: var(--cyan); font-size: 11px; font-weight: 700; text-decoration: none; }.fish-attribution:hover { text-decoration: underline; }
.studio-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.75fr); gap: 16px; align-items: start; }.panel, .table-panel { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(12,18,29,.78); }.panel { padding: 22px; }.panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }.panel-title h4 { margin: 3px 0 0; font-size: 17px; }.counter { color: var(--faint); font-size: 11px; }.counter.over { color: var(--red); }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }.form-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }.reference-box, .advanced-box { border: 1px solid var(--line); border-radius: 12px; background: rgba(5,10,17,.32); }.reference-box summary, .advanced-box summary { padding: 13px 15px; cursor: pointer; color: #c3cfde; font-size: 12px; font-weight: 700; }.reference-fields, .advanced-box > .form-grid { display: grid; gap: 13px; padding: 0 15px 15px; }.file-drop { min-height: 100px; place-content: center; justify-items: center; padding: 14px; border: 1px dashed var(--line-strong); border-radius: 11px; text-align: center; cursor: pointer; transition: border-color 160ms,background 160ms; }.file-drop:hover, .file-drop.dragging { border-color: var(--cyan); background: rgba(101,231,245,.05); }.file-drop input { position: absolute; opacity: 0; pointer-events: none; }.file-drop small { color: var(--faint); font-weight: 400; }.upload-icon { color: var(--cyan); font-size: 22px; }.switch-label { align-self: end; display: flex; align-items: center; justify-content: space-between; min-height: 41px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; }.switch-label input { position: absolute; opacity: 0; width: 0; }.switch-label i { position: relative; width: 35px; height: 20px; border-radius: 20px; background: var(--surface-3); transition: background 160ms; }.switch-label i::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:var(--muted); transition:transform 160ms,background 160ms; }.switch-label input:checked+i { background:rgba(101,231,245,.23); }.switch-label input:checked+i::after { transform:translateX(15px); background:var(--cyan); }
.safety-notice { margin: 0; padding: 12px 14px; border: 1px solid rgba(247,198,106,.2); border-radius: 11px; color: #d7bd8c; background: rgba(247,198,106,.055); font-size: 11px; line-height: 1.65; }
.result-panel { min-height: 410px; position: sticky; top: 98px; }.empty-result { min-height: 235px; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--muted); }.empty-result p { max-width: 250px; margin: 8px 0 0; color: var(--faint); font-size: 11px; line-height: 1.6; }.result-orb { width: 57px; height: 57px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 50%; color: var(--cyan); background: rgba(101,231,245,.08); box-shadow: 0 0 40px rgba(101,231,245,.08); font-size: 21px; }.result-loading .result-orb { animation: breathe 1.2s ease-in-out infinite; }@keyframes breathe { 50%{transform:scale(1.08);box-shadow:0 0 55px rgba(101,231,245,.18)} }.audio-result { padding: 24px 0; }.audio-result audio { width: 100%; margin-top: 16px; }.audio-result p { color: var(--muted); font-size: 11px; }.quota-card { min-height: 83px; margin-top: 15px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; }.quota-row { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }.quota-row strong { color: var(--text); }.quota-card .bar { margin: 12px 0 8px; }

/* Fish S2-Pro immersive studio */
.fish-page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.fish-page-toolbar .back-button { margin: 0; }
.fish-page-toolbar > div { display: grid; justify-items: end; gap: 3px; }
.fish-page-toolbar strong { font-size: 13px; }
.fish-page-toolbar span { color: var(--faint); font-size: 10px; }
.fish-experience { overflow: hidden; border: 1px solid rgba(255,255,255,.52); border-radius: 30px; color: #171717; background: #f8f7f5; box-shadow: 0 28px 90px rgba(0,0,0,.28); color-scheme: light; }
.fish-canvas { position: relative; isolation: isolate; min-height: 620px; overflow: clip; padding: 32px clamp(18px,4vw,58px) 30px; background:
  radial-gradient(ellipse at 8% 16%, rgba(196,180,174,.72) 0 9%, transparent 33%),
  radial-gradient(ellipse at 33% 5%, rgba(242,211,142,.74) 0 10%, transparent 34%),
  radial-gradient(ellipse at 64% 13%, rgba(226,186,176,.78) 0 11%, transparent 32%),
  radial-gradient(ellipse at 91% 26%, rgba(172,181,193,.72) 0 12%, transparent 35%),
  radial-gradient(ellipse at 19% 90%, rgba(180,174,196,.78) 0 13%, transparent 36%),
  radial-gradient(ellipse at 56% 88%, rgba(230,213,175,.8) 0 14%, transparent 38%),
  radial-gradient(ellipse at 88% 82%, rgba(218,187,189,.72) 0 12%, transparent 35%),
  linear-gradient(125deg,#d7d3d0 0%,#efe2cc 32%,#e4d4d1 58%,#d5d8dc 100%); }
.fish-canvas::before { content:""; position:absolute; inset:-25%; z-index:-1; opacity:.46; pointer-events:none; background:
  conic-gradient(from 20deg at 30% 40%, transparent, rgba(255,255,255,.7), transparent 22%),
  conic-gradient(from 180deg at 75% 58%, transparent, rgba(205,180,143,.42), transparent 28%); filter: blur(28px); transform: rotate(-4deg); }
.fish-canvas::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.22; mix-blend-mode:multiply; background: repeating-linear-gradient(14deg,rgba(71,61,48,.12) 0 1px,transparent 1px 5px); }
.fish-mode-tabs { width: max-content; max-width: 100%; display: flex; align-items: center; gap: 2px; margin: 0 auto; padding: 5px; overflow-x: auto; border: 1px solid rgba(255,255,255,.68); border-radius: 999px; background: rgba(250,248,245,.82); box-shadow: 0 10px 30px rgba(63,48,36,.09); backdrop-filter: blur(18px); scrollbar-width: none; }
.fish-mode-tabs::-webkit-scrollbar { display:none; }
.fish-mode-tab { min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; color: #6c625d; background: transparent; cursor: pointer; white-space: nowrap; font-size: 14px; font-weight: 760; transition: color 170ms,background 170ms,box-shadow 170ms,transform 130ms,opacity 170ms; }
.fish-mode-tab:hover:not(:disabled) { color: #111; background: rgba(255,255,255,.6); }
.fish-mode-tab.active { color: #080808; background: #fff; box-shadow: 0 5px 18px rgba(57,43,34,.11); }
.fish-mode-tab:active:not(:disabled) { transform: scale(.97); }
.fish-mode-tab:focus-visible { outline: 3px solid rgba(48,112,239,.28); outline-offset: 2px; }
.fish-mode-tab:disabled { cursor: not-allowed; opacity: .62; }
.fish-composer { width: min(1060px,100%); min-height: 402px; display: grid; grid-template-columns: 300px minmax(0,1fr); margin: 78px auto 0; overflow: hidden; border: 1px solid rgba(63,47,38,.09); border-radius: 30px; background: rgba(255,255,255,.965); box-shadow: 0 25px 75px rgba(72,52,39,.16); }
.fish-voice-rail { min-width: 0; display: flex; flex-direction: column; padding: 16px 14px 18px; border-right: 1px solid #e9e5e2; background: rgba(253,252,251,.82); }
.fish-language-select { display: grid; gap: 5px; margin-bottom: 18px; color: #766d68; }
.fish-language-select > span { padding-left: 10px; font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.fish-language-select select { min-height: 46px; padding: 0 14px; border: 1px solid #e3dfdc; border-radius: 999px; color: #171717; background: #fff; font-size: 14px; font-weight: 760; box-shadow: none; }
.fish-language-select select:hover { border-color: #c9c1bc; }
.fish-language-select select:focus { border-color: #171717; box-shadow: 0 0 0 3px rgba(17,17,17,.08); }
.fish-voice-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 10px 7px; }
.fish-voice-heading > span { color: #8b817b; font-size: 10px; font-weight: 760; letter-spacing: .08em; }
.fish-voice-heading small { overflow: hidden; color: #aaa09a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.fish-voice-presets { display: grid; gap: 5px; max-height: 292px; padding-right: 3px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d8d0cb transparent; }
.fish-voice-row { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) 34px; align-items: center; gap: 3px; border-radius: 17px; transition: background 160ms,opacity 160ms; }
.fish-voice-row.active { background: #f2ebe7; }
.fish-voice-row.unavailable { opacity: .48; }
.fish-voice-preset { width: 100%; min-height: 52px; display: grid; grid-template-columns: 34px minmax(0,1fr) 18px; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid transparent; border-radius: 16px; color: #282321; background: transparent; cursor: pointer; text-align: left; transition: color 160ms,background 160ms,border-color 160ms,transform 130ms,box-shadow 160ms; }
.fish-voice-preset:hover { background: #f6f1ee; transform: translateX(2px); }
.fish-voice-preset.active { border-color: #ede6e2; background: transparent; box-shadow: inset 3px 0 #1a1817; }
.fish-voice-preset:active { transform: scale(.98); }
.fish-voice-preset:focus-visible { outline: 3px solid rgba(48,112,239,.25); outline-offset: 1px; }
.fish-voice-preset > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.fish-voice-preset strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.fish-voice-preset small { color: #9b918b; font-size: 9px; font-weight: 560; }
.fish-voice-preset > i { color: #171717; font-size: 11px; font-style: normal; opacity: 0; transform: scale(.7); transition: opacity 160ms,transform 160ms; }
.fish-voice-preset.active > i { opacity: 1; transform: scale(1); }
.voice-avatar { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.82); border-radius: 50%; color: #fff; font-size: 11px; font-weight: 820; box-shadow: 0 3px 10px rgba(42,31,25,.12); }
.voice-avatar-a { background: linear-gradient(145deg,#36353d,#878694); }.voice-avatar-b { background: linear-gradient(145deg,#4f83a3,#c8b077); }.voice-avatar-c { background: linear-gradient(145deg,#c47b9e,#8d8bd5); }.voice-avatar-d { background: linear-gradient(145deg,#62564d,#af8d6f); }
.voice-avatar-slate { background: linear-gradient(145deg,#343642,#8b8997); }.voice-avatar-rose { background: linear-gradient(145deg,#b3657f,#e4a7a5); }.voice-avatar-sky { background: linear-gradient(145deg,#3c7b9f,#94c7d8); }.voice-avatar-umber { background: linear-gradient(145deg,#584b42,#aa8266); }.voice-avatar-mint { background: linear-gradient(145deg,#367b70,#87c4a9); }.voice-avatar-violet { background: linear-gradient(145deg,#625a9a,#aaa0dc); }.voice-avatar-peach { background: linear-gradient(145deg,#bb735e,#e8ad85); }.voice-avatar-gold { background: linear-gradient(145deg,#9a6b2f,#d7af55); }
.voice-preview { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #827872; background: transparent; cursor: pointer; font-size: 9px; transition: color 150ms,background 150ms,transform 130ms; }
.voice-preview:hover:not(:disabled) { color: #111; background: rgba(255,255,255,.86); transform: scale(1.06); }
.voice-preview:focus-visible { outline: 2px solid rgba(48,112,239,.34); outline-offset: 1px; }
.voice-preview:disabled { cursor: not-allowed; }
.voice-preview.playing { color: #fff; background: #171717; }
.voice-preview.playing span { font-size: 0; }
.voice-preview.playing span::after { content:"Ⅱ"; font-size: 9px; font-weight: 850; }
.voice-list-loading { display: grid; gap: 7px; }
.voice-list-loading i { height: 48px; border-radius: 15px; background: linear-gradient(90deg,#f1eeec 20%,#faf8f7 45%,#f1eeec 70%); background-size: 220% 100%; animation: shimmer 1.3s infinite linear; }
.fish-preset-count { margin: auto 10px 0; padding-top: 16px; color: #26211f; font-size: 11px; display: flex; flex-direction: column; gap: 3px; }
.fish-preset-count strong { font-size: 13px; }
.fish-preset-count span { color: #817873; }
.fish-editor { min-width: 0; display: flex; flex-direction: column; padding: 26px 24px 14px; background: rgba(255,255,255,.96); transition: box-shadow 170ms; }
.fish-editor:focus-within { box-shadow: inset 0 0 0 2px rgba(35,31,29,.055); }
.fish-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.fish-editor-heading label { display: block; color: #7b716c; font-size: 12px; font-weight: 760; }
.fish-editor-heading span { color: #aaa09a; font-size: 9px; }
.fish-editor #fish-text { min-height: 214px; flex: 1; padding: 10px 0 18px; border: 0; border-radius: 0; color: #141313; background: transparent; box-shadow: none; resize: none; font-family: "Songti SC","STSong","Noto Serif SC","Microsoft YaHei",sans-serif; font-size: clamp(17px,1.65vw,21px); font-weight: 520; line-height: 1.72; letter-spacing: .005em; }
.fish-editor #fish-text:hover,.fish-editor #fish-text:focus { border: 0; background: transparent; box-shadow: none; }
.fish-editor #fish-text::placeholder { color: #b5aba5; }
.fish-inline-result:empty { display: none; }
.fish-inline-result:not(:empty) { min-height: 58px; display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 10px 13px; border: 1px solid #eae5e2; border-radius: 13px; color: #453f3b; background: #faf8f7; text-align: left; }
.fish-inline-result.empty-result { place-content: initial; justify-items: initial; }
.fish-inline-result .result-orb { width: 34px; height: 34px; flex: 0 0 34px; margin: 0; color: #171717; background: #eee9e5; box-shadow: none; font-size: 14px; }
.fish-inline-result strong { color: #211e1c; font-size: 11px; }
.fish-inline-result p { max-width: none; margin: 2px 0 0; color: #8c817b; font-size: 9px; }
.fish-inline-result.audio-result { display: grid; grid-template-columns: auto 1fr; padding: 10px 13px; }
.fish-inline-result.audio-result .badge { align-self: start; color: #216647; border-color: #bfe4cf; background: #eefaf3; }
.fish-inline-result.audio-result h4 { margin: 1px 0 0; color: #272321; font-size: 12px; }
.fish-inline-result.audio-result p { margin: 2px 0; }
.fish-inline-result.audio-result audio { grid-column: 1 / -1; width: 100%; height: 36px; margin-top: 6px; }
.fish-editor-error { min-height: 0; margin-bottom: 6px; color: #b13d4e; }
.fish-editor-error:empty { display:none; }
.fish-editor-controls { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 13px; border-top: 1px solid #eeeae7; }
.fish-settings { border: 0; border-radius: 999px; background: transparent; }
.fish-settings summary { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; padding: 0 16px; border: 1px solid #e5e0dd; border-radius: 999px; color: #24201e; background: #f8f6f5; cursor: pointer; list-style: none; font-size: 12px; font-weight: 760; transition: background 160ms,border-color 160ms,transform 130ms; }
.fish-settings summary::-webkit-details-marker { display:none; }
.fish-settings summary:hover { border-color: #cfc7c2; background: #fff; }
.fish-settings summary:active { transform: scale(.97); }
.fish-settings summary:focus-visible { outline: 3px solid rgba(48,112,239,.25); outline-offset: 2px; }
.fish-settings[open] { order: 10; flex-basis: 100%; border-radius: 14px; }
.fish-settings[open] summary { background: #fff; }
.fish-settings > .form-grid { margin-top: 11px; padding: 13px; border: 1px solid #ece7e4; border-radius: 14px; background: #faf9f8; }
.fish-settings label { color: #6e6560; }
.fish-settings input,.fish-settings select { border-color: #ded8d4; color: #171717; background: #fff; }
.fish-settings input:focus,.fish-settings select:focus { border-color: #171717; box-shadow: 0 0 0 3px rgba(17,17,17,.08); }
.fish-editor-controls .counter { margin-left: auto; color: #81756f; font-size: 12px; font-weight: 680; white-space: nowrap; }
.fish-editor-controls .counter.over { color: #b13d4e; }
.fish-play-button { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 46px; border: 1px solid #e2ddda; border-radius: 50%; color: #111; background: #fff; cursor: pointer; transition: background 160ms,border-color 160ms,transform 130ms,box-shadow 160ms,opacity 160ms; }
.fish-play-button:hover:not(:disabled) { border-color: #bdb4ae; background: #f7f4f2; box-shadow: 0 7px 18px rgba(41,31,25,.09); transform: translateY(-1px); }
.fish-play-button:active:not(:disabled) { transform: scale(.94); }
.fish-play-button:focus-visible { outline: 3px solid rgba(48,112,239,.28); outline-offset: 2px; }
.fish-play-button:disabled { cursor: not-allowed; opacity: .34; }
.fish-play-button.playing .play-symbol { font-size: 0; }
.fish-play-button.playing .play-symbol::after { content:"Ⅱ"; font-size: 14px; font-weight: 850; }
.fish-generate-button { min-width: 132px; min-height: 46px; padding: 0 20px; border-radius: 999px; color: #fff !important; background: #090909 !important; box-shadow: 0 9px 24px rgba(0,0,0,.16) !important; }
.fish-generate-button:hover:not(:disabled) { filter: none !important; background: #24201e !important; box-shadow: 0 12px 28px rgba(0,0,0,.2) !important; transform: translateY(-1px); }
.fish-generate-button:active:not(:disabled) { transform: scale(.97); }
.fish-generate-button:focus-visible { outline: 3px solid rgba(48,112,239,.3); outline-offset: 3px; }
.fish-generate-button:disabled { color: #777 !important; background: #dedad7 !important; box-shadow: none !important; }
.fish-generate-button[data-state="success"] { color:#fff !important; background:#246d4b !important; }.fish-generate-button[data-state="error"] { color:#fff !important; background:#a83b4b !important; }
.clone-workspace { width:min(1060px,100%); min-height:500px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; margin:78px auto 0; }
.clone-source-card,.clone-output-card { min-width:0; min-height:500px; display:flex; flex-direction:column; padding:27px; border:1px solid rgba(63,47,38,.09); border-radius:28px; color:#27221f; background:rgba(255,255,255,.97); box-shadow:0 25px 75px rgba(72,52,39,.14); }
.clone-card-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:15px; border-bottom:1px solid #eee9e6; }
.clone-card-head>div { display:grid; gap:3px; }
.clone-card-head>div span { color:#aaa09a; font-size:9px; font-weight:780; letter-spacing:.12em; }
.clone-card-head strong { color:#26221f; font-size:15px; }
.clone-step { width:34px; height:34px; display:grid; place-items:center; border:1px solid #e5dfdb; border-radius:50%; color:#8d837d; background:#faf8f7; font-size:10px; font-weight:800; }
.clone-source-card>p,.clone-output-card>p { margin:12px 0 15px; color:#8b817b; font-size:11px; line-height:1.6; }
.clone-prompt-box { margin-bottom:10px; padding:10px 12px; border:1px solid #e8e1dc; border-radius:13px; background:#fffaf4; }
.clone-prompt-box>div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.clone-prompt-box>div>span { color:#8a7468; font-size:10px; font-weight:760; }
.clone-prompt-box .text-button { font-size:10px; }
.clone-prompt-box>p { margin:6px 0 0; color:#4d433e; font-family:"Songti SC","STSong","Noto Serif SC",sans-serif; font-size:12px; line-height:1.6; }
.saved-voice-library { margin-bottom:10px; }
.saved-voice-library>div:first-child { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; color:#756b65; font-size:10px; font-weight:720; }
.saved-voice-library>div:first-child span { color:#a19791; font-weight:600; }
.saved-voice-actions { display:grid; grid-template-columns:minmax(0,1fr) 36px 36px; gap:7px; }
.saved-voice-actions select { min-width:0; min-height:38px; padding:0 10px; border:1px solid #ded8d4; border-radius:10px; color:#282421; background:#fff; }
.saved-voice-actions .icon-button { width:36px; height:36px; min-height:36px; color:#514a46; border-color:#ded8d4; background:#fff; }
.saved-voice-actions .icon-button.danger:not(:disabled) { color:#ad4050; }
.saved-voice-actions .icon-button:disabled { opacity:.35; cursor:not-allowed; }
.clone-file-drop { min-height:104px; display:grid; place-items:center; align-content:center; gap:5px; padding:13px; border:1px dashed #d5cdc8; border-radius:16px; color:#302b28; background:#fbf9f8; cursor:pointer; text-align:center; transition:border-color 160ms,background 160ms,transform 130ms; }
.clone-file-drop:hover,.clone-file-drop.dragging { border-color:#89807a; background:#fff; transform:translateY(-1px); }
.clone-file-drop input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.clone-file-drop strong { font-size:12px; }
.clone-file-drop small { color:#9c928c; font-size:10px; }
.clone-file-drop .upload-icon { color:#55d8e8; font-size:23px; font-weight:300; }
.clone-recorder { min-height:72px; display: grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; margin-top:10px; padding:12px 13px; border:1px solid #ded8d4; border-radius:13px; background:#fff; }
.clone-recorder>div { min-width:0; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:3px 8px; }
.clone-recorder strong { color:#292522; font-size:12px; }
.clone-recorder small { grid-column:2; color:#948a84; font-size:10px; }
.clone-recorder .button { min-height:38px; border-radius:999px; }
.clone-source-card>audio { width:100%; height:35px; margin-top:9px; }
.record-dot { width:9px; height:9px; grid-row:1/3; border-radius:50%; background:#d8505d; box-shadow:0 0 0 4px rgba(216,80,93,.1); }
.clone-recorder.recording .record-dot { animation:record-pulse 1s infinite; }
@keyframes record-pulse { 50%{box-shadow:0 0 0 8px rgba(216,80,93,.06);transform:scale(.86)} }
.clone-field { display:grid; gap:6px; color:#6e6560; }
.clone-field>span { font-size:11px; font-weight:720; }
.clone-field textarea { width:100%; padding:11px 12px; border:1px solid #ded8d4; border-radius:12px; color:#171717; background:#fff; font-size:12px; line-height:1.6; resize:vertical; }
.clone-field textarea:focus { border-color:#171717; box-shadow:0 0 0 3px rgba(17,17,17,.08); }
.clone-reference-text { margin-top:11px; }
.save-voice-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-top:9px; }
.save-voice-row input { min-width:0; min-height:39px; padding:0 10px; border:1px solid #ded8d4; border-radius:10px; color:#171717; background:#fff; }
.save-voice-row .button { min-height:39px; border-radius:999px; white-space:nowrap; }
.clone-source-card>#saved-voice-error { min-height:0; margin:5px 0 0; }
.clone-target-text textarea { min-height:126px; resize:none; font-family:"Songti SC","STSong","Noto Serif SC",sans-serif; font-size:16px; line-height:1.7; }
.clone-consent { display:flex!important; flex-direction:row!important; align-items:flex-start; gap:9px!important; margin-top:10px; padding:11px 13px; border:1px solid #e3dad1; border-radius:11px; color:#6f625b!important; background:#fffaf5; font-size:10px; line-height:1.55; }
.clone-consent input { width:16px!important; height:16px!important; flex:0 0 16px; margin-top:1px; accent-color:#171717; }
.clone-clear { align-self:flex-start; margin-top:8px; }
.clone-result-empty { min-height:94px; display:grid; place-content:center; justify-items:center; margin-top:11px; padding:12px; border:1px solid #ebe5e1; border-radius:14px; color:#aaa19b; background:#fcfaf9; text-align:center; }
.clone-result-empty>span { width:32px; height:32px; display:grid; place-items:center; border:1px solid #e5dfdb; border-radius:50%; background:#fff; font-size:12px; }
.clone-result-empty p { margin:7px 0 0; font-size:10px; }
.clone-result-loading>span { animation:record-pulse 1.2s infinite; }
.clone-audio-result { min-height:94px; margin-top:11px; padding:11px 13px; border:1px solid #dceadf; border-radius:14px; color:#3e4941; background:#f5fbf7; }
.clone-audio-result strong { display:block; font-size:12px; }
.clone-audio-result p { margin:3px 0 7px; color:#758078; font-size:10px; }
.clone-audio-result audio { width:100%; height:34px; }
.clone-output-card>.form-error { min-height:14px; margin:6px 0 0; }
.clone-submit-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:12px; }
.clone-submit-row>span { color:#887d76; font-size:10px; }
.clone-submit-row .button { min-height:44px; border-radius:999px; color:#fff; background:#090909; }
.asr-workspace { width:min(1060px,100%); min-height:430px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; margin:78px auto 0; }
.asr-input-card,.asr-output-card { min-width:0; min-height:430px; padding:28px; border:1px solid rgba(63,47,38,.09); border-radius:28px; background:rgba(255,255,255,.97); box-shadow:0 25px 75px rgba(72,52,39,.14); }
.asr-input-card { display:flex; flex-direction:column; align-items:center; text-align:center; }
.asr-flow-icon { display:flex; align-items:center; gap:15px; margin:7px 0 18px; color:#aaa19b; }
.asr-flow-icon span { width:38px; height:38px; display:grid; place-items:center; border:1px solid #e5dfdb; border-radius:50%; background:#faf8f7; font-size:14px; font-weight:800; }
.asr-flow-icon i { font-size:20px; font-style:normal; }
.asr-input-card h3 { margin:0; color:#27221f; font-size:17px; }
.asr-input-card>p { margin:8px 0 18px; color:#8c817b; font-size:10px; line-height:1.55; }
.asr-file-drop { width:100%; min-height:116px; display:grid; place-items:center; align-content:center; gap:5px; padding:15px; border:1px dashed #d5cdc8; border-radius:17px; color:#312c29; background:#fbf9f8; cursor:pointer; transition:border-color 160ms,background 160ms,transform 130ms; }
.asr-file-drop:hover,.asr-file-drop.dragging { border-color:#89807a; background:#fff; transform:translateY(-1px); }
.asr-file-drop input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.asr-file-drop strong { font-size:12px; }
.asr-file-drop small { color:#9c928c; font-size:9px; }
.asr-input-card>audio { width:100%; height:36px; margin-top:10px; }
.asr-controls { width:100%; display:grid; grid-template-columns:minmax(120px,1fr) auto auto; align-items:end; gap:8px; margin-top:auto; padding-top:17px; }
.asr-controls label { display:grid; gap:5px; text-align:left; }
.asr-controls label span { color:#786e68; font-size:9px; font-weight:700; }
.asr-controls select { min-height:42px; padding:0 10px; border-color:#ded8d4; color:#292522; background:#fff; }
.asr-controls .button { min-height:42px; border-radius:999px; }
.asr-input-card .form-error { width:100%; min-height:15px; margin:8px 0 0; text-align:left; }
.asr-output-card { display:flex; flex-direction:column; }
.asr-output-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:17px; border-bottom:1px solid #eee9e6; }
.asr-output-head>div { display:grid; gap:3px; }
.asr-output-head>div span { color:#aaa09a; font-size:8px; font-weight:760; letter-spacing:.12em; }
.asr-output-head strong { color:#2b2724; font-size:14px; }
.asr-empty-result { flex:1; display:grid; place-content:center; justify-items:center; color:#b1a8a2; text-align:center; }
.asr-empty-result>span { width:48px; height:48px; display:grid; place-items:center; border:1px solid #e6e0dc; border-radius:50%; background:#faf8f7; font-weight:800; }
.asr-empty-result p { max-width:270px; margin:12px 0 0; font-size:10px; line-height:1.65; }
.asr-result-ready { flex:1; min-height:0; display:flex; flex-direction:column; }
.asr-result-meta { display:flex; flex-wrap:wrap; gap:7px; padding:14px 0 10px; color:#887d76; font-size:9px; }
.asr-transcript { flex:1; min-height:220px; max-height:310px; padding:16px; overflow:auto; border:1px solid #ebe5e1; border-radius:14px; color:#201d1b; background:#fcfaf9; font-family:"Songti SC","STSong","Noto Serif SC",sans-serif; font-size:15px; line-height:1.8; white-space:pre-wrap; user-select:text; }
.asr-result-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:12px; }
.asr-result-actions .button { min-height:38px; border-radius:999px; }
.asr-timeline { max-height:110px; margin-top:10px; overflow:auto; }
.asr-timeline div { display:grid; grid-template-columns:65px minmax(0,1fr); gap:8px; padding:5px 2px; border-bottom:1px solid #f0ece9; color:#756b65; font-size:9px; }
.asr-timeline time { color:#a09791; font-family:ui-monospace,monospace; }
.fish-safety-note { width: min(1060px,100%); margin: 13px auto 0; color: rgba(55,45,39,.7); text-align: right; font-size: 9px; font-weight: 620; }
.fish-experience-footer { min-height: 82px; display: grid; grid-template-columns: minmax(250px,1fr) minmax(260px,360px) auto; align-items: center; gap: 22px; padding: 12px 28px; border-top: 1px solid #ebe7e4; color: #1b1918; background: rgba(255,255,255,.95); }
.fish-powered { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fish-powered strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.fish-powered-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #3d83f7; box-shadow: 0 0 0 4px rgba(61,131,247,.09); }
.fish-experience .badge { color: #277052; border-color: #c4e5d4; background: #eff9f4; }
.fish-experience .badge.muted { color: #776e68; border-color: #e4dfdc; background: #f6f3f1; }
.fish-experience .badge.warn { color: #8b5b16; border-color: #ead5ad; background: #fff8e9; }
.fish-experience .badge.error { color: #a33f4d; border-color: #e8c3c8; background: #fff1f3; }
.fish-experience-footer .quota-card { min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.fish-experience-footer .quota-row { color: #827872; font-size: 9px; }
.fish-experience-footer .quota-row strong { color: #1e1b19; }
.fish-experience-footer .quota-card .bar { height: 4px; margin: 7px 0 5px; background: #ece8e5; }
.fish-experience-footer .quota-card .bar i { background: linear-gradient(90deg,#3d83f7,#6d9ff5); }
.fish-experience-footer > a { color: #2d2927; font-size: 10px; font-weight: 720; text-decoration: none; white-space: nowrap; }
.fish-experience-footer > a:hover { text-decoration: underline; }
.fish-experience .skeleton-card { background: #eeeae7 !important; }
.fish-experience .skeleton-card::after { background: linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); }
.inpaint-card-icon { position:relative; overflow:hidden; color:#66d0c4; background:linear-gradient(145deg,rgba(74,190,178,.17),rgba(71,121,194,.11)); }.inpaint-card-icon b { position:relative; z-index:2; font-size:19px; }.inpaint-card-icon i { position:absolute; inset:11px; border:1px solid rgba(101,211,198,.28); border-radius:10px; transform:rotate(12deg); }
.inpaint-page { --ip-ink:#edf3f8; --ip-muted:#8796a8; --ip-line:rgba(164,190,215,.16); }
.inpaint-page-toolbar { min-height:46px; display:flex; align-items:center; gap:18px; margin-bottom:18px; }
.inpaint-page-toolbar>div { display:grid; gap:2px; padding-left:18px; border-left:1px solid var(--line); }
.inpaint-page-toolbar>div strong { font-size:13px; }.inpaint-page-toolbar>div span { color:var(--faint); font-size:9px; }
.inpaint-page-toolbar>.badge { margin-left:auto; }
.inpaint-studio { overflow:hidden; border:1px solid rgba(149,185,215,.15); border-radius:26px; background:linear-gradient(155deg,#101a26 0%,#0b121c 58%,#101720 100%); box-shadow:0 30px 90px rgba(0,0,0,.28); }
.inpaint-hero { min-height:148px; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:30px clamp(25px,4vw,52px); border-bottom:1px solid var(--ip-line); background:radial-gradient(circle at 84% 25%,rgba(82,192,184,.14),transparent 31%),radial-gradient(circle at 17% 0,rgba(67,113,194,.15),transparent 37%); }
.inpaint-hero h3 { max-width:700px; margin:4px 0 7px; color:var(--ip-ink); font-size:clamp(20px,2.3vw,31px); letter-spacing:-.02em; }
.inpaint-hero p:last-child { max-width:720px; margin:0; color:var(--ip-muted); font-size:11px; line-height:1.75; }
.inpaint-hero>span { flex:0 0 auto; padding:11px 14px; border:1px solid var(--ip-line); border-radius:12px; color:#8da0b1; background:rgba(8,15,23,.42); font-family:ui-monospace,monospace; font-size:9px; line-height:1.65; text-align:right; }
.inpaint-mode-tabs { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 25px; border-bottom:1px solid var(--ip-line); background:rgba(4,10,16,.34); }.inpaint-mode-tabs button { position:relative; min-height:64px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-content:center; gap:3px 10px; padding:10px 14px; border:1px solid var(--ip-line); border-radius:13px; color:var(--ip-muted); background:rgba(12,21,31,.72); cursor:pointer; text-align:left; transition:border-color 160ms,background 160ms,transform 130ms; }.inpaint-mode-tabs button:hover { border-color:rgba(95,205,194,.35); transform:translateY(-1px); }.inpaint-mode-tabs button.active { border-color:rgba(91,207,194,.55); color:var(--ip-ink); background:linear-gradient(120deg,rgba(49,145,139,.17),rgba(47,98,143,.12)); box-shadow:inset 0 0 0 1px rgba(91,207,194,.08); }.inpaint-mode-tabs button>span { grid-row:1/3; align-self:center; padding:5px 7px; border:1px solid rgba(102,207,196,.2); border-radius:7px; color:#6dcfc4; font-size:7px; font-weight:800; letter-spacing:.08em; }.inpaint-mode-tabs strong { color:inherit; font-size:11px; }.inpaint-mode-tabs small { color:#718192; font-size:8px; }
.inpaint-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; min-height:590px; }
.inpaint-editor-panel { min-width:0; padding:25px; border-right:1px solid var(--ip-line); }
.inpaint-control-panel { display:flex; flex-direction:column; min-width:0; padding:25px; background:rgba(4,9,15,.23); }
.inpaint-panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.inpaint-panel-head>div:first-child { display:grid; gap:4px; }.inpaint-panel-head>div:first-child>span { color:#62c8bd; font-size:8px; font-weight:760; letter-spacing:.14em; }.inpaint-panel-head strong { color:var(--ip-ink); font-size:13px; }
.inpaint-model-chip { padding:6px 9px; border:1px solid rgba(93,205,190,.25); border-radius:8px; color:#75d0c5; background:rgba(73,190,178,.07); font-size:8px; font-weight:800; letter-spacing:.1em; }
.inpaint-file-drop { min-height:470px; display:grid; place-content:center; justify-items:center; gap:8px; border:1px dashed rgba(129,164,192,.28); border-radius:18px; color:var(--ip-ink); background:radial-gradient(circle at 50% 43%,rgba(74,173,167,.08),transparent 26%),rgba(6,13,21,.34); cursor:pointer; text-align:center; transition:border-color 180ms,background 180ms,transform 150ms; }
.inpaint-file-drop:hover,.inpaint-file-drop.dragging { border-color:rgba(96,207,194,.68); background-color:rgba(11,24,32,.67); transform:translateY(-1px); }.inpaint-file-drop input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }.inpaint-file-drop>span { width:54px; height:54px; display:grid; place-items:center; margin-bottom:5px; border:1px solid rgba(95,208,195,.28); border-radius:17px; color:#64cbbf; background:rgba(68,183,172,.08); font-size:27px; font-weight:200; }.inpaint-file-drop strong { font-size:14px; }.inpaint-file-drop small { color:var(--ip-muted); font-size:9px; }
.inpaint-canvas-area { min-width:0; }.inpaint-canvas-wrap { position:relative; width:100%; min-height:320px; max-height:560px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(139,169,193,.18); border-radius:16px; background-color:#060a0f; background-image:linear-gradient(45deg,#111923 25%,transparent 25%),linear-gradient(-45deg,#111923 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#111923 75%),linear-gradient(-45deg,transparent 75%,#111923 75%); background-size:18px 18px; background-position:0 0,0 9px,9px -9px,-9px 0; touch-action:none; }
.inpaint-canvas-wrap canvas { grid-area:1/1; display:block; max-width:100%; max-height:560px; width:auto; height:auto; object-fit:contain; }.inpaint-canvas-wrap #inpaint-overlay-canvas { cursor:none; }
.inpaint-canvas-wrap #inpaint-overlay-canvas.instruction-mode { pointer-events:none; cursor:default; }.inpaint-canvas-wrap:has(#inpaint-overlay-canvas.instruction-mode) .inpaint-brush-cursor { display:none!important; }
.inpaint-brush-cursor { position:absolute; z-index:4; display:none; width:48px; height:48px; border:1px solid rgba(255,255,255,.95); border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.4); pointer-events:none; transform:translate(-50%,-50%); }.inpaint-canvas-wrap:hover .inpaint-brush-cursor { display:block; }
.inpaint-tools { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:13px; }.inpaint-tools>.button { min-height:36px; border-radius:10px; }.inpaint-tool-toggle { display:flex; padding:3px; border:1px solid var(--ip-line); border-radius:10px; background:#080e16; }.inpaint-tool-toggle button { min-height:28px; padding:0 11px; border:0; border-radius:7px; color:var(--ip-muted); background:transparent; cursor:pointer; font-size:9px; font-weight:700; }.inpaint-tool-toggle button.active { color:#eaf3f5; background:#22313e; box-shadow:0 2px 7px rgba(0,0,0,.25); }
.inpaint-brush-size { min-width:140px; display:flex; align-items:center; gap:7px; margin-left:auto; color:var(--ip-muted); font-size:8px; }.inpaint-brush-size input { min-width:60px; flex:1; accent-color:#5bc8bc; }.inpaint-brush-size output { width:24px; color:#b6c1cb; font-family:ui-monospace,monospace; }.inpaint-mask-hint { display:flex; align-items:flex-start; gap:7px; margin:10px 2px 0; color:#738394; font-size:8px; line-height:1.55; }.inpaint-mask-hint i { width:7px; height:7px; flex:0 0 7px; margin-top:2px; border-radius:50%; background:#ff5e72; box-shadow:0 0 0 3px rgba(255,94,114,.1); }
.inpaint-instruction-hint { display:flex; align-items:flex-start; gap:9px; margin:12px 2px 0; padding:11px 12px; border:1px solid rgba(91,207,194,.17); border-radius:11px; color:#7f929f; background:rgba(55,159,149,.055); font-size:8px; line-height:1.65; }.inpaint-instruction-hint span { color:#64cbbf; font-size:13px; }
.inpaint-field { display:grid; gap:7px; margin-bottom:16px; color:#a9b5c0; font-size:9px; font-weight:700; }.inpaint-field span small { color:#667687; font-weight:500; }.inpaint-field textarea { width:100%; padding:12px; border:1px solid var(--ip-line); border-radius:11px; color:#e3ebf1; background:#080f17; font-size:10px; line-height:1.65; resize:vertical; }.inpaint-field textarea:focus,.inpaint-param-grid input:focus { border-color:rgba(92,204,192,.58); box-shadow:0 0 0 3px rgba(77,194,183,.08); }
.inpaint-advanced { margin-bottom:16px; padding:0 12px; border:1px solid var(--ip-line); border-radius:11px; background:rgba(5,11,18,.34); }.inpaint-advanced summary { min-height:40px; display:flex; align-items:center; justify-content:space-between; color:#99a7b4; cursor:pointer; font-size:9px; font-weight:700; list-style:none; }.inpaint-advanced summary::-webkit-details-marker { display:none; }.inpaint-advanced[open] { padding-bottom:12px; }.inpaint-advanced .inpaint-field { margin:2px 0 11px; }.inpaint-param-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.inpaint-param-grid label { display:grid; gap:5px; color:#7e8c9a; font-size:8px; }.inpaint-param-grid label:last-child { grid-column:1/-1; }.inpaint-param-grid input { min-width:0; padding:9px; border:1px solid var(--ip-line); border-radius:8px; color:#dce5ec; background:#080f17; font-size:10px; }
.inpaint-rights { display:flex; align-items:flex-start; gap:9px; margin-top:auto; padding:12px; border:1px solid rgba(195,157,91,.2); border-radius:11px; color:#a49986; background:rgba(181,130,45,.055); font-size:8px; line-height:1.6; }.inpaint-rights input { width:15px; height:15px; flex:0 0 15px; margin-top:1px; accent-color:#5ac9bd; }.inpaint-control-panel>.form-error { min-height:16px; margin:7px 0 2px; }.inpaint-control-panel>.button { min-height:45px; border-radius:11px; background:linear-gradient(120deg,#2f9f94,#388aab); box-shadow:0 10px 28px rgba(37,143,146,.19); }.inpaint-control-panel>.button:disabled { background:#26323c; box-shadow:none; }.inpaint-retention { margin-top:9px; color:#647384; font-size:8px; line-height:1.55; text-align:center; }
.inpaint-result { padding:25px; border-top:1px solid var(--ip-line); }.inpaint-result-actions { display:flex; gap:8px; }.inpaint-result-actions .button { min-height:35px; border-radius:9px; }.inpaint-result-content { min-height:280px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--ip-line); border-radius:16px; background:#060a0f; }.inpaint-result-content>img { display:block; max-width:100%; max-height:680px; }.inpaint-result-loading { color:var(--ip-muted); text-align:center; }.inpaint-result-loading span { width:48px; height:48px; display:grid; place-items:center; margin:0 auto 12px; border:1px solid rgba(89,204,193,.25); border-radius:50%; color:#64cbbf; animation:breathe 1.2s infinite; }.inpaint-result-loading p { margin:0; font-size:10px; }
/* Keep the image editor readable at normal browser zoom. */
.inpaint-page-toolbar>div strong{font-size:14px}.inpaint-page-toolbar>div span{font-size:11px}
.inpaint-hero p:last-child{font-size:13px}.inpaint-hero>span{font-size:11px}
.inpaint-mode-tabs button{min-height:70px;gap:4px 11px;padding:11px 15px}.inpaint-mode-tabs button>span{font-size:9px}.inpaint-mode-tabs strong{font-size:13px}.inpaint-mode-tabs small{color:#8190a0;font-size:10px}
.inpaint-panel-head>div:first-child>span{font-size:10px}.inpaint-panel-head strong{font-size:15px}.inpaint-model-chip{font-size:10px}
.inpaint-file-drop strong{font-size:16px}.inpaint-file-drop small{font-size:11px}
.inpaint-tool-toggle button{min-height:30px;font-size:11px}.inpaint-brush-size{font-size:10px}.inpaint-mask-hint{color:#8393a3;font-size:10px}.inpaint-mask-hint i{margin-top:3px}
.inpaint-instruction-hint{padding:12px 13px;color:#91a1af;font-size:11px}.inpaint-instruction-hint span{font-size:15px}
.inpaint-field{color:#b2bec8;font-size:11px}.inpaint-field span small{color:#778797}.inpaint-field textarea{font-size:13px}
.inpaint-advanced summary{min-height:42px;color:#a8b5c0;font-size:11px}.inpaint-param-grid label{color:#8e9ca9;font-size:10px}.inpaint-param-grid input{font-size:12px}
.inpaint-rights{color:#b4a892;font-size:10px}.inpaint-retention{color:#748494;font-size:10px}.inpaint-result-loading p{font-size:12px}
.usage-summary { min-height: 93px; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin: 5px 0 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--line); overflow: hidden; }.usage-item { display: grid; gap: 6px; padding: 18px; background: var(--surface); }.usage-item span { color: var(--muted); font-size: 10px; }.usage-item strong { font-size: 20px; }
.table-panel { overflow: hidden; }.table-scroll { overflow-x: auto; }table { width: 100%; min-width: 780px; border-collapse: collapse; }th { color: var(--faint); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-align: left; }th,td { height: 55px; padding: 0 16px; border-bottom: 1px solid var(--line); }tbody tr:last-child td { border-bottom: 0; }td { color: #bbc8d9; font-size: 11px; }tbody tr { transition: background 160ms; }tbody tr:hover { background: rgba(101,231,245,.025); }.task-id { color: var(--muted); font-family: ui-monospace,monospace; }.table-input { width: 84px; padding: 7px; }.table-select { width: 90px; padding: 7px; }.row-actions { display: flex; gap: 6px; }.tiny-button { min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--muted); cursor: pointer; font-size: 10px; transition:all 150ms; }.tiny-button:hover { color:var(--cyan);border-color:rgba(101,231,245,.3); }.tiny-button:active{transform:scale(.96)}.tiny-button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.tiny-button:disabled{opacity:.5;cursor:wait}.inline-form { margin-bottom: 16px; }.inline-form .form-grid { margin-top: 18px; }.form-actions { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:15px; }.form-actions .form-error { margin-right:auto; }
.audit-list { display:grid; gap:8px; }.audit-item { min-height:70px; display:grid; grid-template-columns:130px minmax(160px,.6fr) minmax(220px,1fr) 150px; align-items:center; gap:15px; padding:13px 17px; border:1px solid var(--line); border-radius:12px; background:rgba(12,18,29,.72); }.audit-item code { color:var(--cyan);font-size:10px; }.audit-item p { margin:0;color:var(--muted);font-size:11px;overflow-wrap:anywhere; }.audit-item time { color:var(--faint);font-size:10px;text-align:right; }
.app-footer { min-height:55px; display:flex; justify-content:space-between; align-items:center; padding:0 clamp(20px,3vw,42px); border-top:1px solid var(--line); color:var(--faint);font-size:10px; }.app-footer a { color:var(--muted);text-decoration:none; }.app-footer a:hover{color:var(--cyan)}
.dialog { padding:0;border:0;background:transparent;color:var(--text); }.dialog::backdrop { background:rgba(2,5,10,.7);backdrop-filter:blur(6px); }.dialog-card { width:min(92vw,430px); padding:23px; border:1px solid var(--line-strong);border-radius:18px;background:var(--surface);box-shadow:var(--shadow);animation:dialog-in 200ms ease-out; }.dialog-card>label{margin-top:18px}.dialog-intro{color:var(--muted);font-size:12px}@keyframes dialog-in{from{opacity:0;transform:scale(.97) translateY(5px)}}
.toast-region { position:fixed;z-index:100;top:88px;right:20px;display:grid;gap:8px;width:min(360px,calc(100vw - 40px)); }.toast { display:flex;align-items:center;gap:10px;min-height:48px;padding:11px 14px;border:1px solid var(--line-strong);border-radius:11px;background:rgba(17,26,40,.96);box-shadow:0 12px 40px rgba(0,0,0,.35);font-size:12px;animation:toast-in 180ms ease-out; }.toast.success{border-color:rgba(100,230,170,.3)}.toast.error{border-color:rgba(255,125,142,.35)}@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}}
.sidebar-backdrop{display:none}
@media(max-width:1100px){.gpu-grid{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}.app-grid{grid-template-columns:repeat(2,1fr)}.studio-grid{grid-template-columns:1fr}.result-panel{position:static}.form-grid.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1100px){
  .fish-composer,.app-workspace-open .fish-composer{grid-template-columns:1fr;margin-top:54px}
  .fish-voice-rail{border-right:0;border-bottom:1px solid #e9e5e2}
  .fish-voice-presets{grid-template-columns:repeat(4,minmax(0,1fr));max-height:none;overflow:visible}
  .fish-preset-count{margin-top:12px}
  .fish-experience-footer{grid-template-columns:minmax(0,1fr) minmax(240px,340px)}
  .fish-experience-footer>a{grid-column:1/-1;justify-self:end}
  .inpaint-layout,.app-workspace-open .inpaint-layout{grid-template-columns:minmax(0,1fr) 330px}
}
@media(max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:0;transform:translateX(-105%);width:246px;transition:transform 220ms ease;box-shadow:var(--shadow)}.app-shell.menu-open .sidebar{transform:translateX(0)}.sidebar-backdrop{position:fixed;inset:0;z-index:25;background:rgba(0,0,0,.5)}.app-shell.menu-open .sidebar-backdrop{display:block}.mobile-menu{display:inline-grid}.topbar{height:70px}.topbar-status span:not(.status-dot),.topbar-status time{display:none}.content-area{padding:22px 16px}.hero-row{min-height:140px;flex-direction:column}.hero-row .button{align-self:stretch}.stats-grid,.gpu-grid,.app-grid{grid-template-columns:1fr}.form-grid,.form-grid.three{grid-template-columns:1fr}.studio-grid{display:block}.result-panel{margin-top:14px}.app-detail-head{align-items:flex-start}.title-line{align-items:flex-start;flex-direction:column}.audit-item{grid-template-columns:1fr;gap:6px}.audit-item time{text-align:left}.usage-summary{grid-template-columns:1fr}.app-footer{align-items:flex-start;gap:8px;flex-direction:column;padding-top:16px;padding-bottom:16px}.login-card{padding:27px 22px}}
@media(max-width:760px){
  .fish-page-toolbar>div{display:none}
  .fish-page-toolbar{min-height:36px;margin-bottom:10px}
  .fish-experience{border-radius:22px}
  .fish-canvas{min-height:0;padding:18px 10px 24px}
  .fish-mode-tabs{max-width:100%;margin-inline:auto;overflow-x:auto}
  .fish-mode-tab{min-height:40px;padding:0 13px;font-size:11px;white-space:nowrap}
  .fish-composer{margin-top:30px;border-radius:22px}
  .fish-voice-rail{padding:14px 12px}
  .fish-voice-presets{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;overflow:visible}
  .fish-voice-preset{min-height:50px;padding:7px 9px}
  .fish-preset-count{margin:10px 6px 0}
  .fish-editor{padding:20px 16px 14px}
  .fish-editor-heading span{display:none}
  .fish-editor #fish-text{min-height:235px;font-size:17px}
  .fish-editor-controls{gap:8px}
  .fish-editor-controls .counter{order:2;flex:1 0 calc(100% - 56px);margin-left:0}
  .fish-play-button{order:3}
  .fish-generate-button{order:4;flex:1;min-width:120px}
  .fish-settings[open]{order:5}
  .clone-workspace{grid-template-columns:1fr;margin-top:30px}
  .clone-source-card,.clone-output-card{min-height:0;padding:20px;border-radius:22px}
  .clone-output-card{min-height:450px}
  .clone-recorder{grid-template-columns:1fr}
  .clone-recorder .button{width:100%}
  .clone-submit-row{align-items:flex-end}
  .save-voice-row{grid-template-columns:1fr}
  .save-voice-row .button{width:100%}
  .asr-workspace{grid-template-columns:1fr;margin-top:30px}
  .asr-input-card,.asr-output-card{min-height:390px;padding:20px;border-radius:22px}
  .asr-controls{grid-template-columns:1fr 1fr}
  .asr-controls label{grid-column:1/-1}
  .asr-controls .button{width:100%}
  .fish-safety-note{text-align:left}
  .fish-experience-footer{grid-template-columns:1fr;gap:14px;padding:18px}
  .fish-experience-footer>a{grid-column:auto;justify-self:start}
  .fish-experience-footer .quota-card{width:100%}
  .inpaint-studio{border-radius:20px}.inpaint-hero{align-items:flex-start;flex-direction:column;padding:24px}.inpaint-hero>span{text-align:left}.inpaint-layout,.app-workspace-open .inpaint-layout{grid-template-columns:1fr;min-height:0}.inpaint-editor-panel{padding:18px;border-right:0;border-bottom:1px solid var(--ip-line)}.inpaint-control-panel{padding:20px}.inpaint-file-drop,.app-workspace-open .inpaint-file-drop{min-height:330px}.inpaint-canvas-wrap{min-height:220px}.inpaint-tools{align-items:stretch}.inpaint-brush-size{order:5;width:100%;margin-left:0}.inpaint-result{padding:18px}
  .inpaint-mode-tabs{grid-template-columns:1fr;padding:12px 18px}
  .studio-history-panel{padding:18px;border-radius:18px}.studio-history-head{align-items:flex-start;flex-direction:column}.studio-history-head .button{width:100%}.studio-history-grid{grid-template-columns:1fr}.studio-history-item{align-items:flex-start}.studio-history-copy p{white-space:normal}.studio-history-empty{min-height:120px}
}
@media(max-width:430px){
  .fish-powered{align-items:flex-start;flex-wrap:wrap}
  .fish-powered .badge{margin-left:19px}
  .fish-editor-controls .counter{font-size:10px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}