/* =====================================================================
   Dark 1.0 — clean, modern, generation-friendly
   Charcoal canvas · lime accent · mono labels · zero gradients
   Loaded after iPortfolio's style.css to override.
   --------------------------------------------------------------------- */

:root {
    --bg: #0e0e10;
    --bg-elev: #151517;
    --surface: #17171a;
    --surface-hi: #1d1d21;
    --border: #27272a;
    --border-hi: #3f3f46;

    --text: #fafafa;
    --muted: #a1a1aa;
    --dim: #71717a;
    --faint: #52525b;

    --accent: #bef264;
    --accent-hi: #d9f99d;
    --accent-dim: #84cc16;
    --accent-ink: #0e0e10;

    --danger: #ef4444;
    --success: #22c55e;

    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 4px;

    --font-sans: "Geist", "Inter", system-ui, -apple-system, sans-serif;
    --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
    --font-display: "Geist", "Inter", system-ui, sans-serif;

    --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- Reset layer ---------- */

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

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- Page FX: click ripples + mouse-trail particles ----------
   Elements are created by site.js#pageFx on click / mousemove and
   self-destruct via animationend. Positioned fixed so they don't
   scroll-shift. pointer-events:none so they never block the UI. */

.fx-ripple {
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 9998;
}

.fx-ripple::before,
.fx-ripple::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--fx-c, #bef264);
    box-shadow: 0 0 24px 2px var(--fx-c, #bef264);
    animation: fx-ring 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fx-ripple::after { animation-delay: 140ms; }

@keyframes fx-ring {
    0%   { width: 0;     height: 0;     opacity: 0.9; border-width: 3px; }
    60%  { opacity: 0.6; }
    100% { width: 220px; height: 220px; opacity: 0;   border-width: 1px; }
}

.fx-burst {
    position: fixed;
    pointer-events: none;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: var(--fx-c, #bef264);
    box-shadow: 0 0 10px 1px var(--fx-c, #bef264);
    z-index: 9997;
    animation: fx-burst 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fx-burst {
    0%   { transform: translate(0, 0) scale(1);   opacity: 1; }
    100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.2); opacity: 0; }
}

.fx-trail {
    position: fixed;
    pointer-events: none;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: var(--fx-c, #bef264);
    box-shadow: 0 0 8px var(--fx-c, #bef264);
    z-index: 9996;
    animation: fx-trail 700ms ease-out forwards;
}

@keyframes fx-trail {
    0%   { transform: translate(0, 0) scale(1);   opacity: 0.9; }
    100% { transform: translate(var(--dx, 0), calc(var(--dy, 0) + 30px)) scale(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-ripple, .fx-ripple::before, .fx-ripple::after,
    .fx-burst, .fx-trail { animation: none !important; display: none !important; }
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* Kill iPortfolio backgrounds / gradients globally */
section, main, #main, #hero, #hero:before,
.about, .skills, .resume, .contact { background: var(--bg) !important; }

section { padding: 5rem 0 !important; position: relative; }

/* ---------- Typography ---------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--text);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 0.75rem;
}

p { margin: 0 0 1rem; color: var(--muted); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dim);
    margin-bottom: 1.25rem;
}

.eyebrow::before {
    content: "";
    width: 1.25rem;
    height: 1px;
    background: var(--border-hi);
}

/* ---------- Layout container ---------- */

.container,
.container-fluid {
    max-width: 1200px !important;
    padding-inline: 1.5rem !important;
    margin-inline: auto !important;
}

.myContainer { padding-top: 2rem; /* offset for fixed header */ }

/* ---------- Section title ---------- */

.section-title {
    margin-bottom: 3rem;
    max-width: 640px;
}

.section-title h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: 600;
    color: var(--text) !important;
    padding: 0 !important;
    margin-bottom: 0.5rem !important;
    background: none !important;
    -webkit-text-fill-color: var(--text) !important;
}

.section-title h2::after { display: none !important; }

.section-title p {
    color: var(--muted);
    font-size: 1rem;
    margin: 0;
    max-width: 540px;
}

/* ---------- Header / Nav ---------- */

#header {
    background: rgba(14, 14, 16, 0.72) !important;
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 0 !important;
    height: auto !important;
    transition: border-color 0.2s var(--ease);
}

#header .container-fluid {
    padding-inline: 1.5rem !important;
}

#header .logo img {
    max-height: 36px;
    width: auto;
}

#navbar ul {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

#navbar a,
#navbar a:focus {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-sans);
    font-size: 0.8125rem !important;
    font-weight: 500;
    color: var(--muted) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: var(--radius-xs);
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
    letter-spacing: 0;
}

#navbar a:hover,
#navbar .active {
    color: var(--text) !important;
    background: var(--surface);
}

/* Remove template underline animation */
#navbar a::after { display: none !important; }

/* Dropdowns — hidden by default, fade in on hover */
#navbar .dropdown { position: relative; }

#navbar .dropdown > ul {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 200px;
    margin: 0;
    padding: 0.375rem !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 1px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0.15s;
    z-index: 100;
}

#navbar .dropdown:hover > ul,
#navbar .dropdown:focus-within > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#navbar .dropdown ul li { width: 100%; }

#navbar .dropdown ul li a {
    display: block !important;
    width: 100%;
    padding: 0.5rem 0.75rem !important;
    border-radius: var(--radius-xs);
    white-space: nowrap;
    font-size: 0.8125rem !important;
}

#navbar .dropdown ul li a:hover { background: var(--surface-hi) !important; }

/* Nested dropdown — opens to the right */
#navbar .dropdown .dropdown > ul {
    top: -0.375rem;
    left: calc(100% + 0.25rem);
}

#navbar .dropdown-toggle::after {
    content: "";
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    margin-left: 0.375rem;
    border: 1px solid currentColor;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform 0.15s var(--ease);
    border-radius: 1px;
}

#navbar .dropdown:hover > a.dropdown-toggle::after { transform: rotate(225deg) translate(-1px, -1px); }

/* Mobile nav — stack vertically, always-open */
.navbar-mobile .dropdown > ul {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-left: 0.75rem;
    margin-top: 0.25rem;
}

.header-social-links {
    display: flex !important;
    align-items: center;
    gap: 0.25rem;
}

.header-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--dim) !important;
    border-radius: var(--radius-xs);
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.header-social-links a:hover {
    color: var(--text) !important;
    background: var(--surface);
}

.navbar-mobile {
    background: var(--bg) !important;
}
.navbar-mobile ul {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    padding: 0.5rem !important;
    border-radius: var(--radius) !important;
}

/* ---------- Buttons ---------- */

.btn-primary-grad,
.btn-about,
.btn.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    background: var(--accent);
    color: var(--accent-ink) !important;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background 0.15s var(--ease), transform 0.15s var(--ease);
    text-decoration: none !important;
}

.btn-primary-grad:hover,
.btn-about:hover,
.btn.btn-primary:hover {
    background: var(--accent-hi);
    transform: translateY(-1px);
    color: var(--accent-ink) !important;
}

.btn-ghost,
.btn-cv {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    background: transparent;
    color: var(--text) !important;
    border: 1px solid var(--border-hi);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
    text-decoration: none !important;
}

.btn-ghost:hover,
.btn-cv:hover {
    background: var(--surface);
    border-color: var(--text);
    color: var(--text) !important;
}

.btn.btn-danger {
    background: transparent;
    border: 1px solid var(--border-hi);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
}
.btn.btn-danger:hover { border-color: var(--danger); color: var(--danger); background: transparent; }

/* ---------- Hero ---------- */

#hero {
    position: relative;
    min-height: calc(100vh - 64px);
    padding: 7rem 0 4rem !important;
    display: flex;
    align-items: center;
    background: var(--bg) !important;
    overflow: hidden;
    isolation: isolate;
}

/* Hero backdrop layers removed — the click/trail FX handles the
   delight, no need for a persistent lime spotlight on the hero. */

/* Parallax-enabled hero elements respond to --px/--py */
.hero-avatar {
    transform: perspective(1200px)
               rotateY(calc(var(--px, 0) * 6deg))
               rotateX(calc(var(--py, 0) * -6deg));
    transition: transform 0.2s var(--ease);
    will-change: transform;
}

.hero-intro {
    transform: translate(calc(var(--px, 0) * -4px), calc(var(--py, 0) * -4px));
    transition: transform 0.3s var(--ease);
}

/* Magnetic buttons — small cursor-tracked nudge */
.hero-actions .btn-primary-grad,
.hero-actions .btn-ghost {
    position: relative;
    transition: transform 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease);
    will-change: transform;
}

#hero .container,
#hero .container-fluid { padding-inline: 1.5rem !important; }

.hero-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 860px) {
    .hero-wrap {
        grid-template-columns: 1fr minmax(260px, 340px);
        gap: 5rem;
    }
}

.hero-intro { max-width: 640px; }

.hero-name {
    font-size: clamp(2.25rem, 6vw, 4rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin: 0 0 1.25rem;
    color: var(--text);
}

.hero-name .muted { color: var(--dim); font-weight: 400; }

.hero-role {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--accent);
    margin-bottom: 1.5rem;
    min-height: 1.4em;
}

.hero-role::before {
    content: "$ ";
    color: var(--dim);
}

.hero-cursor::after {
    content: "▋";
    color: var(--accent);
    animation: blink 1s steps(1) infinite;
    margin-left: 2px;
}

@keyframes blink { 50% { opacity: 0; } }

.hero-bio {
    color: var(--muted);
    font-size: 1.0625rem;
    line-height: 1.65;
    max-width: 34rem;
    margin: 0 0 2rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

/* Hero meta — key/value row in monospace */
.hero-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.25rem 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.hero-meta .k {
    display: block;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.25rem;
}

.hero-meta .v {
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
}

.hero-meta .v .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
    margin-right: 0.5rem;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse { 50% { opacity: 0.6; } }

/* Avatar — NO rotating ring, just a clean framed photo */
.hero-avatar {
    position: relative;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 4 / 5;
    margin: 0 auto;
    border-radius: var(--radius);
    overflow: hidden;
    border: 0;
    background: transparent;
}

.hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05);
    transition: transform 0.6s var(--ease);
}

.hero-avatar:hover img { transform: scale(1.02); }

.hero-avatar::after {
    content: "";
    position: absolute;
    inset: auto 1rem 1rem auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--bg);
}

/* ---------- About ---------- */

.about .content h3 {
    font-size: 1.5rem;
    color: var(--text);
    margin-bottom: 1rem;
    font-weight: 600;
}

.about .content p { color: var(--muted); }
.about .content p.fst-italic { color: var(--text); font-style: normal !important; font-size: 1.125rem; line-height: 1.6; margin-bottom: 1.5rem; }

.about .content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.about .content ul li {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
}

.about .content ul li .bi-rounded-right { display: none !important; }

.about .content ul li strong {
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.about .content ul li strong::after { content: ""; }

.about-photo {
    width: 100%;
    border-radius: var(--radius) !important;
    border: 1px solid var(--border);
    object-fit: cover;
    max-height: 520px;
}

/* ---------- Skills — sleek horizontal bars ---------- */

.skills-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem 2rem;
    margin-top: 1rem;
}

.skill-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.skill-row .skill-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.875rem;
}

.skill-row .skill-name {
    color: var(--text);
    font-weight: 500;
}

.skill-row .skill-val {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--dim);
}

.skill-row .track {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.skill-row .fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transform-origin: left;
    animation: skillFill 1.2s var(--ease) forwards;
}

@keyframes skillFill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ---------- Resume timeline ---------- */

.resume-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 860px) { .resume-columns { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.resume-title {
    font-family: var(--font-mono);
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--dim) !important;
    margin: 0 0 1.5rem !important;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.timeline { display: flex; flex-direction: column; gap: 0; }

.resume-item {
    position: relative;
    padding: 1.25rem 0 1.5rem 1.5rem !important;
    border: none !important;
    border-left: 1px solid var(--border) !important;
    margin-left: 4px;
}

.resume-item::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 1.5rem;
    width: 9px;
    height: 9px;
    background: var(--bg);
    border: 2px solid var(--border-hi);
    border-radius: 50%;
    transition: border-color 0.15s var(--ease);
}

.resume-item:hover::before { border-color: var(--accent); }

.resume-item:last-child { border-left: none !important; padding-bottom: 0 !important; }
.resume-item:last-child::before { left: -4px; }

.resume-item h4 {
    font-size: 1rem !important;
    color: var(--text) !important;
    margin: 0 0 0.25rem !important;
    font-weight: 600;
    text-transform: none !important;
}

.resume-item h5 {
    display: inline-block;
    font-family: var(--font-mono) !important;
    font-size: 0.75rem !important;
    color: var(--dim) !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 0 0.75rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
}

.resume-item > p {
    color: var(--muted);
    font-size: 0.9375rem;
    margin: 0 0 0.5rem;
}

.resume-item ul {
    margin: 0.5rem 0 0;
    padding-left: 1rem;
    color: var(--muted);
    font-size: 0.9375rem;
}
.resume-item ul li { padding: 0.125rem 0; }

/* ---------- Projects grid ---------- */

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.project-card:hover {
    border-color: var(--border-hi);
    transform: translateY(-2px);
}

.project-card .thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.project-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--ease);
}

.project-card:hover .thumb img { transform: scale(1.03); }

.project-card .body {
    padding: 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.project-card .idx {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.project-card .name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-card .view {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted);
    padding: 0.375rem 0;
    transition: color 0.15s var(--ease), gap 0.15s var(--ease);
}

.project-card:hover .view { color: var(--accent); gap: 0.5rem; }

/* ---------- Contact ---------- */

.contact-map iframe {
    width: 100%;
    height: 260px;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    filter: grayscale(1) invert(0.92) contrast(0.85);
    margin-bottom: 2rem;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 860px) { .contact-layout { grid-template-columns: 320px 1fr; } }

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.contact-info .info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.contact-info .info-item:last-child { border-bottom: none; padding-bottom: 0; }

.contact-info .info-item h4 {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
    font-weight: 500;
}

.contact-info .info-item h4::before {
    content: attr(data-icon) "  ";
    color: var(--accent);
}

.contact-info .info-item p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text);
}

.contact-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
}

.contact-form .row-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (min-width: 560px) { .contact-form .row-2 { grid-template-columns: 1fr 1fr; } }

.contact-form .field label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem 0.875rem;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    transition: border-color 0.15s var(--ease);
    outline: none;
}

.contact-form textarea { min-height: 140px; resize: vertical; }

.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--accent); }

.contact-form .error {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    min-height: 0.9rem;
}

.contact-form button[type="submit"] {
    margin-top: 1.25rem;
    padding: 0.75rem 1.25rem;
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s var(--ease);
}

.contact-form button[type="submit"]:hover { background: var(--accent-hi); }

/* ---------- Footer ---------- */

#footer {
    background: var(--bg) !important;
    border-top: 1px solid var(--border);
    padding: 2rem 0 !important;
    margin-top: 6rem;
}

#footer .container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

#footer small,
#footer a {
    color: var(--dim) !important;
    font-size: 0.75rem !important;
}

#footer a:hover { color: var(--text) !important; }

#footer strong { color: var(--text) !important; background: none !important; padding: 0 !important; }

#footer form input[type=submit] {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--dim) !important;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-xs);
    cursor: pointer;
}
#footer form input[type=submit]:hover { color: var(--text) !important; border-color: var(--border-hi); }

/* ---------- Back-to-top ---------- */

.back-to-top {
    width: 40px !important;
    height: 40px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border-hi) !important;
    color: var(--text) !important;
    box-shadow: none !important;
    transition: background 0.15s var(--ease);
}
.back-to-top:hover { background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; }
.back-to-top i::before { color: inherit !important; }

/* ---------- Preloader ---------- */

#preloader { background: var(--bg) !important; }
#preloader::before {
    border-top-color: var(--accent) !important;
    border-bottom-color: var(--accent) !important;
    border-left-color: var(--border) !important;
    border-right-color: var(--border) !important;
}

/* ---------- Admin tables (preserved Bootstrap look, dark-skinned) ---------- */

.table,
table.dataTable {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
    border-radius: var(--radius);
    overflow: hidden;
}

.table thead th,
table.dataTable thead th {
    background: var(--bg-elev) !important;
    color: var(--muted) !important;
    border-color: var(--border) !important;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.table tbody td,
table.dataTable tbody td { border-color: var(--border) !important; }

.table tbody tr:hover,
table.dataTable tbody tr:hover { background: var(--surface-hi) !important; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
}

.dataTables_wrapper, .dataTables_info, .dataTables_paginate {
    color: var(--muted) !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
    border-color: var(--accent) !important;
}

/* Form controls (admin CRUD pages) */
.form-control,
.form-select {
    background: var(--bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px rgba(190, 242, 100, 0.2) !important;
    background: var(--bg) !important;
    color: var(--text) !important;
}

.form-label,
label { color: var(--muted); }

/* ---------- Kill legacy iPortfolio visual noise ---------- */

#hero:before { display: none !important; }
.pointer, #parallax .pointer { display: none !important; }
#preloader { z-index: 999; }
#mobIMG br { display: none; }

/* Reveal on scroll — only fade-up, subtle */
[data-aos] { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }

/* =====================================================================
   Admin / CRUD page dark skin
   Covers everything the scaffolded Bootstrap views throw at us so that
   Education, Experience, Contacts, Projects, Skills, etc. match the
   rest of the site without rewriting each view individually.
   --------------------------------------------------------------------- */

/* Kill the stray Bootstrap white body on CRUD pages */
section .container-fluid,
section .container,
main .container-fluid,
main .container {
    background: transparent !important;
    color: var(--text);
}

/* Admin section headers — the scaffolded <h1>Index</h1> / <h1>Create</h1>
   becomes a small monospace label. The <h4>EDUCATION</h4> underneath
   becomes the real visible title. */
section > .container-fluid > h1:first-of-type,
section > .container > h1:first-of-type {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--dim);
    margin: 0 0 0.5rem;
}

section h4 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
    margin: 0 0 1.25rem;
}

section h3 { color: var(--text); font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; }

/* Horizontal rule */
hr {
    border: 0 !important;
    border-top: 1px solid var(--border) !important;
    margin: 1.5rem 0;
    opacity: 1;
}

/* ---------- Bootstrap card ---------- */

.card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--text) !important;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}

.card:hover { border-color: var(--border-hi) !important; }

.card-body,
.card-header,
.card-footer {
    background: transparent !important;
    color: var(--text) !important;
    padding: 1.25rem 1.5rem;
}

.card-header,
.card-footer { border-color: var(--border) !important; }

.card-title { color: var(--text); font-weight: 600; }
.card-text  { color: var(--muted); }

/* ---------- Description lists (scaffolded Details / Delete / Index views) ---------- */

dl { margin: 0; }

dl.row {
    display: grid !important;
    grid-template-columns: 160px 1fr;
    gap: 0 1.25rem;
    margin: 0 !important;
}

dl.row > dt {
    flex: none;
    width: auto !important;
    max-width: none !important;
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid var(--border);
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

dl.row > dd {
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid var(--border);
    margin: 0 !important;
    color: var(--text);
    font-size: 0.9375rem;
    word-break: break-word;
}

dl.row > dd:last-of-type,
dl.row > dt:last-of-type { border-bottom: none; }

@media (max-width: 560px) {
    dl.row { grid-template-columns: 1fr; gap: 0; }
    dl.row > dt { border-bottom: 0; padding-bottom: 0 !important; }
    dl.row > dd { padding-top: 0.25rem !important; }
}

/* ---------- Forms (scaffolded Create / Edit) ---------- */

.form-group { margin-bottom: 1.125rem; }

.control-label,
label.control-label {
    display: block;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

.form-control,
.form-select,
input[type="text"]:not(.input-box),
input[type="email"]:not(.input-box),
input[type="number"],
input[type="date"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea:not(.input-box) {
    width: 100%;
    background: var(--bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.625rem 0.875rem !important;
    font-family: var(--font-sans) !important;
    font-size: 0.9375rem !important;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
    outline: none;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(190, 242, 100, 0.18) !important;
    background: var(--bg) !important;
    color: var(--text) !important;
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder { color: var(--faint); }

.form-control[readonly],
.form-control:disabled { background: var(--surface) !important; color: var(--muted) !important; }

.form-check-label { color: var(--muted); }
.form-check-input {
    background-color: var(--bg) !important;
    border-color: var(--border-hi) !important;
}
.form-check-input:checked {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

select.form-control,
select.form-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                      linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 1rem) center, calc(100% - 0.75rem) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2rem !important;
}

/* Validation */
.text-danger  { color: var(--danger) !important; font-size: 0.8125rem; }
.text-success { color: var(--success) !important; }
.text-info    { color: var(--accent-dim) !important; }
.text-warning { color: var(--accent) !important; }
.text-muted   { color: var(--muted) !important; }

.validation-summary-errors,
.field-validation-error,
.text-danger ul {
    color: var(--danger) !important;
    font-size: 0.8125rem;
}

.validation-summary-errors {
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}
.validation-summary-errors ul { margin: 0; padding-left: 1.25rem; }

/* ---------- Button variants ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease), transform 0.15s var(--ease);
    text-decoration: none !important;
}

.btn + .btn { margin-left: 0.375rem; }

.btn.btn-primary,
input[type="submit"].btn-primary {
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
    border-color: var(--accent) !important;
}
.btn.btn-primary:hover { background: var(--accent-hi) !important; color: var(--accent-ink) !important; transform: translateY(-1px); }

.btn.btn-warning {
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
    border-color: var(--accent) !important;
}
.btn.btn-warning:hover { background: var(--accent-hi) !important; color: var(--accent-ink) !important; }

.btn.btn-info,
.btn.btn-secondary {
    background: transparent !important;
    color: var(--text) !important;
    border-color: var(--border-hi) !important;
}
.btn.btn-info:hover,
.btn.btn-secondary:hover {
    background: var(--surface) !important;
    border-color: var(--text) !important;
    color: var(--text) !important;
}

.btn.btn-danger,
input[type="submit"].btn-danger {
    background: transparent !important;
    color: var(--danger) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}
.btn.btn-danger:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: var(--danger) !important;
    color: var(--danger) !important;
}

.btn.btn-success {
    background: transparent !important;
    color: var(--success) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
}
.btn.btn-success:hover { background: rgba(34, 197, 94, 0.1) !important; border-color: var(--success) !important; }

.btn.btn-default,
input[type="submit"].btn-default {
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
    border-color: var(--accent) !important;
}

input[type="submit"]:not(.btn):not([class*="btn-"]) {
    background: var(--accent);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}
input[type="submit"]:not(.btn):not([class*="btn-"]):hover { background: var(--accent-hi); }

/* ---------- Inline text links inside admin sections ---------- */

main section a:not(.btn):not(.nav-link):not(.logo):not(.view):not(.back-to-top):not(.hero-actions *):not(.header-social-links *):not(.project-card *) {
    color: var(--accent-dim);
    text-decoration: none;
    border-bottom: 1px dashed rgba(190, 242, 100, 0.35);
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

main section a:not(.btn):not(.nav-link):not(.logo):not(.view):not(.back-to-top):not(.hero-actions *):not(.header-social-links *):not(.project-card *):hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ---------- Alerts ---------- */

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}

.alert-primary { border-color: rgba(190, 242, 100, 0.3); background: rgba(190, 242, 100, 0.06); color: var(--accent); }
.alert-success { border-color: rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.08); color: var(--success); }
.alert-danger  { border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.08); color: var(--danger); }
.alert-warning { border-color: rgba(234, 179, 8, 0.3); background: rgba(234, 179, 8, 0.08); color: #eab308; }
.alert-info    { border-color: var(--border); background: var(--surface); color: var(--muted); }

/* ---------- Pagination (X.PagedList + Bootstrap) ---------- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination > li > a,
.pagination > li > span {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: var(--surface);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.pagination > li > a:hover {
    background: var(--surface-hi);
    color: var(--text);
    border-color: var(--border-hi);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > li.active > a {
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
    border-color: var(--accent) !important;
}

.pagination > .disabled > a,
.pagination > .disabled > span {
    opacity: 0.35;
    cursor: not-allowed;
    background: transparent;
}

/* ---------- Small badge/thumbnail helpers used by scaffolded markup ---------- */

.img-thumbnail {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 4px;
}

.badge { background: var(--surface-hi); color: var(--text); font-weight: 500; padding: 0.25rem 0.5rem; border-radius: var(--radius-xs); }

/* ---------- Ensure section padding sanity on admin CRUD pages ---------- */

main section .container-fluid.p-5 {
    padding: 2.5rem 1.5rem !important;
}
@media (min-width: 860px) { main section .container-fluid.p-5 { padding: 3.5rem 2rem !important; } }

/* Identity (login/register) area — kill scaffolded light styles */
.navbar-light,
.bg-light,
.bg-white { background: var(--surface) !important; color: var(--text) !important; }

.text-dark { color: var(--text) !important; }

.shadow,
.shadow-sm,
.shadow-lg { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2) !important; }

/* Login/Register card hard-coded beige backgrounds */
.custom-form-section,
.custom-login-section .custom-form-section {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
}

.custom-form-section h1,
.custom-login-section h1 { color: var(--text) !important; }

.input-container .input-box,
.input-container input.form-control {
    background: var(--bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-hi) !important;
}

.input-container label,
.input-container .form-label {
    color: var(--muted) !important;
}

.eye-icon { color: var(--muted) !important; }
.eye-icon:hover { color: var(--accent) !important; }

/* Bootstrap table variants used in Logs */
.table-bordered > :not(caption) > *,
.table-bordered > :not(caption) > * > * {
    border-color: var(--border) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: var(--bg-elev) !important;
    color: var(--text) !important;
}
.table-hover > tbody > tr:hover > * {
    background: var(--surface-hi) !important;
    color: var(--text) !important;
}

/* `btn-sm` size reduction already inherited, but ensure sizing */
.btn.btn-sm,
.btn-sm { padding: 0.3rem 0.65rem !important; font-size: 0.75rem !important; }
.btn-lg { padding: 0.7rem 1.25rem !important; font-size: 0.9375rem !important; }

/* Custom classes used in Logs view */
.btn-add { background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; }
.btn-add:hover { background: var(--accent-hi) !important; }
.custom_title h4,
.card-title h4 { color: var(--text) !important; font-weight: 600; font-size: 1.125rem; }

/* Bootstrap row-variant `.info` used in some tables */
tr.info, tr.info > * {
    background: var(--bg-elev) !important;
    color: var(--muted) !important;
}

/* PendingIndex red highlight kept for attention */
#navbar a[style*="color:red"],
#navbar a[style*="color: red"] {
    color: var(--danger) !important;
}

/* Generic container in Identity body wrapper */
body > div.container { padding-top: 0; }

/* Log status labels ("Info Logs" shown in green) */
section.content .card h4[style*="green"] { color: var(--success) !important; }

/* Validation input outline — red when invalid */
.input-validation-error,
input.input-validation-error,
textarea.input-validation-error {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18) !important;
}

/* ---------- Hard overrides for the legacy beige palette ----------
   site.css used to force #e9e8e6 on .myContainer and every input. Even
   though site.css is now empty, keep these defensively in case the
   template is reintroduced or a scaffolded view sets its own bg. */

.myContainer,
.myContainer > *:not(section):not(main):not(footer):not(header) { background: transparent !important; }

main, #main, main > section, #main > section,
section .container, section .container-fluid {
    background: transparent !important;
}

/* File inputs — browser default is bright white */
input[type="file"],
.form-control-file {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--bg) !important;
    color: var(--muted) !important;
    border: 1px dashed var(--border-hi) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.8125rem !important;
    cursor: pointer;
    transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}

input[type="file"]:hover,
.form-control-file:hover {
    border-color: var(--accent) !important;
    background: var(--surface) !important;
}

input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button {
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    border-radius: var(--radius-xs);
    padding: 0.35rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    margin-right: 0.75rem;
    transition: background 0.15s var(--ease);
}

input[type="file"]::-webkit-file-upload-button:hover,
input[type="file"]::file-selector-button:hover {
    background: var(--accent-hi);
}

/* Images inside forms should not carry Bootstrap's .img-thumbnail white bg */
.img-fluid,
.img-thumbnail {
    background: var(--bg) !important;
    border-color: var(--border) !important;
}

/* iPortfolio contact.info forced #fff — belt-and-braces override */
.contact .info,
.contact .php-email-form { background: var(--surface) !important; color: var(--text) !important; }

/* iPortfolio pointer colour dots (already hidden but just in case) */
.pointer { display: none !important; }

/* Legacy input-container floating-label widget (Login page + Home contact) */
.input-container { position: relative; margin: 10px 0 !important; }
.input-container .input-box,
.input-container input.form-control {
    width: 100%;
    padding: 0.75rem 0.875rem !important;
    background: var(--bg) !important;
    border: 1px solid var(--border-hi) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
}
.input-container .input-box:focus,
.input-container input:focus { border-color: var(--accent) !important; background: var(--bg) !important; }
.input-container label,
.input-container .form-label {
    position: absolute;
    top: 0.75rem;
    left: 0.875rem;
    background: var(--bg) !important;
    padding: 0 0.375rem !important;
    color: var(--muted) !important;
    pointer-events: none;
    transition: all 0.2s var(--ease);
    font-size: 0.875rem;
}
.input-container .input-box:focus + label,
.input-container .input-box:valid + label,
.input-container input:focus + label,
.input-container input:not(:placeholder-shown) + label {
    top: -0.5rem;
    left: 0.625rem;
    font-size: 0.7rem;
    color: var(--accent) !important;
}

/* Inline styled labels (e.g. MY_PROFILE/Edit has <style>label{font-weight:bold}</style>) */
main section label[style*="bold"],
main section form label { color: var(--muted) !important; font-weight: 500 !important; }

/* CV Viewer iframe — kill browser default white */
iframe { background: var(--bg) !important; color-scheme: dark; }

/* Any stray container with direct #fff background */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background:white"],
[style*="background-color:white"] {
    background: var(--surface) !important;
}

/* =====================================================================
   Admin / CRUD view components (clean, reusable)
   Used by rewritten Index/Create/Edit/Delete/Details views.
   --------------------------------------------------------------------- */

.admin-page { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem; }
.admin-page.narrow { max-width: 640px; }
.admin-page.wide   { max-width: 1120px; }

.admin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.admin-head .eyebrow { margin-bottom: 0.375rem; }

.admin-head h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.02em;
}

.admin-head .sub {
    display: block;
    color: var(--muted);
    font-size: 0.9375rem;
    margin-top: 0.25rem;
}

.admin-head.center { text-align: center; justify-content: center; flex-direction: column; }

/* Admin table */
.admin-table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.admin-table thead th {
    padding: 0.75rem 1rem;
    background: var(--bg-elev);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.admin-table tbody td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}

.admin-table tbody tr:last-child td { border-bottom: none; }

.admin-table tbody tr {
    transition: background 0.15s var(--ease);
}
.admin-table tbody tr:hover { background: var(--surface-hi); }

.admin-table .thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--bg);
    display: block;
}

.admin-table .actions {
    display: flex;
    gap: 0.375rem;
    justify-content: flex-end;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    text-decoration: none !important;
    transition: all 0.15s var(--ease);
    font-size: 0.9rem;
    cursor: pointer;
}

.action-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(190, 242, 100, 0.06);
}

.action-btn.danger:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.08);
}

.empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    background: var(--surface);
    border: 1px dashed var(--border-hi);
    border-radius: var(--radius);
}

/* Admin form */
.admin-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
}

.admin-form .field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.125rem;
}

.admin-form .field label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dim);
}

.admin-form .field input:not([type="file"]):not([type="checkbox"]):not([type="submit"]):not([type="hidden"]),
.admin-form .field textarea,
.admin-form .field select {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
    outline: none;
}

.admin-form .field input:focus,
.admin-form .field textarea:focus,
.admin-form .field select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(190, 242, 100, 0.15);
}

.admin-form .field textarea { min-height: 120px; resize: vertical; }

.admin-form .field .err,
.admin-form .field .field-validation-error,
.admin-form .field .text-danger { color: var(--danger); font-size: 0.75rem; }

.admin-form .preview {
    display: inline-block;
    max-width: 200px;
    height: auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg);
    padding: 4px;
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.form-actions.center { justify-content: center; }

.btn-danger-solid {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    background: var(--danger);
    color: #fff !important;
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s var(--ease), transform 0.15s var(--ease);
    text-decoration: none !important;
}
.btn-danger-solid:hover { background: #dc2626; transform: translateY(-1px); color: #fff !important; }

/* Admin details (read-only) */
.admin-details {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
}

.admin-details .row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0 1.5rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border);
    margin: 0 !important;
}
.admin-details .row:last-child { border-bottom: none; }

.admin-details .row .k {
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-top: 0.25rem;
}

.admin-details .row .v {
    color: var(--text);
    font-size: 0.9375rem;
    word-break: break-word;
}

@media (max-width: 640px) {
    .admin-details .row { grid-template-columns: 1fr; gap: 0.125rem; }
    .admin-table thead { display: none; }
    .admin-table tbody td { display: block; padding: 0.5rem 1rem; }
    .admin-table tbody tr { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
    .admin-table .actions { justify-content: flex-start; padding-top: 0.75rem !important; }
}

/* Message/status banner used by PendingIndex */
.danger-banner {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: var(--danger);
    padding: 0.625rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    margin-bottom: 1rem;
}

/* Message count pill in navbar */
#navbar a[href*="PendingIndex"] span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    background: var(--danger);
    color: #fff;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    margin-left: 0.375rem;
}

/* Sweet alert 2 dark theme nudge */
.swal2-popup {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius) !important;
}
.swal2-title, .swal2-html-container { color: var(--text) !important; }
.swal2-actions button.swal2-confirm {
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
}
.swal2-actions button.swal2-cancel {
    background: transparent !important;
    color: var(--text) !important;
    border: 1px solid var(--border-hi) !important;
}