:root {
  --base03: #002b36; --base02: #073642; --base01: #586e75; --base00: #657b83;
  --base0: #839496;  --base1: #93a1a1;  --base2: #eee8d5;  --base3: #fdf6e3;
  --yellow: #b58900; --orange: #cb4b16; --red: #dc322f;    --magenta: #d33682;
  --violet: #6c71c4; --blue: #268bd2;   --cyan: #2aa198;   --green: #859900;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--base03); color: var(--base0);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

#next-btn {
  position: fixed; top: 16px; left: 16px; z-index: 50;
  background: var(--base02); color: var(--base2);
  border: 1px solid var(--base01); border-radius: 6px;
  padding: 8px 14px; font-size: 13px; cursor: pointer;
  font-family: inherit;
}
#next-btn:hover { background: var(--base01); }

#board { position: fixed; inset: 0; }

.goal-card {
  position: absolute;
  background: var(--base02);
  border: 1px solid var(--base01);
  border-left: 3px solid var(--base01);
  border-radius: 6px;
  padding: 8px 10px;
  width: 220px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.goal-card:active { cursor: grabbing; }

.goal-keyword { color: var(--base2); font-size: 14px; font-weight: 600; line-height: 1.2; }
.goal-meta { display: flex; gap: 6px; font-size: 9px; color: var(--base01);
             text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.goal-tf { color: var(--base1); }
.goal-desc { margin-top: 6px; color: var(--base0); font-size: 11px; line-height: 1.35; }
.goal-desc-item { margin: 0; padding: 0 0 2px 10px; text-indent: -8px; }
.goal-desc-item::before { content: "·  "; color: var(--base01); }

/* Hotspot palette */
.goal-card.hs-art       { border-left-color: var(--magenta); }
.goal-card.hs-money     { border-left-color: var(--red); }
.goal-card.hs-body      { border-left-color: var(--orange); }
.goal-card.hs-health    { border-left-color: var(--orange); }
.goal-card.hs-admin     { border-left-color: var(--yellow); }
.goal-card.hs-social    { border-left-color: var(--cyan); }
.goal-card.hs-god       { border-left-color: var(--blue); }
.goal-card.hs-faith     { border-left-color: var(--blue); }
.goal-card.hs-world     { border-left-color: var(--green); }
.goal-card.hs-interests { border-left-color: var(--green); }
.goal-card.hs-sex       { border-left-color: var(--violet); }
.goal-card.hs-art       .goal-meta-hs { color: var(--magenta); }
.goal-card.hs-money     .goal-meta-hs { color: var(--red); }
.goal-card.hs-body      .goal-meta-hs { color: var(--orange); }
.goal-card.hs-health    .goal-meta-hs { color: var(--orange); }
.goal-card.hs-admin     .goal-meta-hs { color: var(--yellow); }
.goal-card.hs-social    .goal-meta-hs { color: var(--cyan); }
.goal-card.hs-god       .goal-meta-hs { color: var(--blue); }
.goal-card.hs-faith     .goal-meta-hs { color: var(--blue); }
.goal-card.hs-world     .goal-meta-hs { color: var(--green); }
.goal-card.hs-interests .goal-meta-hs { color: var(--green); }
.goal-card.hs-sex       .goal-meta-hs { color: var(--violet); }

/* Login */
.login-body { display: flex; align-items: center; justify-content: center; height: 100vh; }
.login-form { background: var(--base02); padding: 24px; border: 1px solid var(--base01);
              border-radius: 10px; min-width: 280px; }
.login-form h1 { color: var(--blue); margin: 0 0 16px; font-size: 18px; }
.login-form input { width: 100%; padding: 8px 10px; margin-bottom: 8px;
                    background: var(--base03); border: 1px solid var(--base01);
                    color: var(--base1); border-radius: 6px; font-family: inherit; }
.login-form button { width: 100%; padding: 8px; background: var(--blue);
                     color: var(--base03); border: none; border-radius: 6px;
                     font-weight: 600; cursor: pointer; }
.login-form .error { color: var(--red); margin-top: 8px; min-height: 18px; font-size: 12px; }