/* Disiplin Panosu v1.1 — generated markup ile uyumlu arayüz düzeltmeleri */
:root {
  --surface: #f8fafc;
  --surface-strong: #ffffff;
  --column-bg: #dfe5eb;
  --line-strong: #c5ced7;
  --shadow: 0 18px 55px rgba(29, 39, 50, .18);
}

body { font-size: 14px; }
button, input, select, textarea { font-size: 13px; }
.loading-logo { width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(35,47,59,.12)); }
.auth-brand .eyebrow { margin-top: 0; }
.auth-logo-home { width: max-content; max-width: 100%; margin: 0 auto 25px; padding: 7px 12px 7px 8px; display: flex; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 11px; background: transparent; }
.auth-logo-home:hover { background: rgba(52,71,93,.045); }
.auth-logo-home:focus-visible { outline: 0; border-color: #8aa0b6; box-shadow: 0 0 0 3px rgba(94,123,151,.12); }
.auth-logo-icon { width: 39px; height: 39px; flex: none; object-fit: contain; }
.auth-logo-name { width: 139px; height: auto; display: block; }
.auth-logo-home + .auth-tabs { margin-top: 0; }
.brand-home { width: 100%; border: 0; background: transparent; color: #fff; cursor: pointer; }
.brand-home:hover { opacity: .88; }
.brand-home:focus-visible { outline: 2px solid #91b5a2; outline-offset: 4px; border-radius: 7px; }
.sidebar-logo-wrap { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border: 1px solid #4d5a68; border-radius: 8px; background: #343e49; overflow: hidden; }
.sidebar-logo { width: 25px; height: 25px; object-fit: contain; }
.sidebar .brand { gap: 9px; padding: 0 7px; text-align: left; }
.sidebar .brand > span:last-child { letter-spacing: -.01em; }
.workspace { padding: 30px 34px 44px; }
.eyebrow { font-size: 10px; line-height: 1.2; }
.topbar { margin-bottom: 18px; }
.topbar h1 { font-size: 28px; }
.compact-stats { font-size: 11px; }
.primary, .secondary { min-height: 36px; font-size: 11px; }
.quick-add input { font-size: 12px; }
.quick-add small { font-size: 9px; }
.quick-add button { min-width: 58px; font-size: 10px; }
.filterbar input, .filterbar select { height: 38px; font-size: 11px; }

/* Pano sütunları */
.board { gap: 14px; }
.column { padding: 14px; background: var(--column-bg); border-color: var(--line-strong); }
.column > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 14px; }
.column > header > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.column > header h2 { margin: 0; font-size: 15px; line-height: 1.25; color: #28323d; }
.column > header > small { min-width: 25px; height: 25px; padding: 0 7px; border-radius: 7px; display: grid; place-items: center; background: #cbd3dc; color: #566474; font-size: 10px; font-weight: 800; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status-dot.todo { background: #82909e; }
.status-dot.doing { background: #4f779e; }
.status-dot.waiting { background: #b18a48; }
.status-dot.done { background: #5e826c; }
.card-list { display: flex; flex-direction: column; gap: 9px; }
.empty-column { min-height: 70px; border: 1px dashed #b9c3cd; border-radius: 9px; display: grid; place-items: center; color: #788592; font-size: 11px; background: rgba(255,255,255,.2); }
.column-add { margin-top: 4px; padding: 11px 5px 4px; font-size: 10px; }

/* Kartlar */
.task-card { position: relative; background: var(--surface-strong); border: 1px solid #cbd4dd; border-left: 4px solid #8995a1; border-radius: 10px; padding: 13px; box-shadow: 0 2px 5px rgba(31,42,54,.035); cursor: grab; }
.task-card:hover { border-color: #b8c4cf; box-shadow: 0 7px 20px rgba(31,42,54,.09); transform: translateY(-1px); }
.task-card.color-amber { background: #fff8e8; border-left-color: #c59a43; }
.task-card.color-red { background: #fff1ef; border-left-color: #c4675b; }
.task-card.color-blue { background: #edf5fd; border-left-color: #5f86ad; }
.task-card.color-green { background: #edf7f0; border-left-color: #658f72; }
.task-card.color-violet { background: #f5f0fb; border-left-color: #8b70aa; }
.task-card.is-done { opacity: .72; }
.task-card.is-done h3 { text-decoration: line-through; }
.task-card.dragging { opacity: .45; }
.card-list.drag-over { outline: 2px dashed #6c8298; outline-offset: 4px; border-radius: 8px; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.area-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; border-radius: 6px; background: #e8ebef; color: #5f6b78; font-size: 9px; font-weight: 800; }
.area-kisisel { background: #eee8f6; color: #755f94; }
.area-is { background: #e4edf7; color: #507297; }
.area-kpss { background: #f6e9e3; color: #98614b; }
.icon-button { width: 30px; height: 30px; border: 0; border-radius: 7px; display: grid; place-items: center; background: transparent; color: #6e7a86; font-weight: 800; }
.icon-button:hover { background: #e8ecf0; color: #263440; }
.task-card h3 { margin: 12px 0 0; font-size: 15px; line-height: 1.42; overflow-wrap: anywhere; }
.task-card > p { margin: 7px 0 0; color: #687582; font-size: 11px; line-height: 1.5; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; margin-top: 12px; color: #6b7783; font-size: 9px; }
.priority { padding: 3px 6px; border-radius: 5px; font-weight: 800; }
.priority.onemli { background: #f4ecd9; color: #866a34; }
.priority.acil { background: #f8e3e0; color: #a85349; }
.due.overdue { color: #ad5148; }
.task-card .card-actions { display: flex; align-items: center; gap: 7px; border-top: 1px solid rgba(96,110,124,.15); margin-top: 11px; padding-top: 10px; }
.task-card .card-actions button { border: 1px solid #d1d8df; background: rgba(255,255,255,.65); color: #556577; border-radius: 6px; padding: 6px 8px; font-size: 9px; font-weight: 800; }
.task-card .card-actions select { margin-left: auto; max-width: 122px; border: 1px solid #d1d8df; background: rgba(255,255,255,.75); border-radius: 6px; padding: 6px 7px; font-size: 9px; outline: none; }

/* Modal ortak yapısı */
.modal-backdrop { backdrop-filter: blur(2px); background: rgba(31, 39, 48, .58); }
.modal { width: min(650px, 100%); background: #f7f9fb; padding: 28px; border-radius: 16px; box-shadow: var(--shadow); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.modal-head h2 { margin: 0; font-size: 25px; letter-spacing: -.025em; }
.modal-head .icon-button { flex: none; border: 1px solid #d2d9e0; background: #fff; font-size: 20px; font-weight: 400; }
.modal h3 { margin: 22px 0 10px; font-size: 14px; }
#cardForm { display: grid; gap: 14px; }
#cardForm > label, #cardForm .form-row label { display: flex; flex-direction: column; gap: 7px; color: #52606e; font-size: 11px; font-weight: 750; }
#cardForm label small { color: #8a949f; font-size: 9px; font-weight: 500; }
#cardForm input, #cardForm select, #cardForm textarea { width: 100%; min-height: 40px; border: 1px solid #c8d1da; background: #fff; border-radius: 8px; padding: 10px 11px; outline: none; }
#cardForm textarea { min-height: 82px; resize: vertical; line-height: 1.45; }
#cardForm input:focus, #cardForm select:focus, #cardForm textarea:focus { border-color: #738aa1; box-shadow: 0 0 0 3px rgba(96,122,148,.12); }
#cardForm .form-row { gap: 14px; }
.color-field { margin: 0; border: 1px solid #d2d9e0; border-radius: 9px; padding: 12px 13px; }
.color-field legend { padding: 0 5px; color: #596675; font-size: 10px; font-weight: 750; }
.color-choice { display: inline-flex !important; margin: 0 8px 0 0 !important; cursor: pointer; }
.color-choice input { position: absolute; width: 1px !important; height: 1px; min-height: 0 !important; opacity: 0; }
.color-choice span { width: 25px; height: 25px; display: block; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #c6ced6; }
.color-choice input:checked + span { box-shadow: 0 0 0 2px #34475d; }
.color-choice.color-default span { background: #fff; }
.color-choice.color-amber span { background: #e6c66f; }
.color-choice.color-red span { background: #dc9189; }
.color-choice.color-blue span { background: #8fb6dc; }
.color-choice.color-green span { background: #91c29e; }
.color-choice.color-violet span { background: #ae98ca; }
.modal-actions { display: flex; align-items: center; gap: 8px; border-top: 1px solid #d9dfe5; padding-top: 18px; margin-top: 2px; }
.modal-actions > span { flex: 1; }
.modal-actions .primary { margin-left: auto; min-width: 110px; }
.danger { min-height: 36px; border: 1px solid #d8aaa5; background: #fff4f2; color: #a34e46; border-radius: 8px; padding: 9px 12px; font-size: 10px; font-weight: 800; }

/* Rapor */
.period-tabs { display: inline-flex; gap: 4px; background: #e5eaf0; border-radius: 8px; padding: 4px; margin-bottom: 16px; }
.period-tabs button { border: 0; background: transparent; color: #687582; border-radius: 6px; padding: 7px 12px; font-size: 10px; font-weight: 800; }
.period-tabs button.active { background: #fff; color: #34475d; box-shadow: 0 1px 4px rgba(32,43,54,.1); }
.report-stats > div { background: #fff; border: 1px solid #d7dee5; border-radius: 10px; padding: 14px; }
.report-stats > div strong { display: block; font-size: 21px; line-height: 1.1; }
.report-stats > div span { display: block; margin-top: 5px; color: #78838e; font-size: 9px; }
.history-bars { grid-template-columns: repeat(7, minmax(9px, 1fr)); align-items: end; height: 145px; padding: 10px 8px 0; background: #edf1f4; border: 1px solid #d8dee5; border-radius: 10px; }
.history-bars > div { height: 100%; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; }
.history-bars > div > span { width: min(28px, 70%); min-height: 4px; display: block; background: linear-gradient(#6f8aa5,#4f6b87); border-radius: 5px 5px 2px 2px; }
.history-bars small { height: 18px; color: #707d89; font-size: 8px; text-transform: capitalize; }
.area-report { display: grid; gap: 7px; }
.area-report > div { display: flex; align-items: center; justify-content: space-between; border: 1px solid #d9dfe5; background: #fff; border-radius: 8px; padding: 10px 12px; font-size: 11px; }
.area-report strong { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 6px; background: #e8edf1; }

/* Hesap ayarları */
.settings-grid { align-items: stretch; }
.settings-card { padding: 24px; box-shadow: 0 2px 4px rgba(32,42,52,.025); }
.settings-card h2 { font-size: 18px; margin-bottom: 12px; }
.settings-card form { display: grid; gap: 12px; }
.settings-card label { margin: 0; font-size: 10px; }
.settings-card input { min-height: 40px; font-size: 12px; }
.settings-card .primary { justify-self: start; margin-top: 4px; }
.settings-card dl { margin: 20px 0 0; border-top: 1px solid #dbe1e6; }
.settings-card dl > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid #e1e6ea; }
.settings-card dt { color: #76818c; font-size: 10px; }
.settings-card dd { margin: 0; color: #34414e; font-size: 11px; font-weight: 800; text-align: right; }
.settings-card .button-row { margin-top: 15px; }
.danger-zone { align-self: start; }
.dot.area-color-0, .area-manager-dot.area-color-0 { background: #917ab8; }
.dot.area-color-1, .area-manager-dot.area-color-1 { background: #6c8fbd; }
.dot.area-color-2, .area-manager-dot.area-color-2 { background: #bb765d; }
.dot.area-color-3, .area-manager-dot.area-color-3 { background: #6e9d8b; }
.dot.area-color-4, .area-manager-dot.area-color-4 { background: #b69457; }
.dot.area-color-5, .area-manager-dot.area-color-5 { background: #8a7b72; }
.area-manager-card { grid-column: 1 / -1; }
.area-manager { display: grid; gap: 8px; margin: 16px 0; }
.area-manager-row { min-height: 54px; display: grid; grid-template-columns: 10px minmax(150px,1fr) minmax(95px,auto) auto auto auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid #d6dde3; border-radius: 9px; background: #fff; }
.area-manager-dot { width: 8px; height: 8px; border-radius: 50%; }
.area-manager-row input { width: 100%; min-width: 0; }
.area-manager-row > small { color: #7a8590; font-size: 9px; white-space: nowrap; }
.area-manager-row button { min-height: 36px; }
.area-manager-row button:disabled { cursor: not-allowed; opacity: .45; }
.area-add-form { grid-template-columns: minmax(180px,1fr) auto; align-items: end; padding-top: 14px; border-top: 1px solid #dbe1e6; }
.area-add-form .primary { min-height: 40px; margin: 0; }
.area-delete-dialog { display: grid; gap: 12px; }
.area-delete-dialog > p { margin: 0; color: #687581; font-size: 11px; line-height: 1.55; }
.area-delete-summary { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: baseline; gap: 6px; padding: 13px; border-radius: 9px; background: #e7ecf0; }
.area-delete-summary strong { font-size: 21px; }
.area-delete-summary span { color: #6f7a85; font-size: 10px; }
.area-delete-option { display: grid; gap: 10px; padding: 15px; border: 1px solid #d4dce3; border-radius: 10px; background: #fff; }
.area-delete-option h3 { margin: 0; font-size: 14px; }
.area-delete-option p { margin: 0; color: #6f7b87; font-size: 10px; line-height: 1.5; }
.area-delete-option label { display: grid; gap: 6px; color: #5e6975; font-size: 10px; font-weight: 800; }
.area-delete-option select { min-height: 40px; border: 1px solid #c8d1da; border-radius: 8px; background: #f8fafb; padding: 8px 10px; }
.area-delete-option button { justify-self: start; }
.area-delete-option.danger-option { border-color: #e0c3bf; background: #fff8f7; }
.area-delete-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 3px; }
.area-choice-list { display: grid; gap: 9px; }
.area-choice { width: 100%; min-height: 62px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; border: 1px solid #ccd5dd; border-radius: 10px; background: #fff; padding: 13px 15px; text-align: left; }
.area-choice:hover { border-color: #8fa1b2; background: #f8fafb; }
.area-choice strong { color: #34475a; font-size: 12px; }
.area-choice small { color: #74808b; font-size: 9px; line-height: 1.4; }
.area-choice.danger-choice { border-color: #dfbbb6; background: #fff8f7; }
.area-choice.danger-choice strong { color: #a34e46; }
.area-choice:disabled { cursor: not-allowed; opacity: .45; }
.area-move-field { display: grid; gap: 7px; color: #5e6975; font-size: 10px; font-weight: 800; }
.area-move-field select { min-height: 43px; border: 1px solid #c8d1da; border-radius: 8px; background: #fff; padding: 9px 10px; }
.area-move-submit { min-height: 43px; }

/* Bugün ve boş ekranlar */
.today-layout { grid-template-columns: minmax(0,1.4fr) minmax(260px,.7fr); }
.focus-card, .focus-queue { border: 1px solid #cbd4dd; border-radius: 13px; padding: 24px; }
.focus-card { background: #fff; border-left: 4px solid #63809d; }
.focus-card h2 { margin: 20px 0 8px; font-size: 25px; }
.focus-card > p:not(.eyebrow) { color: #6e7985; line-height: 1.55; }
.focus-queue { background: #dfe5ea; }
.today-timer { margin-top: 20px; }
.today-timer strong { font-size: 28px; font-variant-numeric: tabular-nums; }
.today-buttons { display: flex; gap: 8px; margin-top: 12px; }
.empty-state { max-width: 520px; margin: 70px auto; padding: 42px; text-align: center; border: 1px dashed #bcc6d0; border-radius: 14px; background: rgba(255,255,255,.35); }
.empty-state > span { width: 46px; height: 46px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; background: #dce5df; color: #577060; font-size: 20px; }
.empty-state h2 { margin: 0; font-size: 20px; }
.empty-state p, .muted { color: #73808d; font-size: 11px; line-height: 1.55; }

/* Günün sözü */
.dot.notes { background: #66a39a; }
.motivation-bar { max-width: 1540px; min-height: 42px; margin: -7px auto 14px; padding: 9px 13px; display: flex; align-items: center; gap: 14px; border: 1px solid #d2d9df; border-left: 3px solid #8a9b7a; border-radius: 9px; background: rgba(249,250,251,.7); }
.motivation-bar > span { flex: none; color: #7a876e; font-size: 8px; font-weight: 850; letter-spacing: .15em; }
.motivation-bar > p { margin: 0; color: #5d6873; font-family: Georgia, serif; font-size: 12px; line-height: 1.45; font-style: italic; }

/* Bağımsız notlar */
.notes-view { max-width: 1280px; margin: 0 auto; }
.notes-layout { min-height: calc(100vh - 175px); display: grid; grid-template-columns: 300px minmax(0,1fr); border: 1px solid #c7d0d9; border-radius: 13px; overflow: hidden; background: #f7f9fa; box-shadow: 0 5px 20px rgba(31,42,53,.05); }
.notes-panel { min-width: 0; padding: 14px; background: #dfe5ea; border-right: 1px solid #c6cfd8; }
.notes-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 13px; }
.notes-panel-head strong { display: block; font-size: 14px; }
.notes-panel-head small { display: block; margin-top: 3px; color: #78838e; font-size: 9px; }
.notes-panel-head .primary { min-height: 32px; padding: 7px 10px; }
.note-search { width: 100%; height: 38px; border: 1px solid #c5ced7; border-radius: 8px; background: #f8fafb; padding: 0 11px; outline: none; font-size: 11px; }
.note-search:focus { border-color: #748a9e; box-shadow: 0 0 0 3px rgba(95,121,146,.12); }
.note-list { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; max-height: calc(100vh - 282px); overflow: auto; padding-right: 2px; }
.note-list-item { width: 100%; min-height: 67px; border: 1px solid #cbd3db; border-left: 3px solid #8e99a4; border-radius: 9px; background: #f7f9fa; padding: 11px; text-align: left; color: #33404c; }
.note-list-item:hover { background: #fff; }
.note-list-item.active { border-color: #7990a5; box-shadow: 0 0 0 2px rgba(88,117,144,.13); }
.note-list-item.color-amber { background: #fff7e4; border-left-color: #c49a47; }
.note-list-item.color-red { background: #fff0ee; border-left-color: #bd665c; }
.note-list-item.color-blue { background: #edf5fd; border-left-color: #6088ad; }
.note-list-item.color-green { background: #edf7ef; border-left-color: #689075; }
.note-list-item.color-violet { background: #f5f0fa; border-left-color: #8d73aa; }
.note-list-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 800; }
.note-list-item small { display: block; margin-top: 7px; color: #77838f; font-size: 8px; }
.note-list-empty { padding: 25px 10px; text-align: center; color: #7b8792; font-size: 10px; }
.notes-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 9px; padding: 3px; border-radius: 7px; background: #d2d9e0; }
.notes-tabs button { border: 0; border-radius: 5px; padding: 7px; background: transparent; color: #6d7985; font-size: 9px; font-weight: 800; }
.notes-tabs button.active { background: #f8fafb; color: #34475d; box-shadow: 0 1px 4px rgba(34,45,56,.08); }
.note-editor { min-width: 0; display: flex; flex-direction: column; padding: 22px 28px 16px; background: #fff; }
.note-editor.color-amber { background: #fffaf0; }
.note-editor.color-red { background: #fff6f4; }
.note-editor.color-blue { background: #f4f9fe; }
.note-editor.color-green { background: #f4faf5; }
.note-editor.color-violet { background: #faf7fd; }
.note-editor-tools { display: flex; align-items: center; gap: 7px; padding-bottom: 16px; border-bottom: 1px solid rgba(111,125,139,.16); }
.note-editor-tools > span { flex: 1; }
.note-editor-tools select { height: 34px; border: 1px solid #ccd4dc; border-radius: 7px; background: rgba(255,255,255,.8); padding: 0 9px; color: #566473; font-size: 10px; }
.note-editor-tools button { min-height: 34px; }
.note-title { width: 100%; border: 0; outline: 0; background: transparent; padding: 26px 2px 15px; color: #24303c; font-size: 27px; font-weight: 800; letter-spacing: -.025em; }
.format-toolbar { display: flex; align-items: center; gap: 5px; padding: 7px; margin-bottom: 8px; border: 1px solid rgba(111,125,139,.18); border-radius: 8px; background: rgba(240,244,247,.72); }
.format-toolbar > span { flex: 1; }
.format-toolbar button { min-width: 29px; min-height: 29px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #536170; padding: 5px 7px; font-size: 10px; }
.format-toolbar button:hover,.format-toolbar button.active { border-color: #c7d1da; background: #fff; color: #2e4357; }
.format-toolbar .preview-toggle { min-width: 58px; font-weight: 800; }
.note-body { width: 100%; flex: 1; min-height: 360px; border: 0; outline: 0; resize: none; background: transparent; padding: 3px 2px 24px; color: #485563; font: 14px/1.75 Arial, Helvetica, sans-serif; }
.note-preview { flex: 1; min-height: 360px; overflow: auto; padding: 8px 4px 24px; color: #485563; font-size: 14px; line-height: 1.7; }
.note-preview h1,.note-preview h2,.note-preview h3 { color: #283542; line-height: 1.3; }
.note-preview h1 { font-size: 24px; margin: 14px 0 10px; }.note-preview h2 { font-size: 20px; margin: 13px 0 8px; }.note-preview h3 { font-size: 16px; margin: 12px 0 7px; }
.note-preview p { margin: 5px 0; }.md-bullet,.md-number { display: flex; gap: 8px; margin: 4px 0; }.md-number > span:first-child { min-width: 18px; color: #75818d; }
.md-check { display: flex; align-items: flex-start; gap: 9px; margin: 7px 0; cursor: pointer; }.md-check input { margin-top: 5px; accent-color: #5f806b; }.md-check input:checked + span { color: #89929b; text-decoration: line-through; }
.note-editor footer { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(111,125,139,.16); padding-top: 12px; color: #87919b; font-size: 9px; }
.note-empty { display: grid; place-content: center; justify-items: center; padding: 40px; text-align: center; background: #f8fafb; }
.note-empty > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #e0e8e5; color: #58756d; font-size: 21px; }
.note-empty h2 { margin: 16px 0 4px; font-size: 20px; }
.note-empty p { max-width: 390px; color: #74808c; font-size: 11px; line-height: 1.55; }
.note-empty .primary { margin-top: 10px; }
.trash-detail .button-row { justify-content: center; margin-top: 12px; }
.template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.template-grid button { min-height: 105px; display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 11px; border: 1px solid #d1d9e0; border-radius: 10px; background: #fff; padding: 14px; text-align: left; }
.template-grid button:hover { border-color: #8599ad; box-shadow: 0 5px 15px rgba(38,50,62,.08); transform: translateY(-1px); }
.template-grid button > span { grid-row: 1/3; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: #e6ecef; color: #536d78; font-size: 17px; }
.template-grid strong { align-self: end; font-size: 12px; }.template-grid small { align-self: start; color: #7c8792; font-size: 9px; line-height: 1.35; }
.switch-row { flex-direction: row !important; align-items: center; gap: 9px !important; font-size: 11px !important; }
.switch-row input { width: 17px !important; min-height: 17px !important; }

@media (max-width: 1100px) {
  .workspace { padding: 24px 20px 36px; }
  .board { grid-template-columns: repeat(4, minmax(250px, 1fr)); }
}

@media (max-width: 760px) {
  .workspace { padding: 18px 12px 34px; }
  .sidebar-logo-wrap { width: 31px; height: 31px; }
  .sidebar-logo { width: 26px; height: 26px; }
  .topbar { align-items: flex-end; }
  .topbar h1 { font-size: 23px; }
  .board { grid-template-columns: repeat(4, minmax(82vw, 330px)); }
  .column > header h2 { font-size: 14px; }
  .modal-backdrop { padding: 8px; align-items: end; }
  .modal { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; padding: 21px 17px; }
  .modal-head h2 { font-size: 22px; }
  #cardForm .form-row { grid-template-columns: 1fr; }
  .report-stats { grid-template-columns: 1fr 1fr; }
  .history-bars { overflow-x: auto; grid-template-columns: repeat(7, minmax(34px,1fr)); }
  .today-layout { grid-template-columns: 1fr; }
  .settings-card { padding: 19px; }
  .motivation-bar { align-items: flex-start; flex-direction: column; gap: 4px; }
  .notes-layout { min-height: calc(100vh - 145px); grid-template-columns: 1fr; border-radius: 11px; }
  .notes-panel { border-right: 0; border-bottom: 1px solid #c6cfd8; }
  .note-list { max-height: 220px; }
  .note-editor { min-height: 480px; padding: 16px; }
  .note-editor-tools { flex-wrap: wrap; }
  .note-editor-tools > span { display: none; }
  .note-title { font-size: 22px; padding-top: 20px; }
  .note-body { min-height: 300px; }
  .note-preview { min-height: 300px; }
  .format-toolbar { overflow-x: auto; }
  .format-toolbar > span { display: none; }
  .format-toolbar button { white-space: nowrap; }
  .template-grid { grid-template-columns: 1fr; }
  .auth-logo-home { margin-bottom: 20px; }
  .auth-logo-icon { width: 35px; height: 35px; }
  .auth-logo-name { width: 126px; }
}