:root{--cu-navy:#0a1f44;--cu-navy-2:#143066;--cu-yellow:#ffc72c;--cu-yellow-d:#e6b020;
--bs-primary:#0a1f44;--bs-primary-rgb:10,31,68;--bs-link-color:#0a1f44;--bs-link-hover-color:#143066;--bs-body-bg:#f4f6fb;--bs-border-radius:.6rem}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.text-navy{color:var(--cu-navy)}.text-accent{color:var(--cu-yellow)}.bg-navy{background:var(--cu-navy)!important;color:#fff}
.badge-accent{background:var(--cu-yellow);color:var(--cu-navy)}
.btn-primary{--bs-btn-color:var(--cu-navy);--bs-btn-bg:var(--cu-yellow);--bs-btn-border-color:var(--cu-yellow);
--bs-btn-hover-color:var(--cu-navy);--bs-btn-hover-bg:var(--cu-yellow-d);--bs-btn-hover-border-color:var(--cu-yellow-d);
--bs-btn-active-color:var(--cu-navy);--bs-btn-active-bg:var(--cu-yellow-d);--bs-btn-active-border-color:var(--cu-yellow-d);
--bs-btn-disabled-color:var(--cu-navy);--bs-btn-disabled-bg:var(--cu-yellow);--bs-btn-disabled-border-color:var(--cu-yellow);font-weight:600}
.btn-navy{--bs-btn-color:#fff;--bs-btn-bg:var(--cu-navy);--bs-btn-border-color:var(--cu-navy);--bs-btn-hover-bg:var(--cu-navy-2);--bs-btn-hover-border-color:var(--cu-navy-2);--bs-btn-hover-color:#fff}
.form-control:focus,.form-select:focus,.form-check-input:focus{border-color:var(--cu-yellow);box-shadow:0 0 0 .2rem rgba(255,199,44,.3)}
.form-check-input:checked{background-color:var(--cu-navy);border-color:var(--cu-navy)}
.table>thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#64708a;background:#f8f9fd;border-bottom:0}
/* layout */
.cu-sidebar{--bs-offcanvas-width:240px;--bs-offcanvas-bg:var(--cu-navy);transition:width .2s ease,transform .3s ease-in-out}
.cu-sidebar-inner{background:var(--cu-navy);overflow-x:hidden}
.cu-brand{color:#fff;font-weight:700;font-size:1.15rem;letter-spacing:.02em;white-space:nowrap}
.cu-sidebar .nav-link{color:#c8d3ea;border-radius:.6rem;padding:.55rem .8rem;border-left:3px solid transparent;white-space:nowrap;display:flex;align-items:center;background:transparent}
.cu-sidebar .nav-link:hover{background:rgba(255,255,255,.07);color:#fff}
.cu-sidebar .nav-link.active{background:rgba(255,199,44,.14);color:var(--cu-yellow);border-left-color:var(--cu-yellow);font-weight:600}
.cu-sidebar .nav-link.disabled{opacity:.45}
.cu-sidebar .nav-link i{font-size:1.1rem;flex-shrink:0}
.cu-dropdown-chevron{transition:transform .2s ease;font-size:.75rem!important}
.cu-nav-dropdown-wrapper.is-open .cu-dropdown-chevron,
.cu-nav-dropdown-wrapper:hover .cu-dropdown-chevron{transform:rotate(90deg)}

/* Submenu / Flyout menu styles */
.cu-flyout-menu{display:none;background:var(--cu-navy-2);border-radius:.6rem;border:1px solid rgba(255,255,255,.12);z-index:1050}
.cu-nav-dropdown-wrapper.is-open > .cu-flyout-menu{display:block}
.cu-flyout-link{color:#c8d3ea!important;padding:.45rem .75rem!important;border-left:0!important;font-size:.9rem}
.cu-flyout-link:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
.cu-flyout-link.active{background:rgba(255,199,44,.18)!important;color:var(--cu-yellow)!important;font-weight:600}

@media(min-width:992px){
  .cu-sidebar{position:fixed!important;inset:0 auto 0 0;width:240px;z-index:200}
  .cu-main{margin-left:240px}

  /* Maximize mode: Otomatis terbuka saat hover */
  body:not(.cu-sidebar-collapsed) .cu-nav-dropdown-wrapper:hover > .cu-flyout-menu{display:block}
  body:not(.cu-sidebar-collapsed) .cu-flyout-menu{margin-top:.2rem;margin-left:1.4rem;background:rgba(0,0,0,.15);border:1px solid rgba(255,255,255,.08)}

  /* Desktop collapsed state */
  body.cu-sidebar-collapsed .cu-sidebar{width:70px}
  body.cu-sidebar-collapsed .cu-sidebar-inner{overflow:visible!important}
  body.cu-sidebar-collapsed #sidebar-nav{overflow:visible!important}
  body.cu-sidebar-collapsed .cu-main{margin-left:70px}
  body.cu-sidebar-collapsed .cu-brand span span,
  body.cu-sidebar-collapsed .cu-sidebar .nav-link:not(.cu-flyout-link) .cu-nav-label,
  body.cu-sidebar-collapsed .cu-sidebar a.nav-link:not(.cu-flyout-link) span,
  body.cu-sidebar-collapsed .cu-sidebar span.nav-link span,
  body.cu-sidebar-collapsed .cu-dropdown-chevron,
  body.cu-sidebar-collapsed .cu-userbox > div{display:none!important}
  body.cu-sidebar-collapsed .cu-brand{justify-content:center!important;padding-inline:.5rem!important}
  body.cu-sidebar-collapsed .cu-sidebar .nav-link:not(.cu-flyout-link){justify-content:center!important;padding:.6rem .5rem}
  body.cu-sidebar-collapsed .cu-sidebar .nav-link:not(.cu-flyout-link) i{margin-right:0!important}
  body.cu-sidebar-collapsed .cu-userbox{flex-direction:column;align-items:center;padding:.75rem .5rem!important}
  body.cu-sidebar-collapsed .cu-userbox form{margin-top:.25rem}

  /* Ikon antrian tetap tampil dan pop-out mengambang ke kanan saat di-hover pada mode minimize */
  body.cu-sidebar-collapsed .cu-nav-dropdown-wrapper{position:relative}
  body.cu-sidebar-collapsed .cu-nav-dropdown-wrapper .cu-flyout-menu{
    position:absolute;left:100%;top:0;width:190px;margin-left:.4rem;
    background:var(--cu-navy);border:1px solid rgba(255,199,44,.3);
    box-shadow:0 8px 24px rgba(0,0,0,.45)!important;
  }
  body.cu-sidebar-collapsed .cu-flyout-header-title{display:block!important}
  body.cu-sidebar-collapsed .cu-flyout-link{justify-content:flex-start!important;padding:.5rem .75rem!important}
  body.cu-sidebar-collapsed .cu-flyout-link span{display:inline!important}
  body.cu-sidebar-collapsed .cu-flyout-link i{margin-right:.5rem!important}
  body.cu-sidebar-collapsed .cu-nav-dropdown-wrapper:hover > .cu-flyout-menu{display:block}
}

/* Mobile flyout/inline */
@media(max-width:991.98px){
  .cu-flyout-menu{margin-top:.2rem;margin-left:1.4rem;background:rgba(0,0,0,.15);border:1px solid rgba(255,255,255,.08)}
}

.cu-userbox{border-top:1px solid rgba(255,255,255,.1);white-space:nowrap}
.cu-topbar{height:60px;background:#fff;border-bottom:1px solid #e5e9f2;position:sticky;top:0;z-index:100;color:var(--cu-navy)}
.cu-main{transition:margin-left .2s ease}
/* components */
.cu-card{border:0;border-radius:1rem;box-shadow:0 2px 12px rgba(10,31,68,.06)}
.cu-stat{transition:transform .15s,box-shadow .15s}.cu-stat:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(10,31,68,.12)}
.cu-stat-icon{width:48px;height:48px;border-radius:.8rem;background:var(--cu-navy);color:var(--cu-yellow);display:grid;place-items:center;font-size:1.4rem}
.cu-auth-bg{background:#f8fafc;min-height:100vh}
.cu-login-wrapper{position:relative}
.cu-login-card{max-width:440px;border-radius:1rem;border:1px solid #d9e2ec!important;background:#ffffff;box-shadow:0 10px 25px -5px rgba(10,31,68,.05),0 8px 10px -6px rgba(10,31,68,.05)!important}
.cu-login-logo-wrap{display:inline-flex;align-items:center;justify-content:center}
.cu-login-logo{width:88px;height:88px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.08))}
.cu-login-title{color:var(--cu-navy);font-size:1.55rem;letter-spacing:-0.01em;font-weight:700}
.cu-field-label{font-size:.92rem;font-weight:600;color:#2d3748;margin-bottom:.4rem;display:block}
.cu-floating-field{position:relative}
.cu-floating-field > label{color:#64748b;font-weight:500;padding:1rem .85rem;font-size:.95rem;transition:opacity .15s ease-in-out,transform .15s ease-in-out,color .15s ease-in-out}
.cu-floating-field > .cu-login-input{height:3.3rem;padding:1rem .85rem;border:1.5px solid #cbd5e1;border-radius:.6rem!important;font-size:.95rem;color:#1e293b;transition:border-color .15s ease,box-shadow .15s ease}
.cu-floating-field > .cu-login-input:focus{border-color:#64748b;box-shadow:0 0 0 3px rgba(100,116,139,.15)}
.cu-floating-field > .cu-login-input:focus ~ label,
.cu-floating-field > .cu-login-input:not(:placeholder-shown) ~ label{color:var(--cu-navy);font-weight:600;transform:scale(.85) translateY(-.65rem) translateX(.15rem)}
.cu-floating-pass-wrap{position:relative}
.cu-floating-pass-wrap .cu-floating-field > .cu-login-input{padding-right:3rem}
.cu-floating-pass-wrap .cu-btn-password-toggle{position:absolute;right:1px;top:1px;bottom:1px;width:3rem;background:transparent;border:0;color:#64748b;display:flex;align-items:center;justify-content:center;z-index:5;border-top-right-radius:.6rem;border-bottom-right-radius:.6rem;transition:color .15s ease}
.cu-floating-pass-wrap .cu-btn-password-toggle:hover{color:var(--cu-navy)}
.cu-floating-pass-wrap .cu-btn-password-toggle:focus{box-shadow:none}
.cu-login-btn{background-color:#f5b026!important;border-color:#f5b026!important;color:var(--cu-navy)!important;border-radius:.6rem!important;font-size:1rem;letter-spacing:.05em;box-shadow:0 2px 4px rgba(0,0,0,.05);transition:all .2s ease}
.cu-login-btn:hover{background-color:#e5a21e!important;border-color:#e5a21e!important;color:var(--cu-navy)!important;transform:translateY(-1px);box-shadow:0 4px 10px rgba(245,176,38,.3)}
.cu-login-btn:active{transform:translateY(0)}
.cu-login-footer{color:#94a3b8;font-size:.85rem;font-weight:500}
.cu-remember-row{gap:.5rem .75rem}
.cu-remember-row .form-check-label{color:var(--cu-ink);font-size:.9rem;font-weight:500;cursor:pointer}
.cu-remember-row .form-check-input{cursor:pointer}
.cu-remember-note{color:var(--cu-muted);font-size:.78rem}
.cu-logo-badge{width:56px;height:56px;margin:auto;border-radius:1rem;background:var(--cu-navy);color:var(--cu-yellow);display:grid;place-items:center;font-size:1.6rem}
.cu-login-logo{display:block;width:96px;height:96px;object-fit:contain;margin-inline:auto}
.cu-tv-order-controls{white-space:nowrap;display:inline-flex;align-items:center;background:rgba(10,31,68,.04);padding:.25rem;border-radius:.6rem;border:1px solid #e2e8f0}
.btn.cu-tv-drag-handle{touch-action:none;cursor:grab;min-width:2.25rem;min-height:2.25rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.45rem;border-color:#d0d7e2;background:#fff;color:var(--cu-navy);box-shadow:0 1px 3px rgba(0,0,0,.05);transition:all .2s ease}
.btn.cu-tv-drag-handle:hover{background:var(--cu-yellow);border-color:var(--cu-yellow-d);color:var(--cu-navy);box-shadow:0 2px 6px rgba(255,199,44,.4);transform:translateY(-1px)}
.btn.cu-tv-drag-handle:active,.cu-tv-grabbing{cursor:grabbing!important;background:var(--cu-yellow-d)!important;border-color:var(--cu-navy)!important;color:var(--cu-navy)!important;box-shadow:0 0 10px rgba(255,199,44,.6)!important;transform:scale(0.92)!important}
.cu-tv-drag-handle i{display:inline-block;font-size:1.15rem;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.cu-tv-grabbing i{animation:cu-tv-grip .28s ease-in-out infinite alternate}
@keyframes cu-tv-grip{0%{transform:scale(0.85) rotate(-15deg)}100%{transform:scale(0.72) rotate(15deg)}}

.cu-tv-btn-nav{min-width:1.6rem;padding:0 .3rem;height:1.1rem;display:inline-flex;align-items:center;justify-content:center;font-size:.65rem;border-radius:.35rem;border-color:#d0d7e2;background:#fff;color:#64708a;transition:all .15s ease}
.cu-tv-btn-nav:hover:not(:disabled){background:var(--cu-navy);border-color:var(--cu-navy);color:#fff}
.cu-tv-btn-nav:disabled{opacity:.35}

.cu-tv-btn-action{min-width:2.2rem;min-height:2.2rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.55rem;transition:all .18s ease;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.btn-outline-secondary.cu-tv-btn-action{border-color:#d0d7e2;background:#fff;color:var(--cu-navy)}
.btn-outline-secondary.cu-tv-btn-action:hover:not(:disabled){background:var(--cu-navy);border-color:var(--cu-navy);color:#fff;box-shadow:0 3px 8px rgba(10,31,68,.2);transform:translateY(-1px)}
.btn-outline-danger.cu-tv-btn-action{border-color:#fed7d7;background:#fff;color:#e53e3e}
.btn-outline-danger.cu-tv-btn-action:hover:not(:disabled){background:#e53e3e;border-color:#e53e3e;color:#fff;box-shadow:0 3px 8px rgba(229,62,62,.3);transform:translateY(-1px)}

.cu-table tbody tr[data-slide-id]{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,background-color .2s ease}
.cu-tv-dragging{position:relative;z-index:10;background-color:#fffdf5!important;outline:2px dashed var(--cu-yellow-d);outline-offset:-2px;box-shadow:0 .6rem 1.4rem rgba(10,31,68,.18)!important;transform:scale(1.02);will-change:transform}
@media(prefers-reduced-motion:reduce){
  .cu-tv-grabbing i{animation:none}
  .cu-tv-drag-handle i,.cu-table tbody tr[data-slide-id],.cu-tv-btn-action,.btn.cu-tv-drag-handle{transition:none}
}
/* htmx */
.htmx-indicator{display:none}.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:inline-block}
#content{transition:opacity .15s}#content.htmx-swapping{opacity:0}
tr.htmx-swapping{opacity:0;transition:opacity .25s}
/* =====================================================================
   Token tambahan
   ===================================================================== */
:root{--cu-ink:#0f172a;--cu-muted:#64748b;--cu-line:#e5e9f2;--cu-soft:#f6f8fc;
--cu-success:#166534;--cu-success-bg:#e8f7ee;--cu-danger:#a12828;--cu-danger-bg:#fdecec;
--cu-warning:#7a5800;--cu-warning-bg:#fff6dc;--cu-info:#1e4a7a;--cu-info-bg:#eaf2fb;
--bs-body-bg:#ffffff;--bs-body-color:var(--cu-ink)}
body{background:#fff;color:var(--cu-ink)}
.text-muted{color:var(--cu-muted)!important}
.cu-card{background:#fff;border:1px solid var(--cu-line)}
.cu-card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;
padding:1rem 1.25rem;border-bottom:1px solid var(--cu-line);background:#fff;border-radius:1rem 1rem 0 0}
.cu-navy-head{background:var(--cu-navy);border-bottom:0;color:#fff}
.cu-table>thead th{background:var(--cu-soft);color:var(--cu-muted)}
.cu-table>tbody>tr>td{vertical-align:middle}
.cu-table-footer{background:#fff;border-radius:0 0 1rem 1rem}
.cu-copy-group{max-width:250px}
.cu-login-card{max-width:400px}
.cu-validation-message{padding:.75rem 1rem;margin-bottom:1rem;border:1px solid #f5c2c2;border-radius:.75rem;
background:var(--cu-danger-bg);color:var(--cu-danger)}
.cu-validation-message.d-none{display:none!important}
.badge{font-weight:600;letter-spacing:.01em}
.badge-waiting{background:var(--cu-soft);color:#334155;border:1px solid var(--cu-line)}
.badge-called{background:var(--cu-warning-bg);color:var(--cu-warning);border:1px solid #f2d98a}
.badge-skipped{background:var(--cu-danger-bg);color:var(--cu-danger);border:1px solid #f5c2c2}
.badge-finished{background:var(--cu-success-bg);color:var(--cu-success);border:1px solid #b7e4c7}
.cu-badge-danger{background:var(--cu-danger-bg);color:var(--cu-danger);border:1px solid #f5c2c2}
.cu-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
padding:3rem 1rem;text-align:center;color:var(--cu-muted)}
.cu-empty-state i{font-size:2.5rem;color:#94a3b8}
.cu-empty-state strong{color:var(--cu-ink)}
.cu-empty-inline{padding:1rem;text-align:center;color:var(--cu-muted);font-size:.9rem;
background:var(--cu-soft);border:1px dashed var(--cu-line);border-radius:.75rem}
.cu-callout{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.15rem;border-radius:.9rem;border:1px solid var(--cu-line);background:var(--cu-soft)}
.cu-callout--info{background:var(--cu-info-bg);border-color:#cfe0f2}
.cu-callout--warning{background:var(--cu-warning-bg);border-color:#f2d98a;color:#5f4700}
.cu-stat-box{min-width:180px;padding:1rem;border-radius:.9rem;background:var(--cu-soft);border:1px solid var(--cu-line)}
/* skeleton */
.cu-skeleton{background:linear-gradient(90deg,#eef2f8 25%,#f8fafc 37%,#eef2f8 63%);
background-size:400% 100%;animation:cu-shimmer 1.4s ease infinite;border-radius:.5rem}
.cu-skeleton-line{height:.9rem}.cu-skeleton-block{height:5rem}.cu-skeleton-row{height:2.5rem}
@keyframes cu-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
/* =====================================================================
   Kiosk antrian
   ===================================================================== */
.cu-kiosk-wrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem;background:
radial-gradient(circle at top,var(--cu-navy-2),var(--cu-navy) 70%)}
.cu-kiosk-card{width:100%;max-width:560px;background:#fff;border-radius:1.25rem;overflow:hidden;
box-shadow:0 24px 60px rgba(2,10,30,.35)}
.cu-kiosk-header{background:var(--cu-navy);color:#fff;text-align:center;padding:2rem 1.5rem 1.6rem;border-bottom:4px solid var(--cu-yellow)}
.cu-kiosk-logo{height:58px;width:auto;background:#fff;border-radius:.8rem;padding:.35rem;margin-bottom:.9rem}
.cu-on-navy-muted{color:#c8d3ea}
.cu-kiosk-body{padding:1.75rem;background:#fff}
.cu-kiosk-btn{font-weight:700;padding:.9rem 1rem;font-size:1.05rem}
.cu-kiosk-branch{display:flex;align-items:center;gap:.5rem;padding:1rem;border:1px solid var(--cu-line);
border-radius:.9rem;background:var(--cu-soft);margin-bottom:1.25rem}
.cu-ticket-box{text-align:center;border:2px dashed var(--cu-yellow);border-radius:1rem;padding:1.5rem;background:#fffdf5}
.cu-ticket-badge{background:var(--cu-success-bg);color:var(--cu-success);border:1px solid #b7e4c7;font-size:.85rem}
.cu-ticket-badge[data-status="called"]{background:var(--cu-warning-bg);color:var(--cu-warning);border-color:#f2d98a}
.cu-ticket-badge[data-status="finished"]{background:var(--cu-success-bg);color:var(--cu-success)}
.cu-ticket-badge[data-status="skipped"]{background:var(--cu-danger-bg);color:var(--cu-danger);border-color:#f5c2c2}
.cu-ticket-num{font-size:clamp(4rem,18vw,7rem);font-weight:800;line-height:1;color:var(--cu-navy);letter-spacing:.02em;margin:.5rem 0}
.cu-ticket-branch{color:var(--cu-muted);margin-bottom:.5rem}
/* =====================================================================
   Teller
   ===================================================================== */
.cu-teller-display{flex:1;display:grid;place-items:center;text-align:center;padding:2rem 1rem;
border-radius:1rem;background:var(--cu-soft);border:1px solid var(--cu-line);margin:1rem 0}
.cu-teller-display.is-active{background:#fffdf2;border-color:var(--cu-yellow);box-shadow:0 0 0 .25rem rgba(255,199,44,.18)}
.cu-teller-number{font-size:clamp(3rem,8vw,5.5rem);font-weight:800;line-height:1;color:var(--cu-navy);margin-bottom:.35rem}
.cu-teller-main{font-weight:700;padding:.85rem 1rem}
.cu-teller-sub{min-height:3rem}
.cu-teller-list{display:flex;flex-direction:column;gap:.4rem;max-height:260px;overflow-y:auto}
.cu-queue-item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
padding:.6rem .75rem;border:1px solid var(--cu-line);border-radius:.65rem;background:#fff}
/* =====================================================================
   TV Display
   ===================================================================== */
.cu-tv-shell{position:fixed;inset:0;display:flex;flex-direction:column;background:#050b18;color:#fff;overflow:hidden;z-index:9999}
.cu-tv-layout{flex:1;display:grid;grid-template-columns:1fr 380px;min-height:0;overflow:hidden}
.cu-tv-main{position:relative;min-height:0;height:100%;background:#000;overflow:hidden}
.cu-tv-welcome{position:absolute;top:0;left:0;right:0;z-index:3;padding:1rem 1.5rem;
background:linear-gradient(to bottom,rgba(5,11,24,.9),transparent);font-weight:700;font-size:1.2rem}
.cu-tv-slides{position:absolute;inset:0;overflow:hidden}
.cu-tv-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;display:grid;place-items:center;overflow:hidden}
.cu-tv-slide.is-active{opacity:1;z-index:1}
.cu-tv-slide img,.cu-tv-slide video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.cu-tv-youtube{width:100%;height:100%;border:0}
.cu-tv-empty{text-align:center;padding:2rem}
.cu-tv-empty h1{font-size:clamp(2rem,5vw,4rem);font-weight:800;color:var(--cu-yellow)}
.cu-tv-caption{position:absolute;left:0;right:0;bottom:0;padding:1.2rem 1.5rem;
background:linear-gradient(to top,rgba(5,11,24,.92),transparent);font-size:1.2rem;font-weight:600}
.cu-tv-side{display:flex;flex-direction:column;gap:1.5rem;padding:2rem 1.5rem;background:#0d1b2a;border-left:3px solid var(--cu-yellow)}
.cu-tv-brand-header{text-align:center;display:flex;flex-direction:column;align-items:center}
.cu-tv-logo-circle{width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#152840;box-shadow:0 4px 14px rgba(0,0,0,.35);padding:6px;border:2px solid rgba(255,199,44,.25)}
.cu-tv-logo-circle img{width:100%;height:100%;object-fit:contain}
.cu-tv-branch-name{font-size:1.35rem;font-weight:700;color:var(--cu-yellow);margin:.75rem 0 0;letter-spacing:.02em}

.cu-tv-queue-card{background:#fdf6e2;border-radius:1.1rem;padding:1.6rem 1.25rem;text-align:center;color:#0a1f44;box-shadow:0 8px 24px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .2s ease,box-shadow .2s ease}
.cu-tv-queue-card.is-highlighted{animation:cu-tv-pulse .5s ease}
@keyframes cu-tv-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

.cu-tv-queue-title{font-size:1.15rem;font-weight:800;color:#0a1f44;letter-spacing:.06em;margin:0 0 .5rem;text-transform:uppercase}
.cu-tv-queue-number{font-size:clamp(5rem,11vw,8rem);font-weight:900;line-height:.95;color:#b22222;margin:.25rem 0 .65rem;text-shadow:0 2px 4px rgba(178,34,34,.15)}
.cu-tv-queue-teller{font-size:1.45rem;font-weight:800;color:#0a1f44;letter-spacing:-0.01em}

.cu-tv-clock-panel{margin-top:auto;text-align:center;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1)}
.cu-tv-clock-time{font-size:clamp(2rem,4vw,2.75rem);font-weight:900;color:var(--cu-yellow);letter-spacing:.03em;line-height:1.1}
.cu-tv-clock-date{color:#c8d3ea;font-size:.92rem;font-weight:500;margin-top:.4rem}
.cu-tv-running{background:var(--cu-yellow);color:var(--cu-navy);font-weight:700;padding:.55rem 0;overflow:hidden;white-space:nowrap}
.cu-tv-marquee{display:inline-block;padding-left:100%;animation:cu-marquee 30s linear infinite}
@keyframes cu-marquee{to{transform:translateX(-100%)}}
.cu-tv-audio{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(5,11,24,.94);cursor:pointer}
.cu-tv-audio-card{text-align:center;max-width:460px;padding:2rem}
.cu-tv-audio-card i{font-size:3rem;color:var(--cu-yellow)}
.cu-tv-audio-card h1{font-size:1.4rem;margin:1rem 0 .5rem}
.cu-tv-audio-card p{color:#c8d3ea;margin:0}
.cu-tv-thumb{width:72px;height:48px;object-fit:cover;border-radius:.45rem;border:1px solid var(--cu-line)}
@media(max-width:900px){.cu-tv-layout{grid-template-columns:1fr;grid-template-rows:1fr auto}.cu-tv-side{flex-direction:row;flex-wrap:wrap;border-left:0;border-top:3px solid var(--cu-yellow)}.cu-tv-queue{min-width:45%}}
/* =====================================================================
   Builder presensi
   ===================================================================== */
.cu-builder{max-width:960px}
.cu-btn-add-field{border:2px dashed #c7d2e4;background:var(--cu-soft);color:var(--cu-navy);font-weight:700}
.cu-btn-add-field:hover{background:#eef3fb;border-color:var(--cu-navy);color:var(--cu-navy)}
.cu-field-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;
padding:.9rem 1rem;border:1px solid var(--cu-line);border-radius:.85rem;background:#fff;
transition:border-color .15s,box-shadow .15s,transform .15s}
.cu-field-card:hover{border-color:#c7d2e4;box-shadow:0 4px 16px rgba(10,31,68,.08)}
.cu-field-card.is-dragging{opacity:.45;border:2px dashed var(--cu-yellow);background:var(--cu-soft)}
.cu-field-card.is-highlight{background:var(--cu-warning-bg);border-color:var(--cu-yellow)}
.cu-field-handle{cursor:grab;color:#94a3b8;font-size:1.25rem;touch-action:none;user-select:none}
.cu-field-handle:active{cursor:grabbing}
.cu-field-preview{font-size:.8rem;color:var(--cu-muted)}
.cu-builder-empty{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:2rem 1rem;
text-align:center;color:var(--cu-muted);border:1px dashed #c7d2e4;border-radius:.85rem;background:var(--cu-soft)}
.cu-builder-empty i{font-size:1.8rem;color:#94a3b8}
.cu-tag{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .55rem;border-radius:999px;
font-size:.72rem;font-weight:700;background:var(--cu-soft);color:#334155;border:1px solid var(--cu-line)}
.cu-tag i{font-size:.8rem}
.cu-tag--accent{background:#fff6dc;color:var(--cu-warning);border-color:#f2d98a}
.cu-tag--info{background:var(--cu-info-bg);color:var(--cu-info);border-color:#cfe0f2}
.cu-tag--warning{background:var(--cu-warning-bg);color:var(--cu-warning);border-color:#f2d98a}
.cu-tag--success{background:var(--cu-success-bg);color:var(--cu-success);border-color:#b7e4c7}
.cu-tag--danger{background:var(--cu-danger-bg);color:var(--cu-danger);border-color:#f5c2c2}
.cu-type-card{display:flex;align-items:flex-start;gap:.85rem;padding:.9rem;border:1px solid var(--cu-line);
border-radius:.85rem;background:#fff;text-align:left;transition:border-color .15s,box-shadow .15s}
.cu-type-card:hover{border-color:var(--cu-navy);box-shadow:0 4px 16px rgba(10,31,68,.08)}
.cu-type-icon{flex:none;width:44px;height:44px;border-radius:.7rem;background:var(--cu-navy);color:var(--cu-yellow);
display:grid;place-items:center;font-size:1.2rem}
.cu-option-row .form-control{min-width:0}
/* =====================================================================
   Halaman publik presensi
   ===================================================================== */
.cu-public-body{background:#fff;color:var(--cu-ink)}
.cu-public-wrap{max-width:760px;margin:0 auto;padding:1.5rem 1rem 2rem}
.cu-public-card{border:1px solid var(--cu-line);border-radius:1.15rem;overflow:hidden;background:#fff;
box-shadow:0 10px 40px rgba(10,31,68,.08)}
.cu-public-header{background:var(--cu-navy);color:#fff;padding:2rem 1.75rem;border-bottom:4px solid var(--cu-yellow)}
.cu-public-logo{height:52px;width:auto;background:#fff;border-radius:.7rem;padding:.3rem}
.cu-public-org{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.25);
font-size:.68rem;letter-spacing:.08em}
.cu-info-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem 1rem;border-radius:999px;
font-size:.86rem;color:#eaf0fa;background:rgba(232,238,250,.12);border:1px solid rgba(232,238,250,.22)}
.cu-info-pill i{color:var(--cu-yellow)}
.cu-badge-success{background:var(--cu-success-bg);color:var(--cu-success);border:1px solid #b7e4c7}
.cu-badge-danger{background:var(--cu-danger-bg);color:var(--cu-danger);border:1px solid #f5c2c2}
.cu-public-state-icon{width:84px;height:84px;margin:0 auto;border-radius:50%;display:grid;place-items:center;
background:var(--cu-soft);color:var(--cu-muted);font-size:2.2rem}
.cu-public-state-icon--success{background:var(--cu-success-bg);color:var(--cu-success)}
.cu-public-note{padding:1rem;border-radius:.8rem;background:var(--cu-soft);border:1px solid var(--cu-line);
font-size:.88rem;max-width:480px}
.cu-public-choice-box{padding:.9rem;border-radius:.75rem;background:var(--cu-soft);border:1px solid var(--cu-line)}
.cu-choice-pill-input{position:absolute;opacity:0;width:1px;height:1px}
.cu-choice-pill{display:inline-block;padding:.5rem 1rem;border:1px solid #c7d2e4;border-radius:2rem;
background:#fff;cursor:pointer;user-select:none;transition:all .15s}
.cu-choice-pill:hover{border-color:var(--cu-navy);background:var(--cu-soft)}
.cu-choice-pill-input:checked+.cu-choice-pill{background:var(--cu-yellow);border-color:var(--cu-navy);color:var(--cu-navy);font-weight:700}
.cu-choice-pill-input:focus-visible+.cu-choice-pill{outline:3px solid rgba(10,31,68,.25);outline-offset:2px}
.cu-choice-results{max-height:16rem;overflow-y:auto}
.cu-signature-pad{position:relative;border:2px dashed #c7d2e4;border-radius:.75rem;background:var(--cu-soft);
overflow:hidden;transition:border-color .15s,box-shadow .15s}
.cu-signature-pad:has(canvas){min-height:180px}
.cu-signature-block.is-active .cu-signature-pad{border-style:solid;border-color:var(--cu-navy);background:#fff;
box-shadow:0 0 0 .2rem rgba(255,199,44,.25)}
.cu-signature-canvas{display:block;width:100%;height:180px;touch-action:none;cursor:crosshair}
.cu-signature-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:.2rem;border:0;background:rgba(246,248,252,.96);color:var(--cu-ink);cursor:pointer;padding:1rem;text-align:center}
.cu-signature-overlay-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
background:#fff6dc;color:var(--cu-navy);font-size:1.15rem;margin-bottom:.35rem}
.cu-signature-overlay.d-none{display:none!important}
/* =====================================================================
   Respon presensi
   ===================================================================== */
.cu-sig-thumb{padding:2px;border:1px solid var(--cu-line);border-radius:.45rem;background:#fff;cursor:pointer}
.cu-sig-thumb img{max-height:40px;max-width:100px;display:block}
.cu-sig-thumb:hover{border-color:var(--cu-navy)}
.cu-detail-item{padding:.85rem 1rem;border:1px solid var(--cu-line);border-radius:.75rem;background:var(--cu-soft)}
.cu-detail-label{display:block;color:var(--cu-muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.7rem}
.cu-bulk-bar{border-left:4px solid var(--cu-danger)}
.table-active>td{background:var(--cu-warning-bg)!important}
/* form loading */
.cu-loading-form button[disabled]{cursor:progress}
/* Kalkulator publik & navigasi publik */
.cu-public-topbar{background:#fff;border-bottom:1px solid var(--cu-line);position:sticky;top:0;z-index:50}
.cu-calc-choice{transition:transform .15s,box-shadow .15s}
.cu-calc-choice:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(10,31,68,.12)}
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(255,199,44,.65)!important;outline-offset:2px}
@media(max-width:575.98px){
  .cu-public-wrap{padding:1rem .6rem}
  .cu-public-header{padding:1.4rem 1.1rem}
  .cu-public-card .card-body{padding:1.25rem!important}
  .cu-info-pill{font-size:.78rem}
  .cu-copy-group{max-width:180px}
  .cu-public-topbar .btn{font-size:.78rem}
}