:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  color: #17212b;
  background: #eef1f4;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
button, a { font: inherit; }

.app-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.sidebar { display: flex; flex-direction: column; min-height: 100vh; padding: 28px 18px 18px; background: #17212b; color: #fff; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 26px; border-bottom: 1px solid #34414d; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; background: #df4f3f; border-radius: 6px; font-size: 14px; font-weight: 700; }
.brand h1 { max-width: 166px; margin: 0; overflow-wrap: anywhere; font-size: 18px; line-height: 1.35; letter-spacing: 0; }
.brand p { margin: 5px 0 0; color: #9eabb6; font-size: 10px; letter-spacing: 0; }
.program-list { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 22px 0; }
.program-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: #cbd3da; text-align: left; cursor: pointer; }
.program-item:hover { background: #26333e; color: #fff; }
.program-item.active { background: #fff; color: #17212b; }
.program-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid currentColor; border-radius: 5px; font-size: 13px; font-weight: 700; }
.program-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar footer { padding: 16px 8px 0; border-top: 1px solid #34414d; text-align: center; }
.sidebar footer a { color: #9eabb6; font-size: 12px; text-decoration: none; }
.sidebar footer a:hover { color: #fff; text-decoration: underline; }

.workspace { display: grid; grid-template-rows: 76px minmax(0, 1fr); min-width: 0; min-height: 100vh; }
.workspace-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 24px; border-bottom: 1px solid #d7dde2; background: #fff; }
.workspace-bar h2 { margin: 0; font-size: 18px; line-height: 1.4; letter-spacing: 0; }
.workspace-bar p { margin: 4px 0 0; color: #687581; font-size: 13px; }
.open-button, .icon-button { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid #ccd4da; border-radius: 6px; background: #fff; color: #17212b; text-decoration: none; cursor: pointer; }
.open-button:hover { border-color: #df4f3f; color: #df4f3f; }
.open-button span { font-size: 22px; line-height: 1; }
.frame-wrap { position: relative; min-height: 0; margin: 16px; overflow: hidden; border: 1px solid #d7dde2; border-radius: 6px; background: #fff; }
.frame-wrap iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; background: #fff; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; color: #687581; font-size: 14px; }
.mobile-header, .backdrop { display: none; }

@media (max-width: 760px) {
  .app-shell { display: block; padding-top: 58px; }
  .mobile-header { position: fixed; z-index: 20; inset: 0 0 auto; display: flex; align-items: center; gap: 12px; height: 58px; padding: 8px 14px; border-bottom: 1px solid #d7dde2; background: #fff; }
  .mobile-header strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
  .icon-button { display: flex; flex-direction: column; gap: 4px; width: 38px; height: 38px; padding: 9px; }
  .icon-button span { width: 18px; height: 2px; background: currentColor; }
  .sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: min(82vw, 280px); min-height: 100%; transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .backdrop { position: fixed; z-index: 25; inset: 0; background: rgb(0 0 0 / 45%); }
  .backdrop.open { display: block; }
  .workspace { grid-template-rows: 70px calc(100vh - 128px); min-height: calc(100vh - 58px); }
  .workspace-bar { padding: 10px 14px; }
  .workspace-bar h2 { font-size: 16px; }
  .workspace-bar p { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .frame-wrap { margin: 8px; }
}