:root{
  --bg:            #0b1226;
  --bg-2:          #0e1730;
  --card:          #10192f;
  --card-2:        #142239;
  --line:          rgba(148,180,255,0.14);
  --ink:           #cfe0ff;
  --text:          #e9eefb;
  --muted:         #7f8db3;
  --accent:        #55c1ff;
  --accent-dim:    rgba(85,193,255,0.14);
  --accent-2:      #ffb454;
  --accent-2-dim:  rgba(255,180,84,0.16);
  --coral:         #ff7a8a;
  --radius:         14px;
  --radius-sm:      9px;
  --shadow:         0 20px 50px -20px rgba(0,0,0,0.75);
  --font-display:  'Sora', 'IBM Plex Sans', Arial, sans-serif;
  --font-body:     'IBM Plex Sans', Arial, sans-serif;
  --font-mono:     'IBM Plex Mono', 'Courier New', monospace;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); -webkit-font-smoothing:antialiased;
  position:relative; min-height:100vh; padding-bottom:40px;
}

.blueprint-bg{ position:fixed; inset:0; z-index:-1; background:linear-gradient(var(--bg), var(--bg-2)); }
.blueprint-bg::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(148,180,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,180,255,0.06) 1px, transparent 1px);
  background-size:9px 9px;
}
.blueprint-bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(148,180,255,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,180,255,0.12) 1px, transparent 1px);
  background-size:63px 63px;
  mask-image:radial-gradient(circle at 50% 0%, black, transparent 72%);
}

.topbar{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px; max-width:960px; margin:0 auto; gap:10px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.head-actions{ display:flex; align-items:center; gap:8px; flex:none; }
.compass{ width:38px; height:38px; flex:none; }
.logo-badge{ width:42px; height:42px; }

.lang-switch{ display:flex; gap:3px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:3px; }
.lang-btn{
  font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:0.4px; color:var(--muted);
  background:transparent; border:none; padding:6px 9px; border-radius:999px; cursor:pointer; min-width:auto;
}
.lang-btn.is-active{ color:#041626; background:var(--accent); }

.subject-switch{
  max-width:960px; margin:2px auto 0; padding:0 14px 8px; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
}
.subject-switch::-webkit-scrollbar{ display:none; }
.subject-btn{
  flex:1 1 auto; font-family:var(--font-display); font-size:13.5px; font-weight:700; color:var(--muted);
  background:var(--card-2); border:1px solid var(--line); padding:11px 14px; border-radius:var(--radius-sm); cursor:pointer; min-width:auto;
  letter-spacing:0.3px;
}
.subject-btn.is-active{ color:#041626; background:var(--accent-2); border-color:var(--accent-2); }

.kb-toolbar{ margin:10px 0 2px; }
.letter-keys{ background:#0c1428; border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px; margin:8px 0; }
.letter-lang-switch{ display:flex; gap:6px; margin-bottom:8px; }
.lkey-lang{
  font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--muted); background:var(--card);
  border:1px solid var(--line); padding:6px 12px; border-radius:999px; cursor:pointer; min-width:auto; flex:none;
}
.lkey-lang.is-active{ color:#041626; background:var(--accent-2); border-color:var(--accent-2); }
.letter-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; }
.lkey{
  font-family:var(--font-body); font-size:14px; font-weight:600; padding:9px 2px; background:#0c1428;
  color:var(--text); border:1px solid var(--line); border-radius:8px; min-width:0;
}
.lkey:active{ border-color:var(--accent); transform:translateY(1px); }

.foot-brand{ margin:0 0 10px; color:var(--ink); font-size:12.5px; }
.contact-row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.contact-chip{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:12px; font-weight:600;
  color:var(--accent); background:var(--accent-dim); border:1px solid rgba(85,193,255,0.3); padding:7px 12px;
  border-radius:999px; text-decoration:none;
}
.contact-chip:hover{ border-color:var(--accent); }

button.secondary{
  background:transparent; color:var(--accent); border:1px solid rgba(85,193,255,0.4);
}
.divider{ height:1px; background:var(--line); margin:16px 0; }
code{ font-family:var(--font-mono); background:rgba(255,255,255,0.06); padding:1px 5px; border-radius:4px; }
.compass .arc{ animation:draw 3.4s ease-in-out infinite; transform-origin:20px 22px; }
@keyframes draw{
  0%{ stroke-dashoffset:0; opacity:0.5; }
  50%{ stroke-dashoffset:40; opacity:1; }
  100%{ stroke-dashoffset:0; opacity:0.5; }
}
.brand-text h1{ font-family:var(--font-display); font-size:20px; font-weight:700; margin:0; letter-spacing:0.5px; }
.brand-text p{ margin:1px 0 0; font-size:12.5px; color:var(--muted); }

.icon-btn{
  width:38px; height:38px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); color:var(--text); display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex:none;
}
.icon-btn:active{ transform:scale(0.94); }

.result-dock{
  position:sticky; top:0; z-index:20; max-width:960px; margin:0 auto; padding:10px 18px 14px;
  backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(11,18,38,0.94), rgba(11,18,38,0.86) 70%, rgba(11,18,38,0));
}
.result-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.result-tag{
  font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--accent); background:var(--accent-dim); border:1px solid rgba(85,193,255,0.35);
  padding:4px 9px; border-radius:999px;
}
.result-actions{ display:flex; gap:6px; }
.ghost-btn{ border:1px solid var(--line); background:var(--card); color:var(--muted); border-radius:var(--radius-sm); padding:6px 8px; cursor:pointer; display:flex; align-items:center; }
.ghost-btn:hover{ color:var(--text); border-color:rgba(255,255,255,0.2); }
.ghost-btn.small{ font-size:12px; padding:5px 10px; }

#result{
  margin:0; font-family:var(--font-mono); font-size:14px; line-height:1.6;
  color:#dbe8ff; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:14px 16px; min-height:64px; max-height:220px; overflow:auto;
  white-space:pre-wrap; box-shadow:var(--shadow);
}

.history-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(340px, 88vw);
  background:var(--bg-2); border-left:1px solid var(--line); z-index:60; padding:20px 18px;
  transform:translateX(100%); transition:transform 0.28s ease; overflow-y:auto;
}
.history-drawer.is-open{ transform:translateX(0); }
.history-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.history-head h2{ font-family:var(--font-display); font-size:16px; margin:0; }
.history-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.history-item{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; cursor:pointer; }
.history-item:hover{ border-color:rgba(85,193,255,0.4); }
.history-item .h-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--accent-2); }
.history-item .h-time{ float:right; color:var(--muted); font-size:10.5px; font-family:var(--font-mono); }
.history-item .h-snippet{ margin-top:4px; font-size:12.5px; color:var(--text); opacity:0.85; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.scrim{ position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:50; opacity:0; pointer-events:none; transition:opacity 0.25s ease; }
.scrim.is-open{ opacity:1; pointer-events:auto; }

.tabs{
  max-width:960px; margin:2px auto 0; padding:2px 14px 10px; display:flex; gap:8px; overflow-x:auto;
  scrollbar-width:none; position:sticky; top:96px; z-index:15;
  background:linear-gradient(180deg, rgba(11,18,38,0.6), transparent);
}
.tabs::-webkit-scrollbar{ display:none; }
.tab-btn{
  flex:none; font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--muted);
  background:var(--card); border:1px solid var(--line); padding:9px 14px; border-radius:999px; cursor:pointer; white-space:nowrap;
}
.tab-btn.is-active{ color:#041626; background:var(--accent); border-color:var(--accent); }

.stage{ max-width:960px; margin:0 auto; padding:6px 18px 10px; }
.panel{ display:none; animation:fadeIn 0.25s ease; }
.panel.is-active{ display:block; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none; } }

.panel-card{
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:16px;
  box-shadow:var(--shadow); position:relative;
}

.panel-card::before, .panel-card::after{
  content:""; position:absolute; width:10px; height:10px; border:1px solid rgba(85,193,255,0.4);
}
.panel-card::before{ top:6px; left:6px; border-right:none; border-bottom:none; }
.panel-card::after{ bottom:6px; right:6px; border-left:none; border-top:none; }

.panel-card h2{
  font-family:var(--font-display); font-size:16.5px; font-weight:600; margin:0 0 14px; color:var(--text);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.tag-mono{
  font-family:var(--font-mono); font-size:11px; color:var(--accent-2);
  background:var(--accent-2-dim); border:1px solid rgba(255,180,84,0.35); padding:2px 7px; border-radius:6px;
}

.field{ margin-bottom:12px; }
.field label{ display:block; font-size:11.5px; color:var(--muted); margin-bottom:5px; font-family:var(--font-mono); letter-spacing:0.3px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.field-grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }

input, select, textarea{
  width:100%; background:#0c1428; color:var(--text); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:11px 12px; font-size:14.5px; font-family:var(--font-body); transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
select{ appearance:none; background-image:
  linear-gradient(45deg, transparent 50%, var(--muted) 50%),
  linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }

.btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
button{
  font-family:var(--font-body); font-weight:600; font-size:14px; padding:11px 16px; border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer; background:var(--accent); color:#041626; flex:1 1 auto; min-width:150px;
}
button:active{ transform:translateY(1px); }
#solveProblem{ background:var(--accent-2); color:#2b1300; min-width:100%; }
.rand-btn{ background:var(--card-2); color:var(--accent-2); border:1px solid rgba(255,180,84,0.35); flex:0 0 auto; min-width:auto; }
.rand-btn:hover{ border-color:var(--accent-2); }
.rand-btn:active{ transform:translateY(1px); }

.mathkeys{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; margin:12px 0 4px;
}
.mkey{
  flex:none; min-width:0; width:100%; padding:12px 4px; font-family:var(--font-mono); font-size:15px; font-weight:600;
  background:#0c1428; color:var(--text); border:1px solid var(--line); border-radius:var(--radius-sm);
}
.mkey:active{ transform:translateY(1px); border-color:var(--accent); }
.mkey-accent{ background:var(--accent-2-dim); color:var(--accent-2); border-color:rgba(255,180,84,0.4); font-family:var(--font-body); font-size:12.5px; }

.small{ font-size:12.5px; }
.muted{ color:var(--muted); }
.prob-fields[hidden]{ display:none; }

.foot{ text-align:center; color:var(--muted); font-size:12px; font-family:var(--font-mono); padding:24px 18px 6px; letter-spacing:0.4px; }

@media (min-width:720px){
  #panel-geometry{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
  #panel-geometry.is-active{ display:grid; }
  #panel-geometry .panel-card{ margin-bottom:0; }
  #panel-stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
  #panel-stats.is-active{ display:grid; }
  #panel-stats .panel-card{ margin-bottom:0; }
  #panel-mech{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
  #panel-mech.is-active{ display:grid; }
  #panel-mech .panel-card{ margin-bottom:0; }
  #panel-electric{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
  #panel-electric.is-active{ display:grid; }
  #panel-electric .panel-card{ margin-bottom:0; }
  #panel-heat{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
  #panel-heat.is-active{ display:grid; }
  #panel-heat .panel-card{ margin-bottom:0; }
  #panel-pressure{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
  #panel-pressure.is-active{ display:grid; }
  #panel-pressure .panel-card{ margin-bottom:0; }
  #panel-phgas{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
  #panel-phgas.is-active{ display:grid; }
  #panel-phgas .panel-card{ margin-bottom:0; }
}
@media (min-width:960px){ .tabs{ top:104px; } }