: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 header ---------- */
.board-header { display: flex; align-items: center; justify-content: space-between; }
.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; }

/* ---------- 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, keep gentle one-shot entrances but stop the looping
   effects (blink, shimmer) that can be distracting. */
@media (prefers-reduced-motion: reduce) {
    .becky-eye.blink svg,
    .board-brand span,
    .login-title span {
        animation: none !important;
    }
}