/* Approved Starship Control interface. Reference canvas: 1586 × 992. */
:root {
  color-scheme: dark;
  --bg: #030c15; --surface: #0b1725; --surface-2: #112033;
  --ink: #eff4ff; --muted: #91a7c6; --border: #20364c;
  --accent: #32c8fa; --accent-soft: #102a45; --accent-strong: #6cdfff;
  --success: #33ed79; --danger: #ff697d; --warning: #ff8b5a;
  --radius: 15px; --shadow: 0 10px 38px #0004;
  --sidebar: 222px; --topbar: 80px;
  --font: "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
}
body { background: radial-gradient(ellipse at 50% 15%, #10223966, transparent 68%), var(--bg); }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #52d6ff; outline-offset: 4px; }
a { color: inherit; }
button { color: inherit; }
.ss-icon { display: inline-block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; flex-shrink: 0; }
.sidebar { padding: 0 10px; background: linear-gradient(115deg, #0d1727b3, #06101bea 55%, #101a2b); border-color: #172d41; }
.sidebar-brand { height: 80px; padding: 17px 11px; margin-bottom: 17px; }
.sidebar-logo { width: 193px; height: 46px; object-fit: contain; }
.nav { gap: 7px; }
.nav a { height: 59px; padding: 12px 20px; gap: 23px; font-size: 18px; font-weight: 500; color: #d3e0f5; border-radius: 8px 0 0 8px; }
.nav a .ss-icon { width: 28px; height: 28px; }
.nav-ico { width: 28px; opacity: 1; display: inline-flex; }
.nav a.active { color: #f2f6ff; background: linear-gradient(90deg, #143c66, #0a1b2c); box-shadow: inset 1px 0 #32c9ff; }
.nav a.active .ss-icon { color: #4fd0ff; filter: drop-shadow(0 0 8px #20b6fc44); }
.nav a:hover { background-color: #17304a; }
.sidebar-foot { display: none; }
.sidebar-download { display:flex; align-items:center; gap:14px; flex:0 0 auto; min-height:52px; margin:12px 4px 8px; padding:12px 16px; border:1px solid #25435c; border-radius:10px; color:#d3e0f5; background:linear-gradient(105deg,#112d43,#0d1c2b); font-size:16px; font-weight:500; text-decoration:none; transition:background .18s ease,border-color .18s ease,color .18s ease; }
.sidebar-download:hover { color:#f2f6ff; border-color:#2aaed0; background:linear-gradient(105deg,#143b53,#10263b); }
.sidebar-download-icon { display:inline-flex; width:28px; flex:0 0 28px; justify-content:center; color:#4fd0ff; font-size:21px; line-height:1; }
.topbar { padding: 0 30px; gap: 20px; background: #06101aca; border-color: #162739; backdrop-filter: blur(18px); z-index: 25; }
.topbar-title { display: none; }
.global-search { position: relative; width: min(540px, 55%); }
.global-search form { height: 46px; border: 1px solid #344761; border-radius: 14px; background: linear-gradient(105deg, #152032, #192435); display: flex; gap: 14px; align-items: center; padding: 0 16px; box-shadow: inset 0 1px 3px #ffffff04; }
.global-search form > span { color: #c3d5f2; }
.global-search input { border: 0; background: transparent; padding: 0; margin: 0; min-width: 0; box-shadow: none; outline: none; font-size: 14px; }
.global-search input::placeholder { color: #91a4c1; opacity: 1; }
.global-search input:focus { box-shadow: none; }
.global-search kbd { font: 10px var(--font); color: #91a7c6; border: 1px solid #35455b; border-radius: 4px; white-space: nowrap; padding: 1px 5px; opacity: 0; }
.global-search:focus-within kbd { opacity: 1; }
.topbar-actions { align-items: center; gap: 24px; }
.notification-btn { position: relative; width: 32px; height: 40px; }
.notification-btn .ss-icon { width: 27px; height: 27px; }
.notification-btn i { position: absolute; top: 4px; right: 3px; width: 7px; height: 7px; background: #ff535d; border-radius: 50%; box-shadow: 0 0 0 2px #09121e; }
.header-divider { width: 1px; height: 25px; background: #6d8daa; margin: 0 2px; }
.profile-toggle { display: flex; gap: 12px; align-items: center; border: 0; background: transparent; padding: 0; font: inherit; cursor: pointer; white-space: nowrap; }
.profile-toggle > .ss-icon { width: 17px; height: 17px; }
.profile-avatar { display: block; width: 42px; height: 42px; border-radius: 50%; background: url('/public/starship/reference-media.png') 92.48% 2.002% / 3688.37% 2306.98%; border: 1px solid #86a3c633; }
.header-popover-wrap { position: relative; }
.header-popover, .search-results { position: absolute; top: calc(100% + 18px); right: 0; min-width: 260px; padding: 18px; background: #0d1c2dfa; border: 1px solid #304964; border-radius: 14px; box-shadow: 0 20px 50px #0008; }
.header-popover p { font-size: 13px; color: var(--muted); margin: 12px 0 18px; }
.header-popover a { text-decoration: none; color: var(--accent); display: flex; align-items: center; justify-content: space-between; }
.profile-popover { min-width: 190px; display: grid; gap: 15px; }
.profile-popover button { text-align: left; border: 0; border-top: 1px solid var(--border); background: transparent; cursor: pointer; padding: 13px 0 0; font: inherit; }
.search-results { width: min(620px, 82vw); left: 0; right: auto; max-height: 70vh; overflow: auto; padding: 12px; }
.search-result { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; border: 0; border-radius: 8px; background: transparent; padding: 10px; cursor: pointer; font: inherit; }
.search-result:hover { background: #19304b; }
.search-result > div { min-width: 0; }
.search-result strong, .search-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result small { color: var(--muted); margin-top: 3px; font-size: 11px; }
.search-message { padding: 15px; color: var(--muted); font-size: 13px; }
.page { padding: 25px 34px; }
#page-dashboard { gap: 14px; padding: 0 24px 24px 34px; isolation: isolate; }
.starship-hero { position: relative; height: 412px; padding-top: 25px; }
.starship-hero::before { content: ''; position: absolute; z-index: -1; left: -34px; right: -24px; top: -60px; height: 480px; background: url('/public/starship/nas-orbit-hero.png') right center / 108% 100% no-repeat; pointer-events: none; }
.hero-intro { padding: 0 26px; position: relative; z-index: 1; }
.hero-intro h1 { font-size: clamp(31px, 3.2vw, 51px); line-height: 1.25; letter-spacing: -.6px; margin: 7px 0 11px; font-weight: 750; white-space: nowrap; }
.hero-intro em { font-style: normal; color: #38d6e8; }
.hero-intro > p { font-size: 19px; letter-spacing: .4px; margin: 0; color: #d0dcf1; }
.device-status { display: flex; align-items: center; gap: 20px; margin-top: 22px; font-size: 15px; color: #becce1; white-space: nowrap; }
.device-online { color: #43f780; display: inline-flex; align-items: center; gap: 11px; }
.device-online i { width: 13px; height: 13px; background: currentColor; border-radius: 50%; box-shadow: 0 0 13px #36ed7040; }
.device-online.offline { color: #ff9f69; }
.status-separator { width: 1px; height: 16px; background: #7390b0; }
.device-network { display: flex; align-items: center; gap: 6px; }
.device-network .ss-icon { width: 15px; height: 17px; }
.storage-panel { position: absolute; left: 0; bottom: 0; width: 51%; height: 209px; display: flex; align-items: center; border: 1px solid #2a4965; border-radius: 15px; background: linear-gradient(115deg, #0f1e31e8, #071421df); text-decoration: none; overflow: hidden; box-shadow: inset 0 1px #81bdf307; }
.storage-panel:hover { border-color: #4582a7; }
.storage-info { padding: 19px 22px 17px 27px; flex: 1; min-width: 0; z-index: 1; }
.storage-info h2 { font-size: 18px; font-weight: 500; margin: 0 0 13px; display: flex; gap: 18px; align-items: center; }
.storage-info h2 .ss-icon { width: 27px; height: 27px; color: #86aadf; }
.storage-numbers { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.storage-numbers strong { font-size: 43px; letter-spacing: -.8px; font-weight: 700; line-height: 1.1; }
.storage-numbers strong small { font-size: 26px; letter-spacing: 0; margin-left: 3px; }
.storage-numbers > span { font-size: 24px; color: #e1e9fa; }
.storage-progress-row { display: flex; gap: 12px; align-items: center; margin-top: 19px; font-size: 14px; color: #bbcfec; }
.storage-progress { height: 20px; flex: 1; background: linear-gradient(#293b53, #253047); border: 1px solid #526481; border-radius: 30px; box-shadow: inset 0 2px 5px #0003; overflow: hidden; }
.storage-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #12a7f3, #48d8fc 70%, #96e7ff); box-shadow: 0 0 16px #4dd4ff; transition: width .7s ease; }
.storage-legend { display: flex; gap: 24px; align-items: center; margin-top: 14px; font-size: 12px; white-space: nowrap; color: #b5cbe8; }
.storage-legend > span { display: flex; align-items: center; gap: 8px; }
.legend-dot { width: 11px; height: 11px; display: inline-block; border-radius: 50%; flex-shrink: 0; }
.legend-dot.cyan { background: #1cb9f4; box-shadow: inset 0 1px #77e7ff; }
.legend-dot.hollow { border: 1px solid #6786a7; background: #122138; }
.legend-dot.green { background: #31f578; }
.storage-orbit { width: 39%; height: 245px; margin-right: 5px; flex-shrink: 0; }
.storage-orbit svg { width: 100%; height: 100%; overflow: visible; }
.telemetry-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.telemetry-card { height: 97px; display: flex; position: relative; align-items: center; gap: 21px; padding: 12px 20px 12px 15px; border: 1px solid #172f42; background: linear-gradient(115deg, #0b1b2acc, #091421d9); border-radius: 15px; text-decoration: none; min-width: 0; overflow: hidden; }
.telemetry-card:hover { border-color: #3d658a; }
.telemetry-icon { width: 54px; height: 54px; border-radius: 13px; color: #45bdf9; background: #1b3042; display: grid; place-items: center; flex-shrink: 0; box-shadow: inset 0 1px #ffffff08; }
.telemetry-icon .ss-icon { width: 30px; height: 30px; }
.telemetry-info { align-self: center; min-width: 0; z-index: 1; }
.telemetry-info > span { display: block; font-size: 14px; color: #b2c9e8; white-space: nowrap; }
.telemetry-info strong { display: block; font-size: 30px; font-weight: 650; line-height: 1.1; margin-top: 8px; letter-spacing: -.4px; white-space: nowrap; }
.telemetry-info strong small { font-size: 20px; }
.sparkline { width: 38%; height: 44px; position: absolute; bottom: 17px; right: 17px; overflow: visible; color: #2bef77; }
.memory-card .telemetry-icon { background: #142c50; }
.memory-card .sparkline { color: #279dff; }
.temperature-card .telemetry-icon { background: #302a35; color: #ff8861; }
.temperature-card .sparkline { color: #ff7f4f; }
.temperature-card .sensor-unavailable { font-size: 21px; color: #b6c7de; }
.speed-card .telemetry-icon { background: #133440; color: #3edde9; }
.speed-card .telemetry-info strong { color: #6cecf4; font-size: 27px; }
.speed-card .telemetry-info strong small { font-size: 17px; }
.speed-bars { display: flex; align-items: end; justify-content: space-between; gap: 3px; position: absolute; right: 19px; bottom: 24px; height: 34px; width: 32%; }
.speed-bars i { display: block; width: 3px; background: #45e1f3; border-radius: 1px; box-shadow: 0 0 7px #27cee833; }
.starship-lower { display: grid; grid-template-columns: 1.075fr .965fr 1fr; gap: 13px; }
.starship-lower > .panel { height: 350px; min-width: 0; padding: 17px 20px; border: 1px solid #253e53; background: linear-gradient(115deg, #0d1a2aeb, #081320eb); box-shadow: inset 0 1px #ffffff04; }
.starship-lower .panel-head { gap: 10px; height: 29px; margin-bottom: 16px; }
.starship-lower h2 { display: flex; align-items: center; gap: 15px; font-size: 17px; font-weight: 600; white-space: nowrap; }
.starship-lower h2 .ss-icon { width: 24px; height: 25px; color: #c7dbfa; }
.transfer-chart-panel h2 .ss-icon { color: #2fcef6; }
.starship-lower .panel-head .link { display: flex; align-items: center; gap: 7px; font-size: 12px; white-space: nowrap; color: #4dbffc; }
.starship-lower .panel-head .link .ss-icon { width: 13px; height: 13px; }
.chart-speed { display: flex; align-items: center; gap: 5px; font-size: 11px; text-decoration: none; color: #a7bbd6; white-space: nowrap; }
.chart-speed > span:first-child { color: #eff6ff; }
.chart-speed .ss-icon { width: 12px; height: 12px; margin-left: 7px; }
.transfer-chart-wrap { width: 100%; height: 229px; }
.transfer-chart-wrap svg { width: 100%; height: 100%; overflow: visible; }
.transfer-legend { display: flex; justify-content: center; gap: 30px; margin-top: 10px; font-size: 12px; color: #b1c6e4; }
.transfer-legend > span { display: flex; align-items: center; gap: 9px; }
.transfer-legend strong { font-size: 12px; color: #edf3ff; font-weight: 500; }
.telemetry-note { font-size: 10px; color: #7f9bbd; margin: 7px 0 0; text-align: center; }
.starship-recent { display: grid; gap: 5px; }
.recent-row { display: flex; gap: 14px; align-items: center; min-width: 0; height: 51px; }
.recent-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; font: inherit; padding: 0; background: transparent; text-align: left; border: 0; cursor: pointer; }
.recent-open:hover strong { color: #52cefa; }
.recent-thumb { width: 55px; height: 43px; border-radius: 5px; overflow: hidden; flex-shrink: 0; background: #162638; display: grid; place-items: center; }
.recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.recent-copy { min-width: 0; flex: 1; }
.recent-copy strong { display: block; color: #e6efff; font-weight: 400; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.recent-copy small { display: block; font-size: 12px; color: #86a0c4; margin-top: 2px; white-space: nowrap; }
.recent-more { width: 20px; height: 32px; border: 0; background: transparent; cursor: pointer; padding: 0; color: #adcaec; flex-shrink: 0; }
.recent-more .ss-icon { width: 18px; height: 20px; }
.file-art { display: block; width: 38px; height: 45px; }
.starship-media { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 12px 10px; }
.dashboard-media-card { display: block; text-align: left; padding: 0; font: inherit; background: transparent; border: 0; cursor: pointer; min-width: 0; grid-column: span 5; }
.dashboard-media-card .media-picture { aspect-ratio: 1 / 1.1; border-radius: 6px; overflow: hidden; position: relative; background: #17304b; }
.dashboard-media-card.media-featured { grid-column: span 12; }
.dashboard-media-card.media-featured:nth-child(2) { grid-column: span 8; }
.dashboard-media-card.media-featured .media-picture { aspect-ratio: auto; height: 136px; }
.media-picture img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.dashboard-media-card:hover .media-picture img { transform: scale(1.04); }
.dashboard-media-card .media-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; margin-top: 4px; }
.dashboard-media-card.media-featured .media-name { position: absolute; bottom: 21px; left: 10px; right: 7px; font-size: 13px; text-shadow: 0 1px 5px #000; }
.dashboard-media-card.media-featured .media-picture::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, #0009); pointer-events: none; }
.dashboard-media-card.media-featured .media-name, .media-duration { z-index: 1; }
.media-duration { position: absolute; bottom: 4px; left: 10px; font-size: 11px; color: #d0dded; }
.play-overlay { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 37px; height: 37px; display: grid; place-items: center; background: #09121b55; border: 1px solid #e0ebffaa; color: white; border-radius: 50%; z-index: 1; }
.dashboard-media-card:not(.media-featured) .play-overlay { width: 26px; height: 26px; }
.play-overlay .ss-icon { width: 20px; height: 20px; fill: currentColor; stroke-width: 0; }
.reference-sprite { width: 100%; height: 100%; display: block; background-image: url('/public/starship/reference-media.png'); background-repeat: no-repeat; }
.dashboard-loading, .dashboard-empty { color: #a1b7d3; font-size: 13px; line-height: 1.9; padding: 40px 14px; text-align: center; grid-column: 1 / -1; }
.dashboard-empty .ss-icon { display: block; width: 40px; height: 40px; color: #5b8caf; margin: 0 auto 15px; }
.dashboard-empty button { margin-top: 18px; }
.media-empty-label { grid-column: 1/-1; font-size: 11px; color: var(--muted); text-align: center; }
.dashboard-error { font-size: 13px; color: #ffc49d; background: #36221a; border: 1px solid #624132; padding: 12px; border-radius: 10px; }
/* Keep the rest of the existing application in the same visual system. */
input, select, textarea { background: #0c1b2c; border-color: #2c415c; }
.table th { background: #112035; }
.table tbody tr:hover { background: #11243b; }
.table tbody tr.directory-row:hover { background: #143151; }
.btn.primary { color: #041522; background: linear-gradient(120deg, #23b8f4, #66dfff); border-color: #31bceb; }
.btn.primary:hover { background: #78e1ff; border-color: #78e1ff; }
.btn.danger { background: #391e2b; border-color: #623547; }
.file-ico.dir { background: #16344c; color: #5bd8ff; }
.file-ico.video, .file-ico.photo, .file-ico.audio, .file-ico.doc { background:#15304a; color:#87cafa; }
.file-ico .ss-icon { width: 20px; height: 20px; }
.dropzone { background:#0b1a2a; }
.file-action-option.danger, .badge.err { background:#351e2c; border-color:#643449; }
.badge.pause { background:#362a1b; }
.document-text, .document-text[readonly] { background:#081523; color:#e4efff; }
.login-wrap { background: radial-gradient(ellipse at 65% 20%, #18345377, transparent 60%), url('/public/starship/nas-orbit-hero.png') center/cover; }
.login-card { background: #0b182bec; backdrop-filter: blur(20px); border-color: #2b4d6e; box-shadow: 0 20px 80px #0008; }
.brand-logo { max-height: 100px; }
.brand-mark { background: #12273a; }
.modal-card, .file-action-card, .live-dialog { background: #0c1b2d; border-color: #304963; }
.modal-backdrop, .file-action-backdrop { background: #020810b8; backdrop-filter: blur(6px); }
.media-card, .photo-card { background: #0c1b2d; }
.media-thumb, .photo-thumb { background: #102439; }
.settings-menu { background: #0b192a; }
.settings-menu a.active { color: #70dcff; background: #113050; }
.upload-row, .task-item, .access-item { background: #0c1d30; }
.upload-progress, .stat-meter { background: #243850; }
.live-summary > div, .live-profile { background: #0b1b2d; }
.live-status.failed { background: #38202d; }
.live-dialog::backdrop { background: #020810b8; }
.live-logo { background: #dee8f1; }
.live-preview-video { background: #030b15; }
.toast { background: #102339; color: #ecf3ff; border-color: #355676; }
.toast.success { background:#123b31; color:#adf9d1; }
.toast.error { background:#3a1f2f; color:#ffc0ca; }
.mobile-bottom-nav { background: #091626f5; border-color: #25425f; }
@media(min-width:1600px) { .starship-hero { height: clamp(412px, 26vw, 560px); } .storage-panel { height: 220px; max-width: 800px; } .starship-lower > .panel { height: 370px; } .transfer-chart-wrap { height: 245px; } .starship-recent { gap: 8px; } }
@media(min-width:901px) and (max-width:1300px) {
  :root { --sidebar: 190px; --topbar: 70px; }
  .sidebar-logo { width: 164px; } .sidebar-brand { padding-left: 5px; height: 70px; }
  .nav a { font-size: 16px; gap: 16px; padding: 10px 14px; }
  #page-dashboard { padding-left: 24px; padding-right: 20px; }
  .starship-hero { height: 370px; padding-top: 25px; } .starship-hero::before { left: -24px; right: -20px; }
  .hero-intro { padding-left: 16px; } .hero-intro h1 { font-size: 34px; } .hero-intro > p { font-size: 15px; }
  .device-status { font-size: 12px; gap: 12px; }
  .storage-panel { width: 56%; height: 196px; } .storage-info { padding-left: 18px; } .storage-numbers strong { font-size: 34px; } .storage-numbers strong small, .storage-numbers > span { font-size: 21px; }
  .storage-orbit { width: 36%; } .storage-legend { gap: 15px; font-size: 11px; }
  .telemetry-card { padding: 12px; gap: 12px; height: 88px; } .telemetry-icon { width: 43px; height: 46px; } .telemetry-info > span { font-size: 11px; } .telemetry-info strong { font-size: 25px; } .sparkline { width: 33%; right: 10px; } .speed-card .telemetry-info strong { font-size: 22px; } .speed-bars { width: 27%; right: 10px; }
  .starship-lower > .panel { padding: 14px; } .starship-lower h2 { gap: 8px; font-size: 14px; } .chart-speed { font-size: 10px; } .chart-speed > span:first-child { max-width: 47px; overflow: hidden; } .recent-copy strong { font-size: 12px; } .recent-copy small { font-size: 10px; } .recent-open { gap: 9px; } .recent-thumb { width: 43px; } .starship-lower .panel-head .link { font-size: 10px; gap: 3px; } .transfer-legend { gap: 14px; font-size: 10px; }
}
@media(max-width:1100px) and (min-width:901px) { .starship-lower { grid-template-columns: 1fr 1fr; } .recent-media-panel { grid-column: 1/-1; } .starship-lower > .recent-media-panel { height: auto; } .starship-media { grid-template-columns: repeat(8, minmax(0,1fr)); } .dashboard-media-card { grid-column:span 1; } .dashboard-media-card.media-featured,.dashboard-media-card.media-featured:nth-child(2) { grid-column:span 2; } }
@media(max-width:900px) {
  :root { --topbar: 64px; }
  .sidebar { z-index: 45; } .sidebar-brand { margin-bottom: 10px; } .nav a { border-radius: 8px; }
  .topbar { height: 64px; padding: 0 16px; gap: 12px; } .global-search { width: min(540px, 70%); flex: 1; } .topbar-actions { gap: 14px; }
  .global-search form { height: 42px; }
  #page-dashboard { padding: 0 18px 90px; } .starship-hero { height: 400px; padding-top: 26px; } .starship-hero::before { left: -18px; right: -18px; top:0; height:406px; background-size: auto 100%; background-position: right; }
  .hero-intro { padding: 0 8px; } .hero-intro h1 { font-size: clamp(28px,4.1vw,40px); } .hero-intro > p { font-size: 15px; } .device-status { font-size: 12px; gap: 14px; }
  .storage-panel { width: 62%; height: 195px; } .storage-info { padding: 18px; } .storage-numbers strong { font-size: 34px; } .storage-numbers strong small, .storage-numbers > span { font-size: 21px; } .storage-legend { font-size: 11px; gap: 14px; }
  .telemetry-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .telemetry-card { height: 94px; }
  .starship-lower { grid-template-columns: 1fr 1fr; } .starship-lower .recent-media-panel { grid-column: 1/-1; height: auto; } .starship-media { grid-template-columns: repeat(8,minmax(0,1fr)); } .dashboard-media-card { grid-column:span 1; } .dashboard-media-card.media-featured,.dashboard-media-card.media-featured:nth-child(2) { grid-column:span 2; }
  .starship-lower > .panel { padding: 16px; } .starship-lower h2 { font-size: 14px; gap: 8px; } .starship-lower .panel-head .link { font-size: 11px; }
}
@media(max-width:600px) {
  .topbar { padding: 0 10px; gap: 8px; } .global-search form { padding: 0 10px; gap: 7px; } .global-search input { font-size: 12px; } .global-search kbd { display: none; }
  .profile-avatar { width: 32px; height: 32px; } #profile-label, .profile-toggle [data-icon="down"], .header-divider, .notification-btn { display: none; } .topbar-actions { gap: 0; }
  #page-dashboard { padding: 0 12px 90px; gap: 12px; } .starship-hero { height: 435px; padding-top: 20px; } .starship-hero::before { left: -12px; right: -12px; height: 280px; bottom: auto; background-size: auto 280px; background-position: right -45px top; opacity: .67; } .hero-intro { padding: 0 2px; } .hero-intro h1 { font-size: 28px; letter-spacing: -1px; white-space: normal; max-width: 340px; } .hero-intro h1 em { display: block; } .hero-intro > p { font-size: 12px; max-width: 255px; margin-top: 12px; line-height: 1.8; }
  .device-status { margin-top: 19px; gap: 9px; flex-wrap: wrap; font-size: 10px; } .device-online { gap: 6px; } .device-online i { width: 8px; height: 8px; } .status-separator { height: 12px; }
  .storage-panel { width: 100%; height: 194px; background: linear-gradient(120deg,#10243bed,#071320f5); } .storage-info { padding: 16px; } .storage-info h2 { font-size: 15px; gap: 10px; margin-bottom: 13px; } .storage-numbers strong { font-size: 31px; } .storage-numbers strong small, .storage-numbers > span { font-size: 18px; } .storage-progress { height: 13px; } .storage-legend { gap: 12px; font-size: 10px; } .storage-orbit { width: 36%; margin-right: 0; }
  .telemetry-grid { gap: 8px; } .telemetry-card { height: 94px; gap: 10px; padding: 12px 10px; align-items: flex-start; } .telemetry-icon { width: 34px; height: 37px; border-radius: 9px; } .telemetry-icon .ss-icon { width: 24px; height: 24px; } .telemetry-info { align-self: flex-start; } .telemetry-info > span { font-size: 10px; } .telemetry-info strong { font-size: 23px; margin-top: 4px; } .telemetry-info strong small { font-size: 15px; } .sparkline { bottom: 7px; right: 11px; height: 24px; width: 56%; } .speed-bars { bottom: 9px; height: 23px; right: 12px; width: 51%; } .speed-card .telemetry-info strong { font-size: 20px; } .speed-card .telemetry-info strong small { font-size: 12px; } .temperature-card .sensor-unavailable { font-size: 17px; }
  .starship-lower { grid-template-columns: 1fr; } .starship-lower .recent-media-panel { grid-column: auto; } .starship-lower > .panel { height: 350px; padding: 17px; } .starship-lower h2 { font-size: 16px; gap: 13px; } .starship-media { grid-template-columns: repeat(4,minmax(0,1fr)); } .starship-lower > .recent-media-panel { height: auto; min-height: 325px; } .recent-copy strong { font-size: 13px; } .recent-copy small { font-size: 11px; } .recent-thumb { width: 50px; }
  .header-popover { right: -5px; } .search-results { width: calc(100vw - 24px); left: -45px; }
  .starship-hero::before { background-image:linear-gradient(90deg,#04101bcc,transparent 85%),url('/public/starship/nas-orbit-hero.png'); background-size:100% 100%,auto 280px; background-position:center,right -160px top; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior: auto!important; transition: none!important; animation: none!important; } }

.create-menu-wrap { position: relative; }
.create-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 180px; padding: 6px; border: 1px solid #24415b; border-radius: 12px; background: #0c1d30; box-shadow: 0 12px 32px #0008; }
.create-menu button { display: block; width: 100%; padding: 11px 14px; border: 0; border-radius: 7px; background: transparent; color: #dceaf7; text-align: left; cursor: pointer; font: inherit; }
.create-menu button:hover, .create-menu button:focus-visible { background: #17334d; outline: none; }

.name-dialog { width: min(440px, calc(100vw - 32px)); box-sizing: border-box; padding: 28px; border: 1px solid #2b455e; border-radius: 20px; background: linear-gradient(145deg, #102339, #0a1727); color: #edf5ff; box-shadow: 0 24px 90px #0009; }
.name-dialog::backdrop { background: #020810b8; backdrop-filter: blur(6px); }
.name-dialog-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 36px; margin-bottom: 18px; }
.name-dialog-head .icon-btn { position: absolute; right: 0; top: 0; }
.name-dialog h2 { font-size: 22px; margin: 0; padding: 0 40px; text-align: center; }
.name-dialog p { color: #91a7c6; font-size: 14px; line-height: 1.7; margin: 0 0 24px; }
.name-dialog label { display: block; margin-bottom: 9px; font-size: 14px; color: #bfd1e6; }
.name-dialog input { width: 100%; box-sizing: border-box; height: 46px; padding: 0 14px; background: #061322; border: 1px solid #2b455e; border-radius: 10px; color: #edf5ff; font: inherit; }
.name-dialog input:focus { outline: none; border-color: #32c8fa; box-shadow: 0 0 0 3px #32c8fa1c; }
.name-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; }
.name-dialog-actions .btn { min-width: 86px; padding: 10px 20px; border-radius: 10px; }