/* LindaOS replica of the reference command bridge. Canvas 1672x941, scaled with fluid units. */
:root { --bg:#040a14; --panel:#0a1426; --panel-b:#15304f; --blue:#2b8cff; --blue2:#7cc4ff; --cyan:#27d8ff; --dim:#7c8ea8; --text:#f2f7ff; --green:#24d67b; --amber:#ffb020; --red:#ff4256; --purple:#8b5cf6; --teal:#14b8a6; --orange:#f97316; }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; background:var(--bg); color:var(--text); font-family:-apple-system,"Inter","Segoe UI",Roboto,sans-serif; }
body { background: radial-gradient(900px 600px at 50% 40%, rgba(43,140,255,.16), transparent 70%), var(--bg); overflow-x:hidden; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a { color:inherit; text-decoration:none; }
.app { min-height:100vh; max-width:1672px; margin:0 auto; display:grid; grid-template-rows:88px 1fr; }
/* top bar */
.topbar { display:grid; grid-template-columns:260px 1fr 380px; align-items:center; padding:0 24px; border-bottom:1px solid var(--panel-b); background:rgba(4,10,20,.94); }
.brand { display:flex; align-items:center; gap:14px; }
.brand-ring { width:48px; height:48px; border-radius:50%; border:2px solid var(--cyan); box-shadow:0 0 16px rgba(39,216,255,.7), inset 0 0 12px rgba(39,216,255,.4); position:relative; }
.brand-ring::after { content:""; position:absolute; inset:14px; border-radius:50%; border:1.5px solid var(--cyan); box-shadow:0 0 8px var(--cyan); }
.brand-title { font-size:26px; font-weight:800; letter-spacing:.08em; } .brand-title b { color:var(--blue); font-weight:800; }
.brand-sub { font-size:11px; letter-spacing:.42em; color:var(--dim); margin-top:3px; }
.search { justify-self:center; width:708px; max-width:100%; height:48px; display:flex; align-items:center; gap:12px; padding:0 18px; border:1px solid var(--panel-b); border-radius:10px; background:#0a1628; }
.search input { flex:1; background:none; border:0; outline:none; color:var(--text); font:inherit; font-size:15px; }
.search input::placeholder { color:var(--dim); }
.search .lens { color:var(--dim); font-size:17px; }
.topright { display:flex; align-items:center; justify-content:flex-end; gap:22px; }
.clock { text-align:right; line-height:1.15; } .clock .d { font-size:12px; color:var(--dim); } .clock .t { font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; }
.sun { color:var(--amber); font-size:22px; }
.user { display:flex; align-items:center; gap:12px; font-size:14px; line-height:1.3; } .user small { display:block; color:var(--dim); font-size:12px; }
.avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#21507f,#0b1d38); border:1px solid var(--panel-b); display:grid; place-items:center; font-weight:800; color:var(--blue2); }
.chev { color:var(--dim); font-size:14px; }
/* body grid */
.body { display:grid; grid-template-columns:188px 1fr; min-height:0; }
.nav { padding:22px 12px; border-right:1px solid rgba(21,48,79,.6); background:rgba(4,10,20,.5); display:flex; flex-direction:column; }
.nav a { display:flex; align-items:center; gap:14px; height:52px; padding:0 16px; border-radius:10px; color:var(--dim); font-size:14px; letter-spacing:.06em; border:1px solid transparent; margin-bottom:6px; }
.nav a.on { background:linear-gradient(90deg,var(--blue),#1f6fd6); color:#fff; box-shadow:0 0 18px rgba(43,140,255,.45); }
.nav a:hover:not(.on) { color:var(--text); }
.nav .ico { width:20px; text-align:center; font-size:17px; color:var(--blue2); }
.nav a.on .ico { color:#fff; }
.nav-h { margin-top:auto; padding-top:24px; font-size:12px; letter-spacing:.14em; color:var(--blue2); }
.agent-li { display:flex; align-items:center; gap:10px; padding:9px 4px; font-size:13px; }
.agent-li small { margin-left:auto; color:var(--green); font-size:12px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); display:inline-block; flex:none; }
.dot.amber { background:var(--amber); box-shadow:0 0 8px var(--amber); } .dot.red { background:var(--red); box-shadow:0 0 8px var(--red); } .dot.blue { background:var(--blue); box-shadow:0 0 8px var(--blue); } .dot.off { background:var(--dim); box-shadow:none; }
/* main grid, fixed reference geometry at desktop width */
.main { display:grid; gap:16px; padding:16px; grid-template-columns: 360px 1fr 472px; grid-template-rows: 544px 300px; grid-template-areas: "projects core missions" "brief telemetry status"; }
.panel { background:linear-gradient(180deg, rgba(12,24,44,.92), rgba(8,18,34,.95)); border:1px solid var(--panel-b); border-radius:10px; padding:16px 16px 14px; min-width:0; position:relative; }
.ph { display:flex; align-items:center; justify-content:space-between; font-size:14px; letter-spacing:.14em; font-weight:700; margin-bottom:14px; }
.ph .l { display:flex; align-items:center; gap:10px; } .ph .l i { color:var(--blue2); font-style:normal; font-size:16px; }
.ph .link { font-size:13px; letter-spacing:0; color:var(--blue2); font-weight:500; }
.projects { grid-area:projects; } .core { grid-area:core; } .missions { grid-area:missions; } .brief { grid-area:brief; } .telemetry { grid-area:telemetry; } .status { grid-area:status; }
/* project cards */
.pcard { display:grid; grid-template-columns:46px 1fr auto; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--panel-b); border-radius:10px; background:rgba(5,12,24,.7); margin-bottom:10px; }
.sq { width:46px; height:46px; border-radius:10px; display:grid; place-items:center; font-size:19px; color:#fff; box-shadow:0 0 14px rgba(0,0,0,.4); }
.sq.blue { background:linear-gradient(135deg,#2b8cff,#1656c2); } .sq.purple { background:linear-gradient(135deg,#9d6bff,#5b30c8); } .sq.teal { background:linear-gradient(135deg,#2fd3b5,#0f7d6a); } .sq.orange { background:linear-gradient(135deg,#ffae48,#c4620d); } .sq.red { background:linear-gradient(135deg,#ff6d7d,#b1273a); } .sq.dark { background:linear-gradient(135deg,#21405f,#0d2038); }
.pc-name { font-size:15px; font-weight:700; } .pc-sub { font-size:13px; color:var(--dim); margin-top:2px; }
.pc-bar { grid-column:2 / span 2; height:6px; background:#0d2339; border-radius:6px; overflow:hidden; margin-top:4px; } .pc-bar i { display:block; height:100%; background:linear-gradient(90deg,#1b75e0,#8fd0ff); box-shadow:0 0 10px rgba(43,140,255,.7); border-radius:6px; }
.pc-pct { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.pc-row { display:flex; align-items:center; gap:8px; }
.empty { color:var(--dim); font-size:14px; line-height:1.6; padding:10px 2px; }
.btn-out { width:100%; height:44px; border:1px solid #2a5a8c; border-radius:8px; color:var(--blue2); font-size:14px; font-weight:600; background:rgba(43,140,255,.04); }
.btn-out:hover { background:rgba(43,140,255,.12); }
.btn-out:disabled { opacity:.45; cursor:not-allowed; }
/* core */
.core { display:grid; place-items:center; padding:0; overflow:hidden; }
.core-stage { position:relative; width:100%; height:100%; display:grid; grid-template-columns:1fr 330px 1fr; align-items:center; }
.hud { position:relative; width:330px; height:330px; justify-self:center; display:grid; place-items:center; }
.hud svg { position:absolute; inset:-30px; width:calc(100% + 60px); height:calc(100% + 60px); }
.hud-core { position:relative; text-align:center; z-index:1; }
.hud-core .n { font-size:33px; font-weight:800; letter-spacing:.06em; } .hud-core .n b { color:var(--blue); }
.hud-core .s { font-size:11px; letter-spacing:.38em; color:var(--blue2); margin-top:4px; }
.hud-core .op { margin-top:20px; font-size:13px; font-weight:700; letter-spacing:.06em; }
.stat-col { display:flex; flex-direction:column; justify-content:center; gap:44px; height:100%; padding:20px 26px; }
.stat-col.l { align-items:flex-start; } .stat-col.r { align-items:flex-end; text-align:right; }
.stat b { display:block; font-size:34px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; } .stat span { display:block; font-size:12px; letter-spacing:.12em; color:var(--dim); margin-top:6px; line-height:1.35; }
.stat.warn b { color:var(--amber); } .stat.bad b { color:var(--red); }
/* missions */
.tabs { display:grid; grid-template-columns:repeat(4,auto); gap:8px; justify-content:start; margin-bottom:12px; }
.tabs button { height:34px; padding:0 12px; border:1px solid var(--panel-b); border-radius:8px; font-size:12px; color:var(--dim); white-space:nowrap; }
.tabs button.on { background:linear-gradient(180deg,#3aa0ff,#1e6fd6); color:#fff; border-color:transparent; font-weight:700; box-shadow:0 0 14px rgba(43,140,255,.45); }
.mrow { display:grid; grid-template-columns:20px 44px 1fr auto 86px 16px; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--panel-b); border-radius:10px; background:rgba(5,12,24,.6); margin-bottom:9px; min-height:62px; }
.cb { width:18px; height:18px; border:1.5px solid #2d5f93; border-radius:4px; }
.mt { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ms { font-size:12px; color:var(--dim); margin-top:3px; }
.chip { font-size:11px; font-weight:800; letter-spacing:.05em; padding:5px 0; width:78px; text-align:center; border-radius:4px; border:1px solid; }
.chip.high { color:var(--red); border-color:#6b1f2a; background:rgba(255,66,86,.08); } .chip.med { color:var(--amber); border-color:#6b4a16; background:rgba(255,176,32,.08); } .chip.low { color:var(--blue2); border-color:#1d4a7a; background:rgba(43,140,255,.08); }
.due { font-size:12px; color:var(--dim); text-align:right; white-space:nowrap; }
.chev2 { color:var(--dim); font-size:16px; }
.mlist { max-height:314px; overflow:hidden; }
/* morning brief */
.brow { display:grid; grid-template-columns:22px 1fr; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--panel-b); border-radius:8px; margin-bottom:8px; font-size:13px; background:rgba(5,12,24,.5); }
.brow .ic { text-align:center; font-size:15px; }
.focus { list-style:none; font-size:12px; line-height:1.55; color:var(--text); }
.focus li { margin-bottom:6px; }
.focus li::before { content:"•  "; color:var(--blue); }
.bactions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:12px; }
.bactions button { height:42px; border:1px solid #2a5a8c; border-radius:8px; font-size:12px; color:var(--blue2); font-weight:600; }
.bactions button.primary { background:linear-gradient(180deg,#3aa0ff,#1e6fd6); color:#fff; border-color:transparent; }
.bactions button:disabled { opacity:.45; cursor:not-allowed; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* telemetry */
.tgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tile { border:1px solid var(--panel-b); border-radius:10px; padding:10px 14px; background:rgba(5,12,24,.6); min-height:0; }
.tile .k { font-size:11px; letter-spacing:.12em; color:var(--dim); } .tile .v { font-size:24px; font-weight:800; margin-top:6px; font-variant-numeric:tabular-nums; }
.tile .v.small { font-size:14px; font-weight:700; color:var(--dim); }
.tile svg { width:100%; height:26px; margin-top:4px; display:block; }
.tile .nd { font-size:10px; letter-spacing:.12em; color:var(--dim); margin-top:2px; }
/* donut */
.donut-wrap { display:flex; align-items:center; gap:18px; height:186px; }
.donut { width:186px; height:186px; border-radius:50%; position:relative; flex:none; }
.donut::after { content:""; position:absolute; inset:26px; border-radius:50%; background:#0a1628; }
.donut-c { position:absolute; inset:0; display:grid; place-items:center; text-align:center; z-index:1; font-size:12px; color:var(--dim); }
.donut-c b { display:block; font-size:30px; color:var(--text); }
.legend { flex:1; }
.legend div { display:flex; align-items:center; gap:10px; font-size:14px; height:38px; }
.legend b { margin-left:auto; font-size:16px; font-variant-numeric:tabular-nums; }
.note { font-size:11px; color:var(--dim); margin-top:6px; letter-spacing:.04em; }

.brief { display:flex; flex-direction:column; }
.brief .two { flex:1; min-height:0; overflow:hidden; }
.brief .focus { max-height:184px; overflow:hidden; }
.brief .bactions { margin-top:auto; padding-top:10px; }