/**
 * FINECHARTED - macOS Style Client Portal
 * Clean, trustworthy, premium trading interface
 */

:root {
  --bg:#f2f2f7;--bg-secondary:#ffffff;--bg-tertiary:#f9f9fb;
  --surface:rgba(255,255,255,0.92);--surface-raised:rgba(255,255,255,0.98);
  --surface-hover:rgba(0,0,0,0.04);--surface-pressed:rgba(0,0,0,0.07);
  --text-primary:#1c1c1e;--text-secondary:#3a3a3c;--text-tertiary:#6d6d72;--text-quaternary:#aeaeb2;
  --blue:#007aff;--green:#34c759;--red:#ff3b30;--orange:#ff9500;
  --yellow:#ffcc00;--purple:#af52de;--teal:#5ac8fa;--indigo:#5856d6;
  --profit:#34c759;--loss:#ff3b30;--neutral:#8e8e93;
  --border:rgba(0,0,0,0.1);--border-strong:rgba(0,0,0,0.18);--separator:rgba(60,60,67,0.12);
  --shadow-sm:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 16px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.05);
  --shadow-lg:0 8px 32px rgba(0,0,0,.10),0 4px 8px rgba(0,0,0,.06);
  --shadow-xl:0 20px 60px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.08);
  --r-xs:4px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-2xl:28px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif;
  --font-mono:"SF Mono","Fira Code","Fira Mono",monospace;
  --ease:cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text-primary);line-height:1.5;-webkit-font-smoothing:antialiased;font-size:14px}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* Hide cyberpunk */
.holo-grid,.matrix-grid,.matrix-rain,.particles,.scanlines,.vignette,.rain-char,.particle{display:none!important}

/* Scrollbar */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.18);border-radius:4px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.28);background-clip:content-box}

/* Login */
.login-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#e8eaf0 0%,#f2f2f7 50%,#eef0f5 100%);z-index:1000}
.login-container{width:100%;max-width:400px;padding:20px}
.login-box{background:rgba(255,255,255,0.98);border-radius:var(--r-2xl);padding:40px 36px;box-shadow:var(--shadow-xl),0 0 0 1px var(--border);backdrop-filter:blur(20px)}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo .brand-logo{width:72px;height:72px;margin:0 auto 16px;border-radius:var(--r-xl);background:linear-gradient(145deg,#1c1c1e,#3a3a3c);display:flex;align-items:center;justify-content:center;font-size:30px;color:white;box-shadow:var(--shadow-lg);font-family:var(--font);font-weight:700}
.login-logo h1{font-size:22px;font-weight:700;color:var(--text-primary);letter-spacing:-.5px;margin-bottom:4px;background:none;-webkit-text-fill-color:var(--text-primary)}
.login-logo p{color:var(--text-tertiary);font-size:13px}
.login-footer{text-align:center;margin-top:20px}
.hidden{display:none!important}

/* App Layout */
.app-container{max-width:1280px;margin:0 auto;padding:16px 20px 40px}

/* Header */
.app-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;margin-bottom:16px;border-radius:var(--r-xl);background:rgba(255,255,255,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);box-shadow:var(--shadow-md)}
.app-header::before{display:none}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:40px;height:40px;border-radius:var(--r-md);background:linear-gradient(145deg,#1c1c1e,#3a3a3c);display:flex;align-items:center;justify-content:center;font-size:18px;color:white;font-weight:700;box-shadow:var(--shadow-sm);font-family:var(--font)}
.brand-text h1{font-size:15px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px;background:none;-webkit-text-fill-color:var(--text-primary);font-family:var(--font)}
.brand-text p{font-size:11px;color:var(--text-tertiary);letter-spacing:0;text-transform:none}
.header-status{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--text-tertiary);text-transform:none;letter-spacing:0}
.status-item{display:flex;align-items:center;gap:6px}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px rgba(52,199,89,.25);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 2px rgba(52,199,89,.25)}50%{box-shadow:0 0 0 4px rgba(52,199,89,.1)}}
.header-user{display:flex;align-items:center;gap:12px}
.user-info{text-align:right}
.user-name{font-size:13px;font-weight:600;color:var(--text-primary)}
.user-account{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono)}

/* Balance Cards */
.balance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
@media(max-width:900px){.balance-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.balance-grid{grid-template-columns:1fr 1fr}}
.balance-card{padding:18px 20px;border-radius:var(--r-lg);background:rgba(255,255,255,0.98);border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s;position:relative;overflow:hidden;border-top:3px solid var(--green)}
.balance-card::before{display:none}
.balance-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.balance-card.cyan{border-top-color:var(--blue)}
.balance-card.violet{border-top-color:var(--purple)}
.balance-card.yellow{border-top-color:var(--orange)}
.balance-label{font-size:11px;font-weight:500;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.balance-value{font-size:22px;font-weight:700;color:var(--text-primary);letter-spacing:-.5px;font-family:var(--font);text-shadow:none}
.balance-card.cyan .balance-value{color:var(--blue)}
.balance-card.violet .balance-value{color:var(--purple)}
.balance-card.yellow .balance-value{color:var(--orange)}

/* Nav Tabs */
.nav-tabs{display:flex;gap:2px;padding:3px;border-radius:var(--r-lg);background:rgba(255,255,255,0.92);border:1px solid var(--border);box-shadow:var(--shadow-sm);margin-bottom:16px;flex-wrap:wrap}
.nav-tab{padding:8px 16px;border-radius:var(--r-md);border:none;background:transparent;color:var(--text-tertiary);font-family:var(--font);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;cursor:pointer;transition:all .15s;white-space:nowrap}
.nav-tab:hover{color:var(--text-primary);background:rgba(0,0,0,0.04)}
.nav-tab.active{background:rgba(255,255,255,0.98);color:var(--text-primary);font-weight:600;box-shadow:var(--shadow-sm),0 0 0 1px var(--border)}

/* Panel */
.panel{background:rgba(255,255,255,0.98);border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--shadow-sm);padding:20px;position:relative;overflow:visible}
.panel::before{display:none}
.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--separator)}
.panel-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--text-primary);letter-spacing:-.2px;font-family:var(--font);text-transform:none}

/* Trading */
.trading-layout{display:grid;grid-template-columns:1fr 280px;gap:16px}
@media(max-width:900px){.trading-layout{grid-template-columns:1fr}}
.chart-panel{min-height:480px}
.chart-container{height:420px;background:var(--bg);border-radius:var(--r-md);border:1px solid var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center}
.chart-placeholder{text-align:center;color:var(--text-tertiary)}
.chart-price{font-size:20px;font-weight:700;color:var(--text-primary);letter-spacing:-.5px;font-family:var(--font-mono)}
.live-badge{display:flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;background:rgba(52,199,89,.1);border:1px solid rgba(52,199,89,.2);font-size:10px;font-weight:600;color:var(--green);text-transform:uppercase;letter-spacing:.5px}
.assets-list{max-height:440px;overflow-y:auto}
.asset-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);cursor:pointer;transition:background .15s;border:1px solid transparent}
.asset-item:hover{background:rgba(0,0,0,0.04)}
.asset-item.active{background:rgba(0,122,255,.08);border-color:rgba(0,122,255,.2)}
.asset-icon{font-size:18px}
.asset-name{flex:1;font-size:13px;font-weight:600;color:var(--text-primary)}
.asset-price{font-family:var(--font-mono);font-size:12px;color:var(--text-primary);font-weight:500}
.asset-change{font-size:11px;font-weight:600}
.asset-change.up{color:var(--profit)}
.asset-change.down{color:var(--loss)}

/* Forms */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:6px;text-transform:none;letter-spacing:0}
.form-input,.form-select,.form-textarea{width:100%;padding:10px 13px;border-radius:var(--r-md);border:1px solid var(--border-strong);background:white;color:var(--text-primary);font-family:var(--font);font-size:14px;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,122,255,.15)}
.form-input::placeholder{color:var(--text-quaternary)}
.form-textarea{min-height:80px;resize:vertical}
.form-hint{font-size:12px;color:var(--text-tertiary);margin-top:5px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 18px;border-radius:var(--r-md);border:1px solid var(--border-strong);background:rgba(255,255,255,0.98);color:var(--text-primary);font-family:var(--font);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;cursor:pointer;transition:all .15s;white-space:nowrap;-webkit-appearance:none}
.btn:hover{background:rgba(0,0,0,0.04)}
.btn:active{transform:scale(0.98)}
.btn-primary{background:var(--blue);color:white;border-color:var(--blue);font-weight:600;box-shadow:0 1px 3px rgba(0,122,255,.3)}
.btn-primary:hover{background:#0070e8;border-color:#0070e8;box-shadow:0 2px 8px rgba(0,122,255,.4)}
.btn-danger{background:var(--red);color:white;border-color:var(--red)}
.btn-success{background:var(--green);color:white;border-color:var(--green)}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:var(--r-sm)}
.btn-lg{padding:13px 24px;font-size:15px;border-radius:var(--r-lg)}
.w-full{width:100%}
.mt-3{margin-top:16px}
.mt-4{margin-top:24px}

/* Table */
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.table thead tr th{padding:10px 14px;text-align:left;font-weight:600;font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--separator);white-space:nowrap}
.table tbody tr td{padding:11px 14px;border-bottom:1px solid var(--separator);color:var(--text-secondary);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background:rgba(0,0,0,0.03)}

/* Badges */
.badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.2px}
.badge-success,.badge-green{background:rgba(52,199,89,.12);color:#1a8a38}
.badge-danger,.badge-red{background:rgba(255,59,48,.1);color:#d32f2f}
.badge-warning,.badge-yellow{background:rgba(255,204,0,.15);color:#a87a00}
.badge-info,.badge-blue{background:rgba(0,122,255,.1);color:var(--blue)}
.badge-gray{background:rgba(142,142,147,.12);color:var(--neutral)}

/* KYC */
.kyc-status{padding:4px 12px;border-radius:999px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.kyc-status.pending{background:rgba(255,204,0,.12);color:#a87a00}
.kyc-status.approved{background:rgba(52,199,89,.12);color:#1a8a38}
.kyc-status.rejected{background:rgba(255,59,48,.1);color:#d32f2f}
.kyc-progress{margin-top:16px}
.progress-bar{height:6px;background:var(--bg);border-radius:3px;overflow:hidden;border:1px solid var(--border)}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--teal));border-radius:3px;transition:width .4s}
.progress-text{font-size:12px;color:var(--text-tertiary);margin-top:6px;text-align:right}
.kyc-documents{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.kyc-doc{padding:16px;border-radius:var(--r-lg);background:var(--bg);border:1px solid var(--border);transition:box-shadow .15s}
.kyc-doc:hover{box-shadow:var(--shadow-sm)}
.kyc-doc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.kyc-doc-name{font-weight:600;font-size:13px;color:var(--text-primary)}
.kyc-doc-status{font-size:11px}

/* Tabs */
.tab-content{display:none}
.tab-content.active{display:block;animation:fadeIn .2s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Toast */
.toast-container{position:fixed;top:20px;right:20px;z-index:10001;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 16px;border-radius:var(--r-lg);background:rgba(255,255,255,0.98);border:1px solid var(--border);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;min-width:260px;max-width:340px;font-size:13px;color:var(--text-primary);animation:toastIn .25s var(--ease-spring)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px) scale(0.95)}to{opacity:1;transform:translateX(0) scale(1)}}
.toast.success{border-left:3px solid var(--green)}
.toast.error{border-left:3px solid var(--red)}
.toast.warning{border-left:3px solid var(--orange)}
.toast.info{border-left:3px solid var(--blue)}
.toast-icon{font-size:16px}

/* Empty State */
.empty-state{padding:48px 20px;text-align:center;color:var(--text-tertiary)}
.empty-state-icon{font-size:36px;margin-bottom:12px;opacity:.5}
.empty-state-title{font-size:15px;font-weight:600;color:var(--text-secondary);margin-bottom:6px}
.empty-state p{font-size:13px}

/* Footer */
.app-footer{text-align:center;padding:24px 20px 8px;font-size:12px;color:var(--text-quaternary)}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:overlayIn .2s ease}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.modal{background:rgba(255,255,255,0.98);border-radius:var(--r-xl);box-shadow:var(--shadow-xl),0 0 0 1px var(--border);width:100%;max-width:520px;margin:20px;animation:modalIn .25s var(--ease-spring);overflow:hidden}
@keyframes modalIn{from{opacity:0;transform:scale(0.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 16px;border-bottom:1px solid var(--separator)}
.modal-title{font-size:16px;font-weight:600;color:var(--text-primary);letter-spacing:-.2px}
.modal-close{width:28px;height:28px;border-radius:999px;border:none;background:rgba(0,0,0,0.06);color:var(--text-tertiary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:background .15s}
.modal-close:hover{background:rgba(0,0,0,0.1);color:var(--text-primary)}
.modal-body{padding:20px}

/* Trade rows */
.position-row,.history-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--separator);font-size:13px}
.position-row:last-child,.history-row:last-child{border-bottom:none}
.trade-symbol{font-weight:700;font-size:14px;color:var(--text-primary);min-width:80px}
.trade-type{font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px}
.trade-type.buy{background:rgba(52,199,89,.1);color:var(--green)}
.trade-type.sell{background:rgba(255,59,48,.1);color:var(--red)}
.trade-pnl{font-weight:700;font-family:var(--font-mono);margin-left:auto}
.trade-pnl.profit{color:var(--profit)}
.trade-pnl.loss{color:var(--loss)}

/* Payment */
.payment-methods{display:flex;flex-direction:column;gap:8px}
.payment-method{padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--bg);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500}
.payment-method:hover{border-color:var(--blue);background:rgba(0,122,255,.04)}
.payment-method.selected{border-color:var(--blue);background:rgba(0,122,255,.08)}
.payment-method input[type="radio"]{accent-color:var(--blue)}

/* Utils */
.text-neon{color:var(--green)}
.text-cyan{color:var(--blue)}
.text-muted,.text-tertiary{color:var(--text-tertiary)}
.text-sm{font-size:12px}
.text-xs{font-size:11px}
.text-primary{color:var(--text-primary)}
.text-secondary{color:var(--text-secondary)}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-mono{font-family:var(--font-mono)}
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-end{justify-content:flex-end}
.justify-center{justify-content:center}
.gap-2{gap:8px}
.gap-3{gap:12px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.p-3{padding:12px}
.p-4{padding:16px}
.mb-2{margin-bottom:8px}
.mb-3{margin-bottom:12px}

/* Responsive */
@media(max-width:768px){
  .app-header{flex-wrap:wrap;padding:10px 14px}
  .header-status{display:none}
  .nav-tabs{gap:1px;padding:2px}
  .nav-tab{padding:7px 11px;font-size:12px}
  .balance-value{font-size:18px}
  .panel{padding:14px}
  .app-container{padding:10px 12px 32px}
}
@media(max-width:420px){
  .balance-grid{grid-template-columns:1fr 1fr}
  .balance-value{font-size:16px}
  .balance-label{font-size:10px}
}