:root{
    --bg:#f4f7fb;
    --card:#ffffff;
    --line:#dfe6ef;
    --text:#1a2433;
    --muted:#64748b;
    --brand:#1d4ed8;
    --brand-dark:#183b8d;
    --success:#166534;
    --danger:#b91c1c;
    --warning:#b45309;
    --dark:#0f172a;
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:var(--bg);
    color:var(--text);
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.app-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:260px 1fr;
}
.sidebar{
    background:var(--dark);
    color:#fff;
    padding:18px 16px;
    display:flex;
    flex-direction:column;
    gap:18px;
}
.sidebar-brand{
    font-size:22px;
    font-weight:700;
}
.sidebar-nav{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.sidebar-nav a{
    color:#dbeafe;
    padding:10px 12px;
    border-radius:10px;
    display:block;
}
.sidebar-nav a:hover{
    background:rgba(255,255,255,.08);
    text-decoration:none;
}
.sidebar-user{
    margin-top:auto;
    font-size:14px;
    color:#cbd5e1;
}
.logout-link{color:#fff}
.main-content{
    padding:22px;
}
.topbar{
    margin-bottom:16px;
}
.topbar h1{
    margin:0 0 6px;
    font-size:28px;
}
.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:16px;
    padding:18px;
    box-shadow:0 10px 25px rgba(15,23,42,.04);
    margin-bottom:18px;
}
.grid{
    display:grid;
    gap:16px;
}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{
    font-size:30px;
    font-weight:700;
    margin:6px 0;
}
.label{
    color:var(--muted);
    font-size:14px;
}
table{
    width:100%;
    border-collapse:collapse;
}
th,td{
    padding:10px 12px;
    border-bottom:1px solid var(--line);
    vertical-align:top;
    text-align:left;
    font-size:14px;
}
th{
    background:#f8fafc;
}
.form-row{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:12px;
    align-items:center;
    margin-bottom:12px;
}
label{font-weight:600}
input[type="text"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], input[type="month"], select, textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    font-size:15px;
    background:#fff;
}
textarea{min-height:100px; resize:vertical}
.btn{
    border:none;
    background:var(--brand);
    color:#fff;
    padding:10px 14px;
    border-radius:10px;
    cursor:pointer;
    font-weight:600;
    display:inline-block;
}
.btn:hover{background:var(--brand-dark); text-decoration:none}
.btn-secondary{
    background:#475569;
}
.btn-danger{
    background:var(--danger);
}
.btn-light{
    background:#e2e8f0;
    color:#0f172a;
}
.btn-success{
    background:var(--success);
}
.inline-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.alert{
    padding:12px 14px;
    border-radius:12px;
    margin-bottom:14px;
}
.alert-success{
    background:#dcfce7;
    color:#166534;
}
.alert-error{
    background:#fee2e2;
    color:#991b1b;
}
.alert-warning{
    background:#ffedd5;
    color:#9a3412;
}
.text-muted{color:var(--muted)}
.small{font-size:13px}
.badge{
    display:inline-block;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    background:#e2e8f0;
}
.badge-green{background:#dcfce7;color:#166534}
.badge-yellow{background:#fef3c7;color:#92400e}
.badge-blue{background:#dbeafe;color:#1d4ed8}
.badge-red{background:#fee2e2;color:#b91c1c}
.badge-gray{background:#e5e7eb;color:#374151}
.login-wrap{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:20px;
}
.login-card{
    width:min(460px,100%);
    background:#fff;
    border-radius:18px;
    padding:24px;
    border:1px solid var(--line);
    box-shadow:0 10px 30px rgba(2,6,23,.06);
}
pre.ai-box{
    white-space:pre-wrap;
    background:#f8fafc;
    border:1px solid var(--line);
    padding:12px;
    border-radius:12px;
    margin:0;
}
.summary-box{
    background:#f8fafc;
    border:1px dashed #cbd5e1;
    border-radius:12px;
    padding:14px;
}
.kpis{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}
.kpi{
    padding:14px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
}
.table-wrap{
    width:100%;
    overflow:auto;
}
.table-wrap-receipt{
    position:relative;
    overflow-x:auto;
    overflow-y:visible;
    border:1px solid rgba(148,163,184,.22);
    border-radius:16px;
    background:linear-gradient(180deg, rgba(248,250,252,.96) 0%, rgba(255,255,255,.98) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.48);
}
.table-wrap-receipt::after{
    content:"";
    position:sticky;
    left:0;
    display:block;
    height:0;
}
#receipt-items-table{
    position:relative;
}
#receipt-items-table thead th{
    position:sticky;
    top:10px;
    z-index:18;
    background:rgba(241,245,249,.96);
    backdrop-filter:blur(10px);
    box-shadow:inset 0 -1px 0 rgba(148,163,184,.24), 0 8px 20px rgba(15,23,42,.05);
}
#receipt-items-table thead th:first-child{
    border-top-left-radius:14px;
}
#receipt-items-table thead th:last-child{
    border-top-right-radius:14px;
}
@media (max-width: 900px){
    .table-wrap-receipt{
        border-radius:14px;
    }
    #receipt-items-table thead th{
        top:0;
    }
}
.right{
    text-align:right;
}
.nowrap{
    white-space:nowrap;
}
.print-note{
    background:#eef2ff;
    border:1px solid #c7d2fe;
    color:#3730a3;
    border-radius:12px;
    padding:12px;
    margin-bottom:16px;
}

.receipt-total-panel{
    border:1px solid #cbd5e1;
    border-radius:18px;
    padding:16px;
    background:linear-gradient(135deg,#eff6ff 0%,#ffffff 55%,#f8fafc 100%);
    box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.receipt-total-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
    flex-wrap:wrap;
}
.receipt-total-label{
    font-size:14px;
    font-weight:700;
    color:#1e3a8a;
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.receipt-total-value{
    font-size:34px;
    line-height:1.15;
    font-weight:800;
    color:#0f172a;
    word-break:break-word;
    margin-bottom:10px;
}
.receipt-total-input-wrap{
    position:relative;
}
.receipt-total-input-wrap input{
    font-size:22px;
    font-weight:800;
    padding-right:76px;
    background:#fff;
}
.receipt-total-suffix{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    font-weight:800;
    color:#0f172a;
}
.receipt-total-words-label{
    margin-top:12px;
    font-size:13px;
    font-weight:700;
    color:#475569;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.receipt-total-words{
    margin-top:6px;
    padding:12px 14px;
    border-radius:14px;
    background:#fff;
    border:1px dashed #93c5fd;
    color:#0f172a;
    font-size:18px;
    font-weight:700;
    line-height:1.55;
}
@media (max-width: 900px){
    #receipt-form{padding-bottom:110px;}
    .receipt-total-panel{
        position:fixed;
        left:12px;
        right:12px;
        bottom:12px;
        z-index:40;
        border:1px solid #93c5fd;
        background:rgba(255,255,255,.98);
        backdrop-filter:blur(8px);
        box-shadow:0 14px 30px rgba(15,23,42,.14);
    }
    .receipt-total-value{font-size:30px;}
    .receipt-total-input-wrap input{font-size:20px;}
    .receipt-total-words{font-size:16px; padding:10px 12px;}
}

@media print{
    .no-print, .sidebar, .topbar, .alert{display:none !important}
    .app-shell{display:block}
    .main-content{padding:0}
    body{background:#fff}
    .card{box-shadow:none; border:none; padding:0; margin-bottom:12px}
}
@media (max-width: 1100px){
    .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 900px){
    .app-shell{grid-template-columns:1fr}
    .sidebar{display:none}
    .grid-2,.grid-3,.kpis{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr}
    .main-content{padding:14px}
    th,td{font-size:13px; padding:8px}
    .inline-actions .btn{width:100%; text-align:center}
}

.ai-panel{
    border-color:#c7d2fe;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}
.ai-toolbar .btn{
    min-width:170px;
    text-align:center;
}
.ai-result-card{
    border-color:#dbeafe;
    box-shadow:none;
}
@media (max-width: 900px){
    .ai-toolbar{width:100%}
    .ai-toolbar .btn{width:100%}
}


.save-mode-box{
    margin:16px 0 18px;
    background:#f8fafc;
    border:1px dashed #cbd5e1;
    border-radius:14px;
    padding:14px;
}
.save-mode-title{
    font-weight:700;
    margin-bottom:10px;
}
.save-mode-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.save-mode-card{
    display:flex;
    align-items:flex-start;
    gap:10px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px;
    cursor:pointer;
}
.save-mode-card input{
    width:auto;
    margin-top:3px;
}
@media (max-width: 900px){
    .save-mode-grid{grid-template-columns:1fr}
    .save-mode-card{padding:12px}
}

.save-mode-box{
    margin:18px 0;
    padding:16px;
    background:#f8fafc;
    border:1px solid var(--line);
    border-radius:14px;
}
.save-mode-title{
    font-weight:700;
    margin-bottom:12px;
}
.save-mode-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.save-mode-card{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:14px;
    border:1px solid #cbd5e1;
    border-radius:12px;
    background:#fff;
}
.save-mode-card input{
    margin-top:4px;
}
.ai-grid .card{
    border-radius:14px;
}
.ai-toolbar .btn{
    min-width:170px;
    text-align:center;
}
@media (max-width: 900px){
    .save-mode-grid{grid-template-columns:1fr}
}

.category-cell{
    display:grid;
    gap:8px;
}
.input-with-action{
    display:grid;
    grid-template-columns:minmax(0,1fr) 42px;
    gap:8px;
    align-items:center;
}
.btn-icon{
    width:42px;
    min-width:42px;
    height:42px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    line-height:1;
}
.form-row-stack{
    grid-template-columns:1fr;
    align-items:stretch;
}
body.modal-open{
    overflow:hidden;
}
.modal-backdrop{
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.58);
    backdrop-filter:blur(4px);
    display:grid;
    place-items:center;
    padding:20px;
    z-index:1000;
}
.modal-backdrop[hidden]{
    display:none;
}
.modal-card{
    width:min(520px,100%);
    background:var(--card);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:0 24px 60px rgba(15,23,42,.28);
    padding:18px;
}
.modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}
.modal-body{
    display:grid;
    gap:12px;
}
@media (max-width: 768px){
    .input-with-action{
        grid-template-columns:minmax(0,1fr) 40px;
    }
    .btn-icon{
        width:40px;
        min-width:40px;
        height:40px;
    }
}

.btn-sm{
    padding:7px 10px;
    border-radius:9px;
    font-size:12px;
    font-weight:700;
}
.line-no-cell{
    text-align:center;
    vertical-align:middle;
}
.line-no-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    height:34px;
    padding:0 10px;
    border-radius:999px;
    background:#dbeafe;
    color:#1d4ed8;
    font-weight:800;
    box-shadow:inset 0 0 0 1px rgba(29,78,216,.08);
}
.row-actions{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:74px;
}
#receipt-items-table tbody tr:hover{
    background:rgba(59,130,246,.03);
}
#receipt-items-table tbody tr:hover td.line-no-cell{
    background:linear-gradient(90deg, rgba(239,246,255,.98) 0%, rgba(239,246,255,.94) 100%);
}
#receipt-items-table tbody tr:hover td.nowrap{
    background:linear-gradient(270deg, rgba(239,246,255,.98) 0%, rgba(239,246,255,.94) 100%);
}
#receipt-items-table td{
    vertical-align:middle;
}
#receipt-items-table thead th:first-child,
#receipt-items-table td.line-no-cell{
    position:sticky;
    left:0;
    z-index:10;
}
#receipt-items-table thead th:first-child{
    z-index:21;
}
#receipt-items-table td.line-no-cell{
    background:linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 100%);
    box-shadow:1px 0 0 rgba(148,163,184,.12);
}
#receipt-items-table thead th:last-child,
#receipt-items-table td.nowrap{
    position:sticky;
    right:0;
}
#receipt-items-table thead th:last-child{
    z-index:21;
}
#receipt-items-table td.nowrap{
    background:linear-gradient(270deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.94) 100%);
    box-shadow:-1px 0 0 rgba(148,163,184,.12);
    z-index:9;
}
@media (max-width: 900px){
    .row-actions{
        min-width:unset;
    }
    .line-no-badge{
        min-width:30px;
        height:30px;
        font-size:12px;
    }
}


.line-tools{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
}
.drag-handle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:12px;
    border:1px dashed rgba(29,78,216,.28);
    background:#eff6ff;
    color:#1d4ed8;
    cursor:grab;
    user-select:none;
    letter-spacing:-1px;
    font-size:18px;
    line-height:1;
}
.drag-handle:active{
    cursor:grabbing;
}
.row-actions-inline{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
}
#receipt-items-table tbody tr.is-dragging{
    opacity:.45;
}
#receipt-items-table tbody tr.drag-over-top{
    box-shadow:inset 0 3px 0 #1d4ed8;
}
#receipt-items-table tbody tr.drag-over-bottom{
    box-shadow:inset 0 -3px 0 #1d4ed8;
}
@media (max-width: 900px){
    .line-tools{
        gap:4px;
    }
    .drag-handle{
        width:30px;
        height:30px;
        font-size:16px;
    }
    .row-actions-inline{
        grid-template-columns:repeat(2,minmax(44px,1fr));
    }
}


.draft-box{
    background:linear-gradient(180deg, rgba(236,253,245,.96) 0%, rgba(248,250,252,.98) 100%);
}
.draft-box-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}
.draft-status-line{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:12px;
    padding:10px 12px;
    border-radius:12px;
    background:#ffffff;
    border:1px dashed #bbf7d0;
}
.draft-status-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background:#94a3b8;
    flex:0 0 auto;
}
.draft-status-line.is-saving .draft-status-dot{
    background:#f59e0b;
    box-shadow:0 0 0 6px rgba(245,158,11,.15);
}
.draft-status-line.is-ready .draft-status-dot{
    background:#16a34a;
    box-shadow:0 0 0 6px rgba(34,197,94,.14);
}
.draft-status-line.is-warning .draft-status-dot{
    background:#ef4444;
    box-shadow:0 0 0 6px rgba(239,68,68,.12);
}
.draft-actions .btn{
    min-width:140px;
}
@media (max-width: 900px){
    .draft-box-head{
        flex-direction:column;
        align-items:flex-start;
    }
    .draft-actions{
        width:100%;
    }
    .draft-actions .btn{
        width:100%;
    }
}


.receipt-workspace{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 340px;
    gap:16px;
    align-items:start;
}
.receipt-workspace-main,
.receipt-workspace-aside{
    min-width:0;
}
.receipt-sticky-stack{
    position:sticky;
    top:86px;
    display:grid;
    gap:12px;
}
.receipt-side-card{
    background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
    border:1px solid #dbeafe;
    border-radius:18px;
    padding:14px;
    box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.receipt-side-title{
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#334155;
    margin-bottom:12px;
}
.receipt-mini-stats{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.receipt-mini-stat{
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:12px;
    background:#fff;
    min-height:82px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:8px;
}
.receipt-mini-label{
    font-size:12px;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.receipt-mini-stat strong{
    font-size:20px;
    line-height:1.2;
    color:#0f172a;
    word-break:break-word;
}
.receipt-currency-list{
    display:grid;
    gap:10px;
}
.receipt-currency-item{
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:12px;
    background:#fff;
}
.receipt-currency-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:6px;
}
.receipt-currency-head strong{
    font-size:15px;
    color:#0f172a;
}
.receipt-currency-meta{
    font-size:13px;
    color:#64748b;
}
.receipt-currency-vnd{
    margin-top:6px;
    font-size:16px;
    font-weight:800;
    color:#0f172a;
}
.receipt-currency-flag{
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    border-radius:999px;
    background:#ecfdf5;
    color:#15803d;
    font-size:11px;
    font-weight:700;
}
.receipt-currency-flag.warning{
    background:#fff7ed;
    color:#c2410c;
}
.receipt-currency-empty{
    padding:14px;
    border-radius:14px;
    background:#fff;
    border:1px dashed #cbd5e1;
    color:#64748b;
    font-size:14px;
}
.receipt-warning-card{
    border-color:#fecaca;
    background:linear-gradient(180deg,#fff7f7 0%,#ffffff 100%);
}
.receipt-warning-card.has-warning{
    border-color:#fca5a5;
    box-shadow:0 12px 26px rgba(239,68,68,.08);
}
.receipt-warning-list{
    margin:0;
    padding-left:18px;
    color:#7f1d1d;
    display:grid;
    gap:8px;
}
.receipt-warning-list li{
    line-height:1.5;
}
@media (max-width: 1180px){
    .receipt-workspace{
        grid-template-columns:minmax(0, 1fr);
    }
    .receipt-sticky-stack{
        position:static;
    }
}
@media (max-width: 640px){
    .receipt-mini-stats{
        grid-template-columns:minmax(0,1fr);
    }
    .receipt-mini-stat strong{
        font-size:18px;
    }
}


.receipt-bottom-spacer{
    height:88px;
}
.receipt-bottom-bar{
    position:fixed;
    left:292px;
    right:22px;
    bottom:14px;
    z-index:70;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 14px;
    border-radius:18px;
    border:1px solid rgba(148,163,184,.28);
    background:rgba(2,6,23,.92);
    color:#e2e8f0;
    box-shadow:0 18px 42px rgba(2,6,23,.28);
    backdrop-filter:blur(12px);
    transform:translateY(120%);
    opacity:0;
    pointer-events:none;
    transition:transform .22s ease, opacity .22s ease;
}
.receipt-bottom-bar.is-visible{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
}
.receipt-bottom-bar-main{
    min-width:0;
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}
.receipt-bottom-kind{
    display:inline-flex;
    align-items:center;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(59,130,246,.16);
    border:1px solid rgba(96,165,250,.28);
    color:#dbeafe;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.receipt-bottom-total-wrap{
    display:flex;
    align-items:baseline;
    gap:8px;
    min-width:0;
}
.receipt-bottom-total-label{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#94a3b8;
    font-weight:700;
}
.receipt-bottom-total-wrap strong{
    font-size:24px;
    line-height:1.1;
    color:#f8fafc;
    white-space:nowrap;
}
.receipt-bottom-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    color:#cbd5e1;
    font-size:13px;
}
.receipt-bottom-meta > span{
    display:inline-flex;
    align-items:center;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(15,23,42,.46);
    border:1px solid rgba(148,163,184,.16);
}
.receipt-bottom-state.is-ready{
    color:#dcfce7;
    background:rgba(34,197,94,.14);
    border-color:rgba(34,197,94,.26);
}
.receipt-bottom-state.is-warning{
    color:#fee2e2;
    background:rgba(239,68,68,.14);
    border-color:rgba(239,68,68,.26);
}
.receipt-bottom-bar-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}
.receipt-bottom-bar-actions .btn{
    min-width:100px;
}
@media (max-width: 1180px){
    .receipt-bottom-bar{
        left:22px;
    }
}
@media (max-width: 900px){
    .receipt-bottom-spacer{
        height:98px;
    }
    .receipt-bottom-bar{
        left:12px;
        right:12px;
        bottom:10px;
        border-radius:16px;
        padding:10px 12px;
        flex-direction:column;
        align-items:stretch;
    }
    .receipt-bottom-total-wrap strong{
        font-size:22px;
    }
    .receipt-bottom-bar-actions{
        width:100%;
        justify-content:stretch;
    }
    .receipt-bottom-bar-actions .btn{
        flex:1 1 0;
        min-width:0;
    }
}
@media print{
    .receipt-bottom-spacer,
    .receipt-bottom-bar{
        display:none !important;
    }
}

.mass-page-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
}
.mass-page-title{
    margin:6px 0 8px;
    font-size:40px;
    line-height:1.05;
}
.mass-head-actions{
    justify-content:flex-end;
    align-items:center;
}
.mass-grid{align-items:start}
.mass-form-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.mass-form-title{margin:4px 0 0;font-size:28px;line-height:1.1}
.mass-fields,
.mass-filter-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}
.mass-field{
    display:grid;
    gap:8px;
    min-width:0;
}
.mass-field-full{
    grid-column:1/-1;
}
.mass-field-label{
    font-size:13px;
    font-weight:800;
    color:#334155;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.mass-input-suffix{
    position:relative;
}
.mass-input-suffix input{
    padding-right:48px;
}
.mass-input-suffix span{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    font-weight:800;
    color:#475569;
}
.mass-preview-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:14px;
}
.mass-total-preview{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:1px dashed #cbd5e1;border-radius:14px;background:#f8fafc;margin-top:18px}
.mass-total-preview strong{font-size:22px;color:var(--brand-dark)}
.mass-submit-actions{
    margin-top:18px;
}
.mass-entry-card textarea{min-height:110px}
.mass-summary-card{
    background:linear-gradient(135deg,#eff6ff 0%,#ffffff 55%,#f8fafc 100%);
    position:sticky;
    top:18px;
}
.mass-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.mass-grand-total{font-size:38px;font-weight:800;line-height:1.1;margin-top:8px;color:var(--brand-dark)}
.mass-column-note{
    margin-top:12px;
}
.mass-list-head{
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
    gap:12px;
    flex-wrap:wrap;
}
.mass-filter-grid{
    margin-bottom:16px;
    align-items:end;
}
.mass-filter-actions{
    align-items:center;
}
.mass-checkbox{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:44px;
    padding:10px 12px;
    border:1px solid #cbd5e1;
    border-radius:12px;
    background:#fff;
    font-weight:600;
}
.mass-checkbox input{
    width:auto;
    margin:0;
}
table tfoot th{background:#f8fafc;border-top:2px solid var(--line)}
@media (max-width: 1100px){
    .mass-page-title{font-size:34px}
}
@media (max-width: 900px){
  .mass-page-head,
  .mass-grid,
  .mass-summary-grid,
  .mass-fields,
  .mass-filter-grid,
  .mass-preview-grid{grid-template-columns:1fr}
  .mass-page-head,
  .mass-form-head{flex-direction:column;align-items:flex-start}
  .mass-head-actions{justify-content:flex-start}
  .mass-summary-card{position:static}
}
.mass-split-box{
    margin-top:18px;
    padding:16px;
    border:1px solid #dbeafe;
    border-radius:16px;
    background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
}
.mass-split-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:14px;
}
.mass-parts-list{
    display:grid;
    gap:10px;
}
.mass-part-row{
    display:grid;
    grid-template-columns:92px minmax(0,1fr) minmax(180px,220px) auto;
    gap:10px;
    align-items:center;
}
.mass-part-index{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 12px;
    border-radius:12px;
    background:#eff6ff;
    color:#1d4ed8;
    font-weight:800;
}
.mass-unit-presets{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}
.mass-unit-btn{
    border:1px solid #cbd5e1;
    background:#fff;
    color:#334155;
    border-radius:999px;
    padding:8px 12px;
    font-weight:700;
    cursor:pointer;
    transition:all .18s ease;
}
.mass-unit-btn:hover{
    border-color:#93c5fd;
    color:#1d4ed8;
    transform:translateY(-1px);
}
.mass-unit-btn.is-active{
    background:#1d4ed8;
    border-color:#1d4ed8;
    color:#fff;
    box-shadow:0 8px 18px rgba(29,78,216,.18);
}
.mass-after-split{
    margin-top:16px;
}

.mass-part-result{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 12px;
    border-radius:12px;
    background:#eefbf3;
    border:1px solid #bbf7d0;
    color:#166534;
    font-weight:700;
    text-align:center;
    line-height:1.35;
}
.mass-part-result strong{font-size:18px;color:#15803d}
.mass-part-result span{font-size:12px;color:#166534}
.mass-breakdown-box{
    margin-top:16px;
    padding:14px 16px;
    border:1px dashed #bfdbfe;
    border-radius:14px;
    background:#f8fbff;
}
.mass-breakdown-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px;
}
.mass-breakdown-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 12px;
    border-radius:999px;
    background:#eff6ff;
    color:#1e3a8a;
    font-weight:700;
}
.mass-result-inline{
    min-height:44px;
    display:flex;
    align-items:center;
    gap:18px;
    padding:10px 14px;
    border:1px solid #dbeafe;
    border-radius:12px;
    background:#eff6ff;
    flex-wrap:wrap;
}
.mass-result-inline strong{
    font-size:22px;
    color:#1d4ed8;
    line-height:1;
}
.mass-calc-summary{
    flex-wrap:wrap;
}
.mass-preview-chip-group{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.mass-mini-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 12px;
    border-radius:999px;
    background:#eff6ff;
    color:#1e3a8a;
    font-weight:700;
}
.mass-mini-chip strong{font-size:16px;color:#1d4ed8}
.mass-preview-grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.btn-sm{
    padding:8px 12px;
    border-radius:10px;
    font-size:13px;
}
.badge-yellow{
    background:#fef3c7;
    color:#92400e;
}
@media (max-width: 900px){
  .mass-split-head,
  .mass-total-preview{flex-direction:column;align-items:flex-start}
  .mass-part-row,
  .mass-preview-grid-3{grid-template-columns:1fr}
  .mass-preview-chip-group{justify-content:flex-start}
}
.mass-transfer-box{
    margin-top:16px;
    padding:16px;
    border:1px solid #fecaca;
    border-radius:16px;
    background:linear-gradient(180deg,#fff5f5 0%,#ffffff 100%);
}
.mass-transfer-fields{
    margin-top:12px;
}
.mass-transfer-inline{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    align-items:stretch;
    background:#fff1f2;
    border-color:#fecdd3;
}
.mass-transfer-inline > div{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:10px 12px;
    border-radius:12px;
    background:#fff;
    border:1px solid #ffe4e6;
    min-width:0;
}
.mass-transfer-inline span{
    font-size:12px;
    color:#7f1d1d;
    font-weight:700;
}
.mass-transfer-inline strong{
    font-size:20px;
    color:#be123c;
    word-break:break-word;
}
.badge-red{
    background:#fee2e2;
    color:#b91c1c;
}
@media (max-width: 900px){
  .mass-transfer-inline{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .mass-transfer-inline{grid-template-columns:1fr}
}