:root { font-family: system-ui, "Microsoft YaHei", sans-serif; color: #292727; background: #f7f7f5; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #fff 0, #f7f7f5 58%); }
.shell { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.welcome-card { width: min(100%, 430px); background: #fff; border-radius: 22px; padding: 34px 24px 28px; box-shadow: 0 12px 40px rgb(50 35 35 / 8%); }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; color: #fff; background: #e98589; font-size: 26px; }
.eyebrow { margin: 20px 0 8px; color: #b66d72; font-size: 11px; letter-spacing: .16em; }
h1 { margin: 0; font-size: 28px; letter-spacing: .02em; }
.intro { color: #8c8787; margin: 10px 0 28px; }
.tabs { display: flex; gap: 8px; padding: 4px; margin-bottom: 24px; border-radius: 14px; background: #f7f1f1; }
.tab { flex: 1; border: 0; border-radius: 11px; padding: 11px 8px; color: #8d8585; background: transparent; cursor: pointer; }
.tab.is-active { color: #b65c63; background: #fff; box-shadow: 0 3px 12px rgb(80 40 40 / 8%); }
label { display: block; margin: 16px 0 8px; font-size: 13px; color: #645d5d; }
input { width: 100%; border: 1px solid #eee5e5; border-radius: 12px; padding: 13px 14px; font: inherit; outline: none; background: #fff; }
input:focus { border-color: #df9295; box-shadow: 0 0 0 3px #fbe8e8; }
.form-message { min-height: 22px; margin: 12px 0 8px; font-size: 13px; }
.form-message.error { color: #c55e65; }
.primary-button { width: 100%; border: 0; border-radius: 13px; padding: 14px; color: #fff; background: #df7d83; font-size: 16px; cursor: pointer; }
.primary-button:disabled { opacity: .65; cursor: wait; }
.mode-switch { display: flex; gap: 18px; margin: 0 0 16px; }
.mode-link { border: 0; padding: 0 0 6px; color: #a79b9b; background: transparent; border-bottom: 2px solid transparent; cursor: pointer; font: inherit; }
.mode-link.is-active { color: #bd6a70; border-color: #df7d83; }
.forgot-entry { text-align: right; margin: -2px 0 2px; }
.text-button { border: 0; padding: 4px 0; color: #b7656b; background: transparent; cursor: pointer; font: inherit; font-size: 13px; }
.forgot-dialog { width: min(92vw, 430px); border: 0; padding: 0; border-radius: 22px; background: transparent; }
.forgot-dialog::backdrop { background: rgb(45 30 30 / 28%); backdrop-filter: blur(3px); }
.forgot-card { position: relative; padding: 30px 24px 24px; border-radius: 22px; background: #fff; box-shadow: 0 18px 60px rgb(60 35 35 / 18%); }
.forgot-card h2 { margin: 0 0 8px; font-size: 24px; }
.dialog-help { margin: 0 0 18px; color: #8c8787; line-height: 1.7; font-size: 13px; }
.dialog-close { position: absolute; top: 14px; right: 17px; border: 0; color: #9a8e8e; background: transparent; font-size: 26px; cursor: pointer; }
.form-message.success { color: #3d9a68; }
.hidden-field { display: none; }
.hidden-field.is-visible { display: block; }
@media (min-width: 700px) { .welcome-card { padding: 42px 40px 36px; } }

/* Reference palette: mist blue, slate navy, and soft white. Interactive controls share one tactile visual language. */
:root { --ink-blue:#203553; --deep-blue:#2f4f7d; --blue:#7894c1; --mist:#eef3fb; --line-blue:#d8e1f0; --soft-blue:#e7eef9; }
body { color:var(--ink-blue); background:radial-gradient(circle at top,#fff 0,#f1f4fa 60%,#e8eef7 100%); }
button:not(:disabled), a.primary-button, a.outline-button, .choice, .chat-option, .secondary-button, .logout-button, .range-button, .records-tabs button, .student-actions button, .icon-button { transition:transform .16s ease,box-shadow .16s ease,background .16s ease; box-shadow:0 5px 0 rgb(36 58 91 / 13%),0 9px 18px rgb(50 75 115 / 12%),inset 0 1px 0 rgb(255 255 255 / 72%); }
button:not(:disabled):hover, a.primary-button:hover, a.outline-button:hover, .choice:hover, .chat-option:hover, .secondary-button:hover, .logout-button:hover, .range-button:hover, .records-tabs button:hover, .student-actions button:hover, .icon-button:hover { transform:translateY(-2px); box-shadow:0 7px 0 rgb(36 58 91 / 13%),0 13px 22px rgb(50 75 115 / 16%),inset 0 1px 0 rgb(255 255 255 / 78%); }
button:not(:disabled):active, a.primary-button:active, a.outline-button:active, .choice:active, .chat-option:active, .secondary-button:active, .logout-button:active, .range-button:active, .records-tabs button:active, .student-actions button:active, .icon-button:active { transform:translateY(3px); box-shadow:0 2px 0 rgb(36 58 91 / 13%),0 4px 8px rgb(50 75 115 / 12%),inset 0 1px 2px rgb(30 50 80 / 12%); }
.brand-mark, .primary-button, .chat-actions .primary-button, .student-actions button.primary { background:linear-gradient(145deg,#8da8d2,#5578ad); }
.primary-button { box-shadow:0 5px 0 #3f5e8b,0 10px 20px rgb(47 79 125 / 22%),inset 0 1px 0 rgb(255 255 255 / 45%); }
.primary-button:hover { box-shadow:0 7px 0 #3f5e8b,0 14px 24px rgb(47 79 125 / 25%),inset 0 1px 0 rgb(255 255 255 / 50%); }
.tab.is-active, .choice.selected, .chat-option.selected, .records-tabs button.is-active { color:var(--deep-blue); border-color:#91a9cf; background:linear-gradient(#f8fbff,#e5edf9); }
input:focus { border-color:#7894c1; box-shadow:0 0 0 3px #dfe8f6; }