:root { color: #163642; background: #f2f6f7; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.login-layout { display: grid; min-height: 100dvh; grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); }
.brand-panel { display: flex; flex-direction: column; justify-content: center; padding: 10vw; background: radial-gradient(circle at 18% 15%, #137590 0, #0b4f6c 42%, #08374d 100%); color: #fff; }
.brand-mark { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(255,255,255,.42); border-radius: 14px; color: #5bd2c5; font-size: 1.5rem; font-weight: 800; }
.eyebrow { margin: 1.8rem 0 .55rem; color: #0b7189; font-size: .72rem; font-weight: 800; letter-spacing: .15em; }
.brand-panel .eyebrow { color: #8ee8df; }
h1, h2 { letter-spacing: -.045em; }
h1 { max-width: 680px; margin: 0; font-size: clamp(2.55rem, 5.6vw, 5rem); line-height: 1.02; }
.brand-panel > p:not(.eyebrow) { max-width: 570px; color: #cce8ed; font-size: 1.12rem; line-height: 1.6; }
.benefit-list { margin: 1.25rem 0 0; padding: 0; list-style: none; color: #e4f5f4; line-height: 1.85; }
.benefit-list li::before { margin-right: .7rem; color: #5bd2c5; content: "✓"; font-weight: 800; }
.login-card { align-self: center; width: min(100% - 48px, 430px); margin: 0 auto; padding: 2rem 0; }
.akademi-logo { display: block; width: min(100%, 270px); height: auto; margin: 0 0 1.4rem; }
.kilavuz-logo { display: block; width: 132px; height: auto; margin: 2rem 0 0; }
.login-card .eyebrow { margin: 0 0 .55rem; }
.login-card h2 { margin: 0; font-size: 2rem; }
.muted, .form-note, .install-help { color: #617b84; line-height: 1.5; }
.login-card form { display: grid; gap: .55rem; margin-top: 2rem; }
label { margin-top: .6rem; color: #264a56; font-size: .86rem; font-weight: 700; }
input, select { width: 100%; min-height: 48px; border: 1px solid #bbd0d6; border-radius: 10px; padding: 0 .85rem; color: #163642; background: #fff; outline-color: #0b7189; }
.primary-button { min-height: 48px; margin-top: 1.3rem; border: 0; border-radius: 11px; padding: 0 1.15rem; background: #0b4f6c; color: #fff; font-weight: 800; transition: background .15s ease, transform .15s ease; }
.primary-button:hover { background: #083e55; transform: translateY(-1px); }
.form-note { margin: 1rem 0; font-size: .84rem; }
.link-button { border: 0; padding: .2rem 0; color: #0b7189; background: transparent; font-weight: 750; text-decoration: underline; }
.install-help { margin: .75rem 0 0; font-size: .84rem; }
.dashboard { min-height: 100dvh; background: #f2f6f7; }
.topbar { display: flex; align-items: center; justify-content: space-between; max-width: 1100px; margin: 0 auto; padding: 1.1rem 1.5rem; }
.brand-stack { display: flex; align-items: center; gap: 1rem; }.wordmark { display: flex; align-items: center; text-decoration: none; }.wordmark img { display: block; width: 125px; height: auto; }.kilavuz-logo-header { display: block; width: 78px; height: auto; }
.profile-button { display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 50%; color: #fff; background: #0b4f6c; font-weight: 800; }
.dashboard-content { max-width: 1100px; margin: 0 auto; padding: 6vh 1.5rem 4rem; }
.dashboard-content .eyebrow { margin: 0 0 .6rem; }.dashboard-content h1 { max-width: 720px; font-size: clamp(2.4rem, 5vw, 4.2rem); }.lead { max-width: 620px; color: #50717b; font-size: 1.08rem; line-height: 1.6; }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.summary-card, .pilot-banner { border: 1px solid #d5e4e7; border-radius: 16px; background: #fff; }
.summary-card { min-height: 150px; padding: 1.35rem; }.summary-card p { margin: 0 0 1.5rem; color: #617b84; }.summary-card strong { display: block; max-width: 230px; font-size: 1.15rem; line-height: 1.35; }
.pilot-banner { margin-top: 1rem; padding: 1.3rem; background: #e7f4f2; border-color: #b9dfd8; }.pilot-banner h2 { margin: 0 0 .5rem; font-size: 1rem; }.pilot-banner p { max-width: 720px; margin: 0; color: #42646d; line-height: 1.5; }
.manager-shell { display: grid; min-height: 100dvh; grid-template-columns: 248px minmax(0, 1fr); background: #f4f7f8; }
.manager-sidebar { display: flex; position: sticky; top: 0; height: 100dvh; flex-direction: column; padding: 1.6rem 1rem; color: #d9edf0; background: #0b3d52; }
.manager-brand img { display: block; width: 138px; height: auto; padding: .35rem; border-radius: 7px; background: #fff; }.manager-brand span { display: block; margin: .8rem .35rem 1.8rem; color: #8fcbd2; font-size: .78rem; font-weight: 750; }
.manager-sidebar nav { display: grid; gap: .35rem; }.manager-nav-item { border: 0; border-radius: 9px; padding: .72rem .8rem; color: #c9e0e4; background: transparent; text-align: left; font-size: .9rem; font-weight: 700; }.manager-nav-item:hover, .manager-nav-item.active { color: #fff; background: rgba(126, 210, 204, .18); }.manager-sidebar-note { margin-top: auto; padding: 1rem .35rem .2rem; border-top: 1px solid rgba(216, 237, 240, .18); }.manager-sidebar-note img { display: block; width: 90px; height: auto; background: #fff; }.manager-sidebar-note p { margin: .7rem 0 .15rem; font-size: .76rem; }.manager-sidebar-note small { color: #83b6c0; font-size: .7rem; }
.manager-main { width: min(100%, 1320px); margin: 0 auto; padding: 0 2.5rem 3rem; }.manager-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 92px; border-bottom: 1px solid #dbe6e8; }.manager-topbar .eyebrow { margin: 0 0 .25rem; }.manager-school { margin: 0; color: #58727c; font-size: .88rem; }.manager-account { display: flex; align-items: center; gap: 1rem; }.notification-dot { width: 10px; height: 10px; border-radius: 50%; background: #27a89a; box-shadow: 0 0 0 4px #d9f0ec; }
.manager-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding: 2.5rem 0 1.5rem; }.manager-intro h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); }.manager-intro p { max-width: 640px; margin: .8rem 0 0; color: #54707a; line-height: 1.55; }.demo-badge { flex: 0 0 auto; margin-top: .35rem; border: 1px solid #b6d9d5; border-radius: 999px; padding: .45rem .7rem; color: #216d68; background: #e3f3f0; font-size: .75rem; font-weight: 800; }
.manager-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }.manager-metrics article, .manager-card { border: 1px solid #dbe6e8; border-radius: 14px; background: #fff; box-shadow: 0 4px 20px rgba(24, 68, 78, .035); }.manager-metrics article { padding: 1.15rem; }.manager-metrics span { display: block; color: #59747d; font-size: .78rem; font-weight: 750; }.manager-metrics strong { display: block; margin: .55rem 0 .2rem; color: #123f50; font-size: 1.85rem; }.manager-metrics small { color: #6c858d; font-size: .72rem; line-height: 1.4; }
.manager-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.25rem 0; }.manager-actions button, .outline-button { border: 1px solid #bcd5da; border-radius: 9px; padding: .62rem .8rem; color: #155367; background: #fff; font-size: .82rem; font-weight: 800; }.manager-actions button:hover, .outline-button:hover { border-color: #0b7189; background: #edf8f8; }
.manager-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .9fr); gap: 1rem; }.manager-card { padding: 1.25rem; }.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }.section-heading .eyebrow, .setup-card .eyebrow { margin: 0 0 .3rem; }.section-heading h2, .setup-card h2 { margin: 0; font-size: 1.2rem; }.text-button { border: 0; padding: .2rem 0; color: #0b7189; background: transparent; font-size: .78rem; font-weight: 800; }.review-list { margin-top: .9rem; }.review-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .95rem 0; border-top: 1px solid #e5edef; }.review-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #125166; background: #d9eff0; font-size: .82rem; font-weight: 800; }.review-info strong { color: #183f4e; font-size: .86rem; }.review-info strong span, .review-info p { color: #668088; font-weight: 500; }.review-info p { margin: .25rem 0; font-size: .75rem; }.review-info small { color: #8a5d38; font-size: .7rem; }.outline-button { padding: .48rem .6rem; font-size: .74rem; }
.week-grid { display: grid; gap: .55rem; margin-top: 1rem; }.week-grid div { display: flex; align-items: center; justify-content: space-between; border-radius: 8px; padding: .65rem .7rem; background: #eef6f6; }.week-grid span { color: #3d6b74; font-size: .75rem; font-weight: 750; }.week-grid b { color: #164b5d; font-size: .74rem; }.card-note { margin: 1rem 0 0; color: #637e86; font-size: .75rem; line-height: 1.5; }
.setup-card { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1rem; background: linear-gradient(110deg, #e0f2f1, #f9fcfc); }.setup-card p:not(.eyebrow) { max-width: 650px; margin: .55rem 0 0; color: #54727a; line-height: 1.5; }.setup-card .primary-button { flex: 0 0 auto; margin: 0; }
.student-page-heading { padding: 2.35rem 0 1.4rem; }.student-page-heading h1 { margin: .65rem 0 0; font-size: clamp(2rem, 4vw, 3.35rem); }.student-page-heading p { max-width: 600px; color: #54707a; line-height: 1.55; }.back-link { color: #0b7189; font-size: .85rem; font-weight: 800; text-decoration: none; }.import-card { max-width: 920px; }.import-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }.import-heading .eyebrow { margin: 0 0 .3rem; }.import-heading h2 { margin: 0; font-size: 1.35rem; }.import-heading p { margin: .5rem 0 0; color: #5c777f; line-height: 1.5; }.download-template { flex: 0 0 auto; border-radius: 9px; padding: .7rem .85rem; color: #fff; background: #0b4f6c; font-size: .82rem; font-weight: 800; text-decoration: none; }.download-template:hover { background: #083e55; }.import-steps { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.35rem 0; }.import-steps span { border-radius: 999px; padding: .45rem .7rem .45rem .45rem; color: #41646d; background: #edf5f6; font-size: .76rem; font-weight: 700; }.import-steps b { display: inline-grid; width: 20px; height: 20px; margin-right: .3rem; place-items: center; border-radius: 50%; color: #fff; background: #0b7189; font-size: .7rem; }.file-dropzone { display: grid; gap: .35rem; border: 1.5px dashed #8ab9c3; border-radius: 12px; padding: 1.4rem; color: #315c68; background: #f8fcfc; cursor: pointer; }.file-dropzone:hover { border-color: #0b7189; background: #edf8f8; }.file-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }.file-dropzone strong { color: #164b5d; }.file-dropzone span, .file-dropzone small { color: #637f87; font-size: .82rem; }.file-dropzone small { margin-top: .3rem; font-weight: 750; }.import-security { margin-top: 1rem; border-left: 3px solid #39a79f; padding: .15rem 0 .15rem 1rem; }.import-security strong { color: #164b5d; font-size: .85rem; }.import-security p, .upload-status { margin: .4rem 0 0; color: #59767f; font-size: .82rem; line-height: 1.5; }.import-card .primary-button { margin-bottom: 0; }.import-card .primary-button:disabled { cursor: not-allowed; opacity: .5; transform: none; }.manual-student-card { display: flex; align-items: center; justify-content: space-between; max-width: 920px; gap: 1rem; margin-top: 1rem; }.manual-student-card .eyebrow { margin: 0 0 .3rem; }.manual-student-card h2 { margin: 0; font-size: 1.15rem; }.manual-student-card p { margin: .45rem 0 0; color: #5b767e; font-size: .85rem; }
.student-create-form { max-width: 920px; }.form-section-heading .eyebrow { margin: 0 0 .3rem; }.form-section-heading h2 { margin: 0; font-size: 1.25rem; }.form-section-heading p:not(.eyebrow) { margin: .4rem 0 0; color: #607a82; font-size: .85rem; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; margin-top: 1.15rem; }.form-grid label { display: grid; gap: .45rem; margin: 0; }.form-grid input, .form-grid select { min-height: 44px; }.form-grid input[readonly] { cursor: not-allowed; color: #6c8187; background: #edf3f4; }.field-note { margin: .75rem 0 0; color: #5c767f; font-size: .77rem; line-height: 1.45; }.subject-heading { margin-top: 1.6rem; }.subject-checklist { display: flex; flex-wrap: wrap; gap: .65rem; margin: .9rem 0 0; border: 0; padding: 0; }.subject-checklist legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }.subject-checklist label { display: flex; align-items: center; gap: .4rem; margin: 0; border: 1px solid #cce0e3; border-radius: 9px; padding: .55rem .65rem; color: #315d68; background: #f8fcfc; font-size: .82rem; }.subject-checklist input { width: 16px; min-height: 16px; margin: 0; }.password-policy { margin-top: 1.3rem; border-radius: 10px; padding: 1rem; background: #e7f4f2; }.password-policy strong { color: #174f5e; font-size: .87rem; }.password-policy p { margin: .35rem 0 0; color: #496c74; font-size: .82rem; line-height: 1.5; }.student-create-form .primary-button { margin-bottom: 0; }
@media (max-width: 760px) { .login-layout { grid-template-columns: 1fr; }.brand-panel { min-height: 42dvh; padding: 3rem 1.5rem; }.brand-panel h1 { font-size: clamp(2.4rem, 11vw, 3.7rem); }.benefit-list { display: none; }.login-card { width: min(100% - 40px, 430px); padding: 3rem 0; }.summary-grid { grid-template-columns: 1fr; }.dashboard-content { padding-top: 2.5rem; }.kilavuz-logo-header { width: 64px; }.wordmark img { width: 110px; } }
@media (max-width: 980px) { .manager-shell { grid-template-columns: 1fr; }.manager-sidebar { position: static; height: auto; padding: 1rem; }.manager-brand { display: flex; align-items: center; gap: .7rem; }.manager-brand img { width: 116px; }.manager-brand span { margin: 0; }.manager-sidebar nav { display: flex; overflow-x: auto; margin-top: .9rem; }.manager-nav-item { flex: 0 0 auto; }.manager-sidebar-note { display: none; }.manager-main { padding: 0 1.5rem 2rem; }.manager-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }.manager-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .manager-main { padding: 0 1rem 2rem; }.manager-topbar { min-height: 76px; }.manager-intro { display: block; padding-top: 1.8rem; }.demo-badge { display: inline-block; margin-top: 1rem; }.manager-metrics { grid-template-columns: 1fr 1fr; gap: .65rem; }.manager-metrics article { padding: .9rem; }.manager-metrics strong { font-size: 1.5rem; }.review-row { grid-template-columns: 30px minmax(0, 1fr); }.review-row .outline-button { grid-column: 2; width: max-content; }.setup-card { display: block; }.setup-card .primary-button { width: 100%; margin-top: 1rem; } }
@media (max-width: 620px) { .import-heading, .manual-student-card { display: block; }.download-template { display: inline-block; margin-top: 1rem; }.manual-student-card .outline-button { width: 100%; margin-top: 1rem; } }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }