/* =====================================================
   ODJ — Design moderne sombre
   ===================================================== */

:root {
    --purple:    #9333ea;
    --purple-l:  #a855f7;
    --purple-d:  #7e22ce;
    --blue:      #3b82f6;
    --blue-d:    #1d4ed8;
    --pink:      #ec4899;
    --red:       #ef4444;
    --green:     #10b981;
    --amber:     #f59e0b;
    --cyan:      #06b6d4;
    --gray:      #64748b;

    --grad:      linear-gradient(135deg, #9333ea 0%, #3b82f6 50%, #ec4899 100%);
    --grad-btn:  linear-gradient(135deg, #7e22ce, #2563eb);

    --bg:        #07071a;
    --bg2:       #0d0d25;
    --surface:   rgba(255,255,255,0.04);
    --surface-h: rgba(255,255,255,0.08);
    --border:    rgba(255,255,255,0.08);
    --border-l:  rgba(147,51,234,0.35);

    --text:      #f1f5f9;
    --text-m:    #94a3b8;
    --text-d:    #64748b;

    --r:    12px;
    --r-lg: 20px;
    --r-xl: 28px;

    --sh:    0 4px 6px -1px rgba(0,0,0,.4),0 2px 4px -2px rgba(0,0,0,.3);
    --sh-lg: 0 20px 40px -8px rgba(0,0,0,.5);
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
}
a { color: var(--purple-l); text-decoration: none; transition: color .2s; }
a:hover { color: var(--pink); }
img { max-width: 100%; display: block; }
input,textarea,select,button { font-family: inherit; }

body::before {
    content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
    background:
        radial-gradient(ellipse 80% 60% at 15% 0%,rgba(147,51,234,.16) 0%, transparent 65%),
        radial-gradient(ellipse 60% 50% at 85% 15%,rgba(59,130,246,.12) 0%, transparent 65%),
        radial-gradient(ellipse 70% 60% at 50% 100%,rgba(236,72,153,.08) 0%, transparent 70%);
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; }
.main { min-height: calc(100vh - 72px - 80px); padding: 2rem 0 4rem; }

/* ---------- Navbar ---------- */
.navbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(7,7,26,.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    height: 72px;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display:flex; align-items:center; gap:.5rem; }
.brand-icon { font-size: 1.5rem; }
.brand-text {
    font-size: 1.2rem; font-weight: 800;
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-links { display:flex; align-items:center; gap:1rem; }
.nav-link { color: var(--text-m); font-weight: 500; transition: color .2s; }
.nav-link:hover { color: var(--text); }
.nav-create { color: var(--purple-l); }
.nav-admin  { color: var(--amber); }
.nav-sep { width: 1px; height: 24px; background: var(--border); margin: 0 .25rem; }
.nav-username { color: var(--text-m); font-size: .9rem; }
.nav-toggle { display: none; background:none; border:none; color: var(--text); cursor: pointer; }
.nav-toggle span { display:block;width:24px;height:2px;background:currentColor;margin:5px 0;transition:.3s; }

@media (max-width: 768px) {
    .nav-links { position:fixed; top:72px; right:0; bottom:0; width:280px;
                 background: var(--bg2); border-left:1px solid var(--border);
                 flex-direction: column; align-items: stretch; padding: 1.5rem;
                 transform: translateX(100%); transition: transform .3s; }
    .nav-links.open { transform: translateX(0); }
    .nav-toggle { display: block; }
    .nav-sep { display:none; }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .65rem 1.1rem; border-radius: var(--r);
    font-size: .95rem; font-weight: 600;
    border: 1px solid transparent; cursor: pointer;
    transition: all .2s; text-decoration: none; line-height: 1;
}
.btn-primary { background: var(--grad-btn); color: #fff; box-shadow: var(--sh); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--sh-lg); color:#fff; }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface-h); color: var(--text); }
.btn-ghost { background: transparent; color: var(--text-m); }
.btn-ghost:hover { background: var(--surface); color: var(--text); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #dc2626; color: #fff; }
.btn-success { background: var(--green); color: #fff; }
.btn-success:hover { background: #059669; color: #fff; }
.btn-sm { padding: .4rem .8rem; font-size: .85rem; }
.btn-lg { padding: .9rem 1.5rem; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }
.btn[disabled],.btn:disabled { opacity:.5;cursor:not-allowed;transform:none!important; }

/* ---------- Forms ---------- */
.form-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 2rem;
    backdrop-filter: blur(10px);
}
.form-title { font-size: 1.5rem; font-weight: 800; margin-bottom: .5rem; }
.form-subtitle { color: var(--text-m); margin-bottom: 1.5rem; }
.form-group { margin-bottom: 1.1rem; }
.form-label { display:block; font-size:.9rem; font-weight:600; margin-bottom:.5rem; color: var(--text-m); }
.form-control {
    width: 100%; padding: .75rem 1rem;
    background: var(--bg2); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--r);
    font-size: .95rem; transition: border-color .2s, background .2s;
}
.form-control:focus {
    outline: none; border-color: var(--purple);
    background: rgba(147,51,234,.07);
}
textarea.form-control { resize: vertical; min-height: 80px; }
select.form-control,
select.subject-status-pick,
select.invite-role { color-scheme: dark; }
select.form-control option,
select.subject-status-pick option,
select.invite-role option {
    background: #0d0d25;
    color: #f1f5f9;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }
.form-hint { color: var(--text-d); font-size: .85rem; margin-top: .35rem; }
.form-check { display:flex; align-items:center; gap:.5rem; color: var(--text-m); }

/* ---------- Alerts ---------- */
.alert {
    padding: .85rem 1rem; border-radius: var(--r);
    margin-bottom: 1rem; display:flex; align-items:center; gap:.5rem;
    border: 1px solid;
}
.alert-success { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.4); color: #6ee7b7; }
.alert-error,.alert-danger { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.4); color: #fca5a5; }
.alert-warning { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.4); color: #fcd34d; }
.alert-info    { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.4); color: #93c5fd; }
.alert-close { margin-left:auto; background:none; border:none; color:inherit; cursor:pointer; font-size:1.1rem; opacity:.7; }

/* ---------- Page title ---------- */
.page-title {
    font-size: 2rem; font-weight: 800; margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.grad-text {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.page-subtitle { color: var(--text-m); margin-top: -.5rem; margin-bottom: 1.5rem; }
.text-muted { color: var(--text-m); }
.text-center { text-align: center; }
.section-title { font-size: 1.2rem; font-weight: 700; margin: 1.5rem 0 1rem;
                 display:flex; align-items:center; gap:.5rem; }
.divider { border:none; border-top: 1px solid var(--border); margin: 1.5rem 0; }

/* ---------- Cards ---------- */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 1.25rem;
    transition: transform .2s, border-color .2s, background .2s;
    backdrop-filter: blur(10px);
}
.card:hover { border-color: var(--border-l); }
.card-link { display: block; color: inherit; }
.card-link:hover { color: inherit; transform: translateY(-2px); }
.card-title { font-size: 1.1rem; font-weight: 700; margin-bottom:.35rem; }
.card-meta { color: var(--text-m); font-size: .9rem; }

.event-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.event-card .card-title { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.event-card .card-date { color: var(--purple-l); font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.event-card .card-loc  { color: var(--text-m); font-size: .85rem; margin-top:.5rem; }

/* ---------- Badges ---------- */
.badge {
    display: inline-block; padding: .2rem .55rem; border-radius: 999px;
    font-size: .75rem; font-weight: 700; line-height: 1.4;
    border: 1px solid transparent;
}
.badge-open       { background: rgba(59,130,246,.15);  color: #93c5fd; border-color: rgba(59,130,246,.35); }
.badge-progress   { background: rgba(245,158,11,.15);  color: #fcd34d; border-color: rgba(245,158,11,.35); }
.badge-closed     { background: rgba(16,185,129,.15);  color: #6ee7b7; border-color: rgba(16,185,129,.35); }
.badge-deferred   { background: rgba(148,163,184,.15); color: #cbd5e1; border-color: rgba(148,163,184,.35); }
.badge-cancelled  { background: rgba(239,68,68,.12);   color: #fca5a5; border-color: rgba(239,68,68,.35); }
.badge-role       { background: var(--surface); color: var(--text-m); border-color: var(--border); }
.badge-creator    { background: rgba(147,51,234,.18); color: #d8b4fe; border-color: rgba(147,51,234,.4); }
.badge-editor     { background: rgba(59,130,246,.15); color: #93c5fd; border-color: rgba(59,130,246,.35); }
.badge-reader     { background: var(--surface); color: var(--text-m); border-color: var(--border); }
.badge-upcoming   { background: rgba(59,130,246,.15);  color: #93c5fd; border-color: rgba(59,130,246,.35); }
.badge-ongoing    { background: rgba(245,158,11,.15);  color: #fcd34d; border-color: rgba(245,158,11,.35); }
.badge-archived   { background: rgba(148,163,184,.15); color: #cbd5e1; border-color: rgba(148,163,184,.35); }

/* ---------- Author colors (per event editor) ---------- */
.author-c1 { --author-c: #a855f7; } /* violet */
.author-c2 { --author-c: #06b6d4; } /* cyan */
.author-c3 { --author-c: #f59e0b; } /* amber */
.author-c4 { --author-c: #10b981; } /* green */
.author-c5 { --author-c: #ec4899; } /* pink */
.author-c6 { --author-c: #ef4444; } /* red */
.author-c7 { --author-c: #3b82f6; } /* blue */
.author-c8 { --author-c: #14b8a6; } /* teal */
.author-unknown { --author-c: #64748b; } /* gray */

.author-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .15rem .55rem; border-radius: 999px;
    font-size: .78rem; font-weight: 600;
    background: color-mix(in srgb, var(--author-c) 14%, transparent);
    color: var(--author-c);
    border: 1px solid color-mix(in srgb, var(--author-c) 45%, transparent);
}
.author-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--author-c);
}
.author-legend {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    margin-bottom: 1rem; padding: .6rem .85rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r);
}
.author-legend-label { color: var(--text-m); font-size: .85rem; font-weight: 600; margin-right: .25rem; }

/* ---------- Subjects list ---------- */
.subjects { display: flex; flex-direction: column; gap: .75rem; }
.subject {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 1rem 1rem 1rem 1rem;
    display: flex; gap: .75rem;
    transition: border-color .2s;
    border-left: 4px solid var(--author-c, var(--border));
}
.subject:hover { border-color: var(--border-l); }
.subject.is-closed { opacity: .75; }
.subject-handle {
    cursor: grab; color: var(--text-d); font-size: 1.2rem;
    user-select: none; padding-top: .3rem;
}
.subject-handle:active { cursor: grabbing; }
.subject-body { flex: 1; min-width: 0; }
.subject-title {
    font-weight: 700; font-size: 1.05rem; margin-bottom: .25rem;
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.subject-meta { color: var(--text-m); font-size: .85rem; margin-bottom: .5rem; }
.subject-details { color: var(--text-m); font-size: .9rem; white-space: pre-wrap; }
.subject-actions { display: flex; gap: .35rem; flex-wrap: wrap; align-items: flex-start; }
.subject-status-pick {
    background: var(--bg2); color: var(--text); border: 1px solid var(--border);
    padding: .35rem .55rem; border-radius: var(--r);
    font-size: .8rem;
}

.subject-closure {
    margin-top: .75rem; padding: .75rem;
    background: rgba(16,185,129,.05); border: 1px solid rgba(16,185,129,.2);
    border-radius: var(--r); font-size: .9rem;
}
.subject-closure h4 { font-size: .85rem; color: #6ee7b7; margin-bottom: .35rem; font-weight: 700; }
.closure-photos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.closure-photos a {
    display: block; width: 80px; height: 80px;
    background-size: cover; background-position: center;
    border-radius: var(--r); border: 1px solid var(--border);
}

/* ---------- Empty state ---------- */
.empty {
    text-align: center; padding: 3rem 1rem;
    color: var(--text-m); border: 1px dashed var(--border);
    border-radius: var(--r-lg);
}
.empty-icon { font-size: 2.5rem; margin-bottom: .5rem; }

/* ---------- Event header (page event) ---------- */
.event-header {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 1.5rem; margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
}
.event-header h1 { font-size: 1.7rem; font-weight: 800; margin-bottom: .25rem; }
.event-meta-list { display:flex; flex-wrap:wrap; gap: .25rem 1.25rem; color: var(--text-m); font-size: .92rem; margin-top: .75rem; }
.event-meta-list span strong { color: var(--text); font-weight: 600; }
.event-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

/* ---------- Invite list ---------- */
.invite-list { display: flex; flex-direction: column; gap: .5rem; }
.invite-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .85rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r);
}
.invite-info { flex: 1; min-width: 0; }
.invite-email { font-weight: 600; }
.invite-sub { color: var(--text-m); font-size: .85rem; }
.invite-role {
    background: var(--bg2); color: var(--text); border: 1px solid var(--border);
    padding: .35rem .55rem; border-radius: var(--r); font-size: .85rem;
}
.invite-status { font-size: 1rem; margin-right: .25rem; }
.invite-registered { filter: drop-shadow(0 0 6px rgba(16,185,129,.4)); }
.invite-pending    { filter: grayscale(.5); opacity: .8; }

/* ---------- Tabs (dashboard) ---------- */
.tabs { display: flex; gap: .5rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.tab-btn {
    background: none; border: none; color: var(--text-m);
    padding: .75rem 1rem; cursor: pointer; font-weight: 600;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    font-size: 1rem;
}
.tab-btn.active { color: var(--text); border-bottom-color: var(--purple-l); }

/* ---------- Admin ---------- */
.admin-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border);
                    border-radius: var(--r-lg); padding: .5rem; backdrop-filter: blur(10px); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: .65rem .75rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.admin-table th { color: var(--text-m); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.admin-table tr:hover { background: var(--surface-h); }
.admin-user-link { display: block; color: inherit; }
.admin-user-link:hover { color: var(--purple-l); }

.admin-event { background: var(--surface); border: 1px solid var(--border);
               border-radius: var(--r-lg); padding: .25rem .85rem; margin-bottom: .5rem; }
.admin-event summary { cursor: pointer; padding: .5rem 0; outline: none; list-style: none; }
.admin-event summary::-webkit-details-marker { display: none; }
.admin-event summary::before { content: '▸ '; color: var(--text-d); margin-right: .25rem; transition: transform .2s; display: inline-block; }
.admin-event[open] > summary::before { content: '▾ '; }
.admin-event-body { padding: .25rem 0 .75rem; }

.admin-log {
    background: var(--bg2); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--r);
    padding: 1rem; overflow-x: auto;
    font-family: 'Menlo', 'Consolas', monospace; font-size: .85rem;
    white-space: pre-wrap; line-height: 1.5;
}

/* ---------- Guide page ---------- */
.guide-hero { text-align: center; margin-bottom: 2.5rem; padding: 2rem 0; }
.guide-hero .page-title { font-size: 2.5rem; flex-direction: column; gap: .5rem; }
.guide-hero .page-subtitle { max-width: 640px; margin: 0 auto; font-size: 1.05rem; }

.role-grid {
    display: grid; gap: 1.25rem; margin-bottom: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.role-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 1.5rem;
    backdrop-filter: blur(10px);
    border-top: 4px solid var(--role-c, var(--purple));
}
.role-creator { --role-c: #a855f7; }
.role-editor  { --role-c: #3b82f6; }
.role-reader  { --role-c: #94a3b8; }

.role-header { text-align: center; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.role-header .role-icon { font-size: 2.25rem; display: block; margin-bottom: .35rem; }
.role-header h3 { font-size: 1.4rem; font-weight: 800; color: var(--role-c); margin-bottom: .25rem; }
.role-sub { color: var(--text-m); font-size: .9rem; }

.role-features { list-style: none; padding: 0; margin: 0; }
.role-features li { padding: .35rem 0; color: var(--text); font-size: .92rem; line-height: 1.5; }
.role-features li strong { color: var(--role-c); }

.feature-grid {
    display: grid; gap: 1rem; margin-bottom: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.feature-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 1.25rem;
    backdrop-filter: blur(10px);
    transition: transform .2s, border-color .2s;
}
.feature-card:hover { transform: translateY(-2px); border-color: var(--border-l); }
.feature-icon { font-size: 1.75rem; margin-bottom: .5rem; }
.feature-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: .35rem; }
.feature-card p { color: var(--text-m); font-size: .88rem; line-height: 1.5; }

.status-grid {
    display: grid; gap: .75rem; margin-bottom: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.status-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); padding: .85rem 1rem;
    display: flex; flex-direction: column; gap: .35rem;
}
.status-card p { color: var(--text-m); font-size: .85rem; margin: 0; }

.guide-cta {
    text-align: center; margin: 3rem 0 1rem; padding: 2rem 1rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg);
    backdrop-filter: blur(10px);
}
.guide-cta h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 1rem; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 1.5rem 0; background: rgba(7,7,26,.7); }
.footer-inner { text-align: center; }
.footer-brand { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; }
.footer-sub { color: var(--text-d); font-size: .85rem; margin-top: .25rem; }

/* ---------- Google OAuth button ---------- */
.google-btn {
    display: flex; align-items: center; justify-content: center; gap: .75rem;
    width: 100%; padding: .75rem 1rem;
    background: #fff; color: #1f1f1f;
    border: 1px solid #dadce0; border-radius: var(--r);
    font-weight: 600; font-size: .95rem;
    transition: background .2s, box-shadow .2s, transform .1s;
    text-decoration: none;
    margin-bottom: 1rem;
}
.google-btn:hover { background: #f8fafc; box-shadow: var(--sh); color: #1f1f1f; }
.google-btn:active { transform: translateY(1px); }

.or-sep {
    display: flex; align-items: center; gap: .75rem;
    margin: 1rem 0; color: var(--text-d); font-size: .85rem;
}
.or-sep::before, .or-sep::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ---------- Modal ---------- */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.7);
    display: none; align-items: center; justify-content: center;
    z-index: 200; padding: 1rem; backdrop-filter: blur(4px);
}
.modal-backdrop.open { display: flex; }
.modal {
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 1.5rem;
    max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto;
}
.modal h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }

/* ---------- Drag-drop ---------- */
.sortable-ghost { opacity: .35; }
.sortable-chosen { border-color: var(--purple-l); }

/* ---------- Print (PDF) ---------- */
@media print {
    body { background: #fff; color: #000; }
    body::before { display: none; }
    .navbar, .footer, .event-actions, .subject-actions, .subject-handle, .no-print { display: none !important; }
    .main { padding: 0; }
    .event-header, .subject, .form-card { background: #fff; border: 1px solid #ddd; color: #000; }
    .subject-meta, .subject-details, .event-meta-list, .text-muted { color: #444; }
    .badge { color: #000 !important; border: 1px solid #999 !important; background: #f5f5f5 !important; }
    a { color: #000; text-decoration: none; }
    .closure-photos a { width: 120px; height: 120px; }
    .grad-text { background: none; -webkit-text-fill-color: #7e22ce; color: #7e22ce; }
}

/* ---------- Misc ---------- */
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.flex { display:flex; gap:.75rem; }
.flex-between { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.flex-end { display:flex; justify-content:flex-end; gap:.5rem; flex-wrap:wrap; }
.hidden { display:none !important; }