/* The Collection — dark theme, green accent, square corners (spec §4). */
:root {
    --paper: #16181d;
    --surface: #1d2026;
    --surface-2: #232730;
    --ink: #e7e9ee;
    --ink-soft: #9aa1ac;
    --line: #2e323a;
    --accent: #4cc38a;
    --accent-ink: #06120c;
    --danger: #e5637d;
    --header-h: 3.25rem;
    --sidebar-w: 13rem;
    --sidebar-w-collapsed: 3.25rem;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-decoration: none; }
h1 { font-size: 1.5rem; margin: 0; }
h1:focus { outline: none; }

/* ---- Buttons ---- */
.tc-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font: inherit; font-size: 0.9rem; font-weight: 600;
    padding: 0.5rem 0.9rem; border: 1px solid transparent; border-radius: 0;
    cursor: pointer; white-space: nowrap;
}
.tc-btn-primary { background: var(--accent); color: var(--accent-ink); }
.tc-btn-primary:hover { filter: brightness(1.08); }
.tc-btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.tc-btn-ghost:hover { border-color: var(--accent); }
.tc-btn-full { width: 100%; justify-content: center; }
.tc-btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.tc-btn:disabled { opacity: 0.5; cursor: default; }

/* ---- Header ---- */
.tc-header {
    position: sticky; top: 0; z-index: 40;
    height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 0.85rem;
    background: var(--surface); border-bottom: 1px solid var(--line);
}
.tc-header-start { display: flex; align-items: center; gap: 0.5rem; }
.tc-brand { display: flex; align-items: center; gap: 0.55rem; color: var(--ink); }
.tc-brand-icon {
    width: 1.85rem; height: 1.85rem; display: grid; place-items: center;
    background: var(--accent); color: var(--accent-ink);
    font-weight: 800; font-size: 0.8rem; letter-spacing: 0.02em;
}
.tc-brand-name { font-weight: 700; font-size: 1.02rem; }
.tc-hamburger {
    display: none; background: none; border: none; color: var(--ink);
    font-size: 1.4rem; cursor: pointer; padding: 0.2rem 0.4rem;
}

/* ---- Sidebar ---- */
.tc-app-shell { display: flex; min-height: calc(100vh - var(--header-h)); }
.tc-sidebar-shell { position: relative; flex: 0 0 auto; }
.tc-sidebar {
    position: sticky; top: var(--header-h);
    height: calc(100vh - var(--header-h));
    width: var(--sidebar-w);
    background: var(--surface); border-right: 1px solid var(--line);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 0.6rem 0; transition: width 0.15s ease;
}
.tc-sidebar-shell--collapsed .tc-sidebar { width: var(--sidebar-w-collapsed); }
.tc-sidebar-nav, .tc-sidebar-footer { display: flex; flex-direction: column; gap: 0.15rem; }
.tc-sidebar-logout { margin: 0; }
.tc-sidebar-link {
    display: flex; align-items: center; gap: 0.7rem;
    width: 100%; padding: 0.6rem 0.95rem;
    color: var(--ink-soft); font: inherit; font-size: 0.92rem; text-align: left;
    background: none; border: none; border-left: 2px solid transparent; cursor: pointer;
}
.tc-sidebar-link:hover { color: var(--ink); background: var(--surface-2); }
.tc-sidebar-link.active { color: var(--ink); border-left-color: var(--accent); background: var(--surface-2); }
.tc-sidebar-link--danger:hover { color: var(--danger); }
.tc-sidebar-icon { font-size: 1.05rem; min-width: 1.2rem; text-align: center; }
.tc-sidebar-tab {
    position: absolute; top: 1rem; right: -0.8rem; z-index: 5;
    width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
    background: var(--surface-2); color: var(--ink-soft);
    border: 1px solid var(--line); cursor: pointer;
}
.tc-sidebar-tab:hover { color: var(--accent); }

.tc-layout-main { flex: 1 1 auto; min-width: 0; }
.tc-layout-body { padding: 1.25rem 1.4rem 3rem; max-width: 80rem; margin: 0 auto; }

/* ---- Impersonation banner ---- */
.tc-impersonation-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.5rem 1rem; background: #3a3122; color: #f0d9a8;
    border-bottom: 1px solid #5a4a2a; font-size: 0.9rem;
}
.tc-impersonation-banner form { margin: 0; }

/* ---- Page head ---- */
.tc-page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }

/* ---- Toolbar / tabs ---- */
.tc-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.75rem; border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; margin-bottom: 1rem;
}
.tc-tabs { display: flex; gap: 0.1rem; overflow-x: auto; scrollbar-width: none; }
.tc-tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--ink-soft); font: inherit; font-size: 0.9rem;
    padding: 0.35rem 0.6rem; white-space: nowrap; cursor: pointer;
}
.tc-tab:hover { color: var(--ink); }
.tc-tab.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.tc-toolbar-controls { display: flex; gap: 0.5rem; align-items: center; }
.tc-search { display: flex; align-items: center; gap: 0.4rem; background: var(--surface); border: 1px solid var(--line); padding: 0.3rem 0.55rem; }
.tc-search i { color: var(--ink-soft); }
.tc-search input { background: none; border: none; color: var(--ink); font: inherit; font-size: 0.88rem; outline: none; width: 11rem; max-width: 40vw; }
.tc-select { background: var(--surface); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 0.85rem; padding: 0.35rem 0.5rem; }

.tc-count { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.75rem; color: var(--ink-soft); margin-bottom: 0.75rem; }

/* ---- Filter bar ---- */
.tc-filterbar { margin-bottom: 0.75rem; }
.tc-facets { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.tc-filter-toggle { display: none; }
.tc-year-range { display: flex; align-items: center; gap: 0.35rem; color: var(--ink-soft); font-size: 0.85rem; }
.tc-year { width: 7.5rem; }
.tc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.tc-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
    font: inherit; font-size: 0.78rem; padding: 0.2rem 0.55rem; cursor: pointer;
}
.tc-chip:hover { border-color: var(--accent); color: var(--accent); }
.tc-chip-clear { color: var(--ink-soft); border-style: dashed; }

@media (max-width: 48rem) {
    .tc-filter-toggle { display: inline-flex; }
    .tc-facets { display: none; }
    .tc-facets.open {
        display: flex; flex-direction: column; align-items: stretch;
        margin-top: 0.6rem; padding: 0.85rem; gap: 0.6rem;
        background: var(--surface); border: 1px solid var(--line);
    }
    .tc-facets.open .tc-select, .tc-facets.open .tc-year-range { width: 100%; }
    .tc-year { flex: 1; width: auto; }
}

/* ---- Card grid ---- */
.tc-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.9rem;
}
@media (min-width: 48rem) { .tc-card-grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1.1rem; } }
.tc-card {
    background: var(--surface); border: 1px solid var(--line);
    display: flex; flex-direction: column; cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.tc-card:hover, .tc-card:focus-visible { transform: translateY(-3px); border-color: var(--accent); outline: none; }
@media (prefers-reduced-motion: reduce) { .tc-card { transition: none; } .tc-card:hover { transform: none; } }
.tc-card-strip {
    padding: 0.3rem 0.6rem;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    /* background + color set inline per platform (StripColors) */
}
.tc-card-art { aspect-ratio: 4 / 5; background: var(--paper); overflow: hidden; }
.tc-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-card-art-empty { width: 100%; height: 100%; display: grid; place-items: center; color: var(--line); font-size: 2.4rem; }
.tc-card-body { padding: 0.5rem 0.6rem 0.55rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.tc-card-title { font-size: 0.85rem; font-weight: 600; line-height: 1.3; }
.tc-card-sub { font-size: 0.78rem; color: var(--ink-soft); }
.tc-card-foot { margin-top: auto; display: flex; justify-content: flex-end; }
.tc-card-price { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.72rem; }
.tc-card-price:hover { color: var(--ink); }

/* ---- Settings ---- */
.tc-subtabs { display: flex; gap: 0.15rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; }
.tc-subtab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--ink-soft); font: inherit; font-size: 0.92rem; padding: 0.5rem 0.9rem; cursor: pointer; }
.tc-subtab:hover { color: var(--ink); }
.tc-subtab.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.tc-settings-intro { margin-top: 0; }
.tc-settings-body { display: flex; flex-direction: column; gap: 1rem; }
.tc-list-panel, .tc-account-panel { max-width: 42rem; }
.tc-form-narrow { max-width: 22rem; }
.tc-input-inline { max-width: 16rem; }
.tc-hint { font-size: 0.78rem; margin: 0.25rem 0 0; }

.tc-list-header { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; color: var(--ink); font: inherit; cursor: pointer; padding: 0; text-align: left; }
.tc-list-header .tc-panel-title { margin-bottom: 0; }
.tc-list-count { color: var(--ink-soft); font-size: 0.85rem; font-weight: 400; }
.tc-list-chevron { color: var(--ink-soft); font-size: 1.1rem; transition: color 0.12s ease, transform 0.22s ease; }
.tc-list-chevron.open { transform: rotate(180deg); }
.tc-list-header:hover .tc-list-chevron, .tc-list-header:hover .tc-panel-title { color: var(--accent); }
.tc-list-panel .tc-lookup-list { margin-top: 0.75rem; }

/* Smooth expand/collapse: JS animates an explicit max-height (see tcCollapse). */
.tc-collapse { overflow: hidden; max-height: 0; transition: max-height 0.24s ease; }

.tc-list-panel .tc-alert { margin-top: 1.1rem; }
.tc-cat-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.6rem; margin: 0.9rem 0 1.1rem; }
.tc-cat-toggle { background: var(--paper); border: 1px solid var(--line); padding: 0.6rem 0.75rem; }
.tc-cat-toggle i { font-size: 1.05rem; color: var(--ink-soft); }
.tc-cat-toggle:hover { border-color: var(--accent); }
.tc-default-tab { max-width: 22rem; }
.tc-data-actions { justify-content: flex-start; margin-top: 0.9rem; }

.tc-lookup-list { display: flex; flex-direction: column; }
.tc-lookup-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.tc-lookup-row.retired { opacity: 0.55; }
.tc-lookup-logo { width: 1.8rem; height: 1.8rem; flex: none; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); color: var(--line); overflow: hidden; }
.tc-lookup-logo img { width: 100%; height: 100%; object-fit: contain; }
.tc-lookup-name { flex: 1; font-size: 0.92rem; }
.tc-lookup-count { color: var(--ink-soft); font-size: 0.82rem; }
.tc-lookup-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.tc-lookup-add { display: flex; gap: 0.4rem; margin-top: 0.75rem; }
.tc-file-btn { position: relative; overflow: hidden; cursor: pointer; }
.tc-file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tc-tag { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft); padding: 0.05rem 0.35rem; }
.tc-tag-danger { color: var(--danger); border-color: var(--danger); }

.tc-recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.4rem; margin: 0.75rem 0; }
.tc-recovery-codes code { background: var(--paper); border: 1px solid var(--line); padding: 0.35rem 0.5rem; font-size: 0.9rem; text-align: center; }
.tc-2fa-steps { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.75rem; }
.tc-2fa-key { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: 0.1em; background: var(--paper); border: 1px solid var(--line); padding: 0.5rem 0.7rem; margin-top: 0.4rem; display: inline-block; }
.tc-2fa-verify { display: flex; gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; }

.tc-users { display: flex; flex-direction: column; }
.tc-user-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tc-user-row.inactive { opacity: 0.6; }
.tc-user-main { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tc-user-name { font-weight: 600; }
.tc-user-count { color: var(--ink-soft); font-size: 0.8rem; }
.tc-user-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center; }
.tc-user-actions form { margin: 0; }
.tc-alert-ok { background: #1e3a2c; border-color: #2c5a41; color: #b6f0cf; }

/* ---- Dashboard ---- */
.tc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.tc-tile { background: var(--surface); border: 1px solid var(--line); padding: 0.85rem 1rem; }
.tc-tile-lead { border-color: var(--accent); }
.tc-tile-num { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tc-tile-lead .tc-tile-num { color: var(--accent); }
.tc-tile-label { font-size: 0.8rem; color: var(--ink-soft); }

.tc-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.tc-panel { background: var(--surface); border: 1px solid var(--line); padding: 1rem 1.1rem; }
.tc-panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.tc-panel-title { font-size: 1rem; margin: 0 0 0.75rem; }
.tc-panel-head .tc-panel-title { margin-bottom: 0; }
.tc-chart-box { position: relative; height: 15rem; margin-top: 0.75rem; }
.tc-chart-error { margin: 0.5rem 0 0; color: #f0b6c2; font-size: 0.8rem; text-align: center; }

.tc-range { display: inline-flex; border: 1px solid var(--line); }
.tc-range-btn { background: var(--surface); border: none; color: var(--ink-soft); font: inherit; font-size: 0.75rem; padding: 0.25rem 0.6rem; cursor: pointer; }
.tc-range-btn + .tc-range-btn { border-left: 1px solid var(--line); }
.tc-range-btn.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.tc-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
.tc-stat { display: flex; flex-direction: column; }
.tc-stat-num { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tc-stat-label { font-size: 0.72rem; color: var(--ink-soft); }
.tc-gradebar { display: flex; height: 0.9rem; overflow: hidden; border: 1px solid var(--line); }
.tc-gradebar-seg { min-width: 2px; }
.tc-gradebar-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin-top: 0.6rem; font-size: 0.78rem; color: var(--ink-soft); }
.tc-gradebar-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.tc-gradebar-legend i { width: 0.7rem; height: 0.7rem; display: inline-block; }

.tc-recent { display: flex; flex-direction: column; gap: 0.5rem; }
.tc-recent-item { display: flex; align-items: center; gap: 0.6rem; }
.tc-recent-thumb { width: 2.5rem; height: 2.5rem; flex: none; background: var(--paper); border: 1px solid var(--line); display: grid; place-items: center; color: var(--line); overflow: hidden; }
.tc-recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tc-recent-title { font-size: 0.88rem; }
.tc-recent-sub { font-size: 0.75rem; color: var(--ink-soft); }

/* ---- States ---- */
.tc-loading, .tc-empty { text-align: center; color: var(--ink-soft); padding: 3rem 1rem; }
.tc-empty i { font-size: 2.5rem; color: var(--line); display: block; margin-bottom: 0.75rem; }
.tc-empty p { margin: 0.25rem 0; }
.tc-empty-action { margin-top: 0.9rem; }
.tc-muted { color: var(--ink-soft); }
.tc-loadmore { display: flex; justify-content: center; margin: 1.5rem 0; }

/* ---- Modal ---- */
.tc-modal-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.6); display: grid; place-items: center; padding: 1rem; }
.tc-modal { background: var(--surface); border: 1px solid var(--line); width: min(32rem, 100%); max-height: 90vh; overflow: auto; padding: 1.25rem; position: relative; }
.tc-modal-title { margin: 0 0 0.75rem; font-size: 1.15rem; display: flex; align-items: center; gap: 0.35rem; }
.tc-back { background: none; border: none; color: var(--ink-soft); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0; display: inline-flex; align-items: center; }
.tc-back:hover { color: var(--accent); }
.tc-modal-close { position: absolute; top: 0.5rem; right: 0.65rem; background: none; border: none; color: var(--ink-soft); font-size: 1.5rem; cursor: pointer; }
.tc-modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

/* ---- Forms ---- */
.tc-form { display: flex; flex-direction: column; gap: 0.9rem; }
.tc-form-group { display: flex; flex-direction: column; gap: 0.3rem; }
.tc-label { font-size: 0.82rem; color: var(--ink-soft); }
.tc-input, .tc-textarea {
    background: var(--paper); border: 1px solid var(--line); color: var(--ink);
    font: inherit; font-size: 0.92rem; padding: 0.55rem 0.65rem; width: 100%;
}
.tc-input:focus, .tc-textarea:focus { outline: none; border-color: var(--accent); }

/* Custom dropdown chevron — the native arrow ignores padding and sits flush
   against the edge. Declared after .tc-input/.tc-select so it wins. */
select.tc-input, select.tc-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding-right: 2.1rem;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239aa1ac' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 0.8rem;
}
select.tc-input { background-color: var(--paper); }
select.tc-select { background-color: var(--surface); }
select.tc-input:hover, select.tc-select:hover { border-color: var(--accent); }
.tc-checkbox { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--ink-soft); cursor: pointer; }
.tc-checkbox input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 1.15rem; height: 1.15rem; margin: 0; flex: none;
    border: 1px solid var(--line); background: var(--paper);
    position: relative; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease;
}
.tc-checkbox input[type="checkbox"]:hover { border-color: var(--accent); }
.tc-checkbox input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.tc-checkbox input[type="checkbox"]:checked::after {
    content: ""; position: absolute; left: 0.37rem; top: 0.14rem;
    width: 0.26rem; height: 0.55rem;
    border: solid var(--accent-ink); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.tc-checkbox input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.tc-modal-lg { width: min(46rem, 100%); }
.tc-req { color: var(--accent); }
.tc-warn { color: #f0c674; font-size: 0.82rem; margin: 0.15rem 0 0; }
.tc-linkish { background: none; border: none; color: var(--accent); font-size: 0.78rem; cursor: pointer; margin-left: 0.5rem; }
.tc-file-hint { font-size: 0.8rem; color: var(--ink-soft); margin: 0.3rem 0 0; }
.tc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.tc-form-row--single { grid-template-columns: 1fr; }

/* Native file input, restyled to match (keeps native picker for camera capture) */
.tc-file { font-size: 0.85rem; color: var(--ink-soft); max-width: 100%; }
.tc-file::file-selector-button {
    background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
    font: inherit; font-size: 0.85rem; font-weight: 600;
    padding: 0.45rem 0.85rem; margin-right: 0.7rem; cursor: pointer;
}
.tc-file::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }
.tc-form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
.tc-flags { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.tc-checkbox-tall { padding-top: 0.5rem; }
.tc-more { border: 1px solid var(--line); padding: 0.4rem 0.7rem; }
.tc-more-header { display: flex; align-items: center; gap: 0.45rem; width: 100%; background: none; border: none; color: var(--ink-soft); font: inherit; font-size: 0.85rem; cursor: pointer; padding: 0.15rem 0; text-align: left; }
.tc-more-header:hover { color: var(--ink); }
.tc-more-chevron { font-size: 0.85rem; transition: transform 0.2s ease; }
.tc-more-chevron.open { transform: rotate(90deg); }
.tc-more-body { display: flex; flex-direction: column; gap: 0.7rem; padding-top: 0.7rem; }

/* Category picker */
.tc-cat-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.tc-cat-btn {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    padding: 1rem 0.5rem; background: var(--surface-2); border: 1px solid var(--line);
    color: var(--ink); cursor: pointer; font-size: 0.85rem;
}
.tc-cat-btn:hover { border-color: var(--accent); color: var(--accent); }
.tc-cat-btn i { font-size: 1.6rem; }

/* Segmented control */
.tc-segment { display: inline-flex; border: 1px solid var(--line); }
.tc-seg { background: var(--surface); border: none; color: var(--ink-soft); font: inherit; font-size: 0.85rem; padding: 0.4rem 1rem; cursor: pointer; }
.tc-seg + .tc-seg { border-left: 1px solid var(--line); }
.tc-seg.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.tc-btn-danger { background: var(--danger); color: #fff; }
.tc-btn-danger-text { color: var(--danger); }

/* Detail popup */
.tc-detail { display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: 1.25rem; }
.tc-detail-main { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--paper); border: 1px solid var(--line); }
.tc-detail-noart { aspect-ratio: 4/5; display: grid; place-items: center; align-content: center; gap: 0.4rem; background: var(--paper); border: 1px solid var(--line); color: var(--line); }
.tc-detail-noart i { font-size: 2.5rem; }
.tc-detail-noart span { color: var(--ink-soft); font-size: 0.85rem; }
.tc-detail-photo-tools { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.4rem; flex-wrap: wrap; }
.tc-detail-addphotos { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; flex-wrap: wrap; }
.tc-photo-slots { font-size: 0.75rem; color: var(--ink-soft); }
.tc-photo-primary-tag { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--accent); }
.tc-detail-thumbs { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.tc-thumb-wrap { position: relative; width: 3rem; height: 3rem; border: 1px solid var(--line); cursor: pointer; opacity: 0.6; }
.tc-thumb-wrap.on { opacity: 1; border-color: var(--accent); }
.tc-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-thumb-star { position: absolute; top: -0.45rem; right: -0.45rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 0.6rem; }
.tc-detail-strip { display: inline-block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.15rem 0.5rem; }
.tc-detail-title { margin: 0.2rem 0 0; font-size: 1.3rem; }
.tc-detail-sub { color: var(--ink-soft); margin-bottom: 0.5rem; }
.tc-detail-fields { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; margin: 0.75rem 0; font-size: 0.9rem; }
.tc-detail-fields dt { color: var(--ink-soft); }
.tc-detail-fields dd { margin: 0; }
.tc-detail-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
@media (max-width: 40rem) {
    .tc-detail { grid-template-columns: 1fr; }
    .tc-form-row { grid-template-columns: 1fr; }
    .tc-cat-picker { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Barcode scanner overlay ---- */
.tc-input-with-btn { display: flex; gap: 0.4rem; align-items: stretch; }
.tc-input-with-btn .tc-input { flex: 1; min-width: 0; }
.tc-scan-btn { white-space: nowrap; }

.tc-scan-overlay { position: fixed; inset: 0; z-index: 90; background: #000; display: flex; align-items: center; justify-content: center; }
.tc-scan-video { width: 100%; height: 100%; object-fit: cover; }
/* Targeting frame: a wide, short window suits retail barcodes */
.tc-scan-frame {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(78vw, 26rem); height: min(38vw, 11rem);
    border: 2px solid var(--accent); border-radius: 2px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
    pointer-events: none;
}
.tc-scan-top {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.9rem 1rem; color: #fff;
    background: linear-gradient(rgba(0,0,0,0.65), transparent);
}
.tc-scan-title { font-weight: 600; font-size: 0.95rem; }
.tc-scan-close { background: none; border: none; color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; }
.tc-scan-bottom {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
    padding: 1rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
}
.tc-scan-hint { margin: 0; color: #e7e9ee; font-size: 0.9rem; text-align: center; }
.tc-scan-meta { display: block; margin-top: 0.2rem; color: #8b929f; font-size: 0.72rem; letter-spacing: 0.04em; }

/* Verdict panel inside the overlay — a continuous scan has nowhere else to report */
.tc-scan-status {
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
    background: rgba(0,0,0,0.72); border: 1px solid var(--line);
    padding: 0.6rem 0.9rem; max-width: 26rem; text-align: center;
}
.tc-scan-status-line { display: flex; align-items: center; gap: 0.45rem; font-size: 0.95rem; color: #e7e9ee; }
.tc-scan-status-line.owned { color: var(--accent); }
.tc-scan-status-line.not-owned { color: #f0b6c2; }
.tc-scan-status-code { color: #8b929f; font-size: 0.75rem; letter-spacing: 0.06em; }

/* Flash on a confirmed read, so the beep has a visual partner */
.tc-scan-frame.hit { animation: tc-scan-hit 0.45s ease-out; }
@keyframes tc-scan-hit {
    0%   { border-color: #fff; box-shadow: 0 0 0 100vmax rgba(76,195,138,0.38); }
    100% { border-color: var(--accent); box-shadow: 0 0 0 100vmax rgba(0,0,0,0.45); }
}
.tc-scan-error { background: #3a1f27; border: 1px solid #5a2b36; color: #f0b6c2; padding: 0.6rem 0.8rem; font-size: 0.88rem; max-width: 26rem; text-align: center; }
.tc-scan-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.tc-scan-actions .tc-btn { background: rgba(0,0,0,0.5); }

/* ---- Scanner page ---- */
.tc-scan-panel {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--line);
    padding: 1.5rem; margin-bottom: 1.25rem; max-width: 46rem;
}
.tc-scan-launch { font-size: 1rem; padding: 0.8rem 1.4rem; flex: none; }
/* " | or | " divider between the two ways to enter a barcode */
.tc-scan-or { display: flex; align-items: center; gap: 0.9rem; color: var(--ink-soft); font-size: 0.85rem; flex: none; }
.tc-scan-or::before, .tc-scan-or::after { content: ""; width: 1px; height: 1.9rem; background: var(--line); }
.tc-scan-manual { display: flex; align-items: center; gap: 0.6rem; flex: 1 1 16rem; min-width: 0; }
.tc-scan-manual .tc-input { flex: 1; min-width: 0; }
.tc-scan-manual .tc-btn { flex: none; }
@media (max-width: 34rem) {
    .tc-scan-panel { flex-direction: column; align-items: stretch; gap: 1rem; }
    .tc-scan-or { justify-content: center; }
    .tc-scan-or::before, .tc-scan-or::after { width: auto; height: 1px; flex: 1; }
}

.tc-scan-result { border: 1px solid var(--line); background: var(--surface); padding: 1rem 1.1rem; max-width: 40rem; }
.tc-scan-result.owned { border-left: 3px solid var(--accent); }
.tc-scan-result.not-owned { border-left: 3px solid var(--ink-soft); }
.tc-scan-verdict { display: flex; align-items: center; gap: 0.5rem; font-size: 1.02rem; font-weight: 600; flex-wrap: wrap; }
.tc-scan-result.owned .tc-scan-verdict i { color: var(--accent); }
.tc-scan-result.not-owned .tc-scan-verdict i { color: var(--ink-soft); }
.tc-scan-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.75rem; color: var(--ink-soft); font-weight: 400; margin-left: auto; }

.tc-scan-match { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.9rem; padding: 0.6rem; border: 1px solid var(--line); background: var(--paper); cursor: pointer; }
.tc-scan-match:hover { border-color: var(--accent); }
.tc-scan-match-thumb { width: 3.5rem; height: 3.5rem; flex: none; background: var(--surface-2); display: grid; place-items: center; color: var(--line); overflow: hidden; }
.tc-scan-match-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tc-scan-match-info { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.tc-scan-match-strip { align-self: flex-start; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.1rem 0.4rem; }
.tc-scan-match-title { font-weight: 600; font-size: 0.95rem; }
.tc-scan-match-sub { font-size: 0.8rem; color: var(--ink-soft); }
.tc-scan-match-go { margin-left: auto; color: var(--ink-soft); }
.tc-scan-addrow { margin-top: 0.9rem; }

/* ---- Alerts ---- */
.tc-alert { padding: 0.6rem 0.8rem; font-size: 0.9rem; border: 1px solid; }
.tc-alert-error { background: #3a1f27; border-color: #5a2b36; color: #f0b6c2; }

/* ---- Login ---- */
.tc-login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; }
.tc-login-card { width: min(22rem, 100%); background: var(--surface); border: 1px solid var(--line); padding: 1.75rem; }
.tc-login-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1.1rem; margin-bottom: 1.25rem; }
.tc-login-title { font-size: 1.35rem; margin-bottom: 0.35rem; }

/* ---- Mobile ---- */
@media (max-width: 47.99rem) {
    .tc-hamburger { display: block; }
    .tc-brand-name { display: none; }
    .tc-sidebar-tab { display: none; }
    .tc-sidebar-shell {
        position: fixed; top: var(--header-h); left: 0; z-index: 50;
        transform: translateX(-100%); transition: transform 0.2s ease;
    }
    body.tc-sidebar-open .tc-sidebar-shell { transform: translateX(0); }
    .tc-sidebar { height: calc(100vh - var(--header-h)); }
}

/* Blazor plumbing */
#blazor-error-ui { position: fixed; bottom: 0; left: 0; right: 0; display: none; background: var(--danger); color: #fff; padding: 0.6rem 1rem; z-index: 100; }
.blazor-error-boundary { background: var(--danger); color: #fff; padding: 1rem; }
.validation-message { color: var(--danger); font-size: 0.82rem; }