| |
| :root { |
| --bg: #faf7f5; |
| --bg-card: #ffffff; |
| --bg-card-hover: #f5f1ee; |
| --text-primary: #2c2420; |
| --text-secondary: #7a6a62; |
| --text-muted: #b0a09a; |
| --accent-warm: #c97d4e; |
| --accent-soft: #e8c4a0; |
| --accent-green: #6a9e7a; |
| --accent-amber: #d4a843; |
| --accent-panic: #c97d4e; |
| --border: #e8e0da; |
| --border-card: #ede6e0; |
| --radius: 12px; |
| --radius-sm: 8px; |
| --shadow: 0 2px 8px rgba(44, 36, 32, 0.06); |
| --shadow-card: 0 4px 16px rgba(44, 36, 32, 0.08); |
| --font-serif: 'Instrument Serif', Georgia, serif; |
| --font-mono: 'JetBrains Mono', 'Courier New', monospace; |
| } |
|
|
| |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
|
|
| body { |
| font-family: var(--font-mono); |
| background: var(--bg); |
| color: var(--text-primary); |
| font-size: 15px; |
| line-height: 1.6; |
| min-height: 100vh; |
| } |
|
|
| |
| .app-shell { |
| max-width: 780px; |
| margin: 0 auto; |
| padding: 0 1.5rem 4rem; |
| } |
|
|
| |
| .app-header { |
| padding: 2rem 0 1rem; |
| border-bottom: 1px solid var(--border); |
| margin-bottom: 1.5rem; |
| } |
| .header-inner { display: flex; align-items: baseline; gap: 1rem; } |
| .logo { |
| font-family: var(--font-serif); |
| font-size: 1.8rem; |
| color: var(--text-primary); |
| font-style: italic; |
| } |
| .header-sub { |
| font-size: 0.8rem; |
| color: var(--text-muted); |
| letter-spacing: 0.04em; |
| } |
|
|
| |
| .buddy-area { |
| margin-bottom: 1.5rem; |
| } |
| .buddy-message { |
| background: linear-gradient(135deg, #fff8f0, #fef3e8); |
| border: 1px solid var(--accent-soft); |
| border-radius: var(--radius); |
| padding: 1rem 1.25rem; |
| font-size: 0.9rem; |
| color: var(--text-secondary); |
| line-height: 1.5; |
| } |
| .buddy-warning { |
| background: #fff8ec; |
| border: 1px solid var(--accent-amber); |
| border-radius: var(--radius-sm); |
| padding: 0.75rem 1rem; |
| font-size: 0.85rem; |
| color: #8a6010; |
| margin-top: 0.75rem; |
| } |
|
|
| |
| .section { |
| margin-bottom: 2.5rem; |
| } |
| .section-title { |
| font-family: var(--font-serif); |
| font-size: 1.3rem; |
| font-weight: normal; |
| color: var(--text-primary); |
| margin-bottom: 1rem; |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| } |
| .wip-badge { |
| font-family: var(--font-mono); |
| font-size: 0.75rem; |
| background: var(--border); |
| color: var(--text-secondary); |
| padding: 0.15rem 0.5rem; |
| border-radius: 999px; |
| } |
|
|
| |
| .subjects-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); |
| gap: 1rem; |
| margin-bottom: 1rem; |
| } |
| .subject-card { |
| background: var(--bg-card); |
| border: 1px solid var(--border-card); |
| border-radius: var(--radius); |
| padding: 1.25rem; |
| box-shadow: var(--shadow); |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-start; |
| transition: box-shadow 0.15s; |
| } |
| .subject-card:hover { box-shadow: var(--shadow-card); } |
| .subject-card-header { display: flex; flex-direction: column; gap: 0.25rem; } |
| .subject-name { font-weight: 500; font-size: 1rem; } |
| .subject-semester { font-size: 0.75rem; color: var(--text-muted); } |
|
|
| |
| .micro-step-card { |
| background: var(--bg-card); |
| border: 1.5px solid var(--accent-soft); |
| border-radius: var(--radius); |
| padding: 1.75rem; |
| box-shadow: var(--shadow-card); |
| position: relative; |
| max-width: 520px; |
| } |
| .step-fresh-tag { |
| display: inline-block; |
| font-size: 0.7rem; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| color: var(--accent-warm); |
| background: #fff4eb; |
| border: 1px solid var(--accent-soft); |
| border-radius: 999px; |
| padding: 0.2rem 0.75rem; |
| margin-bottom: 0.75rem; |
| } |
| .step-title { |
| font-family: var(--font-serif); |
| font-size: 1.4rem; |
| font-weight: normal; |
| font-style: italic; |
| color: var(--text-primary); |
| margin-bottom: 0.5rem; |
| line-height: 1.3; |
| } |
| .step-context { |
| font-size: 0.875rem; |
| color: var(--text-secondary); |
| margin-bottom: 1rem; |
| line-height: 1.6; |
| } |
| .step-meta { |
| display: flex; |
| gap: 1rem; |
| margin-bottom: 1.25rem; |
| font-size: 0.78rem; |
| color: var(--text-muted); |
| } |
| .step-duration::before { content: "⏱ "; } |
| .step-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } |
|
|
| |
| .deadlines-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } |
| .deadline-item { |
| background: var(--bg-card); |
| border: 1px solid var(--border-card); |
| border-radius: var(--radius-sm); |
| padding: 0.875rem 1.1rem; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 1rem; |
| } |
| .deadline-panic { |
| border-color: var(--accent-panic); |
| background: #fff9f5; |
| } |
| .deadline-main { display: flex; flex-direction: column; gap: 0.15rem; } |
| .deadline-title { font-size: 0.9rem; font-weight: 500; } |
| .deadline-subject { font-size: 0.75rem; color: var(--text-muted); } |
| .deadline-date { font-size: 0.8rem; color: var(--text-secondary); } |
| .badge-panic { |
| font-size: 0.75rem; |
| background: var(--accent-panic); |
| color: white; |
| padding: 0.2rem 0.6rem; |
| border-radius: 999px; |
| } |
| .empty-hint { font-size: 0.85rem; color: var(--text-muted); font-style: italic; } |
|
|
| |
| .inline-form { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.6rem; |
| align-items: flex-start; |
| margin-top: 1rem; |
| padding: 1rem; |
| background: var(--bg-card); |
| border: 1px dashed var(--border); |
| border-radius: var(--radius-sm); |
| } |
| .deadline-form { flex-direction: column; } |
| .input-field { |
| font-family: var(--font-mono); |
| font-size: 0.85rem; |
| padding: 0.55rem 0.85rem; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| background: var(--bg); |
| color: var(--text-primary); |
| outline: none; |
| transition: border-color 0.15s; |
| flex: 1; |
| min-width: 160px; |
| } |
| .input-field:focus { border-color: var(--accent-warm); } |
| .input-small { max-width: 140px; flex: none; } |
| .input-textarea { min-height: 60px; resize: vertical; width: 100%; } |
|
|
| |
| .btn { |
| font-family: var(--font-mono); |
| font-size: 0.85rem; |
| padding: 0.55rem 1.1rem; |
| border-radius: var(--radius-sm); |
| border: none; |
| cursor: pointer; |
| transition: opacity 0.15s, background 0.15s; |
| white-space: nowrap; |
| } |
| .btn:hover { opacity: 0.85; } |
| .btn-primary { |
| background: var(--accent-warm); |
| color: white; |
| } |
| .btn-secondary { |
| background: var(--accent-green); |
| color: white; |
| } |
| .btn-ghost { |
| background: transparent; |
| border: 1px solid var(--border); |
| color: var(--text-secondary); |
| } |
| .btn-small { font-size: 0.78rem; padding: 0.35rem 0.75rem; } |
|
|
| |
| .deadline-title-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } |
| .badge-endspurt { |
| font-size: 0.7rem; |
| font-weight: 600; |
| letter-spacing: 0.04em; |
| background: var(--accent-amber); |
| color: #5a3a00; |
| padding: 0.15rem 0.55rem; |
| border-radius: 999px; |
| } |
| .deadline-date--panic { color: var(--accent-amber); font-weight: 600; } |
| .deadline-mini-progress { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| margin-top: 0.35rem; |
| } |
| .mini-progress-track { |
| flex: 1; |
| height: 4px; |
| background: var(--border); |
| border-radius: 999px; |
| overflow: hidden; |
| min-width: 60px; |
| } |
| .mini-progress-fill { |
| height: 100%; |
| background: var(--accent-green); |
| border-radius: 999px; |
| transition: width 0.3s ease; |
| } |
| .mini-progress-fill--panic { background: var(--accent-amber); } |
| .mini-progress-label { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; } |
|
|
| |
| .elastic-plan { |
| background: var(--bg-card); |
| border: 1px solid var(--border-card); |
| border-radius: var(--radius); |
| padding: 1.5rem; |
| box-shadow: var(--shadow-card); |
| margin-bottom: 1.5rem; |
| } |
| .elastic-plan--panic { |
| border-color: var(--accent-amber); |
| background: linear-gradient(135deg, #fffcf0, #fff8e0); |
| } |
| .plan-header { margin-bottom: 1.25rem; } |
| .plan-title-row { |
| display: flex; |
| align-items: baseline; |
| gap: 0.75rem; |
| flex-wrap: wrap; |
| margin-bottom: 0.5rem; |
| } |
| .plan-title { |
| font-family: var(--font-serif); |
| font-size: 1.4rem; |
| font-weight: normal; |
| font-style: italic; |
| } |
| .plan-subject { font-size: 0.8rem; color: var(--text-muted); } |
| .plan-time-bar { margin-bottom: 0.75rem; } |
| .time-badge { |
| display: inline-block; |
| font-size: 0.78rem; |
| background: var(--border); |
| color: var(--text-secondary); |
| padding: 0.2rem 0.65rem; |
| border-radius: 999px; |
| } |
| .time-badge--panic { |
| background: var(--accent-amber); |
| color: #5a3a00; |
| font-weight: 600; |
| } |
| .time-badge--soon { background: #f0f7ee; color: var(--accent-green); } |
| .plan-buddy { |
| font-size: 0.875rem; |
| color: var(--text-secondary); |
| padding: 0.75rem 1rem; |
| background: #faf7f5; |
| border-radius: var(--radius-sm); |
| border-left: 3px solid var(--accent-soft); |
| } |
| .plan-buddy--panic { border-left-color: var(--accent-amber); background: #fffbf0; } |
|
|
| |
| .plan-progress { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| margin-bottom: 1.5rem; |
| } |
| .progress-track { |
| flex: 1; |
| height: 6px; |
| background: var(--border); |
| border-radius: 999px; |
| overflow: hidden; |
| } |
| .progress-fill { |
| height: 100%; |
| background: var(--accent-green); |
| border-radius: 999px; |
| transition: width 0.4s ease; |
| } |
| .progress-label { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; } |
|
|
| |
| .plan-timeline { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.5rem; } |
| .timeline-step { |
| display: flex; |
| gap: 1rem; |
| position: relative; |
| padding-bottom: 1.25rem; |
| } |
| .timeline-step:last-child { padding-bottom: 0; } |
| .timeline-step::before { |
| content: ''; |
| position: absolute; |
| left: 7px; |
| top: 16px; |
| bottom: 0; |
| width: 2px; |
| background: var(--border); |
| } |
| .timeline-step:last-child::before { display: none; } |
| .timeline-dot { |
| width: 16px; |
| height: 16px; |
| border-radius: 50%; |
| flex-shrink: 0; |
| margin-top: 2px; |
| position: relative; |
| z-index: 1; |
| } |
| .timeline-dot--done { |
| background: var(--accent-green); |
| opacity: 0.5; |
| } |
| .timeline-dot--active { |
| background: var(--accent-warm); |
| box-shadow: 0 0 0 3px rgba(201,125,78,0.15); |
| } |
| .timeline-dot--panic { |
| background: var(--accent-amber); |
| box-shadow: 0 0 0 3px rgba(212,168,67,0.2); |
| } |
| .timeline-content { flex: 1; } |
| .timeline-content--done { opacity: 0.5; } |
| .timeline-title { |
| display: block; |
| font-size: 0.9rem; |
| font-weight: 500; |
| margin-bottom: 0.2rem; |
| } |
| .timeline-context { |
| display: block; |
| font-size: 0.8rem; |
| color: var(--text-secondary); |
| margin-bottom: 0.25rem; |
| line-height: 1.5; |
| } |
| .timeline-duration { font-size: 0.72rem; color: var(--text-muted); } |
|
|
| |
| .plan-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } |
|
|
| |
| .buddy-skip-msg { |
| font-size: 0.82rem; |
| color: var(--text-secondary); |
| font-style: italic; |
| margin-bottom: 0.75rem; |
| padding: 0.5rem 0.75rem; |
| background: #faf7f5; |
| border-radius: var(--radius-sm); |
| border-left: 2px solid var(--accent-soft); |
| } |
|
|
