@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;450;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root { --paper:#ffffff; --canvas:#fafbf9; --ink:#252b28; --muted:#78827c; --line:#e5e9e4; --soft:#f1f4ef; --green:#326b49; --lime:#d8ecb7; --red:#ab4646; --gold:#9c7633; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:'IBM Plex Sans',sans-serif; font-size:14px; line-height:1.5; letter-spacing:0; }
button,input,select,textarea { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:disabled { opacity:.5; cursor:not-allowed; }
svg { width:17px; height:17px; flex-shrink:0; stroke-width:1.7; }
button:focus-visible,a:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
.sidebar { position:fixed; inset:0 auto 0 0; width:236px; background:#fff; border-right:1px solid var(--line); padding:28px 18px 0; z-index:30; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:10px; font-size:21px; font-weight:600; margin:0 10px 30px; }
.brand img { border-radius:7px; }
.workspace-label { display:flex; align-items:center; gap:10px; padding:12px 10px; border:1px solid var(--line); border-radius:6px; margin-bottom:25px; }
.workspace-avatar { display:grid; place-items:center; background:#f0eae0; color:#7d6546; width:32px; height:32px; flex:0 0 32px; border:1px solid #e8dfd0; border-radius:5px; font-size:15px; }
.workspace-label strong { display:block; font-size:11px; font-weight:600; }
.workspace-label small { color:var(--muted); font-size:10px; }
.workspace-label>svg { margin-left:auto; width:13px; color:var(--muted); }
.nav-label { color:#99a099; font-size:9px; font-weight:500; margin:0 12px 12px; }
.sidebar nav { display:grid; gap:4px; margin-bottom:30px; }
.sidebar nav a,.sidebar nav button,.sidebar-bottom>button { min-height:39px; display:flex; align-items:center; gap:12px; padding:10px 12px; background:transparent; border:0; border-radius:5px; color:#69736b; font-size:12px; text-align:left; }
.sidebar nav a:hover,.sidebar nav button:hover { background:#f7f8f5; }
.sidebar nav a.active { color:var(--green); background:#edf3e7; font-weight:500; }
.nav-count { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:10px; color:#758471; }
.sidebar-bottom { margin-top:auto; }
.connection-state { display:flex; align-items:center; gap:8px; padding:16px 10px; font-size:10px; color:var(--muted); }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#68a57a; flex-shrink:0; }
.profile { display:flex; align-items:center; gap:10px; padding:18px 10px; border-top:1px solid var(--line); }
.profile-avatar,.top-avatar { display:grid; place-items:center; background:#eeeae2; color:#736348; border:1px solid #e6dfd3; border-radius:50%; width:32px; height:32px; font-size:10px; flex-shrink:0; }
.profile strong { display:block; font-size:11px; font-weight:500; }
.profile small { font-size:10px; color:var(--muted); }
.profile>svg { margin-left:auto; color:#98a394; }
.main-shell { margin-left:236px; min-height:100svh; display:flex; flex-direction:column; }
.topbar { height:68px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 42px; border-bottom:1px solid var(--line); background:#ffffffd9; }
.breadcrumbs,.topbar-actions { display:flex; align-items:center; gap:16px; }
.breadcrumbs { font-size:11px; color:var(--muted); min-width:0; }
.breadcrumbs strong { color:#505b52; font-weight:500; overflow-wrap:anywhere; }
.breadcrumbs svg { width:12px; }
.mode-badge { font-size:9px; color:#867448; border:1px solid #e9dfc8; border-radius:4px; padding:3px 7px; background:#fbf8ef; }
.mode-badge.live { color:var(--green); border-color:#d4e5cd; background:#eef5e9; }
.icon-button { display:inline-grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border:1px solid transparent; background:transparent; color:#727d73; border-radius:5px; padding:0; }
.icon-button:hover { border-color:var(--line); background:#f4f6f1; }
.mobile-only { display:none; }
main { width:100%; max-width:1500px; margin:0 auto; padding:40px 42px 24px; flex:1; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:30px; }
.page-heading h1 { font-size:27px; font-weight:500; margin:0 0 5px; line-height:1.25; }
.page-heading p { margin:0; font-size:12px; color:var(--muted); }
.heading-actions { display:flex; gap:10px; align-items:center; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:8px 12px; border:1px solid var(--line); background:var(--paper); color:#586158; border-radius:5px; font-size:11px; font-weight:500; white-space:nowrap; }
.button:hover { background:#f5f7f2; border-color:#cdd6c8; }
.button.primary { background:#293c2e; border-color:#293c2e; color:#fff; box-shadow:0 2px 3px #1a301510; }
.button.primary:hover { background:#39553e; }
.button svg { width:14px; height:14px; }
.stat-band { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:38px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px 0; }
.stat { padding:0 25px; border-left:1px solid var(--line); }
.stat:first-child { padding-left:0; border-left:0; }
.stat-label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; margin-bottom:8px; }
.stat-label svg { width:14px; height:14px; }
.stat strong { display:block; font-size:27px; line-height:1.3; font-weight:450; }
.stat small { font-size:10px; color:#909990; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.section-head h2 { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; margin:0; }
.count { color:#939c93; font-size:11px; font-weight:400; }
.text-link { display:flex; align-items:center; gap:6px; font-size:10px; color:var(--muted); }
.text-link:hover { color:var(--green); }
.text-link svg { width:12px; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:34px; }
.project-card { display:block; border:1px solid var(--line); border-radius:7px; padding:22px; background:white; min-width:0; transition:border-color .15s ease; }
.project-card:hover { border-color:#b2c2a7; }
.project-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.project-icon { display:grid; place-items:center; width:36px; height:36px; border:1px solid #d9e2d1; border-radius:6px; color:#6a875b; background:#f0f5e9; }
.project-card:nth-child(2n) .project-icon { border-color:#dce1e9; background:#f0f3f8; color:#7a8a9c; }
.project-card:nth-child(3n) .project-icon { border-color:#eadfd9; background:#faf2ed; color:#a48777; }
.project-card h3 { font-size:14px; font-weight:500; margin:0 0 5px; overflow-wrap:anywhere; }
.project-card p { color:var(--muted); font-size:11px; margin:0 0 20px; min-height:17px; overflow-wrap:anywhere; }
.project-card-bottom { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #f0f2ed; padding-top:13px; font-size:10px; color:#85907f; }
.env-tag { color:#84907c; border:1px solid #e7ecdf; border-radius:4px; background:#f6f8f2; font-size:9px; padding:3px 7px; }
.project-new { border:1px dashed #d4dcd0; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#97a18f; min-height:220px; border-radius:7px; font-size:12px; }
.project-new svg { width:23px; height:23px; }
.project-new:hover { color:var(--green); background:#f5f8ef; }
.list-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:20px 0 15px; }
.search { position:relative; width:260px; max-width:100%; }
.search svg { position:absolute; left:12px; top:10px; width:14px; height:14px; color:#929b90; }
input,select,textarea { width:100%; min-height:37px; padding:9px 12px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:white; font-size:12px; outline:none; }
input:focus,select:focus,textarea:focus { border-color:#9bb28d; box-shadow:0 0 0 3px #edf4e4; }
.search input { padding-left:34px; }
.filter-select { width:135px; font-size:10px; }
.table-wrap { border:1px solid var(--line); border-radius:7px; overflow:auto; background:white; }
table { border-collapse:collapse; width:100%; min-width:660px; font-size:11px; }
th { padding:13px 17px; text-align:left; font-size:9px; color:#899384; font-weight:500; background:#fcfdfb; border-bottom:1px solid var(--line); }
td { padding:15px 17px; border-bottom:1px solid #eff1ec; }
tbody tr:last-child td { border:0; }
tbody tr:hover { background:#fbfcf8; }
.service-name { display:flex; align-items:center; gap:11px; font-weight:500; }
.service-icon { width:29px; height:29px; border:1px solid #e2e8dc; background:#f7f9f3; border-radius:5px; display:grid; place-items:center; color:#8a9b7a; }
.service-icon svg { width:14px; }
.service-name a:hover { color:var(--green); }
.status { display:inline-flex; align-items:center; gap:6px; font-size:10px; white-space:nowrap; color:#628359; }
.status i { display:block; width:5px; height:5px; border-radius:50%; background:currentColor; }
.status.stopped,.status.unknown { color:#90968d; }
.status.failed,.status.error,.status.exited { color:var(--red); }
.status.building,.status.in_progress,.status.queued { color:var(--gold); }
.branch { display:flex; align-items:center; gap:6px; color:#8b9485; font-family:'IBM Plex Mono',monospace; font-size:10px; }
.branch svg { width:12px; }
.muted { color:var(--muted); }
.activity { margin-top:32px; }
.activity-list { background:white; border:1px solid var(--line); border-radius:7px; }
.activity-row { display:flex; align-items:center; gap:15px; padding:15px 20px; border-bottom:1px solid #edf0e9; }
.activity-row:last-child { border:0; }
.activity-check { display:grid; place-items:center; width:26px; height:26px; border:1px solid #dfe8d8; color:#82a46b; background:#f3f8ed; border-radius:50%; }
.activity-check svg { width:12px; }
.activity-row strong { font-size:11px; font-weight:500; }
.activity-row p { margin:3px 0 0; font-size:10px; color:var(--muted); }
.activity-row time { margin-left:auto; white-space:nowrap; color:#969e91; font-size:10px; }
.footer { display:flex; justify-content:space-between; gap:12px; padding:24px 42px; border-top:1px solid var(--line); font-size:9px; color:#a0a69b; }
.footer>span:first-child { display:flex; align-items:center; gap:7px; }
.tiny-mark { width:8px; height:8px; border:2px solid #95a688; border-radius:2px; }
.tabs { display:flex; gap:24px; margin-bottom:28px; border-bottom:1px solid var(--line); overflow:auto; }
.tabs button { border:0; background:none; padding:12px 0; border-bottom:2px solid transparent; color:var(--muted); font-size:12px; white-space:nowrap; }
.tabs button.active { color:var(--green); border-color:var(--green); }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.detail-section { min-width:0; }
.detail-section h2 { font-size:14px; font-weight:500; margin:0 0 22px; }
.key-row { display:flex; gap:16px; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); font-size:12px; }
.key-row span { color:var(--muted); }
.key-row strong { font-weight:500; text-align:right; overflow-wrap:anywhere; min-width:0; }
.logs { display:block; margin:0; min-height:290px; max-height:560px; overflow:auto; padding:24px; border:1px solid #dbe3d5; border-radius:6px; background:#25312a; color:#cee0c4; font:11px/2 'IBM Plex Mono',monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 20px; color:var(--muted); text-align:center; }
.empty>svg { width:28px; height:28px; margin-bottom:15px; color:#9bab91; }
.empty h2 { font-size:15px; font-weight:500; color:var(--ink); margin:0 0 8px; }
.empty p { margin:0 0 20px; max-width:400px; font-size:12px; }
.notice { display:flex; align-items:flex-start; gap:10px; padding:15px 0; border-top:1px solid var(--line); color:var(--muted); font-size:12px; margin-top:24px; }
.notice svg { color:#99a78d; }
.code { font:11px/1.8 'IBM Plex Mono',monospace; color:#506749; background:#f1f5ec; padding:16px; border:1px solid var(--line); border-radius:5px; white-space:pre-wrap; overflow-wrap:anywhere; }
.settings-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:48px; }
.settings-layout h2 { font-size:15px; font-weight:500; }
.label { display:block; font-size:11px; color:var(--muted); margin-bottom:7px; }
dialog { width:min(520px,calc(100% - 32px)); max-height:calc(100svh - 32px); overflow:auto; padding:0; border:1px solid var(--line); border-radius:8px; color:var(--ink); box-shadow:0 24px 90px #19341c20; }
dialog::backdrop { background:#1b2a225c; backdrop-filter:blur(2px); }
.dialog-header { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--line); }
.dialog-header h2 { margin:0; font-size:18px; font-weight:500; }
#modal-fields { padding:22px 24px 4px; }
#modal-fields label { display:block; color:#67745f; font-size:11px; margin:0 0 8px; }
#modal-fields input,#modal-fields select,#modal-fields textarea { margin-bottom:18px; }
.dialog-footer { display:flex; justify-content:flex-end; gap:10px; padding:18px 24px; border-top:1px solid var(--line); }
.heading-actions { flex-wrap:wrap; }
#modal-fields .checkbox-label { display:flex; align-items:center; gap:10px; min-height:36px; }
#modal-fields .checkbox-label input { width:16px; min-height:16px; margin:0; box-shadow:none; }
.dialog-note { color:var(--muted); font-size:12px; margin-bottom:20px; }
.error { color:var(--red); font-size:12px; margin:10px 24px; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:80; width:max-content; max-width:calc(100% - 32px); border:1px solid #4c6651; border-radius:6px; background:#293c2e; color:#f0f5eb; padding:12px 20px; font-size:12px; box-shadow:0 8px 30px #234b2522; }
.login-view { min-height:100svh; display:grid; place-items:center; background:linear-gradient(140deg,#eff5e9,transparent 50%),#fafbf9; padding:24px; }
.login-form { width:min(100%,360px); }
.login-form h1 { font-size:25px; font-weight:500; margin:25px 0; }
.login-form label { font-size:12px; display:block; margin-bottom:8px; color:var(--muted); }
.login-form .button { width:100%; margin-top:16px; }
.login-form .error { margin:10px 0; }
.skeleton { padding:50px 0; color:var(--muted); font-size:13px; }
.monitor-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.monitor-toolbar>label { display:grid; gap:5px; font-size:11px; color:var(--muted); min-width:0; }
.monitor-toolbar>label:first-child { flex:1; min-width:150px; }
.monitor-toolbar>.muted { align-self:center; }
.monitor-toolbar .monitor-toggle { display:flex; align-items:center; gap:8px; min-height:37px; white-space:nowrap; }
.monitor-toolbar .icon-button { width:37px; height:37px; flex-basis:37px; }
.monitor-toggle input { width:16px; height:16px; min-height:16px; flex:0 0 16px; margin:0; padding:0; accent-color:var(--green); }
.storage-meter { width:100%; height:10px; accent-color:var(--green); margin-top:16px; }
.metrics-result .stat strong { font-variant-numeric:tabular-nums; min-height:36px; overflow-wrap:anywhere; }
.metrics-result .key-row strong,#monitor-status { font-variant-numeric:tabular-nums; }
.mobile-shade { position:fixed; inset:0; background:#17251b55; z-index:25; border:0; }
@media(max-width:1100px) { .sidebar { width:210px; } .main-shell { margin-left:210px; } main { padding:32px 26px; } .topbar,.footer { padding-left:26px; padding-right:26px; } .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .stat { padding:0 16px; } }
@media(max-width:760px) { .sidebar { transform:translateX(-100%); transition:transform .2s ease; } .sidebar.open { transform:none; } .main-shell { margin-left:0; } .mobile-only { display:inline-grid; } .topbar { height:60px; padding:0 16px; } .breadcrumbs { gap:10px; } .breadcrumbs>span { display:none; } .topbar-actions { gap:8px; } main { padding:28px 16px 20px; } .page-heading { align-items:flex-start; flex-wrap:wrap; gap:18px; } .page-heading h1 { font-size:25px; } .heading-actions { width:100%; } .stat-band { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 0; padding:20px 0; } .stat:nth-child(3) { border-left:0; padding-left:0; } .stat strong { font-size:25px; } .project-grid { grid-template-columns:1fr; } .project-new { min-height:100px; flex-direction:row; } .detail-grid,.settings-layout { grid-template-columns:1fr; gap:30px; } .activity-row { padding:15px 12px; gap:10px; } .activity-row time { font-size:9px; } .footer { padding:20px 16px; font-size:8px; } .list-toolbar { flex-wrap:wrap; } .search { width:100%; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }