:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #08101d;
  color: #f7f9ff;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 10% 0, #183251 0, transparent 38%), #08101d; }
.centered { display: grid; place-items: center; padding: 24px; }
.shell { width: min(1080px, calc(100% - 40px)); margin: auto; padding: 56px 0; }
header { display: flex; gap: 24px; justify-content: space-between; align-items: flex-end; margin-bottom: 34px; }
h1 { margin: .2rem 0; font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1; }
.eyebrow, em { font-size: .75rem; text-transform: uppercase; letter-spacing: .13em; color: #7ed7c4; }
.who { color: #aebbd0; text-align: right; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.app { container-type: inline-size; display: flex; min-height: 150px; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid #293954; border-radius: 18px; background: #111c2dcc; color: inherit; text-decoration: none; transition: .2s; }
.app:hover { transform: translateY(-3px); border-color: #69c9b5; background: #16253a; }
/* Project names are one long unbreakable word often enough - Minecraft-
   MemoryAtlas is 20 characters - and the status dot sits at the top-right of
   the same card. Sizing against the VIEWPORT does not help, because what runs
   out is the CARD: the grid packs three columns at 900px and one at 375px, so
   the widest viewport has the narrowest cards. cqi is a percentage of this
   card's own width, which is the thing that actually constrains the text.

   8cqi is the largest that keeps the longest name here - 20 characters - on
   one line down to the grid's 240px minimum, measured rather than guessed.
   overflow-wrap stays as a floor for a name longer than any of today's,
   where a mid-word break still beats text sitting under the dot. */
.app .title {
  font-size: clamp(1rem, 8cqi, 1.35rem);
  font-weight: 700;
  line-height: 1.25;
  padding-right: 20px;
  overflow-wrap: anywhere;
}
.app small { color: #afbdd3; line-height: 1.45; flex: 1; }
.app em { font-style: normal; }
.empty, .status { padding: 18px; border: 1px dashed #394b68; border-radius: 14px; color: #aebbd0; }
.status:empty { display: none; }
[hidden] { display: none !important; }
.app { position: relative; }
.dot { position: absolute; top: 26px; right: 22px; width: 10px; height: 10px; border-radius: 50%; background: #4a5a74; flex: none; }
.dot.up { background: #52d1a4; box-shadow: 0 0 0 4px #52d1a422; }
.dot.down { background: #e2606b; box-shadow: 0 0 0 4px #e2606b22; }
/* Deliberately the loudest thing on the page: the whole risk of a "view as"
   mode is forgetting you are in one. */
.preview-banner {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin-bottom: 26px; padding: 14px 18px; border-radius: 14px;
  border: 1px solid #c98a2e; background: #2a1e08; color: #ffd9a0;
}
.preview-banner strong { font-size: 1rem; }
.preview-banner span { color: #e3c08a; font-size: .9rem; flex: 1 1 260px; }
.preview-banner a { color: #ffe9c7; font-weight: 700; white-space: nowrap; }
.code-hint { margin-top: 14px; padding: 14px; border: 1px solid #2c4a63; border-radius: 12px; background: #102133; color: #9fd8ff; font-size: .9rem; }
input { width: 100%; padding: 14px; margin: 6px 0 16px; border: 1px solid #33415f; border-radius: 12px; background: #0d1526; color: inherit; font: inherit; letter-spacing: .08em; }
input:focus { outline: 2px solid #69c9b5; border-color: transparent; }
label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: #8fa2bd; }
button { width: 100%; padding: 14px; border: 0; border-radius: 12px; background: #69c9b5; color: #06221c; font: inherit; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .55; cursor: progress; }
.card { width: min(560px, 100%); padding: 32px; border: 1px solid #2c385a; border-radius: 22px; background: #151c31; box-shadow: 0 24px 80px #0008; }
.enroll-card p { color: #b9c5df; line-height: 1.6; }
footer { margin-top: 36px; color: #75849c; font-size: .85rem; }
.logout { color: #aebbd0; }

@media (max-width: 650px) {
  header { align-items: flex-start; flex-direction: column; }
  .who { text-align: left; }
}