:root{
    --bg:#111411;
    --panel:#171b17;
    --text:#f5f5f2;
    --muted:#929b92;
    --green:#48c978;
    --danger:#ff8585;
    --nav-height:78px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{overscroll-behavior:none}
a{text-decoration:none;color:inherit}
button,input{font:inherit}

.auth-page{
    min-height:100svh;
    display:grid;
    place-items:center;
    padding:24px;
}
.auth-card{width:min(100%,340px)}
.brand{font-size:42px;font-weight:750;letter-spacing:-1.8px;margin-bottom:28px}
.brand.small{font-size:28px;margin:0}
.auth-card input{
    width:100%;
    height:52px;
    margin:0 0 12px;
    padding:0 16px;
    border:1px solid #2e352f;
    border-radius:14px;
    background:#181c18;
    color:var(--text);
    outline:none;
}
.auth-card input:focus{border-color:var(--green)}
.primary-button{
    width:100%;
    height:52px;
    border:0;
    border-radius:14px;
    background:var(--green);
    color:#0d1a11;
    font-weight:750;
    cursor:pointer;
}
.text-link{display:block;margin-top:18px;text-align:center;color:#c7cec8}
.message{margin-bottom:16px;padding:12px 14px;border-radius:12px}
.message.error{background:#301b1d;color:#ffc4c4}

.app-page{min-height:100svh;overflow:hidden}
.camera-shell{
    position:fixed;
    inset:0 0 var(--nav-height) 0;
    background:#070907;
    overflow:hidden;
}
#camera{
    width:100%;
    height:100%;
    object-fit:cover;
    background:#090b09;
}
.camera-shade{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(to bottom,rgba(0,0,0,.48),transparent 23%,transparent 72%,rgba(0,0,0,.42));
}
.camera-top{
    position:absolute;
    left:0;right:0;top:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:calc(env(safe-area-inset-top) + 18px) 20px 16px;
}
.camera-status{font-size:13px;color:var(--green);font-weight:700}
.scan-frame{
    position:absolute;
    width:min(82vw,430px);
    aspect-ratio:1/1.22;
    left:50%;top:50%;
    transform:translate(-50%,-52%);
}
.corner{
    position:absolute;width:52px;height:52px;
    border-color:var(--green);
    border-style:solid;
}
.corner.tl{left:0;top:0;border-width:2px 0 0 2px;border-radius:14px 0 0 0}
.corner.tr{right:0;top:0;border-width:2px 2px 0 0;border-radius:0 14px 0 0}
.corner.bl{left:0;bottom:0;border-width:0 0 2px 2px;border-radius:0 0 0 14px}
.corner.br{right:0;bottom:0;border-width:0 2px 2px 0;border-radius:0 0 14px 0}
.camera-message{
    position:absolute;
    left:18px;right:18px;bottom:20px;
    padding:14px;
    background:rgba(10,12,10,.86);
    border-radius:14px;
    text-align:center;
    color:#fff;
}
.hidden{display:none}

.bottom-nav{
    position:fixed;
    left:0;right:0;bottom:0;
    height:calc(var(--nav-height) + env(safe-area-inset-bottom));
    padding:0 22px env(safe-area-inset-bottom);
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;
    background:rgba(17,20,17,.96);
    border-top:1px solid #252b25;
    z-index:20;
}
.bottom-nav a{
    display:grid;
    place-items:center;
    height:100%;
    color:#7f887f;
}
.bottom-nav a.active{color:var(--green)}
.bottom-nav svg{
    width:28px;height:28px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.bottom-nav .camera-nav svg{width:32px;height:32px}

.content-page{overflow:auto;padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom))}
.books-content{
    min-height:100svh;
    padding:calc(env(safe-area-inset-top) + 18px) 16px 110px;
}
.tabs{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:18px;
    scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
    flex:0 0 auto;
    border:1px solid #2b322c;
    background:#171b17;
    color:#aab2aa;
    padding:9px 13px;
    border-radius:999px;
}
.tab.active{
    background:var(--green);
    border-color:var(--green);
    color:#0e1b12;
    font-weight:750;
}
.book-list{display:grid;gap:10px}
.book-row{
    display:grid;
    grid-template-columns:58px 1fr;
    gap:14px;
    align-items:center;
    min-height:84px;
    padding:10px;
    border:1px solid #252b25;
    border-radius:16px;
    background:#151915;
}
.book-cover{
    width:58px;height:72px;
    border-radius:8px;
    background:#252b25;
    overflow:hidden;
}
.book-cover img{width:100%;height:100%;object-fit:cover}
.book-info{min-width:0;display:grid;gap:4px}
.book-info strong,.book-info span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.book-info span{color:#b0b7b0}
.book-info small{color:var(--green)}
.empty-state{
    padding:42px 18px;
    text-align:center;
    color:var(--muted);
}
.about-content{
    min-height:calc(100svh - var(--nav-height));
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:calc(env(safe-area-inset-top) + 28px) 28px 120px;
}
.about-content blockquote{
    margin:0 0 28px;
    font-size:22px;
    line-height:1.42;
    font-weight:650;
}
.about-content p{
    margin:0;
    color:#b6bdb6;
    line-height:1.65;
}
.account-meta{margin-top:30px;color:var(--muted)}
.logout-link{margin-top:14px;color:var(--green);font-weight:700}

.result-overlay{
    position:absolute;
    left:16px;
    right:16px;
    bottom:20px;
    z-index:10;
    padding:18px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:20px;
    background:rgba(17,20,17,.94);
    box-shadow:0 18px 60px rgba(0,0,0,.4);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}
.result-overlay.hidden{display:none}
.overlay-close{
    position:absolute;
    top:8px;
    right:10px;
    width:36px;
    height:36px;
    border:0;
    background:transparent;
    color:#929b92;
    font-size:28px;
    line-height:1;
}
.result-book{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:14px;
    padding-right:28px;
}
.result-cover{
    width:58px;
    height:78px;
    object-fit:cover;
    border-radius:8px;
    background:#252b25;
}
.result-copy{
    min-width:0;
    display:grid;
    gap:5px;
}
.result-kicker{
    color:var(--green);
    font-size:12px;
    font-weight:800;
    letter-spacing:.05em;
}
.result-copy strong{
    font-size:20px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.result-copy span{
    color:#b2bab2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.result-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:16px;
}
.result-actions.hidden{display:none}
.result-button{
    height:48px;
    border-radius:13px;
    font-weight:800;
    letter-spacing:.02em;
}
.result-button.primary{
    border:1px solid var(--green);
    background:var(--green);
    color:#0d1a11;
}
.result-button.secondary{
    border:1px solid #394039;
    background:#202520;
    color:#f5f5f2;
}
.result-button:disabled{opacity:.55
}

.book-list{
    display:grid;
    gap:10px;
}

.book-card{
    border:1px solid #252b25;
    border-radius:18px;
    background:#151915;
    overflow:hidden;
}

.book-card-main{
    width:100%;
    min-height:96px;
    display:grid;
    grid-template-columns:58px 1fr 24px;
    align-items:center;
    gap:14px;
    padding:11px;
    border:0;
    background:transparent;
    color:inherit;
    text-align:left;
}

.book-summary{
    min-width:0;
    display:grid;
    gap:4px;
}

.book-summary strong,
.book-summary span{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.book-summary strong{
    font-size:16px;
}

.book-summary span{
    color:#b0b7b0;
    font-size:14px;
}

.book-summary small{
    color:var(--green);
    font-size:12px;
}

.book-chevron{
    width:20px;
    height:20px;
    fill:none;
    stroke:#6f786f;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .18s ease;
}

.book-card.open .book-chevron{
    transform:rotate(90deg);
}

.book-actions{
    display:none;
    grid-template-columns:1fr;
    gap:8px;
    padding:0 11px 12px 83px;
}

.book-card.open .book-actions{
    display:grid;
}

.state-toggle{
    min-height:42px;
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #2b322c;
    border-radius:12px;
    background:#1a1f1a;
    color:#c2c8c2;
    padding:0 12px;
    text-align:left;
}

.state-toggle.active{
    border-color:rgba(72,201,120,.55);
    color:#f4fff7;
}

.state-dot{
    width:18px;
    height:18px;
    flex:0 0 auto;
    border:1.5px solid #6d766d;
    border-radius:50%;
    position:relative;
}

.state-toggle.active .state-dot{
    border-color:var(--green);
    background:var(--green);
}

.state-toggle.active .state-dot::after{
    content:"";
    position:absolute;
    left:5px;
    top:2px;
    width:4px;
    height:8px;
    border:solid #0d1a11;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.loan-panel{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    margin-top:2px;
}

.loan-panel.hidden{
    display:none;
}

.loan-name{
    min-width:0;
    height:42px;
    border:1px solid #2b322c;
    border-radius:12px;
    background:#111411;
    color:var(--text);
    padding:0 12px;
    outline:none;
}

.loan-name:focus{
    border-color:var(--green);
}

.loan-return{
    border:1px solid #394039;
    border-radius:12px;
    background:#202520;
    color:#f5f5f2;
    padding:0 13px;
}

.loan-return.hidden{
    display:none;
}

@media (max-width:380px){
    .book-actions{
        padding-left:11px;
    }
}

.books-search-wrap{
    position:relative;
    margin-bottom:14px;
}

.books-search-icon{
    position:absolute;
    left:15px;
    top:50%;
    width:20px;
    height:20px;
    transform:translateY(-50%);
    fill:none;
    stroke:#7e887f;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    pointer-events:none;
}

.books-search{
    width:100%;
    height:50px;
    padding:0 16px 0 46px;
    border:1px solid #2b322c;
    border-radius:15px;
    background:#171b17;
    color:var(--text);
    font-size:16px;
    outline:none;
    -webkit-appearance:none;
    appearance:none;
}

.books-search:focus{
    border-color:var(--green);
}

.books-search::placeholder{
    color:#788178;
}

.book-card[hidden]{
    display:none;
}

.empty-state.hidden{
    display:none;
}

.book-cover{
    position:relative;
    display:grid;
    place-items:center;
}

.book-cover img{
    position:absolute;
    inset:0;
    z-index:2;
}

.book-placeholder{
    width:27px;
    height:27px;
    fill:none;
    stroke:#6e786f;
    stroke-width:1.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.book-cover:has(img) .book-placeholder{
    opacity:0;
}

.book-cover.missing-cover .book-placeholder{
    opacity:1;
}

.book-badges{
    min-height:18px;
}

.book-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--green);
    font-size:12px;
    line-height:1.3;
}

.book-badge::before{
    content:"";
    width:6px;
    height:6px;
    flex:0 0 auto;
    border-radius:50%;
    background:currentColor;
}

.book-badge.loaned{
    color:#d8b56a;
}

.book-badge.want{
    color:#929b92;
}