#study-app {
  --tool-ink: #2C3E50; --tool-action: #3498DB; --tool-action-strong: #21618C;
  --tool-action-pressed: #1B4F72; --tool-action-soft: #EBF5FB; --tool-action-border: #BDE0F5;
  --tool-surface: #FFFFFF; --tool-text: #333333; --tool-muted: #566573;
  --tool-danger: #B03A2E; --tool-success: #196F3D; --tool-shadow: 0 14px 40px rgba(44,62,80,.12);
  --type-title: 24px; --type-section: 17px; --type-body: 15px; --type-small: 13px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  margin-block: var(--space-8); color: var(--tool-text); word-break: keep-all; overflow-wrap: anywhere;
}
#study-app [hidden] { display: none !important; }
#study-app .tool-header { padding-block: var(--space-6); }
#study-app h2 { font-size: var(--type-title); color: var(--tool-ink); margin-bottom: var(--space-3); }
#study-app h3 { font-size: var(--type-section); color: var(--tool-ink); margin-bottom: var(--space-2); }
#study-app .study-copy { font-size: var(--type-body); white-space: pre-wrap; margin-block: var(--space-3); line-height: 1.7; }
#study-app .study-nav, #study-app .study-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
#study-app .study-nav { margin-bottom: var(--space-4); }
#study-app .tool-surface { background: var(--tool-surface); padding: var(--space-6); border-radius: var(--space-4); box-shadow: var(--tool-shadow); }
#study-app .tool-info-card { padding: var(--space-4); margin-block: var(--space-4); background: var(--tool-action-soft); border-radius: var(--space-3); min-width: 0; }
#study-app .tool-button { min-height: 44px; max-width: 100%; padding: var(--space-3) var(--space-4); margin: var(--space-1); border: 1px solid transparent; border-radius: var(--space-2); background: var(--tool-action-strong); color: var(--tool-surface); font: inherit; font-size: var(--type-body); cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
#study-app .tool-button:hover, #study-app .tool-button:active { background: var(--tool-action-pressed); }
#study-app .tool-button.secondary { background: var(--tool-surface); color: var(--tool-action-strong); border-color: var(--tool-action-border); }
#study-app .tool-button.secondary:hover, #study-app .tool-button[aria-pressed="true"] { background: var(--tool-action-strong); color: var(--tool-surface); }
#study-app .tool-button.danger { background: var(--tool-danger); }
#study-app .tool-button:disabled { opacity: .55; cursor: default; }
#study-app :is(button, input, textarea, select, a):focus-visible { outline: 3px solid var(--tool-action); outline-offset: 3px; }
#study-app .study-field { display: grid; gap: var(--space-2); margin-block: var(--space-4); font-size: var(--type-body); min-width: 0; }
#study-app :is(input, select, textarea) { width: 100%; min-width: 0; min-height: 44px; padding: var(--space-3); border: 1px solid var(--tool-muted); border-radius: var(--space-2); font: inherit; background: var(--tool-surface); color: var(--tool-text); }
#study-app textarea { resize: vertical; }
#study-app .tool-status { padding: var(--space-3); color: var(--tool-success); min-height: 44px; }
#study-app .tool-status:empty { display: none; }
#study-app .tool-status.error { color: var(--tool-danger); }
#study-app .study-clock { font-size: var(--type-title); font-weight: 800; padding: var(--space-6); text-align: center; font-variant-numeric: tabular-nums; }
#study-app .study-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); max-width: 320px; margin: var(--space-4) auto; }
#study-app .study-grid > div { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--space-2); background: var(--tool-surface); font-size: var(--type-title); }
#study-app .study-grid .active { background: var(--tool-action-strong); color: var(--tool-surface); }
@media (max-width: 480px) { #study-app .tool-surface { padding: var(--space-3); } #study-app .study-nav .tool-button { flex: 1 1 28%; margin: 0; } }