:root {
  font-family: "DM Sans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #20243a;
  background: #f7f8fc;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --purple: #6558e8;
  --purple-dark: #5144d2;
  --ink: #20243a;
  --muted: #8c91a5;
  --line: #eceef4;
  --surface: #fff;
  --soft-purple: #f0efff;
  --green: #22a580;
  --red: #eb6674;
  --amber: #edaa4d;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
body.auth-required { overflow: hidden; }
body.auth-required .app-shell { display: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.auth-demo-notice { padding: 9px 39px; background: #fff8e9; border-bottom: 1px solid #f2e6c9; color: #80622b; font-size: 10px; line-height: 1.5; }
.auth-demo-notice:empty { display: none; }
.auth-demo-notice .button { margin-left: 8px; vertical-align: middle; }
.auth-demo-notice [hidden] { display: none; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 20% 5%, #f0efff 0, transparent 42%), #f7f8fc; }
.auth-card { width: min(100%, 420px); padding: 32px; background: #fff; border: 1px solid #eceef4; border-radius: 18px; box-shadow: 0 20px 70px #29264a12; }
.auth-brand { display: inline-flex; gap: 11px; align-items: center; text-decoration: none; color: inherit; margin-bottom: 30px; }
.auth-card .eyebrow { margin-bottom: 8px; }
.auth-card h1 { font-size: 26px; }
.auth-intro { margin: 8px 0 20px; color: #898da0; font-size: 12px; line-height: 1.6; }
.auth-form { display: flex; flex-direction: column; gap: 9px; }
.auth-form[hidden] { display: none; }
.auth-form label { margin-top: 5px; color: #656a7f; font-size: 11px; font-weight: 600; }
.auth-form input { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid #e5e7ef; border-radius: 8px; outline: 0; color: var(--ink); font-size: 13px; }
.auth-form input:focus { border-color: #938af0; box-shadow: 0 0 0 3px #6558e814; }
.auth-submit { width: 100%; min-height: 42px; margin-top: 10px; font-size: 12px; }
.auth-submit:disabled { cursor: wait; opacity: .7; }
.auth-link { align-self: center; padding: 7px; border: 0; background: transparent; color: var(--purple); font-size: 11px; font-weight: 600; }
.auth-message { min-height: 18px; margin: 12px 0 0; color: #218464; font-size: 11px; line-height: 1.6; }
.auth-message.error { color: #cf4e60; }
.auth-demo-warning { margin: 14px 0 0; padding: 11px; border-radius: 8px; background: #fff8e9; color: #80622b; font-size: 10px; line-height: 1.6; }
.auth-demo-link { display: inline-block; margin-top: 14px; color: var(--purple); font-size: 11px; font-weight: 600; text-decoration: none; }
.app-shell { min-height: 100vh; }
.sidebar { width: 250px; height: 100vh; position: fixed; inset: 0 auto 0 0; padding: 27px 17px 16px; background: #fff; border-right: 1px solid #eff0f5; display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; gap: 11px; align-items: center; text-decoration: none; color: inherit; padding: 0 8px; height: 42px; }
.brand-mark { width: 31px; height: 31px; background: var(--purple); border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 2px; transform: rotate(-8deg); }
.brand-mark span { display: block; width: 3px; background: #fff; border-radius: 5px; }
.brand-mark span:nth-child(1) { height: 9px; }.brand-mark span:nth-child(2) { height: 17px; }.brand-mark span:nth-child(3) { height: 12px; }
.brand-copy { display: flex; flex-direction: column; gap: 1px; letter-spacing: -.5px; }
.brand-copy strong { font-size: 18px; font-weight: 800; }.brand-copy small { font-size: 8px; letter-spacing: 1.6px; color: #a0a3b2; font-weight: 700; }
.studio-switch { margin: 33px 1px 29px; padding: 11px 10px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 11px; }
.studio-avatar { background: #f4a38f; border-radius: 9px; color: #fff; width: 34px; height: 34px; display: grid; place-items: center; font-weight: 800; }
.studio-label { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.studio-label strong { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.studio-label small { font-size: 10px; color: var(--muted); }
.chevron { color: #9296a7; font-size: 17px; }
.nav-label { color: #b1b4c2; font-size: 9px; font-weight: 700; letter-spacing: 1.2px; padding: 0 13px 11px; }
.main-nav { display: flex; flex-direction: column; gap: 5px; }
.nav-item { border: 0; width: 100%; text-align: left; background: transparent; border-radius: 9px; height: 43px; display: flex; align-items: center; gap: 13px; padding: 0 13px; color: #777c90; font-size: 12px; font-weight: 600; transition: .16s; }
.nav-item[hidden] { display: none; }
.nav-item:hover { background: #f7f7fc; color: var(--ink); }.nav-item.active { background: var(--soft-purple); color: var(--purple); font-weight: 700; }
.nav-icon { width: 17px; text-align: center; font-size: 17px; font-weight: 500; }
.sidebar-bottom { margin-top: auto; }
.help-card { background: #f8f7ff; border: 1px solid #efedff; border-radius: 12px; margin: 0 2px 18px; padding: 14px 13px 12px; position: relative; }
.help-spark { position: absolute; right: 13px; top: 12px; color: var(--purple); font-size: 15px; }.help-card strong { font-size: 11px; }.help-card p { color: #9296a8; font-size: 10px; line-height: 1.7; margin: 7px 0 9px; }
.help-card button { color: var(--purple); border: 0; background: transparent; padding: 0; font-size: 10px; font-weight: 700; }.help-card button span { margin-left: 4px; }
.settings-item { margin-bottom: 13px; }
.profile { border-top: 1px solid var(--line); padding: 14px 4px 0; display: flex; align-items: center; gap: 9px; }
.profile-avatar, .top-avatar { width: 31px; height: 31px; border-radius: 50%; background: #fae3da; color: #c87b66; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.profile-copy { display: flex; flex: 1; flex-direction: column; gap: 4px; }.profile-copy strong { font-size: 10px; }.profile-copy small { font-size: 9px; color: #9a9eaf; }.more-button { background: none; border: 0; color: #a6a9b5; letter-spacing: 1px; }
.main-area { margin-left: 250px; min-height: 100vh; }
.topbar { height: 72px; padding: 0 39px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.88); border-bottom: 1px solid #eff0f5; }
.breadcrumbs { font-size: 11px; color: #a0a3b1; }.breadcrumbs span { margin: 0 9px; color: #c4c6cf; }.breadcrumbs strong { color: #555a70; font-weight: 600; }
.top-actions { display: flex; align-items: center; gap: 19px; }
.role-picker { display: flex; align-items: center; gap: 6px; color: #a0a3b1; font-size: 10px; }.role-picker select { border: 1px solid var(--line); background: #fff; color: #555a70; border-radius: 7px; padding: 7px 8px; font-size: 10px; }
.icon-button { position: relative; border: 0; background: none; color: #82879b; font-size: 20px; }.notification-button i { position: absolute; width: 5px; height: 5px; background: #f17e82; border: 1px solid white; top: 2px; right: 1px; border-radius: 50%; }.top-avatar { width: 29px; height: 29px; }
.mobile-menu { display: none; background: none; border: 0; font-size: 20px; color: var(--ink); }
.content { max-width: 1480px; padding: 34px 40px 55px; margin: auto; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 26px; }
.eyebrow { color: var(--purple); font-size: 9px; letter-spacing: 1.4px; font-weight: 700; margin-bottom: 9px; }
h1 { font-size: 24px; letter-spacing: -.8px; margin: 0; font-weight: 700; }.page-subtitle { color: #979bad; font-size: 11px; margin: 8px 0 0; }
.heading-actions { display: flex; gap: 8px; align-items: center; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 35px; padding: 0 13px; border-radius: 8px; border: 1px solid #e8e9f0; background: #fff; color: #656a7f; font-size: 10px; font-weight: 600; transition: .15s; }
.button:hover { border-color: #c7c3ff; color: var(--purple); }.button.primary { background: var(--purple); border-color: var(--purple); color: #fff; box-shadow: 0 4px 10px #6558e822; }.button.primary:hover { background: var(--purple-dark); }.button.danger { color: #d85a68; border-color: #f2d6d9; }.button.small { min-height: 29px; padding: 0 9px; font-size: 9px; }
.date-chip { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; color: #62677c; font-size: 10px; font-weight: 600; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 17px; }
.stat-card { background: white; border: 1px solid #eef0f5; border-radius: 12px; padding: 16px 17px 14px; min-height: 113px; }
.stat-top { display: flex; justify-content: space-between; align-items: center; color: #85899c; font-size: 10px; font-weight: 500; }.stat-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: #f1f0ff; color: var(--purple); font-size: 13px; }.stat-icon.green { color: #23a482; background: #eaf8f3; }.stat-icon.orange { color: #e1a044; background: #fff5e6; }.stat-icon.pink { color: #e67786; background: #fff0f2; }
.stat-value { font-size: 23px; font-weight: 700; letter-spacing: -.7px; margin-top: 9px; }.stat-value small { font-size: 11px; font-weight: 500; margin-left: 2px; color: #73788d; }.stat-foot { color: #a2a5b2; font-size: 9px; margin-top: 4px; }.stat-foot .up { color: #20a17c; font-weight: 700; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(260px,.9fr); gap: 15px; }
.panel { background: white; border: 1px solid #eef0f5; border-radius: 12px; overflow: hidden; }.panel-head { height: 57px; display: flex; justify-content: space-between; align-items: center; padding: 0 17px; border-bottom: 1px solid #f1f2f6; }.panel-title { font-size: 12px; font-weight: 700; }.panel-caption { color: #a1a4b0; font-size: 9px; margin-top: 4px; }.text-button { color: var(--purple); background: none; border: 0; font-size: 9px; font-weight: 600; }
.schedule-list { padding: 3px 17px 8px; }.schedule-row { min-height: 60px; display: grid; grid-template-columns: 47px 4px minmax(0,1fr) auto; align-items: center; gap: 11px; border-bottom: 1px solid #f3f4f7; }.schedule-row:last-child { border: 0; }.schedule-time { font-size: 10px; color: #64697d; font-weight: 600; }.schedule-accent { height: 31px; border-radius: 5px; background: #8980f2; }.schedule-accent.mint { background: #49c5a4; }.schedule-accent.coral { background: #f19688; }.schedule-accent.blue { background: #77a7f1; }.schedule-accent.amber { background: #f0bd62; }.lesson-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }.lesson-info strong { font-size: 10px; font-weight: 600; }.lesson-info small { color: #a0a4b1; font-size: 9px; }.lesson-tag { background: #f3f2ff; color: var(--purple); padding: 5px 7px; border-radius: 5px; font-size: 8px; white-space: nowrap; }.lesson-tag.complete { color: #239977; background: #eaf8f2; }.lesson-tag.wait { color: #d08c2d; background: #fff5e6; }
.quick-stack { display: flex; flex-direction: column; gap: 14px; }.collection-panel { min-height: 184px; }.collection-summary { padding: 16px 17px 9px; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }.collection-summary > div { min-width: 0; flex: 1; }.collection-summary strong { font-size: 17px; letter-spacing: -.5px; white-space: nowrap; }.collection-summary small { font-size: 10px; color: #8e93a4; }.collection-summary .amount { color: var(--ink); }.progress-track { margin: 0 17px 10px; height: 6px; border-radius: 8px; background: #f0f0f8; overflow: hidden; }.progress-track span { display: block; height: 100%; width: 78%; background: linear-gradient(90deg,#8d82f4,#6558e8); border-radius: inherit; }.collection-legend { display: flex; justify-content: space-between; padding: 0 17px 14px; color: #9a9eae; font-size: 9px; }.collection-legend span:first-child::before,.collection-legend span:last-child::before { content:""; width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:5px;background:#766aeb; }.collection-legend span:last-child::before { background:#e5e6ef; }.alert-panel { padding-bottom: 10px; }.alert-item { margin: 0 15px; min-height: 56px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f2f3f7; }.alert-item:last-child { border: 0; }.alert-mark { width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center; color: #e3a23e; background: #fff5e6; font-size: 12px; }.alert-mark.red { color: #df6876; background: #fff0f2; }.alert-copy { flex: 1; }.alert-copy strong { display: block; font-size: 10px; }.alert-copy small { color: #a1a5b2; font-size: 9px; display: block; margin-top: 4px; }
.lower-grid { margin-top: 15px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 15px; }.bar-chart-wrap { padding: 17px 18px 12px; height: 177px; }.chart-summary { display: flex; align-items: baseline; gap: 9px; }.chart-summary strong { font-size: 20px; }.chart-summary small { color: #9da1af; font-size: 9px; }.bar-chart { height: 94px; display: flex; align-items: flex-end; justify-content: space-between; gap: 9px; border-bottom: 1px solid #eff0f5; margin-top: 9px; }.bar-set { height: 100%; display: flex; flex: 1; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }.bar-pair { width: 100%; height: 74px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }.bar { width: 10px; min-height: 6px; border-radius: 3px 3px 0 0; background: #dcd9ff; }.bar.primary-bar { background: #7468ec; }.bar-label { font-size: 8px; color: #a1a5b2; padding-bottom: 6px; }.activity-list { padding: 4px 16px; }.activity-row { height: 44px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #f2f3f7; }.activity-row:last-child { border: 0; }.activity-dot { width: 7px; height: 7px; border-radius: 50%; background: #6c61e6; }.activity-dot.green { background: #38b493; }.activity-dot.orange { background: #eab156; }.activity-copy { flex: 1; font-size: 9px; color: #696e81; }.activity-copy strong { color: #33384c; }.activity-row time { color: #adb0bb; font-size: 8px; }
.section-grid { display: grid; gap: 14px; }.section-grid.two { grid-template-columns: 1fr 1fr; }.section-grid.three { grid-template-columns: repeat(3,1fr); }
.table-panel { overflow-x: auto; }.data-table { width: 100%; border-collapse: collapse; white-space: nowrap; }.data-table th { font-size: 9px; color: #a0a4b3; font-weight: 600; text-align: left; background: #fbfbfd; height: 39px; padding: 0 14px; }.data-table td { height: 51px; padding: 0 14px; border-top: 1px solid #f2f3f7; font-size: 10px; color: #555a6e; }.data-table td strong { color: #30354a; font-weight: 600; }.muted { color: #9ca0ae !important; }.status { display: inline-flex; align-items: center; border-radius: 20px; padding: 5px 8px; font-size: 8px; font-weight: 600; }.status.paid,.status.present,.status.active { color: #208d6c; background: #eaf8f2; }.status.due,.status.late { color: #d38c31; background: #fff4e2; }.status.absent,.status.blocked { color: #d75c69; background: #fff0f2; }.status.leave { color: #7773c7; background: #f0efff; }
.filters { display: flex; align-items: center; gap: 7px; }.search-box,.filter-select { height: 33px; border: 1px solid var(--line); border-radius: 7px; background: #fff; padding: 0 10px; color: #74798d; font-size: 10px; }.search-box { width: 175px; }.filter-select { min-width: 95px; }.table-footer { display: flex; justify-content: space-between; align-items: center; padding: 13px 15px; color: #a0a4b1; font-size: 9px; }.empty-state { padding: 36px 20px; color: #999eae; text-align: center; font-size: 10px; }
.notice { border-radius: 9px; background: #f5f4ff; color: #7068c6; font-size: 10px; line-height: 1.7; padding: 12px 14px; margin-bottom: 14px; }.notice.warning { color: #bd812c; background: #fff8ed; }.notice strong { font-weight: 700; }
.room-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 15px; }.room-card { background: #fff; border: 1px solid #eef0f5; border-radius: 11px; padding: 15px; }.room-card-top { display: flex; justify-content: space-between; align-items: center; }.room-card h3 { margin: 0; font-size: 12px; }.room-card p { margin: 6px 0 13px; color: #a0a4b2; font-size: 9px; }.room-state { color: #219879; background: #eaf8f2; padding: 5px 7px; font-size: 8px; border-radius: 5px; }.room-state.busy { color: #d3933d; background: #fff5e5; }.room-timeline { display: flex; gap: 3px; height: 5px; border-radius: 5px; overflow: hidden; background: #f0f1f6; }.room-timeline span { display: block; background: #8b80f0; border-radius: 4px; }.room-timeline span.busy-slot { background: #f4be6b; }
.booking-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(240px,.7fr); gap: 14px; }.booking-list { padding: 5px 16px; }.booking-row { display: grid; grid-template-columns: 55px 1fr auto; align-items: center; gap: 10px; min-height: 58px; border-bottom: 1px solid #f2f3f7; }.booking-row:last-child { border: 0; }.booking-time { font-size: 10px; color: #555a70; font-weight: 700; }.booking-copy strong { display: block; font-size: 10px; }.booking-copy small { display: block; font-size: 9px; color: #a1a5b1; margin-top: 4px; }
.setting-card { padding: 18px; }.setting-card h3 { font-size: 12px; margin: 0 0 7px; }.setting-card p { color: #989cac; font-size: 10px; line-height: 1.6; margin: 0 0 14px; }.setting-row { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #f0f1f5; padding:12px 0; font-size:10px; color:#777c8e; }.setting-row strong { color:#34394c; }.setting-input { height:31px; border:1px solid var(--line); border-radius:6px; padding:0 8px; max-width:105px; font-size:10px; text-align:right; }.toggle { width:32px; height:18px; border-radius:20px; background:#6c60e9; border:0; position:relative; }.toggle::after { content:""; position:absolute; right:2px; top:2px; width:14px; height:14px; background:#fff; border-radius:50%; }
.csv-tools { grid-column: 1 / -1; }.csv-actions { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 12px; }
.student-summary { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-bottom:14px; }.summary-tile { background:white; border:1px solid var(--line); border-radius:10px; padding:14px 16px; }.summary-tile small { font-size:9px; color:#9da1af; }.summary-tile strong { display:block; font-size:17px; margin-top:7px; }
.feedback-section { margin-top:16px; }.feedback-section-heading { display:flex; align-items:center; justify-content:space-between; margin:0 1px 10px; }.feedback-section-heading h2 { margin:0; font-size:13px; }.feedback-section-heading p { margin:5px 0 0; color:#999eae; font-size:9px; }.feedback-count { color:var(--purple); background:var(--soft-purple); padding:5px 8px; border-radius:15px; font-size:9px; }.feedback-card { background:#fff; border:1px solid #eef0f5; border-radius:11px; padding:14px 16px; margin-bottom:9px; }.feedback-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:11px; border-bottom:1px solid #f0f1f5; }.feedback-card-head strong { display:block; color:#383d52; font-size:10px; }.feedback-card-head small { display:block; margin-top:5px; color:#9da1af; font-size:9px; }.feedback-preview,.feedback-homework { padding-top:10px; }.feedback-preview span,.feedback-homework span,.feedback-detail>span { color:#9398a9; font-size:9px; font-weight:600; }.feedback-preview p,.feedback-homework p,.feedback-detail p { margin:5px 0 0; color:#565b6e; font-size:10px; line-height:1.65; white-space:pre-wrap; }.feedback-homework { padding:10px 11px; margin-top:10px; background:#f8f7ff; border-radius:8px; }.feedback-detail { padding:12px 0; border-bottom:1px solid #f0f1f5; }.feedback-detail strong { color:var(--purple); display:block; margin-top:5px; font-size:10px; }.feedback-detail p { margin-bottom:0; }
.user-permissions { white-space:normal !important; min-width:280px; max-width:420px; line-height:1.6; }
.modal-backdrop { position:fixed; inset:0; z-index:50; background:#1d203566; display:grid; place-items:center; padding:18px; }.modal { width:min(470px,100%); background:#fff; border-radius:14px; box-shadow:0 20px 70px #21234330; overflow:hidden; }.modal-head { padding:18px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }.modal-head h2 { margin:0; font-size:15px; }.modal-close { border:0; background:none; color:#969aab; font-size:21px; }.modal-body { padding:19px 20px; max-height:70vh; overflow:auto; }.modal-foot { border-top:1px solid var(--line); padding:13px 20px; display:flex; justify-content:flex-end; gap:8px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.form-field { display:flex; flex-direction:column; gap:6px; }.form-field.full { grid-column:1/-1; }.form-field label { font-size:9px; color:#858a9d; font-weight:600; }.form-field input,.form-field select,.form-field textarea { width:100%; border:1px solid #e8eaf1; border-radius:7px; padding:9px 10px; color:#41465a; font-size:10px; background:#fff; outline:none; }.form-field input:focus,.form-field select:focus { border-color:#aaa4f6; box-shadow:0 0 0 3px #6558e814; }.form-field textarea { resize:vertical; min-height:60px; }.form-hint { color:#a1a4b1; font-size:9px; line-height:1.5; }.toast-root { position:fixed; bottom:22px; right:22px; z-index:70; display:flex; flex-direction:column; gap:8px; }.toast { background:#292d42; color:white; font-size:11px; padding:12px 16px; border-radius:9px; box-shadow:0 6px 22px #20243a30; animation:toast-in .2s ease-out; }.toast.success::before { content:"✓"; color:#72e0b8; margin-right:8px; font-weight:700; }@keyframes toast-in { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
.display-page { min-height:100vh; padding:24px; background:#17182a; color:#fff; }.display-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; }.display-top .brand-copy strong { color:#fff; }.display-top .brand-copy small { color:#9699ae; }.display-clock { font-size:21px; font-weight:600; }.display-room-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }.display-room { min-height:185px; border:1px solid #34364c; border-radius:13px; padding:17px; background:#202137; }.display-room h2 { font-size:15px; margin:0 0 17px; }.display-room .occupant { font-size:19px; font-weight:700; margin:13px 0 5px; }.display-room p { font-size:10px; color:#a6a8b8; margin:0; }.display-room.free { border-color:#2b6659; }.display-room.free .occupant { color:#66d4ad; }.display-room.occupied { border-color:#6f5b36; }.display-room.occupied .occupant { color:#f0be69; }.display-back { margin-top:24px; border:1px solid #4a4b5e; background:transparent; border-radius:7px; padding:9px 12px; color:#d5d6df; font-size:10px; }
@media (max-width:1100px) { .sidebar{width:220px}.main-area{margin-left:220px}.topbar{padding:0 25px}.content{padding:28px 25px 45px}.stats-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1.2fr .8fr}.room-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:780px) { .sidebar{transform:translateX(-100%);transition:transform .2s;box-shadow:none}.sidebar.open{transform:translateX(0);box-shadow:10px 0 35px #20243a20}.main-area{margin-left:0}.topbar{height:61px;padding:0 16px}.mobile-menu{display:block}.breadcrumbs{margin-right:auto;margin-left:13px}.top-actions{gap:11px}.role-picker span{display:none}.content{padding:24px 16px 35px}.dashboard-grid,.lower-grid,.booking-layout{grid-template-columns:1fr}.section-grid.two{grid-template-columns:1fr}.section-grid.three{grid-template-columns:1fr 1fr}.room-grid{grid-template-columns:repeat(2,1fr)}.page-heading{align-items:flex-start;flex-direction:column}.heading-actions{flex-wrap:wrap}.display-room-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px) { .stats-grid{gap:8px}.stat-card{padding:13px;min-height:105px}.stat-value{font-size:20px}.stat-top{font-size:9px}h1{font-size:21px}.topbar{padding:0 12px}.content{padding-left:12px;padding-right:12px}.role-picker select{max-width:73px;padding:6px 4px}.top-avatar{display:none}.section-grid.three,.room-grid,.student-summary{grid-template-columns:1fr}.filters{width:100%;flex-wrap:wrap}.search-box{flex:1;min-width:130px}.page-heading{margin-bottom:19px}.display-page{padding:16px}.display-room-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-field.full{grid-column:auto} }
@media (max-width:480px) { .auth-page{padding:14px}.auth-card{padding:24px 20px}.auth-demo-notice{padding:8px 12px}.auth-demo-notice .button{margin:5px 0 0} }