:root{
  --ink:#1f2433;--ink2:#3a4152;--muted:#667080;--line:#e4e7ec;--line2:#eef0f3;--bg:#f6f7f6;--paper:#fff;
  --a:#6b55c8;--a2:#5a45b0;--ap:#f0ebfd;--a-soft:#e7e0fb;--mint:#2e8c74;--mint-bg:#e6f6ef;--mint-line:#c9eadc;
  --red:#b8404f;--red-bg:#fff1f2;--amber:#8a5d14;--amber-bg:#fff8e8;
  --c-vocals:#7c5cd6;--c-instrumental:#2f9e83;--c-drums:#df6d52;--c-bass:#3577d4;--c-guitar:#c48a12;--c-piano:#c04f95;--c-other:#6d7a8a;--c-original:#9aa1ad;
  --r:18px;--r-sm:12px;--shadow:0 12px 40px rgba(27,40,61,.06);--focus:0 0 0 3px #b9abf0;
  --serif:'Times New Roman',Times,serif;--sans:Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans);overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
/* Arial has no Vietnamese glyphs above 700 on Windows (falls back to Arial Black): never go bolder. */
b,strong{font-weight:700}
button{cursor:pointer}
a{color:var(--a)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:10px}
button:disabled{opacity:.5;cursor:not-allowed}
h1,h2,h3,p{margin-top:0}
h1,h2,.serif{font-family:var(--serif);font-weight:700}
h1{font-size:clamp(34px,4.4vw,56px);line-height:1.04;letter-spacing:-1px;margin:12px 0 16px}
h2{font-size:clamp(22px,2.4vw,27px);letter-spacing:-.3px;margin:0;line-height:1.2}
h3{font-size:16px;margin:0;font-weight:700}
.icon{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.icon.sm{width:16px;height:16px}
.icon.lg{width:26px;height:26px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hidden{display:none!important}
.shell{max-width:1220px;margin:0 auto;padding:0 28px}

/* Header */
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top-inner{min-height:68px;display:flex;align-items:center;gap:18px}
.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand img{width:38px;height:38px;border-radius:12px;box-shadow:0 6px 16px #6a59ba30;animation:hop 2.8s ease-in-out 1s 2;transition:transform .2s}
.brand:hover img{transform:translateY(-3px) rotate(-6deg)}
@keyframes hop{0%,100%,40%{transform:translateY(0)}15%{transform:translateY(-6px) rotate(-5deg)}28%{transform:translateY(0) scale(1.04,.96)}}
.brand-label{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:-.3px;line-height:1}
.brand-label b{color:var(--a)}
.brand-label i{font-family:var(--sans);font-style:normal;font-size:.55em;font-weight:700;letter-spacing:.5px;color:#fff;background:var(--a);border-radius:6px;padding:2px 5px;margin-left:4px;vertical-align:4px}
.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:2px;font-weight:700;margin-top:3px}
.nav{display:flex;gap:4px;margin-left:auto}
.nav button{white-space:nowrap;border:0;background:transparent;border-radius:10px;padding:10px 14px;color:#5b6273;font-weight:700;font-size:13.5px;min-height:44px;display:flex;align-items:center;gap:7px}
.nav button:hover{background:#f3f2f8}
.nav button.active{background:var(--ap);color:var(--a)}
.pill{border:1px solid var(--mint-line);background:var(--mint-bg);border-radius:999px;color:var(--mint);font-weight:700;padding:7px 12px;font-size:11.5px;white-space:nowrap;display:flex;gap:6px;align-items:center}
.pill.warn{background:var(--amber-bg);border-color:#f0dfb4;color:var(--amber)}

/* Banner */
.banner{background:#fff4e5;border-bottom:1px solid #f2d9ae;color:#7a4f0e;font-size:13px}
.banner .shell{display:flex;gap:10px;align-items:center;padding-top:9px;padding-bottom:9px}

/* Hero */
.hero{padding:44px 0 26px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:36px}
.kicker{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:2px;font-weight:700;color:#7a62b8;font-size:11px}
.kicker:before{content:'';width:22px;height:2px;background:currentColor}
.hero p.lead{max-width:560px;color:var(--muted);font-size:16.5px;line-height:1.7;margin-bottom:0}
.hero h1 em{font-style:normal;color:var(--a)}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.hero-tags span{font-size:12px;padding:7px 12px;background:#fff;border:1px solid var(--line);border-radius:100px;font-weight:700;display:inline-flex;gap:6px;align-items:center;color:var(--ink2)}
.hero-tags .icon{width:15px;height:15px;color:var(--a)}
.hero-art{border-radius:28px;overflow:hidden;border:1px solid #e6e3f2;background:#f4f2fb;aspect-ratio:560/360;box-shadow:var(--shadow)}
.hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.page-head{padding:40px 0 18px}
.page-head p{color:var(--muted);max-width:640px}

/* Cards & layout */
.workgrid{display:grid;grid-template-columns:1.02fr .98fr;gap:22px;align-items:start;padding:6px 0 26px}
.card{background:var(--paper);border-radius:var(--r);padding:24px;border:1px solid #e8ebee;box-shadow:var(--shadow);min-width:0}
.card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.counter{background:#eff5f2;color:#2d7663;font-weight:700;border-radius:10px;font-size:10.5px;padding:6px 10px;letter-spacing:.6px;white-space:nowrap}
.section-label{font-size:11.5px;font-weight:700;letter-spacing:.7px;margin:22px 0 10px;color:var(--ink2);text-transform:uppercase;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.section-label small{font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted);font-size:11.5px}

/* Drop zone */
.drop{border:2px dashed #c9bfee;border-radius:16px;background:linear-gradient(125deg,#fbfaff,#f4fbf8);padding:30px 18px;text-align:center;transition:transform .2s,border-color .2s,background .2s;cursor:pointer}
.drop.over{border-color:var(--a);background:#efe9fb;transform:scale(1.01)}
.drop img{width:120px;height:auto;margin:0 auto 10px;display:block}
.drop-title{font-weight:700;font-size:16px;margin-bottom:3px}
.drop-desc{color:var(--muted);font-size:12.5px;margin:0 0 16px}
.file-info{margin-top:12px;background:#f5f6f8;border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:11px}
.file-info .badge-ic{width:40px;height:40px;border-radius:11px;background:var(--ap);color:var(--a);display:grid;place-items:center;flex:0 0 auto}
.file-info .detail{min-width:0;flex:1}
.file-info strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.file-info small{color:var(--muted);font-size:12px}
.icon-btn{border:0;background:transparent;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--muted);flex:0 0 auto}
.icon-btn:hover{background:#eceef2;color:var(--ink)}
.file-preview{width:100%;height:40px;margin-top:10px}

/* Options */
.seg{display:grid;gap:8px}
.seg.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.seg.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.option{border:1.5px solid var(--line);background:#fff;padding:12px;border-radius:14px;text-align:left;min-height:76px;display:flex;flex-direction:column;gap:3px;transition:border-color .15s,background .15s;position:relative}
.option:hover:not(:disabled){border-color:#cfc5ef}
.option strong{font-size:13.5px;display:flex;gap:7px;align-items:center}
.option strong .icon{width:18px;height:18px;color:var(--a)}
.option small{color:#6f7480;font-size:11.5px;line-height:1.35}
.option.selected{border-color:#8a72d4;background:#f7f3ff;box-shadow:inset 0 0 0 1px #8a72d4}
.option .tag{position:absolute;top:9px;right:9px;font-size:9.5px;font-weight:700;letter-spacing:.4px;padding:3px 6px;border-radius:6px;background:#eef0f3;color:#5b6273}
.option .tag.ok{background:var(--mint-bg);color:var(--mint)}
.option .tag.dl{background:#fff4e0;color:#8a5d14}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;border-radius:11px;padding:10px 13px;font-size:12.5px;font-weight:700;flex:1 1 auto;min-height:44px;text-align:center}
.chip.selected{background:var(--mint-bg);border-color:#7cbca7;color:#256f5c}
.micro{font-size:12px;color:#7a7f8c;line-height:1.55;margin:10px 0 0}
details.more{margin-top:18px;border:1px solid var(--line);border-radius:14px;background:#fbfbfd}
details.more summary{list-style:none;padding:13px 15px;font-weight:700;font-size:13px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:44px}
details.more summary::-webkit-details-marker{display:none}
details.more summary small{font-weight:600;color:var(--muted)}
details.more[open] summary .icon{transform:rotate(180deg)}
details.more .inner{padding:0 15px 15px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.field-label{font-size:12px;font-weight:700;color:var(--ink2);min-width:92px}
.mini-seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.mini-seg button{border:0;background:transparent;padding:9px 12px;font-size:12.5px;font-weight:700;min-height:40px;color:#5b6273}
.mini-seg button+button{border-left:1px solid var(--line)}
.mini-seg button.selected{background:var(--ap);color:var(--a)}
.toggle{display:flex;gap:10px;align-items:center;font-size:13px;min-height:40px;cursor:pointer}
.toggle input{width:20px;height:20px;accent-color:var(--a)}
.opt-grid{display:grid;gap:12px}

/* Buttons */
.btn{border-radius:12px;padding:11px 16px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:700;font-size:13.5px;text-decoration:none;display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:44px;transition:background .15s,border-color .15s}
.btn:hover:not(:disabled){background:#f6f6f9}
.btn.primary{background:var(--a);border-color:var(--a);color:#fff;box-shadow:0 8px 18px #6b55c82e}
.btn.primary:hover:not(:disabled){background:var(--a2)}
.btn.soft{background:var(--ap);color:var(--a);border-color:transparent}
.btn.soft:hover:not(:disabled){background:var(--a-soft)}
.btn.mint{background:var(--mint-bg);color:var(--mint);border-color:var(--mint-line)}
.btn.danger{color:var(--red);border-color:#f2d6db}
.btn.danger:hover:not(:disabled){background:var(--red-bg)}
.btn.full{width:100%;padding:14px}
.btn.small{padding:8px 11px;border-radius:10px;font-size:12.5px;min-height:38px}
.btn.big{font-size:15px;min-height:52px}
.actions{padding-top:20px}

/* Status & progress */
.system{border:1px solid #e3ebe7;background:#f7faf8;border-radius:14px;padding:12px 14px;display:flex;gap:11px;align-items:flex-start;margin:0 0 14px;font-size:12.5px;color:#4f5b5c}
.system p{margin:0}
.system b{color:#2e4a43}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#55b58a;flex:0 0 auto;margin-top:5px}
.dot.bad{background:#e19a52}
.dot.wait{background:#b9bfc9}
.uploadbox{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fbfbfd}
.progress{height:8px;border-radius:20px;background:#e7e7ef;overflow:hidden}
.bar{height:100%;width:0;background:linear-gradient(90deg,#7fc8b2,#8b74d8);border-radius:20px;transition:width .5s}
.bar.indeterminate{width:35%!important;animation:indet 1.4s ease-in-out infinite}
@keyframes indet{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
.qitem{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;background:#fcfcff}
.qitem.current{border-color:#d7cdf5;background:#fbf9ff}
.qhead{display:flex;gap:10px;align-items:center;margin-bottom:9px}
.qhead .t{flex:1;min-width:0}
.qhead strong{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qhead small{color:var(--muted);font-size:11.5px}
.qstage{font-size:12.5px;color:#596273;margin:8px 0 0;display:flex;justify-content:space-between;gap:10px}
.qstage b{color:var(--a);white-space:nowrap}
.state-badge{font-size:10.5px;padding:4px 8px;border-radius:8px;background:#eee8fb;color:#6a55a5;font-weight:700;white-space:nowrap}
.state-badge.done{background:#e3f4ea;color:#2f6f58}
.state-badge.failed,.state-badge.cancelled{background:#ffe9eb;color:#a14b57}
.state-badge.interrupted{background:#fff2dc;color:#8a5d14}
.empty{text-align:center;padding:4px 0 6px}
.empty img{width:100%;max-width:330px;height:auto;margin:0 auto 6px;display:block}
.empty h3{margin:10px 0 6px;font-family:var(--serif);font-size:20px}
.empty p{color:var(--muted);font-size:13px;max-width:330px;margin:0 auto}
.error{background:var(--red-bg);border:1px solid #f6cbd2;color:#9c3343;border-radius:12px;padding:11px 13px;font-size:13px;white-space:pre-wrap;word-break:break-word;margin:10px 0 0}
.warning{background:var(--amber-bg);border:1px solid #f1e2b6;color:#7c5717;border-radius:12px;padding:10px 12px;margin:8px 0 0;font-size:12.5px}
.note-info{background:#f2f5f8;color:#5f6876;padding:12px 14px;border-radius:12px;font-size:12.5px;line-height:1.6}
details.tech{margin-top:8px;font-size:12px;color:var(--muted)}
details.tech pre{white-space:pre-wrap;word-break:break-word;background:#f5f6f8;border-radius:10px;padding:10px;max-height:220px;overflow:auto;font-size:11px}

/* Mix room */
.mixroom{margin:6px 0 34px}
.mix-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.mix-head .meta{color:var(--muted);font-size:12.5px;margin-top:6px;display:flex;flex-wrap:wrap;gap:6px 12px}
.facts{display:flex;gap:8px;flex-wrap:wrap}
.fact{border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:#fff;min-width:96px}
.fact small{display:block;font-size:10.5px;color:var(--muted);font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.fact b{font-size:15px}
.fact em{font-style:normal;font-size:11px;color:var(--muted);display:block}
.fact.low b{color:#8a8f99}
.transport{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px;border:1px solid var(--line);border-radius:16px;background:#fbfbfd;margin-bottom:12px}
.play{width:52px;height:52px;border-radius:50%;border:0;background:var(--a);color:#fff;display:grid;place-items:center;box-shadow:0 8px 18px #6b55c835;flex:0 0 auto}
.play:hover{background:var(--a2)}
.play .icon{width:22px;height:22px;fill:currentColor;stroke:none}
.time{font-variant-numeric:tabular-nums;font-weight:700;font-size:14px;min-width:104px}
.transport .spacer{flex:1}
.ab{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.ab button{border:0;background:transparent;padding:10px 13px;font-weight:700;font-size:12.5px;min-height:44px;color:#5b6273}
.ab button.selected{background:var(--ink);color:#fff}
.lanes{display:flex;flex-direction:column;gap:8px}
.lane{display:grid;grid-template-columns:230px minmax(0,1fr);gap:10px;align-items:stretch;border:1px solid var(--line);border-radius:14px;background:#fff;padding:8px}
.lane.muted .wavebox{opacity:.35}
.lane-ctl{display:flex;flex-direction:column;gap:6px;justify-content:center;min-width:0}
.lane-name{display:flex;gap:8px;align-items:center;font-weight:700;font-size:13px;min-width:0}
.lane-name .sw{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.lane-name span.n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lane-btns{display:flex;gap:6px;align-items:center}
.ms{width:36px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:12px;color:#5b6273}
.ms[aria-pressed=true].m{background:#ffe9eb;color:#a14b57;border-color:#f2c7ce}
.ms[aria-pressed=true].s{background:#fff4d6;color:#7c5717;border-color:#f1dea6}
.gain{flex:1;min-width:0;accent-color:var(--a);height:34px}
.gain-val{font-size:11.5px;font-weight:700;color:var(--muted);width:40px;text-align:right;font-variant-numeric:tabular-nums}
.wavebox{position:relative;height:64px;overflow-x:auto;overflow-y:hidden;border-radius:10px;background:#f7f8fa;scrollbar-width:thin;touch-action:pan-x}
.wavebox canvas{display:block;height:64px;cursor:pointer}
.playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);pointer-events:none;left:0}
.zoom{display:inline-flex;gap:4px;align-items:center}
.zoom span{font-size:12px;font-weight:700;color:var(--muted);min-width:34px;text-align:center}
.mixgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin-top:18px}
.presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ctrl{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:10px;align-items:center;margin:10px 0}
.ctrl label{font-size:12.5px;font-weight:700;color:var(--ink2)}
.ctrl output{font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;min-width:66px;text-align:right}
.ctrl input[type=range]{width:100%;accent-color:var(--a);height:34px}
.stepper{display:flex;align-items:center;gap:6px;min-width:0}
.stepper input{flex:1;min-width:0}
.stepper button{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:18px}
.select{border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:#fff;min-height:42px;font-size:13px;width:100%}
.renders{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.render{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}
.render .t{flex:1;min-width:0;font-size:12.5px}
.render .t b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.render .t small{color:var(--muted)}
.dlgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dlrow{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:9px 10px;background:#fff;min-width:0}
.dlrow .sw{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.dlrow b{font-size:12.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl{border:1px solid #e2e6eb;background:#fafbfc;padding:6px 9px;border-radius:8px;font-size:11.5px;font-weight:700;text-decoration:none;color:var(--ink2);white-space:nowrap;min-height:32px;display:inline-flex;align-items:center}
.dl:hover{background:#f0edf8}
.dl small{font-weight:600;color:var(--muted);margin-left:4px}
.preview-audio{width:100%;height:40px;margin-top:10px}

/* Library */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.search{flex:1 1 240px;border:1px solid var(--line);border-radius:12px;padding:11px 14px;background:#fff;min-height:44px}
.storage{display:flex;gap:14px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:#fff;margin-bottom:16px}
.storage .meter{flex:1 1 220px}
.storage small{color:var(--muted);font-size:12px}
.history-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:60px}
.history-item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px;display:flex;flex-direction:column;gap:11px;min-width:0}
.history-top{display:flex;gap:11px;align-items:center}
.history-top .t{flex:1;min-width:0}
.history-item strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
.history-item small{color:var(--muted);font-size:11.5px}
.history-actions{display:flex;gap:7px;flex-wrap:wrap}
.thumb{width:42px;height:42px;border-radius:12px;background:var(--ap);color:var(--a);display:grid;place-items:center;flex:0 0 auto}
.thumb.video{background:var(--mint-bg);color:var(--mint)}

/* Guide */
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.step-card{padding:0;overflow:hidden}
.step-card img{display:block;width:100%;height:auto;background:#f4f2fb;border-bottom:1px solid var(--line2)}
.step-card .body{padding:18px 20px 20px}
.step-card p,.guide p{font-size:13.5px;color:var(--muted);margin:8px 0 0}
.number{display:inline-grid;place-items:center;background:#eceafb;color:#6951aa;width:30px;height:30px;border-radius:10px;font-weight:700;margin-bottom:10px;font-size:13px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.table-wrap{overflow-x:auto;margin-top:12px;border:1px solid var(--line);border-radius:14px}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:top}
th{background:#f8f8fb;font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;color:#5b6273}
tr:last-child td{border-bottom:0}
.lan-card{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:center}
.lan-card img{width:100%;height:auto}
ol.steps{padding-left:20px;margin:8px 0 0;font-size:13.5px;color:var(--ink2)}
ol.steps li{margin:4px 0}
.faq details{border-bottom:1px solid var(--line2);padding:4px 0}
.faq summary{cursor:pointer;font-weight:700;padding:10px 0;min-height:44px;display:flex;align-items:center}
.faq p{margin:0 0 12px}

/* Footer */
.footer{border-top:1px solid #e3e5e7;padding:22px 0 34px;display:flex;justify-content:space-between;gap:18px;color:#6f7581;font-size:12.5px;flex-wrap:wrap}
.footer a{color:#5d4bb0;font-weight:700;text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer nav{display:flex;gap:16px;flex-wrap:wrap}

/* Dialog */
.overlay{position:fixed;inset:0;background:rgba(25,28,40,.42);display:grid;place-items:center;z-index:80;padding:16px}
.dialog{background:#fff;border-radius:20px;max-width:440px;width:100%;padding:24px;box-shadow:0 30px 80px rgba(20,20,40,.25)}
.dialog h2{font-size:23px;margin-bottom:8px}
.dialog p{color:var(--muted);font-size:13.5px}
.dialog .btns{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.code-input{width:100%;font-size:24px;letter-spacing:4px;text-align:center;padding:12px;border:1.5px solid #cfc5ef;border-radius:14px;text-transform:uppercase;font-weight:700}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;font-size:13.5px;z-index:90;box-shadow:0 12px 30px rgba(0,0,0,.2);max-width:calc(100vw - 32px)}

@media (max-width:980px){
  .mixgrid{grid-template-columns:1fr}
  .lane{grid-template-columns:190px minmax(0,1fr)}
}
@media (max-width:860px){
  .shell{padding:0 18px}
  .hero{grid-template-columns:1fr;gap:20px;padding:26px 0 18px}
  .hero-art{order:-1;aspect-ratio:560/300}
  .workgrid,.two-col{grid-template-columns:1fr}
  .guide-grid,.history-grid{grid-template-columns:1fr}
  .pill{display:none}
  .lan-card{grid-template-columns:1fr}
  .lan-card img{max-width:220px}
}
@media (max-width:640px){
  .lane{grid-template-columns:minmax(0,1fr);gap:6px}
  .lane-ctl{gap:4px}
  .mixroom .mix-head>div{width:100%}
  .dlgrid{grid-template-columns:1fr}
  .ctrl{grid-template-columns:72px minmax(0,1fr) auto}
  .mixgrid>.card{padding:14px}
}
@media (max-width:520px){
  .shell{padding:0 14px}
  .top-inner{min-height:60px;gap:8px}
  .brand img{width:34px;height:34px}
  .brand-label{display:none}
  .brand small{display:none}
  .nav button{padding:8px 9px;font-size:12.5px}
  .nav button .icon{display:none}
  .hero h1{font-size:34px}
  .hero p.lead{font-size:15px}
  .hero-tags span{font-size:11px;padding:6px 9px}
  .card{padding:16px;border-radius:16px}
  .drop{padding:22px 12px}
  .seg.c3{grid-template-columns:1fr}
  .seg.c3 .option{min-height:0}
  .option{min-height:0}
  .transport{gap:8px}
  .time{min-width:0;font-size:13px}
  .footer{display:block}
  .footer>*{display:block;margin-bottom:8px}
}
@media (max-width:400px){
  .hero-art{aspect-ratio:560/320}
}
@media (max-width:370px){
  .nav button{padding:8px 7px;font-size:12px}
  .seg.c2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .bar.indeterminate{width:100%!important;opacity:.6}
}