:root { color-scheme: light; --ink:#17211b; --muted:#6c776f; --line:#dfe7df; --paper:#fbfcfa; --card:#fff; --green:#1e7a50; --green-dark:#155c3b; --soft:#edf7f0; --danger:#b33d39; }
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(145deg,#f0f6ef 0%,#fbfcfa 45%,#edf5f1 100%); color:var(--ink); font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; min-height:100vh; }
.shell { width:min(960px,calc(100% - 32px)); margin:0 auto; padding:54px 0 80px; }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:32px; }
.top-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.eyebrow { color:var(--green); font-size:11px; font-weight:800; letter-spacing:.16em; margin:0 0 8px; }
h1,h2,p { margin-top:0; } h1 { font-size:38px; letter-spacing:-.04em; margin-bottom:8px; } h2 { font-size:19px; letter-spacing:-.02em; margin-bottom:6px; } .subtitle,.muted { color:var(--muted); margin-bottom:0; }
.status-pill { display:flex; align-items:center; gap:8px; color:var(--muted); background:rgba(255,255,255,.75); border:1px solid var(--line); border-radius:999px; padding:9px 13px; font-size:13px; white-space:nowrap; } .dot { width:8px; height:8px; border-radius:50%; background:#f2b94b; } .status-pill.ok .dot { background:#32a568; } .status-pill.bad .dot { background:#d45a52; }
.card { background:rgba(255,255,255,.84); border:1px solid rgba(217,228,218,.9); border-radius:18px; box-shadow:0 12px 35px rgba(30,70,45,.06); }
.toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:20px; padding:21px 23px; margin-bottom:18px; } .toolbar > div:first-child { min-width:0; } .toolbar .muted { white-space:nowrap; } .toolbar-actions { display:grid; grid-template-columns:repeat(3,112px); gap:9px; align-items:center; justify-content:end; margin:0; } .toolbar-actions .button, .toolbar-actions .file-button { box-sizing:border-box; width:112px; height:44px; min-height:44px; padding:0 9px; margin:0; line-height:20px; }
.button { appearance:none; border:1px solid transparent; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; font:inherit; font-size:13px; font-weight:700; padding:10px 14px; transition:.15s ease; } .button:hover { transform:translateY(-1px); } .button.primary { color:#fff; background:var(--green); box-shadow:0 4px 12px rgba(30,122,80,.2); } .button.primary:hover { background:var(--green-dark); } .button.secondary { color:var(--ink); background:#fff; border-color:var(--line); } .button-icon { display:inline-flex; width:15px; height:15px; } .button-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; } .file-button { position:relative; overflow:hidden; } .file-button input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.sites { display:grid; gap:12px; } .site { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:20px; padding:19px 21px; } .site-info { min-width:0; display:grid; grid-template-columns:minmax(220px,1.1fr) minmax(280px,1fr); grid-template-rows:auto auto; column-gap:28px; align-items:center; } .site-domain { grid-column:1; grid-row:1; display:flex; align-items:center; gap:9px; font-weight:800; font-size:16px; } .site-url { color:var(--green); text-decoration:none; } .site-note { grid-column:1; grid-row:2; color:#59665d; font-size:13px; margin-top:7px; min-height:18px; } .site-upstream { grid-column:2; grid-row:1; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; margin-top:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .certificate-status { grid-column:2; grid-row:2; display:flex; align-items:center; gap:6px; font-size:12px; margin-top:7px; } .cert-dot { width:7px; height:7px; border-radius:50%; background:#9aa69d; flex-shrink:0; } .cert-active { color:var(--green); } .cert-active .cert-dot { background:#32a568; } .cert-renewing { color:#a97824; } .cert-renewing .cert-dot { background:#e4aa43; } .cert-pending { color:#a97824; } .cert-pending .cert-dot { background:#e4aa43; } .cert-error { color:var(--danger); } .cert-error .cert-dot { background:#d45a52; } .cert-disabled { color:var(--muted); } .site-actions { display:flex; align-items:center; gap:7px; flex-shrink:0; } .tag { color:var(--green); background:var(--soft); border-radius:999px; font-size:11px; font-weight:800; padding:4px 8px; } .tag.off { color:#8e655d; background:#f7edeb; } .icon-button { border:0; background:transparent; cursor:pointer; color:var(--muted); font-size:22px; line-height:1; padding:3px 6px; } .icon-button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; } .delete { color:var(--danger); }
.empty { text-align:center; padding:62px 20px; } .empty-icon { margin:0 auto 13px; width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:var(--green); background:var(--soft); font-size:25px; } .empty p { margin-bottom:20px; } .hidden { display:none !important; } .message { min-height:22px; color:var(--green-dark); font-size:13px; margin:18px 3px; } .message.error { color:var(--danger); }
.auth-screen { min-height:100vh; display:grid; place-items:center; padding:24px; } .auth-card { width:min(420px,100%); background:rgba(255,255,255,.92); border:1px solid rgba(217,228,218,.95); border-radius:22px; box-shadow:0 20px 70px rgba(30,70,45,.1); padding:34px; } .auth-card h1 { font-size:30px; margin-bottom:8px; } .auth-card .subtitle { line-height:1.6; margin-bottom:24px; } .auth-submit { width:100%; margin-top:5px; } .auth-error { min-height:20px; color:var(--danger); font-size:13px; margin:10px 0 0; }
dialog { border:0; border-radius:19px; padding:0; width:min(480px,calc(100% - 28px)); box-shadow:0 28px 90px rgba(18,45,28,.25); } dialog::backdrop { background:rgba(20,35,27,.3); backdrop-filter:blur(3px); } .dialog-card { padding:26px; } .dialog-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; } label { display:grid; gap:7px; font-size:13px; font-weight:700; margin:15px 0; } input,select { width:100%; border:1px solid var(--line); border-radius:9px; background:#fbfdfb; color:var(--ink); font:inherit; padding:11px 12px; outline:none; } input:focus,select:focus { border-color:#72b18d; box-shadow:0 0 0 3px rgba(58,153,99,.12); } .switch-row { display:flex; align-items:center; gap:9px; font-weight:600; } .switch-row input { width:auto; accent-color:var(--green); } .hint { color:var(--muted); font-size:12px; line-height:1.55; background:#f5f9f5; border-radius:9px; padding:11px 12px; } .dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:24px; }
@media (max-width:650px) { .shell { padding-top:30px; } .topbar { align-items:flex-start; flex-direction:column; } .toolbar,.site { display:flex; align-items:flex-start; flex-direction:column; } h1 { font-size:31px; } .toolbar { display:flex; width:100%; } .toolbar .muted { white-space:normal; } .toolbar-actions { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); } .toolbar-actions .button, .toolbar-actions .file-button { width:100%; } .site { gap:15px; } .site-info { display:block; width:100%; } .site-note { margin-top:7px; } .site-upstream { margin-top:8px; } .certificate-status { margin-top:9px; } .site-actions { width:100%; justify-content:flex-end; } .top-actions { width:100%; justify-content:flex-start; } }

@media (min-width:651px) and (max-width:840px) { .toolbar { grid-template-columns:1fr; } .toolbar-actions { justify-self:end; } .site-info { display:block; } .site-upstream,.certificate-status { margin-top:8px; } }