/* ===== Estilos Globais ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --ink:#0a0f1f;
  --ink-2:#0c1429;
  --blue:#2e7cf6;
  --blue-2:#0aa9ff;
  --cyan:#00e5ff;
  --green:#2df59b;
  --red:#ff4d6d;
  --card:#0d1328cc;
  --muted:#8aa0c9;
}

html,body{height:100%;}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:#e8eeff;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(5, 55, 78, 0.25), transparent 60%),
    radial-gradient(900px 500px at 10% -10%, rgba(1, 1, 2, 0.25), transparent 50%),
    linear-gradient(180deg, #02040a 0%, #050a16 35%, #03060f 100%);
}

/* ===== App Shell ===== */
.app-shell{max-width:1200px; margin:0 auto; padding:24px;}

/* ===== NAV / BRAND ===== */
.nav {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border: 1px solid #1a2444;
  background: linear-gradient(135deg, #060b1a, #0a142b 60%, #05112b);
  border-radius: 20px;
  box-shadow: 0 10px 35px rgba(0,0,0,.35), inset 0 0 60px rgba(0,153,255,.07);
  flex-wrap: wrap;
}

.brand{display:flex; align-items:center; gap:12px;}
.brand h1{font-weight:700; letter-spacing:.3px; font-size: clamp(16px, 2vw, 22px);}
.brand strong{
  background:linear-gradient(90deg,#64b5ff,#00e0ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.spark{width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #00e5ff, #2e7cf6 60%, #000 100%); box-shadow:0 0 14px #00e5ff;}
.brand-icon {height: 4em; width: auto;}

/* quando tela for grande: logo + barra de ativos ao lado */
@media(min-width: 900px){
  .nav {
    flex-wrap: nowrap;
  }
  .brand {
    flex-direction: row;
    gap: 20px;
  }
  .asset-bar {
    margin: 0;
    justify-content: flex-start;
    flex: 1;
  }
}

/* ===== Controles ===== */
.ticker-controls{
  display:flex;
  gap:14px;
  align-items:end;
  flex-wrap:wrap;
  width:100%;
}
label{
  font-size:12px;
  color:#a9b8e8;
  display:flex;
  flex-direction:column;
  gap:6px;
}
select, input[type="number"], input[type="text"]{
  background:#0b1224;
  border:1px solid #223056;
  color:#e8eeff;
  padding:10px 12px;
  border-radius:12px;
  outline:none;
  width:100%;
  max-width:200px;
}
input[type="range"]{width:100%; max-width:180px;}

.btn{
  background:#0b1224;
  border:1px solid #233059;
  color:#e8eeff;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  transition:.2s;
  font-weight:600;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.25);}
.btn.primary{background:linear-gradient(135deg,#1570ff,#00b7ff); border:0;}
.btn.danger{background:linear-gradient(135deg,#32101a,#5e0f22); border:1px solid #5e0f22;}
.btn.grow{min-width:160px;}
.btn-xs{padding:6px 10px; font-size:12px; border-radius:10px;}

/* ===== Layout ===== */
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  margin-top:18px;
}
@media(min-width:900px){
  .grid{
    grid-template-columns: 1.4fr .9fr;
    grid-auto-rows: min-content;
  }
  .chart-card{ grid-column: 1 / -1; }
}

/* ===== Card ===== */
.card{
  border:1px solid #1a2444;
  border-radius:18px;
  background:linear-gradient(180deg, var(--card), rgba(5,12,30,.8));
  box-shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 0 50px rgba(0,153,255,.06);
  padding:14px 14px 16px;
}
.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  flex-wrap: wrap;
}
.card h2{font-size: clamp(16px, 2vw, 20px); font-weight:700;}

/* ===== Preço ===== */
.price-badge{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  background:linear-gradient(135deg,#06122a,#0b2346);
  border:1px solid #1a2f55;
  padding:8px 10px;
  border-radius:12px;
}
.price-badge #price{font-weight:800; font-size:clamp(16px, 4vw, 20px);}
.price-badge small{color:#94acd9;}

/* ===== Gráfico ===== */
.chart-container{
  position: relative;
  height: 320px;
  border-radius: 20px;
  background:
    radial-gradient(circle at top, rgba(37,99,235,.28), transparent 60%),
    linear-gradient(to bottom, #050b1a, #020617);
  border: 1px solid rgba(30,64,175,.9);
  box-shadow: 0 22px 55px rgba(3,10,26,.95);
  overflow: hidden;
  margin-top:10px;
}

/* grid suave por cima do fundo */
.chart-container::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(15,23,42,.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.6) 1px, transparent 1px);
  background-size:60px 60px;
  opacity:.35;
  pointer-events:none;
}

.chart-container canvas{
  width:100% !important;
  height:auto !important;
  min-height:280px;
  max-height:420px;
  display:block;
  border-radius:18px;
  position:relative;
  z-index:1;
}

/* ===== Formulário ===== */
.order-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:6px;
}
.order-form .row{
  display:flex;
  gap:12px;
  align-items:end;
  flex-wrap:wrap;
}

/* ===== Segmentos ===== */
.segmented{
  display:inline-grid;
  grid-auto-flow:column;
  gap:0;
  background:#0b1224;
  border:1px solid #223056;
  border-radius:12px;
}
.segmented input{display:none;}
.segmented label{
  padding:10px 14px;
  cursor:pointer;
  border-right:1px solid #223056;
  user-select:none;
}
.segmented label:last-child{border-right:0;}
.segmented input:checked + label{
  background:linear-gradient(135deg,#0f2a58,#0a4273);
  color:#bfe3ff;
  font-weight:700;
}

/* ===== Barra de ativos (pills) ===== */
.asset-bar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:16px 0 20px;
  justify-content:center;
}

.asset-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;                 /* mais espaço entre ícone e texto */
  padding:6px 14px;        /* um pouco mais “cheio” */
  border-radius:999px;
  border:1px solid rgba(26,36,68,.9);
  background:radial-gradient(circle at top left, rgba(15,23,42,.95), #020617);
  color:#e8eeff;
  font-size:.78rem;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease,
             border-color .12s ease, background .12s ease, filter .12s ease;
}

.asset-pill:hover{
  transform:translateY(-1px);
  border-color:rgba(56,189,248,.8);
  filter:brightness(1.05);
}

.asset-pill.active{
  background:radial-gradient(circle at 0 0, rgba(56,189,248,.3), #020617);
  border-color:rgba(56,189,248,.95);
  box-shadow:0 0 0 1px rgba(56,189,248,.35),
             0 12px 28px rgba(3,10,26,.9);
}

/* ===== Ícones das moedas (design novo) ===== */
.asset-icon{
  width:24px;
  height:24px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.88rem;
  font-weight:700;
  color:#ffffff;
  box-shadow:
    0 0 6px rgba(0, 0, 0, 0.6),
    inset 0 0 6px rgba(255, 255, 255, 0.15);
  border:1px solid rgba(255,255,255,0.08);
  padding-top:1px; /* ajuste óptico */
  text-shadow:0 1px 3px rgba(0,0,0,0.55);
}

.asset-label{
  font-weight:600;
  letter-spacing:.04em;
}

.asset-quote{
  font-size:.7rem;
  text-transform:uppercase;
  color:#9ca3af;
}

/* cores por ativo (ajuste como quiser) */
.asset-icon.btc{
  background:radial-gradient(circle at 40% 35%, #fbbf24, #f59e0b 65%, #b45309 100%);
}
.asset-icon.eth{
  background:radial-gradient(circle at 40% 35%, #94a3b8, #64748b 60%, #334155 100%);
}
.asset-icon.sol{
  background:radial-gradient(circle at 40% 35%, #22d3ee, #14b8a6 65%, #0d9488 100%);
}
.asset-icon.bnb{
  background:radial-gradient(circle at 40% 35%, #facc15, #eab308 60%, #b45309 100%);
}
.asset-icon.ada{
  background:radial-gradient(circle at 40% 35%, #38bdf8, #0ea5e9 60%, #0369a1 100%);
}
.asset-icon.xrp{
  background:radial-gradient(circle at 40% 35%, #cbd5e1, #94a3b8 60%, #475569 100%);
}
.asset-icon.doge{
  background:radial-gradient(circle at 40% 35%, #fcd34d, #fbbf24 60%, #b45309 100%);
}
.asset-icon.dot{
  background:radial-gradient(circle at 40% 35%, #ec4899, #db2777 60%, #9d174d 100%);
}
.asset-icon.matic{
  background:radial-gradient(circle at 40% 35%, #a855f7, #7c3aed 60%, #5b21b6 100%);
}
.asset-icon.avax{
  background:radial-gradient(circle at 40% 35%, #f87171, #ef4444 60%, #b91c1c 100%);
}
.asset-icon.atom{
  background:radial-gradient(circle at 40% 35%, #22d3ee, #0284c7 70%, #075985 100%);
}
.asset-icon.near{
  background:radial-gradient(circle at 40% 35%, #4ade80, #22c55e 60%, #15803d 100%);
}

/* ===== Faixa de métricas (Saldo, Posição, P/L, Equity) ===== */
.order-card .card-title{
  font-size:1rem;
  letter-spacing:.12em;
}

.order-stats-strip{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
  padding:10px 12px;
  border-radius:999px;
  background:radial-gradient(circle at 0 0, rgba(15,23,42,.95), rgba(15,23,42,.98));
  border:1px solid rgba(15,23,42,1);
}
@media(min-width:640px){
  .order-stats-strip{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

.order-stats-item{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.order-stats-label{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#9bb0d9;
}

.order-stats-value{
  font-size:.86rem;
  font-weight:800;
}

/* ===== Tabela / Histórico ===== */
.history-card .table-wrapper{
  margin-top:8px;
  border-radius:18px;
  border:1px solid rgba(30,64,175,.85);
  overflow:hidden;
}

.table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.history-card .table{
  font-size:.78rem;
}

.table thead{
  background:linear-gradient(to right, rgba(15,23,42,.98), rgba(30,64,175,.85));
}
.table th,.table td{
  border-bottom:1px dashed #1f2c50;
  padding:8px 6px;
  text-align:left;
}
.table th{
  font-weight:500;
  color:#cbd5f5;
}
.table tbody tr{
  background:rgba(10,16,30,.92);
  transition:background .12s ease;
}
.table tbody tr:nth-child(even){
  background:rgba(10,16,30,.98);
}
.table tbody tr:hover{
  background:linear-gradient(90deg, rgba(25,45,90,.35), transparent);
}

/* células de P/L coloridas (quando você adicionar as classes via JS) */
.table td.pl-positive{color:#22c55e;}
.table td.pl-negative{color:#f97373;}

/* ===== Footer (pills) ===== */
.app-footer{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:10px;
  font-size:.75rem;
  color:#9ab2df;
  flex-wrap:wrap;
}

.footer-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:999px;
  background:#0f172a;
  border:1px solid #1e293b;
  color:#e5e7eb;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}

.footer-pill-icon{
  font-size:.8rem;
}

/* ===== Utilidades ===== */
.hidden{display:none;}

/* ===== Responsividade Extra ===== */
@media(max-width:768px){
  .nav {flex-direction: column; gap:12px; text-align:center;}
  .card-head {flex-direction: column; align-items: flex-start; gap: 8px;}
  .order-form .row {flex-direction: column; align-items: stretch;}
  .btn.grow {width: 100%;}
}