/* HantuTrade Pro — React SPA CSS v6 (desain-ui-ux-elegan) */
/* Bootstrap 5.3.8 diload via SpaController. File ini hanya override & komponen React. */

/* ═══════════════════════════════════════════════════
   DESIGN TOKENS (identik dengan custom.css)
   ═══════════════════════════════════════════════════ */
:root {
  --bg:#06080f; --bg2:#090c16; --bg3:#060914;
  --card:#0c1020; --card2:#101526; --card3:#141a2e;
  --glass:rgba(12,16,32,.75);
  --border:#1c2540; --border2:#253060; --border3:#2d3a70;
  --text:#c8d4e8; --text2:#a0b0cc; --muted:#6a7d9a;
  --gold:#f5c842; --gold2:#d4a520; --gold3:#ffd968;
  --gold-glow:rgba(245,200,66,.22); --gold-dim:rgba(245,200,66,.08); --gold-mid:rgba(245,200,66,.14);
  --green:#00ff9d; --green2:#00cc7a; --green-glow:rgba(0,255,157,.18); --green-dim:rgba(0,255,157,.08);
  --red:#ff2d5a; --red2:#e01040; --red-glow:rgba(255,45,90,.18); --red-dim:rgba(255,45,90,.08);
  --blue:#3d7fff; --blue-dim:rgba(61,127,255,.12);
  --radius:14px; --radius-sm:8px; --radius-xs:5px;
  --shadow-xs:0 1px 3px rgba(0,0,0,.25);
  --shadow-sm:0 2px 8px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.2);
  --shadow-md:0 4px 20px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.25);
  --shadow-lg:0 8px 40px rgba(0,0,0,.55),0 4px 16px rgba(0,0,0,.3);
  --shadow-xl:0 20px 60px rgba(0,0,0,.65),0 8px 24px rgba(0,0,0,.35);
  --shadow-gold:0 0 0 1px rgba(245,200,66,.18),0 4px 24px rgba(245,200,66,.12);
  --dur-fast:150ms; --dur-base:250ms; --dur-slow:400ms;
  --ease:cubic-bezier(0.4,0,0.2,1);
  --ease-out:cubic-bezier(0,0,0.2,1);
  --ease-lux:cubic-bezier(0.25,0.46,0.45,0.94);
}
*,*::before,*::after{box-sizing:border-box;}
html{height:100%;}
body{background:var(--bg);color:var(--text);font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.6;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;transition:background var(--dur-fast) var(--ease);}
::-webkit-scrollbar-thumb:hover{background:var(--border3);}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

/* ── Layout ── */
.app-layout{display:flex;flex-direction:column;min-height:100vh;}
.app-main{flex:1;}
.loading-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);}
.spinner{width:36px;height:36px;border:3px solid rgba(245,200,66,.15);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Skeleton ── */
.skeleton{background:linear-gradient(90deg,var(--card) 25%,var(--card2) 50%,var(--card) 75%);background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite;border-radius:6px;}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ── Navbar ── */
.app-navbar{
  background:rgba(6,8,15,.92)!important;
  border-bottom:1px solid rgba(28,37,64,.8)!important;
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  padding:.65rem 0;position:sticky;top:0;z-index:1030;
  box-shadow:0 2px 24px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.03) inset;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;gap:10px;flex-wrap:nowrap;}
.nav-brand{font-weight:900;font-size:1.05rem;letter-spacing:-.02em;color:var(--gold)!important;text-decoration:none;display:flex;align-items:center;gap:8px;white-space:nowrap;transition:opacity var(--dur-fast) var(--ease);}
.nav-brand:hover{opacity:.85;color:var(--gold)!important;}
.nav-links{display:flex;align-items:center;gap:3px;flex:1;margin-left:8px;}
.nav-link{color:var(--muted)!important;font-size:.85rem;font-weight:500;padding:.4rem .85rem!important;border-radius:var(--radius-sm);transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);text-decoration:none;display:flex;align-items:center;gap:5px;}
.nav-link:hover{color:#fff!important;background:rgba(255,255,255,.07);}
.nav-link.active{color:var(--gold)!important;background:var(--gold-dim);}
.nav-right{display:flex;align-items:center;gap:10px;}
.nav-clock{font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:700;color:#e8edf5;letter-spacing:.06em;}
.nav-clock-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:1px;}
.nav-date{font-family:'Inter',system-ui,sans-serif;font-size:.62rem;color:var(--muted);letter-spacing:.01em;text-align:right;}

.badge-live{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,rgba(0,255,157,.15),rgba(0,204,122,.1));border:1px solid rgba(0,255,157,.3);color:var(--green);font-size:.68rem;font-weight:700;padding:.28rem .75rem;border-radius:20px;letter-spacing:.1em;box-shadow:0 0 12px rgba(0,255,157,.14);}
.blink{animation:blk 1.4s ease-in-out infinite;}
@keyframes blk{0%,100%{opacity:1}50%{opacity:.1}}

/* User dropdown */
.nav-user-wrap{position:relative;}
.nav-user{display:flex;align-items:center;gap:8px;cursor:pointer;padding:5px 10px;border-radius:var(--radius-sm);border:1px solid var(--border2);transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);user-select:none;color:var(--text);font-size:.85rem;}
.nav-user:hover{border-color:var(--gold2);background:var(--gold-dim);}
.nav-avatar{width:28px;height:28px;background:linear-gradient(135deg,var(--gold2),var(--gold));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#000;flex-shrink:0;}
.nav-username{font-weight:600;}
.nav-role-badge{font-size:10px;font-weight:700;background:var(--gold-dim);color:var(--gold);border:1px solid rgba(245,200,66,.3);padding:1px 7px;border-radius:20px;}
.nav-chevron{font-size:10px;color:var(--muted);transition:transform var(--dur-fast) var(--ease);}
.nav-user:hover .nav-chevron{transform:rotate(180deg);}
.nav-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:var(--card2);border:1px solid var(--border2);border-radius:var(--radius-sm);min-width:200px;box-shadow:var(--shadow-xl);z-index:1050;overflow:hidden;padding:.4rem;animation:dropIn var(--dur-base) var(--ease-out);}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.nav-dropdown-header{padding:.6rem .9rem;border-bottom:1px solid var(--border);margin-bottom:.3rem;}
.ndd-name{font-weight:700;font-size:.875rem;color:#fff;}
.ndd-email{font-size:.72rem;color:var(--muted);margin-top:2px;}
.ndd-divider{height:1px;background:var(--border);margin:.3rem 0;}
.ndd-item{display:flex;align-items:center;gap:9px;width:100%;padding:.48rem .9rem;border-radius:6px;color:var(--text)!important;font-size:.85rem;background:none;border:none;cursor:pointer;text-decoration:none;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);font-family:inherit;text-align:left;}
.ndd-item:hover{background:var(--gold-mid)!important;color:var(--gold)!important;}
.ndd-item--danger{color:var(--red)!important;}
.ndd-item--danger:hover{background:var(--red-dim)!important;color:var(--red)!important;}
.nav-hamburger{display:none;background:none;border:1px solid var(--border2);border-radius:var(--radius-sm);color:#fff;font-size:1.3rem;padding:.25rem .55rem;cursor:pointer;line-height:1;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);}
.nav-hamburger:hover{border-color:var(--gold2);background:var(--gold-dim);}
.mobile-menu-wrap{position:absolute;top:100%;left:0;right:0;background:rgba(6,8,15,.98);border-bottom:1px solid var(--border);z-index:1040;padding:.5rem 1rem .75rem;animation:dropIn var(--dur-base) var(--ease-out);}
.mobile-menu{display:flex;flex-direction:column;gap:2px;}

/* ── Page ── */
.page{padding:1.5rem;}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:10px;}
.page-title{font-size:1.1rem;font-weight:800;color:#fff;margin:0;display:flex;align-items:center;gap:8px;}
.page-title .bi,.page-title i{color:var(--gold);}
.page-subtitle{font-size:.8rem;color:var(--muted);margin:3px 0 0;}
.header-actions{display:flex;gap:8px;align-items:center;}

/* ── Cards ── */
.table-card{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;box-shadow:var(--shadow-md);overflow:hidden;margin-bottom:1.25rem;transition:box-shadow var(--dur-base) var(--ease-lux),border-color var(--dur-base) var(--ease);}
.table-card:hover{border-color:var(--border2)!important;}
.card-hd{background:rgba(255,255,255,.025)!important;border-bottom:1px solid var(--border)!important;padding:.85rem 1.4rem;font-size:.875rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px;}
.card-hd .bi,.card-hd i{color:var(--gold);}
.card-hd-action{margin-left:auto;font-size:.72rem;color:var(--muted);border:1px solid var(--border);border-radius:5px;padding:2px 9px;display:flex;align-items:center;gap:4px;text-decoration:none;transition:all var(--dur-fast) var(--ease);}
.card-hd-action:hover{color:var(--gold);border-color:var(--gold2);}
.card-bd{padding:1.2rem 1.4rem;}

/* ── Featured stat cards ── */
.featured-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.25rem;}
@media(max-width:1024px){.featured-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.featured-grid{grid-template-columns:1fr 1fr;}}
.featured-card{
  background:linear-gradient(150deg,var(--card),#08102a)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--radius)!important;
  padding:1.1rem 1.3rem;
  position:relative;overflow:hidden;
  text-decoration:none;display:block;
  transition:border-color var(--dur-base) var(--ease-lux),transform var(--dur-base) var(--ease-lux),box-shadow var(--dur-base) var(--ease-lux);
}
.featured-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5;transition:opacity var(--dur-base) var(--ease);}
.featured-card::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 50% 100%,var(--gold-dim),transparent);opacity:0;transition:opacity var(--dur-slow) var(--ease-lux);pointer-events:none;}
.featured-card:hover{border-color:rgba(245,200,66,.35)!important;transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--shadow-gold);}
.featured-card:hover::before{opacity:1;}
.featured-card:hover::after{opacity:1;}
/* header: pair name left | signal badge right */
.fc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;}
.fc-symbol{font-size:.78rem;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;}
.fc-pair{display:none;}
/* big price */
.fc-price{font-family:'JetBrains Mono',monospace;font-size:1.65rem;font-weight:800;color:#fff;margin-bottom:.4rem;letter-spacing:-.02em;}
/* bottom: pct% left | vol right */
.fc-meta{display:flex;align-items:center;justify-content:space-between;font-size:.75rem;gap:8px;}
.fc-meta .text-green{color:var(--green)!important;font-weight:600;}
.fc-meta .text-red{color:var(--red)!important;font-weight:600;}
.fc-meta .text-muted{color:var(--muted)!important;}

/* ── Featured card coin watermark ── */
.fc-coin-bg{
  position:absolute;
  right:-8px;
  bottom:-10px;
  font-size:5rem;
  font-weight:900;
  color:rgba(245,200,66,.05);
  letter-spacing:-.04em;
  pointer-events:none;
  user-select:none;
  line-height:1;
  font-family:'Inter',sans-serif;
  text-transform:uppercase;
}

/* ── Live badge ── */
.live-badge{display:inline-flex;align-items:center;gap:5px;padding:.3rem .8rem;border-radius:20px;font-size:.65rem;font-weight:800;letter-spacing:.14em;}
.live-badge--on{background:linear-gradient(135deg,rgba(0,255,157,.12),rgba(0,204,122,.08));border:1px solid rgba(0,255,157,.35);color:#00ff9d;box-shadow:0 0 14px rgba(0,255,157,.2);text-shadow:0 0 8px rgba(0,255,157,.4);}
.live-badge--off{background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--muted);}
.live-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:blk 1.4s infinite;}
.live-badge--off .live-dot{animation:none;}

/* ── Data Table ── */
.table-toolbar{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.2rem;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:8px;}
.table-toolbar-left{display:flex;align-items:center;gap:10px;}
.table-toolbar-right{display:flex;align-items:center;gap:8px;}
.table-title{font-size:.9rem;font-weight:700;color:#fff;}
.table-info{font-size:.72rem;color:var(--green);background:rgba(0,255,157,.08);border:1px solid rgba(0,255,157,.2);padding:2px 10px;border-radius:20px;font-weight:600;}
.table-wrap{overflow-x:auto;}
.table-empty{display:flex;align-items:center;justify-content:center;gap:10px;padding:3rem 1rem;color:var(--muted);font-size:.9rem;}
.data-table{width:100%;border-collapse:collapse;color:var(--text);}
.data-table thead th{background:rgba(255,255,255,.025)!important;color:var(--muted)!important;font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;border:none!important;padding:.85rem 1.2rem;white-space:nowrap;}
.data-table td{padding:.8rem 1.2rem;vertical-align:middle;border-bottom:1px solid rgba(28,37,64,.8);font-size:.875rem;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tbody tr{transition:background var(--dur-fast) var(--ease);}
.data-table tbody tr{transition:background var(--dur-fast) var(--ease);}.data-table tbody tr:hover td{background:rgba(245,200,66,.04);}
.td-num{color:var(--muted);width:44px;}
.td-pair{display:flex;align-items:center;gap:10px;}
.pair-icon{width:32px;height:32px;min-width:32px;border-radius:50%;background:linear-gradient(135deg,rgba(245,200,66,.12),rgba(245,200,66,.05));border:1px solid rgba(245,200,66,.2);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--gold);font-family:'JetBrains Mono',monospace;transition:box-shadow var(--dur-base) var(--ease);}
tr:hover .pair-icon{box-shadow:0 0 10px rgba(245,200,66,.18);}
.pair-name{font-weight:700;color:#fff;}
.td-price{font-family:'JetBrains Mono',monospace!important;font-size:.82rem!important;font-weight:600!important;color:#e8d890!important;}
.td-pct{font-weight:600;}
.td-vol{color:var(--muted);font-size:.8rem;}
.td-mono{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--muted);}
.td-time{color:var(--muted);font-size:.72rem;white-space:nowrap;}
.text-green{color:var(--green)!important;}
.text-red{color:var(--red)!important;}
.flash-green{animation:fG .7s var(--ease) forwards;}
.flash-red{animation:fR .7s var(--ease) forwards;}
@keyframes fG{0%{background:rgba(0,255,157,.14)}100%{background:transparent}}
@keyframes fR{0%{background:rgba(255,45,90,.14)}100%{background:transparent}}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;font-size:.67rem!important;font-weight:800!important;padding:.27em .72em!important;border-radius:var(--radius-xs)!important;}
.badge-buy{background:linear-gradient(135deg,var(--green),var(--green2))!important;color:#000!important;box-shadow:0 0 10px var(--green-glow);}
.badge-sell{background:linear-gradient(135deg,var(--red),var(--red2))!important;color:#fff!important;box-shadow:0 0 10px var(--red-glow);}
.badge-hold{background:rgba(106,125,154,.12)!important;color:var(--muted)!important;border:1px solid rgba(106,125,154,.25)!important;font-weight:600!important;}
.badge-admin{background:var(--gold-dim)!important;color:var(--gold)!important;border:1px solid rgba(245,200,66,.3)!important;}

.detail-link{color:var(--muted);font-size:.8rem;text-decoration:none;display:inline-flex;align-items:center;gap:5px;transition:color var(--dur-fast) var(--ease);}
.detail-link:hover{color:var(--gold);}

/* ── Pagination ── */
.pagination{display:flex;align-items:center;justify-content:center;gap:3px;padding:.9rem;}
.page-btn{min-width:30px;height:30px;padding:0 7px;background:var(--card)!important;border:1px solid var(--border)!important;border-radius:6px!important;color:var(--muted)!important;font-size:.78rem;cursor:pointer;transition:all var(--dur-fast) var(--ease);}
.page-btn:hover:not(:disabled){background:var(--card2)!important;border-color:var(--gold2)!important;color:var(--gold)!important;}
.page-btn--active{background:linear-gradient(135deg,var(--gold2),var(--gold))!important;border-color:transparent!important;color:#000!important;font-weight:700;box-shadow:0 2px 10px rgba(245,200,66,.25);}
.page-btn:disabled{background:rgba(255,255,255,.02)!important;color:var(--border2)!important;cursor:not-allowed;}

/* ── Search/Select ── */
.search-box{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.04)!important;border:1px solid var(--border)!important;border-radius:var(--radius-sm)!important;padding:5px 11px;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);}
.search-box:focus-within{border-color:var(--gold2)!important;box-shadow:0 0 0 3px var(--gold-dim),0 0 10px rgba(245,200,66,.08);}
.search-box .bi,.search-box i{color:var(--muted);font-size:.8rem;transition:color var(--dur-fast) var(--ease);}
.search-box:focus-within .bi{color:var(--gold2);}
.search-box input{background:none;border:none;outline:none;color:var(--text);font-size:.85rem;width:155px;}
.search-box input::placeholder{color:var(--muted);}
.select-sm{background:rgba(255,255,255,.04)!important;border:1px solid var(--border)!important;border-radius:var(--radius-sm)!important;color:var(--text);font-size:.82rem;padding:5px 10px;cursor:pointer;outline:none;transition:border-color var(--dur-fast) var(--ease);}
.select-sm:focus{border-color:var(--gold2)!important;box-shadow:0 0 0 3px var(--gold-dim);}

/* ── Alerts ── */
.app-alert{display:flex;align-items:center;gap:9px;padding:.75rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.875rem;animation:slideInAlert var(--dur-base) var(--ease-out);}
@keyframes slideInAlert{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.app-alert--success{background:var(--green-dim);border:1px solid rgba(0,255,157,.25);color:var(--green);}
.app-alert--danger{background:var(--red-dim);border:1px solid rgba(255,45,90,.25);color:var(--red);}
.app-alert--warning{background:var(--gold-dim);border:1px solid rgba(245,200,66,.25);color:var(--gold);}
.app-alert--info{background:var(--blue-dim);border:1px solid rgba(61,127,255,.25);color:var(--blue);}
.app-alert__close{margin-left:auto;background:none;border:none;color:inherit;cursor:pointer;font-size:1.1rem;opacity:.7;line-height:1;transition:opacity var(--dur-fast) var(--ease);}
.app-alert__close:hover{opacity:1;}

/* ── Auth Pages ── */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;background:radial-gradient(ellipse at 50% 0%,#0d2346 0%,#0a0e1a 70%);}
.auth-card-wrap{width:100%;max-width:440px;}
.auth-inner{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2rem 1.75rem;
  box-shadow:var(--shadow-xl),0 0 0 1px rgba(255,255,255,.03) inset;
  transition:box-shadow var(--dur-slow) var(--ease-lux);
}
.auth-inner:hover{box-shadow:var(--shadow-xl),var(--shadow-gold);}
.auth-brand{font-size:1.25rem;font-weight:900;color:var(--gold)!important;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:opacity var(--dur-fast) var(--ease);}
.auth-brand:hover{opacity:.85;}
.auth-subtitle{font-size:.8rem;color:var(--muted);margin-top:5px;}
.auth-link{color:var(--gold);font-weight:600;transition:color var(--dur-fast) var(--ease);}
.auth-link:hover{color:var(--gold3);text-decoration:underline;}
.form-label-link{color:var(--gold);font-size:.78rem;transition:color var(--dur-fast) var(--ease);}
.form-label-link:hover{text-decoration:underline;color:var(--gold3);}

/* ── Forms (React) ── */
.form-field{margin-bottom:.9rem;}
.form-label-text{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:5px;}
.input-wrap{position:relative;display:flex;align-items:center;}
.input-icon-left{position:absolute;left:11px;color:var(--muted);font-size:.85rem;pointer-events:none;transition:color var(--dur-fast) var(--ease);}
.input-wrap:focus-within .input-icon-left{color:var(--gold2);}
.input-icon-right-btn{position:absolute;right:0;background:none;border:none;color:var(--muted);cursor:pointer;padding:9px 11px;transition:color var(--dur-fast) var(--ease);}
.input-icon-right-btn:hover{color:var(--text);}
.form-input{
  width:100%;
  background:rgba(255,255,255,.04)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--radius-sm)!important;
  color:var(--text)!important;
  font-size:.875rem;
  padding:.52rem .75rem .52rem 2.2rem;
  outline:none;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
  font-family:inherit;
}
.form-input:focus{background:rgba(255,255,255,.07)!important;border-color:var(--gold2)!important;box-shadow:0 0 0 3px var(--gold-dim),0 0 12px rgba(245,200,66,.1)!important;color:#fff!important;}
.form-input.no-icon{padding-left:.75rem;}
.form-input--error{border-color:var(--red)!important;box-shadow:0 0 0 3px var(--red-dim)!important;}
.form-input::placeholder{color:var(--muted)!important;}
.form-error{font-size:.72rem;color:var(--red);margin-top:3px;display:block;animation:slideInAlert var(--dur-fast) var(--ease-out);}
.form-hint{font-size:.72rem;color:var(--muted);margin-top:3px;display:block;}
.form-textarea{width:100%;background:rgba(255,255,255,.04)!important;border:1px solid var(--border)!important;border-radius:var(--radius-sm)!important;color:var(--text)!important;font-size:.8rem;padding:.6rem .8rem;outline:none;resize:vertical;font-family:'JetBrains Mono',monospace;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);}
.form-textarea:focus{border-color:var(--gold2)!important;box-shadow:0 0 0 3px var(--gold-dim)!important;}

/* ── Buttons (React) ── */
.btn-primary{display:inline-flex;align-items:center;gap:7px;padding:.52rem 1.25rem;background:linear-gradient(135deg,var(--gold3),var(--gold2))!important;border:none!important;border-radius:var(--radius-sm)!important;color:#000!important;font-size:.875rem;font-weight:800!important;cursor:pointer;transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-base) var(--ease);text-decoration:none;font-family:inherit;box-shadow:0 2px 8px rgba(245,200,66,.2);}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,200,66,.35);}
.btn-primary:active{transform:scale(.97)!important;}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;}
.btn-full{width:100%;justify-content:center;}
.btn-lg{padding:.7rem 1.6rem;font-size:.95rem;}
.btn-ghost{display:inline-flex;align-items:center;gap:7px;padding:.52rem 1.1rem;background:transparent;cursor:pointer;border:1px solid var(--border2)!important;border-radius:var(--radius-sm)!important;color:var(--muted)!important;font-size:.875rem;font-weight:600;transition:all var(--dur-fast) var(--ease);text-decoration:none;font-family:inherit;}
.btn-ghost:hover{background:rgba(255,255,255,.07)!important;color:#fff!important;border-color:var(--border3)!important;}
.btn-outline-sm{display:inline-flex;align-items:center;gap:5px;padding:.3rem .85rem;background:transparent;border:1px solid var(--border2);border-radius:var(--radius-sm);color:var(--muted);font-size:.78rem;font-weight:600;cursor:pointer;text-decoration:none;transition:all var(--dur-fast) var(--ease);font-family:inherit;}
.btn-outline-sm:hover{color:var(--gold);border-color:var(--gold2);background:var(--gold-dim);}

/* ── Tabs ── */
.tab-bar{display:flex;gap:4px;background:var(--card2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px;width:fit-content;margin-bottom:1rem;}
.tab-btn{display:flex;align-items:center;gap:6px;padding:.38rem .9rem;border-radius:6px;border:none;background:transparent;color:var(--muted);font-size:.82rem;font-weight:600;cursor:pointer;transition:all var(--dur-base) var(--ease);font-family:inherit;}
.tab-btn:hover{color:#fff;background:rgba(255,255,255,.06);}
.tab-btn--active{background:linear-gradient(135deg,var(--gold2),var(--gold))!important;color:#000!important;font-weight:800;box-shadow:0 2px 10px rgba(245,200,66,.2);}

/* ── Filter chips ── */
.filter-chips{display:flex;gap:5px;flex-wrap:wrap;}

/* ── Password strength (RegisterPage) ── */
.reg-chk{font-size:10px;color:var(--muted);padding:2px 8px;border-radius:10px;border:1px solid var(--border);display:inline-block;transition:all var(--dur-base) var(--ease);}
.reg-chk.ok{color:var(--green);background:var(--green-dim);border-color:rgba(0,255,157,.3);box-shadow:0 0 6px rgba(0,255,157,.1);}

/* ── Pricing cards ── */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:1rem;}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr!important;}}
.pricing-card{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;padding:1.5rem;position:relative;display:flex;flex-direction:column;transition:border-color var(--dur-base) var(--ease-lux),transform var(--dur-base) var(--ease-lux),box-shadow var(--dur-base) var(--ease-lux);}
.pricing-card:hover{border-color:var(--border2)!important;transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.pricing-card--popular{border-color:rgba(245,200,66,.35)!important;box-shadow:var(--shadow-md),var(--shadow-gold);}
.pricing-card--popular:hover{border-color:rgba(245,200,66,.55)!important;box-shadow:var(--shadow-lg),0 0 0 1px rgba(245,200,66,.25),0 6px 28px rgba(245,200,66,.18);}
.pricing-popular{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold3),var(--gold2));color:#000;font-size:.65rem;font-weight:800;padding:2px 13px;border-radius:20px;white-space:nowrap;letter-spacing:.06em;}
.pricing-name{font-size:1.1rem;font-weight:800;color:#fff;margin-bottom:.6rem;}
.pricing-price{display:flex;align-items:baseline;gap:3px;margin-bottom:1.1rem;}
.pricing-amount{font-size:1.75rem;font-weight:900;font-family:'JetBrains Mono',monospace;}
.pricing-period{font-size:.8rem;color:var(--muted);}
.pricing-features{list-style:none;padding:0;margin:0 0 1.25rem;flex:1;display:flex;flex-direction:column;gap:8px;}
.pricing-features li{display:flex;align-items:flex-start;gap:8px;font-size:.85rem;color:var(--text);}
.pricing-features li .bi,.pricing-features li i{color:var(--green);flex-shrink:0;font-size:.9rem;}
.pricing-btn{width:100%;justify-content:center;padding:.6rem;font-size:.875rem;}
.pricing-note{text-align:center;font-size:.75rem;color:var(--muted);}

/* ── Settings ── */
.settings-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.25rem;margin-bottom:1.25rem;}
@media(max-width:1100px){.settings-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:700px){.settings-grid{grid-template-columns:1fr;}}
.save-bar{display:flex;justify-content:flex-end;gap:10px;padding-top:.5rem;}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:1060;padding:1rem;animation:fadeIn var(--dur-fast) var(--ease-out);}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{background:var(--card2);border:1px solid var(--border2);border-radius:var(--radius);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl);animation:modalIn var(--dur-base) var(--ease-out);}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.4rem;border-bottom:1px solid var(--border);}
.modal-title{font-weight:700;font-size:1rem;color:#fff;}
.modal-close{background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer;line-height:1;padding:0 4px;transition:color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);}
.modal-close:hover{color:#fff;transform:rotate(90deg);}
.modal-body{padding:1.25rem 1.4rem;}

/* ── Landing ── */
.landing{min-height:100vh;background:var(--bg);}
.landing-nav{position:sticky;top:0;z-index:100;background:rgba(6,8,15,.92);backdrop-filter:blur(28px) saturate(180%);border-bottom:1px solid rgba(28,37,64,.8);padding:.65rem 0;box-shadow:0 2px 24px rgba(0,0,0,.4);}
.landing-nav-inner{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;}
.landing-nav-actions{display:flex;gap:8px;align-items:center;}
.landing-hero{padding:5.5rem 1.5rem 4.5rem;text-align:center;background:radial-gradient(ellipse 90% 70% at 50% 0%,#0e1b38 0%,var(--bg) 70%);position:relative;overflow:hidden;}
.landing-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(245,200,66,.04) 1px,transparent 1px);background-size:36px 36px;pointer-events:none;}
.hero-content{max-width:680px;margin:0 auto;position:relative;}
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,rgba(0,255,157,.15),rgba(0,204,122,.1));border:1px solid rgba(0,255,157,.3);color:var(--green);font-size:.68rem;font-weight:700;padding:.28rem .85rem;border-radius:20px;margin-bottom:1.5rem;letter-spacing:.1em;box-shadow:0 0 12px rgba(0,255,157,.14);}
.hero-badge-dot{width:6px;height:6px;background:currentColor;border-radius:50%;animation:blk 1.4s infinite;}
.hero-title{font-size:clamp(2rem,5vw,3.2rem);font-weight:900;line-height:1.08;letter-spacing:-.04em;margin-bottom:1.2rem;color:#fff;}
.hero-accent{color:var(--gold);text-shadow:0 0 30px var(--gold-glow);}
.hero-desc{font-size:1rem;color:var(--muted);line-height:1.7;margin-bottom:2rem;max-width:580px;margin-left:auto;margin-right:auto;}
.hero-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:1rem;}
.hero-note{font-size:.72rem;color:var(--border3);}
.landing-stats{padding:2.5rem 1.5rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(255,255,255,.015);}
.stats-grid{max-width:800px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center;}
@media(max-width:600px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
.stat-value{font-size:1.75rem;font-weight:900;font-family:'JetBrains Mono',monospace;color:var(--gold3);}
.stat-label{font-size:.72rem;color:var(--muted);margin-top:3px;}
.landing-features{padding:4rem 1.5rem;}
.section-header{text-align:center;margin-bottom:2.5rem;}
.section-title{font-size:2rem;font-weight:900;color:#fff;margin-bottom:.6rem;}
.section-desc{font-size:.88rem;color:var(--muted);}
.features-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
@media(max-width:800px){.features-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:500px){.features-grid{grid-template-columns:1fr;}}
.feature-card{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;padding:1.5rem 1.25rem;transition:border-color var(--dur-base) var(--ease-lux),transform var(--dur-base) var(--ease-lux),box-shadow var(--dur-base) var(--ease-lux);}
.feature-card:hover{border-color:rgba(245,200,66,.28)!important;transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.feature-icon{font-size:1.75rem;color:var(--gold);margin-bottom:.85rem;}
.feature-title{font-size:.95rem;font-weight:700;color:#fff;margin-bottom:.5rem;}
.feature-desc{font-size:.82rem;color:var(--muted);line-height:1.6;}
.landing-cta-bottom{padding:4rem 1.5rem;text-align:center;background:rgba(255,255,255,.01);border-top:1px solid var(--border);}
.cta-bottom-content{max-width:480px;margin:0 auto;}
.cta-bottom-content h2{font-size:1.75rem;font-weight:900;color:#fff;margin-bottom:.6rem;}
.cta-bottom-content p{color:var(--muted);margin-bottom:1.5rem;}
.landing-footer{padding:1.2rem;border-top:1px solid var(--border);background:rgba(6,8,15,.98);}
.landing-footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.78rem;color:var(--muted);}
.footer-links{display:flex;gap:16px;}
.footer-links a{color:var(--muted);text-decoration:none;transition:color var(--dur-fast) var(--ease);}
.footer-links a:hover{color:var(--gold);}

/* Preview table (landing) */
.landing-preview{padding:2.5rem 1.5rem 4rem;}
.preview-table-wrap{max-width:700px;margin:0 auto 10px;background:var(--card)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;overflow:hidden;}
.preview-table{width:100%;border-collapse:collapse;color:var(--text);}
.preview-table th{font-size:.67rem;font-weight:700;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;padding:.75rem 1.1rem;border-bottom:1px solid var(--border);text-align:left;}
.preview-table td{padding:.75rem 1.1rem;border-bottom:1px solid rgba(28,37,64,.8);font-size:.85rem;}
.preview-table tr:last-child td{border-bottom:none;}
.preview-note{text-align:center;font-size:.72rem;color:var(--border3);max-width:500px;margin:0 auto;}

/* ── App Footer ── */
.app-footer{
  background:rgba(6,8,15,.98)!important;
  border-top:1px solid rgba(245,200,66,.1)!important;
  padding:.9rem 1.5rem!important;
  font-size:.75rem;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  margin-top:auto;
}
.app-footer strong{color:var(--gold)!important;font-weight:700;}
.app-footer a{color:var(--muted);text-decoration:none;transition:color var(--dur-fast) var(--ease);}
.app-footer a:hover{color:var(--gold);}
.app-footer-links{display:flex;align-items:center;gap:14px;}
.app-footer-links a{color:var(--muted);text-decoration:none;font-size:.75rem;transition:color var(--dur-fast) var(--ease);}
.app-footer-links a:hover{color:var(--gold);}

/* ── Resend box ── */
.resend-box{background:var(--red-dim);border:1px solid rgba(255,45,90,.2);border-radius:var(--radius-sm);padding:.75rem 1rem;margin-bottom:1rem;font-size:.82rem;color:var(--red);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.resend-ok{color:var(--green);font-weight:600;}

/* ── Responsive ── */
@media(max-width:768px){
  .nav-links,.nav-clock{display:none;}
  .nav-hamburger{display:flex;}
  .page{padding:1rem;}
  .table-toolbar{flex-direction:column;align-items:flex-start;}
  .table-toolbar-right{width:100%;flex-wrap:wrap;}
  .search-box input{width:110px;}
  .settings-grid{grid-template-columns:1fr!important;}
  .pricing-grid{grid-template-columns:1fr!important;}
}

/* ── Password Strength Bar ── */
.pwd-strength-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pwd-strength-bar-track {
  flex: 1;
  height: 6px;
  background: var(--border2, rgba(255,255,255,.1));
  border-radius: 3px;
  overflow: hidden;
}
.pwd-strength-bar-fill {
  height: 100%;
  border-radius: 3px;
  min-width: 4px;
}
.pwd-strength-label {
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
}

/* ══════════════════════════════════════════════
   TICKER BAR — Landing Page (v2 — Premium Style)
   ══════════════════════════════════════════════ */
.ticker-bar-wrapper {
  width: 100%;
  background: linear-gradient(90deg, rgba(8,10,20,.98) 0%, rgba(12,16,30,.98) 50%, rgba(8,10,20,.98) 100%);
  border-bottom: 1px solid rgba(245,200,66,.18);
  border-top: 1px solid rgba(245,200,66,.10);
  box-shadow: 0 2px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(245,200,66,.06);
  overflow: hidden;
  white-space: nowrap;
  padding: 0;
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
}

/* Fade edges kiri-kanan */
.ticker-bar-wrapper::before,
.ticker-bar-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.ticker-bar-wrapper::before {
  left: 0;
  background: linear-gradient(to right, rgba(8,10,20,1) 20%, transparent);
}
.ticker-bar-wrapper::after {
  right: 0;
  background: linear-gradient(to left, rgba(8,10,20,1) 20%, transparent);
}

.ticker-bar-track {
  width: 100%;
  overflow: hidden;
}

.ticker-bar-inner {
  display: inline-flex;
  align-items: center;
  gap: 0;
  animation: tickerScroll 45s linear infinite;
  will-change: transform;
}

.ticker-bar-wrapper:hover .ticker-bar-inner {
  animation-play-state: paused;
}

@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  height: 40px;
  white-space: nowrap;
  cursor: default;
  position: relative;
  transition: background var(--dur-fast, 150ms) ease;
}

/* Pemisah vertikal antar item */
.ticker-item + .ticker-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: rgba(255,255,255,.08);
}

.ticker-item:hover {
  background: rgba(245,200,66,.07);
}

/* Nama koin — bold, tracking lebar, gold tint */
.ticker-sym {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold, #f5c842);
  text-shadow: 0 0 10px rgba(245,200,66,.3);
}

/* Harga — monospace, putih terang */
.ticker-price {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: .75rem;
  font-weight: 600;
  color: #e8edf5;
  letter-spacing: -.01em;
}

/* Persen naik — hijau neon dengan glow */
.ticker-up {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  font-weight: 700;
  color: #00ff9d;
  text-shadow: 0 0 8px rgba(0,255,157,.4);
  letter-spacing: .02em;
}

/* Persen turun — merah dengan glow */
.ticker-down {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  font-weight: 700;
  color: #ff4d6d;
  text-shadow: 0 0 8px rgba(255,45,90,.4);
  letter-spacing: .02em;
}

/* Titik pemisah */
.ticker-sep {
  color: rgba(245,200,66,.25);
  font-size: .55rem;
  margin: 0 1px;
  line-height: 1;
}

/* ── Responsive ticker ── */
@media (max-width: 480px) {
  .ticker-bar-wrapper { height: 34px; }
  .ticker-item { padding: 0 14px; height: 34px; gap: 4px; }
  .ticker-sym  { font-size: .65rem; }
  .ticker-price { font-size: .68rem; }
  .ticker-up, .ticker-down { font-size: .62rem; }
}