/* dialogs, toasts, the shortcuts sheet, what's new, the page skeleton and the load error page (ui.js, loading.js) */

:root { --danger:#ff6b6b; --ok:#5fd38d; }

.ui-dialog { position:fixed; inset:0; z-index:10004; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:palette-fade .14s ease; }
.ui-dialog-card { position:relative; width:min(400px,100%); max-height:calc(100% - 32px); overflow:auto; padding:24px; background:var(--surface-2); border:1px solid var(--border-faint); border-radius:var(--radius-dialog); box-shadow:0 30px 80px -20px rgba(0,0,0,.8); animation:modal-pop .16s var(--motion); }
.ui-dialog-card.wide { width:min(760px,100%); }
.ui-dialog-card h2 { margin:0 36px 8px 0; color:var(--text-white); font-size:16px; font-weight:500; }
.ui-dialog-card p { color:var(--text-muted); font-size:13px; line-height:1.6; word-break:break-word; }
.ui-dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.ui-dialog-actions .btn { height:36px; padding:0 16px; font-size:12.5px; }
.btn.primary.danger, .btn.primary.danger:hover { background:var(--danger); color:#140606; }
.ui-dialog .close-btn { top:14px; right:14px; }

.ext-toast.error { border-color:color-mix(in srgb,var(--danger) 45%,transparent); }
.ext-toast.error .ext-toast-text b { color:var(--danger); }
.ext-toast.ok .ext-toast-text b { color:var(--ok); }

.sc-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:16px; }
.sc-cols h3 { margin-bottom:8px; color:var(--text-faint); font-size:11px; font-weight:450; letter-spacing:.04em; }
.sc-row { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:32px; color:var(--text-secondary); font-size:12.5px; }
.sc-keys { display:flex; gap:4px; flex:0 0 auto; }
.ui-dialog kbd { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border:1px solid var(--border-faint); border-bottom-width:2px; border-radius:6px; background:var(--surface-4); color:var(--text-secondary); font:inherit; font-size:11px; }
@media (max-width:700px) { .sc-cols { grid-template-columns:1fr; gap:14px; } }

.changelog { display:flex; flex-direction:column; gap:20px; margin-top:12px; }
.wn-tag { display:inline-block; margin-bottom:10px; padding:3px 9px; border-radius:99px; background:var(--accent-soft); color:var(--text-secondary); font-size:11px; }
.wn-list { margin:4px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.wn-list li { position:relative; padding-left:16px; color:var(--text-secondary); font-size:13px; line-height:1.5; }
.wn-list li::before { content:""; position:absolute; left:2px; top:.6em; width:5px; height:5px; border-radius:50%; background:var(--accent); }

/* a faint page outline while a site loads, instead of a bare spinner */
.page-loading { background:var(--bg-body); }
.page-skel { width:min(1000px,calc(100% - 48px)); height:calc(100% - 48px); display:flex; flex-direction:column; gap:18px; padding-top:8px; }
.page-skel i { display:block; border-radius:12px; background:linear-gradient(100deg,var(--surface-3) 30%,var(--surface-5) 50%,var(--surface-3) 70%); background-size:300% 100%; animation:shimmer 1.4s linear infinite; }
.page-skel .ps-bar { height:44px; }
.page-skel .ps-hero { height:min(34vh,260px); }
.page-skel .ps-row { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; flex:1; max-height:220px; }
.page-skel .ps-row i { height:100%; }
.page-skel .ps-line { height:14px; width:60%; }
.page-skel .ps-line.s { width:38%; }
.page-loading > span { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:7px 14px; border-radius:99px; background:var(--surface-4); border:1px solid var(--border-faint); color:var(--text-muted); font-size:12px; }
.page-loading > span .spinner { width:13px; height:13px; margin:0; border-width:2px; }
@media (max-width:640px) { .page-skel .ps-row { grid-template-columns:1fr 1fr; } .page-skel .ps-row i:nth-child(3) { display:none; } }

/* when a site won't load */
.load-error { position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg-body); animation:fade-in .18s ease; }
.load-error[hidden] { display:none; }
.le-card { width:min(440px,100%); text-align:center; }
.le-ic { width:56px; height:56px; margin:0 auto 18px; display:grid; place-items:center; border-radius:18px; background:var(--surface-4); border:1px solid var(--border-faint); color:var(--text-muted); }
.le-card h1 { color:var(--text-white); font-size:18px; font-weight:500; margin-bottom:8px; word-break:break-word; }
.le-card > p { color:var(--text-muted); font-size:13px; line-height:1.6; }
.le-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:22px; }
.le-btns .btn { height:38px; padding:0 16px; font-size:12.5px; }
.le-more { margin-top:20px; text-align:left; }
.le-more summary { color:var(--text-faint); font-size:12px; cursor:pointer; text-align:center; list-style:none; }
.le-more summary::-webkit-details-marker { display:none; }
.le-more summary:hover { color:var(--text-secondary); }
.le-more pre { margin-top:10px; max-height:160px; overflow:auto; padding:12px; border-radius:12px; background:var(--surface-3); border:1px solid var(--border-subtle); color:var(--text-muted); font:11px/1.5 'JetBrains Mono',monospace; white-space:pre-wrap; word-break:break-all; text-transform:none; }

/* settings, status */
.status-hero { display:flex; align-items:center; gap:14px; padding:16px; border-radius:var(--radius-panel); background:var(--surface-3); border:1px solid var(--border-subtle); }
.status-dot { width:10px; height:10px; flex:0 0 10px; border-radius:50%; background:var(--text-faint); }
.status-dot.ok { background:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 18%,transparent); }
.status-dot.warn { background:#f0c24b; box-shadow:0 0 0 4px rgba(240,194,75,.18); }
.status-dot.bad { background:var(--danger); box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 18%,transparent); }
.status-hero b { display:block; color:var(--text-white); font-size:14px; font-weight:500; }
.status-hero small { color:var(--text-muted); font-size:12px; }
.status-hero .btn { margin-left:auto; }
.status-rows { display:flex; flex-direction:column; }
.status-row { display:flex; align-items:center; gap:12px; min-height:46px; padding:6px 2px; border-bottom:1px solid var(--border-subtle); font-size:12.5px; color:var(--text-secondary); }
.status-row:last-child { border-bottom:0; }
.status-row .grow { flex:1; min-width:0; display:flex; flex-direction:column; }
.status-row .grow small { color:var(--text-faint); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-transform:lowercase; }
.status-row .ms { color:var(--text-muted); font-variant-numeric:tabular-nums; }
.status-row .tag { padding:2px 8px; border-radius:99px; background:var(--accent-soft); color:var(--text-secondary); font-size:10.5px; }
.status-bars { display:flex; align-items:flex-end; gap:2px; height:14px; }
.status-bars i { width:3px; border-radius:2px; background:var(--border-faint); }
.status-bars i:nth-child(1) { height:5px; } .status-bars i:nth-child(2) { height:9px; } .status-bars i:nth-child(3) { height:14px; }
.status-bars[data-q="3"] i, .status-bars[data-q="2"] i:nth-child(-n+2), .status-bars[data-q="1"] i:nth-child(1) { background:var(--ok); }
.status-bars[data-q="1"] i:nth-child(1) { background:#f0c24b; }
.status-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.status-grid div { padding:12px 14px; border-radius:var(--radius-item); background:var(--surface-3); border:1px solid var(--border-subtle); }
.status-grid small { display:block; color:var(--text-faint); font-size:11px; margin-bottom:3px; }
.status-grid b { color:var(--text-white); font-size:13px; font-weight:450; }
button.status-row { background:none; border:0; border-bottom:1px solid var(--border-subtle); font:inherit; cursor:pointer; border-radius:0; transition:background .12s; }
button.status-row:last-child { border-bottom:0; }
button.status-row:hover { background:var(--accent-soft); }
.ui-dialog-input { width: 100%; margin: 4px 0 14px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border-faint, #ffffff26); background: var(--bg, #0c0c0c); color: inherit; font: inherit; outline: none; }
.ui-dialog-actions .btn:disabled { opacity: .4; cursor: not-allowed; }