:root {
  --studio-ink: #202632;
  --studio-paper: #f2f3f5;
  --studio-surface: #ffffff;
  --studio-line: #d8dbe0;
  --studio-blue: #4655d4;
  --studio-orange: #f59a3e;
  --studio-green: #39a376;
  --studio-muted: #737985;
  --sidebar: 184px;
  --topbar: 66px;
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}

html, body { min-width: 1080px; background: var(--studio-paper); }
.topbar { padding: 0 20px; border-color: #e3e5e8; background: rgba(255,255,255,.97); box-shadow: 0 1px 0 rgba(31,38,50,.03); }
.brand { width: 238px; }
.brand-mark { position: relative; color: #fff; border-radius: 7px; background: var(--studio-ink); box-shadow: none; }
.brand-mark::after { content:""; position:absolute; right:4px; bottom:4px; width:7px; height:7px; border-radius:2px; background:var(--studio-orange); }
.brand strong { color: #1d222c; font-size:18px; }
.brand small { color: #8b9099; font-size:12px; }
.team-switcher, .queue-button, .icon-button { color:#525966; border-color:#e1e3e7; border-radius:7px; background:#fff; }
.team-switcher { padding:9px 12px; }
.global-search { border-color:#e0e2e6; border-radius:8px; background:#f5f6f7; }
.global-search input { color:#252b35; }
.sync-status { color:#69707b; font-size:14px; }
.sync-status i { background:var(--studio-green); box-shadow:0 0 0 4px rgba(57,163,118,.1); }
.queue-button b { color:#fff; background:var(--studio-blue); }
.icon-button { color:#656c77; }
.avatar-stack span { color:#fff; border-color:#fff; background:var(--studio-ink); }

.sidebar { padding:18px 10px 14px; border-color:#e0e2e6; background:#f9fafb; }
.sidebar nav { gap:3px; }
.nav-item { padding:11px 12px; color:#606672; border-radius:7px; font-size:15px; }
.nav-item span { color:#979ca5; font-size:17px; }
.nav-item:hover { color:#252b34; background:#eef0f3; }
.nav-item.active { color:#fff; border-color:transparent; background:var(--studio-ink); box-shadow:0 6px 14px rgba(31,38,50,.12); }
.nav-item.active span { color:#ffb866; }
.storage-card { border-color:#e0e2e6; border-radius:8px; background:#fff; box-shadow:none; }
.storage-card div { color:#626874; }
.storage-card b { color:var(--studio-blue); }
.storage-card progress { accent-color:var(--studio-blue); }
.storage-card small { color:#8a909a; }
.main-content { background:var(--studio-paper); }
.right-rail { border-color:#e0e2e6; background:#f8f9fa; }
.btn { border-radius:7px; }
.btn.primary { color:#fff; border-color:var(--studio-blue); background:var(--studio-blue); box-shadow:none; }
.btn.primary:hover { color:#fff; border-color:#3946bd; background:#3946bd; }

.studio-home { padding:25px 28px 48px; color:var(--studio-ink); }
.studio-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; max-width:1260px; margin:0 auto 14px; }
.studio-head h1 { margin:7px 0 4px; font-size:29px; line-height:1.2; letter-spacing:-.7px; }
.studio-head p { margin:0; color:var(--studio-muted); font-size:14px; }
.studio-kicker { display:flex; align-items:center; gap:8px; color:#727985; font-size:12px; }
.studio-live { width:7px; height:7px; border-radius:50%; background:#b4b8c0; box-shadow:0 0 0 4px rgba(120,124,133,.08); }
.studio-live.online { background:var(--studio-green); box-shadow:0 0 0 4px rgba(57,163,118,.1); }
.studio-head-actions { display:flex; align-items:center; gap:9px; }
.studio-head-actions > span { display:grid; min-width:64px; padding:7px 11px; border-left:1px solid #d6d9dd; }
.studio-head-actions > span b { font-size:19px; line-height:1; }
.studio-head-actions > span small { margin-top:4px; color:#858a94; font-size:12px; }
.studio-head-actions .btn { height:38px; margin-left:4px; padding-inline:17px; }

.studio-workspace { display:grid; grid-template-columns:minmax(620px,1fr) 286px; gap:14px; max-width:1260px; margin:0 auto; align-items:start; }
.production-studio { overflow:hidden; border:1px solid #d4d7dc; border-radius:12px; background:#fff; box-shadow:0 12px 35px rgba(30,36,48,.07); }
.production-studio-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:50px; padding:0 16px; color:#fff; background:var(--studio-ink); }
.production-studio-bar > div:first-child { display:flex; align-items:baseline; gap:10px; }
.production-studio-bar b { font-size:14px; }
.production-studio-bar > div:first-child span { color:#aeb5c1; font-size:12px; }
.studio-legend { display:flex; align-items:center; gap:13px; color:#c2c7cf; font-size:12px; }
.studio-legend span { display:flex; align-items:center; gap:5px; }
.studio-legend i { width:6px; height:6px; border-radius:50%; background:#747b86; }
.studio-legend i.busy { background:var(--studio-orange); box-shadow:0 0 0 3px rgba(245,154,62,.12); }
.studio-legend i.complete { background:var(--studio-green); }

.studio-floor { position:relative; isolation:isolate; display:grid; grid-template-columns:repeat(3,minmax(175px,1fr)); grid-template-rows:repeat(2,160px); gap:55px 18px; min-height:455px; padding:33px 25px 38px; overflow:hidden; background-color:#e9ebee; background-image:linear-gradient(rgba(110,117,128,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(110,117,128,.06) 1px,transparent 1px); background-size:22px 22px; }
.studio-floor::before { content:""; position:absolute; z-index:-1; inset:13px; border:2px solid #fff; box-shadow:inset 0 0 0 1px #cfd3d9; pointer-events:none; }
.studio-floor::after { content:""; position:absolute; z-index:-1; top:50%; left:14px; right:14px; height:72px; transform:translateY(-50%); border-top:1px dashed #bfc4cb; border-bottom:1px dashed #bfc4cb; background:rgba(255,255,255,.38); pointer-events:none; }
.floor-door,.floor-exit { position:absolute; z-index:4; top:50%; padding:5px 7px; color:#727985; background:#e9ebee; font-size:12px; letter-spacing:.4px; }
.floor-door { left:4px; transform:translateY(-50%) rotate(-90deg); transform-origin:center; }
.floor-exit { right:3px; transform:translateY(-50%) rotate(90deg); transform-origin:center; }
.floor-axis { position:absolute; z-index:0; top:50%; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,#bfc4cc 20%,#bfc4cc 80%,transparent); }

.work-cell { --cell:#5360d6; --cell-soft:#edf0ff; position:relative; z-index:2; min-width:0; height:160px; padding:0; overflow:hidden; color:var(--studio-ink); text-align:left; border:1px solid rgba(113,120,132,.18); border-radius:8px; background:rgba(255,255,255,.62); cursor:pointer; box-shadow:0 2px 0 rgba(255,255,255,.75); transition:border-color .16s ease,background-color .16s ease,transform .16s ease; }
.work-cell.indigo { --cell:#5360d6; --cell-soft:#edf0ff; }
.work-cell.blue { --cell:#3c82b9; --cell-soft:#e7f3fb; }
.work-cell.rose { --cell:#b3617d; --cell-soft:#f9eaf0; }
.work-cell.orange { --cell:#d97c31; --cell-soft:#fff0e1; }
.work-cell.cyan { --cell:#2e9698; --cell-soft:#e4f5f4; }
.work-cell.green { --cell:#438d68; --cell-soft:#e6f3ec; }
.work-cell:hover { z-index:3; border-color:var(--cell); background:#fff; transform:translateY(-2px); }
.work-cell:focus-visible { z-index:5; outline:3px solid rgba(70,85,212,.26); outline-offset:2px; }
.work-cell.active { border-color:var(--cell); background:#fff; box-shadow:0 0 0 3px color-mix(in srgb,var(--cell) 15%,transparent),0 9px 22px rgba(35,42,54,.12); }
.cell-meta { position:absolute; z-index:5; top:10px; left:10px; right:10px; display:grid; grid-template-columns:25px minmax(0,1fr) auto; align-items:center; gap:8px; }
.cell-meta > i { display:grid; place-items:center; width:25px; height:25px; color:var(--cell); border:1px solid color-mix(in srgb,var(--cell) 28%,#fff); border-radius:5px; background:var(--cell-soft); font-size:12px; font-style:normal; font-weight:800; }
.cell-meta b,.cell-meta small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cell-meta b { font-size:12px; }
.cell-meta small { margin-top:2px; color:#838994; font-size:12px; }
.cell-meta > em { padding:4px 6px; color:#7f858e; border-radius:10px; background:#edeef0; font-size:12px; font-style:normal; white-space:nowrap; }
.work-cell.active .cell-meta > em { color:#fff; background:var(--cell); }
.work-cell.done .cell-meta > em { color:#237551; background:#dff1e8; }
.desk-plan { position:absolute; left:12px; right:12px; bottom:0; height:112px; transform:scale(.86); transform-origin:center bottom; }
.floor-shadow { position:absolute; z-index:0; left:50%; bottom:8px; width:165px; height:35px; transform:translateX(-50%); border-radius:50%; background:rgba(40,46,58,.1); filter:blur(6px); }
.desk-top { position:absolute; z-index:2; left:50%; bottom:36px; width:150px; height:65px; transform:translateX(-50%); border:1px solid #b97b4e; border-radius:5px; background:linear-gradient(90deg,#c98c5e,#dda775 50%,#ca8b5d); box-shadow:inset 0 2px rgba(255,255,255,.25),0 6px 0 #9b6240,0 9px 14px rgba(72,48,34,.16); }
.desk-top::before,.desk-top::after { content:""; position:absolute; top:8px; bottom:8px; width:3px; border-radius:2px; background:rgba(111,64,37,.18); }
.desk-top::before { left:8px; }
.desk-top::after { right:8px; }
.screen-top { position:absolute; left:19px; top:9px; width:55px; height:34px; border:4px solid #353c48; border-radius:4px; background:linear-gradient(145deg,#edf2ff,#8292dc); box-shadow:0 4px 7px rgba(29,36,49,.16); }
.screen-top::after { content:""; position:absolute; left:23px; bottom:-12px; width:4px; height:9px; background:#454c57; box-shadow:-9px 8px 0 1px #454c57; }
.work-cell.active .screen-top { background:linear-gradient(145deg,#fff4e7,#f59a3e); animation:screenWork 1.8s ease-in-out infinite; }
.keyboard-top { position:absolute; left:24px; bottom:8px; width:63px; height:11px; border-radius:2px; background:repeating-linear-gradient(90deg,#c8cbd1 0 4px,#e9eaed 4px 6px); box-shadow:0 2px 0 rgba(68,72,81,.22); }
.tablet-top { position:absolute; right:18px; top:13px; width:31px; height:43px; border:3px solid #525967; border-radius:4px; background:#f3f4f6; }
.tablet-top::after { content:""; position:absolute; inset:4px; background:linear-gradient(145deg,var(--cell-soft),#fff); }
.desk-light { position:absolute; right:57px; bottom:10px; width:7px; height:7px; border-radius:50%; background:var(--cell); box-shadow:0 0 0 4px color-mix(in srgb,var(--cell) 12%,transparent); }
.chair-top { position:absolute; z-index:1; left:50%; bottom:7px; width:52px; height:44px; transform:translateX(-50%); border:5px solid #3f4652; border-radius:18px 18px 11px 11px; background:#59616e; box-shadow:0 5px 8px rgba(32,38,49,.18); }
.chair-top::before { content:""; position:absolute; left:50%; bottom:-17px; width:5px; height:18px; transform:translateX(-50%); background:#4a515c; box-shadow:-14px 13px 0 -1px #4a515c,14px 13px 0 -1px #4a515c; }
.operator-top { position:absolute; z-index:4; left:50%; bottom:2px; width:42px; height:58px; transform:translateX(-50%); border-radius:20px 20px 12px 12px; background:var(--cell); box-shadow:inset 0 8px rgba(255,255,255,.1); }
.operator-top::before { content:""; position:absolute; left:9px; top:-19px; width:24px; height:24px; border:3px solid #343944; border-radius:50%; background:#e9b990; }
.operator-top::after { content:""; position:absolute; left:8px; top:-20px; width:27px; height:13px; border-radius:15px 15px 5px 5px; background:#343944; }
.operator-top span { position:absolute; left:50%; top:16px; color:#fff; font-size:12px; font-style:normal; font-weight:800; transform:translateX(-50%); }

.dispatch-hub { position:absolute; z-index:5; left:50%; top:50%; display:grid; grid-template-columns:28px 1fr; width:190px; min-height:54px; padding:9px 12px; transform:translate(-50%,-50%); border:1px solid #252c38; border-radius:7px; color:#fff; background:#29313f; box-shadow:0 8px 18px rgba(31,38,50,.2); }
.dispatch-hub > span { grid-row:1/3; align-self:center; width:22px; height:22px; border:5px solid #f7a24a; border-radius:50%; box-shadow:inset 0 0 0 3px #29313f,0 0 0 1px rgba(255,255,255,.25); }
.dispatch-hub b { align-self:end; font-size:12px; }
.dispatch-hub small { margin-top:3px; color:#bfc5cf; font-size:12px; }
.production-studio-foot { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; min-height:43px; padding:0 15px; border-top:1px solid #e3e5e8; background:#fbfbfc; }
.production-studio-foot span { color:#8a909a; font-size:12px; }
.production-studio-foot b { overflow:hidden; color:#545b66; font-size:12px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.production-studio-foot button { padding:0; color:var(--studio-blue); border:0; background:none; font-size:12px; cursor:pointer; }

.dispatch-panel { display:grid; gap:12px; }
.dispatch-card,.dispatch-links { border:1px solid #d6d9de; border-radius:10px; background:#fff; }
.dispatch-card { padding:18px; }
.dispatch-title { display:flex; align-items:center; justify-content:space-between; color:#686f7a; font-size:12px; }
.dispatch-title small { display:grid; place-items:center; width:24px; height:24px; color:#fff; border-radius:5px; background:var(--studio-ink); font-size:12px; }
.dispatch-card h2 { margin:20px 0 8px; font-size:22px; letter-spacing:-.4px; }
.dispatch-card p { margin:0 0 15px; color:#777d87; font-size:12px; line-height:1.7; }
.dispatch-card textarea { width:100%; min-height:142px; padding:12px; resize:vertical; color:#2b313b; border:1px solid #d9dce1; border-radius:6px; outline:none; background:#f7f8f9; font-size:13px; line-height:1.65; }
.dispatch-card textarea:focus { border-color:#6875dc; box-shadow:0 0 0 3px rgba(70,85,212,.1); }
.dispatch-card .btn { width:100%; margin-top:10px; min-height:40px; }
.dispatch-links { overflow:hidden; }
.dispatch-links button { display:grid; grid-template-columns:31px 1fr; align-items:center; gap:10px; width:100%; padding:12px 13px; color:var(--studio-ink); text-align:left; border:0; border-bottom:1px solid #e5e7ea; background:#fff; cursor:pointer; }
.dispatch-links button:last-child { border-bottom:0; }
.dispatch-links button:hover { background:#f6f7f8; }
.dispatch-links button > span { display:grid; place-items:center; width:31px; height:31px; color:#fff; border-radius:6px; background:#4a5260; font-size:12px; font-weight:800; }
.dispatch-links button:nth-child(2) > span { background:#9d6077; }
.dispatch-links button:nth-child(3) > span { background:#3a8586; }
.dispatch-links b,.dispatch-links small { display:block; }
.dispatch-links b { font-size:12px; }
.dispatch-links small { margin-top:3px; color:#8c919a; font-size:12px; }

.studio-metrics { display:grid; grid-template-columns:repeat(4,1fr); max-width:1260px; margin:14px auto 26px; border:1px solid #d8dbe0; border-radius:9px; background:#fff; }
.studio-metrics > span { display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:0 16px; border-right:1px solid #e3e5e8; }
.studio-metrics > span:last-child { border-right:0; }
.studio-metrics small { color:#7e848f; font-size:12px; }
.studio-metrics b { font-size:20px; }
.studio-home .project-heading,.studio-home > .section-head,.studio-home > .project-grid,.studio-home > .empty-state { max-width:1260px; margin-left:auto; margin-right:auto; }
.studio-home .project-heading { align-items:center; padding-top:4px; }
.studio-home .project-heading h1 { font-size:20px; }
.studio-home .project-heading p { font-size:12px; }
.studio-home > .section-head { margin-top:0; }
.studio-home > .section-head h2 { font-size:13px; }
.studio-home > .section-head span { max-width:65%; overflow:hidden; color:#91969f; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }

@keyframes screenWork { 0%,100% { box-shadow:0 4px 7px rgba(29,36,49,.16),0 0 0 0 rgba(245,154,62,0); } 50% { box-shadow:0 4px 7px rgba(29,36,49,.16),0 0 0 5px rgba(245,154,62,.13); } }
@media (prefers-reduced-motion: reduce) { .work-cell,.screen-top { transition:none; animation:none !important; } }
@media (max-width:1380px) {
  .studio-workspace { grid-template-columns:minmax(600px,1fr) 270px; }
  .studio-floor { column-gap:12px; padding-inline:18px; }
  .cell-meta small { max-width:115px; }
}