/* ==============================================================
   Chronosphere ? Shared panel styles
   ============================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #f5efe6;
  --accent:  #116466;
  --accent2: #2c3531;
  --text:    #2c3531;
  --text-dim:#5f7471;
  --green:   #2f8f6a;
  --red:     #b85c52;
  --yellow:  #b9814c;
  --shadow-soft: 0 18px 48px rgba(44,53,49,0.08);
  --shadow-card: 0 8px 24px rgba(44,53,49,0.06);
}

body {
  color: var(--text);
  font-family: 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif;
  font-size: 14px;
  min-height: 100vh;
}

/* -- Keyframes -- */
@keyframes spin { to { transform: rotate(360deg); } }

/* -- Utility classes -- */
.d-none        { display: none !important; }
.d-flex        { display: flex; }
.d-flex-center { display: flex; align-items: center; }
.gap-4  { gap: 4px; }
.gap-6  { gap: 6px; }
.gap-8  { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-24 { gap: 24px; }
.flex-1    { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.flex-col  { flex-direction: column; }
.items-start { align-items: flex-start; }
.w-auto { width: auto; }
.w-full { width: 100%; }
.full-size { width: 100%; height: 100%; }
.overflow-hidden { overflow: hidden; }
.cursor-pointer { cursor: pointer; }
.ml-4  { margin-left: 4px; }
.ml-6  { margin-left: 6px; }
.mr-auto { margin-right: auto; }
.mt-2  { margin-top: 2px; }
.mt-8  { margin-top: 8px; }
.mt-20 { margin-top: 20px; }
.mb-6  { margin-bottom: 6px; }
.mb-8  { margin-bottom: 8px; }
.mb-0  { margin-bottom: 0; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.p-8   { padding: 8px; }
.p-12  { padding: 12px; }
.px-12 { padding-left: 12px; padding-right: 12px; }
.py-0  { padding-top: 0; padding-bottom: 0; }
.py-12 { padding-top: 12px; padding-bottom: 12px; }
.py-20 { padding-top: 20px; padding-bottom: 20px; }
.text-error    { color: var(--red); }
.text-dim      { color: var(--text-dim); }
.text-hint     { font-size: 11px; color: var(--text-dim); }
.text-xs       { font-size: 10px; }
.text-sm       { font-size: 11px; }
.text-12       { font-size: 12px; }
.text-13       { font-size: 13px; }
.text-28       { font-size: 28px; }
.text-italic   { font-style: italic; }
.text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.font-mono     { font-family: 'Courier New', monospace; }
.font-600      { font-weight: 600; }
.font-700      { font-weight: 700; }
.uppercase     { text-transform: uppercase; }
.ls-1          { letter-spacing: 1px; }
.lh-16         { line-height: 1.6; }
.lh-145        { line-height: 1.45; }
.section-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.hint-box      { padding: 14px; border-radius: var(--radius); background: var(--bg2); border: 1px solid var(--border); color: var(--text-dim); font-size: 12px; line-height: 1.45; }