:root{
    --ink:#17213a; --surface-0:#f4f7fb; --surface-1:#ffffff; --border:#e5ebf4; --muted:#71809a;
    --primary:#3455db; --primary-soft:#eef1ff; --primary-deep:#223bae;
    --success:#117b58; --success-soft:#e9f8f2; --danger:#d64157; --danger-soft:#fff0f2;
    --warn:#bd7410; --warn-soft:#fff6e7; --radius:18px;
    --shadow:0 12px 35px rgba(29,50,105,.08), 0 2px 5px rgba(29,50,105,.04);
}
*{ -webkit-tap-highlight-color:transparent; box-sizing: border-box; }
body{
    margin:0; min-height:100vh; color: var(--ink); font-family: 'Inter', system-ui, sans-serif;
    background: radial-gradient(circle at 92% 4%, rgba(110,140,255,.14), transparent 24rem),
                radial-gradient(circle at 3% 28%, rgba(28,198,170,.08), transparent 26rem), var(--surface-0);
}
button, input, select, textarea{ transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease, background .2s ease; font-family: 'Inter', sans-serif;}
button:focus-visible, input:focus-visible, select:focus-visible{ outline:3px solid rgba(52,85,219,.26); outline-offset:2px; }
h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.5px; }

.field{ margin-bottom:18px; position:relative; }
.field label{ color:#586882; font-size:12px; letter-spacing:.03em; text-transform:uppercase; margin-bottom:8px; display: block; font-weight: 600;}
.field input, .field select, .field textarea, select{
    width: 100%; border: 1px solid #dce4f0; background:#f8faff; border-radius:11px; padding:12px 13px; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--primary); background:#fff; }
.btn-primary{
    position:relative; z-index:1; overflow:hidden; padding:11px 20px; border-radius:11px; letter-spacing:.01em; font-weight: 600; color: white; border: none; cursor: pointer;
    background:linear-gradient(135deg, #3d61e9, #2945c9); box-shadow:0 10px 19px rgba(52,85,219,.25);
}
.btn-primary:hover{ background:linear-gradient(135deg, #2945c9, #2038ac); transform:translateY(-1px); color: white;}
.btn-ghost{ color:#5d6b83; background:#fff; border: 1px solid #dfe6f0; padding:10px 18px; border-radius:10px; font-weight:600; cursor: pointer;}
.btn-ghost:hover{ color:var(--primary); background:#fff; border-color:var(--primary); transform:translateY(-1px); }
.btn-icon{ background:transparent; color:var(--muted); border:1px solid var(--border); width:32px; height:32px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; cursor: pointer;}
.btn-icon.success:hover{ background:var(--success-soft); color:var(--success); border-color:var(--success-soft); }
.btn-icon.danger:hover{ background:var(--danger-soft); color:var(--danger); border-color:var(--danger-soft); }
.btn-danger-solid{
    padding:9px 16px; border-radius:10px; font-weight:600; font-size:12.5px; color:#fff; border:none; cursor:pointer;
    background:var(--danger);
}
.btn-danger-solid:hover{ background:#b6334a; }

.bulk-bar{
    display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px;
    background:var(--primary-soft); border:1px solid #c7d1fb; border-radius:12px; margin-bottom:12px;
    font-size:13px; font-weight:600; color:var(--primary-deep);
}

#loginScreen{
    min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-card{
    background:var(--surface-1); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
    padding:40px 36px; width:100%; max-width:380px;
}
.login-brand{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.login-brand .mark{
    width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, #62d8c2, #31abbd);
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px;
}
.login-brand span{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px; letter-spacing: -0.5px;}
.login-card p.sub{ color:var(--muted); font-size:13.5px; margin:0 0 26px; }
.login-error{ background:var(--danger-soft); color:var(--danger); font-size:13px; padding:10px 12px; border-radius:8px; margin-bottom:16px; font-weight: 600;}
.login-notice{ background:var(--warn-soft); color:var(--warn); font-size:13px; padding:10px 12px; border-radius:8px; margin-bottom:16px; font-weight: 600;}
.password-wrap{ position:relative; }
.password-wrap input{ width:100%; padding-right:36px; }
.password-wrap i{ position:absolute; right:12px; top:50%; transform:translateY(-50%); cursor:pointer; color:var(--muted); }

.d-flex-layout { display: flex; min-height: 100vh; }
.sidebar {
    width: 260px; background: var(--surface-1); border-right: 1px solid var(--border); padding: 20px 15px; position: fixed; height: 100vh; z-index: 100;
}
.sidebar-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; padding: 0 10px;}
.sidebar-brand .mark {
    width:36px; height:36px; border-radius:10px; font-size:18px; display: flex; align-items: center; justify-content: center; color: white;
    background:linear-gradient(135deg, #62d8c2, #31abbd); box-shadow:0 5px 13px rgba(0,0,0,.15);
}
.sidebar-brand span { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.5px;}
.user-profile {
    padding: 12px; background: var(--surface-0); border-radius: 12px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between;
}
.sidebar-menu { list-style: none; padding: 0; margin: 0; }
.sidebar-menu li a {
    display: flex; align-items: center; gap: 12px; padding: 12px 15px; color: var(--muted); text-decoration: none; font-weight: 600; border-radius: 12px; transition: 0.2s; cursor: pointer;
}
.sidebar-menu li a i { font-size: 18px; }
.sidebar-menu li a:hover, .sidebar-menu li a.active { background: var(--primary-soft); color: var(--primary); }
.main-content { margin-left: 260px; width: calc(100% - 260px); padding: 40px clamp(20px, 4vw, 50px); }

.dc-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:18px; margin-bottom: 30px;}
.dc-card{
    position:relative; overflow:hidden; padding:24px; border-radius:20px; border: 1px solid var(--border);
    background:linear-gradient(145deg, #fff, #f9fbff); box-shadow:var(--shadow); display: flex; flex-direction: column; gap: 12px; cursor:pointer;
}
.dc-card:hover{ border-color:#aebcfa; transform:translateY(-4px); }
.dc-icon{ width:49px; height:49px; border-radius:15px; background:linear-gradient(135deg, #e9eeff, #f2f8ff); display: flex; align-items: center; justify-content: center;}
.dc-icon i{ font-size:23px; color:var(--primary); }
.dc-card .name{ font-family:'Space Grotesk',sans-serif; font-size:16px; color: var(--ink); margin: 0;}
.dc-card .qty{ font-family: 'IBM Plex Mono', monospace; font-size: 32px; font-weight: 700; color: var(--ink); line-height: 1;}

.dash-header-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.dash-header-row h2{ margin-bottom:0; }
.dash-header-filters{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dash-donut-card{
    display:flex; align-items:center; gap:32px; flex-wrap:wrap; padding:28px;
    background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); margin-bottom:20px;
}
.dash-donut-wrap{ width:220px; flex-shrink:0; margin:0 auto; }
.dash-donut-svg{ width:100%; height:auto; overflow:visible; }
.dash-donut-svg circle{ transition: stroke-dasharray .4s ease; }
.dash-donut-total-num{ font-family:'IBM Plex Mono', monospace; font-size:30px; font-weight:700; fill:var(--ink); }
.dash-donut-total-label{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; fill:var(--muted); }
.dash-donut-pct{ font-size:12px; font-weight:700; }
.dash-donut-leader{ opacity:.55; }
.dash-status-grid{ display:grid; grid-template-columns:repeat(2, minmax(120px,1fr)); gap:14px 24px; flex:1 1 260px; }
.dash-status-box{
    display:flex; align-items:center; gap:11px; padding:14px 16px; border-radius:14px;
    box-shadow:0 3px 10px rgba(29,50,105,.06);
}
.dash-status-dot{ width:13px; height:13px; border-radius:50%; flex-shrink:0; }
.dash-status-count{ font-family:'IBM Plex Mono', monospace; font-size:21px; font-weight:700; color:var(--ink) !important; line-height:1.15; }
.dash-status-label{ font-size:11.5px; color:var(--muted); font-weight:600; }

.dash-section-card{
    padding:22px 26px; background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); margin-bottom:20px;
}
.dash-section-title{
    display:flex; align-items:center; gap:9px; font-family:'Space Grotesk',sans-serif; font-size:15.5px;
    font-weight:700; color:var(--ink); margin-bottom:16px;
}
.dash-section-title i{ color:var(--primary); font-size:15px; }
.dash-empty-note{ text-align:center; color:var(--muted); font-size:13.5px; padding:20px 0; }

.dash-notif-list{ display:flex; flex-direction:column; }
.dash-notif-row{
    display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 4px;
    border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s ease;
}
.dash-notif-row:last-child{ border-bottom:none; }
.dash-notif-row:hover{ background:#f8faff; }
.dash-notif-row i{ color:var(--muted); font-size:14px; flex-shrink:0; }
.dash-notif-pr{ font-family:'IBM Plex Mono', monospace; font-weight:700; color:var(--primary); font-size:13.5px; }
.dash-notif-branch{ font-size:12.5px; color:var(--muted); font-weight:500; margin-top:2px; }

.stickyroll-wrap{ position:relative; overflow:hidden; }
.stickyroll-wrap.stickyroll-active{
    max-height:280px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:#d7deea transparent;
}
.stickyroll-wrap.stickyroll-active::-webkit-scrollbar{ width:5px; }
.stickyroll-wrap.stickyroll-active::-webkit-scrollbar-track{ background:transparent; }
.stickyroll-wrap.stickyroll-active::-webkit-scrollbar-thumb{ background:#d7deea; border-radius:3px; }

.dash-top-items-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
@media (max-width: 760px){ .dash-top-items-grid{ grid-template-columns:1fr; } }

.dash-top-item-list{ display:flex; flex-direction:column; gap:14px; }
.dash-top-item-row{ display:flex; align-items:center; gap:14px; }
.dash-top-item-rank{
    width:24px; height:24px; border-radius:50%; background:var(--primary-soft); color:var(--primary-deep);
    font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.dash-top-item-info{ flex:1 1 auto; min-width:0; }
.dash-top-item-name{ font-size:13.5px; font-weight:600; color:var(--ink); }
.dash-top-item-count{ font-family:'IBM Plex Mono', monospace; font-weight:700; color:var(--ink); font-size:13.5px; flex-shrink:0; }

.produk-toolbar{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px;
    padding:16px 20px; border:1px solid var(--border); border-radius:18px; background:rgba(255,255,255,.84); box-shadow:0 5px 18px rgba(32,50,103,.04);
}

.produk-toolbar-search{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex:1 1 auto; }
.search-box{ min-width:350px; padding:10px 14px; border-radius:11px; background:#eef2f9; display: flex; align-items: center; gap: 8px; }
.search-box i{ color:var(--primary); font-size: 16px;}
.search-box input{ border:none; outline:none; font-size:13.5px; width:100%; background:transparent; font-weight: 500;}

.search-combo{ display:flex; align-items:stretch; flex-wrap:wrap; }
.search-combo > :first-child .ss-control{ border-top-right-radius:0; border-bottom-right-radius:0; }
.search-combo .search-box{
    border-top-left-radius:0; border-bottom-left-radius:0; background:#f8faff;
    border:1px solid #dce4f0; border-left:1px solid var(--border);
    flex:1 1 auto;
}

.search-combo-branch{ display:flex; align-items:stretch; flex:1 1 auto; min-width:350px; }
.search-combo-branch .ss-wrap{ flex:1 1 auto; }
.search-combo-branch .ss-control{
    border-top-left-radius:0; border-bottom-left-radius:0; background:#f8faff;
    border:1px solid #dce4f0; border-left:1px solid var(--border);
}

.date-range-filter{
    display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:11px;
    background:#eef2f9; font-size:13px; font-weight:500; color:var(--muted); white-space:nowrap;
    border:1px solid transparent; cursor:pointer;
}
.date-range-filter:focus-within{ border-color:var(--primary); background:#fff; }
.date-range-filter i{ color:var(--primary); font-size:14px; flex-shrink:0; }
.date-range-filter input[type="text"]{
    border:none; outline:none; background:transparent; font-size:13px; padding:0; width:140px; color:var(--ink); font-weight:600; cursor:pointer;
}
.drf-clear{ background:transparent; border:none; color:var(--muted); cursor:pointer; padding:0; display:flex; align-items:center; font-size:15px; flex-shrink:0; }
.drf-clear:hover{ color:var(--danger); }

.flatpickr-calendar{ font-family:'Inter', sans-serif; font-size:12.5px; box-shadow:var(--shadow); border-radius:14px; }
.flatpickr-day{ height:30px; line-height:30px; font-size:12px; }
.flatpickr-months{ padding-top:4px; }
.flatpickr-current-month{ font-size:13px; padding:0 0 4px 0; }
.flatpickr-current-month .cur-month{ font-weight:600; }
.flatpickr-current-month input.cur-year{ font-size:13px; }
.flatpickr-weekday{ font-size:10.5px; }
.flatpickr-weekdays{ height:26px; }
.numInputWrapper{ font-size:13px; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange{ background:var(--primary); border-color:var(--primary); }
.flatpickr-day.inRange{ background:var(--primary-soft); border-color:var(--primary-soft); box-shadow:-5px 0 0 var(--primary-soft), 5px 0 0 var(--primary-soft); }

.produk-table-wrap{ background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius); overflow-x:auto; box-shadow: var(--shadow); }
.produk-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.produk-table thead th{ background:var(--surface-0); color:var(--muted); text-align:left; font-weight:600; font-size:11.5px; text-transform:uppercase; padding:14px 18px; border-bottom:1px solid var(--border); }
.produk-table tbody td{ padding:14px 18px; border-bottom:1px solid var(--border); vertical-align:middle; color: var(--ink); font-weight: 500;}
.produk-table tbody tr:hover{ background:#f8faff; }

.status-badge{ font-size:10px; font-weight:700; text-transform:uppercase; padding:5px 10px; border-radius:20px; }
.status-badge.pending{ background:var(--warn-soft); color:var(--warn); }
.status-badge.approved{ background:var(--success-soft); color:var(--success); }
.status-badge.rejected{ background:var(--danger-soft); color:var(--danger); }
.status-badge.expired{ background:#eef1f5; color:var(--muted); }
.empty-state{ text-align:center; padding:68px 20px; border:1px dashed #ccd7e8; border-radius:18px; background:rgba(255,255,255,.6); }
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

.table-scroll{ max-height: 460px; overflow-y: auto; overscroll-behavior: contain; }
.table-scroll thead th{ position: sticky; top: 0; z-index: 1; }

.sortable-th{ cursor:pointer; user-select:none; white-space:nowrap; transition:color .15s ease; }
.sortable-th:hover{ color:var(--primary); }
.sortable-th i{ margin-left:5px; font-size:10px; vertical-align:1px; }

.ss-wrap{ position:relative; }
.ss-control{
    width:100%; border:1px solid #dce4f0; background:#f8faff; border-radius:11px; padding:12px 13px;
    color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:space-between;
    gap:8px; font-size:14px;
}
.ss-control:hover{ border-color:#c3d0e8; }
.ss-control.open{ border-color:var(--primary); box-shadow:0 0 0 4px rgba(52,85,219,.11); background:#fff; }
.ss-control i{ color:var(--muted); font-size:13px; flex-shrink:0; }

.ss-control > span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ss-placeholder{ color:#93a0b8; }
.ss-panel{
    position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:50; background:var(--surface-1);
    border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); overflow:hidden;
}
.ss-search{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); }
.ss-search i{ color:var(--primary); font-size:14px; }
.ss-search input{ border:none; outline:none; font-size:13.5px; width:100%; background:transparent; font-weight:500; padding:0; border-radius:0; height:auto; margin:0; }
.ss-options{ max-height:230px; overflow-y:auto; overscroll-behavior:contain; }
.ss-option{ padding:10px 14px; font-size:13.5px; cursor:pointer; color:var(--ink); }
.ss-option:hover{ background:var(--primary-soft); color:var(--primary); }
.ss-option.selected{ background:var(--primary-soft); color:var(--primary); font-weight:600; }
.ss-empty{ padding:16px; text-align:center; color:var(--muted); font-size:12.5px; }

.ms-option{ display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:13.5px; cursor:pointer; color:var(--ink); }
.ms-option:hover{ background:#f8faff; }
.ms-checkbox{
    width:17px; height:17px; border-radius:5px; border:1.5px solid #c3d0e8; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px;
    transition:background .12s ease, border-color .12s ease;
}
.ms-checkbox.checked{ background:var(--primary); border-color:var(--primary); }
.ms-panel-footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-top:1px solid var(--border); background:var(--surface-0); }
.ms-clear-btn{ background:transparent; border:none; color:var(--muted); font-size:12.5px; font-weight:600; cursor:pointer; padding:6px 4px; }
.ms-clear-btn:hover{ color:var(--danger); }
.ms-apply-btn{ padding:8px 18px; font-size:12.5px; }

.pop-enter-active, .pop-leave-active{
    transition: opacity .16s cubic-bezier(.2,.9,.3,1), transform .16s cubic-bezier(.2,.9,.3,1);
    transform-origin: top center;
}
.pop-enter-from, .pop-leave-to{ opacity:0; transform: scale(.95); }
.pop-enter-to, .pop-leave-from{ opacity:1; transform: scale(1); }

.toast-stack{
    position:fixed; bottom:24px; right:24px; z-index:1000; display:flex; flex-direction:column;
    gap:10px; width:min(360px, calc(100vw - 32px)); pointer-events:none;
}
.toast-item{
    display:flex; align-items:flex-start; gap:10px; background:var(--surface-1); border-radius:12px;
    box-shadow:var(--shadow); padding:13px 14px; font-size:13.5px; font-weight:500; color:var(--ink);
    border-left:4px solid var(--primary); pointer-events:auto;
}
.toast-item i{ font-size:16px; flex-shrink:0; margin-top:1px; color:var(--primary); }
.toast-item span{ flex:1 1 auto; line-height:1.45; }
.toast-close{ background:transparent; border:none; color:var(--muted); cursor:pointer; padding:2px; flex-shrink:0; font-size:12px; line-height:1; }
.toast-close:hover{ color:var(--ink); }
.toast-item.toast-success{ border-left-color:var(--success); }
.toast-item.toast-success i{ color:var(--success); }
.toast-item.toast-error{ border-left-color:var(--danger); }
.toast-item.toast-error i{ color:var(--danger); }
.toast-item.toast-warn{ border-left-color:var(--warn); }
.toast-item.toast-warn i{ color:var(--warn); }
.toast-item.toast-info{ border-left-color:var(--primary); }

.toast-enter-active, .toast-leave-active{ transition: opacity .22s ease, transform .22s ease; }
.toast-enter-from, .toast-leave-to{ opacity:0; transform: translateX(30px); }
.toast-move{ transition: transform .22s ease; }

.confirm-backdrop{
    position:fixed; inset:0; background:rgba(23,33,58,.45); z-index:1001; display:flex;
    align-items:center; justify-content:center; padding:20px;
}
.confirm-card{
    background:var(--surface-1); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:26px 26px 20px; max-width:380px; width:100%;
}
.confirm-message{ font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.5; margin:0 0 22px; }
.confirm-actions{ display:flex; justify-content:flex-end; gap:10px; }

.modal-pop-enter-active, .modal-pop-leave-active{ transition: opacity .18s ease; }
.modal-pop-enter-from, .modal-pop-leave-to{ opacity:0; }
.modal-pop-enter-active .confirm-card, .modal-pop-leave-active .confirm-card{ transition: transform .18s ease; }
.modal-pop-enter-from .confirm-card, .modal-pop-leave-to .confirm-card{ transform: scale(.95); }

.pr-form-card{
    background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:30px; overflow:visible;

}

.pr-form-grid{ display:flex; flex-wrap:wrap; gap:4px 24px; }

.pr-form-grid .field{ flex:0 0 260px; }

.pr-form-grid .field.field-branch-wide{ flex:1 1 300px; max-width:none; }

.pr-form-grid .field.field-fit-content{ flex:0 0 230px; }
.field-fit-content .ss-wrap{ width:230px; }
.pr-item-adder{ display:flex; gap:12px; align-items:center; margin-bottom:16px; }
.pr-item-adder .field{ flex:1 1 auto; }
.pr-item-adder .field.qty-field{ flex:0 0 110px; }
.pr-item-adder > button{ flex-shrink:0; white-space:nowrap; align-self:flex-start; margin-top:0; height:47px; }

.pr-item-list{ border:1px solid var(--border); border-radius:12px; margin-bottom:20px; background:#fff; }
.pr-item-list > div:first-child{ border-top-left-radius:11px; border-top-right-radius:11px; }
.pr-item-list > div:last-child{ border-bottom-left-radius:11px; border-bottom-right-radius:11px; }
.pr-item-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); font-size:13.5px; }
.pr-item-row:last-child{ border-bottom:none; }
.pr-item-row .item-name{ font-weight:600; color:var(--ink); }
.pr-item-row .item-qty{ color:var(--muted); font-size:12.5px; margin-left:8px; font-weight:600; }

.pr-item-row-edit{ justify-content:flex-start; gap:10px; background:#f8faff; }

.date-picker-field{

    display:flex; align-items:center; gap:8px; width:100%; max-width:220px; border:1px solid #dce4f0; background:#f8faff;
    border-radius:11px; padding:12px 13px; cursor:pointer;
}
.date-picker-field:focus-within{ border-color:var(--primary); background:#fff; }
.date-picker-field i{ color:var(--primary); font-size:14px; flex-shrink:0; }
.date-picker-field input{ border:none; outline:none; background:transparent; font-size:14px; width:100%; color:var(--ink); font-weight:500; cursor:pointer; padding:0; }
.pr-item-empty{ padding:22px; text-align:center; color:var(--muted); font-size:13px; }
.pr-detail-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 300px)); gap:16px 24px;
    margin-bottom:24px; padding-bottom:22px; border-bottom:1px solid var(--border);
}
.pr-detail-label{ font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700; margin-bottom:5px; }
.pr-detail-value{ font-size:14.5px; font-weight:600; color:var(--ink); }

.pr-info-box{
    background:var(--surface-0); border:1px solid var(--border); border-radius:14px;
    padding:14px 16px; margin-bottom:24px;
}
.pr-info-title{
    display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--muted);
    text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px;
}
.pr-info-title i{ font-size:13px; }
.pr-info-row{ display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:4px 0; flex-wrap:wrap; }
.pr-info-row span:first-child{ color:var(--muted); font-weight:600; flex-shrink:0; }
.pr-info-row span:last-child{ color:var(--ink); font-weight:500; text-align:right; }

.brand-choice{
    display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--border);
    border-radius:14px; margin-bottom:12px; cursor:pointer; background:#fff; transition:.2s;
}
.brand-choice:hover{ border-color:var(--primary); background:var(--primary-soft); transform:translateY(-2px); }
.brand-choice-icon{
    width:44px; height:44px; border-radius:12px; background:var(--primary-soft); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--primary);
}
.brand-choice-name{ font-weight:700; font-size:14.5px; color:var(--ink); }
.brand-choice-sub{ font-size:11.5px; color:var(--muted); }
.brand-choice i.bi-chevron-right{ margin-left:auto; color:var(--muted); }