:root{
  color-scheme:dark;
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:#eaf3ee;
  background:#091512;
  --felt:#184739;
  --felt-deep:#0c1f18;
  --card:#12261fd9;
  --card-hover:#1a3429;
  --line:#365346;
  --line-hi:#6faf88;
  --mint:#8fd6ad;
  --mint-soft:#c6e9cd;
  --gold:#e6c17a;
  --blue:#91cbd8;
  --coral:#f4b0a4;
  --ok:#3dd68c;
  --ok-bg:#143528;
  --bad:#f4b0a4;
  --bad-bg:#3a1f1c;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(ellipse at 12% -10%,rgba(47,138,90,.38) 0%,transparent 55%),
    radial-gradient(ellipse at 90% 0,rgba(24,71,57,.45) 0%,transparent 45%),
    #091512;
}

main{
  max-width:1140px;margin:auto;
  padding:max(28px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
}

header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand-block{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand{font-size:22px;font-weight:700;letter-spacing:.2px}
.brand-sub{font-size:12px;color:#92b9a2;letter-spacing:.4px}
.badge{
  border:1px solid rgba(111,175,136,.45);
  border-radius:999px;
  padding:5px 14px;
  color:#c5ddcf;
  font-size:12px;
  background:linear-gradient(180deg,rgba(47,90,70,.35),rgba(18,40,30,.45));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  white-space:nowrap;
}

.intro{margin:70px 0 36px}
.eyebrow{color:#92b9a2;font-size:13px;letter-spacing:2.2px;margin:0 0 6px;text-transform:none}
h1{font-size:clamp(32px,5vw,52px);line-height:1.15;margin:0 0 10px;font-weight:750}
.lede,.intro p{color:#adc2b8;margin:0;max-width:36em}
p{color:#adc2b8}

.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.mode{
  position:relative;
  display:flex;flex-direction:column;
  min-height:285px;
  padding:26px 24px;
  border:1px solid var(--line);
  border-radius:22px;
  background:
    linear-gradient(165deg,rgba(255,255,255,.06),transparent 42%),
    linear-gradient(180deg,#163028cc,#0f221ad9);
  color:inherit;text-decoration:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 10px 28px rgba(0,0,0,.28);
  transition:background .18s ease,transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  outline:none;
}
.mode::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(143,214,173,.08);
}
.mode:hover{
  background:
    linear-gradient(165deg,rgba(255,255,255,.09),transparent 45%),
    linear-gradient(180deg,#1c3c31,#143028);
  transform:translateY(-4px);
  border-color:var(--line-hi);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 16px 34px rgba(0,0,0,.38),
    0 0 0 1px rgba(111,175,136,.25);
}
.mode:active{
  transform:translateY(-1px) scale(.992);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 16px rgba(0,0,0,.3);
}
.mode:focus-visible{
  outline:3px solid #b9dfc2;
  outline-offset:4px;
}
.mode.has-resume{border-color:rgba(230,193,122,.55)}
.mode.has-resume:hover{border-color:var(--gold)}

.mode-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.icon{font-size:34px;line-height:1.2;color:var(--mint)}
.gold{color:var(--gold)}
.blue{color:var(--blue)}
.resume-badge{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:700;letter-spacing:.3px;
  color:#1a1408;background:linear-gradient(180deg,#f0d08a,#d4a84e);
  border-radius:999px;padding:3px 10px;
  box-shadow:0 1px 0 rgba(255,255,255,.35),0 4px 10px rgba(0,0,0,.25);
}
.resume-badge[hidden]{display:none!important}

h2{font-size:22px;margin:14px 0 4px;font-weight:700}
.mode p{font-size:14px;margin:8px 0 22px;line-height:1.5;flex:0 0 auto}
.resume{
  margin-top:auto;
  color:var(--mint-soft);
  font-size:14px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
}
.resume::after{content:"→";opacity:.75;transition:transform .15s ease}
.mode:hover .resume::after{transform:translateX(3px)}

.save-note{font-size:14px;max-width:840px;margin:26px 0 42px;line-height:1.55}

footer{border-top:1px solid #2b4136;padding-top:24px;font-size:12px;color:#b0c4b8}
footer p{margin:8px 0;color:#9bb0a6}
.status-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.status-pill{
  display:inline-flex;align-items:center;gap:8px;
  min-height:36px;
  padding:6px 14px 6px 12px;
  border-radius:999px;
  font-size:13px;font-weight:600;
  border:1px solid #416554;
  background:#12241c;
  color:#cfe3d6;
}
.status-pill::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:#7a9a88;box-shadow:0 0 0 3px rgba(122,154,136,.2);
  flex-shrink:0;
}
.status-pill[data-online="true"]{
  color:#d7f7e6;border-color:rgba(61,214,140,.45);background:var(--ok-bg);
}
.status-pill[data-online="true"]::before{
  background:var(--ok);box-shadow:0 0 0 3px rgba(61,214,140,.22);
}
.status-pill[data-online="false"]{
  color:#ffe1db;border-color:rgba(244,176,164,.5);background:var(--bad-bg);
}
.status-pill[data-online="false"]::before{
  background:var(--coral);box-shadow:0 0 0 3px rgba(244,176,164,.2);
}
.btn-secondary{
  min-height:40px;
  margin:0;
  border:1px solid #547862;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  color:#d4ebdc;
  padding:8px 14px;
  cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;
  transition:background .15s,border-color .15s,transform .1s;
}
.btn-secondary:hover{background:rgba(255,255,255,.07);border-color:#6faf88}
.btn-secondary:active{transform:scale(.98)}
.btn-secondary:disabled{opacity:.5;cursor:default}
.btn-secondary:focus-visible,
.mode:focus-visible{outline:3px solid #b9dfc2;outline-offset:4px}

@media (max-width:700px){
  .intro{margin:40px 0 28px}
  .modes{grid-template-columns:1fr}
  .mode{min-height:210px;padding:22px 20px}
  .brand{font-size:20px}
  .badge{font-size:11px;padding:4px 10px}
  main{padding-left:20px;padding-right:20px}
  .save-note{margin-bottom:26px}
}

/* === VIEWPORT FIT home one-screen === */
body.home-page{
  min-height:100dvh;max-height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;
}
body.home-page > main{
  flex:1;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;
  padding-top:max(16px,env(safe-area-inset-top));
  padding-bottom:max(12px,env(safe-area-inset-bottom));
}
body.home-page .intro{margin:14px 0 12px}
body.home-page h1{font-size:clamp(26px,3.8vw,38px);margin:4px 0 6px;line-height:1.12}
body.home-page .lede{font-size:14px}
body.home-page .modes{gap:14px;align-items:stretch}
body.home-page .mode{min-height:0;padding:16px 18px}
body.home-page .mode p{margin:6px 0 10px}
body.home-page .icon{font-size:28px}
body.home-page h2{font-size:19px;margin:10px 0 2px}
body.home-page .save-note{margin:12px 0 10px}
body.home-page footer{padding-top:10px;margin-top:auto}
body.home-page .status-row{margin-bottom:6px}

@media (max-height:780px){
  body.home-page .intro{margin:8px 0 8px}
  body.home-page .eyebrow{font-size:12px}
  body.home-page .mode{padding:12px 14px}
  body.home-page .icon{font-size:24px}
  body.home-page h2{font-size:17px;margin:6px 0 2px}
  body.home-page .save-note{display:none}
}
@media (max-width:700px){
  body.home-page{overflow:auto;max-height:none}
}

@media (prefers-reduced-motion:reduce){
  .mode,.mode:hover,.mode:active,.resume::after,.btn-secondary{transition:none;transform:none!important}
}