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

:root{
    --forest-900:#14251C;
    --forest-700:#1F4230;
    --forest-500:#2E7D46;
    --gold-500:#C99A2E;
    --gold-700:#9A7420;
    --paper:#F3F0E4;
    --surface:#FFFFFF;
    --ink:#1B2A20;
    --muted:#6B7568;
    --line:#DCD6C2;
    --danger:#B4432F;
    --font-body:"Inter",sans-serif;
    --font-display:"Fraunces",serif;
    --font-mono:"IBM Plex Mono",monospace;
}

body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:15px;
    line-height:1.6;
}

.shell{
    display:grid;
    grid-template-columns:250px 1fr;
    min-height:100vh;
}

.sidebar{
    background:var(--forest-900);
    color:#EFEAD9;
    padding:28px 20px;
    display:flex;
    flex-direction:column;
    gap:32px;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.brand-mark{
    width:38px;
    height:38px;
    object-fit:contain;
}

.brand-title{
    font-family:var(--font-display);
    font-weight:600;
    font-size:16px;
}

.brand-sub{
    font-size:12px;
    color:#9FB0A2;
    margin-top:2px;
}

.index{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.tab{
    padding:12px 14px;
    border-left:3px solid transparent;
    cursor:pointer;
    font-size:13.5px;
    font-weight:500;
    color:#C7D2C9;
    letter-spacing:.02em;
    transition:border-color .2s, background .2s, color .2s;
}

.tab:hover{
    background:rgba(255,255,255,.05);
    color:#fff;
}

.tab.active{
    border-left-color:var(--gold-500);
    background:rgba(255,255,255,.07);
    color:#fff;
}

.main{
    padding:40px 48px 60px;
    max-width:980px;
}

.main-head{
    margin-bottom:32px;
}

.main-head h1{
    font-family:var(--font-display);
    font-weight:600;
    font-size:30px;
    color:var(--forest-900);
    margin-bottom:8px;
}

.main-head p{
    color:var(--muted);
    font-size:14px;
}

.panel{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:6px;
    padding:22px 24px;
    margin-bottom:20px;
}

.filter-row{
    display:flex;
    gap:32px;
    flex-wrap:wrap;
}

.filter-block{
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1;
    min-width:200px;
}

.filter-block-year{
    flex:0 0 160px;
}

.filter-label{
    font-size:12px;
    color:var(--muted);
    font-weight:600;
}

.tagset{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.chip{
    padding:6px 12px;
    border:1px solid var(--line);
    border-radius:4px;
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--ink);
    cursor:pointer;
    background:var(--surface);
    transition:.2s;
}

.chip:hover{
    border-color:var(--forest-500);
}

.chip.active{
    background:var(--forest-700);
    border-color:var(--forest-700);
    color:#fff;
}

select{
    height:40px;
    border-radius:4px;
    border:1px solid var(--line);
    padding:0 12px;
    outline:none;
    background:var(--surface);
    font-family:var(--font-mono);
    font-size:13px;
    color:var(--ink);
}

select:focus{
    border-color:var(--forest-500);
}

.upload-panel{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
}

.upload-title{
    font-weight:600;
    color:var(--forest-900);
    margin-bottom:4px;
}

.upload-desc{
    font-size:13px;
    color:var(--muted);
}

.upload-controls{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

input[type=file]{
    border:1px solid var(--line);
    border-radius:4px;
    padding:8px 10px;
    background:var(--surface);
    font-size:13px;
    max-width:260px;
}

button{
    height:40px;
    padding:0 20px;
    border:none;
    border-radius:4px;
    background:var(--forest-700);
    color:#fff;
    font-weight:600;
    font-size:13.5px;
    cursor:pointer;
    transition:.2s;
}

button:hover:not(:disabled){
    background:var(--forest-900);
}

button:disabled{
    opacity:.4;
    cursor:not-allowed;
}

.ledger-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:16px;
}

.ledger-head h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:19px;
    color:var(--forest-900);
}

.ledger-count{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--muted);
}

.ledger-columns{
    display:grid;
    grid-template-columns:1fr auto;
    gap:16px;
    padding:0 4px 10px;
    border-bottom:1px solid var(--line);
    font-size:11.5px;
    color:var(--muted);
    font-weight:600;
}

.list{
    display:flex;
    flex-direction:column;
    max-height:520px;
    overflow-y:auto;
}

.row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:16px;
    align-items:center;
    padding:14px 4px;
    border-bottom:1px solid var(--line);
}

.row-name{
    font-weight:500;
    color:var(--ink);
    word-break:break-word;
}

.row-date{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--muted);
    margin-top:2px;
}

.row-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.btn-ghost{
    height:32px;
    padding:0 12px;
    background:transparent;
    border:1px solid var(--line);
    color:var(--forest-900);
    font-size:12.5px;
}

.btn-ghost:hover:not(:disabled){
    background:var(--paper);
    border-color:var(--forest-500);
}

.btn-danger-ghost{
    height:32px;
    padding:0 12px;
    background:transparent;
    border:1px solid var(--line);
    color:var(--danger);
    font-size:12.5px;
}

.btn-danger-ghost:hover:not(:disabled){
    background:#FBEDEA;
    border-color:var(--danger);
}

.empty{
    text-align:center;
    padding:40px;
    color:var(--muted);
    font-size:13.5px;
}

.modal{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(20,37,28,.55);
    z-index:999;
}

.modal-box{
    width:90%;
    max-width:380px;
    background:var(--surface);
    border-radius:6px;
    padding:26px;
}

.modal-box h3{
    font-family:var(--font-display);
    margin-bottom:12px;
    color:var(--forest-900);
}

.modal-box p{
    line-height:1.7;
    color:var(--muted);
    font-size:14px;
}

.modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:22px;
}

.btn-secondary{
    background:#EDEAD9;
    color:var(--ink);
}

.btn-secondary:hover{
    background:#E1DCC4;
}

.loading-overlay{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(243,240,228,.7);
    z-index:1000;
}

.loading-box{
    background:var(--surface);
    padding:24px 36px;
    border-radius:6px;
    border:1px solid var(--line);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    font-size:13.5px;
    color:var(--muted);
}

.spinner{
    width:36px;
    height:36px;
    border:3px solid var(--line);
    border-top:3px solid var(--forest-700);
    border-radius:50%;
    animation:spin .8s linear infinite;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-thumb{
    background:var(--forest-500);
    border-radius:20px;
}

::-webkit-scrollbar-track{
    background:var(--paper);
}

@media(max-width:900px){

    .shell{
        grid-template-columns:1fr;
    }

    .sidebar{
        flex-direction:row;
        align-items:center;
        gap:20px;
        padding:16px 20px;
        overflow-x:auto;
    }

    .index{
        flex-direction:row;
        gap:8px;
    }

    .tab{
        white-space:nowrap;
        border-left:none;
        border-bottom:3px solid transparent;
        border-radius:4px;
    }

    .tab.active{
        border-left-color:transparent;
        border-bottom-color:var(--gold-500);
    }

    .main{
        padding:28px 20px 48px;
    }

}

@media(max-width:600px){

    .upload-panel{
        flex-direction:column;
        align-items:flex-start;
    }

    .upload-controls{
        width:100%;
    }

    input[type=file]{
        max-width:none;
        flex:1;
    }

    .row{
        grid-template-columns:1fr;
    }

    .row-actions{
        grid-column:1/-1;
        margin-top:8px;
    }

}