:root { --card:rgba(255,255,255,.5); --card-h:rgba(255,255,255,.7); --text:#1d2329; --muted:#5d6873;
        --line:rgba(255,255,255,.75); --shadow:0 6px 24px rgba(20,40,70,.08); --up:#1f9d55; --down:#d93025; }
* { box-sizing:border-box; }
/* white + blue only, no dark mode (user 2026-10-25) */
html { min-height:100%; color-scheme:light; background-color:#eef5fe;
  /* white and light blue mixed evenly over the whole page, no strong blue on one side */
  background-image:radial-gradient(circle at 10% 20%,rgba(255,255,255,.9) 0,transparent 30%),
    radial-gradient(circle at 80% 15%,rgba(214,232,252,.9) 0,transparent 32%),
    radial-gradient(circle at 45% 55%,rgba(255,255,255,.8) 0,transparent 35%),
    radial-gradient(circle at 15% 85%,rgba(214,232,252,.9) 0,transparent 30%),
    radial-gradient(circle at 85% 80%,rgba(255,255,255,.85) 0,transparent 32%);
  background-attachment:fixed; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; color:var(--text); font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
/* everything sits in the middle of the screen */
main { flex:1; width:100%; max-width:1200px; margin:0 auto; padding:40px 48px; display:flex; flex-direction:column; justify-content:center; }
/* home: greeting at the top, company cards in the middle of the space left */
.top { margin-bottom:8px; }
.center { margin:auto 0; }
.greet { font-size:30px; font-weight:700; margin:0; text-align:center; }
.date { color:var(--muted); margin:6px 0 32px; text-align:center; }
.back { display:block; width:fit-content; margin-bottom:16px; color:var(--muted); text-decoration:none; font-size:15px; }
.back:hover { color:#0a5fa8; }
h1.brand { margin:0 0 28px; }
h1.brand img { display:block; height:56px; width:auto; max-width:70vw; object-fit:contain; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:24px; }
.tile { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:14px; padding:28px 20px; min-height:170px; border-radius:16px;
        background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);
        -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:inherit; text-decoration:none; transition:background .15s; }
a.tile:hover { background:var(--card-h); }
.ic { width:68px; height:68px; flex:none; display:grid; place-items:center; border-radius:16px; font-size:34px; background:rgba(10,95,168,.08); }
.lb { font-size:19px; font-weight:600; }
.lb small { display:block; font-size:13px; font-weight:500; color:var(--muted); margin-top:2px; }
.tile.soon { opacity:.5; cursor:default; }
/* status: dot on every app card, summary line on the company cards */
.dot { position:absolute; top:14px; right:14px; width:10px; height:10px; border-radius:50%; background:transparent; }
.dot.up { background:var(--up); }
.dot.down { background:var(--down); box-shadow:0 0 0 4px rgba(217,48,37,.15); }
.big { grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
.big .tile { flex-direction:column; justify-content:center; gap:14px; min-height:190px; padding:32px 28px; }
.big .tile picture { width:85%; display:flex; justify-content:center; }
.big .tile img { max-width:100%; max-height:90px; object-fit:contain; }
.sum { font-size:14px; color:var(--muted); min-height:1.2em; }
.sum.ok::before, .sum.bad::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:1px; }
.sum.ok::before { background:var(--up); }
.sum.bad { color:var(--down); font-weight:600; }
.sum.bad::before { background:var(--down); }
/* footer on every page */
.foot { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:16px 48px; font-size:13px; color:var(--muted);
        border-top:1px solid rgba(10,95,168,.1); background:rgba(255,255,255,.45); }
@media (max-width:600px) { .foot { padding:14px 16px; justify-content:center; text-align:center; } }
@media (max-width:600px) { main { padding:24px 16px; } .grid { gap:14px; grid-template-columns:repeat(2,1fr); } .big { grid-template-columns:1fr; } .tile { min-height:140px; padding:20px 12px; } .lb { font-size:16px; } .greet { font-size:24px; } }
/* sign-in page */
form.login { flex-direction:column; align-items:stretch; gap:14px; width:100%; max-width:380px; margin:0 auto; padding:32px 28px; }
form.login h1 { margin:0 0 6px; font-size:24px; text-align:center; }
form.login label { display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--muted); }
form.login input { font:inherit; color:var(--text); padding:11px 12px; border-radius:10px; border:1px solid #c9d8ea; background:rgba(255,255,255,.85); }
form.login input:focus { outline:2px solid #0a5fa8; outline-offset:0; border-color:transparent; }
form.login button { font:inherit; font-weight:600; margin-top:6px; padding:12px; border:0; border-radius:10px; background:#0a5fa8; color:#fff; cursor:pointer; }
form.login button:hover { background:#084d89; }
.err { margin:0; padding:10px 12px; border-radius:10px; background:rgba(217,48,37,.08); color:var(--down); font-size:14px; }
/* navbar: brand · search · signed-in user */
.nav { position:sticky; top:0; z-index:10; height:64px; display:flex; align-items:center; gap:16px; padding:0 24px;
       background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid rgba(10,95,168,.1); }
.nav-brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; color:var(--text); text-decoration:none; white-space:nowrap; }
.nav-ic { width:32px; height:32px; display:grid; place-items:center; border-radius:9px; background:#0a5fa8; color:#fff; font-size:17px; }
.search { position:relative; flex:1; max-width:520px; margin:0 auto; }
.search input { width:100%; font:inherit; font-size:15px; padding:10px 14px 10px 38px; border-radius:12px; border:1px solid #c9d8ea;
  background:rgba(255,255,255,.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235d6873' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") 13px center no-repeat; color:var(--text); }
.search input:focus { outline:2px solid #0a5fa8; border-color:transparent; }
.results { position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border-radius:12px; box-shadow:0 12px 32px rgba(20,40,70,.16);
           padding:6px; max-height:60vh; overflow:auto; }
.results a, .results .none { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px; color:var(--text); text-decoration:none; }
.results a.on, .results a:hover { background:#eef5fe; }
.results .r-ic { font-size:20px; width:28px; text-align:center; }
.results .r-co { margin-left:auto; font-size:13px; color:var(--muted); }
.results .soon { opacity:.5; }
.results .none { color:var(--muted); }
.me { position:relative; }
.me-btn { display:flex; align-items:center; gap:10px; font:inherit; color:var(--text); background:transparent; border:0; cursor:pointer; padding:4px 6px; border-radius:12px; }
.me-btn:hover { background:rgba(10,95,168,.07); }
.av { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#0a5fa8,#4f9be0); color:#fff; font-weight:700; }
.me-name { font-weight:600; font-size:15px; }
.me-menu { position:absolute; right:0; top:calc(100% + 8px); width:320px; background:#fff; border-radius:14px; box-shadow:0 12px 32px rgba(20,40,70,.18); padding:18px; }
.me-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.me-head .av { width:48px; height:48px; font-size:20px; }
.me-head b { display:block; font-size:17px; }
.me-head div span { color:var(--muted); font-size:13px; }
.me-head .av { color:#fff; }
.me-row { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid #eef1f5; font-size:14px; }
.me-row span:first-child { color:var(--muted); }
.me-row span:last-child { text-align:right; }
.me-sub { margin:12px 0 4px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.me-log { font-size:13px; display:flex; justify-content:space-between; gap:10px; padding:6px 0; }
.me-log small { display:block; color:var(--muted); font-size:12px; }
.me-t { white-space:nowrap; color:var(--muted); }
.me-log.bad b, .me-log.bad { color:var(--down); }
.me-out { display:block; margin-top:14px; text-align:center; padding:10px; border-radius:10px; background:#eef5fe; color:#0a5fa8; font-weight:600; text-decoration:none; }
.me-out:hover { background:#dcebfc; }
@media (max-width:700px) { .nav { padding:0 12px; gap:10px; } .me-name { display:none; } .nav-brand { font-size:0; }
  .nav-brand .nav-ic { font-size:17px; } .me-menu { width:calc(100vw - 24px); right:-6px; } }