/* 1. KUNCI LAYAR AGAR TIDAK BISA DIGESER KE KANAN-KIRI */
        html, body {
            overflow-x: hidden !important;
            max-width: 100vw !important;
        }

        /* 2. PAKSA SEMUA ELEMEN TETAP DI DALAM BATAS LAYAR */
        *, *::before, *::after {
            box-sizing: border-box !important;
        }

        /* 3. MENCEGAH ELEMEN FLEXBOX/GRID MELUBER KE KANAN */
        div[style*="display: flex"], 
        div[style*="display:flex"],
        div[style*="display: grid"],
        div[style*="display:grid"] {
            max-width: 100% !important;
        }

        /* 4. PASTIKAN INPUT DI DALAM MODAL TIDAK JEBOL */
        .item-group input, 
        .item-group textarea {
            width: 100% !important;
            max-width: 100% !important;
        }
  
    :root { --bg: #000; --card: #fff; --primary: #000; --accent: #2196F3; --danger: #c62828; --success: #2e7d32; --warn: #f57c00;}
    body { margin: 0; font-family: 'Segoe UI', sans-serif; background: var(--bg); color: #000; height: 100dvh; overflow: hidden; position: relative; }
    
    #login-page { display: flex; justify-content: center; align-items: center; height: 100vh; background: var(--bg); color:#fff;}
    .login-card { background: var(--card); color: #000; padding: 30px; border-radius: 15px; width: 85%; max-width: 350px; text-align: center; }
    input, select, textarea { width: 100%; padding: 12px; margin: 6px 0; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; font-family:inherit; font-size:13px;}
    button { width: 100%; padding: 14px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; margin-top:8px;}
    
    .btn-main { background: var(--primary); color: #fff; }
    .btn-main:disabled { background: #999; cursor: not-allowed; } 
    
    #main-app { display: none; flex-direction: column; height: 100dvh; background: #f4f4f4;}
    .content { flex: 1; padding: 15px; overflow-y: auto; padding-bottom: 90px; display: flex; flex-direction: column; }
    .navbar { background: #fff; display: flex; justify-content: space-around; padding: 12px 0; position: fixed; bottom: 0; width: 100%; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); overflow-x: auto; z-index:10;}
    .nav-item { text-align: center; color: #666; cursor: pointer; font-size: 11px; flex: 1; min-width: 60px;}
    .nav-item i { display: block; font-size: 20px; margin-bottom: 4px; }
    .action-icon { cursor: pointer; color: #999; font-size: 14px; padding:4px;}
    .action-icon:hover { color: var(--danger); }
    
    /* UI CARDS */
    .summary-scroll { display: flex; overflow-x: auto; gap: 10px; margin-bottom: 15px; scroll-snap-type: x mandatory; flex-shrink: 0;}
    .sum-card { min-width: 150px; background: #fff; padding: 12px; border-radius: 10px; border-bottom: 3px solid var(--success); scroll-snap-align: start; box-shadow: 0 2px 4px rgba(0,0,0,0.05);}
    .belanja-card { background: #fff; padding: 18px; border-radius: 12px; margin-bottom: 15px; position: relative; border-left: 5px solid #000; box-shadow: 0 4px 8px rgba(0,0,0,0.08); transition: background 0.3s; flex-shrink: 0;}
    .belanja-card.lunas { background-color: #ffebee; border-left-color: var(--danger); border: 1px solid #ffcdd2; border-left: 5px solid var(--danger);}
    .b-header { font-size:11px; color:#000; border-bottom:1px dashed #eee; padding-bottom:8px; margin-bottom:12px; }
    .b-item-row { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
    .b-item-title { font-weight:bold; font-size:14px; color:#000; }
    .text-comment { color: #000; font-size: 11px; font-weight: bold; cursor: pointer; display: inline-block; margin-top: 5px;}
    .b-grandtotal { color:var(--danger); font-size:12px; font-weight:900; text-align:right;}
    .btn-approve { display:flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid #ccc; border-radius:6px; font-size:11px; color:#555; cursor:pointer; background:#fff; font-weight:bold;}
    .btn-approve .box { width:12px; height:12px; border:1px solid #ccc; border-radius:3px; }
    .btn-approved { display:flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--success); border-radius:6px; font-size:11px; color:var(--success); cursor:pointer; background:#e8f5e9; font-weight:bold;}
    .btn-square-tf { background: transparent; color: #000; width: 34px; height: 34px; border-radius: 8px; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 16px; border: 2px solid #000; transition: 0.2s;}
    .btn-square-tf.lunas { border-color: var(--danger); color: var(--danger); }
    .link-tf { display:block; font-size:10px; color:#000; margin-top:5px; text-decoration:none; font-weight:bold;}
    .badge-lunas { background: var(--danger); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: bold; display: inline-block; margin-bottom: 5px;}
    .badge-prio { font-size:10px; padding:3px 8px; border-radius:12px; font-weight:bold; }
    .prio-high { background:#ffebee; color:#c62828; } .prio-medium { background:#fff3e0; color:#ef6c00; } .prio-low { background:#e8f5e9; color:#2e7d32; }

    /* KANBAN & CHECKLIST */
    .kanban-wrapper { flex: 1; display: flex; overflow-x: auto; gap: 15px; scroll-snap-type: x mandatory; padding-bottom: 10px; align-items: flex-start; }
    .kanban-col { min-width: 280px; flex: 1; border-radius: 8px; display: flex; flex-direction: column; background: #f0f0f0; scroll-snap-align: start; max-height: 100%; }
    .k-head { padding: 12px; font-weight: bold; text-align: center; border-radius: 8px 8px 0 0; border-bottom: 2px solid rgba(0,0,0,0.1); flex-shrink:0; }
    .bg-planning { background-color: #ffe599; color: #000; } .bg-pre { background-color: #b6d7a8; color: #000; } .bg-process { background-color: #38761d; color: white; } .bg-cheklist { background-color: #990000; color: white; } .bg-closing { background-color: #b45f06; color: white; }
    .bg-ns { background-color: #e0e0e0; color: #333; } .bg-ip { background-color: #bbdefb; color: #0d47a1; } .bg-done { background-color: #c8e6c9; color: #1b5e20; }
    .k-body { padding: 10px; overflow-y: auto; flex: 1; }
    .k-card { background: white; padding: 15px; border-radius: 6px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); cursor: pointer; font-weight: 500; font-size: 13px; border-left: 4px solid #000; position: relative;}
    
    .cl-prj { font-size: 10px; background: #eee; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-bottom: 5px; color: #555;}
    .cl-pic { font-size: 11px; color: #666; margin-top: 8px; display: flex; align-items: center; gap: 5px;}
    .cl-pic i { color: #000; }
    .cl-attachment { font-size:10px; color:#000; text-decoration:none; display:inline-block; margin-top:8px; background:#e0e0e0; padding:4px 8px; border-radius:4px; font-weight:bold;}
    .btn-bukti-lapangan { display:inline-block; margin-top:8px; background:#000; color:#fff; padding:4px 8px; border-radius:4px; font-size:10px; font-weight:bold;}

    /* BUTTON TAMBAH (FAB) */
    .fab { position: fixed; bottom: 85px; right: 20px; width: 55px; height: 55px; background: #000; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 24px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); cursor: pointer; z-index: 9999; pointer-events: auto;}
    
    /* MODAL */
    .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 10000; justify-content: center; align-items: center; }
    .modal-content { background: #fff; padding: 20px; border-radius: 12px; width: 90%; max-width: 400px; max-height:85vh; overflow-y:auto; text-align:left;}
    .item-group { background: #f9f9f9; border: 1px solid #eee; padding: 12px; border-radius: 8px; margin-bottom: 10px; }
    .btn-add-item { background: #e0e0e0; color: #000; border: 1px dashed #000; padding: 10px; width: 100%; border-radius: 8px; cursor: pointer; font-weight: bold; margin-bottom: 15px; display: flex; justify-content: center; align-items: center; gap: 8px;}
  /* ==========================================
       PERBAIKAN RESPONSIVE MODAL & BARANG
       (Mencegah layar geser kanan-kiri)
       ========================================== */
    .modal-content { 
        background: #fff !important; 
        padding: 20px !important; 
        border-radius: 12px !important; 
        width: 90% !important; 
        max-width: 400px !important; 
        max-height: 85vh !important; 
        overflow-y: auto !important; 
        overflow-x: hidden !important; /* Kunci rahasianya di sini */
        text-align: left !important; 
        box-sizing: border-box !important; 
    }
    
    .item-group { 
        background: #f9f9f9 !important; 
        border: 1px solid #eee !important; 
        padding: 12px !important; 
        border-radius: 8px !important; 
        margin-bottom: 10px !important; 
        box-sizing: border-box !important; /* Mencegah padding merusak ukuran */
        overflow-x: hidden !important; 
        width: 100% !important; 
    }

    /* Pastikan kolom input di dalam barang tidak tembus batas */
    .item-group input {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
    
    /* Custom tampilan Gantt */
        .gantt .grid-header { fill: #fbfbfb; stroke: #eee; }
        .gantt .bar-label { fill: #000; font-weight: bold; font-size: 11px; }
        .gantt .bar-progress { fill: rgba(0,0,0,0.2); }
        
    /* Efek Bendera Milestone */
        .gantt .bar-wrapper.has-milestone::after {
            content: '🚩';
            position: absolute;
            right: -15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 14px;
        }
        

    /* Style Bendera Milestone */
    .gantt .bar-milestone {
        fill: #e74c3c !important; /* Warna Merah untuk Bendera */
    }

    /* Biar teks di dalam balok tetap putih/jelas */
    .gantt .bar-label {
        fill: #ffffff !important;
        font-size: 10px;
    }
    
    
    /* Style Teks di dalam balok agar tetap putih */
    .gantt .bar-label {
        fill: #ffffff !important;
        font-size: 10px;
    }
    
    /* Style Bendera Milestone Merah Di Ujung Balok */
    .gantt .bar-milestone {
        fill: #e74c3c !important; /* Warna Merah untuk Bendera */
    }

    /* Trik Menghilangkan Balok untuk Bendera 1 Hari */
        .gantt .bar-is-milestone .bar { fill: transparent !important; stroke: none !important; }
        .gantt .bar-is-milestone .bar-progress { fill: transparent !important; }
        .gantt .bar-is-milestone .bar-label { fill: #e74c3c !important; font-weight: bold; }
        /* Tampilkan Bendera di lokasi balok yang hilang */
        .gantt .bar-is-milestone .bar-wrapper::before {
    content: '🚩';
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    }
    
    /* Trik Bendera 1 Hari: Baloknya Dibuat Tembus Pandang */
    .gantt .bar-is-milestone .bar { fill: transparent !important; stroke: none !important; }
    .gantt .bar-is-milestone .bar-progress { display: none !important; }
    .gantt .bar-is-milestone .bar-label { 
        fill: #e74c3c !important; /* Warna Teks Merah Terang */
        font-size: 13px !important; 
        font-weight: bold; 
    }
    
    /* Styling Mode 'Day' agar Garisnya Pudar (Tidak Sakit Mata) */
    .gantt .grid-line {
        stroke: #f5f5f5 !important; /* Warna garis abu-abu super tipis */
        stroke-width: 1px;
    }
    .gantt .tick text {
        fill: #888 !important; /* Teks tanggal abu-abu kalem */
        font-size: 10px;
    }
    
    /* Samarkan garis vertikal harian */
    .gantt .grid-line { stroke: #f0f0f0 !important; stroke-width: 1px; }
    .gantt .tick text { fill: #999 !important; font-size: 10px; }
    
    /* CSS WARNA BALOK GANTT CHART (TERBARU) */
    .gantt .phase-plan .bar, .gantt .phase-planning .bar { fill: #3498db !important; }
    .gantt .phase-workshop .bar, .gantt .phase-produksi-workshop .bar { fill: #cf6542 !important; }
    .gantt .phase-instalasi .bar, .gantt .phase-instalasi-on-site .bar { fill: #27ae60 !important; }
    .gantt .phase-pekerjaan-defect .bar { fill: #ebf743 !important; }
    .gantt .phase-finish .bar { fill: #ed72df !important; }
    
    /* Khusus "Pekerjaan Defect" yang warnanya kuning cerah, teks di dalam baloknya kita hitamkan agar terbaca jelas */
    .gantt .phase-pekerjaan-defect .bar-label { fill: #000 !important; font-weight: bold; }
    
    /* PAKSA HILANGKAN BALOK MILESTONE 1 HARI (Tahan Bentrok) */
    .gantt g.bar-wrapper.bar-is-milestone rect.bar,
    .gantt g.bar-wrapper.bar-is-milestone rect.bar-progress {
        fill: transparent !important;
        stroke: none !important;
        background: transparent !important;
        opacity: 0 !important;
    }

    /* ======================================================= */
    /* JURUS TEMBUS PANDANG: HILANGKAN BACKGROUND BELANG BAWAAN GANTT */
    /* ======================================================= */
    .gantt .grid-background { 
        fill: transparent !important; 
    }
    .gantt .grid-row { 
        fill: transparent !important; 
    }
    .gantt .grid-row:nth-child(even) { 
        fill: transparent !important; 
    }
    
    /* Memastikan tulisan yang terlempar ke luar balok tetap jelas & tebal */
    .gantt .bar-label {
        fill: #111111 !important; /* Warna Hitam Pekat */
        font-weight: bold !important;
    }

    body {
    overflow-x: hidden; /* Tambahkan baris ini */
    /* properti body Anda lainnya tetap dibiarkan */
    width: 100%;
    max-width: 100vw;
    }

    /* ===== KASBON UI REDESIGN ===== */
    .kb-page{
      display:flex;
      flex-direction:column;
      gap:14px;
      padding-bottom:90px;
    }
    
    .kb-topbar{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
    }
    
    .kb-title-wrap h3{
      margin:0;
      font-size:18px;
      color:#111;
    }
    
    .kb-title-wrap p{
      margin:4px 0 0;
      font-size:11px;
      color:#777;
    }
    
    .kb-top-actions{
      display:flex;
      gap:8px;
      flex-shrink:0;
    }
    
    .kb-chip-btn{
      background:#000;
      color:#fff;
      border:none;
      border-radius:10px;
      padding:8px 12px;
      font-size:11px;
      font-weight:700;
      cursor:pointer;
      width:auto;
      margin:0;
    }
    
    .kb-chip-btn.secondary{
      background:#f1f1f1;
      color:#111;
      border:1px solid #ddd;
    }
    
    .kb-summary{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:10px;
    }
    
    .kb-summary-card{
      background:#fff;
      border:1px solid #e7e7e7;
      border-radius:14px;
      padding:12px;
      box-shadow:0 2px 8px rgba(0,0,0,.04);
    }
    
    .kb-summary-label{
      font-size:10px;
      color:#777;
      margin-bottom:6px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.4px;
    }
    
    .kb-summary-value{
      font-size:18px;
      font-weight:900;
      color:#111;
    }
    
    .kb-summary-sub{
      margin-top:4px;
      font-size:11px;
      color:#2e7d32;
      font-weight:700;
    }
    
    .kb-group{
      background:#fff;
      border:1px solid #e5e5e5;
      border-radius:18px;
      overflow:hidden;
      box-shadow:0 4px 12px rgba(0,0,0,.05);
    }
    
    .kb-group-head{
      padding:14px 14px 10px;
      border-bottom:1px solid #f0f0f0;
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:10px;
    }
    
    .kb-group-title{
      font-size:14px;
      font-weight:900;
      color:#111;
      line-height:1.35;
    }
    
    .kb-group-sub{
      margin-top:4px;
      font-size:11px;
      color:#666;
    }
    
    .kb-badge{
      display:inline-flex;
      align-items:center;
      gap:5px;
      padding:5px 9px;
      border-radius:999px;
      font-size:10px;
      font-weight:800;
      white-space:nowrap;
    }
    
    .kb-badge.pending{
      background:#fff4e5;
      color:#b26a00;
      border:1px solid #ffd79a;
    }
    
    .kb-badge.progress{
      background:#eaf3ff;
      color:#1565c0;
      border:1px solid #bfd7ff;
    }
    
    .kb-badge.lunas{
      background:#e8f5e9;
      color:#2e7d32;
      border:1px solid #b7dfbb;
    }
    
    .kb-item{
      padding:14px;
      border-bottom:1px dashed #e3e3e3;
    }
    
    .kb-item:last-child{
      border-bottom:none;
    }
    
    .kb-item-top{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:10px;
      margin-bottom:10px;
    }
    
    .kb-person{
      font-size:13px;
      font-weight:800;
      color:#111;
      line-height:1.4;
    }
    
    .kb-time{
      margin-top:3px;
      font-size:10px;
      color:#888;
    }
    
    .kb-nominal{
      text-align:right;
      flex-shrink:0;
    }
    
    .kb-nominal .label{
      font-size:10px;
      color:#888;
      margin-bottom:3px;
    }
    
    .kb-nominal .value{
      font-size:18px;
      color:#c62828;
      font-weight:900;
      line-height:1.1;
    }
    
    .kb-meta{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px 10px;
      margin-bottom:10px;
    }
    
    .kb-meta-box{
      background:#f8f8f8;
      border:1px solid #ececec;
      border-radius:12px;
      padding:9px 10px;
    }
    
    .kb-meta-box .m-label{
      font-size:10px;
      color:#777;
      margin-bottom:3px;
    }
    
    .kb-meta-box .m-value{
      font-size:11px;
      color:#111;
      font-weight:700;
      line-height:1.45;
    }
    
    .kb-note{
      background:#fcfcfc;
      border:1px solid #efefef;
      border-radius:12px;
      padding:10px 12px;
      margin-bottom:12px;
    }
    
    .kb-note .m-label{
      font-size:10px;
      color:#777;
      margin-bottom:4px;
    }
    
    .kb-note .m-value{
      font-size:11px;
      color:#111;
      line-height:1.5;
      font-weight:700;
    }
    
    .kb-actions{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    
    .kb-approval{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
    }
    
    .kb-side-actions{
      display:flex;
      gap:8px;
      align-items:center;
      flex-wrap:wrap;
    }
    
    .kb-source-select{
      min-width:130px;
      padding:8px 10px;
      font-size:11px;
      border-radius:10px;
      border:1px solid #d6d6d6;
      background:#fff;
      color:#111;
      font-weight:700;
    }
    
    .kb-link{
      font-size:11px;
      font-weight:800;
      color:#111;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:5px;
    }
    
    .kb-empty{
      text-align:center;
      color:#888;
      padding:30px 20px;
      background:#fff;
      border:1px dashed #ddd;
      border-radius:16px;
    }
    
    .kb-history-card{
      border:1px solid #e4e4e4;
      border-radius:14px;
      padding:12px;
      margin-bottom:10px;
      background:#fafafa;
    }
    
    .kb-history-top{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:10px;
      margin-bottom:8px;
    }
    
    .kb-history-title{
      font-size:13px;
      font-weight:800;
      color:#111;
    }
    
    .kb-history-time{
      font-size:10px;
      color:#888;
    }
    
    @media (max-width: 480px){
      .kb-summary{
        grid-template-columns:1fr 1fr;
      }
    
      .kb-meta{
        grid-template-columns:1fr;
      }
    
      .kb-item-top{
        flex-direction:column;
      }
    
      .kb-nominal{
        text-align:left;
      }
    
      .kb-topbar{
        align-items:flex-start;
        flex-direction:column;
      }
    
      .kb-top-actions{
        width:100%;
      }
    
      .kb-chip-btn{
        flex:1;
        text-align:center;
      }
    
      #modal-kb-tf .modal-content{
        width:100%;
        max-width:none;
        margin-top:auto;
        border-bottom-left-radius:0;
        border-bottom-right-radius:0;
        border-top-left-radius:18px;
        border-top-right-radius:18px;
        padding:18px;
      }
    }
    .kb-page{
      padding-bottom:90px;
    }
    
    .kb-head-simple h3{
      margin:0 0 14px 0;
      font-size:17px;
      color:#111;
    }
    
    .kb-tabs{
      display:flex;
      gap:0;
      margin-bottom:14px;
    }
    
    .kb-tab{
      flex:1;
      border:1.5px solid #222;
      background:#fff;
      color:#111;
      padding:12px 10px;
      font-size:12px;
      font-weight:800;
      cursor:pointer;
      border-radius:0;
      margin:0;
    }
    
    .kb-tab:first-child{
      border-top-left-radius:10px;
      border-bottom-left-radius:10px;
    }
    
    .kb-tab:last-child{
      border-top-right-radius:10px;
      border-bottom-right-radius:10px;
      border-left:none;
    }
    
    .kb-tab.active{
      background:#111;
      color:#fff;
    }
    
    .kb-filter-wrap{
      margin-bottom:14px;
    }
    
    .kb-filter-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    
    .kb-filter-box{
      background:#fff;
      border:1px solid #ddd;
      border-radius:12px;
      padding:10px;
    }
    
    .kb-filter-box label{
      display:block;
      font-size:10px;
      font-weight:800;
      color:#666;
      margin-bottom:6px;
    }
    
    .kb-filter-box input{
      width:100%;
      padding:10px 12px;
      border:1px solid #d9d9d9;
      border-radius:10px;
      font-size:12px;
      box-sizing:border-box;
    }
    
    .kb-riwayat-placeholder{
      min-height:320px;
      border:1px solid #ddd;
      border-radius:14px;
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      color:#999;
      font-size:13px;
      line-height:1.6;
    }
    
    .kb-riwayat-placeholder span{
      font-size:11px;
      color:#b0b0b0;
    }
    
    .kb-project-card{
      background:#fff;
      border:1px solid #e3e3e3;
      border-radius:16px;
      margin-bottom:12px;
      overflow:hidden;
    }
    
    .kb-project-head{
      padding:12px 14px;
      border-bottom:1px solid #eee;
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:10px;
    }
    
    .kb-project-title{
      font-size:13px;
      font-weight:900;
      color:#111;
    }
    
    .kb-project-sub{
      font-size:10px;
      color:#777;
      margin-top:3px;
    }
    
    .kb-project-total{
      font-size:12px;
      font-weight:900;
      color:#111;
      white-space:nowrap;
    }
    
    .kb-active-item{
      padding:12px 14px;
      border-bottom:1px dashed #e6e6e6;
    }
    
    .kb-active-item:last-child{
      border-bottom:none;
    }
    
    .kb-active-top{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:10px;
    }
    
    .kb-active-name{
      font-size:13px;
      font-weight:900;
      color:#111;
    }
    
    .kb-active-time{
      font-size:10px;
      color:#888;
      margin-top:3px;
    }
    
    .kb-active-nominal{
      font-size:16px;
      font-weight:900;
      color:#c62828;
      text-align:right;
      white-space:nowrap;
    }
    
    .kb-active-meta{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      margin-top:8px;
    }
    
    .kb-active-meta span,
    .kb-badge-soft{
      background:#f5f5f5;
      border:1px solid #e8e8e8;
      border-radius:999px;
      padding:6px 9px;
      font-size:10px;
      font-weight:700;
      color:#333;
    }
    
    .kb-active-note{
      margin-top:9px;
      background:#fafafa;
      border:1px solid #eee;
      border-radius:10px;
      padding:9px 10px;
      font-size:11px;
      color:#444;
      line-height:1.5;
    }
    
    .kb-active-foot{
      margin-top:10px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    
    .kb-approval-row,
    .kb-action-row{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
      align-items:center;
    }
    
    .kb-source-select{
      min-width:140px;
      padding:8px 10px;
      border-radius:10px;
      border:1px solid #d8d8d8;
      font-size:11px;
      font-weight:800;
    }
    
    .kb-table-wrap{
      background:#fff;
      border:1px solid #ddd;
      border-radius:14px;
      overflow:auto;
    }
    
    .kb-table{
      width:100%;
      border-collapse:collapse;
      min-width:720px;
    }
    
    .kb-table th{
      background:#f4f4f4;
      color:#111;
      font-size:11px;
      text-align:left;
      padding:12px 10px;
      border-bottom:1px solid #ddd;
    }
    
    .kb-table td{
      padding:11px 10px;
      font-size:11px;
      color:#333;
      border-bottom:1px solid #eee;
    }
    
    @media (max-width: 600px){
      .kb-filter-grid{
        grid-template-columns:1fr;
      }
    
      .kb-active-top{
        flex-direction:column;
      }
    
      .kb-active-nominal{
        text-align:left;
      }
    
      .kb-active-foot{
        flex-direction:column;
        align-items:stretch;
      }
    
      .kb-source-select{
        width:100%;
      }
    }