:root { --bg:#f7f9fc; --fg:#102036; --muted:#6a7285; --accent:#2b6aff; --panel:#ffffff; }
*{box-sizing:border-box} body{margin:0;font-family:system-ui,Segoe UI,Arial;background:var(--bg);color:var(--fg)}
header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--panel);position:sticky;top:0}
nav button{margin-right:8px;padding:8px 12px;border:1px solid var(--accent);background:transparent;color:var(--fg);border-radius:6px;cursor:pointer}
nav button.active{background:var(--accent);color:#001a3a}
main{padding:16px;max-width:none;margin:0}
.toolbar{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.toolbar .icon{font-size:14px;line-height:1;display:inline-block;margin-right:0}
.toolbar-actions button{padding:6px 8px}
/* Hide legacy voice button on Study toolbar */
#voice-btn{display:none}
.content{display:flex;gap:12px}
.chat{flex:1;display:flex;flex-direction:column;min-width:320px}
/* Study workspace panes */
.workspace{display:flex;gap:0;max-width:100%;overflow:hidden}
.workspace.horizontal{flex-direction:row}
.workspace.vertical{flex-direction:column}
.workspace .gutter{background:transparent;flex:0 0 auto;opacity:.8;user-select:none}
.workspace.horizontal .gutter{width:6px;cursor:col-resize;background:linear-gradient(to right, transparent 0, #dde4f1 50%, transparent 100%);border-left:1px solid #dde4f1;border-right:1px solid #dde4f1}
.workspace.vertical .gutter{height:6px;cursor:row-resize;background:linear-gradient(to bottom, transparent 0, #dde4f1 50%, transparent 100%);border-top:1px solid #dde4f1;border-bottom:1px solid #dde4f1}
.pane{flex:1 1 33%;display:flex;flex-direction:column;min-width:200px;min-height:150px;background:var(--panel);border:1px solid #dde4f1;border-radius:6px;overflow:auto;box-sizing:border-box;max-width:100%;max-height:100%}
.pane .preview{flex:1}
.pane .canvas{width:100%;height:100%}
.canvas-toolbar{display:flex;align-items:center;gap:6px;padding:6px;border-bottom:1px solid #dde4f1;background:var(--panel)}
.canvas-toolbar .tool-btn{padding:4px 6px;border:1px solid var(--accent);background:transparent;color:var(--fg);border-radius:6px;cursor:pointer}
.canvas-toolbar .icon{font-size:14px}
.canvas-toolbar .mini{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.canvas-toolbar input[type="color"]{width:24px;height:24px;border:none;background:transparent;padding:0}
.canvas-toolbar input[type="range"]{width:80px}
.canvas-toolbar .sep{width:1px;height:20px;background:#dde4f1;margin:0 4px}
.workspace.horizontal .pane{resize:horizontal}
.workspace.vertical .pane{resize:vertical}
.chat-log{flex:1;overflow:auto;border:1px solid #dde4f1; padding:8px; border-radius:6px; background:var(--panel);display:flex;flex-direction:column;align-items:stretch}
.chat-msg{margin:6px 0;padding:6px 10px;border-radius:8px;max-width:85%}
.chat-msg img{max-width:260px;height:auto;display:block;border-radius:6px}
.chat-msg.user{background:#e1ebff;align-self:flex-end;margin-left:auto;text-align:right}
.chat-msg.bot{background:#f0f4f9;align-self:flex-start;margin-right:auto}
.chat-input{display:flex;gap:8px;margin-top:8px}
.chat-input input{flex:1;padding:8px;border-radius:6px;border:1px solid #dde4f1;background:var(--panel);color:var(--fg)}
.right{width:640px;display:flex;flex-direction:column;gap:12px}
.preview{height:360px;border:1px solid #dde4f1;border-radius:6px;overflow:hidden;background:var(--panel);display:flex;align-items:center;justify-content:center}
.preview iframe, .preview img{width:100%;height:100%;border:0;object-fit:contain;background:white}
.canvas{border:1px dashed #c5d0e3;border-radius:6px;background:var(--panel)}
.tab{display:none}
.tab.active{display:block}
.upload{display:flex;gap:8px;margin-bottom:12px}
ul#files{list-style:none;padding:0;margin:0}
ul#files li{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-bottom:1px solid #223}
ul#files button{padding:4px 8px;border:1px solid #455;background:transparent;color:var(--fg);border-radius:4px;cursor:pointer}

/* Settings page */
.page{display:block}
.section{background:var(--panel);border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:16px;margin:10px 0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.small{font-size:12px;color:var(--muted)}
.section label.small{display:block;margin:6px 0 4px}
.form-grid > label.small {
  text-align: right; /* Ensure labels in grids are right-aligned */}
/* Ensure labels stay in the left column and don't stack above */
.section .form-grid > label.small{display:flex;align-items:center;margin:0;justify-self:end;text-align:right}
/* Keep inputs from stretching too wide; shrink before layout breaks */
.form-grid input[type="text"],
.form-grid select{width:100%;max-width:520px;min-width:220px}
.btn{padding:6px 10px;border:1px solid var(--accent);background:transparent;color:var(--fg);border-radius:6px;cursor:pointer}
.btn:hover{background:rgba(106,162,255,.12)}
.btn.pressed{background:var(--accent); color:#001a3a; box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); transform: translateY(1px)}
.section input[type="text"], .section select{padding:8px;border-radius:8px;border:1px solid #cfd8ea;background:#fff;color:inherit;width:100%}
.section select{appearance:auto}
.section input[type="range"]{width:100%}
input[type="range"]{appearance: none;height:6px;border-radius:6px;background:#e5ebf6;outline:none}
input[type="range"]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:#6a7285;border:1px solid #b8c4de}
input[type="range"]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#6a7285;border:1px solid #b8c4de}

/* Subjects layout */
#subjectsList{width:100%;height:200px;border:1px solid #cfd8ea;border-radius:8px;background:#fff;color:inherit;padding:6px}
#newSubjectInput{border:1px solid #cfd8ea;background:#fff;color:inherit;border-radius:8px}
.actions .btn{border-color:#d6def0}
.actions .btn:hover{background:#eef3ff}

/* Study hours grid */
.planning-grid{height:100%}
.study-grid { display: grid; grid-template-columns: 60px 1fr; gap: 8px; height:100%; }
.day-labels, .time-slots-grid { display: grid; grid-template-rows: 20px repeat(7, 1fr); gap: 2px; height:100%; }
.day-label { font-size: 12px; text-align: right; padding-right: 8px; color: var(--muted); display: flex; align-items: center; justify-content: flex-end; }
.time-header { display: grid; grid-template-columns: repeat(24, 1fr); position: relative; }
.hour-marker { font-size: 10px; color: var(--muted); text-align: center; }
.day-row { display: grid; grid-template-columns: repeat(96, 1fr); gap: 1px; }
.time-header{pointer-events:none}
.time-slots-grid, .day-row{pointer-events:auto; position:relative; z-index:1}
.slot{height:100%;border:1px solid #d9e0ef;background:#f3f6fb;border-radius:2px;cursor:pointer; pointer-events:auto}
.slot:nth-child(4n) { border-right-color: #c5d0e3; }
.slot.active{background:#f59e0b;border-color:#f59e0b}
.time-cell{font-size:10px;text-align:center;color:var(--muted);line-height:1}
.time-cell .ampm{font-size:9px;opacity:.8}
.weight-row{display:grid;grid-template-columns:auto 80px;gap:12px;align-items:center;padding:6px 0}
.weight-input{padding:6px 8px;border-radius:6px;border:1px solid #cfd8ea;background:#fff;color:inherit;width:72px}

/* Planning page */
.planning-frame{background:var(--panel);border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:12px;margin:8px 0 16px}
.planning-toolbar{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.planning-container{display:grid;grid-template-columns:1fr 260px;gap:12px;align-items:start}
.planning-sidebar{background:transparent;border:0;border-radius:10px;padding:0;height:auto;max-height:60vh;overflow:auto}
.hidden{display:none !important}
.subject-palette{display:flex;flex-direction:column;gap:8px}
.subject-row{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:6px;border:1px solid #d6def0;border-radius:8px}
.subject-row.active{outline:2px solid var(--accent);outline-offset:2px}
.subject-row input[type="color"]{width:28px;height:28px;border:none;background:transparent;padding:0}
.subject-row .subject-btn{justify-self:start;padding:6px 10px}
.subject-row .subject-count{justify-self:end;font-variant-numeric:tabular-nums;color:var(--muted)}

/* Planning grid header clips to wake/bed */
.time-header{display:grid;gap:1px}
.planning-grid .time-header{grid-template-columns: repeat(auto-fit, minmax(8px, 1fr))}

/* Revision planning */
.revision-frame{margin-top:16px}
.revision-container{grid-template-columns: 1fr 260px}
.revision-grid{border:1px solid #dde4f1;border-radius:10px;overflow:auto;background:var(--panel);width:100%}
.revision-grid-inner{display:grid;grid-template-columns:60px 1fr;gap:8px;padding:8px}
.rev-subjects{display:flex;flex-direction:column;gap:2px}
.rev-subjects .spacer{height:24px}
.rev-subject{height:24px;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;color:var(--muted);font-size:12px}
.rev-table-wrap{overflow:auto}
.rev-table{display:grid;grid-template-rows:24px repeat(var(--rev-rows, 1), 24px);gap:2px}
.rev-header{display:grid;grid-template-columns: repeat(60, 1fr);gap:2px; pointer-events:none}
.rev-header .rev-day{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;text-align:center;color:var(--muted)}
.rev-header .rev-day .d{font-size:11px;font-weight:600;color:inherit}
.rev-header .rev-day .m{font-size:10px;opacity:.9;color:inherit}
.rev-row{display:grid;grid-template-columns: repeat(60, 1fr);gap:2px}
.rev-slot{height:100%;border:1px solid #d9e0ef;background:#f3f6fb;border-radius:2px;cursor:pointer}
.rev-slot.active{background:#c7e9ff;border-color:#93c5fd}
.rev-week-divider{border-left:2px solid #8aa3cf}
.revision-palette .subject-row{grid-template-columns:28px 1fr}

/* Plan-by-weeks grid */
.planweeks-frame{margin-top:16px}
.planweeks-container{grid-template-columns: 1fr 260px}
.planweeks-grid{border:1px solid #dde4f1;border-radius:10px;overflow:auto;background:var(--panel);width:100%}
.planweeks-grid-inner{display:grid;grid-template-columns:60px 1fr;gap:8px;padding:8px}
.pw-subjects{display:flex;flex-direction:column;gap:2px}
.pw-subjects .spacer{height:24px}
.pw-subject{height:24px;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;color:var(--muted);font-size:12px}
.pw-table-wrap{overflow:auto}
.pw-table{display:grid;grid-template-rows:24px repeat(var(--pw-rows, 1), 24px);gap:2px}
.pw-header{display:grid;grid-template-columns: repeat(var(--pw-cols, 12), 1fr);gap:2px; pointer-events:none}
.pw-header .pw-col{font-size:11px;text-align:center;color:var(--muted)}
.pw-row{display:grid;grid-template-columns: repeat(var(--pw-cols, 12), 1fr);gap:2px}
.pw-slot{height:100%;border:1px solid #d9e0ef;background:#f3f6fb;border-radius:2px;cursor:pointer}
.pw-slot.active{background:#c7e9ff;border-color:#93c5fd}
.pw-week-divider{border-left:2px solid #8aa3cf}

/* Chapter grid */
.chapter-frame{margin-top:12px}
.chapter-grid{border:1px solid #dde4f1;border-radius:10px;background:var(--panel);padding:8px}
.chapter-grid-inner{display:flex;flex-direction:column;gap:6px}
.ch-header{display:flex;gap:2px}
.ch-day{width:18px;font-size:11px;text-align:center;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.ch-row{display:flex;gap:2px}
.ch-slot{width:18px;height:16px;border:1px solid #d9e0ef;background:#f3f6fb;border-radius:2px;cursor:pointer;flex:0 0 auto}
.ch-slot.active{background:#c7e9ff;border-color:#93c5fd}
.ch-week-divider{border-left:2px solid #8aa3cf}
.chapter-palette{display:flex;flex-direction:row;gap:8px;align-items:center;flex-wrap:wrap}
.chapter-palette .subject-row{padding:4px}
.chapter-palette .subject-btn{padding:4px 8px}
.chapter-palette .subject-row{display:grid;grid-template-columns:28px auto;gap:6px}
.chapter-grid-scroll{overflow-x:auto;overflow-y:hidden}

/* Status frame */
.status-frame.hidden { display:none; }
.status-tabs .btn.small { padding:4px 8px; font-size:0.85rem; }
.status-tabs .btn.small.active { background: var(--muted-2); color: var(--text); }
.status-pane.hidden { display:none; }

/* Revision wise coloring */
.status-cell-completed { background:#d1fae5; }
.status-cell-inprogress { background:#fef9c3; }
.status-row-onhold { background:#fee2e2; }

/* Disabled state for Mark-Completed buttons (engraved look) */
.status-frame .btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  color: #6b7280;
  border-color: #c7cddc;
  background: linear-gradient(#eef2f7, #e3e8f2);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.1);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* Dark theme override */
[data-theme="dark"]{--bg:#0b1020;--fg:#e9eef7;--muted:#9fb0c8;--accent:#6aa2ff;--panel:#121a33}
[data-theme="dark"] .chat-log,[data-theme="dark"] .preview,[data-theme="dark"] .canvas{background:#0e1530;border-color:#223}
[data-theme="dark"] .chat-input input{background:#0e1530;border-color:#223}
[data-theme="dark"] .chat-msg.user{background:#16325c}
[data-theme="dark"] .chat-msg.bot{background:#1d283f}
[data-theme="dark"] .canvas{border-color:#345}
[data-theme="dark"] .section{border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .section input[type="text"], [data-theme="dark"] .section select, [data-theme="dark"] #subjectsList, [data-theme="dark"] #newSubjectInput {
  background: #0e1530;
  border-color: #2c3a58;
}
[data-theme="dark"] .actions .btn {
  border-color: #2c3a58;
}
[data-theme="dark"] .actions .btn:hover {
  background: rgba(106, 162, 255, 0.1);
}
[data-theme="dark"] .planning-table {
  background: var(--panel);
  color: var(--fg);
}
[data-theme="dark"] .planning-table th {
  background: #1b2442;
  border-color: #2c3a58;
  color: var(--fg);
}
[data-theme="dark"] .planning-table td {
  background: #121a33;
  border-color: #2c3a58;
  color: var(--fg);
}
[data-theme="dark"] #notesTable th,
[data-theme="dark"] #notesTable td {
  background: #121a33;
  border-color: #2c3a58;
  color: var(--fg);
}
[data-theme="dark"] .planning-table .notes-btn,
[data-theme="dark"] .planning-table .quiz-btn,
[data-theme="dark"] .planning-table .chat-btn,
[data-theme="dark"] #notesTable .notes-btn,
[data-theme="dark"] #notesTable .quiz-btn,
[data-theme="dark"] #notesTable .chat-btn {
  color: var(--fg);
}
[data-theme="dark"] .planning-table .notes-btn svg path,
[data-theme="dark"] .planning-table .chat-btn svg path,
[data-theme="dark"] #notesTable .notes-btn svg path,
[data-theme="dark"] #notesTable .chat-btn svg path {
  stroke: var(--fg);
  fill: var(--fg);
}
[data-theme="dark"] .quiz-nav-btn {
  background: #121a33;
  border-color: #2c3a58;
  color: var(--fg);
}
[data-theme="dark"] .slot { background: #2c3a58; border-color: #3e4f72; border-radius: 2px; }
[data-theme="dark"] .slot:nth-child(4n) { border-right-color: #4a5b7f; }
[data-theme="dark"] .slot.active { background: #f59e0b; border-color: #f59e0b; }
[data-theme="dark"] input[type="range"] { background: #2c3a58; }
[data-theme="dark"] input[type="range"]::-webkit-slider-thumb { background: #9fb0c8; border-color: #4a5b7f; }
[data-theme="dark"] input[type="range"]::-moz-range-thumb { background: #9fb0c8; border-color: #4a5b7f; }
[data-theme="dark"] ul#files li { border-bottom-color: #2c3a58; }
[data-theme="dark"] ul#files button { border-color: #4a5b7f; }
[data-theme="dark"] .subject-row { border-color: #2c3a58; }
#planDayTable,
.plan-day-table {
  width: auto;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg);
  border: 2px solid var(--muted);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
#planDayTable th,
.plan-day-table th,
#planDayTable td,
.plan-day-table td {
  border-bottom: 1px solid var(--muted);
}
#planDayTable td,
.plan-day-table td {
  padding: 6px 10px;
  border-right: 1px solid var(--muted);
}
#planDayTable td { border-bottom: 1px solid var(--muted); }
#planDayTable th:last-child,
.plan-day-table th:last-child,
#planDayTable td:last-child,
.plan-day-table td:last-child { border-right: 0; }
#planDayTable thead th,
.plan-day-table thead th {
  background: #0b3a8a;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
}
#planDayTable tbody tr:hover td,
.plan-day-table tbody tr:hover td { filter: brightness(0.98); }
#planDayTable thead th:first-child,
.plan-day-table thead th:first-child { border-top-left-radius: 8px; }
#planDayTable thead th:last-child,
.plan-day-table thead th:last-child { border-top-right-radius: 8px; }
#planDayTable tbody tr:last-child td:first-child,
.plan-day-table tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; }
#planDayTable tbody tr:last-child td:last-child,
.plan-day-table tbody tr:last-child td:last-child { border-bottom-right-radius: 8px; }
.alarm-cell { text-align: center; width: 1%; white-space: nowrap; }
.alarm-cell .icon { font-size: 14px; line-height: 1; }

/* Prevent wrapping in Chapter-wise plan data cells (headers may wrap) */
#chapterPlanBody td {
  white-space: nowrap;
}