@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');

:root { --ink:#1b1d1a; --muted:#6e726a; --paper:#f4f2ec; --surface:#fffefa; --line:#e5e2d9; --sage:#cfe0ce; --sage-deep:#386044; --lime:#d8ef60; --orange:#e06f46; --violet:#8079d5; --danger:#b6423c; --shadow:0 18px 55px rgba(31,36,27,.09); --radius:18px; --font:'DM Sans', Arial, sans-serif; --display:'Fraunces', Georgia, serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; font-family:var(--font); color:var(--ink); background:var(--paper); font-size:15px; line-height:1.45; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }

.auth-page { min-height:100vh; background:#20241f; }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(360px,1.1fr) minmax(380px,.9fr); }
.auth-intro { padding:8vw max(7vw,48px); color:#f8f7f1; display:flex; flex-direction:column; justify-content:center; background:radial-gradient(circle at 12% 12%,rgba(216,239,96,.22),transparent 24%),radial-gradient(circle at 85% 80%,rgba(128,121,213,.38),transparent 30%),#20241f; position:relative; overflow:hidden; }
.auth-intro:after { content:''; width:360px; height:360px; border:1px solid rgba(255,255,255,.14); border-radius:50%; position:absolute; right:-130px; top:-120px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.04em; text-decoration:none; font-size:19px; }
.brand--light { position:absolute; top:42px; left:max(7vw,48px); color:#f8f7f1; }
.brand-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:var(--lime); color:#192017; font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:-.1em; }
.eyebrow { margin:0 0 14px; color:var(--sage-deep); text-transform:uppercase; letter-spacing:.12em; font-family:var(--mono); font-size:10px; font-weight:500; }
.auth-intro .eyebrow { color:var(--lime); margin-top:72px; }
.auth-intro h1 { margin:0; max-width:600px; font-family:var(--display); font-weight:500; font-size:clamp(46px,5.3vw,77px); letter-spacing:-.065em; line-height:.98; }
.auth-intro h1 em { color:var(--lime); font-weight:500; }
.auth-copy { max-width:480px; margin:30px 0 0; color:#cdd0c8; font-size:17px; line-height:1.55; }
.auth-note { display:flex; align-items:center; gap:9px; margin-top:62px; color:#dde2d8; font-size:13px; }
.note-dot,.live-indicator i { display:block; width:8px; height:8px; background:var(--lime); border-radius:50%; box-shadow:0 0 0 5px rgba(216,239,96,.13); }
.auth-card-wrap { padding:48px; display:grid; place-items:center; background:var(--paper); }
.auth-card { width:min(100%,420px); padding:47px; border-radius:24px; background:var(--surface); box-shadow:var(--shadow); }
.auth-card h2 { font-family:var(--display); margin:0; letter-spacing:-.045em; font-weight:500; font-size:36px; line-height:1.1; }
.muted { color:var(--muted); margin:10px 0 29px; }
label { display:block; margin:18px 0 7px; font-size:13px; font-weight:600; }
input,textarea,select { width:100%; background:#fbfaf5; border:1px solid #ddd9cf; border-radius:10px; padding:12px 13px; outline:none; color:var(--ink); transition:border .16s,box-shadow .16s,background .16s; }
input:focus,textarea:focus,select:focus { border-color:var(--sage-deep); box-shadow:0 0 0 4px rgba(56,96,68,.12); background:#fff; }
textarea { min-height:92px; resize:vertical; }
.field-help { margin:8px 0 0; font-size:12px; color:var(--muted); }
.button { border:0; min-height:42px; border-radius:10px; padding:10px 15px; background:#ebebe5; color:var(--ink); font-weight:600; display:inline-flex; justify-content:center; gap:9px; align-items:center; text-decoration:none; transition:transform .15s,background .15s,box-shadow .15s; }
.button:hover { transform:translateY(-1px); box-shadow:0 6px 17px rgba(20,30,18,.12); }
.button:active { transform:scale(.98); }
.button--primary { background:var(--ink); color:#fff; }
.button--primary:hover { background:#30372e; }
.button--lime { background:var(--lime); color:#182018; }
.button--outline { border:1px solid var(--line); background:transparent; }
.button--danger { background:#f5e2df; color:#8f302b; }
.button--small { min-height:34px; padding:7px 11px; font-size:12px; }
.button--full { width:100%; margin-top:26px; }
.text-link { display:block; text-align:center; color:var(--sage-deep); margin-top:18px; font-size:13px; font-weight:600; }
.form-alert { padding:12px; border-radius:10px; font-size:13px; margin:18px 0; }
.form-alert--error { background:#f7e3e1; color:#913c36; }.form-alert--success { background:#e5f0df; color:#315c3d; }

.app-page { min-height:100vh; }.app-shell { min-height:100vh; display:flex; }.sidebar { width:250px; background:#1e241f; color:#eff1e8; display:flex; flex-direction:column; padding:20px 13px 15px; position:fixed; inset:0 auto 0 0; z-index:20; transition:transform .22s cubic-bezier(.23,1,.32,1); }.sidebar .brand { padding:7px 8px; color:#f8f7f1; }.sidebar-top { display:flex; align-items:center; justify-content:space-between; }.sidebar-close { display:none; color:#f2f4ee; }.nav-list { margin-top:45px; display:grid; gap:4px; }.nav-item { width:100%; display:flex; border:0; border-radius:9px; padding:10px 11px; gap:11px; color:#c7cec3; background:transparent; align-items:center; text-align:left; font-size:13px; font-weight:500; transition:background .14s,color .14s; }.nav-item:hover { color:#fff; background:rgba(255,255,255,.07); }.nav-item.is-active { background:var(--lime); color:#172017; font-weight:700; }.nav-item--subtle { color:#aab2a6; }.nav-icon { width:15px; text-align:center; font-size:17px; line-height:1; }.sidebar-bottom { margin-top:auto; border-top:1px solid rgba(255,255,255,.11); padding-top:14px; }.user-chip { display:flex; align-items:center; gap:9px; padding:4px 7px 12px; }.user-chip strong,.user-chip small { display:block; }.user-chip strong { font-size:12px; }.user-chip small { color:#a8b0a3; font-size:10px; margin-top:2px; }.avatar { display:grid; place-items:center; flex:0 0 auto; width:29px; height:29px; border-radius:10px; background:#4e6553; color:#f8f8ef; font-family:var(--display); font-size:15px; }.main-panel { width:calc(100% - 250px); margin-left:250px; min-height:100vh; }.topbar { height:72px; padding:0 42px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); background:rgba(244,242,236,.9); backdrop-filter:blur(10px); position:sticky; top:0; z-index:10; }.breadcrumb { font-size:13px; color:var(--muted); }.breadcrumb span { margin:0 8px; color:#b9b7ad; }.topbar-actions { display:flex; align-items:center; gap:20px; }.live-indicator { display:flex; align-items:center; gap:8px; color:var(--sage-deep); font-size:11px; font-family:var(--mono); }.live-indicator i { width:6px; height:6px; box-shadow:0 0 0 4px rgba(56,96,68,.12); background:var(--sage-deep); }.icon-button { border:0; background:transparent; color:var(--ink); border-radius:8px; width:34px; height:34px; font-size:19px; display:grid; place-items:center; }.icon-button:hover { background:#e8e7df; }.menu-button { display:none; }.notification-button { border:1px solid var(--line); font-size:22px; }.content-area { padding:40px 42px 62px; max-width:1620px; margin:auto; }.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:31px; }.page-heading h1 { margin:0; font-family:var(--display); letter-spacing:-.055em; font-size:39px; line-height:1.05; font-weight:500; }.page-heading p { margin:9px 0 0; color:var(--muted); max-width:630px; }.header-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.status-strip { display:grid; grid-template-columns:1.5fr repeat(3,1fr); border:1px solid var(--line); background:#fbfaf5; border-radius:var(--radius); overflow:hidden; margin-bottom:33px; }.status-block { padding:20px 21px; min-width:0; border-left:1px solid var(--line); }.status-block:first-child { border-left:0; background:#edf3e8; }.status-block strong { display:block; font-family:var(--display); font-size:29px; font-weight:500; letter-spacing:-.045em; }.status-block span { display:block; color:var(--muted); margin-top:4px; font-size:12px; }.status-block .metric-label { color:var(--sage-deep); font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:10px; margin-bottom:10px; }
.grid-two { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,.85fr); gap:22px; }.grid-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; }.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }.panel-head { min-height:62px; padding:17px 21px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:12px; }.panel-head h2 { margin:0; font-size:15px; letter-spacing:-.02em; }.panel-head p { margin:0; color:var(--muted); font-size:12px; }.panel-body { padding:9px 21px 19px; }.panel-body--flush { padding:0; }.section-title { margin:39px 0 14px; color:var(--sage-deep); font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.project-list { display:grid; }.project-row { display:grid; grid-template-columns:10px minmax(160px,1.3fr) 1fr 100px 90px; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid #efede6; }.project-row:last-child { border-bottom:0; }.project-dot { width:8px; height:8px; border-radius:50%; }.project-dot--healthy { background:#5f9663; box-shadow:0 0 0 4px rgba(95,150,99,.12); }.project-dot--unknown { background:#b7b2a4; }.project-dot--error { background:var(--danger); }.project-name { font-weight:700; font-size:13px; }.project-path { color:var(--muted); font-family:var(--mono); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.project-row button { border:0; background:transparent; text-align:left; padding:0; }.project-row button:hover .project-name { text-decoration:underline; }.badge { display:inline-flex; align-items:center; gap:5px; border-radius:99px; padding:4px 8px; font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }.badge--prod { background:#e7efe3; color:#376241; }.badge--dev { background:#eceafb; color:#544da0; }.badge--info { background:#eceae4; color:#706d66; }.badge--pending { background:#fff0c9; color:#86631d; }.badge--archived { background:#eee9e6; color:#806054; }.badge--danger { background:#f7e3e1; color:#9a3832; }
.request-list { display:grid; }.request-item { padding:16px 0; border-bottom:1px solid #efede6; }.request-item:last-child { border-bottom:0; }.request-top { display:flex; justify-content:space-between; gap:12px; }.request-name { font-weight:700; font-size:13px; }.request-meta { color:var(--muted); font-size:11px; margin-top:4px; }.request-summary { font-size:12px; margin:10px 0 0; color:#53574f; }.empty-state { padding:36px 18px; text-align:center; color:var(--muted); font-size:13px; }.empty-icon { margin:0 auto 12px; display:grid; place-items:center; width:35px; height:35px; border-radius:12px; background:#efeee7; color:#777d74; font-size:18px; }.activity-item { display:grid; grid-template-columns:32px 1fr; gap:10px; padding:12px 0; border-bottom:1px solid #efede6; }.activity-item:last-child { border-bottom:0; }.activity-icon { width:28px; height:28px; background:#eff1ea; color:#3b6144; border-radius:9px; display:grid; place-items:center; font-size:12px; }.activity-copy { font-size:12px; }.activity-copy span { display:block; color:var(--muted); font-size:10px; margin-top:3px; }
.view-tabs { display:flex; gap:4px; padding:4px; border-radius:11px; background:#ebeae4; width:max-content; }.view-tabs button { border:0; background:transparent; border-radius:8px; padding:7px 10px; font-size:12px; color:var(--muted); }.view-tabs button.is-active { background:#fffefa; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.05); font-weight:600; }.data-table { width:100%; border-collapse:collapse; }.data-table th { color:var(--muted); font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:9px; font-weight:500; padding:12px 18px; text-align:left; border-bottom:1px solid var(--line); }.data-table td { padding:14px 18px; border-bottom:1px solid #efede6; font-size:12px; vertical-align:middle; }.data-table tr:last-child td { border-bottom:0; }.table-primary { font-weight:700; }.table-secondary { display:block; font-size:10px; color:var(--muted); margin-top:2px; }.row-actions { display:flex; gap:5px; justify-content:flex-end; }.text-button { padding:4px; border:0; background:transparent; color:var(--sage-deep); font-size:12px; font-weight:700; }.text-button:hover { text-decoration:underline; }.text-button--danger { color:var(--danger); }
.detail-hero { background:linear-gradient(128deg,#e8f0e1 0%,#fffefa 56%,#eceafd 100%); border:1px solid var(--line); border-radius:var(--radius); padding:28px 29px; margin-bottom:22px; }.detail-kicker { color:var(--sage-deep); font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }.detail-hero h1 { margin:8px 0 8px; font-family:var(--display); font-weight:500; font-size:42px; letter-spacing:-.06em; }.detail-hero p { color:#52594f; max-width:690px; margin:0; }.detail-urls { display:flex; gap:10px; margin-top:21px; flex-wrap:wrap; }.url-chip { text-decoration:none; background:rgba(255,255,255,.73); border:1px solid rgba(103,119,98,.23); padding:7px 10px; border-radius:8px; font-family:var(--mono); font-size:10px; color:#344436; }.url-chip:hover { background:white; }.environment-card { padding:20px; min-height:155px; }.environment-card h3 { font-size:15px; margin:0 0 15px; }.environment-card h3 span { margin-right:7px; }.environment-card p { margin:0; color:var(--muted); font-size:12px; }.environment-card .environment-foot { margin-top:20px; display:flex; align-items:center; justify-content:space-between; }
.members-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:18px 21px; }.member-card { border:1px solid var(--line); background:#fbfaf6; border-radius:12px; padding:13px; display:flex; gap:10px; align-items:flex-start; }.member-card .avatar { background:#d9e8d7; color:#315840; }.member-card strong { display:block; font-size:12px; }.member-card small { display:block; color:var(--muted); font-size:10px; margin-top:3px; }.member-card .member-actions { margin-left:auto; }.log-box { background:#1e241f; color:#dce2d8; margin:0; padding:17px; min-height:240px; max-height:360px; overflow:auto; font-family:var(--mono); font-size:10px; line-height:1.65; white-space:pre-wrap; }.log-box .error { color:#ffaf98; }.log-box .success { color:#d8ef60; }
.modal-backdrop { position:fixed; inset:0; background:rgba(20,24,19,.38); backdrop-filter:blur(3px); z-index:50; display:grid; place-items:center; padding:22px; }.modal { width:min(100%,650px); max-height:calc(100vh - 44px); overflow:auto; background:var(--surface); border-radius:20px; box-shadow:0 28px 80px rgba(17,22,15,.27); animation:pop .18s cubic-bezier(.23,1,.32,1); }.modal-head { padding:23px 25px 18px; display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--line); }.modal-head h2 { font-family:var(--display); letter-spacing:-.04em; font-weight:500; margin:0; font-size:27px; }.modal-head p { color:var(--muted); font-size:12px; margin:5px 0 0; }.modal-body { padding:22px 25px 26px; }.modal-footer { padding:17px 25px; background:#f7f6f0; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:9px; position:sticky; bottom:0; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }.form-grid .wide { grid-column:1 / -1; }.permission-stack { margin-top:17px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }.permission-row { padding:11px 13px; display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); font-size:12px; }.permission-row:last-child { border-bottom:0; }.switch { position:relative; display:inline-flex; align-items:center; cursor:pointer; flex:0 0 auto; }.switch input { position:absolute; opacity:0; width:1px; height:1px; }.switch span { display:block; width:34px; height:19px; background:#d4d4cc; border-radius:99px; position:relative; transition:background .16s; }.switch span:after { content:''; width:15px; height:15px; position:absolute; left:2px; top:2px; border-radius:50%; background:white; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .16s; }.switch input:checked + span { background:var(--sage-deep); }.switch input:checked + span:after { transform:translateX(15px); }.danger-zone { border:1px solid #f0cfca; background:#fffaf9; padding:16px; border-radius:12px; margin-top:18px; }.danger-zone h3 { color:#9a3832; margin:0 0 4px; font-size:13px; }.danger-zone p { margin:0 0 11px; font-size:12px; color:#7d625d; }
.toast-root { position:fixed; right:22px; bottom:22px; z-index:80; display:grid; gap:9px; }.toast { min-width:260px; max-width:390px; border-radius:12px; padding:13px 15px; background:#20241f; color:#fff; box-shadow:0 12px 35px rgba(15,18,14,.22); font-size:12px; animation:toast-in .2s cubic-bezier(.23,1,.32,1); }.toast--success { background:#315c3d; }.toast--error { background:#963d37; }.loading-state { min-height:350px; display:grid; place-content:center; color:var(--muted); gap:12px; justify-items:center; }.loader { display:block; width:22px; height:22px; border:2px solid #d4d4ca; border-top-color:var(--sage-deep); border-radius:50%; animation:spin .75s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes pop { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } } @keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (max-width:900px) { .auth-shell { grid-template-columns:1fr; }.auth-intro { min-height:350px; padding:125px 34px 60px; }.brand--light { left:34px; top:32px; }.auth-intro .eyebrow { margin-top:0; }.auth-intro h1 { font-size:52px; }.auth-note { margin-top:31px; }.auth-card-wrap { padding:34px 22px; }.sidebar { transform:translateX(-100%); width:270px; box-shadow:10px 0 35px rgba(0,0,0,.22); }.sidebar.is-open { transform:none; }.sidebar-close,.menu-button { display:grid; }.main-panel { width:100%; margin-left:0; }.topbar { padding:0 19px; }.content-area { padding:27px 18px 45px; }.grid-two,.grid-split { grid-template-columns:1fr; }.status-strip { grid-template-columns:1fr 1fr; }.status-block:first-child { grid-column:1 / -1; }.status-block:nth-child(3) { border-left:0; }.project-row { grid-template-columns:10px 1fr auto; }.project-row .project-path,.project-row .project-env { display:none; }.members-grid { grid-template-columns:1fr; }.page-heading { align-items:flex-start; flex-direction:column; }.detail-hero h1 { font-size:35px; } }
@media (max-width:560px) { .auth-card { padding:33px 25px; }.auth-intro h1 { font-size:43px; }.topbar-actions .live-indicator { display:none; }.status-strip { grid-template-columns:1fr; }.status-block,.status-block:nth-child(3) { border-left:0; border-top:1px solid var(--line); }.status-block:first-child { border-top:0; }.data-table th:nth-child(n+4),.data-table td:nth-child(n+4) { display:none; }.form-grid { grid-template-columns:1fr; }.form-grid .wide { grid-column:auto; }.modal-backdrop { padding:10px; }.modal-head,.modal-body,.modal-footer { padding-left:18px; padding-right:18px; }.detail-hero { padding:23px 19px; } }
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }