/* ==========================================================
   PANEL KONTROL EA — tata letak sesuai desain
   Nama kelas mengikuti berkas rancangan agar mudah dirawat.
   ========================================================== */
.hero {
    margin:7px 12px 10px; border:1px solid var(--line); border-radius:20px; overflow:hidden; position:relative;
    background:
      linear-gradient(90deg,rgba(15,15,13,.95) 0%,rgba(15,15,13,.84) 48%,rgba(15,15,13,.62) 100%),
      repeating-linear-gradient(90deg,transparent 0 24px,rgba(243,230,164,.035) 24px 25px);
    box-shadow:var(--shadow);
  }
.candles{position:absolute;right:0;top:0;width:42%;height:100%;opacity:.75;overflow:hidden}
.candles i{position:absolute;bottom:18px;width:4px;border-radius:2px}
.candles i::before{content:"";position:absolute;left:1.5px;width:1px;background:currentColor;top:-12px;height:calc(100% + 24px);opacity:.8}
.hero-inner{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center;padding:15px 16px;position:relative;z-index:2}
.brand-logo{width:84px;height:84px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(243,230,164,.34),0 0 28px rgba(243,230,164,.12)}
.brand-title{font-size:28px;line-height:.9;font-weight:950;letter-spacing:.5px}
.brand-title small{display:block;font-size:17px;letter-spacing:2.4px;margin-top:8px}
.tag{font-size:10px;letter-spacing:2px;color:var(--gold);margin-top:10px;text-transform:uppercase}

.container{padding:0 12px 92px}
.card {
  background:linear-gradient(145deg,rgba(31,31,27,.96),rgba(22,22,19,.98));
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:inset 0 1px rgba(255,255,255,.03),0 10px 30px rgba(0,0,0,.16);
}
.label{font-size:12px;color:var(--muted);margin-bottom:4px}
.value{font-weight:850;font-size:20px;line-height:1.05}
.sub{font-size:12px;color:#aaa58f;margin-top:5px}
.icon-round{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:18px;flex:0 0 auto}
.row-flex{display:flex;align-items:center;gap:12px}
.green{color:var(--green)} .red{color:var(--red)} .gold{color:var(--gold)}
.hidden{display:none !important}

.btn {
  appearance:none;border:none;cursor:pointer;background:linear-gradient(180deg,#fff4bd,#dcc274);
  color:#16150f;font-weight:900;border-radius:12px;padding:12px 14px;box-shadow:0 0 26px rgba(243,230,164,.13);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px;white-space:nowrap;
}
.btn.secondary{background:#262620;color:#eee4bc;border:1px solid var(--line);box-shadow:none}
.btn.dark{background:#1a1a16;color:#f4ecd0;border:1px solid var(--line);box-shadow:none}
.btn.small{padding:8px 12px;font-size:11px;border-radius:10px}
.btn:active{transform:translateY(1px)}

.account-switcher{
  margin-bottom:8px;
}
.account-strip{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 1px 6px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(243,230,164,.28) transparent;
}
.account-strip::-webkit-scrollbar{height:4px}
.account-strip::-webkit-scrollbar-track{background:transparent}
.account-strip::-webkit-scrollbar-thumb{background:rgba(243,230,164,.25);border-radius:999px}
.account-mini{
  min-width:145px;
  max-width:145px;
  scroll-snap-align:start;
  flex:0 0 145px;
  padding:9px 10px;
  border:1px solid rgba(243,230,164,.18);
  border-radius:13px;
  background:linear-gradient(145deg,#191916,#11110f);
  cursor:pointer;
  transition:.18s ease;
}
.account-mini.active{
  border-color:rgba(243,230,164,.72);
  box-shadow:0 0 0 1px rgba(243,230,164,.11),0 8px 20px rgba(0,0,0,.22);
  background:linear-gradient(145deg,#25231b,#151410);
}
.account-mini:hover{transform:translateY(-1px)}
.mini-ea{
  font-size:12px;
  font-weight:900;
  color:#fff5d2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:4px;
}
.mini-account{
  font-size:11px;
  font-weight:800;
  color:#d5cda9;
  margin-bottom:5px;
}
.mini-money{
  display:flex;
  justify-content:space-between;
  gap:6px;
  font-size:11px;
  font-weight:900;
  line-height:1.15;
}
.mini-money span:first-child{color:#f2ead0}
.mini-money .plus{color:var(--green)}
.mini-money .minus{color:var(--red)}
.floating-alert{
  display:none;
  margin-top:9px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #ff7b82;
  background:linear-gradient(135deg,#c41422 0%,#9d0713 55%,#720008 100%);
  color:#fff;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 8px 22px rgba(179,0,14,.32),
    0 0 20px rgba(255,48,63,.16);
}
.floating-alert.show{
  display:flex;
  align-items:center;
  gap:10px;
}
.floating-alert .alert-icon{
  width:31px;
  height:31px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 31px;
  background:#fff;
  color:#b00614;
  font-size:19px;
  font-weight:1000;
  box-shadow:0 0 15px rgba(255,255,255,.20);
}
.floating-alert .alert-content{
  min-width:0;
  flex:1;
}
.floating-alert .alert-title{
  font-size:11px;
  font-weight:1000;
  letter-spacing:.7px;
  color:#fff;
  margin-bottom:2px;
}
.floating-alert .alert-message{
  font-size:11px;
  line-height:1.25;
  color:#ffe6e7;
}
.floating-alert strong{
  display:inline-block;
  color:#fff;
  font-size:14px;
  margin-left:3px;
  font-weight:1000;
  text-shadow:0 1px 8px rgba(0,0,0,.30);
}

.main-card{padding:12px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.identity-block{display:flex;flex-direction:column;gap:6px;min-width:0}
.identity-top{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#ece4c2;flex-wrap:wrap}
.identity-top .sep{opacity:.35}
.identity-name{font-size:18px;font-weight:900;color:#fff8df;line-height:1.15}

.status-card{margin-top:10px;padding:12px 14px;display:grid;grid-template-columns:1.2fr 1fr;gap:12px;align-items:center}
.status-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(40,229,111,.75);padding:8px 12px;border-radius:999px;font-weight:850;font-size:13px;color:#f7fff9;box-shadow:0 0 20px rgba(40,229,111,.10) inset}
.dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.power-wrap{display:flex;justify-content:flex-end;align-items:center;gap:10px;border-left:1px solid var(--line);padding-left:12px}
.switch{width:58px;height:32px;border-radius:999px;background:#3a3a34;border:1px solid #4d4d43;position:relative;cursor:pointer;transition:.25s}
.switch::after{content:"";position:absolute;width:24px;height:24px;border-radius:50%;background:#fff;top:3px;left:4px;transition:.25s;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.switch.on{background:linear-gradient(90deg,#11b94d,#2be873);border-color:#43f37d}
.switch.on::after{left:28px}

.grid2-compact{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.triple-compact{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px}
.info-sm{padding:10px;min-height:70px;display:flex;align-items:center;gap:8px}
.info-sm .icon-round{width:34px;height:34px;font-size:15px}
.info-sm .label{font-size:11px;margin-bottom:3px}
.info-sm .value{font-size:14px;line-height:1.1}
.metric-mini{padding:10px 8px;min-height:68px}
.metric-mini .label{font-size:11px;margin-bottom:3px}
.metric-mini .value{font-size:13px;line-height:1.15}

.positions-one-row{display:grid;grid-template-columns:1.15fr .9fr .9fr;gap:8px;margin-top:10px}
.positions-sm{padding:10px;min-height:68px}
.positions-sm .label{font-size:11px;margin-bottom:3px}
.positions-sm .value{font-size:13px;line-height:1.15}
.positions-sm .subvalue{font-size:12px;font-weight:800;margin-top:4px}

.section-title{display:flex;align-items:center;justify-content:space-between;margin:10px 2px 6px}
.section-title h2{font-size:18px;margin:0;display:flex;align-items:center;gap:6px;letter-spacing:-.4px}

.perf-group{padding:9px 10px;margin-bottom:6px}
.perf-header{font-size:11px;color:var(--gold);font-weight:800;margin-bottom:6px;letter-spacing:.3px}
.perf-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start}
.metric-title{font-size:10px;color:var(--muted);line-height:1.1;margin-bottom:2px}
.metric-value{font-size:15px;font-weight:900;line-height:1.05;margin-bottom:3px}
.target{font-size:9px;color:#c4bea7;line-height:1.1;margin-bottom:3px}
.bar{height:6px;border-radius:999px;background:#0b0b0a;border:1px solid rgba(243,230,164,.28);overflow:hidden}
.fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#f2dd88,#fff2ae,#76ef8c);box-shadow:0 0 12px rgba(243,230,164,.35)}
.fill.redfill{background:linear-gradient(90deg,#ff414d,#ff8e94)}
.pct{text-align:right;font-size:9px;margin-top:2px;color:#ddd7c0;line-height:1}

.range-card{padding:10px 10px 9px;margin-bottom:8px}
.range-head{font-size:11px;color:var(--gold);font-weight:800;margin-bottom:7px}
.dual-scale{
  position:relative;height:18px;border-radius:999px;overflow:hidden;
  background:#0f0f0d;border:1px solid rgba(243,230,164,.25);
  display:grid;grid-template-columns:1fr 1fr;
}
.dual-scale .minus{background:linear-gradient(90deg,#ff8a8a,#ff4545)}
.dual-scale .plus{background:linear-gradient(90deg,#2acd68,#7af39b)}
.dual-scale .center-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#fff3c6;opacity:.85;transform:translateX(-50%)}
.range-labels{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:5px;font-size:10px;color:#d8d0b4}
.range-labels .left{text-align:left;color:#ff9b9b}
.range-labels .middle{text-align:center;color:#fff1b5;font-weight:800}
.range-labels .right{text-align:right;color:#82ef9c}

.notify-card,.chart-card,.openpos-card,.settings-card,.log-card{padding:10px;margin-bottom:8px}
.notify-top,.block-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.notify-top .title,.block-head .title{font-size:12px;font-weight:900;color:var(--gold)}
.toggle-mini{
  background:#262620;border:1px solid var(--line);color:#f4edcf;border-radius:999px;
  font-size:11px;font-weight:700;padding:6px 10px;cursor:pointer;
}
.mode-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.chip{
  padding:6px 10px;border-radius:999px;border:1px solid var(--line);font-size:11px;font-weight:800;
  background:#1b1b17;color:#ddd4b3;cursor:pointer;
}
.chip.active{background:linear-gradient(180deg,#fff0ab,#dcc274);color:#16150f;border-color:#f3e6a4}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.field{background:#141411;border:1px solid rgba(243,230,164,.2);border-radius:12px;padding:8px}
.field label{display:block;font-size:10px;color:#b8b194;margin-bottom:5px}
.input-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fake-input, input, select{
  min-height:30px;display:flex;align-items:center;padding:0 9px;border-radius:9px;
  background:#0f0f0d;border:1px solid rgba(243,230,164,.14);font-size:12px;font-weight:800;color:#f7f1d8;
  width:100%;
}
input,select{outline:none}
.switch-xs{width:44px;height:24px;border-radius:999px;background:#3a3a34;border:1px solid #4d4d43;position:relative;flex:0 0 auto}
.switch-xs::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:3px;box-shadow:0 1px 5px rgba(0,0,0,.35)}
.switch-xs.on{background:linear-gradient(90deg,#11b94d,#2be873);border-color:#43f37d}
.switch-xs.on::after{left:21px}

.chart-headline{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.pair-pill{padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;background:#141411;border:1px solid rgba(243,230,164,.25);color:#f5efcf}
.price-now{font-size:14px;font-weight:900}
.chart-wrap{height:190px;background:#11110e;border:1px solid rgba(243,230,164,.18);border-radius:14px;padding:8px;position:relative}
canvas{width:100%;height:100%;display:block}
.chart-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.meta-box{background:#141411;border:1px solid rgba(243,230,164,.15);border-radius:10px;padding:8px}
.meta-box .k{font-size:10px;color:#b8b194}
.meta-box .v{font-size:12px;font-weight:900;margin-top:3px}

.table-wrap{overflow:auto;border:1px solid rgba(243,230,164,.16);border-radius:12px;background:#10100e}
table{width:100%;border-collapse:collapse;font-size:11px}
th,td{padding:9px 8px;text-align:left;white-space:nowrap}
thead th{color:#e8dfb9;font-size:10px;letter-spacing:.2px;background:#171714;position:sticky;top:0}
tbody tr{border-top:1px solid rgba(243,230,164,.08)}
tbody tr:nth-child(even){background:rgba(255,255,255,.015)}

.action-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.guide-row{margin-bottom:8px}
.guide-row .btn{width:100%}

.settings-note{font-size:11px;color:#b8b194;margin-bottom:8px;line-height:1.35}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.setting-group{background:#141411;border:1px solid rgba(243,230,164,.18);border-radius:12px;padding:8px}
.setting-group .group-title{font-size:11px;color:var(--gold);font-weight:900;margin-bottom:6px}
.setting-grid-inner{display:grid;grid-template-columns:1fr;gap:6px}

.log-list{display:flex;flex-direction:column;gap:7px}
.log-item{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;background:#141411;border:1px solid rgba(243,230,164,.15);border-radius:12px;padding:8px}
.log-time{font-size:10px;color:#d1c89f;font-weight:800;white-space:nowrap}
.log-text{font-size:11px;line-height:1.35;color:#efe8c9}

.modal{width:min(92vw,390px);background:#171714;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 28px 80px rgba(0,0,0,.55)}
.modal h3{margin:0 0 8px;font-size:20px}
.modal p{margin:0 0 14px;color:#c8c1a6;font-size:13px;line-height:1.5}
.modal .actions{display:flex;gap:8px;justify-content:flex-end}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:#1f211c;color:#f5f1dc;border:1px solid rgba(40,229,111,.45);padding:10px 14px;border-radius:999px;font-size:12px;opacity:0;pointer-events:none;transition:.25s;z-index:30}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (min-width:700px){
  
  
}
@media (max-width:380px){
  .brand-title{font-size:24px}
  .hero-inner{grid-template-columns:72px 1fr}
  .brand-logo{width:68px;height:68px}

.account-switcher{
  margin-bottom:8px;
}
.account-strip{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 1px 6px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(243,230,164,.28) transparent;
}
.account-strip::-webkit-scrollbar{height:4px}
.account-strip::-webkit-scrollbar-track{background:transparent}
.account-strip::-webkit-scrollbar-thumb{background:rgba(243,230,164,.25);border-radius:999px}
.account-mini{
  min-width:145px;
  max-width:145px;
  scroll-snap-align:start;
  flex:0 0 145px;
  padding:9px 10px;
  border:1px solid rgba(243,230,164,.18);
  border-radius:13px;
  background:linear-gradient(145deg,#191916,#11110f);
  cursor:pointer;
  transition:.18s ease;
}
.account-mini.active{
  border-color:rgba(243,230,164,.72);
  box-shadow:0 0 0 1px rgba(243,230,164,.11),0 8px 20px rgba(0,0,0,.22);
  background:linear-gradient(145deg,#25231b,#151410);
}
.account-mini:hover{transform:translateY(-1px)}
.mini-ea{
  font-size:12px;
  font-weight:900;
  color:#fff5d2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:4px;
}
.mini-account{
  font-size:11px;
  font-weight:800;
  color:#d5cda9;
  margin-bottom:5px;
}
.mini-money{
  display:flex;
  justify-content:space-between;
  gap:6px;
  font-size:11px;
  font-weight:900;
  line-height:1.15;
}
.mini-money span:first-child{color:#f2ead0}
.mini-money .plus{color:var(--green)}
.mini-money .minus{color:var(--red)}
.floating-alert{
  display:none;
  margin-top:9px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #ff7b82;
  background:linear-gradient(135deg,#c41422 0%,#9d0713 55%,#720008 100%);
  color:#fff;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 8px 22px rgba(179,0,14,.32),
    0 0 20px rgba(255,48,63,.16);
}
.floating-alert.show{
  display:flex;
  align-items:center;
  gap:10px;
}
.floating-alert .alert-icon{
  width:31px;
  height:31px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 31px;
  background:#fff;
  color:#b00614;
  font-size:19px;
  font-weight:1000;
  box-shadow:0 0 15px rgba(255,255,255,.20);
}
.floating-alert .alert-content{
  min-width:0;
  flex:1;
}
.floating-alert .alert-title{
  font-size:11px;
  font-weight:1000;
  letter-spacing:.7px;
  color:#fff;
  margin-bottom:2px;
}
.floating-alert .alert-message{
  font-size:11px;
  line-height:1.25;
  color:#ffe6e7;
}
.floating-alert strong{
  display:inline-block;
  color:#fff;
  font-size:14px;
  margin-left:3px;
  font-weight:1000;
  text-shadow:0 1px 8px rgba(0,0,0,.30);
}

.main-card{grid-template-columns:1fr}
  .main-card .btn{width:100%;justify-content:center}
  .status-card{grid-template-columns:1fr}
  .power-wrap{border-left:none;border-top:1px solid var(--line);padding:10px 0 0;justify-content:space-between}
  .identity-top{font-size:13px}
  .identity-name{font-size:16px}
  .perf-row{grid-template-columns:1fr 1fr;gap:7px}
  .metric-title{font-size:9px}
  .metric-value{font-size:13px}
  .target{font-size:8px}
  .pct{font-size:8px}
  .form-grid,.settings-grid{grid-template-columns:1fr}
  .chart-meta{grid-template-columns:1fr 1fr 1fr}
  .action-row{grid-template-columns:1fr 1fr}
}

/* ---- pelengkap untuk data sungguhan ---- */
.hero-logo { width: 88px; height: 88px; object-fit: contain; display: block; }
.container { padding: 0 12px 20px; display: grid; gap: 10px; }
.account-strip a { text-decoration: none; }
.hidden { display: none !important; }

.floating-alert {
  display: none; gap: 10px; align-items: flex-start; margin-top: 10px;
  border-radius: 12px; padding: 10px 12px;
}
.floating-alert.show { display: flex; }
.floating-alert.minus { background: rgba(255,77,87,.10); border: 1px solid rgba(255,77,87,.45); }
.floating-alert.plus  { background: rgba(40,229,111,.10); border: 1px solid rgba(40,229,111,.45); }
.alert-icon {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 13px; color: #16150f;
}
.floating-alert.minus .alert-icon { background: #ff4d57; }
.floating-alert.plus .alert-icon { background: #28e56f; }
.alert-content b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.alert-content span { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.5; }

.status-pill {
  display: inline-block; margin-top: 3px; padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
}
.status-pill.on  { background: rgba(40,229,111,.14); color: #28e56f; border: 1px solid rgba(40,229,111,.4); }
.status-pill.off { background: rgba(255,77,87,.12); color: #ff4d57; border: 1px solid rgba(255,77,87,.4); }

.switch {
  width: 48px; height: 26px; border-radius: 999px; cursor: pointer;
  background: #0b0b0a; border: 1px solid rgba(243,230,164,.3);
  position: relative; transition: .2s; padding: 0;
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%; background: #6d6a5c; transition: .2s;
}
.switch.on { background: rgba(243,230,164,.22); border-color: var(--amber); }
.switch.on::after { left: 24px; background: linear-gradient(180deg,#fff4bd,#dcc274); }

.fill.merah { background: linear-gradient(90deg,#ff8f96,#ff4d57); box-shadow: 0 0 12px rgba(255,77,87,.3); }

.toggle-mini {
  background: #141411; border: 1px solid rgba(243,230,164,.25);
  color: var(--amber); border-radius: 999px; padding: 4px 11px;
  font-size: 11px; font-weight: 700; cursor: pointer;
}
.toggle-mini:hover { background: rgba(243,230,164,.1); }

.action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.action-row form { margin: 0; }
.action-row .btn, .guide-row .btn { width: 100%; }
.btn.dark {
  background: #141411; border: 1px solid rgba(243,230,164,.3); color: var(--text);
}
.btn.dark:hover { border-color: var(--amber); }
.guide-row .btn { display: block; text-align: center; text-decoration: none; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.field label { display: block; font-size: 10.5px; color: var(--muted); margin-bottom: 4px; }
.field input, .field select {
  width: 100%; margin: 0; padding: 7px 9px; font-size: 13px; border-radius: 9px;
}
.settings-note { font-size: 11px; color: var(--muted); margin: 9px 0; line-height: 1.5; }

.pos-table th, .pos-table td { padding: 8px 6px; font-size: 12px; }
.kosong-mini { font-size: 12px; }
.section-title { font-size: 12px; font-weight: 800; color: var(--amber-2); letter-spacing: .6px; margin: 6px 2px 0; }

@media (min-width: 900px) {
  .container { max-width: 560px; margin: 0 auto; }
}

/* ---- cegah isi mendorong kartu melebar di layar sempit ---- */
.container, .container > *, .card, .card > * { min-width: 0; }
.identity-top {
  white-space: normal;
  flex-wrap: wrap;
  word-break: break-word;
}
.main-card { grid-template-columns: 1fr; }
.perf-row > *, .grid2-compact > *, .triple-compact > *,
.positions-one-row > *, .chart-meta > *, .form-grid > * { min-width: 0; }
.info-sm .value, .metric-mini .value, .meta-box .v { word-break: break-word; }
.table-wrap { overflow-x: auto; }

/* ---- penyesuaian sesuai tangkapan layar rancangan ---- */
.brand-sub { font-size: 20px; font-weight: 900; letter-spacing: 5px; color: #e9dfb4; line-height: 1; margin-top: 2px; }
.brand-title { letter-spacing: 3px; }
.tag { margin-top: 6px; }

.mini-row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-top: 4px; }
.mini-saldo { font-size: 11.5px; font-weight: 800; color: #e9dfb4; }
.mini-money { font-size: 11.5px; font-weight: 800; }

.identity-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.btn-sewa {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 8px 12px; font-size: 12px; text-decoration: none;
  background: linear-gradient(180deg,#fff4bd,#dcc274); color: #16150f;
  border-radius: 10px; font-weight: 800;
}
.alert-nilai { font-weight: 900; font-size: 15px; margin-top: 4px; }
.floating-alert.minus .alert-nilai { color: #ffd7d9; }
.floating-alert.plus .alert-nilai { color: #c6ffd9; }
.floating-alert.minus { background: linear-gradient(145deg, rgba(200,40,50,.95), rgba(150,25,35,.95)); border-color: rgba(255,120,130,.5); }
.floating-alert.minus .alert-content b { color: #fff; }
.floating-alert.minus .alert-content span { color: rgba(255,255,255,.82); }

.status-pill .dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}
.metric-mini .sub { font-size: 10.5px; font-weight: 700; margin-top: 2px; }

.mode-row { display: flex; gap: 8px; margin: 10px 0 4px; }
.mode-row .chip {
  flex: 1; text-align: center; padding: 8px 10px; cursor: pointer;
  font-size: 12px; font-weight: 800; border-radius: 999px;
}
.mode-row .chip input { display: none; }
.mode-row .chip.active {
  background: linear-gradient(180deg,#fff4bd,#dcc274);
  border-color: var(--amber); color: #16150f;
}
.field-row { display: flex; align-items: center; gap: 8px; }
.field-row input { flex: 1; }
.field-teks { font-weight: 800; font-size: 13px; }
.sw-kecil { flex-shrink: 0; }
.sw-spacer { width: 42px; flex-shrink: 0; }

.dual-scale { position: relative; height: 16px; border-radius: 999px; overflow: hidden; display: flex; }
.dual-scale .minus { flex: 1; background: linear-gradient(90deg,#ff4d57,#ff8f96); }
.dual-scale .plus  { flex: 1; background: linear-gradient(90deg,#76ef8c,#28e56f); }
.dual-scale .center-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #0d0d0c; }
.range-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; font-weight: 700; }
.range-labels .left { color: #ff8f96; }
.range-labels .right { color: #76ef8c; }
.range-labels .middle { color: var(--muted); }

.guide-row .btn { padding: 13px; font-size: 13.5px; }
.log-time { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; color: var(--amber-2); white-space: nowrap; }
.log-text { font-size: 11.5px; line-height: 1.5; color: var(--text); }

/* ---- penyaring dampak berita ---- */
.saring-dampak { display: flex; gap: 7px; margin-bottom: 10px; flex-wrap: wrap; }
.chip-d {
  display: inline-flex; align-items: center; gap: 5px;
  background: #141411; border: 1px solid rgba(243,230,164,.22);
  color: var(--muted); border-radius: 999px; padding: 5px 11px;
  font-size: 11px; font-weight: 700; cursor: pointer;
}
.chip-d.on { background: linear-gradient(180deg,#fff4bd,#dcc274); border-color: var(--amber); color: #16150f; }
.tt { width: 7px; height: 7px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: 1px; }
.tt.tinggi { background: #ff4d57; }
.tt.sedang { background: #f0b429; }
.chip-d .tt { margin-right: 0; }

/* ---- ajakan kendali web di halaman detail EA ---- */
.kendali-box {
  background: linear-gradient(145deg, rgba(31,31,27,.96), rgba(22,22,19,.98));
  border: 1px solid var(--line-kuat); border-radius: 14px;
  padding: 14px; margin: 16px 0;
}
.kendali-head { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 12px; }
.kendali-head svg { color: var(--amber); flex-shrink: 0; margin-top: 2px; }
.kendali-head b { display: block; font-size: .95rem; margin-bottom: 3px; }
.kendali-head small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.55; }

/* ---- tabel layer & pilihan mata uang ---- */
.layer-tabel th, .layer-tabel td { padding: 6px 5px; text-align: center; }
.layer-tabel td:first-child { font-weight: 800; color: var(--amber-2); width: 46px; }
.layer-tabel input { width: 100%; margin: 0; padding: 6px 7px; font-size: 12.5px; text-align: center; }
.mata-list { display: flex; gap: 6px; flex-wrap: wrap; }
.mata-item {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  background: #141411; border: 1px solid rgba(243,230,164,.2);
  border-radius: 999px; padding: 5px 11px; font-size: 11.5px; font-weight: 700;
  font-family: ui-monospace, Menlo, monospace;
}
.mata-item input { width: 13px; height: 13px; accent-color: var(--amber); margin: 0; }
.mata-item:has(input:checked) { border-color: var(--amber); background: rgba(243,230,164,.1); color: var(--amber); }

/* ---- tabel dua kolom pengaturan grid ---- */
.grid-tabel th, .grid-tabel td { padding: 6px 5px; font-size: 12px; }
.grid-tabel td:first-child { text-align: left; color: var(--muted); white-space: nowrap; }
.grid-tabel th:first-child { text-align: left; }
.grid-tabel input, .grid-tabel select {
  width: 100%; margin: 0; padding: 6px 7px; font-size: 12.5px; text-align: center;
}

/* ---- pilihan dengan keterangan ---- */
.pilih-blok { margin-bottom: 12px; }
.pilih-nama { display: block; font-size: 11.5px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.pilih-select { width: 100%; margin: 0; }
.pilih-ket {
  font-size: 11px; color: var(--muted); line-height: 1.5;
  margin: 6px 0 0; padding-left: 9px; border-left: 2px solid var(--amber);
}

/* ---- panel simulasi (contoh tampilan) ---- */
.simulasi-bungkus { position: relative; }
/* Tidak ada lapisan pemblokir: tombol dan lipatan sengaja dibuat
   bisa dipencet supaya calon pengguna merasakan panelnya.
   Pengiriman form dicegat lewat JavaScript. */
.simulasi-bungkus .hero { margin-top: 0; }
.simulasi-pita {
  position: sticky; top: 8px; z-index: 6;
  display: inline-block; margin: 0 0 -6px 4px;
  background: linear-gradient(180deg,#fff4bd,#dcc274); color: #16150f;
  font-size: 10.5px; font-weight: 900; letter-spacing: 1.2px;
  padding: 5px 12px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}

/* pesan singkat saat tombol simulasi dipencet */
.sim-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(14px);
  background: linear-gradient(180deg,#fff4bd,#dcc274); color: #16150f;
  font-size: 12px; font-weight: 700; line-height: 1.45;
  padding: 10px 15px; border-radius: 12px; max-width: 86vw; text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.55); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.sim-toast.tampil { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- pilihan setelan siap pakai ---- */
.preset-tombol { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }
.preset-btn {
  text-align: left; cursor: pointer; padding: 11px 12px;
  background: #141411; border: 1px solid rgba(243,230,164,.22);
  border-radius: 12px; color: var(--text); transition: .15s;
}
.preset-btn b { display: block; font-size: 12.5px; margin-bottom: 3px; }
.preset-btn small { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.45; }
.preset-btn:hover { border-color: var(--amber); }
.preset-btn.aktif {
  background: linear-gradient(180deg,#fff4bd,#dcc274);
  border-color: var(--amber); color: #16150f;
}
.preset-btn.aktif small { color: rgba(22,21,15,.75); }
@media (max-width: 380px) { .preset-tombol { grid-template-columns: 1fr; } }

/* pemberitahuan EA belum dinyalakan */
.floating-alert.belum-nyala {
  background: linear-gradient(145deg, rgba(200,150,20,.95), rgba(150,110,15,.95));
  border-color: rgba(255,214,120,.5);
}
.floating-alert.belum-nyala .alert-icon { background: rgba(255,255,255,.22); color: #fff; }
.floating-alert.belum-nyala .alert-content b { color: #fff; }
.floating-alert.belum-nyala .alert-content span { color: rgba(255,255,255,.88); }

/* ---- kotak per mesin (Trisula Matrix) ---- */
.mesin-kotak {
  background: #141411; border: 1px solid rgba(243,230,164,.2);
  border-radius: 12px; padding: 12px; margin-bottom: 12px;
}
.mesin-atas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.mesin-atas b { display: block; font-size: 13px; color: var(--amber); }
.mesin-atas small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.mesin-kotak input:disabled { opacity: .55; }

/* ---- tabel group lot (The Real Scalper) ---- */
.tabel-group { display: grid; gap: 6px; }
.tg-kepala, .tg-baris {
  display: grid; grid-template-columns: 34px 1fr 1fr 1fr; gap: 6px; align-items: center;
}
.tg-kepala span {
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  color: var(--amber-2); text-transform: uppercase; text-align: center;
}
.tg-no {
  font-size: 11.5px; font-weight: 800; color: var(--muted); text-align: center;
}
.tg-baris input {
  width: 100%; padding: 7px 8px; font-size: 12px; text-align: center;
  background: #0f0f0d; border: 1px solid rgba(243,230,164,.18);
  border-radius: 8px; color: var(--text);
}
.tg-baris.mati input { opacity: .45; }
.tg-baris.mati .tg-no { opacity: .45; }

/* ---- kelompok setelan yang bisa dilipat ---- */
.lipat-alat { display: flex; gap: 8px; margin-bottom: 10px; }
.lipat-semua {
  flex: 1; padding: 8px 10px; cursor: pointer;
  background: #141411; border: 1px solid rgba(243,230,164,.22);
  border-radius: 10px; color: var(--amber-2);
  font-size: 11.5px; font-weight: 700;
}
.lipat-semua:hover { border-color: var(--amber); }

.lipat {
  background: #121210; border: 1px solid rgba(243,230,164,.16);
  border-radius: 12px; margin-bottom: 9px; overflow: hidden;
}
.lipat-judul {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 13px 14px; cursor: pointer;
  background: transparent; border: 0; color: var(--text);
  font-size: 13px; font-weight: 800; text-align: left;
}
.lipat-judul i {
  flex: none; width: 9px; height: 9px; border-right: 2px solid var(--amber);
  border-bottom: 2px solid var(--amber); transform: rotate(45deg);
  transition: transform .18s; margin-right: 3px;
}
.lipat.buka .lipat-judul i { transform: rotate(-135deg); }
.lipat.buka .lipat-judul { color: var(--amber); }
.lipat-isi { display: none; padding: 0 14px 14px; }
.lipat.buka .lipat-isi { display: block; }

/* lima tombol preset */
.preset-tombol.preset-5 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 420px) { .preset-tombol.preset-5 { grid-template-columns: repeat(2, 1fr); } }

/* tabel pasangan mata uang (Hedging Arbitrage) */
.tg-kepala-pair, .tg-baris-pair { grid-template-columns: 52px 1fr 1fr; }
.tg-baris-pair select {
  width: 100%; padding: 7px 8px; font-size: 12px;
  background: #0f0f0d; border: 1px solid rgba(243,230,164,.18);
  border-radius: 8px; color: var(--text);
}
.tg-baris-pair.mati select { opacity: .45; }
.tg-catatan {
  font-size: 10.5px; color: var(--muted); text-align: center; font-style: italic;
}

/* daftar saran di halaman panduan */
.panduan-tips { margin: 0; padding-left: 18px; }
.panduan-tips li {
  color: var(--muted); font-size: 12.5px; line-height: 1.7; margin-bottom: 4px;
}
.panduan-kelompok .lipat-isi { padding-top: 4px; }

/* ---- halaman panduan pasang EA ---- */
.id-member { display: flex; gap: 9px; align-items: center; margin-bottom: 9px; }
.id-member code {
  flex: 1; padding: 11px 13px; border-radius: 10px;
  background: #0f0f0d; border: 1px solid rgba(243,230,164,.3);
  font-family: ui-monospace, Menlo, monospace; font-size: 14px;
  color: var(--amber); letter-spacing: .5px;
}
.id-member .btn { flex: none; padding: 11px 16px; }

.langkah {
  background: #121210; border: 1px solid rgba(243,230,164,.16);
  border-radius: 12px; padding: 14px; margin-bottom: 10px;
}
.langkah.penting { border-color: rgba(243,230,164,.45); background: #16150f; }
.langkah-kepala { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 8px; }
.langkah-no {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg,#fff4bd,#dcc274); color: #16150f;
  font-size: 13px; font-weight: 900;
}
.langkah-kepala b { font-size: 13.5px; color: var(--amber); }
.tanda-wajib {
  display: inline-block; margin-left: 7px; padding: 2px 8px; border-radius: 999px;
  background: rgba(235,70,80,.2); border: 1px solid rgba(235,70,80,.5);
  color: #ff9aa2; font-size: 9.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; vertical-align: middle;
}
.langkah-isi { margin: 0 0 9px; color: var(--text); font-size: 13px; line-height: 1.65; }
.langkah-rinci { margin: 0 0 9px; padding-left: 19px; }
.langkah-rinci li { color: var(--muted); font-size: 12.5px; line-height: 1.75; margin-bottom: 3px; }
.langkah-catatan {
  margin: 0; padding: 9px 11px; border-radius: 9px;
  background: rgba(243,230,164,.07); border-left: 3px solid var(--amber);
  color: var(--muted); font-size: 12px; line-height: 1.6;
}

.masalah {
  background: #121210; border: 1px solid rgba(243,230,164,.14);
  border-radius: 11px; padding: 13px; margin-bottom: 9px;
}
.masalah-gejala {
  font-size: 13px; font-weight: 800; color: var(--amber); margin-bottom: 7px;
}
.masalah-sebab, .masalah-solusi {
  margin: 0 0 5px; color: var(--muted); font-size: 12.5px; line-height: 1.65;
}
.masalah-solusi { margin-bottom: 0; color: var(--text); }

/* ---- forum diskusi ---- */
.forum-daftar { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.forum-kosong {
  text-align: center; padding: 34px 14px; color: var(--muted); font-size: 13px;
  border: 1px dashed rgba(243,230,164,.2); border-radius: 12px;
}
.forum-pesan {
  background: #121210; border: 1px solid rgba(243,230,164,.14);
  border-radius: 12px; padding: 10px 12px; max-width: 92%;
}
.forum-pesan.milikku {
  align-self: flex-end; background: #1b190f; border-color: rgba(243,230,164,.32);
}
.forum-kepala { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; flex-wrap: wrap; }
.forum-nama { font-size: 12.5px; font-weight: 800; color: var(--amber); }
.forum-grup {
  font-size: 9.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px;
  background: rgba(243,230,164,.1); color: var(--muted); letter-spacing: .4px;
}
.forum-waktu { font-size: 10.5px; color: var(--muted); margin-left: auto; }
.forum-isi {
  font-size: 13.5px; color: var(--text); line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.forum-isi.dihapus { font-style: italic; color: var(--muted); font-size: 12.5px; }
.forum-kutipan {
  border-left: 3px solid var(--amber); padding: 5px 9px; margin-bottom: 6px;
  background: rgba(243,230,164,.06); border-radius: 0 7px 7px 0;
}
.forum-kutipan b { display: block; font-size: 11px; color: var(--amber); }
.forum-kutipan span {
  font-size: 11.5px; color: var(--muted); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.forum-aksi { display: flex; gap: 6px; margin-top: 6px; }
.forum-hapus { margin: 0; }
.forum-tombol {
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  font-size: 11px; font-weight: 700; color: var(--muted);
}
.forum-tombol:hover { color: var(--amber); }
.forum-tombol.hapus:hover { color: #ff8a8a; }

.forum-baru-ada { text-align: center; margin-bottom: 10px; }
.forum-baru-ada button {
  background: rgba(243,230,164,.14); border: 1px solid rgba(243,230,164,.4);
  color: var(--amber); padding: 7px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; cursor: pointer;
}

.forum-form {
  position: sticky; bottom: 76px; z-index: 5; box-sizing: border-box;
  background: #0f0f0d; border: 1px solid rgba(243,230,164,.22);
  border-radius: 14px; padding: 9px; display: flex; flex-wrap: wrap; gap: 8px;
}
.forum-form textarea {
  flex: 1; min-width: 0; resize: none; padding: 10px 11px; border-radius: 10px;
  background: #121210; border: 1px solid rgba(243,230,164,.14);
  color: var(--text); font-size: 13.5px; font-family: inherit; line-height: 1.5;
}
.forum-form .btn { flex: none; align-self: flex-end; padding: 11px 16px; }
.forum-membalas {
  flex-basis: 100%; box-sizing: border-box; min-width: 0;
  display: flex; gap: 8px; align-items: center;
  padding: 6px 9px; border-left: 3px solid var(--amber);
  background: rgba(243,230,164,.06); border-radius: 0 8px 8px 0;
}
.forum-membalas div { flex: 1; min-width: 0; }
.forum-membalas b { display: block; font-size: 11px; color: var(--amber); }
.forum-membalas span {
  display: block; font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.forum-membalas button {
  background: none; border: 0; color: var(--muted); font-size: 20px;
  cursor: pointer; line-height: 1; padding: 0 4px;
}

/* dua tombol di sapaan dashboard, bertumpuk */
.dash-tombol { display: flex; flex-direction: column; gap: 8px; flex: none; }
.dash-tombol .btn { text-align: center; }
@media (max-width: 640px) {
  .dash-tombol { width: 100%; }
}

.kembali-dash {
  display: inline-block; margin-bottom: 12px; font-size: 12.5px;
  font-weight: 700; color: var(--muted); text-decoration: none;
}
.kembali-dash:hover { color: var(--amber); }

/* ---- akun pantau ---- */
.pantau-card { padding: 16px; }
.pantau-intro { margin: 0 0 13px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.pantau-baris {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 9px;
  align-items: center; margin-bottom: 10px;
}
.pantau-label {
  grid-column: 1 / -1; font-size: 10.5px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase; color: var(--muted);
}
.pantau-nilai {
  min-width: 0; padding: 10px 12px; border-radius: 10px;
  background: #0f0f0d; border: 1px solid rgba(243,230,164,.28);
  font-family: ui-monospace, Menlo, monospace; font-size: 14px;
  color: var(--amber); overflow-wrap: anywhere;
}
.pantau-salin {
  padding: 10px 14px; border-radius: 10px; cursor: pointer;
  background: rgba(243,230,164,.1); border: 1px solid rgba(243,230,164,.35);
  color: var(--amber); font-size: 12px; font-weight: 800;
}
.pantau-salin.ok { background: rgba(0,200,120,.18); border-color: rgba(0,200,120,.5); color: #7ee2b5; }
.pantau-peringatan {
  margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(243,230,164,.07); border-left: 3px solid var(--amber);
  color: var(--text); font-size: 12.5px; line-height: 1.6;
}
.pantau-galat { margin: 8px 0 0; color: #ff9aa2; font-size: 12.5px; text-align: center; }

/* ---- analisa AI auto entry ---- */
.analisa-auto { margin-bottom: 14px; }
.aa-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.aa-kepala h3 { margin: 2px 0 0; }
.aa-mode {
  flex: none; font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  background: rgba(243,230,164,.08); border: 1px solid rgba(243,230,164,.25); color: var(--muted);
}
.aa-mode.on { background: rgba(0,200,120,.14); border-color: rgba(0,200,120,.45); color: #7ee2b5; }
.aa-intro { margin: 8px 0 12px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.aa-status {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px;
}
.aa-status div {
  background: #0f0f0d; border: 1px solid rgba(243,230,164,.14);
  border-radius: 10px; padding: 8px 10px;
}
.aa-status span { display: block; font-size: 10.5px; color: var(--muted); margin-bottom: 2px; }
.aa-status b { font-size: 12.5px; color: var(--text); }
.aa-form .field { margin-bottom: 10px; }
.aa-garis { height: 1px; background: rgba(243,230,164,.14); margin: 14px 0; }
.aa-catatan { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* ---- kartu ajakan notifikasi ---- */
.ajakan-notif {
  position: fixed; left: 12px; right: 12px; bottom: 84px; z-index: 900;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 12px 13px; border-radius: 14px;
  background: #16150f; border: 1px solid rgba(243,230,164,.4);
  box-shadow: 0 12px 34px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(14px);
  transition: opacity .28s ease, transform .28s ease;
}
.ajakan-notif.tampil { opacity: 1; transform: translateY(0); }
.an-ikon {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(243,230,164,.12); color: var(--amber);
}
.an-ikon svg { width: 20px; height: 20px; }
.an-isi { flex: 1; min-width: 150px; }
.an-isi b { display: block; font-size: 13px; color: var(--amber); line-height: 1.4; }
.an-isi span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.an-tombol { display: flex; gap: 8px; margin-left: auto; }
.an-tombol button {
  padding: 9px 14px; border-radius: 10px; font-size: 12.5px;
  font-weight: 800; cursor: pointer; border: 1px solid transparent;
}
.an-nanti { background: transparent; border-color: rgba(243,230,164,.28); color: var(--muted); }
.an-nanti:hover { color: var(--amber); }
.an-aktif { background: linear-gradient(180deg,#fff4bd,#dcc274); color: #16150f; }
.an-aktif:disabled { opacity: .7; cursor: default; }
@media (min-width: 720px) {
  .ajakan-notif { left: auto; right: 20px; bottom: 20px; max-width: 420px; }
}

/* ringkasan langganan di halaman Kirim Notifikasi */
.langganan-ringkas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 14px;
}
.langganan-ringkas div {
  background: #121210; border: 1px solid rgba(243,230,164,.18);
  border-radius: 11px; padding: 10px 11px; text-align: center;
}
.langganan-ringkas span { display: block; font-size: 10.5px; color: var(--muted); margin-bottom: 3px; }
.langganan-ringkas b { font-size: 19px; color: var(--amber); }

/* ---- laporan pengunjung ---- */
.kunj-kartu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.kunj-kartu.kunj-3 { grid-template-columns: repeat(3, 1fr); }
.kunj-kartu div {
  background: #121210; border: 1px solid rgba(243,230,164,.16);
  border-radius: 12px; padding: 12px; text-align: center;
}
.kunj-kartu div.sorot { border-color: rgba(243,230,164,.45); background: #16150f; }
.kunj-kartu span { display: block; font-size: 10.5px; color: var(--muted); margin-bottom: 4px; }
.kunj-kartu b { display: block; font-size: 24px; color: var(--amber); line-height: 1.1; }
.kunj-kartu i { display: block; font-style: normal; font-size: 10px; color: var(--muted); margin-top: 3px; }

.tabel-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabel-data { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabel-data th, .tabel-data td {
  padding: 9px 10px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid rgba(243,230,164,.1);
}
.tabel-data th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); font-weight: 800;
}
.tabel-data td { color: var(--text); }
.tabel-data tbody tr:hover { background: rgba(243,230,164,.04); }
@media (max-width: 420px) { .kunj-kartu.kunj-3 { grid-template-columns: repeat(2, 1fr); } }

/* ---- ringkasan akun pantau di daftar EA ---- */
.pantau-ringkas {
  margin: 10px 0 12px; padding: 11px 12px; border-radius: 12px;
  background: #121210; border: 1px solid rgba(243,230,164,.2);
}
.pr-utama {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding-bottom: 9px; margin-bottom: 9px;
  border-bottom: 1px solid rgba(243,230,164,.12);
}
.pr-utama span { font-size: 11.5px; color: var(--muted); }
.pr-utama b { font-size: 20px; line-height: 1; }
.pr-baris { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 10px; }
.pr-baris span { display: block; font-size: 10.5px; color: var(--muted); margin-bottom: 2px; }
.pr-baris b { font-size: 13px; }
.pantau-ringkas .plus { color: #4ade80; }
.pantau-ringkas .minus { color: #f87171; }

/* ---- daftar akun pantau di admin ---- */
.pantau-item {
  border: 1px solid rgba(243,230,164,.2); border-radius: 12px;
  padding: 12px; margin-bottom: 12px; background: #121210;
}
.pantau-aksi { display: flex; gap: 8px; margin-top: 8px; }
.pantau-aksi form { margin: 0; flex: 1; }
.pantau-aksi .btn { width: 100%; }
.pantau-tambah {
  border: 1px dashed rgba(243,230,164,.3); border-radius: 12px; padding: 12px; margin: 0;
}

/* nama setelan di kartu akun pantau */
.pr-nama {
  font-size: 11px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--amber);
  padding-bottom: 8px; margin-bottom: 9px;
  border-bottom: 1px solid rgba(243,230,164,.12);
}
.pantau-ringkas + .pantau-ringkas { margin-top: -4px; }

/* ==========================================================
   TABEL ADMIN YANG BISA DIBACA DI HP

   Di layar lebar tetap tabel biasa. Di layar sempit tiap baris
   berubah jadi kartu bertumpuk, jadi tidak perlu digulir ke
   samping sama sekali. Nama kolom diambil dari data-label.
   ========================================================== */
.tabel-adm { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabel-adm th, .tabel-adm td {
  padding: 10px 11px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid rgba(243,230,164,.1);
}
.tabel-adm th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); font-weight: 800; white-space: nowrap;
}
.tabel-adm tbody tr:hover { background: rgba(243,230,164,.04); }
.tabel-adm .nowrap { white-space: nowrap; }

/* Baris ringkas + baris detail yang bisa dibuka */
.baris-detail > td { padding: 0; border-bottom: 1px solid rgba(243,230,164,.1); }
.baris-detail.tutup { display: none; }
.detail-isi { padding: 12px 13px; background: #0f0f0d; }
.detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px 14px; margin-bottom: 12px;
}
.detail-grid > div { min-width: 0; }
.detail-grid span {
  display: block; font-size: 10.5px; color: var(--muted); margin-bottom: 2px;
}
.detail-grid b { font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }
.detail-aksi { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-aksi form { margin: 0; }
.btn-detail {
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  background: rgba(243,230,164,.1); border: 1px solid rgba(243,230,164,.3);
  color: var(--amber); font-size: 11.5px; font-weight: 800; white-space: nowrap;
}
.btn-detail:hover { background: rgba(243,230,164,.18); }

/* Di bawah 1280px tabel berubah jadi kartu bertumpuk: tidak ada
   gulir mendatar sama sekali, baik di HP maupun laptop kecil. */
@media (max-width: 1279px) {
  .tabel-adm thead { display: none; }
  .tabel-adm, .tabel-adm tbody, .tabel-adm tr, .tabel-adm td { display: block; width: 100%; }
  .tabel-adm tbody tr {
    background: #121210; border: 1px solid rgba(243,230,164,.16);
    border-radius: 12px; padding: 10px 12px; margin-bottom: 9px;
  }
  .tabel-adm td {
    border: 0; padding: 5px 0; display: flex; gap: 12px;
    align-items: center; justify-content: space-between;
  }
  .tabel-adm td::before {
    content: attr(data-label);
    flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
    text-transform: uppercase; color: var(--muted);
  }
  .tabel-adm td[data-label=""]::before { display: none; }
  .tabel-adm tbody tr:not(.baris-detail) td > * { text-align: right; }
  /* Isi detail tetap rata kiri supaya enak dibaca */
  .baris-detail > td { padding: 0; display: block; }
  .baris-detail > td::before { display: none; }
  .baris-detail .detail-grid, .baris-detail .detail-grid * { text-align: left; }
  /* Tombol aksi boleh turun baris, kalau dipaksa satu baris
     kartunya jadi lebih lebar dari layar. */
  .tabel-adm td.actions {
    white-space: normal; flex-wrap: wrap; justify-content: flex-end;
  }
  .tabel-adm td.actions > * { margin: 2px 0; }
  /* Mode kartu tidak butuh gulir mendatar sama sekali. Dimatikan
     supaya gelembung petunjuk tombol tidak memunculkan bilah gulir. */
  .wrap-adm { overflow: visible; border: 0; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-aksi { flex-direction: column; align-items: stretch; }
  .detail-aksi form, .detail-aksi .btn { width: 100%; }
  /* Kolom catatan: isian penuh di atas, tombolnya di bawah */
  .detail-aksi form { flex-wrap: wrap; gap: 8px; }
  .detail-aksi input[type="text"] { flex: 1 1 100%; width: 100%; min-width: 0; }
}

/* ==========================================================
   TABEL ADMIN MUAT DI LAYAR PC

   Aturan lama membuat semua sel tabel tidak boleh turun baris,
   sehingga tabel selalu melebihi lebar layar dan memunculkan
   gulir mendatar di bawah. Untuk mengeditnya, admin harus
   menggulir ke bawah dulu, geser, lalu naik lagi.

   Di sini isi sel boleh turun baris, jadi tabelnya muat.
   ========================================================== */
.tabel-adm th,
.tabel-adm td {
  white-space: normal;
  overflow-wrap: anywhere;
  padding: 9px 10px;
  vertical-align: middle;
}
/* Yang memang tidak boleh terpotong tetap satu baris */
.tabel-adm .nowrap,
.tabel-adm td.actions { white-space: nowrap; }

/* Kolom aksi menempel di kanan, jadi tombol Edit selalu terlihat
   walau tabelnya masih perlu digeser sedikit. */
@media (min-width: 1280px) {
  .tabel-adm td.actions,
  .tabel-adm th:last-child {
    position: sticky; right: 0; z-index: 2;
    background: #121210;
    box-shadow: -8px 0 12px -8px rgba(0,0,0,.8);
  }
  .tabel-adm tbody tr:hover td.actions { background: #17160f; }

  /* Gulir mendatar dibuat menempel di bawah layar, bukan di ujung
     bawah tabel, supaya tidak perlu menggulir dulu untuk memakainya. */
  .table-wrap { scrollbar-width: thin; }
  .table-wrap::-webkit-scrollbar { height: 10px; }
  .table-wrap::-webkit-scrollbar-thumb {
    background: rgba(243,230,164,.35); border-radius: 999px;
  }
}

/* Kode panjang (token, user id) tidak memaksa tabel melebar */
.tabel-adm code { overflow-wrap: anywhere; word-break: break-all; }

/* Di layar PC yang tidak terlalu lebar, tabel dirapatkan sedikit
   supaya tetap muat tanpa perlu digeser sama sekali. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .tabel-adm { font-size: 12px; }
  .tabel-adm th, .tabel-adm td { padding: 8px 7px; }
  .tabel-adm .badge { padding: 3px 6px; font-size: 9.5px; }
  .tabel-adm code { font-size: 11px; }
  .tabel-adm .btn-sm, .tabel-adm .btn { padding: 5px 9px; font-size: 11px; }
}


/* Laptop: kartu disusun dua kolom supaya lebar layar terpakai
   dan daftar tidak terlalu panjang ke bawah. */
@media (min-width: 760px) and (max-width: 1279px) {
  .tabel-adm tbody {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; align-items: start;
  }
  .tabel-adm tbody tr { margin-bottom: 0; }
  .tabel-adm tbody tr.baris-detail { grid-column: 1 / -1; }
  .tabel-adm tbody tr.baris-detail.tutup { display: none; }
}

/* ---------- saklar terkunci ----------
   Dipakai saat setelan EA belum pernah disimpan. Saklar tetap terlihat
   supaya member paham ada saklarnya, tapi jelas tidak bisa digeser:
   warnanya redup, ada tanda gembok, dan kursornya "tidak boleh". */
.switch.terkunci{
  background:#2b2b26;
  border-color:#514f44;
  cursor:not-allowed;
  opacity:.75;
}
.switch.terkunci::after{
  background:#8d8a7d;
  left:4px;
}
.switch.terkunci::before{
  content:"🔒";
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  line-height:1;
  opacity:.85;
}

/* ===== KENAPA EA BELUM ENTRY =====
   Kotak keterangan dari EA: teksnya sama dengan yang tampil di
   panel chart MT5. Lihat views/partials/kontrol-panel.ejs. */
.alasan-card{margin-top:10px;padding:12px 14px}
.alasan-sub{font-size:11px;color:var(--muted)}
.alasan-isi{
  margin-top:10px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:#1b1b17;
  font-size:12.5px;line-height:1.55;color:#e8e2cb;
}
.alasan-isi.bebas{border-color:#2f5a3a;color:#bfe6c8}
.alasan-isi.mati{border-color:#5a3a2f;color:#e9cdbd}
.alasan-isi.netral{color:var(--muted)}
.alasan-daftar{
  margin:10px 0 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:8px;
}
.alasan-daftar li{
  padding:10px 12px 10px 14px;border-radius:12px;
  border:1px solid var(--line);border-left:3px solid var(--gold);
  background:#1b1b17;font-size:12.5px;line-height:1.55;color:#f1ead2;
}

/* ---------- Masa sewa, perpanjangan & riwayat ---------- */
.sewa-card { scroll-margin-top: 80px; }
.sewa-rincian { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.sewa-rincian b { font-size: 14px; }
.sewa-sisa { font-size: 11.5px; margin-top: 3px; font-weight: 700; }
.sewa-tunggu {
  margin-top: 12px; padding: 11px 13px; border-radius: 12px; font-size: 12.5px; line-height: 1.6;
  border: 1px solid rgba(220,194,116,.45); background: rgba(220,194,116,.08);
}
.sewa-form { margin-top: 12px; }
.sewa-form .form-row { margin-bottom: 10px; }
.sewa-form select, .sewa-form input[type=file] { width: 100%; }
.sewa-kirim { width: 100%; justify-content: center; padding: 11px 12px; font-size: 13px; border: 0; cursor: pointer; }
.sewa-riwayat-head { margin-top: 14px; }
.riwayat-sewa { list-style: none; margin: 8px 0 0; padding: 0; }
.riwayat-sewa li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.riwayat-sewa li:last-child { border-bottom: 0; }
.riwayat-sewa .rs-atas { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.riwayat-sewa .rs-atas span { color: var(--muted); font-size: 11.5px; }
.riwayat-sewa .rs-bawah { font-size: 12px; color: var(--muted); margin-top: 3px; }
.riwayat-sewa .rs-cat { font-size: 11.5px; color: var(--gold); margin-top: 2px; }
.sewa-habis a { color: #fff; text-decoration: underline; font-weight: 800; }
@media (max-width: 420px) { .sewa-rincian { grid-template-columns: 1fr; } }

/* ---------- Tombol hapus di baris Request Kontrol EA ---------- */
.aksi-baris { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.aksi-baris form { margin: 0; }
.btn-hapus-baris {
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  background: rgba(255,77,87,.08); border: 1px solid rgba(255,77,87,.35);
  color: #ff6b73; font-size: 11.5px; font-weight: 800; white-space: nowrap;
}
.btn-hapus-baris:hover { background: rgba(255,77,87,.18); }

/* ---------- Admin aktivasi: ubah ID Member ---------- */
.form-id-member { margin-top: 10px; }
.form-id-member label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.form-id-member small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.baris-id-member { display: flex; gap: 8px; }
.baris-id-member input { flex: 1; min-width: 0; }