/* YUKAN shared visual system. Trading Desk is the reference. */
:root {
  color-scheme: dark;
  --bg: #080e17;
  --panel: #101a28;
  --panel2: #0d1622;
  --line: #304158;
  --text: #edf4fc;
  --muted: #b4c8dc;
  --cyan: #40d0ed;
  --green: #21d6a3;
  --red: #fc6485;
  --gray: #b5c3d5;
  --blue-light: #40d0ed;
  --blue: #40d0ed;
  --yukan-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
html { background: var(--bg); }
body.yukan-theme {
  margin: 0;
  background: radial-gradient(ellipse at 52% -30%, #183249 0, transparent 52%), var(--bg);
  color: var(--text);
  font-family: var(--yukan-font);
  font-size: 14px;
  line-height: 1.5;
}
.yukan-theme *, .yukan-theme *::before, .yukan-theme *::after { box-sizing: border-box; }
.yukan-theme button, .yukan-theme input, .yukan-theme select, .yukan-theme textarea { font-family: var(--yukan-font); }
.yukan-theme :is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.yukan-theme :is(.btn-primary, .nav-cta, .primary, .primary-button, .confirmation-primary, .btn.primary),
.yukan-access .login-form button {
  background: #40cbe8;
  border: 1px solid #67d9f0;
  border-radius: 7px;
  color: #062537;
  font-weight: 650;
  text-shadow: none;
  box-shadow: none;
}
.yukan-theme :is(.btn-primary, .nav-cta, .primary, .primary-button, .confirmation-primary, .btn.primary):hover,
.yukan-access .login-form button:hover { background: #7ae2f5; box-shadow: none; transform: none; }
.yukan-theme :is(.btn-secondary, .confirmation-secondary) { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; box-shadow: none; }
.yukan-theme :is(.eyebrow, .label, .list-label) { color: var(--muted); }
.yukan-theme :is(.brand, .journal-brand-link, .yukan-approved-logo) { background: transparent; box-shadow: none; }

/* Public and account pages use the same compact brand bar as the desk. */
:is(.yukan-home, .yukan-access)::before,
:is(.yukan-home, .yukan-access)::after { display: none; }
:is(.yukan-home, .yukan-access) .site-header {
  position: relative;
  top: auto;
  margin: 0;
  width: 100%;
  min-height: 66px;
  padding: 10px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}
:is(.yukan-home, .yukan-access) .site-header::before { display: none; }
:is(.yukan-home, .yukan-access) .site-header :is(.logo, .yukan-approved-logo) {
  display: flex; width: 190px; max-width: 48vw; flex-shrink: 0; padding: 0; margin: 0; line-height: 0;
}
:is(.yukan-home, .yukan-access) .site-header img.yukan-brand-image { width: 100%; height: auto; display: block; }
.yukan-home .site-nav { display: flex; justify-content: center; flex: 1; gap: 22px; }
.yukan-home .site-nav a { font-size: 14px; color: var(--muted); }
.yukan-home .site-nav a:hover { color: var(--text); }
.yukan-home .nav-cta { padding: 9px 15px; white-space: nowrap; font-size: 14px; text-decoration: none; }
.yukan-home .market-strip { background: var(--panel2); border-bottom: 1px solid var(--line); color: var(--muted); }
.yukan-home .market-track { font-size: 12px; }
.yukan-home .yukan-hero { min-height: auto; padding: 64px 28px 56px !important; gap: 40px !important; max-width: 1512px; margin: auto; grid-template-columns: 1fr 1fr !important; }
.yukan-home .yukan-hero .hero-title { font-size: clamp(38px, 4.4vw, 64px); line-height: 1.06; letter-spacing: -.045em; margin: 14px 0 24px; }
.yukan-home .hero-title span { color: var(--cyan); text-shadow: none; }
.yukan-home .hero-description { color: var(--muted); font-size: 17px; line-height: 1.7; }
.yukan-home .hero-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; }
.yukan-home .hero-actions .btn { padding: 12px 18px; border-radius: 7px; width: auto; flex: 0 1 auto; font-size: 15px; }
.yukan-home .hero-dashboard { opacity: 1; transform: none; animation: none; padding: 0; box-shadow: none; background: none; }
.yukan-home .hero-dashboard::before { display: none; }
.yukan-home :is(.dashboard-top > div, .chart-panel, .signal-grid > div, .signal-card, .pricing-grid > article, .hero-stats > div) {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: none;
}
.yukan-home :is(.signal-card p, .section-heading p, .preview-note, .site-footer .risk) { color: var(--muted); }
.yukan-home .chart-panel { padding: 20px; }
.yukan-home .chart-line { stroke: var(--cyan); }
.yukan-home :is(.features-section, .pricing-section, .final-cta) { background: transparent; }
.yukan-home .pricing-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
.yukan-home .site-footer { background: var(--panel2); border-top: 1px solid var(--line); }

.yukan-access .login-page { min-height: calc(100dvh - 67px); display: flex; justify-content: center; align-items: flex-start; padding: 40px 20px; }
.yukan-access .login-card { width: 100%; max-width: 520px; padding: 32px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: none; }
.yukan-access .login-card :is(h1, .registration-heading h1) { font-size: 32px; line-height: 1.15; letter-spacing: -.6px; }
.yukan-access .login-card p { color: var(--muted); font-size: 16px; line-height: 1.6; margin-bottom: 24px; }
.yukan-access :is(.login-form input, .password-form input, .confirmation-error input) { border: 1px solid var(--line); background: #0a1622; border-radius: 7px; color: var(--text); font-size: 16px; min-height: 48px; padding: 12px 14px; }
.yukan-access input::placeholder { color: var(--muted); opacity: 1; }
.yukan-access .login-form button { padding: 12px 18px; min-height: 48px; font-size: 16px; }
.yukan-access :is(.password-link, .login-help a, .registration-return a, .login-card a) { color: var(--cyan); }
.yukan-access :is(.confirmation-steps, .confirmation-status:not(:empty)) { background: #132939; border-color: var(--line); border-radius: 8px; }
.yukan-access .confirmation-icon { border-radius: 10px; }
.yukan-access .confirmation-primary { min-height: 48px; border-radius: 7px; }

/* Journal surfaces, controls and typography match the research workspace. */
.yukan-journal .wrap { max-width: 1800px; padding: 0 18px; }
.yukan-journal .journal-header { min-height: 66px; padding: 10px 0; margin-bottom: 20px; border-color: var(--line); }
.yukan-journal .journal-header .journal-logo { width: 190px; }
.yukan-journal .journal-dashboard-link { border: 0; padding: 9px 12px; font-size: 14px; color: var(--muted); }
.yukan-journal .journal-header #journal-user { font-size: 13px; color: var(--muted); }
.yukan-journal :is(.card, .panel, .filterbar, .setup, .session, .insight) { background: var(--panel); border-color: var(--line); border-radius: 10px; box-shadow: none; }
.yukan-journal :is(.btn, .nav button) { background: transparent; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: 14px; padding: 9px 13px; }
.yukan-journal .nav button.active { background: #17354a; border-color: #365a71; color: #bff0fb; }
.yukan-journal .btn.primary { background: #40cbe8; border-color: #67d9f0; color: #062537; }
.yukan-journal .btn.danger { background: #42212e; border-color: #783c50; color: #ffbdc9; }
.yukan-journal .muted, .yukan-journal .foot, .yukan-journal .empty { color: var(--muted); font-size: 13px; }
.yukan-journal :is(.label, .field label, th) { color: var(--muted); font-size: 11px; }
.yukan-journal :is(.field input, .field select, .field textarea, .toolbar input, .toolbar select, .filterbar input, .filterbar select) { background: #0a1622; border-color: var(--line); color: var(--text); border-radius: 7px; font-size: 14px; }
.yukan-journal :is(.day:not(.win):not(.loss), .donutinside, .weekly-mini) { background: var(--panel2); border-color: var(--line); }
.yukan-journal .blue { color: var(--cyan); }
.yukan-journal .green { color: var(--green); }
.yukan-journal .red { color: var(--red); }
.yukan-journal .v45-chart text { font-family: var(--yukan-font); }

/* The showcase shares the desk palette and brand proportions. */
.yukan-theme #upgrade-dialog.showcase { background: radial-gradient(ellipse at 52% -30%, #183249 0, transparent 52%), var(--bg); color: var(--text); font-family: var(--yukan-font); }
.yukan-theme .showcase-nav { min-height: 66px; padding-top: 10px; padding-bottom: 10px; background: #080e17f5; border-color: var(--line); }
.yukan-theme .showcase-nav .brand { width: 190px; }
.yukan-theme .showcase .tour-hero h2 span { color: var(--cyan); }
.yukan-theme :is(.walkthrough, .demo-scanner, .demo-setup, .demo-main) { background: var(--panel); border-color: var(--line); border-radius: 10px; }
.yukan-theme :is(.demo-topline, .demo-caption, .demo-context) { background: #132939; border-color: var(--line); }
.yukan-theme .bull { color: var(--green); }
.yukan-theme .bear { color: var(--red); }
.yukan-theme .neutral { color: var(--gray); }
/* Showcase uses the same full-width workspace and surface hierarchy as the desk. */
.yukan-theme .showcase-content { max-width: 1800px; padding: 0 18px; }
.yukan-theme .showcase-nav { padding-left: max(18px,calc((100vw - 1800px)/2 + 18px)); padding-right: max(18px,calc((100vw - 1800px)/2 + 18px)); }
.yukan-theme .showcase .tour-hero { padding: 20px 0; grid-template-columns: 1fr 1fr; }
.yukan-theme .showcase .tour-hero h2 { font-size: 30px; letter-spacing: -.6px; }
.yukan-theme .walkthrough { box-shadow: none; }
.yukan-theme .demo-workspace { grid-template-columns: 200px minmax(0,1fr) 236px; padding: 12px; gap: 12px; }
.yukan-theme :is(.demo-topline, .demo-caption, .demo-context, .demo-timeframes) { background: var(--panel2); border-color: var(--line); }
.yukan-theme .demo-caption { border-top: 1px solid var(--line); }
.yukan-theme .demo-rr { background: #17354a; }
.yukan-theme :is(.tool-tour-grid article, .tour-final) { background: var(--panel); border-color: var(--line); border-radius: 10px; box-shadow: none; }
.yukan-theme :is(.showcase .section-intro h2, .tour-final h2) { font-size: 28px; }
@media (max-width: 1050px) {
  .yukan-theme .demo-workspace { grid-template-columns: 160px minmax(0,1fr) 180px; }
}
@media (max-width: 760px) {
  .yukan-theme .showcase-content { padding: 0 14px; }
  .yukan-theme .showcase-nav { padding-left: 14px; padding-right: 14px; }
  .yukan-theme .showcase .tour-hero { grid-template-columns: 1fr; }
  .yukan-theme .showcase .tour-hero h2 { font-size: 28px; }
  .yukan-theme .demo-workspace { grid-template-columns: 1fr 1fr; padding: 10px; gap: 10px; }
}
@media (max-width: 900px) {
  .yukan-home .site-header { flex-wrap: wrap; gap: 12px; }
  .yukan-home .site-nav { gap: 14px; }
  .yukan-home .yukan-hero { gap: 28px; }
  .yukan-home .pricing-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 650px) {
  :is(.yukan-home, .yukan-access) .site-header { padding: 10px 18px !important; }
  .yukan-home .site-nav { flex-basis: 100%; flex-wrap: wrap; }
  .yukan-home .nav-cta { margin-left: auto; }
  .yukan-home .yukan-hero { grid-template-columns: 1fr !important; padding: 32px 18px !important; }
  .yukan-home .yukan-hero .hero-title { font-size: 38px !important; line-height: 1.08 !important; }
  .yukan-home .pricing-grid { grid-template-columns: 1fr !important; }
  .yukan-home .hero-dashboard { width: 100%; }
  .yukan-access .login-page { padding: 24px 14px; }
  .yukan-access .login-card { padding: 24px 20px; }
  .yukan-journal .wrap { padding: 0 14px; }
  .yukan-journal .journal-header .journal-logo { width: 190px; }
  .yukan-theme .showcase-nav { gap: 12px; flex-wrap: wrap; }
  .yukan-theme .showcase-nav .brand { width: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .yukan-home .hero-dashboard, .yukan-home .market-track { animation: none; }
}