:root{
      --bg:#F5F3EA; --surface:#FFFFFF; --primary:#0E6B5C; --primary-dark:#0A4A40;
      --primary-soft:#E4EFEA; --text:#1C2622; --muted:#6E756D; --border:#E3DFD1;
      --success:#256B4E; --success-soft:#E4F0E8; --warning:#A5761E; --warning-soft:#F5EAD3;
      --danger:#9E4130; --danger-soft:#F4E3DE;
      --ink:#0A211C; --ink-2:#123B33; --brass:#C6A05B; --brass-soft:#F1E6D0;
      --font-display:'Fraunces', Georgia, serif; --font-body:'Inter', -apple-system, sans-serif;
      --font-mono:'IBM Plex Mono', Menlo, monospace;
    }
    *{box-sizing:border-box;}
    body{
      margin:0; background:var(--bg); color:var(--text);
      font-family:var(--font-body); -webkit-font-smoothing:antialiased;
    }
    ::selection{ background:var(--brass-soft); color:var(--ink); }
    .header{
      background:linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
      color:#fff; padding:20px 28px 16px; display:flex; align-items:center;
      justify-content:space-between; gap:16px; flex-wrap:wrap; position:relative;
    }
    .calib-scale{
      height:9px; background:var(--ink-2);
      background-image:repeating-linear-gradient(90deg, rgba(198,160,91,.55) 0 1px, transparent 1px 12px,
        rgba(198,160,91,.85) 12px 13px, transparent 13px 60px);
      border-bottom:1px solid rgba(198,160,91,.4);
    }
    .header-left{display:flex; align-items:center; gap:14px;}
    .logo-box{
      width:44px; height:44px; border-radius:12px; background:rgba(198,160,91,.14);
      border:1px solid rgba(198,160,91,.5);
      display:flex; align-items:center; justify-content:center; font-size:20px;
    }
    .title{font-family:var(--font-display); font-size:20px; font-weight:600; letter-spacing:.2px;}
    .subtitle{font-size:11.5px; opacity:.75; text-transform:uppercase; letter-spacing:.06em; margin-top:2px;}
    .icon-btn{
      background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); color:#fff; width:34px; height:34px;
      border-radius:9px; cursor:pointer; display:flex; align-items:center; justify-content:center;
      transition:background .15s;
    }
    .icon-btn:hover{background:rgba(198,160,91,.28); border-color:rgba(198,160,91,.6);}
    .tabs{
      display:flex; gap:4px; background:var(--surface); border-bottom:1px solid var(--border);
      padding:0 24px;
    }
    .tab-btn{
      border:none; background:none; padding:12px 18px; font-size:13.5px; font-weight:600;
      font-family:var(--font-body); color:var(--muted); cursor:pointer; border-radius:8px 8px 0 0;
      margin:6px 0 -1px; border-bottom:2px solid transparent; transition:color .15s, background .15s;
    }
    .tab-btn.active{ color:var(--ink); background:var(--brass-soft); border-bottom-color:var(--brass); }
    .tab-btn:hover:not(.active){ color:var(--text); background:rgba(10,33,28,.05); }
    .year-bar{
      display:flex; align-items:center; gap:10px; background:var(--surface);
      border-bottom:1px solid var(--border); padding:10px 24px;
    }
    .year-bar select{
      padding:6px 10px; border-radius:7px; border:1px solid var(--border); font-size:13px;
      font-weight:600; color:var(--text); background:var(--surface); font-family:var(--font-body);
    }
    .year-bar select:focus{ outline:2px solid var(--brass); outline-offset:1px; }
    .archive-banner{
      background:var(--warning-soft); color:#7A5714; font-size:13px; font-weight:600;
      padding:11px 18px; display:flex; align-items:center; gap:8px;
      border-left:3px solid var(--warning); border-radius:10px;
      margin:14px 24px 0; box-shadow:0 2px 8px rgba(165,118,30,.12);
    }
    .container{max-width:1280px; margin:0 auto; padding:22px 24px;}
    .cards{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px;}
    .card{border-radius:14px; padding:18px 20px; min-width:150px; flex:1 1 150px;
      background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--primary);
      box-shadow:0 2px 10px rgba(10,33,28,.05); transition:transform .15s, box-shadow .15s;}
    .card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(10,33,28,.1); }
    .card-icon{ font-size:20px; display:block; margin-bottom:10px; opacity:.9; }
    .card-label{font-size:11.5px; font-weight:600; color:var(--muted); margin-bottom:6px;
      text-transform:uppercase; letter-spacing:.05em;}
    .card-value{font-family:var(--font-display); font-size:30px; font-weight:600;}
    .toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px;}
    .search-box{
      display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
      border-radius:9px; padding:8px 12px; flex:1 1 240px;
    }
    .search-box input{border:none; outline:none; flex:1; font-size:14px; background:transparent; color:var(--text); font-family:var(--font-body);}
    .btn{border:none; border-radius:8px; padding:9px 16px; font-size:13.5px; font-weight:600; cursor:pointer;
      display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); transition:filter .15s, background .15s, box-shadow .15s, transform .15s;}
    .btn-primary{background:linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%); color:#fff; box-shadow:0 2px 8px rgba(10,33,28,.25);}
    .btn-primary:hover{ box-shadow:0 4px 14px rgba(10,33,28,.35); transform:translateY(-1px); }
    .btn-secondary{background:var(--surface); color:var(--text); border:1px solid var(--border);}
    .btn-secondary:hover{border-color:var(--brass); color:var(--ink);}
    .btn:disabled{opacity:.55; cursor:default;}
    .banner{margin-bottom:14px; font-size:13px; padding:11px 14px; border-radius:8px;}
    .banner-info{color:var(--primary-dark); background:var(--primary-soft); border-left:3px solid var(--primary);}
    .banner-error{color:var(--danger); background:var(--danger-soft); border-left:3px solid var(--danger);}
    .table-wrap{background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:auto;
      box-shadow:0 1px 3px rgba(10,33,28,.04);}
    .top-scroll{overflow-x:auto; overflow-y:hidden; height:14px; margin-bottom:6px; border-radius:8px;}
    .top-scroll-inner{height:1px;}
    table{border-collapse:collapse; width:100%; font-size:12.5px; min-width:900px;}
    thead tr{background:#F8F6EF; border-bottom:1px solid var(--border);}
    th{text-align:left; padding:9px 10px; font-weight:600; color:var(--muted); white-space:nowrap;
      text-transform:uppercase; font-size:10.5px; letter-spacing:.05em;}
    td{padding:8px 10px; white-space:nowrap; border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums;}
    tbody tr:hover td{ background:#FBFAF5; }
    .empty-cell{color:#C2BCA8;}
    .row-actions{
      text-align:right; position:sticky; right:0; background:var(--surface);
      box-shadow:-6px 0 6px -6px rgba(0,0,0,0.15); min-width:145px;
    }
    thead .actions-head{
      position:sticky; right:0; background:#F8F6EF;
      box-shadow:-6px 0 6px -6px rgba(0,0,0,0.15); min-width:145px;
    }
    .check-cell{
      position:sticky; left:0; background:var(--surface); z-index:1;
      box-shadow:6px 0 6px -6px rgba(0,0,0,0.1);
    }
    thead .check-head{
      position:sticky; left:0; background:#F8F6EF; z-index:2;
      box-shadow:6px 0 6px -6px rgba(0,0,0,0.1);
    }
    .row-checkbox, .select-all-checkbox{ width:16px; height:16px; cursor:pointer; accent-color:var(--ink); }
    .row-icon-btn{background:#F2F0E7; border:none; border-radius:7px; width:28px; height:28px;
      display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text);
      transition:background .15s;}
    .row-icon-btn:hover{background:var(--brass-soft);}
    .row-icon-btn.danger{color:var(--danger);}
    .pill{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
      padding:4px 11px; border-radius:999px; white-space:nowrap; box-shadow:0 1px 2px rgba(10,33,28,.06);}
    .center-msg{padding:24px; text-align:center; color:var(--muted);}
    .modal-overlay{
      position:fixed; inset:0; background:rgba(10,33,28,.55); display:none;
      align-items:center; justify-content:center; z-index:50; padding:16px;
    }
    .modal-overlay.open{display:flex;}
    .modal{background:var(--surface); border-radius:14px; padding:24px; width:100%; max-width:420px;
      max-height:85vh; overflow-y:auto; border-top:3px solid var(--brass);
      box-shadow:0 20px 50px rgba(10,33,28,.3);}
    .modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
    .modal-title{font-family:var(--font-display); font-size:17px; font-weight:600;}
    .modal-close{background:none; border:none; cursor:pointer; color:var(--muted); font-size:18px;}
    .field{margin-bottom:12px;}
    .field label{font-size:11.5px; font-weight:600; color:var(--muted); display:block; margin-bottom:5px;
      text-transform:uppercase; letter-spacing:.04em;}
    .field input, .field select{
      width:100%; padding:9px 12px; border-radius:8px; border:1px solid var(--border);
      font-size:13.5px; outline:none; color:var(--text); background:var(--surface); font-family:var(--font-body);
    }
    .field input:focus, .field select:focus{ border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-soft); }
    .col-row{display:flex; justify-content:space-between; align-items:center; padding:9px 10px;
      background:#F8F6EF; border-radius:8px; margin-bottom:8px;}
    .col-row .tag{color:var(--muted); font-size:11.5px;}
    .spin{animation:spin 1s linear infinite; display:inline-block;}
    @keyframes spin{from{transform:rotate(0);}to{transform:rotate(360deg);}}

    /* ============ Latar animasi: perbaikan alat elektromedis ============ */
    .bg-fx{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
    .bg-fx-grid{
      position:absolute; inset:-10%; width:120%; height:120%;
      background-image:
        linear-gradient(rgba(10,33,28,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10,33,28,.05) 1px, transparent 1px);
      background-size:46px 46px;
      animation: bgGridDrift 55s linear infinite;
    }
    @keyframes bgGridDrift{ from{transform:translate(0,0);} to{transform:translate(-46px,-46px);} }
    .bg-fx-glow{
      position:absolute; top:-15%; left:50%; transform:translateX(-50%);
      width:70vw; height:70vw; max-width:900px; max-height:900px;
      background:radial-gradient(circle, rgba(198,160,91,.25), transparent 62%);
      animation: bgGlowPulse 9s ease-in-out infinite;
    }
    @keyframes bgGlowPulse{ 0%,100%{opacity:.4;} 50%{opacity:.85;} }
    .bg-fx-ecg-wrap{ position:absolute; left:0; right:0; top:55%; height:120px; opacity:.22; overflow:hidden; }
    .bg-fx-ecg{ position:absolute; left:0; top:0; width:200%; height:100%; animation: bgEcgMove 16s linear infinite; }
    .bg-fx-ecg polyline{ fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
    @keyframes bgEcgMove{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
    .bg-fx-scenes{ position:absolute; right:-20px; bottom:-20px; width:300px; height:300px; }
    .bg-fx-scene{ position:absolute; inset:0; opacity:0; animation: bgSceneCycle 24s ease-in-out infinite; }
    .bg-fx-scene.scene-1{ animation-delay:0s; }
    .bg-fx-scene.scene-2{ animation-delay:-8s; }
    .bg-fx-scene.scene-3{ animation-delay:-16s; }
    @keyframes bgSceneCycle{
      0%{opacity:0;} 4%{opacity:.16;} 29%{opacity:.16;} 34%{opacity:0;} 100%{opacity:0;}
    }
    .bg-fx-scene .gear{ transform-origin:200px 200px; animation: bgGearSpin 22s linear infinite; }
    @keyframes bgGearSpin{ to{transform:rotate(360deg);} }
    .bg-fx-scene .spark{ animation: bgSparkPulse 1.8s ease-in-out infinite; transform-origin:center; }
    .bg-fx-scene .spark:nth-child(2){ animation-delay:.5s; }
    .bg-fx-scene .spark:nth-child(3){ animation-delay:1s; }
    @keyframes bgSparkPulse{ 0%,100%{opacity:0; transform:scale(.4);} 50%{opacity:1; transform:scale(1);} }
    .bg-fx-scene .pulse-dot{ transform-origin:228px 128px; animation: bgPulseDot 1.3s ease-in-out infinite; }
    @keyframes bgPulseDot{ 0%,100%{opacity:.4; transform:scale(.7);} 50%{opacity:1; transform:scale(1.3);} }
    .bg-fx-scene .needle{ transform-origin:200px 200px; animation: bgNeedleSwing 7s ease-in-out infinite; }
    @keyframes bgNeedleSwing{ 0%,100%{transform:rotate(-38deg);} 50%{transform:rotate(38deg);} }
    .bg-fx-particles span{
      position:absolute; bottom:-10px; width:4px; height:4px; border-radius:50%;
      background:var(--brass); opacity:0; animation-name:bgFloatUp; animation-iteration-count:infinite; animation-timing-function:linear;
    }
    @keyframes bgFloatUp{
      0%{ transform:translateY(0); opacity:0; }
      10%{ opacity:.5; } 90%{ opacity:.25; }
      100%{ transform:translateY(-110vh); opacity:0; }
    }
    @media (prefers-reduced-motion: reduce){
      .bg-fx-grid, .bg-fx-glow, .bg-fx-ecg, .bg-fx-scene, .bg-fx-scene .gear, .bg-fx-scene .spark,
      .bg-fx-scene .pulse-dot, .bg-fx-scene .needle, .bg-fx-particles span{ animation:none !important; }
      .bg-fx-scene.scene-1{ opacity:.16; }
      .bg-fx-scene.scene-2, .bg-fx-scene.scene-3{ opacity:0; }
    }

    /* ============ Panel transparan (kaca) supaya animasi terlihat ============ */
    .header{ background:linear-gradient(160deg, rgba(10,33,28,.85) 0%, rgba(18,59,51,.85) 100%);
      backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
    .tabs{ background:rgba(255,255,255,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
    .year-bar{ background:rgba(255,255,255,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
    .card{ background:rgba(255,255,255,.8); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
    .table-wrap{ background:rgba(255,255,255,.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
    thead tr{ background:rgba(248,246,239,.85); }
    .modal{ background:rgba(255,255,255,.95); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }