:root {
    --bg: #0a0a0f;
    --sf: #12121a;
    --sf2: #1a1a26;
    --bd: #2a2a3a;
    --ac: #00e5a0;
    --acd: #00e5a020;
    --acm: #00e5a060;
    --dn: #ff4466;
    --tx: #e8e8f0;
    --txd: #8888a0;
    --txb: #fff;
    --or: #ffaa00;
    --r: 12px;
    --blue: #4488ff;
    --purple: #aa66ff;
    --pink: #ff66aa
}

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

div.view-hidden {
    display: none !important
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--tx);
    min-height: 100vh
}

.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px
}

.login-box {
    width: 100%;
    max-width: 380px;
    text-align: center
}

.login-logo {
    width: 72px;
    height: 72px;
    background: var(--ac);
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: 24px
}

.login-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 24px;
    font-weight: 700;
    color: var(--txb);
    margin-bottom: 8px
}

.login-title span {
    color: var(--ac)
}

.login-sub {
    color: var(--txd);
    font-size: 14px;
    margin-bottom: 32px
}

.li-wrap {
    position: relative;
    margin-bottom: 16px
}

.li-input {
    width: 100%;
    padding: 16px 50px 16px 20px;
    background: var(--sf);
    border: 2px solid var(--bd);
    border-radius: var(--r);
    color: var(--txb);
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    outline: none;
    transition: border-color .2s
}

.li-input:focus {
    border-color: var(--ac)
}

.li-input.err {
    border-color: var(--dn);
    animation: shake .4s
}

.li-tog {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--txd);
    cursor: pointer;
    font-size: 18px
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(-8px)
    }

    75% {
        transform: translateX(8px)
    }
}

.li-btn {
    width: 100%;
    padding: 16px;
    background: var(--ac);
    color: var(--bg);
    border: none;
    border-radius: var(--r);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer
}

.li-btn:disabled {
    opacity: .3;
    cursor: not-allowed
}

.li-err {
    margin-top: 16px;
    font-size: 13px;
    color: var(--dn);
    min-height: 20px
}

.li-lock {
    margin-top: 20px;
    padding: 16px;
    background: #ff446615;
    border: 1px solid #ff446640;
    border-radius: var(--r);
    color: var(--dn);
    font-size: 14px
}

.lk-timer {
    font-family: 'JetBrains Mono', monospace;
    font-size: 28px;
    font-weight: 700;
    margin-top: 8px
}

.app {
    display: none
}

.app.vis {
    display: block
}

.hdr {
    position: sticky;
    top: 0;
    z-index: 300;
    background: var(--bg);
    border-bottom: 1px solid var(--bd);
    padding: 16px 20px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center
}

.logo {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 10px
}

.ham-btn {
    display: none;
    grid-column: 1;
    display: none;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--txb);
    z-index: 300;
}

.ham-ic {
    font-size: 20px;
    line-height: 1
}

.logo-ic {
    width: 36px;
    height: 36px;
    background: var(--ac);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px
}

.logo-tx {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 18px;
    color: var(--txb)
}

.logo-tx span {
    color: var(--ac)
}

.hdr-r {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px
}

.badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    background: var(--sf2);
    border: 1px solid var(--bd);
    border-radius: 20px;
    padding: 6px 14px;
    color: var(--txd)
}

.badge strong {
    color: var(--ac)
}

.lo-btn {
    background: none;
    border: 1px solid var(--bd);
    border-radius: 8px;
    padding: 6px 10px;
    color: var(--txd);
    cursor: pointer;
    font-size: 14px;
    transition: all .2s
}

.lo-btn:hover {
    border-color: var(--dn);
    color: var(--dn)
}

.tabs {
    grid-column: 2;
    display: flex;
    gap: 4px
}

/* ── Prism navbar ── */
.prism-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--sf);
    border-bottom: 1px solid var(--bd);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    gap: 8px;
    overflow-x: auto;
}

.prism-nav-tabs {
    display: flex;
    gap: 2px;
    flex-wrap: nowrap;
    min-width: 0;
}

.prism-nav-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

.prism-nav-username {
    font-size: 12px;
    color: var(--txd);
}

.prism-nav-logout {
    background: none;
    border: 1px solid var(--bd);
    color: var(--txd);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    transition: all .15s;
}

.prism-nav-logout:hover {
    border-color: var(--dn);
    color: var(--dn);
}

.tab {
    flex: 0 0 auto;
    padding: 8px 16px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    color: var(--txd);
    cursor: pointer;
    border-radius: 8px;
    border: none;
    background: none;
    font-family: inherit;
    transition: all .2s;
    user-select: none;
    white-space: nowrap
}
.tab:hover { color: var(--tx); }

.tab.on {
    color: var(--ac);
    background: var(--acd)
}

.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 199
}

.nav-backdrop.open {
    display: block
}

/* Camera */
.cam-v {
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
    padding: 24px 20px;
    flex-wrap: wrap
}

.scan-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start
}

.scan-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 280px;
    max-width: 500px
}

.cam-z {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 3/4;
    background: var(--sf);
    border: 2px dashed var(--bd);
    border-radius: var(--r);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s;
    position: relative;
    overflow: hidden
}

.cam-z:hover,
.cam-z.dov {
    border-color: var(--ac);
    background: var(--acd)
}

.cam-z img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--r)
}

.cam-z .ph {
    text-align: center;
    z-index: 1
}

.cam-z .ph-ic {
    font-size: 48px;
    margin-bottom: 8px
}

.cam-z .ph p {
    color: var(--txd);
    font-size: 14px
}

.cam-btns {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 500px
}

.btn {
    flex: 1;
    padding: 16px;
    border: none;
    border-radius: var(--r);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.btn-p {
    background: var(--ac);
    color: var(--bg)
}

.btn-p:hover {
    opacity: .9
}

.btn-s {
    background: var(--sf2);
    color: var(--tx);
    border: 1px solid var(--bd)
}

.btn-s:hover {
    border-color: var(--ac)
}

input[type="file"] {
    display: none
}

.queue {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.q-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--txd);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px
}

.q-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: 10px;
    padding: 12px;
    animation: si .3s
}

@keyframes si {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.q-info {
    flex: 1
}

.q-info .nm {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.q-info .st {
    font-size: 12px;
    color: var(--txd);
    display: flex;
    align-items: center;
    gap: 6px
}

.sd {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block
}

.sd.uploading {
    background: var(--or);
    animation: pu 1s infinite
}

.sd.queued {
    background: var(--blue);
    animation: pu 1s infinite
}

.sd.processing {
    background: var(--ac);
    animation: pu 1s infinite
}

.sd.done {
    background: var(--ac)
}

.sd.error {
    background: var(--dn)
}

@keyframes pu {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .4
    }
}

/* Tickets */
.tk-v {
    padding: 16px 20px
}

.tk-tb {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px
}

.tc {
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .2s
}

.tc:hover {
    border-color: var(--acm)
}

.tc-h {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    cursor: pointer
}

.tc-store {
    font-weight: 700;
    font-size: 16px;
    color: var(--txb)
}

.tc-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--txd);
    margin-top: 4px
}

.tc-total {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 20px;
    color: var(--ac);
    text-align: right
}

.tc-total .cur {
    font-size: 12px;
    color: var(--txd);
    font-weight: 400
}

.tc-det {
    display: none;
    border-top: 1px solid var(--bd);
    padding: 16px
}

.tc-det.op {
    display: block
}

.tc-img {
    margin-bottom: 12px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--sf2);
    cursor: pointer
}

.tc-img img {
    width: 100%;
    display: block;
    max-height: 300px;
    object-fit: contain
}

/* Tags */
.tc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px
}

.tag {
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--acd);
    color: var(--ac);
    border: 1px solid var(--acm)
}

.tag-edit {
    margin-top: 8px
}

.tag-input {
    width: 100%;
    padding: 8px 12px;
    background: var(--sf2);
    border: 1px solid var(--bd);
    border-radius: 8px;
    color: var(--tx);
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    outline: none
}

.tag-input:focus {
    border-color: var(--ac)
}

.tag-hint {
    font-size: 10px;
    color: var(--txd);
    margin-top: 4px
}

.tk-items {
    width: 100%;
    border-collapse: collapse
}

.tk-items th {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--txd);
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--bd)
}

.tk-items td {
    font-size: 13px;
    padding: 8px;
    border-bottom: 1px solid var(--bd)
}

.tk-items td:last-child {
    font-family: 'JetBrains Mono', monospace;
    text-align: right;
    color: var(--txb)
}

.tc-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px
}

.mi {
    font-size: 12px
}

.mi-l {
    color: var(--txd);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px
}

.mi-v {
    color: var(--tx);
    margin-top: 2px;
    cursor: text;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all .2s;
    min-height: 24px;
    outline: none
}

.mi-v:hover {
    border-color: var(--bd)
}

.mi-v:focus {
    border-color: var(--ac);
    background: var(--sf2)
}

.mi-v[contenteditable="true"]:empty::before {
    content: attr(data-ph);
    color: var(--txd);
    font-style: italic
}

.tc-acts {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bd);
    flex-wrap: wrap
}

.bs {
    padding: 8px 14px;
    border: 1px solid var(--bd);
    border-radius: 8px;
    background: transparent;
    color: var(--txd);
    font-size: 12px;
    cursor: pointer;
    transition: all .2s
}

.bs:hover {
    border-color: var(--txd);
    color: var(--tx)
}

.bs.dn:hover {
    border-color: var(--dn);
    color: var(--dn)
}

.bs.sv {
    border-color: var(--ac);
    color: var(--ac);
    display: none
}

.bs.sv.vis {
    display: inline-flex
}

.bs.rp {
    border-color: var(--blue);
    color: var(--blue)
}

.bs.rp:hover {
    background: var(--blue);
    color: var(--bg)
}

.bs.rp.loading {
    opacity: .5;
    pointer-events: none
}

.empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--txd)
}

.empty .ic {
    font-size: 48px;
    margin-bottom: 16px
}

/* Pending banner */
.pend-banner {
    background: var(--sf);
    border: 1px solid var(--or);
    border-radius: var(--r);
    padding: 14px 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    animation: si .3s
}

.pend-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--or)
}

.pend-info .pend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--or);
    animation: pu 1.5s infinite
}

.pend-info strong {
    color: var(--txb)
}

.bs.retry {
    border-color: var(--or);
    color: var(--or);
    white-space: nowrap
}

.bs.retry:hover {
    background: var(--or);
    color: var(--bg)
}

.bs.retry.loading {
    opacity: .5;
    pointer-events: none
}

/* Failed tickets banner */
.failed-banner {
    background: var(--sf);
    border: 1px solid #ff446650;
    border-radius: var(--r);
    padding: 14px 18px;
    margin-bottom: 16px;
    animation: si .3s
}

.failed-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--dn);
    margin-bottom: 10px
}

.failed-header strong {
    color: var(--txb)
}

.failed-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dn);
    flex-shrink: 0
}

.failed-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.failed-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--sf2);
    border: 1px solid #ff446625;
    border-radius: 8px;
    padding: 10px 12px
}

.failed-info {
    flex: 1;
    min-width: 0
}

.failed-ts {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--tx);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.failed-retries {
    font-size: 11px;
    color: var(--dn);
    margin-top: 2px
}

.failed-acts {
    display: flex;
    gap: 6px;
    flex-shrink: 0
}

.bs.frc {
    border-color: var(--blue);
    color: var(--blue)
}

.bs.frc:hover {
    background: var(--blue);
    color: var(--bg)
}

.bs.frc:disabled {
    opacity: .5;
    pointer-events: none
}

/* Stores management */
.stores-hint {
    font-size: 12px;
    color: var(--txd);
    margin-bottom: 12px;
    line-height: 1.5
}

.stores-list {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.store-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--sf2);
    border: 1px solid var(--bd);
    border-radius: 8px;
    padding: 10px 14px;
    transition: border-color .2s
}

.store-row:hover {
    border-color: var(--acm)
}

.store-nm {
    font-size: 14px;
    font-weight: 500;
    color: var(--tx);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.store-acts {
    display: flex;
    gap: 6px;
    flex-shrink: 0
}

.store-input {
    flex: 1;
    padding: 6px 10px;
    background: var(--bg);
    border: 1px solid var(--ac);
    border-radius: 6px;
    color: var(--txb);
    font-size: 14px;
    outline: none;
    min-width: 0
}

/* Field suggestions */
.sugg-list {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.sugg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--sf2);
    border: 1px solid var(--bd);
    border-radius: 8px;
    padding: 10px 14px;
    transition: border-color .2s
}

.sugg-row:hover {
    border-color: var(--acm)
}

.sugg-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap
}

.sugg-nm {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--txb)
}

.sugg-cnt {
    font-size: 12px;
    color: var(--txd);
    background: var(--sf);
    padding: 2px 7px;
    border-radius: 10px
}

.sugg-sample {
    font-size: 12px;
    color: var(--tx);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px
}

/* Analytics */
.an-v {
    padding: 20px;
}

.an-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px
}

.an-card {
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: 20px;
    text-align: center
}

.an-card .num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 28px;
    font-weight: 700;
    color: var(--ac)
}

.an-card .lbl {
    font-size: 12px;
    color: var(--txd);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .5px
}

.an-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px
}

.an-chart-card {
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: 20px;
    align-self: start
}

.an-chart-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--txd);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px
}

.an-section {
    margin-bottom: 24px
}

.gs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: start
}

.gs-col {
    margin-bottom: 0
}

.gs-pager {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 8px
}

.gs-page-info {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--txd)
}

@media(max-width:700px) {
    .gs-grid { grid-template-columns: 1fr }
}

.an-section h3 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--txd);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bd)
}

.an-tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.an-tag {
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid;
    transition: all .2s;
    cursor: default
}

.an-month-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px
}

.an-month-card {
    background: var(--sf2);
    border: 1px solid var(--bd);
    border-radius: 8px;
    padding: 12px;
    text-align: center
}

.an-month-card .m {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--txd)
}

.an-month-card .v {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--txb);
    margin-top: 4px
}

/* Lightbox */
.lb {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: zoom-out
}

.lb.op {
    display: flex
}

.lb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px
}

.lb-x {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer
}

.tc-wrap {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none
}

.tst {
    background: var(--sf2);
    border: 1px solid var(--bd);
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: auto;
    animation: ti .3s ease, to .3s ease 2.7s forwards
}

.tst.ok {
    border-color: var(--ac);
    color: var(--ac)
}

.tst.er {
    border-color: var(--dn);
    color: var(--dn)
}

@keyframes ti {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes to {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

/* ── Queue panel (scan right) ── */
.scan-right {
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    display: flex;
    flex-direction: column;
    min-width: 280px;
    flex: 1
}

.qp-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--bd);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0
}

.qp-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--txd);
    text-transform: uppercase;
    letter-spacing: 1px
}

.qp-counts {
    display: flex;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px
}

.qp-count-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px
}

.qp-count-badge.queued {
    background: rgba(68,136,255,.15);
    color: var(--blue)
}

.qp-count-badge.processing {
    background: var(--acd);
    color: var(--ac)
}

.qp-count-badge.pending {
    background: rgba(255,170,0,.15);
    color: var(--or)
}

.qp-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px
}

.qp-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--txd);
    font-size: 13px
}

.qp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background .15s;
    border-bottom: 1px solid var(--bd)
}

.qp-item:last-child {
    border-bottom: none
}

.qp-item:hover {
    background: var(--sf2)
}

.qp-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0
}

.qp-item-dot.queued {
    background: var(--blue);
    animation: pu 1s infinite
}

.qp-item-dot.processing {
    background: var(--ac);
    animation: pu 1s infinite
}

.qp-item-dot.pending {
    background: var(--or)
}

.qp-item-info {
    flex: 1;
    min-width: 0
}

.qp-item-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--tx);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.qp-item-meta {
    font-size: 11px;
    color: var(--txd);
    margin-top: 2px;
    display: flex;
    gap: 8px;
    align-items: center
}

.qp-item-status {
    font-size: 11px;
    font-weight: 600
}

.qp-item-status.queued { color: var(--blue) }
.qp-item-status.pending { color: var(--or) }

.qp-item-err {
    font-size: 10px;
    color: var(--dn);
    background: rgba(255,68,102,.1);
    padding: 1px 6px;
    border-radius: 4px
}

.qp-pager {
    padding: 10px 16px;
    border-top: 1px solid var(--bd);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0
}

.qp-pager .bs {
    padding: 4px 10px;
    font-size: 11px
}

.qp-pager .bs:disabled {
    opacity: .3;
    cursor: not-allowed;
    pointer-events: none
}

.qp-page-info {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--txd)
}

@media(max-width:860px) {
    .cam-v {
        justify-content: center
    }
    .scan-left {
        max-width: 100%
    }
    .scan-right {
        max-height: 400px;
        width: 100%
    }
    .scan-layout {
        grid-template-columns: 1fr;
        max-width: 500px
    }
}

@media(max-width:640px) {
    .logo { display: none }
    .ham-btn { display: flex }

    .tabs {
        position: fixed;
        top: 0;
        left: 0;
        width: 80%;
        height: 100%;
        z-index: 200;
        background: var(--sf);
        border-right: 1px solid var(--bd);
        flex-direction: column;
        gap: 0;
        padding: 72px 0 20px;
        transform: translateX(-100%);
        transition: transform .3s ease
    }

    .tabs.open { transform: translateX(0) }

    .tab {
        border-radius: 0;
        text-align: left;
        padding: 16px 24px;
        font-size: 14px;
        border-left: 3px solid transparent
    }

    .tab.on {
        border-left-color: var(--ac);
        border-radius: 0
    }
}

@media(max-width:700px) {
    .an-charts-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:500px) {
    .an-cards {
        grid-template-columns: 1fr
    }

    .tc-meta {
        grid-template-columns: 1fr
    }

    .hdr {
        padding: 12px 16px
    }
}

.tk-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 0 8px
}

.tk-pages .bs {
    padding: 8px 16px;
    font-size: 13px
}

.tk-pages .bs:disabled {
    opacity: .3;
    cursor: not-allowed;
    pointer-events: none
}

.pg-info {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--txd);
    min-width: 120px;
    text-align: center
}

/* ── Duplicate modal ────────────────────────────────────────────────────── */
.dup-overlay {
    display: none
}
.dup-overlay.open {
    display: flex;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.8);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 16px
}
.dup-modal {
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: 24px;
    max-width: 480px;
    width: 100%
}
.dup-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--or);
    margin-bottom: 6px
}
.dup-sub {
    font-size: 13px;
    color: var(--txd);
    margin-bottom: 18px
}
.dup-imgs {
    display: flex;
    gap: 12px;
    margin-bottom: 20px
}
.dup-img-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px
}
.dup-img-lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--txd);
    text-transform: uppercase;
    letter-spacing: .05em
}
.dup-img-col img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--bd);
    background: var(--sf2)
}
.dup-btns {
    display: flex;
    gap: 10px
}
.dup-btns .btn { flex: 1 }

/* ── Filter panel ── */
.tk-fp {
    display: none;
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: 16px;
    margin-bottom: 12px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    animation: si .2s
}

.tk-fp.open { display: block }

.fp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 14px
}

.fp-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--txd);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px
}

.fp-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 100px;
    overflow-y: auto
}

.fp-pill {
    padding: 4px 12px;
    border: 1px solid var(--bd);
    border-radius: 20px;
    background: transparent;
    color: var(--txd);
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap
}

.fp-pill.on {
    background: var(--acd);
    color: var(--ac);
    border-color: var(--acm)
}

.fp-pill:hover { border-color: var(--txd); color: var(--tx) }

.fp-empty, .fp-loading {
    font-size: 12px;
    color: var(--txd)
}

.fp-range {
    display: flex;
    align-items: center;
    gap: 6px
}

.fp-num, .fp-date {
    flex: 1;
    background: var(--sf2);
    border: 1px solid var(--bd);
    border-radius: 8px;
    padding: 6px 8px;
    color: var(--tx);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    min-width: 0;
    transition: border-color .2s
}

.fp-num:focus, .fp-date:focus { border-color: var(--ac) }

.fp-sep { color: var(--txd); font-size: 12px; flex-shrink: 0 }

.fp-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--bd)
}

/* ── Tickets search & filter ── */
.tk-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 12px;
    max-width: 800px;
    margin: 0 auto
}
.tk-search-input {
    flex: 1;
    background: var(--sf2);
    border: 1px solid var(--bd);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--tx);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color .2s
}
.tk-search-input:focus { border-color: var(--ac) }
#tkActiveFilter {
    align-items: center
}
.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--acd);
    color: var(--ac);
    border: 1px solid var(--acm);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 12px;
    white-space: nowrap
}
.active-filter-chip button {
    background: none;
    border: none;
    color: var(--ac);
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    line-height: 1
}

/* ── Bulk mode ── */
.bulk-bar {
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--sf2);
    border-radius: 8px;
    margin-bottom: 12px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto
}
.bulk-bar label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer
}
#selCount {
    font-size: 13px;
    color: var(--txd);
    flex: 1
}
.tc.bulk-on {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 8px;
    align-items: start
}
.tk-cb {
    margin-top: 14px;
    width: 16px;
    height: 16px;
    accent-color: var(--ac);
    cursor: pointer
}
.tag { cursor: pointer }
.tag:hover { opacity: .75 }
.bs.on {
    background: var(--acd);
    color: var(--ac);
    border-color: var(--acm)
}

/* ── Error reason pill ── */
.err-reason {
    display: inline-block;
    margin-left: 6px;
    background: rgba(255,68,102,.15);
    color: var(--dn);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px
}

/* ── Quota error banner ── */
.quota-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(255,170,0,.12);
    border: 1px solid rgba(255,170,0,.35);
    border-radius: 10px;
    padding: 12px 16px;
    color: #ffaa00;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px
}

/* ── Logs ─────────────────────────────────────────────────── */
.logs-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px
}

.logs-select {
    background: var(--sf2);
    color: var(--tx);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit
}

.logs-search {
    background: var(--sf2);
    color: var(--tx);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
    flex: 1;
    min-width: 160px
}

.logs-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.log-row {
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: 12px;
    border-left: 3px solid var(--bd)
}

.log-row.log-error {
    border-left-color: var(--dn)
}

.log-row.log-warn {
    border-left-color: var(--or)
}

.log-row.log-info {
    border-left-color: var(--blue)
}

.log-hdr {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px
}

.log-lvl {
    text-transform: uppercase;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--sf2)
}

.log-error .log-lvl {
    color: var(--dn);
    background: #ff446620
}

.log-warn .log-lvl {
    color: var(--or);
    background: #ffaa0020
}

.log-info .log-lvl {
    color: var(--blue);
    background: #4488ff20
}

.log-src {
    color: var(--purple);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px
}

.log-time {
    color: var(--txd);
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px
}

.log-msg {
    color: var(--tx);
    font-size: 13px;
    line-height: 1.5
}

.log-ctx {
    margin-top: 8px;
    background: var(--sf2);
    border: 1px solid var(--bd);
    border-radius: 8px;
    padding: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--txd);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto
}

/* ── Bank transactions ────────────────────────────────────────── */
.bank-v {
    padding: 16px 20px
}

.bank-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px
}

.bank-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--txb)
}

.bank-upload-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.bank-progress-card {
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: 16px;
    margin-bottom: 16px
}

.bank-progress-title {
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 14px
}

.bank-progress-bar {
    height: 6px;
    background: var(--sf2);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px
}

.bank-progress-fill {
    height: 100%;
    background: var(--ac);
    border-radius: 3px;
    transition: width .3s ease;
    width: 0
}

.bank-progress-text {
    font-size: 12px;
    color: var(--txd)
}

.bank-preview-header {
    background: var(--sf);
    border: 1px solid var(--blue);
    border-radius: var(--r);
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px
}

.bank-preview-header h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--blue);
    flex: 1;
    min-width: 200px
}

.bank-preview-info {
    font-size: 13px;
    color: var(--txd);
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.bank-dup-count {
    color: var(--or)
}

.bank-preview-actions {
    display: flex;
    gap: 8px
}

.bank-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap
}

.bank-date-filters {
    display: flex;
    align-items: center;
    gap: 6px
}

.bank-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px
}

.bank-table thead th {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--txd);
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--bd);
    white-space: nowrap
}

.bank-table tbody tr {
    border-bottom: 1px solid var(--bd);
    transition: background .15s
}

.bank-table tbody tr:hover {
    background: var(--sf2)
}

.bank-table td {
    padding: 10px 12px;
    color: var(--tx);
    vertical-align: middle
}

.bank-concept {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.bank-amount {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    white-space: nowrap
}

.amt-neg { color: var(--dn) }
.amt-pos { color: var(--ac) }

.bank-file {
    font-size: 11px;
    color: var(--txd);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.bank-row-dup {
    opacity: .4
}

.bank-dup-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--or);
    background: rgba(255,170,0,.15);
    padding: 2px 6px;
    border-radius: 4px
}

.bank-linked {
    font-size: 12px;
    color: var(--ac);
    white-space: nowrap
}

.bank-unlinked {
    font-size: 12px;
    color: var(--txd)
}

.tk-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 0
}

/* ── Analytics source toggle ────────────────────────────────── */
.an-source-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: 8px;
    padding: 4px;
    width: fit-content
}

.an-src-btn {
    background: transparent;
    border: none;
    color: var(--txd);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s
}

.an-src-btn:hover {
    color: var(--tx)
}

.an-src-btn.on {
    background: var(--acd);
    color: var(--ac)
}

.an-chart-wide {
    grid-column: 1 / -1
}

@media(max-width:700px) {
    .bank-table { font-size: 12px }
    .bank-table td, .bank-table th { padding: 8px 6px }
    .bank-header { flex-direction: column; align-items: flex-start }
    .bank-preview-header { flex-direction: column }
}