:root{
  --md-sys-color-primary:#1957d2;
  --md-sys-color-on-primary:#ffffff;
  --md-sys-color-surface:#fbfbff;
  --md-sys-color-surface-container:#f1f3f8;
  --md-sys-color-surface-container-high:#e8ebf3;
  --md-sys-color-on-surface:#1a1b1f;
  --md-sys-color-on-surface-variant:#44464f;
  --md-sys-color-outline:#c6c7cf;
  --md-sys-color-outline-variant:#dfe1ea;
  --md-sys-color-secondary-container:#e8f0ff;
  --md-sys-color-on-secondary-container:#0b1b3f;
  --md-sys-color-error:#b3261e;
  --md-sys-color-warning:#f9c400;
  --radius-xl:20px;
  --radius-lg:16px;
  --radius-md:12px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.08);
  --bottomnav-height: 76px;
}
body.dark{
  --md-sys-color-primary:#8fb1ff;
  --md-sys-color-on-primary:#0b1b3f;
  --md-sys-color-surface:#0f1218;
  --md-sys-color-surface-container:#141923;
  --md-sys-color-surface-container-high:#1b2230;
  --md-sys-color-on-surface:#e6e9ef;
  --md-sys-color-on-surface-variant:#b5bac7;
  --md-sys-color-outline:#3a4150;
  --md-sys-color-outline-variant:#2b3240;
  --md-sys-color-secondary-container:#1b2740;
  --md-sys-color-on-secondary-container:#d7e2ff;
  --md-sys-color-error:#f2b8b5;
  --md-sys-color-warning:#f0d078;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:linear-gradient(180deg,var(--md-sys-color-surface) 0%, #f7f8fd 45%, #f6f7fb 100%);
  color:var(--md-sys-color-on-surface);
  padding-bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom));
}
body.dark{
  background:linear-gradient(180deg,var(--md-sys-color-surface) 0%, #0d1119 60%, #0b0f17 100%);
}
.dark .appbar,
.dark .bottomnav{
  background:rgba(20,25,35,.92);
  border-color:var(--md-sys-color-outline-variant);
}
.dark .iconbtn{
  background:rgba(30,36,50,.9);
  color:var(--md-sys-color-on-surface);
  border-color:var(--md-sys-color-outline);
}
.dark .card,
.dark .market-item,
.dark .resultbox,
.dark .form.card,
.dark .toptext__card{
  background:rgba(20,25,35,.92);
  border-color:var(--md-sys-color-outline-variant);
  color:var(--md-sys-color-on-surface);
}
.dark .market-item.is-important{
  background:linear-gradient(180deg,#d6a900 0%, #c89200 100%);
}
.dark .btn.ghost{background:rgba(30,36,50,.9);color:var(--md-sys-color-on-surface)}
.dark .btn.text{color:var(--md-sys-color-on-surface)}
.dark .pill{background:rgba(30,36,50,.9);color:var(--md-sys-color-on-surface)}
.dark .pill.primary{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}
.dark .bottomnav__item{color:var(--md-sys-color-on-surface-variant)}
.dark .bottomnav__item.is-active{background:rgba(30,36,50,.9);color:var(--md-sys-color-on-surface)}
.container{width:min(1100px, 92%);margin:0 auto}
.icon{width:22px;height:22px;display:block}
.iconbtn{
  width:44px;height:44px;border-radius:14px;
  border:1px solid var(--md-sys-color-outline-variant);
  background:rgba(255,255,255,.6);
  color:var(--md-sys-color-on-surface);
  display:flex;align-items:center;justify-content:center;
  padding:0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor:pointer;
}
.appbar__actions{
  display:grid;
  grid-template-columns: repeat(2, 44px);
  grid-auto-rows: 44px;
  gap:10px;
  justify-self:end;
  align-items:center;
}
.icon-moon{display:none}
body.dark .icon-sun{display:none}
body.dark .icon-moon{display:inline-block}
.iconbtn:active{transform:scale(.98)}
.appbar{
  position:sticky;top:0;z-index:40;
  background:rgba(251,251,255,.85);
  border-bottom:1px solid var(--md-sys-color-outline-variant);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.appbar__row{
  width:min(1100px, 92%);
  margin:0 auto;
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  align-items:center;
  gap:10px;
  padding:10px 0;
}
.appbar__title{min-width:0}
.brand{font-weight:800;letter-spacing:-.3px;color:var(--md-sys-color-on-surface);text-decoration:none;font-size:1.05rem}
.subtitle{font-size:.82rem;color:var(--md-sys-color-on-surface-variant);margin-top:2px}
.no-slogan .brand{font-size:1.25rem}
.no-slogan .subtitle{display:none}

.drawer{position:fixed;inset:0 auto 0 0;z-index:60;display:none}
.drawer__panel{
  position:relative;
  width:min(320px, 88vw);
  background:var(--md-sys-color-surface);
  border-right:1px solid var(--md-sys-color-outline-variant);
  box-shadow: var(--shadow-1);
  transform: translateX(-105%);
  transition: transform .22s ease;
  pointer-events:auto;
}
body.drawer-open .drawer{display:block}
body.drawer-open .drawer__panel{transform: translateX(0)}
.drawer__header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--md-sys-color-outline-variant);
}
.drawer__brand{font-weight:800}
.drawer__nav{display:grid;gap:6px;padding:10px}
.drawer__link{
  display:flex;align-items:center;gap:12px;
  padding:12px 12px;
  border-radius:14px;
  text-decoration:none;
  color:var(--md-sys-color-on-surface);
}
.drawer__link:hover{background:var(--md-sys-color-surface-container)}
.drawer__form{padding:0}
.drawer__button{
  width:100%;
  display:flex;align-items:center;gap:12px;
  padding:12px 12px;
  border-radius:14px;
  border:none;
  background:none;
  color:inherit;
  font:inherit;
  text-align:left;
}
.drawer__button:hover{background:var(--md-sys-color-surface-container)}

main{padding: 10px 0 18px}
.toptext{padding:10px 0 0}
.toptext__card{padding:12px 14px;border-radius:var(--radius-lg);background:rgba(255,255,255,.9)}
.hero{padding:14px 0 8px}
.hero h1{margin:0;font-size:1.55rem;letter-spacing:-.4px}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;padding:0 12px}
.hero .last-updated{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--md-sys-color-outline-variant);
  background:var(--md-sys-color-surface-container);
  font-weight:600;
}
.hero .last-updated{margin:6px 12px 0}
.muted{color:var(--md-sys-color-on-surface-variant)}
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.form.card{padding:18px}
.form{display:grid;gap:12px}
.form label{display:grid;gap:6px;font-size:.9rem}
.form input,
.form textarea{padding:12px;border-radius:14px;border:1px solid var(--md-sys-color-outline-variant);background:#fff;font-family:inherit}
.form label.checkbox{display:flex;flex-direction:row;align-items:center;gap:10px}
.form label.checkbox input{width:16px;height:16px;padding:0;border-radius:4px;margin:0}
.input-with-toggle{position:relative}
.input-with-toggle input{width:100%;padding-right:46px}
.toggle-password{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:10px;
  border:none;
  background:transparent;
  color:var(--md-sys-color-on-surface);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.toggle-password .icon-eye,
.toggle-password .icon-eye-off{width:20px;height:20px;fill:currentColor;display:block}
.toggle-password .icon-eye-off{display:none}
.toggle-password.is-showing .icon-eye{display:none}
.toggle-password.is-showing .icon-eye-off{display:block}
.dark .toggle-password{
  background:rgba(30,36,50,.9);
  color:var(--md-sys-color-on-surface);
  border-color:var(--md-sys-color-outline);
}
.dark .form input,
.dark .form textarea{
  background:rgba(20,25,35,.92);
  color:var(--md-sys-color-on-surface);
  border-color:var(--md-sys-color-outline-variant);
}
.auth-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.auth-links a{text-decoration:none}
.btn.text{
  background:transparent;
  border:1px solid transparent;
  color:var(--md-sys-color-primary);
  padding:8px 12px;
}
.btn.text:hover{background:var(--md-sys-color-secondary-container)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--md-sys-color-outline-variant);
  background:var(--md-sys-color-secondary-container);
  color:var(--md-sys-color-on-secondary-container);
  font-weight:700;
}
.btn.primary{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border-color: transparent}
.btn.ghost{background:rgba(255,255,255,.7)}
.btn:active{transform:scale(.99)}
.controls button.btn{display:inline-flex}

.section{margin:14px 0}
.section h2{
  margin:12px 0 8px;
  font-size:1.02rem;
  color:var(--md-sys-color-on-surface);
  letter-spacing:.6px;
  text-transform:uppercase;
  padding:8px 12px;
  background:var(--md-sys-color-surface-container);
  border:1px solid var(--md-sys-color-outline-variant);
  border-left:4px solid #ff5c5c;
  border-radius:12px;
}
.market-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.card{
  background: rgba(255,255,255,.84);
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.market-item{padding:12px;display:grid;gap:10px}
.market-item.is-important{
  background: linear-gradient(180deg, #ffd44d 0%, #f9c400 100%);
  border-color:#e0a800;
}
.market-item.is-important .market-name,
.market-item.is-important .market-meta,
.market-item.is-important .chip,
.market-item.is-important .actions,
.market-item.is-important .pill,
.market-item.is-important .resultbox{
  color:#1a1b1f;
}
.market-item.is-important .pill.primary{
  color:#fff;
}
.market-item.is-important .action-edit{
  background:rgba(255,255,255,.8);
  color:#1a1b1f;
}
.dark .market-item.is-important .action-edit{
  background:rgba(20,25,35,.92);
  color:#e6e9ef;
  border-color:var(--md-sys-color-outline-variant);
}
.market-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.market-name-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.market-name{font-weight:900;letter-spacing:-.2px;color:var(--md-sys-color-on-surface);font-size:1.02rem}
.market-meta{display:flex;align-items:center;gap:10px;color:var(--md-sys-color-on-surface-variant);font-size:.9rem;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  font-size:.78rem;font-weight:800;
  border:1px solid var(--md-sys-color-outline-variant);
  background:rgba(255,255,255,.75);
}
.chip.active{background:#e7f6e7;color:#1b5e20}
.chip.holiday{background:#fff1e0;color:#8a4b00}
.chip.inactive{background:#f2f2f2;color:#555}
.results{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  align-items:end;
}
.resultbox{
  background:var(--md-sys-color-surface-container);
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--radius-md);
  padding:10px;
  text-align:center;
}
.dark .resultbox .label{color:var(--md-sys-color-on-surface-variant)}
.dark .resultbox .value{color:var(--md-sys-color-on-surface)}
.resultbox .label{font-size:.75rem;color:var(--md-sys-color-on-surface-variant);margin-bottom:4px}
.resultbox .value{font-size:1.35rem;font-weight:900;letter-spacing:.6px}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chart-text--desktop{display:none}
.chart-btn--mobile{display:inline-flex}
.icon-eye{display:none}
.toggle-hidden.is-showing .icon-eye{display:inline-block}
.toggle-hidden.is-showing .icon-eye-off{display:none}
.market-item.is-hidden .hide-toggle .icon-eye{display:inline-block}
.market-item.is-hidden .hide-toggle .icon-eye-off{display:none}
.action-edit{display:none}
body.actions-on .action-edit{display:inline-flex}
.market-item .action-edit{
  width:40px;
  height:40px;
  padding:0;
  border-radius:50%;
  justify-content:center;
}
.market-item .action-edit .icon{width:18px;height:18px}
.controls .action-edit{background:rgba(255,255,255,.6)}
.control-btn{
  border:1px solid var(--md-sys-color-outline-variant);
  background:rgba(255,255,255,.9);
  border-radius:999px;
  padding:8px;
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}
.control-btn .icon{width:18px;height:18px}
.dark .control-btn{
  background:rgba(30,36,50,.9);
  border-color:var(--md-sys-color-outline-variant);
}
.dark .controls .action-edit{background:rgba(30,36,50,.9)}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--md-sys-color-outline-variant);
  background:rgba(255,255,255,.75);
  color:var(--md-sys-color-on-surface);
  text-decoration:none;
  font-weight:800;
}
.pill.primary{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border-color:transparent}
.pill.small{padding:8px 10px;font-size:.88rem}
.market-item.is-hidden{display:none}
body.show-hidden .market-item.is-hidden{display:grid;opacity:.6}

.chart-header{padding:14px 0}
.chart-nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chart-table table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.9);border:1px solid var(--md-sys-color-outline-variant);border-radius: var(--radius-lg);overflow:hidden}
.chart-table th,.chart-table td{padding:10px;border-bottom:1px solid var(--md-sys-color-outline-variant);text-align:center}
.dark .chart-table table{background:rgba(20,25,35,.92);border-color:var(--md-sys-color-outline-variant)}
.dark .chart-table th,.dark .chart-table td{border-color:var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface)}
.dark .chart-table th{color:var(--md-sys-color-on-surface-variant)}
.site-footer{
  padding:18px 0 calc(18px + var(--bottomnav-height));
  margin-top:18px;
  color:var(--md-sys-color-on-surface-variant);
  font-size:.9rem;
}
.site-footer .disclaimer{margin-top:10px;font-size:.85rem;line-height:1.4;color:var(--md-sys-color-on-surface-variant)}
.combined-link{display:inline-flex;align-items:center;gap:8px;margin-top:8px}

.combined-block{
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--md-sys-color-outline-variant);
  background:var(--md-sys-color-surface);
}
.combined-banner{
  background:#35c48b;
  color:#fff;
  font-weight:800;
  text-align:center;
  padding:12px 14px;
}
.combined-table table{border-radius:0;border-left:none;border-right:none}
.combined-table th{
  background:#f7c400;
  color:#222;
  font-weight:800;
}
.combined-table th:first-child{color:#d40000}
.combined-table td:first-child{color:#d40000;font-weight:700}
.combined-nav{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:12px;
  align-items:center;
  padding:12px;
  background:#f3f5fb;
}
.combined-nav .nav-btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--md-sys-color-outline-variant);
  background:#1e66d0;
  color:#fff;
  text-decoration:none;
  font-weight:800;
}
.combined-nav .nav-sep{justify-self:center;color:var(--md-sys-color-on-surface-variant)}
.combined-selector{
  background:#f7c400;
  padding:14px;
  display:grid;
  gap:12px;
}
.combined-selector .selector-note{
  text-align:center;
  font-weight:600;
}
.combined-selector .selector-row{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  align-items:center;
}
.combined-selector select{
  padding:12px 12px;
  border-radius:999px;
  border:1px solid var(--md-sys-color-outline-variant);
  background:#fff;
  font-weight:700;
  flex:1;
}

.dark .combined-block{background:rgba(18,22,30,.92);border-color:var(--md-sys-color-outline-variant)}
.dark .combined-banner{background:#1b7f5a}
.dark .combined-table th{background:#8a6b00;color:#f6f1d4}
.dark .combined-table td{color:var(--md-sys-color-on-surface)}
.dark .combined-table td:first-child{color:#ff8a8a}
.dark .combined-nav{background:rgba(25,30,40,.92)}
.dark .combined-selector{background:#8a6b00}
.dark .combined-selector select{background:rgba(20,25,35,.92);color:var(--md-sys-color-on-surface)}

@media (max-width: 720px){
  .combined-banner{
    font-size:.95rem;
    line-height:1.25;
  }
  .combined-nav{grid-template-columns: 1fr auto 1fr}
}

@media (max-width: 720px){
  .container{
    width:100%;
    padding-left:2px;
    padding-right:2px;
  }
}

.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,251,255,.92);
  border-top:1px solid var(--md-sys-color-outline-variant);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:8px;
  min-height: var(--bottomnav-height);
}
.bottomnav__item{
  appearance:none;
  border:none;
  background:transparent;
  text-decoration:none;
  color:var(--md-sys-color-on-surface-variant);
  display:grid;
  place-items:center;
  gap:4px;
  padding:8px 6px;
  border-radius: 14px;
  font-size:.75rem;
  font-weight:800;
  cursor:pointer;
}
.bottomnav__item:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}
.bottomnav__item.is-active{background: var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}
.dark .bottomnav__item.is-active{background:rgba(30,36,50,.9);color:var(--md-sys-color-on-surface)}
.bottomnav__item:active{transform:scale(.99)}

/* Install (reuses this file; still visually separated) */
.install{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.install .install-card{width:min(520px, 100%);padding:20px;border-radius:var(--radius-xl);background:rgba(255,255,255,.92);border:1px solid var(--md-sys-color-outline-variant);box-shadow:var(--shadow-1)}
.install .form{display:grid;gap:12px}
.install label{display:grid;gap:6px;font-size:.9rem}
.install input{padding:12px;border-radius:14px;border:1px solid var(--md-sys-color-outline-variant);background:#fff}
.install label.checkbox{display:flex !important;flex-direction:row;align-items:center;gap:10px}
.install label.checkbox input{width:16px;height:16px;padding:0;border-radius:4px;margin:0}
.install .input-with-toggle{position:relative}
.install .input-with-toggle input{width:100%;padding-right:46px}
.install .toggle-password{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:10px;
  border:none;
  background:transparent;
  color:var(--md-sys-color-on-surface);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.install .toggle-password .icon-eye,
.install .toggle-password .icon-eye-off{width:20px;height:20px;fill:currentColor}
.install .toggle-password .icon-eye-off{display:none}
.install .toggle-password.is-showing .icon-eye{display:none}
.install .toggle-password.is-showing .icon-eye-off{display:block}
.dark .install .toggle-password{
  background:rgba(30,36,50,.9);
  color:var(--md-sys-color-on-surface);
  border-color:var(--md-sys-color-outline);
}
.install .actions{display:flex;gap:10px;flex-wrap:wrap}
.install .btn{min-width:160px}
.install .btn[disabled]{opacity:.55;cursor:not-allowed}
.dark .install input{background:rgba(20,25,35,.92);color:var(--md-sys-color-on-surface)}
.dark .install .install-card{background:rgba(18,22,30,.92)}
.install #test-message{margin-top:6px}

@media (min-width: 840px){
  .hero h1{font-size:1.8rem}
  .market-item{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "top top"
      "actions results";
    align-items:center;
  }
  .market-top{grid-area:top}
  .results{grid-area:results;justify-self:end}
  .actions{grid-area:actions;justify-content:flex-start;flex-wrap:nowrap}
  .chart-text--desktop{display:inline}
  .chart-text--mobile{display:none}
}

@media (max-width: 839px){
  .actions{flex-wrap:nowrap}
  .market-item .action-edit{
    width:38px;height:38px;
    padding:0;
    justify-content:center;
  }
  .market-item .action-edit .icon{width:18px;height:18px}
  .chart-btn--mobile{
    margin-left:auto;
    padding:10px 14px;
    font-size:.9rem;
  }
}

.page{padding:16px 0 24px}
.page-content{
  line-height:1.7;
  font-size:1rem;
}
.page-content h2,
.page-content h3{
  margin:18px 0 8px;
}
.page-content p{margin:0 0 12px}
.page-content ul{padding-left:20px;margin:0 0 12px}
.page-content a{color:var(--md-sys-color-primary)}

.site-footer .footer-links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.site-footer .footer-links a{
  color:var(--md-sys-color-on-surface);
  text-decoration:none;
  font-weight:600;
}
.site-footer .footer-links a:hover{text-decoration:underline}
.honeypot{display:none}