/* Production visual polish: hierarchy, rhythm and Telegram-native surfaces. */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:22px;
  --shadow-soft:0 8px 24px color-mix(in srgb,var(--text) 7%,transparent);
  --shadow-float:0 18px 44px color-mix(in srgb,var(--text) 12%,transparent);
}

html{background:var(--bg)}
body{min-height:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.prototype-root{padding:0;background:var(--bg)}
.phone{max-width:430px;border:0;border-radius:0;box-shadow:none;background:var(--panel)}
.screen{background:var(--panel)}

.header{
  position:sticky;
  top:0;
  z-index:40;
  min-height:66px;
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border-bottom-color:color-mix(in srgb,var(--border) 55%,transparent)!important;
}
.header>div>div:first-child{font-size:15px;letter-spacing:-.01em}
#header-subtitle{font-size:12px;line-height:1.25;margin-top:2px}
#new-attempt{min-height:38px;padding:8px 12px!important;border-radius:12px;font-size:14px;font-weight:650;background:var(--accent-soft)}

.screen-body{padding-top:20px;padding-bottom:28px}
[data-screen]{max-width:100%}
[data-screen].stack{gap:16px}
.title{font-size:22px!important;line-height:1.18;letter-spacing:-.025em;font-weight:760}
.subtitle{margin-top:6px;line-height:1.48;font-size:14px;max-width:38ch}
.small{line-height:1.45}

.btn{
  min-height:48px;
  border-radius:14px;
  padding:13px 15px;
  font-weight:560;
  line-height:1.3;
}
.btn.primary{min-height:52px;font-weight:700;box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 17%,transparent)}
.btn:not(.primary):not(.tertiary){background:color-mix(in srgb,var(--panel) 96%,var(--accent-soft));}
.btn.tertiary{min-height:40px;font-weight:560;text-decoration-thickness:1px;text-underline-offset:3px}

/* Home */
[data-screen="check-empty"]{padding-top:4px;gap:18px!important}
[data-screen="check-empty"]>.btn.primary{min-height:72px;padding:16px 17px;border-radius:18px;text-align:left}
[data-screen="check-empty"]>.btn.primary b{font-size:16px}
[data-screen="check-empty"]>.grid-2{gap:10px}
[data-screen="check-empty"]>.grid-2 .btn{min-height:78px;padding:14px;border-radius:16px}
[data-screen="check-empty"]>.grid-2 .btn b{font-size:15px}
[data-screen="check-empty"]>.callout{margin-top:2px}

.callout{border-radius:16px;padding:15px;background:color-mix(in srgb,var(--accent-soft) 82%,var(--panel));border:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.badge{padding:6px 10px;border-radius:999px;font-size:12px;letter-spacing:.01em;background:color-mix(in srgb,var(--accent-soft) 88%,var(--panel))}
.math-box{border-radius:16px;padding:15px;background:color-mix(in srgb,var(--card) 90%,var(--panel));line-height:1.55}

/* Error and result */
[data-screen="error"] #error-fragment{padding:17px;border-left-width:4px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--border) 18%,transparent)}
[data-screen="error"] #fix-error{margin-top:2px}
[data-screen="error"] #show-hint,[data-screen="error"] #ask-about-error{min-height:48px}
[data-screen="error"] #show-full-solution{margin-top:-4px}
#hint-box,#solution-box,#no-solution-hint-box{margin-top:2px}
[data-screen="correct"] #correct-final-answer{padding:18px;font-size:17px;font-weight:650}
[data-screen="correct"] .title{font-size:24px!important}
[data-screen="failed"] .badge,[data-screen="unsupported"] .badge{margin-bottom:2px}

/* Text / correction */
[data-screen="text-input"] label,[data-screen="correction"] label{gap:7px}
input,select,textarea{min-height:48px;border-radius:13px;padding:12px 13px;line-height:1.45}
textarea{padding-top:11px}
#text-condition{min-height:92px}
#correction-text-input{border-radius:13px!important}

/* Tutor */
[data-screen="tutor"]{min-height:calc(var(--app-viewport-height) - 150px);grid-template-rows:auto auto minmax(96px,1fr) auto auto;align-content:stretch}
#tutor-context{font-size:13px;padding:12px 14px}
#chat-messages{align-content:end;gap:9px!important;padding:4px 0 2px;min-height:96px}
.chat-row .bubble{max-width:86%;padding:11px 13px;border-radius:18px;line-height:1.48;border-color:color-mix(in srgb,var(--border) 40%,transparent)!important;box-shadow:none}
.chat-row.user .bubble{border-bottom-right-radius:6px;background:var(--accent);color:var(--accent-text);border-color:var(--accent)!important}
.chat-row.assistant .bubble{border-bottom-left-radius:6px;background:color-mix(in srgb,var(--accent-soft) 86%,var(--panel))}
#tutor-input{min-height:76px;resize:none;border-radius:16px;background:color-mix(in srgb,var(--panel) 96%,var(--accent-soft))}
#send-tutor{min-height:50px}

/* History */
#history-list{gap:10px!important}
.history-item{border-radius:17px;padding:0!important;overflow:hidden;background:color-mix(in srgb,var(--panel) 97%,var(--accent-soft));box-shadow:0 1px 0 color-mix(in srgb,var(--text) 3%,transparent)}
.history-main{padding:15px 48px 15px 15px!important;min-height:78px}
.history-title{font-size:15px;line-height:1.35}
.history-sub{margin-top:4px!important;font-size:13px}
.history-date{margin-top:8px!important;font-size:11px!important}
.history-menu{top:10px!important;right:9px!important;width:38px!important;height:38px!important}

/* Navigation */
.bottom-nav{
  z-index:45;
  gap:5px;
  border-top-color:color-mix(in srgb,var(--border) 52%,transparent)!important;
  background:color-mix(in srgb,var(--panel) 94%,transparent)!important;
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
}
.bottom-nav button{min-height:48px!important;border-radius:12px;font-size:12px;font-weight:560;letter-spacing:.005em}
.bottom-nav button[data-active="true"]{font-weight:720;background:color-mix(in srgb,var(--accent-soft) 88%,var(--panel))}

/* Desktop/web preview without changing Telegram mobile geometry. */
@media(min-width:521px){
  .prototype-root{padding:24px 0}
  .phone{border:1px solid color-mix(in srgb,var(--border) 60%,transparent);border-radius:26px;overflow:hidden;box-shadow:var(--shadow-float);min-height:min(900px,var(--app-viewport-height))}
  .screen{min-height:min(900px,var(--app-viewport-height))}
}

@media(max-width:380px){
  .screen-body{padding-left:14px;padding-right:14px}
  .title{font-size:21px!important}
  [data-screen="check-empty"]>.grid-2{grid-template-columns:1fr}
  [data-screen="check-empty"]>.grid-2 .btn{min-height:64px}
}

@media(prefers-reduced-motion:reduce){
  .btn{transform:none!important}
}