:root {
    --bg: #0a0a0f;
    --surface: #14141c;
    --surface-2: #1d1d29;
    --border: #2a2a3a;
    --text: #f2f2f7;
    --muted: #9a9ab0;
    --accent: #f4231a;
    --accent-2: #ff8a1e;

    --pos-noun: #22d3ee;      /* cyan */
    --pos-verb: #ff4bd8;      /* magenta */
    --pos-adjective: #a3e635; /* lime */
    --pos-adverb: #fbbf24;    /* amber */
    --pos-phrase: #b14bff;    /* violet */
    --pos-other: #64748b;     /* slate */
}

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 17px;
    margin: 0;
}

a { color: var(--accent-2); }

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

/* ---------- Login ---------- */
.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(1200px 600px at 20% -10%, rgba(244,35,26,.28), transparent),
        radial-gradient(1000px 500px at 100% 100%, rgba(255,138,30,.20), transparent),
        var(--bg);
}
.login-card {
    width: min(360px, 90vw);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.login-title { margin: 0; font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; }
.login-title span { color: var(--accent); }
.login-sub { margin: 0 0 .5rem; color: var(--muted); font-size: .9rem; }
.login-input, .login-btn {
    padding: .7rem .9rem; border-radius: 10px; font-size: 1rem;
}
.login-input {
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
.login-input:focus { outline: 2px solid var(--accent); }
.login-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; border: 0; font-weight: 700; cursor: pointer;
}
.login-error { color: #ff6b6b; font-size: .85rem; }

/* ---------- Board layout (sidebar + main) ---------- */
.board-layout { display: flex; align-items: flex-start; gap: 1.5rem; }
.sidebar {
    width: 270px; flex: 0 0 270px; position: sticky; top: 1.5rem;
    max-height: calc(100vh - 3rem); overflow-y: auto;
    transition: width .22s ease, flex-basis .22s ease, opacity .18s ease, margin .22s ease;
}
.board-layout.sidebar-collapsed .sidebar {
    width: 0; flex-basis: 0; opacity: 0; margin-left: -1.5rem; overflow: hidden; pointer-events: none;
}
.board-main { flex: 1 1 auto; min-width: 0; }
.sidebar-toggle {
    background: none; border: 1px solid var(--border); color: var(--muted);
    font-size: 1.1rem; line-height: 1; padding: .35rem .6rem; border-radius: 8px; cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.sidebar-toggle:hover { color: var(--text); border-color: var(--accent); }
.sidebar-scrim { display: none; }

/* ---------- Phones / touch ---------- */
@media (max-width: 800px) {
    .app-main { padding: .9rem; }
    .board-layout { gap: 0; }
    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 940;
        width: 84vw; max-width: 320px; flex-basis: auto; margin: 0;
        background: var(--bg); padding: 1rem; overflow-y: auto; max-height: 100vh;
        box-shadow: 0 0 40px rgba(0,0,0,.6);
        transform: translateX(0); transition: transform .22s ease; opacity: 1;
    }
    .sidebar-collapsed .sidebar { transform: translateX(-105%); width: 84vw; opacity: 1; margin: 0; pointer-events: none; }
    .sidebar-open .sidebar { transform: translateX(0); pointer-events: auto; }
    .sidebar-open .sidebar-scrim {
        display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 935;
    }
    .board-main { width: 100%; }
    .card-grid { grid-template-columns: 1fr !important; }
    .card-pt { font-size: 1.4rem; }
    .quick-input { font-size: 1.05rem; }
    /* Larger tap targets */
    .mini { font-size: 1.35rem; padding: .1rem .25rem; }
}

/* ---------- Board header ---------- */
.board-header { display: flex; align-items: center; gap: .8rem; }
.board-header .logout-form { margin-left: auto; }
.board-brand { font-size: 1.5rem; font-weight: 800; margin: 0; display: inline-flex; align-items: center; gap: .5rem; }
.board-brand span { color: var(--accent); }
.login-card .becky-eye { align-self: center; margin-bottom: .25rem; }
.ghost-btn {
    background: none; border: 1px solid var(--border); color: var(--muted);
    padding: .4rem .7rem; border-radius: 8px; cursor: pointer;
}
.ghost-btn:hover { color: var(--text); border-color: var(--accent); }
.empty-hint { color: var(--muted); margin-top: 2rem; }
.empty-hint.welcome {
    display: flex; flex-direction: column; align-items: center; gap: .75rem;
    text-align: center; margin-top: 3rem;
}
.empty-hint.welcome p { margin: 0; max-width: 360px; }

/* ---------- Confirmation modal (top-level overlay) ---------- */
.confirm-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
    display: grid; place-items: center; z-index: 1000; padding: 1rem;
    animation: confirm-fade .18s ease both;
}
.confirm-box {
    width: min(420px, 92vw); background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; padding: 1.4rem; box-shadow: 0 30px 80px rgba(0,0,0,.6);
    animation: confirm-pop .26s cubic-bezier(.2,.9,.3,1) both;
}
.confirm-box h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.confirm-box p { margin: 0 0 1.2rem; color: var(--muted); line-height: 1.5; }
.confirm-box strong { color: var(--text); }
.confirm-actions { display: flex; justify-content: flex-end; gap: .6rem; }
.danger-btn {
    background: #b91c1c; border: 0; color: #fff; font-weight: 700;
    padding: .55rem 1.1rem; border-radius: 9px; cursor: pointer;
    transition: transform .12s ease, filter .2s ease;
}
.danger-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
@keyframes confirm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirm-pop {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Card toolbar ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; align-items: center; }
.tb-search { flex: 1 1 240px; }
.toolbar input, .toolbar select {
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
    border-radius: 8px; padding: .5rem .6rem; font-family: inherit;
}
.tb-add {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border: 0; color: #fff; font-weight: 700; padding: .5rem .9rem; border-radius: 8px; cursor: pointer;
}

/* ---------- Card tile ---------- */
.card-tile {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 5px solid var(--tile);
    border-radius: 14px; padding: 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .55rem;
    box-shadow: 0 0 0 1px rgba(255,255,255,.02), 0 8px 24px rgba(0,0,0,.35);
}
.card-top { display: flex; justify-content: space-between; align-items: start; gap: .5rem; }
.card-pt { font-size: 1.6rem; font-weight: 700; line-height: 1.15; }
.article { color: var(--tile); font-style: italic; margin-right: .3rem; opacity: .95; }
.card-en { color: var(--muted); font-size: 1.2rem; }
.card-ex { font-size: 1rem; color: var(--text); opacity: .8; font-style: italic; }
.card-notes { font-size: .95rem; color: var(--muted); white-space: pre-wrap; }
.card-foot { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; align-items: center; }
.pos-chip { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.tag-chip {
    font-size: .72rem; background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 999px; padding: .05rem .5rem; color: var(--muted);
}
.card-actions { display: flex; gap: .3rem; }
.mini {
    background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1.15rem;
    transition: transform .15s ease, color .15s ease;
}
.mini:hover { color: var(--text); transform: scale(1.25); }

/* ============ Animations & transitions ============ */

/* Header drops in on page load */
.board-header { animation: gg-drop .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes gg-drop {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Board content fades/slides in on load and on island (tab) change */
.board-fade { animation: board-in .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: .06s; }
@keyframes board-in {
    from { opacity: 0; transform: translateY(16px) scale(.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Card entrance + hover lift/glow */
.card-tile {
    animation: card-in .44s cubic-bezier(.22,1.15,.3,1) both;
    transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-tile:hover {
    transform: translateY(-5px);
    border-color: var(--tile);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tile) 40%, transparent),
                0 14px 34px rgba(0,0,0,.5),
                0 0 22px color-mix(in srgb, var(--tile) 25%, transparent);
}
@keyframes card-in {
    0%   { opacity: 0; transform: translateY(16px) scale(.94); }
    60%  { opacity: 1; transform: translateY(-2px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Staggered cascade for the first cards on load (cards may be wrapped for drag) */
.card-grid > *:nth-child(1)  .card-tile { animation-delay: .02s; }
.card-grid > *:nth-child(2)  .card-tile { animation-delay: .06s; }
.card-grid > *:nth-child(3)  .card-tile { animation-delay: .10s; }
.card-grid > *:nth-child(4)  .card-tile { animation-delay: .14s; }
.card-grid > *:nth-child(5)  .card-tile { animation-delay: .18s; }
.card-grid > *:nth-child(6)  .card-tile { animation-delay: .22s; }
.card-grid > *:nth-child(7)  .card-tile { animation-delay: .26s; }
.card-grid > *:nth-child(8)  .card-tile { animation-delay: .30s; }
.card-grid > *:nth-child(n+9) .card-tile { animation-delay: .34s; }

/* Article badge pop */
.article { display: inline-block; animation: article-pop .32s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes article-pop {
    0%   { opacity: 0; transform: scale(.4) rotate(-8deg); }
    60%  { opacity: 1; transform: scale(1.2) rotate(2deg); }
    100% { transform: scale(1) rotate(0); }
}

/* Chips */
.pos-chip, .tag-chip { transition: transform .15s ease, box-shadow .2s ease; }
.tag-chip:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--text); }

/* Buttons */
.tb-add, .login-btn, .ghost-btn { transition: transform .12s ease, box-shadow .22s ease, filter .2s ease, border-color .2s ease, color .2s ease; }
.tb-add:hover, .login-btn:hover {
    transform: translateY(-2px);
    filter: saturate(1.15) brightness(1.06);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent);
}
.tb-add:active, .login-btn:active { transform: translateY(0) scale(.98); }

/* Toolbar focus glow */
.toolbar input:focus, .toolbar select:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Brand shimmer */
.board-brand span, .login-title span {
    background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: brand-shimmer 5s linear infinite;
}
@keyframes brand-shimmer {
    to { background-position: 200% center; }
}

/* Login card entrance */
.login-card { animation: modal-in .4s cubic-bezier(.2,.8,.2,1) both; }

@keyframes modal-in {
    from { opacity: 0; transform: translateY(18px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* For reduced-motion, stop the brand shimmer but keep the entrances and the
   Becky eye blink (the blink is wanted on all devices). */
@media (prefers-reduced-motion: reduce) {
    .board-brand span,
    .login-title span {
        animation: none !important;
    }
}