@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap');

:root {
  --bg:      #08090f;
  --surface: #0f1117;
  --border:  #1a2235;
  --text:    #e2e8f0;
  --muted:   #4a5568;

  /* Goal states */
  --planned:  #38bdf8;
  --active:   #22c55e;
  --paused:   #f59e0b;
  --done:     #3b82f6;
  --failed:   #f43f5e;

  /* Analytics */
  --metric:   #a78bfa;
}

body {
  background: var(--bg); color: var(--text);
  font-family: 'Space Mono', monospace; min-height: 100vh;
  background-image:
    radial-gradient(ellipse at 5% 0%,   rgba(34,197,94,0.05)  0%, transparent 45%),
    radial-gradient(ellipse at 95% 95%, rgba(167,139,250,0.05) 0%, transparent 45%);
}

.syne { font-family: 'Syne', sans-serif; }
.hidden-view { display: none !important; }

/* MODAL */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.82); z-index:50; display:flex; align-items:center; justify-content:center; padding:16px; }
.modal-box { background:#0f1117; border:1px solid #1a2235; border-radius:12px; padding:28px; width:100%; max-width:640px; max-height:90vh; overflow-y:auto; }

/* FORM INPUTS */
.fi { width:100%; background:#0a0c12; border:1px solid #1a2235; border-radius:6px; padding:8px 10px; font-size:12px; color:var(--text); font-family:'Space Mono',monospace; outline:none; transition:border-color 0.15s; }
.fi:focus { border-color:#2a3a55; }
.fi-label { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:#4a5568; display:block; margin-bottom:5px; }

/* CARDS */
.card { background:#0f1117; border:1px solid #1a2235; border-radius:10px; }

/* BARS */
.bar-bg { background:#1a2235; border-radius:3px; height:6px; overflow:hidden; }
.bar-fill { height:100%; border-radius:3px; transition:width 0.5s ease; }

/* SCROLLBAR */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:#1a2235; border-radius:3px; }

/* UTILITY */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}