/* ============================================================
   Employee Experience Domain — Productivity Services Team
   Brand palette (brand book)
   ============================================================ */
:root {
  --c-primary: #00927B;   /* primary teal */
  --c-lime:    #92D400;   /* success / progress */
  --c-grey:    #535353;   /* neutral text */
  --c-purple:  #993399;   /* accent */
  --c-red:     #D53F15;   /* danger / locked */
  --c-amber:   #FBBA00;   /* prize / highlight */
  --c-cyan:    #62C3D5;   /* info */

  --bg:        #0d1614;   /* deep teal-black */
  --bg-2:      #12211d;
  --card:      #16241f;
  --card-2:    #1c2e28;
  --line:      #2a3d36;
  --text:      #e8f1ee;
  --text-dim:  #9fb3ac;

  --radius: 14px;
  --shadow: 0 8px 28px rgba(0,0,0,.38);
  --font: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: 'Cascadia Code', 'Consolas', 'JetBrains Mono', monospace;
}

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

body {
  font-family: var(--font);
  background: radial-gradient(1200px 600px at 80% -10%, rgba(0,146,123,.18), transparent 60%),
              radial-gradient(900px 500px at 0% 110%, rgba(98,195,213,.10), transparent 55%),
              var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}

a { color: var(--c-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- brand header ---- */
.brandbar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 26px;
  background: linear-gradient(90deg, rgba(0,146,123,.22), rgba(0,146,123,0));
  border-bottom: 1px solid var(--line);
}
.brandbar .logo {
  width: 42px; height: 42px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, var(--c-primary), var(--c-lime));
  display: grid; place-items: center; font-weight: 800; color: #03110d; font-size: 20px;
}
.brandbar h1 { font-size: 1.05rem; font-weight: 700; letter-spacing: .2px; }
.brandbar .sub { font-size: .76rem; color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase; }
.brandbar .spacer { flex: 1; }

/* ---- mode pill ---- */
.mode-pill {
  font-family: var(--mono); font-size: .8rem; font-weight: 700;
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line);
}
.mode-FREE { color: var(--c-lime); border-color: var(--c-lime); }
.mode-FULL { color: var(--c-purple); border-color: var(--c-purple); }

/* ---- layout ---- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 26px; }
.grid { display: grid; gap: 18px; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ---- card ---- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.card .body { padding: 18px; }

/* ---- buttons ---- */
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--card-2); color: var(--text);
  padding: 9px 16px; border-radius: 10px; transition: .15s;
}
.btn:hover { border-color: var(--c-primary); }
.btn-primary { background: var(--c-primary); border-color: var(--c-primary); color: #03110d; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-amber { background: var(--c-amber); border-color: var(--c-amber); color: #2a1f00; }
.btn-danger { background: transparent; border-color: var(--c-red); color: var(--c-red); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 5px 10px; font-size: .82rem; border-radius: 8px; }

input, select, textarea {
  font: inherit; color: var(--text); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; width: 100%;
}
label { font-size: .82rem; color: var(--text-dim); display: block; margin-bottom: 5px; }

/* ---- difficulty / badges ---- */
.badge { font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .6px;
  padding: 3px 9px; border-radius: 6px; text-transform: uppercase; display: inline-block; }
.diff-easy   { background: rgba(146,212,0,.14);  color: var(--c-lime); }
.diff-medium { background: rgba(98,195,213,.14); color: var(--c-cyan); }
.diff-hard   { background: rgba(213,63,21,.16);  color: var(--c-red); }
.diff-bonus  { background: rgba(153,51,153,.16); color: var(--c-purple); }
.badge-points{ background: rgba(251,186,0,.14);  color: var(--c-amber); }

/* ---- progress bar ---- */
.bar { height: 14px; background: var(--bg-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-lime)); transition: width .6s ease; }

/* ---- status dot ---- */
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-locked { background: var(--c-red); }
.dot-open   { background: var(--c-cyan); }
.dot-done   { background: var(--c-lime); }

.muted { color: var(--text-dim); }
.mono { font-family: var(--mono); }
.center { text-align: center; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }