/* ─────────────────────────────────────────────
   WIN SHEIN's Diary — Admin Login
   Aesthetic: Soft Editorial × Dark Forest
   Font: Cormorant Garamond (display) + DM Sans (UI)
───────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Design Tokens ── */
:root {
    --bg-dark:        #0d1117;
    --glass-bg:       rgba(255, 255, 255, 0.04);
    --glass-border:   rgba(255, 255, 255, 0.08);
    --glass-hover:    rgba(255, 255, 255, 0.07);

    --accent-gold:    #c9a96e;
    --accent-muted:   rgba(201, 169, 110, 0.15);
    --accent-glow:    rgba(201, 169, 110, 0.25);

    --text-primary:   #f0ebe3;
    --text-secondary: rgba(240, 235, 227, 0.5);
    --text-hint:      rgba(240, 235, 227, 0.35);

    --error-bg:       rgba(220, 80, 80, 0.08);
    --error-border:   rgba(220, 80, 80, 0.2);
    --error-text:     #e07070;

    --radius-card:    24px;
    --radius-input:   14px;
    --radius-btn:     14px;

    --shadow-card:    0 32px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--glass-border);
    --shadow-btn:     0 8px 32px rgba(201, 169, 110, 0.3);

    --transition:     0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'DM Sans', sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-dark);

    /* Forest background */
    background-image:
        /* Deep vignette overlay */
        radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.75) 100%),
        /* Warm color grade */
        linear-gradient(160deg, rgba(30, 20, 10, 0.6) 0%, rgba(5, 15, 10, 0.5) 100%),
        /* Photo */
        url('https://images.unsplash.com/photo-1518173959190-e591722ebc92?q=80&w=2000&auto=format&fit=crop');

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
}

/* Ambient noise grain */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

/* ── Card / Container ── */
.container {
    position: relative;
    z-index: 1;
    width: 400px;
    max-width: calc(100vw - 40px);
    padding: 48px 44px 40px;

    background: var(--glass-bg);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);

    border-radius: var(--radius-card);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-card);

    /* Entrance animation */
    animation: cardIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Gold accent top bar */
.container::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 60px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
    border-radius: 2px;
}

/* Subtle inner glow on the card */
.container::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-card);
    background: radial-gradient(ellipse at 50% 0%, rgba(201,169,110,0.06) 0%, transparent 65%);
    pointer-events: none;
}

/* ── Heading ── */
.container h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: 32px;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 8px;
    animation: fadeUp 0.6s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Italic sub-tagline via a sibling element — controlled via PHP template */
.container .tagline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 36px;
    animation: fadeUp 0.6s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Form Layout ── */
form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: fadeUp 0.6s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Input wrapper for icon support */
.input-wrap {
    position: relative;
}

.input-wrap svg {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-hint);
    pointer-events: none;
    transition: color var(--transition);
}

.input-wrap:focus-within svg {
    color: var(--accent-gold);
}

/* ── Inputs ── */
input[type="password"],
input[type="text"] {
    width: 100%;
    padding: 15px 18px 15px 46px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-input);
    color: var(--text-primary);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.03em;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

input[type="password"]:focus,
input[type="text"]:focus {
    outline: none;
    border-color: rgba(201, 169, 110, 0.4);
    background: var(--glass-hover);
    box-shadow: 0 0 0 3px var(--accent-muted), inset 0 1px 0 rgba(255,255,255,0.05);
}

input::placeholder {
    color: var(--text-hint);
    font-weight: 300;
}

/* ── Button ── */
button[type="submit"] {
    width: 100%;
    padding: 15px;
    margin-top: 4px;
    background: linear-gradient(135deg, #c9a96e 0%, #a07840 100%);
    border: none;
    border-radius: var(--radius-btn);
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(201, 169, 110, 0.45);
    filter: brightness(1.08);
}

button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: var(--shadow-btn);
}

/* ── Error Message ── */
.error {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error-text);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.02em;
    text-align: center;
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

/* ── Footer link ── */
.footer-link {
    text-align: center;
    margin-top: 28px;
    animation: fadeUp 0.6s 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.footer-link a {
    color: var(--text-hint);
    text-decoration: none;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.04em;
    transition: color var(--transition);
}

.footer-link a:hover {
    color: var(--accent-gold);
}

/* ── Shared fade-up animation ── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}