:root {
  --bg: #f4f6f8;
  --card: #ffffff;
  --text: #17202a;
  --muted: #6b7280;
  --accent: #0f766e;
  --accent-soft: #d9f5f1;
  --border: #e5e7eb;
  --shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: linear-gradient(135deg, #f8fafc, #ecfeff);
  color: var(--text);
}

.app {
  width: min(980px, 92%);
  margin: 0 auto;
  padding: 32px 0;
}

.hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 24px;
}

.eyebrow {
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 8px;
}

h1 {
  font-size: clamp(34px, 6vw, 58px);
  margin: 0;
  letter-spacing: -1px;
}

.subtitle {
  color: var(--muted);
  margin-top: 8px;
}

.status-card,
.calculator-card,
.summary-card,
.company-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.status-card {
  min-width: 220px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.status-card span,
.summary-card span,
.company-meta,
footer {
  color: var(--muted);
  font-size: 14px;
}

.status-card strong {
  margin-top: 8px;
  font-size: 16px;
}

.calculator-card {
  padding: 22px;
  margin-bottom: 20px;
}

.calculator-card label {
  display: block;
  font-weight: 700;
  margin-bottom: 12px;
}

.amount-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 26px;
}

.amount-row span {
  min-width: 52px;
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
}

.amount-row input {
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 26px;
  outline: none;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.summary-card {
  padding: 20px;
}

.summary-card strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
}

.summary-card.best {
  background: var(--accent-soft);
  border-color: #99f6e4;
}

h2 {
  margin: 0 0 14px;
}

.company-list {
  display: grid;
  gap: 12px;
}

.company-card {
  padding: 20px;
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 16px;
  align-items: center;
}

.rank {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 800;
}

.company-name {
  font-weight: 800;
  font-size: 20px;
}

.company-meta {
  margin-top: 4px;
}

.company-result {
  text-align: right;
}

.rate {
  font-size: 18px;
  font-weight: 700;
}

.received {
  margin-top: 4px;
  font-size: 22px;
  font-weight: 900;
  color: var(--accent);
}

footer {
  text-align: center;
  margin-top: 34px;
}

@media (max-width: 760px) {
  .hero,
  .company-card {
    grid-template-columns: 1fr;
    display: block;
  }

  .status-card {
    margin-top: 16px;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .company-card {
    display: block;
  }

  .company-result {
    text-align: left;
    margin-top: 14px;
  }

  .rank {
    margin-bottom: 12px;
  }
}

.status {
  font-weight: 800;
}

.status.good {
  color: #0f766e;
}

.status.warn {
  color: #b45309;
}

.status.bad {
  color: #b91c1c;
}

#depositMethod {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 18px;
  background: #f9fafb;
}

.best-price {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-weight: 800;
}

.settings-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: var(--shadow);
}

.settings-card summary {
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
}

.fee-grid {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.fee-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 10px;
  align-items: center;
}

.fee-row input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

#resetFees {
  margin-top: 16px;
  padding: 10px 14px;
  border: none;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
}

.hero-header {
  text-align: center;
  margin-bottom: 24px;
}

.hero-header h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 800;
}

.hero-subtitle {
  margin: 8px 0 18px;
  color: #6b7280;
  font-size: 16px;
}

.hero-update {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 10px 18px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 14px;
}

.hero-update strong {
  color: #111827;
}

.recommendation-card {
  background: linear-gradient(135deg, #ecfdf5, #f8fafc);
  border: 1px solid #bbf7d0;
  border-radius: 22px;
  padding: 24px;
  margin: 24px 0;
  box-shadow: var(--shadow);
}

.recommendation-card h2 {
  margin: 0 0 12px;
  font-size: 20px;
}

.recommendation-main {
  font-size: 28px;
  font-weight: 900;
  margin: 8px 0;
}

.recommendation-cost {
  font-size: 34px;
  font-weight: 900;
  color: #166534;
  margin: 8px 0;
}

.recommendation-note {
  color: #374151;
  line-height: 1.6;
}

.best-card {
  border-color: #86efac;
  background: linear-gradient(135deg, #ffffff, #f0fdf4);
}

.recommendation-provider{
    font-size:32px;
    font-weight:800;
    margin:8px 0;
}

.recommendation-updated{
    margin-top:18px;
    font-size:14px;
    color:#6b7280;
}

.recommendation-main{
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:14px;
    color:#16a34a;
    font-weight:700;
}
}

.market-card{
    margin:20px 0;
    padding:20px;
    border-radius:18px;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
}

.market-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.market-item{
    text-align:center;
}

.market-item span{
    display:block;
    color:#6b7280;
    font-size:14px;
}

.market-item strong{
    display:block;
    margin-top:8px;
    font-size:22px;
}

.extra-cost{
    margin-top:8px;
    color:#ef4444;
    font-weight:700;
    font-size:14px;
}

.best-price{
    margin-top:8px;
    color:#16a34a;
    font-weight:700;
    font-size:14px;
}

.company-card {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 20px;
}

.company-name {
  font-size: 22px;
}

.company-meta {
  line-height: 1.7;
}

.company-result {
  min-width: 170px;
}

.rank {
  font-size: 22px;
}

.company-badges{
    display:flex;
    gap:10px;
    margin-top:10px;
    flex-wrap:wrap;
}

.company-badges span{
    padding:4px 10px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}

.badge-rate{
    background:#eef6ff;
    color:#2563eb;
}

.badge-time{
    background:#f5f5f5;
    color:#555;
}

.badge.good{
    background:#dcfce7;
    color:#15803d;
}

.badge.warn{
    background:#fef3c7;
    color:#b45309;
}

.badge.bad{
    background:#fee2e2;
    color:#dc2626;
}

main {
    width: min(1280px, 96%);
    margin: 0 auto;
    padding: 24px 0 48px;
}

.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999;
}

.hidden{
    display:none;
}

.modal-content{
    width:min(900px,95%);
    background:#fff;
    border-radius:18px;
    padding:28px;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.close-btn{
    float:right;
    border:none;
    background:none;
    font-size:24px;
    cursor:pointer;
}

#historyChart{
    margin-top:20px;
    height:420px !important;
}

.history-panel{
    margin-top:30px;
    padding:24px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    animation:slideDown .25s ease;
}

.history-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

#closeHistoryPanel{
    border:none;
    background:none;
    font-size:22px;
    cursor:pointer;
}

#historyChart{
    height:350px !important;
}

.hidden{
    display:none;
}

@keyframes slideDown{
    from{
        opacity:0;
        transform:translateY(-10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

.history-inline{
    margin-top:18px;
    padding:18px;

    background:#f8fafc;

    border-radius:12px;

    border-left:4px solid #2563eb;

    animation:slideDown .25s ease;
}

.company-card {
  display: block;
}

.company-main {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 20px;
  cursor: pointer;
}

.history-inline {
  margin-top: 18px;
}

.history-title {
  font-weight: 900;
  margin-bottom: 14px;
}

.history-stats {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  margin: 16px 0 20px;
}

.history-stats div {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
}

.history-stats span {
  display: block;
  color: #6b7280;
  font-size: 12px;
  margin-bottom: 6px;
}

.history-stats strong {
  font-size: 16px;
}
.history-inline {
  height: 520px;
  overflow: hidden;
}

.history-inline canvas {
  width: 100% !important;
  height: 360px !important;
  max-height: 360px !important;
  display: block;
}
.summary-card{
    margin:24px 0;
}

.summary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:14px;
}

.summary-item{
    background:#fff;
    border-radius:14px;
    padding:16px;
    text-align:center;
    border:1px solid #e8edf5;
    box-shadow:0 3px 8px rgba(0,0,0,.04);
}

.summary-item span{
    display:block;
    font-size:.82rem;
    color:#777;
}

.summary-item strong{
    display:block;
    margin-top:8px;
    font-size:1.35rem;
}

.market-card {
    margin-bottom: 40px;
}

.intelligence-card {
  margin: 32px 0 40px;
}

.intelligence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.intelligence-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0,0,0,.04);
}

.intelligence-item span {
  display: block;
  color: #6b7280;
  font-size: 13px;
  margin-bottom: 8px;
}

.intelligence-item strong {
  font-size: 18px;
}

.summary-card,
.market-card,
.intelligence-card {
  margin: 36px 0;
}

.summary-card h2,
.market-card h2,
.intelligence-card h2,
section h2 {
  margin-bottom: 18px;
}

@media (max-width: 768px) {
  main {
    width: 94%;
    padding: 16px 0 36px;
  }

  .hero-header h1 {
    font-size: 26px;
  }

  .calculator-card,
  .recommendation-card,
  .market-card,
  .intelligence-card,
  .settings-card,
  .company-card {
    padding: 16px;
  }

  .market-grid,
  .intelligence-grid,
  .summary-grid,
  .history-stats {
    grid-template-columns: 1fr;
  }

  .company-main {
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: left;
  }

  .rank {
    font-size: 28px;
  }

  .company-result {
    min-width: 0;
    text-align: left;
  }

  .company-badges {
    gap: 8px;
  }

  .company-badges span {
    font-size: 12px;
  }

  .recommendation-provider {
    font-size: 26px;
  }

  .recommendation-cost {
    font-size: 30px;
  }

  .history-inline {
    height: auto;
    min-height: 420px;
  }

  .history-inline canvas {
    height: 300px !important;
  }

  .fee-row {
    grid-template-columns: 1fr;
  }

  .fee-header {
    display: none;
  }
}

.hero-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-top:16px;
}

.refresh-icon{

    width:44px;
    height:44px;

    border:none;
    border-radius:999px;

    background:#16a34a;
    color:white;

    font-size:24px;
    font-weight:700;

    cursor:pointer;

    display:flex;
    justify-content:center;
    align-items:center;

    transition:.25s ease;

    box-shadow:0 8px 18px rgba(22,163,74,.20);

}

.refresh-icon:hover{

    transform:rotate(180deg);

    background:#15803d;

}

.refresh-icon:active{

    transform:scale(.95);

}

.app-badges {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.app-badges span {
  padding: 6px 12px;
  border-radius: 999px;
  background: #eefdf7;
  color: #047857;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid #bbf7d0;
}