/* codeblog theme - everything hangs off the 5 admin colors */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --c-bg:        #0d0f13;
    --c-panel:     #13161c;
    --c-inner:     #1a1e27;
    --c-hl:        #e91e63;
    --c-font:      #e8edf5;

    --c-muted:     color-mix(in srgb, var(--c-font) 60%, var(--c-bg));
    --c-faint:     color-mix(in srgb, var(--c-font) 35%, var(--c-bg));
    --c-border:    color-mix(in srgb, var(--c-font) 9%, transparent);
    --c-hl-soft:   color-mix(in srgb, var(--c-hl) 14%, transparent);
    --c-hl-border: color-mix(in srgb, var(--c-hl) 45%, transparent);

    --ok:    #10b981;
    --err:   #f43f5e;
    --warn:  #f59e0b;

    --font-head: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --radius: 10px;
}

html, body { min-height: 100%; }
body {
    font-family: var(--font-body);
    color: var(--c-font);
    background: var(--c-bg);
    background-image: radial-gradient(ellipse at top right, var(--c-hl-soft), transparent 45%),
                      linear-gradient(180deg, var(--c-bg), color-mix(in srgb, var(--c-panel) 60%, var(--c-bg)));
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

a { color: var(--c-font); text-decoration: none; }
a:hover { color: var(--c-hl); }
code { font-family: var(--font-mono); font-size: 0.85em; }

/* buttons + inputs */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px; border: 1px solid var(--c-border);
    font-family: var(--font-head); font-size: 0.85rem; font-weight: 600;
    cursor: pointer; background: var(--c-inner); color: var(--c-font);
    transition: border-color .15s, background .15s, color .15s;
}
.btn:hover { border-color: var(--c-hl-border); color: var(--c-font); }
.btn-primary { background: var(--c-hl); border-color: var(--c-hl); color: #fff; }
.btn-primary:hover { background: color-mix(in srgb, var(--c-hl) 82%, #000); color: #fff; }
.btn-danger { color: var(--err); }
.btn-danger:hover { border-color: var(--err); color: var(--err); }
.btn-sm { padding: 5px 10px; font-size: 0.78rem; }
.btn-icon { padding: 4px 9px; font-size: 0.9rem; line-height: 1; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

input[type=text], input[type=password], input[type=url], input[type=number], textarea, select {
    width: 100%; padding: 8px 11px; background: var(--c-bg); color: var(--c-font);
    border: 1px solid var(--c-border); border-radius: 7px; font-family: inherit; font-size: 0.9rem;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--c-hl); box-shadow: 0 0 0 3px var(--c-hl-soft); }
input::placeholder, textarea::placeholder { color: var(--c-faint); }
label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--c-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .5px; }
.form-group { margin-bottom: 14px; }

.message { font-size: 0.85rem; padding: 0; min-height: 0; transition: opacity .4s; }
.message.success, .message.error, .message.info { padding: 9px 12px; border-radius: 7px; margin-top: 10px; }
.message.success { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.message.error   { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); }
.message.info    { background: var(--c-hl-soft); color: var(--c-font); }

/* modals - locked, only the X / cancel close them */
.modal-overlay {
    position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
    background: color-mix(in srgb, #000 60%, transparent); backdrop-filter: blur(3px); padding: 16px;
}
.modal-panel { background: var(--c-panel); border: 1px solid var(--c-border); border-radius: var(--radius); width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--c-border); }
.modal-head h2 { font-family: var(--font-head); font-size: 1.05rem; }
.modal-close { background: none; border: none; color: var(--c-muted); font-size: 1.4rem; cursor: pointer; line-height: 1; }
.modal-close:hover { color: var(--c-hl); }
.modal-body { padding: 20px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* auth cards (login / setup) */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 400px; background: var(--c-panel); border: 1px solid var(--c-border); border-radius: 12px; padding: 36px 32px 30px; box-shadow: 0 8px 32px rgba(0,0,0,.4); }
.auth-card h1 { font-family: var(--font-head); color: var(--c-hl); font-size: 1.35rem; text-align: center; }
.auth-card .sub { color: var(--c-muted); font-size: 0.85rem; text-align: center; margin-bottom: 24px; }
.auth-card .btn { width: 100%; padding: 11px; margin-top: 6px; }
.auth-card .error-message { color: var(--err); font-size: 0.85rem; min-height: 20px; }
.auth-card .back { display: block; text-align: center; margin-top: 16px; font-size: 0.8rem; color: var(--c-faint); }