@import url('https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

:root{
    --bg: #0a0a0c;
    --card: #18181f;
    --card2: #0f0f14;
    --border: #2a2a35;
    --border-hi: #3a3a50;
    --text: #e8e8f0;
    --subtext: #8888a0;
    --muted: #555566;
    --accent2: #696188;
    --correct: #47ffb0;
    --wrong: #ff4f4f;
    --warn: #ee8700;
    --radius: 8px;
}

*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }

html, body{
    background: var(--bg);
    color: var(--text);
    font-family: 'Cascadia Code', monospace;
    font-size: 13px;
    min-height: 100vh;
}

.topbar{
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    gap: 16px;
}

.topbar_left{
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar_title{
    font-family: 'Unbounded', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
}

.topbar_status{
    font-size: 0.6rem;
    color: var(--muted);
    letter-spacing: 0.08em;
}

.topbar_right{
    display: flex;
    align-items: center;
    gap: 8px;
}

.search_input{
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: 'Cascadia Code', monospace;
    font-size: 0.75rem;
    padding: 6px 12px;
    outline: none;
    width: 200px;
    transition: border-color 0.2s;
}

.search_input:focus{ border-color: var(--accent2); }

.tb_btn{
    font-family: 'Cascadia Code', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--subtext);
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: border-color 0.15s, color 0.15s;
}

.tb_btn:hover{ border-color: var(--subtext); color: var(--text); }
.tb_btn--save{ border-color: var(--accent2); color: var(--accent2); }
.tb_btn--save:hover{ background: rgba(105,97,136,0.15); color: var(--text); }
.tb_btn--danger{ border-color: rgba(255,79,79,0.35); color: var(--wrong); }
.tb_btn--danger:hover{ background: rgba(255,79,79,0.08); }
.tb_btn:disabled{opacity: 0.35; cursor: not-allowed;}

.bulk_bar{
    position: sticky;
    top: 46px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--card2);
    border-bottom: 1px solid rgba(105,97,136,0.25);
    flex-wrap: wrap;
}

.bulk_bar span{
    font-size: 0.6rem;
    color: var(--accent2);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-right: 4px;
    white-space: nowrap;
}

.shortcuts_bar{
    display: flex;
    gap: 20px;
    padding: 5px 20px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.shortcuts_bar span{
    font-size: 0.52rem;
    color: var(--muted);
    letter-spacing: 0.06em;
}

.content{
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.loading_msg{
    color: var(--muted);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 40px;
    text-align: center;
}

.group{
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.group_header{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
}

.group_header:hover{ background: #1c1c25; }

.group_chevron{
    font-size: 0.55rem;
    color: var(--muted);
    transition: transform 0.18s;
    width: 10px;
    flex-shrink: 0;
}

.group_chevron.open{ transform: rotate(90deg); }

.group_name{
    font-family: 'Cascadia Code', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    flex: 1;
}

.group_meta{
    font-size: 0.58rem;
    color: var(--muted);
    letter-spacing: 0.06em;
}

.group_sel_btn{
    font-family: 'Cascadia Code', sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--subtext);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.group_sel_btn:hover{ border-color: var(--subtext); color: var(--text); }

.group_body{ display: none; }
.group_body.open{ display: block; }

.meta_table{
    width: 100%;
    border-collapse: collapse;
}

.meta_table thead tr{ background: var(--card2); }

.meta_table th{
    font-size: 0.52rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    font-weight: 400;
}

.meta_table tbody tr{
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}

.meta_table tbody tr:last-child{ border-bottom: none; }
.meta_table tbody tr:hover{ background: #111118; }
.meta_table tbody tr.selected{ background: rgba(105,97,136,0.09); }
.meta_table tbody tr.focused{ outline: 1px solid var(--accent2); outline-offset: -1px; }
.meta_table tbody tr.editing{ background: #14141c; }
.meta_table tbody tr.is_dupe td.td_check{ border-left: 2px solid var(--warn); }
.meta_table tbody tr.hidden_row{ display: none; }

.meta_table td{
    padding: 5px 10px;
    vertical-align: middle;
    height: 38px;
}

.td_check input[type="checkbox"]{
    accent-color: var(--accent2);
    cursor: pointer;
    width: 13px;
    height: 13px;
}

.art_thumb{
    width: 26px;
    height: 26px;
    border-radius: 3px;
    object-fit: cover;
    display: block;
}

.art_empty{
    width: 26px;
    height: 26px;
    border-radius: 3px;
    background: var(--border);
    display: block;
}

.sc_info{ display: flex; flex-direction: column; gap: 1px; }

.sc_title_text{
    font-size: 0.72rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.sc_artist_text{
    font-size: 0.58rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.sc_unscan{
    font-size: 0.58rem;
    color: var(--warn);
    letter-spacing: 0.04em;
}

.cell_display{
    font-size: 0.72rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
    min-height: 18px;
    cursor: text;
}

.cell_display.empty{ color: var(--muted); }

.changed_dot{
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent2);
    margin-left: 5px;
    vertical-align: middle;
}

.cell_input{
    background: var(--bg);
    border: 1px solid var(--accent2);
    border-radius: 3px;
    color: var(--text);
    font-family: 'Cascadia Code', monospace;
    font-size: 0.72rem;
    padding: 3px 7px;
    outline: none;
    width: 100%;
    min-width: 100px;
}

.cell_input:focus{ border-color: var(--correct); }

.td_actions{
    display: flex;
    gap: 5px;
    align-items: center;
}

.row_btn{
    font-size: 0.5rem;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    padding: 3px 6px;
    font-family: 'Cascadia Code', sans-serif;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: border-color 0.12s, color 0.12s;
}

.row_btn:hover{ border-color: var(--border-hi); color: var(--text); }
.row_btn--sc{ color: var(--accent2); }
.row_btn--sc:hover{ border-color: var(--accent2); }
.row_btn--del{ color: var(--wrong); }
.row_btn--del:hover{ border-color: var(--wrong); }
.row_btn--scan{ color: var(--warn); }
.row_btn--scan:hover{ border-color: var(--warn); }

.dupe_badge{
    font-size: 0.48rem;
    background: rgba(238,135,0,0.12);
    color: var(--warn);
    border: 1px solid rgba(238,135,0,0.28);
    border-radius: 3px;
    padding: 1px 4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-left: 5px;
    vertical-align: middle;
}

.modal_overlay{
    position: fixed;
    inset: 0;
    background: rgba(10,10,12,0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    backdrop-filter: blur(4px);
}

.modal{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 300px;
}

.modal_title{
    font-family: 'Cascadia Code', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--subtext);
}

.modal_input{
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: 'Cascadia Code', monospace;
    font-size: 0.85rem;
    padding: 8px 12px;
    outline: none;
    width: 100%;
    transition: border-color 0.2s;
}

.modal_input:focus{ border-color: var(--accent2); }

.modal_footer{ display: flex; gap: 8px; }

.toast_wrap{
    position: fixed;
    bottom: 18px;
    right: 18px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    z-index: 400;
}

.toast{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 9px 14px;
    font-size: 0.62rem;
    letter-spacing: 0.07em;
    animation: fadeUp 0.2s ease;
    max-width: 300px;
}

.toast.ok{ border-color: rgba(71,255,176,0.35); color: var(--correct); }
.toast.err{ border-color: rgba(255,79,79,0.35); color: var(--wrong); }
.toast.warn{ border-color: rgba(238,135,0,0.35); color: var(--warn); }

@keyframes fadeUp{
    from{ opacity: 0; transform: translateY(6px); }
    to{ opacity: 1; transform: translateY(0); }
}



.meta_table tbody tr.is_hidden{ opacity: 0.4; }

.hidden_badge{
    font-size: 0.48rem;
    background: rgba(255,79,79,0.1);
    color: var(--wrong);
    border: 1px solid rgba(255,79,79,0.25);
    border-radius: 3px;
    padding: 1px 4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-left: 5px;
}

.row_btn--hide{ color: var(--warn); }
.row_btn--hide:hover{ border-color: var(--warn); }