/* status.linkverse.work — extracted from status.php (linkverse.work) and trimmed.
   Uses the same .ss-* class system so the visual identity matches the main site.
*/

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: #07070c; color: #e4e4e7;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.ss { position: relative; padding: 80px 0 80px; overflow: hidden; min-height: 100vh; }
.ss-container { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 20px; }

.ss-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ss-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.45; animation: ssOrb 24s ease-in-out infinite; }
.ss-orb-1 { top: -180px; left: -140px; width: 540px; height: 540px; }
.ss-orb-2 { bottom: -160px; right: -120px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(99,102,241,0.32), transparent 70%); animation-delay: -10s; }
@keyframes ssOrb { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(30px,-20px) scale(1.06);} }
.ss-grid-pattern { position: absolute; inset: 0; background-image: linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, black 25%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 80%); opacity: 0.45; }

.ss-hero { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.ss-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #c7d2fe; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; padding: 6px 14px; border-radius: 999px; background: rgba(99,102,241,0.12); border: 1px solid rgba(129,140,248,0.28); margin-bottom: 22px; }
.ss-dot { width: 7px; height: 7px; border-radius: 50%; animation: ssPulse 2s ease-in-out infinite; }
@keyframes ssPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.55;transform:scale(1.3);} }
.ss-title { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 14px; background: linear-gradient(135deg, #fff, #c7d2fe); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ss-lede { color: #a1a1aa; font-size: 1rem; line-height: 1.6; margin: 0; }

.ss-overall {
    display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
    padding: 24px 28px; margin-bottom: 32px;
    background: linear-gradient(135deg, color-mix(in oklab, var(--c) 12%, transparent), color-mix(in oklab, var(--c) 4%, transparent));
    border: 1px solid color-mix(in oklab, var(--c) 32%, transparent);
    border-radius: 18px;
}
@media (max-width: 720px) { .ss-overall { grid-template-columns: 1fr; text-align: center; } .ss-overall-icon { margin: 0 auto; } }
.ss-overall-icon { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--c) 22%, transparent); color: var(--c); font-size: 1.6rem; border: 1px solid color-mix(in oklab, var(--c) 36%, transparent); }
.ss-overall-text h2 { color: #fff; font-size: 1.3rem; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.01em; }
.ss-overall-text p { color: #a1a1aa; font-size: 0.86rem; margin: 0; }
.ss-overall-text strong { color: #fff; }
.ss-overall-uptime { text-align: right; }
@media (max-width: 720px) { .ss-overall-uptime { text-align: center; } }
.ss-overall-uptime-num { color: var(--c); font-size: 1.8rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1; }
.ss-overall-uptime-l { color: #71717a; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; margin-top: 4px; }

.ss-block { margin-bottom: 30px; padding: 24px; background: rgba(22,22,32,0.7); border: 1px solid rgba(99,102,241,0.16); border-radius: 18px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ss-block-head { margin-bottom: 18px; }
.ss-block-head h2 { color: #fff; font-size: 1.05rem; font-weight: 800; margin: 0; display: inline-flex; align-items: center; gap: 10px; letter-spacing: -0.005em; }
.ss-block-head h2 i { color: #a5b4fc; font-size: 0.94rem; }

.ss-services { display: flex; flex-direction: column; gap: 8px; }
.ss-svc { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px; background: rgba(15,15,23,0.7); border: 1px solid rgba(99,102,241,0.14); border-radius: 12px; }
@media (max-width: 600px) { .ss-svc { grid-template-columns: auto 1fr; } .ss-svc-meta { grid-column: 1 / -1; justify-content: flex-end; padding-top: 6px; border-top: 1px solid rgba(99,102,241,0.1); margin-top: 6px; } }
.ss-svc-icon { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--c) 18%, transparent); color: var(--c); border: 1px solid color-mix(in oklab, var(--c) 32%, transparent); font-size: 0.95rem; }
.ss-svc-info h3 { color: #fff; font-size: 0.94rem; font-weight: 700; margin: 0 0 2px; }
.ss-svc-info p { color: #71717a; font-size: 0.82rem; margin: 0; }
.ss-svc-meta { display: inline-flex; align-items: center; gap: 10px; }
.ss-svc-rt { color: #71717a; font-size: 0.78rem; font-family: ui-monospace, monospace; padding: 3px 9px; background: rgba(99,102,241,0.10); border: 1px solid rgba(99,102,241,0.22); border-radius: 999px; }
.ss-svc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; background: color-mix(in oklab, var(--c) 14%, transparent); color: var(--c); border: 1px solid color-mix(in oklab, var(--c) 32%, transparent); border-radius: 999px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.ss-svc-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.ss-up { padding: 16px 0; border-bottom: 1px solid rgba(99,102,241,0.08); }
.ss-up:last-child { border-bottom: none; padding-bottom: 0; }
.ss-up-head { display: flex; justify-content: space-between; margin-bottom: 8px; }
.ss-up-name { color: #fff; font-size: 0.92rem; font-weight: 600; }
.ss-up-pct { font-size: 0.92rem; font-weight: 700; font-family: ui-monospace, monospace; }
.ss-up-bar { display: flex; gap: 2px; height: 26px; }
.ss-up-day { flex: 1; background: var(--c); border-radius: 2px; transition: opacity 0.2s ease, transform 0.2s ease; cursor: pointer; min-width: 2px; }
.ss-up-day[data-status="no_data"] { background: rgba(99,102,241,0.12); }
.ss-up-day:hover { opacity: 0.85; transform: scaleY(1.08); }
.ss-up-legend { display: flex; justify-content: space-between; color: #71717a; font-size: 0.72rem; margin-top: 6px; }

.ss-incidents { display: flex; flex-direction: column; gap: 14px; }
.ss-inc { padding: 18px; background: rgba(15,15,23,0.7); border: 1px solid rgba(99,102,241,0.14); border-radius: 12px; }
.ss-inc-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.ss-inc-head h3 { color: #fff; font-size: 1rem; font-weight: 700; margin: 0; }
.ss-inc-date { color: #71717a; font-size: 0.78rem; }
.ss-inc-svc { color: #a5b4fc; font-size: 0.78rem; margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; }
.ss-inc-body { color: #d4d4d8; font-size: 0.92rem; line-height: 1.6; margin: 10px 0 12px; white-space: pre-wrap; }
.ss-inc-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; background: color-mix(in oklab, var(--c) 14%, transparent); color: var(--c); border: 1px solid color-mix(in oklab, var(--c) 32%, transparent); border-radius: 999px; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.ss-inc-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ss-inc-timeline { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; border-left: 2px solid rgba(99,102,241,0.18); padding-left: 14px; }
.ss-inc-update { display: flex; gap: 10px; }
.ss-inc-update-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex-shrink: 0; margin-top: 5px; box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 22%, transparent); }
.ss-inc-update-status { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.ss-inc-update-msg { color: #d4d4d8; font-size: 0.86rem; line-height: 1.55; margin-top: 2px; white-space: pre-wrap; }
.ss-inc-update-time { color: #71717a; font-size: 0.74rem; margin-top: 4px; }

.ss-no-inc { text-align: center; padding: 28px 18px; }
.ss-no-inc-icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(34,197,94,0.16); color: #86efac; font-size: 1.4rem; border: 1px solid rgba(34,197,94,0.32); }
.ss-no-inc h3 { color: #fff; font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
.ss-no-inc p { color: #a1a1aa; font-size: 0.9rem; margin: 0; }

.ss-refresh { color: #71717a; font-size: 0.82rem; text-align: center; margin: 18px 0 0; }
.ss-refresh i { margin-right: 6px; color: #a5b4fc; }

.ss-admin-link { position: fixed; bottom: 16px; right: 18px; color: #52525b; font-size: 0.72rem; text-decoration: none; opacity: 0.55; transition: opacity 0.2s ease; }
.ss-admin-link:hover { opacity: 1; color: #a5b4fc; }

@media (prefers-reduced-motion: reduce) {
    .ss-orb, .ss-dot { animation: none !important; }
    .ss-up-day { transition: none !important; }
}

/* ─────────── ADMIN ─────────── */
.adm { min-height: 100vh; padding: 60px 20px; }
.adm-card { max-width: 480px; margin: 0 auto; padding: 32px; background: rgba(22,22,32,0.85); border: 1px solid rgba(99,102,241,0.2); border-radius: 18px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.adm h1 { color: #fff; font-size: 1.4rem; margin: 0 0 6px; font-weight: 800; letter-spacing: -0.01em; }
.adm-sub { color: #a1a1aa; font-size: 0.86rem; margin: 0 0 22px; }
.adm-form label { display: block; color: #c7d2fe; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin: 14px 0 6px; }
.adm-form input, .adm-form select, .adm-form textarea {
    width: 100%; padding: 11px 14px; font-size: 0.92rem;
    color: #fff; background: rgba(15,15,23,0.85);
    border: 1px solid rgba(99,102,241,0.22); border-radius: 10px;
    font-family: inherit; resize: vertical;
}
.adm-form input:focus, .adm-form select:focus, .adm-form textarea:focus {
    outline: none; border-color: #818CF8;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.22);
}
.adm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; margin-top: 18px;
    background: linear-gradient(135deg, #6366F1, #8B5CF6); color: #fff;
    border: none; border-radius: 10px; font-size: 0.92rem; font-weight: 700;
    cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.adm-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(99,102,241,0.38); }
.adm-btn-ghost { background: transparent; border: 1px solid rgba(99,102,241,0.32); color: #c7d2fe; }
.adm-btn-danger { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.adm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .adm-grid { grid-template-columns: 1fr; } }
.adm-list { max-width: 880px; margin: 0 auto; }
.adm-list-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 22px; flex-wrap: wrap; gap: 12px; }
.adm-row { padding: 14px 18px; margin-bottom: 10px; background: rgba(22,22,32,0.7); border: 1px solid rgba(99,102,241,0.16); border-radius: 12px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.adm-row-info h3 { margin: 0 0 3px; color: #fff; font-size: 0.96rem; font-weight: 700; }
.adm-row-info p { margin: 0; color: #71717a; font-size: 0.82rem; }
.adm-row-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-pill { padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.adm-err { color: #fca5a5; background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.32); padding: 10px 14px; border-radius: 10px; font-size: 0.86rem; margin-top: 12px; }
.adm-ok  { color: #86efac; background: rgba(34,197,94,0.10); border: 1px solid rgba(34,197,94,0.32); padding: 10px 14px; border-radius: 10px; font-size: 0.86rem; margin-top: 12px; }
.adm-section { max-width: 880px; margin: 32px auto 0; padding-top: 24px; border-top: 1px solid rgba(99,102,241,0.16); }
.adm-section h2 { color: #fff; font-size: 1.1rem; font-weight: 800; margin: 0 0 14px; }