:root{--sidebar-width:224px}
body.density-compact{font-size:.8125rem;font-variant-numeric:tabular-nums}
.density-compact .sidebar{padding:0 9px 10px}
.density-compact .sidebar-head{height:58px;padding:0 5px}
.density-compact .brand{gap:8px}
.density-compact .brand-mark{width:34px;height:34px;border-radius:9px;font-size:.76rem}
.density-compact .brand-name{font-size:.82rem}
.density-compact .brand-name small{font-size:.56rem;margin-top:2px}
.density-compact .sidebar-context{margin:8px 3px 3px;padding:7px 8px;border-radius:8px}
.density-compact .sidebar-context strong{font-size:.64rem}
.density-compact .sidebar-context small{font-size:.58rem}
.density-compact .sidebar .nav{margin-top:4px;gap:1px;padding:1px 2px 8px}
.density-compact .sidebar .nav-link,
.density-compact .sidebar .nav-link.nav-sub{min-height:32px;padding:5px 8px;font-size:.72rem;border-radius:7px;gap:7px}
.density-compact .sidebar .nav-link.nav-sub{padding-left:15px}
.density-compact .nav-symbol{width:18px;height:18px;border-radius:5px;font-size:.62rem}
.density-compact .nav-group-label,
.density-compact .nav-caption{padding:9px 8px 3px;font-size:.55rem}
.density-compact .sidebar-footer{padding:7px 7px 0;font-size:.57rem}
.density-compact .topbar{height:58px;padding:0 14px;gap:8px}
.density-compact .topbar-title{min-width:108px}
.density-compact .topbar-title>strong{font-size:.82rem}
.density-compact .topbar-title .small{font-size:.59rem;margin-top:2px}
.density-compact .menu-toggle,
.density-compact .icon-button{width:32px;height:32px;border-radius:8px}
.density-compact .topbar-actions{gap:5px!important}
.density-compact .topbar-game-actions{gap:4px}
.density-compact .topbar-time{min-width:82px;padding:3px 7px}
.density-compact .topbar-date{font-size:.54rem}
.density-compact .topbar-clock{font-size:.68rem}
.density-compact .account-avatar{width:31px;height:31px;border-radius:8px;font-size:.7rem}
.density-compact .account-meta{max-width:82px}
.density-compact .account-meta strong{font-size:.68rem}
.density-compact .account-meta small{font-size:.56rem}
.density-compact .collector-status-toggle{min-height:30px}
.density-compact .status-badge,
.density-compact .ping-badge{font-size:.61rem;padding:4px 6px}
.density-compact .content{padding:12px 14px 26px}
.density-compact .content>.mb-4,
.density-compact .content .mb-4{margin-bottom:.8rem!important}
.density-compact .content>.mb-3,
.density-compact .content .mb-3{margin-bottom:.65rem!important}
.density-compact .content .row.g-3{--bs-gutter-x:.65rem;--bs-gutter-y:.65rem}
.density-compact .metric-card,
.density-compact .panel-card,
.density-compact .filter-card,
.density-compact .live-hero,
.density-compact .card{border-radius:10px}
.density-compact .metric-card{min-height:82px;padding:10px 12px}
.density-compact .metric-card:hover{transform:none}
.density-compact .metric-card span{font-size:.66rem}
.density-compact .metric-card strong{font-size:1.15rem;margin:auto 0 0;line-height:1.12}
.density-compact .metric-card small{font-size:.61rem;line-height:1.15}
.density-compact .panel-card .card-header,
.density-compact .card-header{padding:8px 11px;min-height:36px}
.density-compact .card-header strong{font-size:.76rem}
.density-compact .card-header .small{font-size:.61rem}
.density-compact .card-body,
.density-compact .settings-panel .card-body{padding:10px 11px}
.density-compact .filter-card{padding:9px 11px}
.density-compact .filter-card label,
.density-compact .form-label{font-size:.64rem;margin-bottom:2px;font-weight:700}
.density-compact .form-control,
.density-compact .form-select,
.density-compact .input-group-text{min-height:30px;padding:.27rem .5rem;border-radius:7px;font-size:.72rem}
.density-compact textarea.form-control{min-height:58px}
.density-compact .form-text{font-size:.6rem;margin-top:2px}
.density-compact .form-check{min-height:1rem}
.density-compact .form-check-input{width:.9rem;height:.9rem;margin-top:.18rem}
.density-compact .form-check-label{font-size:.68rem}
.density-compact .btn{padding:.3rem .55rem;border-radius:7px;font-size:.7rem;line-height:1.2}
.density-compact .btn-sm{padding:.24rem .44rem;font-size:.65rem}
.density-compact .badge{padding:.28em .48em;font-size:.61rem}
.density-compact .multiplier-pill{padding:3px 6px;border-radius:6px;font-size:.7rem}
.density-compact .badge-1000{font-size:.5rem}
.density-compact .historical-warning,
.density-compact .analysis-warning,
.density-compact .architecture-notice{padding:8px 10px;border-radius:8px;font-size:.69rem}
.density-compact .architecture-notice{gap:10px}
.density-compact .architecture-notice p,
.density-compact .analysis-warning p{font-size:.66rem}
.density-compact .alert{padding:7px 9px;margin-bottom:.55rem;border-radius:8px;font-size:.68rem}
.density-compact h2.h5{font-size:.86rem;margin-bottom:.55rem!important}
.density-compact .quick-periods{display:flex;flex-wrap:wrap;gap:4px}
.density-compact .settings-tabs{gap:3px;padding:3px;border-radius:8px}
.density-compact .settings-tab{padding:5px 8px;border-radius:6px;font-size:.66rem}
.density-compact .watchdog-defaults{padding:7px 9px;font-size:.67rem}
.density-compact .color-settings{gap:5px}
.density-compact .color-settings label{padding:5px;font-size:.64rem}
.density-compact .color-settings input{width:29px;height:22px}
.density-compact .security-stat,
.density-compact .maintenance-status{padding:8px;border-radius:8px}
.density-compact .security-stat span,
.density-compact .maintenance-status span{font-size:.59rem}
.density-compact .security-stat strong,
.density-compact .maintenance-status strong{margin-top:2px;font-size:.73rem}
.density-compact .maintenance-status small{font-size:.6rem;margin-top:2px}
.density-compact .maintenance-actions{gap:5px}
.density-compact .game-tab-status-card{scroll-margin-top:66px}
.density-compact .game-tab-status-card .card-body{padding:9px 11px}
.density-compact .game-tab-status-grid{gap:5px}
.density-compact .game-tab-status-item{padding:7px 8px;border-radius:7px}
.density-compact .game-tab-status-item span{font-size:.58rem}
.density-compact .game-tab-status-item strong{font-size:.7rem}
.density-compact .collector-detail-menu{width:320px;padding:7px}
.density-compact .collector-detail-head{padding:6px}
.density-compact .collector-detail-grid{gap:4px}
.density-compact .collector-detail-grid div{padding:6px}
.density-compact .collector-detail-grid span{font-size:.56rem}
.density-compact .collector-detail-grid strong{font-size:.68rem}
.density-compact .panel-card>.table-responsive{max-height:calc(100vh - 178px);overflow:auto;position:relative}
.density-compact .table{font-size:.69rem;margin-bottom:0}
.density-compact .table>:not(caption)>*>*{padding:5px 7px;line-height:1.16;white-space:nowrap}
.density-compact .table thead th{position:sticky;top:0;z-index:3;max-width:132px;white-space:normal;vertical-align:middle;font-size:.56rem;line-height:1.12;letter-spacing:.035em}
.density-compact .compact-table td.compact-cell-truncate{max-width:155px;overflow:hidden;text-overflow:ellipsis}
.density-compact .compact-table td.compact-cell-free{max-width:none;overflow:visible}
.density-compact .compact-table td code{display:inline-block;max-width:135px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.density-compact .table small{font-size:.56rem;line-height:1.1}
.density-compact .table details summary{font-size:.65rem}
.density-compact .table-responsive{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.density-compact .table-responsive::-webkit-scrollbar{height:7px;width:7px}
.density-compact .table-responsive::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.density-compact .browser-cell{max-width:145px}
.density-compact .collector-settings-table td{min-width:112px}
.density-compact .collector-settings-table td:first-child{min-width:165px}
.density-compact .collector-settings-table td:last-child{min-width:145px}
.density-compact .round-gap-inline{gap:1px}
.density-compact .round-gap-inline strong{font-size:.7rem}
.density-compact .grouped-stat{min-height:76px}
.density-compact .grouped-stat strong{font-size:.94rem}
.density-compact .grouped-table td{padding-top:4px;padding-bottom:4px}
.density-compact .group-result{min-width:max-content;padding:2px 5px;gap:4px}
.density-compact .group-result strong{font-size:.72rem}
.density-compact .group-result small{font-size:.52rem}
.density-compact .dt-container{padding:7px}
.density-compact .dt-container .dt-layout-row{margin:.3em 0}
.density-compact .dt-container .dt-input{min-height:28px;padding:3px 6px;font-size:.68rem}
.density-compact .dt-container .dt-info,
.density-compact .dt-container .dt-paging{font-size:.64rem}
.density-compact .pagination{margin-bottom:0}
.density-compact .page-link{padding:.28rem .48rem;font-size:.68rem}
.density-compact .chart-card{padding-bottom:6px}
.density-compact .chart-card canvas{max-height:238px;padding:7px 10px}
.density-compact .second-chart-wrap{height:245px;padding:7px}
.density-compact .sample-status{padding:3px 6px;font-size:.58rem}
.density-compact .color-composition-bar{width:132px;height:9px}
.density-compact .historical-color-cell{min-width:72px}
.density-compact .historical-color-cell strong{font-size:.66rem}
.density-compact .historical-color-cell small{font-size:.53rem}
.density-compact .second-count-button,
.density-compact .second-count-empty{min-width:25px;min-height:23px;padding:2px 5px;border-radius:5px}
.density-compact .second-detail-table td{padding:5px 7px}
.density-compact .legacy-second-analysis-table td:nth-child(1){min-width:70px}
.density-compact .legacy-second-analysis-table td:nth-child(2),
.density-compact .legacy-second-analysis-table td:nth-child(3){min-width:92px}
.density-compact .legacy-second-analysis-table td:nth-child(4),
.density-compact .legacy-second-analysis-table td:nth-child(5),
.density-compact .legacy-second-analysis-table td:nth-child(6){min-width:112px}
.density-compact .legacy-second-analysis-table td:nth-child(7){min-width:105px}
.density-compact .legacy-second-analysis-table td:nth-child(8),
.density-compact .legacy-second-analysis-table td:nth-child(9){min-width:118px}
.density-compact .cycle-phase{display:inline-flex;justify-content:center;min-width:52px;padding:3px 6px;border-radius:6px;font-weight:800}
.density-compact .cycle-closing{background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
.density-compact .cycle-input{background:rgba(91,77,247,.12);border:1px solid rgba(91,77,247,.28);color:var(--brand)}
.density-compact .cycle-next-start{display:inline-grid;place-items:center;min-width:30px;min-height:25px;padding:3px 6px;border-radius:7px;background:var(--brand);color:#fff}
.density-compact .live-grid{grid-template-columns:minmax(0,1.65fr) minmax(280px,.65fr);gap:9px}
.density-compact .live-grid{align-items:start}
.density-compact .live-side{gap:9px}
.density-compact .live-hero{min-height:340px;padding:18px}
.density-compact .live-big-clock{margin:7px 0 0}
.density-compact .live-big-clock strong{font-size:clamp(2.3rem,5vw,3.7rem)}
.density-compact .live-big-clock span{font-size:.6rem}
.density-compact .live-multiplier{font-size:clamp(4rem,9vw,6.4rem);margin:10px 0 7px}
.density-compact .live-details{gap:5px;margin-top:20px}
.density-compact .live-details div{padding:7px;border-radius:7px}
.density-compact .live-details span{font-size:.56rem}
.density-compact .live-details strong{font-size:.7rem}
.density-compact .live-feed{padding:4px 9px;max-height:330px;overflow:auto}
.density-compact .feed-item{padding:8px 2px}
.density-compact .live-history-card{grid-column:1/-1}
.density-compact .live-estimate-card .card-header{padding:9px 10px}
.density-compact .live-estimate-body{gap:6px;padding:8px}
.density-compact .live-history-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.density-compact .live-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:6px;padding:9px;max-height:560px;overflow:auto;align-content:start}
.density-compact .live-results-grid .empty-state{grid-column:1/-1}
.density-compact .live-result-tile{display:grid;place-items:center;min-width:0;min-height:42px;padding:6px 8px;border:2px solid transparent;border-radius:7px;font:inherit;cursor:pointer;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}
.density-compact .live-result-tile strong{font-size:.84rem;line-height:1;white-space:nowrap}
.density-compact .live-result-tile:hover{filter:brightness(1.12);transform:translateY(-1px)}
.density-compact .live-result-tile:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.density-compact .live-result-tile.multiplier-blue{background:#075985!important;border-color:#0ea5e9;color:#bae6fd!important}
.density-compact .live-result-tile.multiplier-green{background:#166534!important;border-color:#22c55e;color:#dcfce7!important}
.density-compact .live-result-tile.multiplier-red{background:#701a75!important;border-color:#d946ef;color:#fae8ff!important}
.density-compact .live-result-tile.multiplier-gold{background:#713f12!important;border-color:#facc15;color:#fef9c3!important}
.density-compact .live-result-tile.is-latest{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--brand)}
.density-compact .live-multiplier.live-tick-pulse{animation:live-tick-pulse .22s ease-out}
@keyframes live-tick-pulse{0%{transform:scale(.97);filter:brightness(1.12)}100%{transform:scale(1);filter:none}}
.density-compact .round-gap-card{padding:11px;border-radius:10px}
.density-compact .gap-label{font-size:.59rem}
.density-compact .round-gap-card h3{font-size:.82rem;margin-bottom:4px}
.density-compact .gap-timer{font-size:1.55rem}
.density-compact .gap-status,
.density-compact .gap-transition,
.density-compact .round-gap-card dl{font-size:.64rem}
.density-compact .empty-state{padding:24px 8px}
.density-compact .modal-header,
.density-compact .modal-footer{padding:8px 11px}
.density-compact .modal-body{padding:10px 11px}
.density-compact .round-detail-grid{gap:5px}
.density-compact .round-detail-grid>div,
.density-compact .group-modal-item{padding:7px;border-radius:7px}
.density-compact.login-page .login-card{width:min(380px,calc(100% - 24px));padding:24px;border-radius:14px}
.density-compact.login-page .login-card h1{font-size:1.35rem}
.density-compact.login-page .login-card .brand{margin-bottom:1rem!important}
.density-compact.login-page .security-note{font-size:.66rem;margin-top:1rem!important}
@media(max-width:991px){
  :root{--sidebar-width:224px}
  .density-compact .sidebar{width:min(250px,84vw)}
  .density-compact .topbar{padding:0 9px}
  .density-compact .content{padding:10px 9px 22px}
  .density-compact .live-grid{grid-template-columns:1fr}
  .density-compact .panel-card>.table-responsive{max-height:calc(100vh - 150px)}
}
@media(max-width:767px){
  .density-compact .topbar{height:56px}
  .density-compact .menu-toggle,
  .density-compact .icon-button,
  .density-compact .account-avatar{width:32px;height:32px}
  .density-compact .content{padding:8px 7px 20px}
  .density-compact .metric-card{min-height:76px;padding:9px}
  .density-compact .metric-card strong{font-size:1rem}
  .density-compact .form-control,
  .density-compact .form-select,
  .density-compact .input-group-text{min-height:34px}
  .density-compact .btn{min-height:32px}
  .density-compact .table>:not(caption)>*>*{padding:6px}
  .density-compact .table{font-size:.67rem}
  .density-compact .settings-tabs{margin-left:-7px;margin-right:-7px}
  .density-compact .color-settings{grid-template-columns:repeat(3,minmax(72px,1fr))}
  .density-compact .live-hero{min-height:300px}
  .density-compact .live-details{grid-template-columns:repeat(3,1fr)}
  .density-compact .live-results-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;max-height:62vh;padding:7px}
  .density-compact .live-result-tile{min-height:40px;padding:5px 3px}
  .density-compact .live-result-tile strong{font-size:.76rem}
  .density-compact .chart-card canvas{max-height:210px}
}
@media(max-width:420px){
  .density-compact .color-settings{grid-template-columns:repeat(2,1fr)}
  .density-compact .live-details{grid-template-columns:repeat(2,1fr)}
  .density-compact .collector-detail-menu{width:min(310px,calc(100vw - 14px))}
  .density-compact .live-results-grid{gap:4px;padding:6px}
  .density-compact .live-result-tile{min-height:38px}
  .density-compact .live-result-tile strong{font-size:.7rem}
}

/* Jam top bar dipusatkan terhadap area halaman, terpisah dari kelompok aksi kanan. */
.density-compact .topbar{position:sticky}
.density-compact .topbar-time-centered{
  position:absolute;
  top:50%;
  left:50%;
  z-index:4;
  min-width:220px;
  padding:5px 18px;
  transform:translate(-50%,-50%);
  align-items:center;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  box-shadow:0 7px 20px rgba(15,23,42,.08);
  text-align:center;
}
.density-compact .topbar-time-centered .topbar-date{
  font-size:.62rem;
  font-weight:700;
  line-height:1.15;
}
.density-compact .topbar-time-centered .topbar-clock{
  font-size:1.55rem;
  line-height:1.15;
  letter-spacing:.025em;
}
html[data-theme=dark] .density-compact .topbar-time-centered{
  background:var(--surface-2);
  box-shadow:0 7px 20px rgba(0,0,0,.25);
}
@media(max-width:1450px){
  .density-compact .topbar-time-centered{
    min-width:190px;
    padding:5px 12px;
  }
  .density-compact .topbar-time-centered .topbar-clock{font-size:1.3rem}
}
@media(max-width:1150px){
  .density-compact .topbar-time-centered{min-width:180px}
}
@media(max-width:991px){
  .density-compact .topbar-time-centered{
    display:flex;
    min-width:160px;
    padding:5px 10px;
    border-radius:10px;
  }
  .density-compact .topbar-time-centered .topbar-date{display:none}
  .density-compact .topbar-time-centered .topbar-clock{
    display:block;
    font-size:1.18rem;
  }
}
@media(max-width:767px){
  .density-compact .topbar-time-centered{
    min-width:145px;
    padding:5px 8px;
  }
  .density-compact .topbar-time-centered .topbar-clock{font-size:1.05rem}
}
@media(max-width:520px){
  .density-compact .topbar-time-centered{
    position:static;
    min-width:118px;
    margin:auto;
    padding:4px 6px;
    transform:none;
    box-shadow:none;
  }
  .density-compact .topbar-time-centered .topbar-clock{font-size:.9rem}
}