:root{
  color-scheme:light;
  --bg:#f7f8ff;
  --bg-2:#eef8ff;
  --surface:rgba(255,255,255,.78);
  --surface-strong:rgba(255,255,255,.94);
  --surface-soft:rgba(247,249,255,.82);
  --text:#182033;
  --muted:#758096;
  --line:rgba(83,98,128,.14);
  --line-strong:rgba(83,98,128,.22);
  --purple:#7257f6;
  --blue:#0ea5e9;
  --cyan:#14b8a6;
  --pink:#ec4899;
  --red:#ef476f;
  --green:#16a34a;
  --amber:#d97706;
  --shadow:0 24px 70px rgba(75,87,125,.14);
  --shadow-soft:0 12px 34px rgba(75,87,125,.09);
  --radius-xl:30px;
  --radius-lg:22px;
  --radius-md:16px;
  --nav-height:76px;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0d1220;
  --bg-2:#151a2c;
  --surface:rgba(25,32,51,.78);
  --surface-strong:rgba(27,35,56,.95);
  --surface-soft:rgba(21,28,46,.86);
  --text:#f2f5ff;
  --muted:#9ba6ba;
  --line:rgba(190,201,226,.13);
  --line-strong:rgba(190,201,226,.22);
  --shadow:0 28px 80px rgba(0,0,0,.36);
  --shadow-soft:0 14px 38px rgba(0,0,0,.26);
}

*{box-sizing:border-box;margin:0;padding:0}
html{min-height:100%;scroll-behavior:smooth}
body{
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  isolation:isolate;
  color:var(--text);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;
  background:transparent;
  transition:background .25s ease,color .25s ease;
}
body::after{
  content:"";
  position:fixed;
  top:0;
  right:0;
  bottom:auto;
  left:0;
  width:100vw;
  height:100vh;
  height:100lvh;
  z-index:-4;
  pointer-events:none;
  background:
    radial-gradient(circle at 8% 4%,rgba(166,143,255,.32),transparent 31%),
    radial-gradient(circle at 91% 9%,rgba(78,218,255,.28),transparent 30%),
    radial-gradient(circle at 62% 96%,rgba(255,152,205,.23),transparent 35%),
    linear-gradient(135deg,var(--bg),var(--bg-2));
  transform:translateZ(0);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(107,120,153,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,120,153,.045) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 95%);
}
html[data-animations="off"] *,html[data-animations="off"] *::before,html[data-animations="off"] *::after{
  animation:none!important;
  transition:none!important;
}
button,input,textarea{font:inherit}
button{color:inherit}
a{color:inherit;text-decoration:none}
svg{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.ambient{position:fixed;z-index:-3;border-radius:50%;filter:blur(10px);pointer-events:none;opacity:.45}
.ambient-a{width:290px;height:290px;right:-95px;top:-80px;background:linear-gradient(135deg,#9b87ff,#67e8f9);animation:float-a 11s ease-in-out infinite}
.ambient-b{width:330px;height:330px;left:-120px;bottom:-130px;background:linear-gradient(135deg,#f9a8d4,#bfdbfe);animation:float-b 14s ease-in-out infinite}
@keyframes float-a{50%{transform:translate(-38px,46px) scale(1.08)}}
@keyframes float-b{50%{transform:translate(46px,-34px) scale(.92)}}

.brand{--brand-base-x:0px;--brand-now-x:0px;--brand-now-scale:1;display:flex;align-items:center;gap:12px;min-width:0;border:0;background:transparent;cursor:pointer;text-align:left;transform:translateX(calc(var(--brand-base-x) + var(--brand-now-x))) scale(var(--brand-now-scale));transform-origin:left center;transition:transform .38s cubic-bezier(.22,.78,.24,1)}

.live{
  --now-color:var(--green);
  --now-width:80px;
  --now-state-width:80px;
  --now-dot-left:17px;
  --now-glow:34,197,94;
  --now-top-height:44px;
  --now-stack-height:62px;
  --now-stack-height-toggle:64px;
  --now-current-stack-height:var(--now-stack-height);
  position:relative;
  z-index:1;
  box-sizing:border-box;
  flex:0 0 auto;
  margin-left:auto;
  margin-bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:max(var(--now-width),var(--now-state-width));
  min-width:max(var(--now-width),var(--now-state-width));
  height:var(--now-top-height);
  padding:0 4px 0 29px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--surface);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  font-size:12px;
  font-weight:800;
  color:var(--now-color);
  overflow:hidden;
  transition:
    width .30s cubic-bezier(.22,.72,.24,1),
    min-width .30s cubic-bezier(.22,.72,.24,1),
    height .30s cubic-bezier(.22,.72,.24,1),
    margin-bottom .30s cubic-bezier(.22,.72,.24,1),
    background .18s ease,
    border-color .18s ease,
    color .22s ease;
}

.live-dot{
  position:absolute;
  z-index:4;
  left:var(--now-dot-left);
  top:calc(var(--now-top-height) / 2);
  width:8px;
  height:8px;
  flex:0 0 8px;
  margin:0;
  border:0;
  border-radius:50%;
  background:var(--now-color);
  box-shadow:0 0 0 0 rgba(34,197,94,.35);
  transform:translateY(-50%);
  transform-origin:center;
  animation:live-pulse 2s infinite;
  transition:
    left .38s cubic-bezier(.22,.78,.24,1),
    background-color .22s ease,
    border-color .22s ease,
    border-width .22s ease,
    color .22s ease;
}

.now-quick-toggle{
  position:absolute;
  z-index:3;
  left:29px;
  right:3px;
  top:0;
  bottom:auto;
  width:auto;
  height:var(--now-top-height);
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.now-quick-track{
  position:relative;
  display:block;
  box-sizing:border-box;
  width:54px;
  height:26px;
  border:1px solid #d8ddea;
  border-radius:999px;
  background:#eef1f6;
  box-shadow:none;
  overflow:hidden;
  transition:
    background .22s ease,
    border-color .22s ease;
}

.now-quick-thumb{
  position:absolute;
  z-index:2;
  left:3px;
  top:50%;
  box-sizing:border-box;
  width:20px;
  height:20px;
  border:1px solid #d5dbe8;
  border-radius:50%;
  background-color:#ffffff;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Ccircle%20cx%3D%2710%27%20cy%3D%2710%27%20r%3D%273.1%27%20fill%3D%27%23D99A18%27%2F%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23D99A18%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M10%201.8v3%27%2F%3E%3Cpath%20d%3D%27M10%2015.2v3%27%2F%3E%3Cpath%20d%3D%27M1.8%2010h3%27%2F%3E%3Cpath%20d%3D%27M15.2%2010h3%27%2F%3E%3Cpath%20d%3D%27M4.2%204.2l2.1%202.1%27%2F%3E%3Cpath%20d%3D%27M13.7%2013.7l2.1%202.1%27%2F%3E%3Cpath%20d%3D%27M15.8%204.2l-2.1%202.1%27%2F%3E%3Cpath%20d%3D%27M6.3%2013.7l-2.1%202.1%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:15px 15px;
  box-shadow:none;
  transform:translateY(-50%);
  transition:
    left .28s cubic-bezier(.22,.90,.24,1),
    background-color .20s ease,
    border-color .20s ease;
}

.live[data-theme-mode="dark"] .now-quick-track{
  background:#252b3b;
  border-color:#414a63;
  box-shadow:none;
}

.live[data-theme-mode="dark"] .now-quick-thumb{
  left:31px;
  background-color:#f7f9ff;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Ccircle%20cx%3D%2710%27%20cy%3D%2710%27%20r%3D%275.1%27%20fill%3D%27%23596783%27%2F%3E%3Ccircle%20cx%3D%2712.8%27%20cy%3D%2710%27%20r%3D%274.9%27%20fill%3D%27%23F7F9FF%27%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:15px 15px;
  border-color:#d5dceb;
}

.now-quick-toggle[hidden],
.now-dday[hidden]{
  display:none;
}

.now-live-label{
  position:absolute;
  z-index:2;
  top:0;
  bottom:auto;
  height:var(--now-top-height);
  left:calc(var(--now-dot-left) + 14px);
  right:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--now-color);
  font-size:10px;
  font-weight:900;
  letter-spacing:.8px;
  line-height:1;
  white-space:nowrap;
}

.now-live-label[hidden]{
  display:none;
}

.now-dday{
  position:absolute;
  z-index:2;
  top:0;
  bottom:auto;
  height:var(--now-top-height);
  left:calc(var(--now-dot-left) + 14px);
  right:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  font-size:10px;
  font-weight:900;
  letter-spacing:.45px;
  line-height:1;
  white-space:nowrap;
}

.live-label{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  top:var(--now-top-height);
  box-sizing:border-box;
  height:calc(
    var(--now-current-stack-height) -
    var(--now-top-height)
  );
  padding:0 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--now-color);
  font-size:9px;
  font-weight:900;
  letter-spacing:.82px;
  line-height:1;
  white-space:nowrap;
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition:
    opacity .12s ease .02s,
    transform .18s cubic-bezier(.2,0,0,1) .01s,
    color .18s ease;
}

.now-panel{
  position:absolute;
  z-index:1;
  left:auto;
  right:0;
  top:0;
  bottom:auto;
  width:204px;
  height:172px;
  box-sizing:border-box;
  padding:54px 14px 12px;
  border:1px solid var(--line);
  border-radius:20px;
  background:color-mix(
    in srgb,
    var(--surface) 82%,
    transparent
  );
  box-shadow:0 14px 34px rgba(15,23,42,.14);
  backdrop-filter:blur(18px) saturate(1.18);
  -webkit-backdrop-filter:blur(18px) saturate(1.18);
  text-align:left;
  opacity:0;
  transform:scale(.76,.62);
  transform-origin:top right;
  pointer-events:none;
  transition:
    opacity .18s ease,
    transform .28s cubic-bezier(.22,.72,.24,1);
}

.now-panel-summary{
  display:grid;
  gap:3px;
}

.now-panel-state{
  color:var(--now-color);
  font-size:18px;
  font-weight:900;
  letter-spacing:-.35px;
  line-height:1.05;
}

.now-panel-description{
  color:var(--muted);
  font-size:10px;
  font-weight:650;
  line-height:1.35;
}

.now-panel-meta{
  display:grid;
  gap:6px;
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid var(--line);
}

.now-panel-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  color:var(--muted);
  font-size:10px;
  line-height:1.2;
}

.now-panel-row > span,
.now-panel-row > strong{
  min-width:0;
  white-space:nowrap;
}

.now-panel-row > strong{
  overflow:hidden;
  color:var(--text);
  font-weight:850;
  text-overflow:ellipsis;
}

.live[data-now-top="toggle"]{
  --now-width:104px;
  --now-current-stack-height:var(--now-stack-height-toggle);
}

.live[data-now-top="dday"],
.live[data-now-top="none"]{
  --now-current-stack-height:var(--now-stack-height);
}

.live[data-now-stacked="true"]{
  height:var(--now-current-stack-height);
  margin-bottom:calc(
    var(--now-top-height) -
    var(--now-current-stack-height)
  );
  border-radius:22px;
  box-shadow:none;
}

.live[data-now-top="toggle"][data-now-stacked="true"]{
  border-radius:22px;
}

.live[data-now-panel="open"],
.live[data-now-panel="closing"]{
  z-index:30;
  overflow:visible;
}

.live[data-now-panel="open"] .now-panel{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.live[data-now-stacked="true"] .live-label{
  opacity:1;
  transform:translateY(-3px);
}

.live[data-now-state="loading"]{
  --now-color:#eab308;
  --now-state-width:108px;
  --now-dot-left:17px;
  --now-glow:234,179,8;
}

.live[data-now-state="syncing"]{
  --now-color:#06b6d4;
  --now-state-width:112px;
  --now-dot-left:17px;
  --now-glow:6,182,212;
}

.live[data-now-state="delayed"]{
  --now-color:#f97316;
  --now-state-width:120px;
  --now-dot-left:17px;
  --now-glow:249,115,22;
}

.live[data-now-state="offline"]{
  --now-color:#ef6f78;
  --now-state-width:108px;
  --now-dot-left:17px;
}

.live[data-now-state="loading"] .live-dot{
  box-shadow:none;
  animation:now-loading 1.18s linear infinite;
}

.live[data-now-state="syncing"] .live-dot{
  box-shadow:none;
  animation:now-syncing 1.05s ease-in-out infinite;
}

.live[data-now-state="delayed"] .live-dot{
  box-shadow:none;
  animation:now-syncing 1.7s ease-in-out infinite;
}

.live[data-now-state="offline"] .live-dot{
  background:transparent;
  border:1.5px solid currentColor;
  box-shadow:none;
  animation:none;
  box-sizing:border-box;
}

@keyframes live-pulse{
  70%{
    box-shadow:0 0 0 9px rgba(34,197,94,0);
  }
}

@keyframes now-loading{
  0%,10%,24%,39%,55%,72%,88%,100%{
    opacity:1;
    transform:translateY(-50%) scale(1);
    box-shadow:
      0 0 0 0 rgba(var(--now-glow),.26),
      0 0 6px rgba(var(--now-glow),.18);
  }

  13%{
    opacity:.38;
    transform:translateY(-50%) scale(.78);
    box-shadow:
      0 0 0 1px rgba(var(--now-glow),.10),
      0 0 2px rgba(var(--now-glow),.12);
  }

  16%{
    opacity:1;
    transform:translateY(-50%) scale(1.14);
    box-shadow:
      0 0 0 4px rgba(var(--now-glow),.08),
      0 0 9px rgba(var(--now-glow),.26);
  }

  43%{
    opacity:.55;
    transform:translateY(-50%) scale(.86);
    box-shadow:
      0 0 0 1px rgba(var(--now-glow),.12),
      0 0 4px rgba(var(--now-glow),.14);
  }

  47%{
    opacity:1;
    transform:translateY(-50%) scale(1.08);
    box-shadow:
      0 0 0 3px rgba(var(--now-glow),.07),
      0 0 8px rgba(var(--now-glow),.22);
  }

  77%{
    opacity:.46;
    transform:translateY(-50%) scale(.82);
    box-shadow:
      0 0 0 1px rgba(var(--now-glow),.10),
      0 0 3px rgba(var(--now-glow),.12);
  }

  81%{
    opacity:1;
    transform:translateY(-50%) scale(1.11);
    box-shadow:
      0 0 0 4px rgba(var(--now-glow),.06),
      0 0 9px rgba(var(--now-glow),.24);
  }
}

@keyframes now-syncing{
  0%,100%{
    opacity:1;
    transform:translateY(-50%) scale(1);
    box-shadow:
      0 0 0 0 rgba(var(--now-glow),.28),
      0 0 5px rgba(var(--now-glow),.18);
  }

  50%{
    opacity:.42;
    transform:translateY(-50%) scale(.76);
    box-shadow:
      0 0 0 5px rgba(var(--now-glow),0),
      0 0 8px rgba(var(--now-glow),.08);
  }
}

.main-content{min-height:65vh}
.view{display:none;animation:view-in .4s ease both}
.view.is-active{display:block}
@keyframes view-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero,.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:25px}
.compact-hero{align-items:center}
.eyebrow,.section-eyebrow{color:var(--purple);font-size:11px;font-weight:900;letter-spacing:1.8px}
.hero h1,.page-heading h1{margin-top:4px;font-size:clamp(32px,5.2vw,55px);line-height:1.04;letter-spacing:-2.5px}
.hero h1 span,
.page-heading h1 span,
#dashboard-title span,
#communication-title span,
#links-title span,
#settings-title span{
  display:inline-block;
  color:transparent;
  -webkit-text-fill-color:transparent;
  background-image:linear-gradient(
    90deg,
    #c026d3 0px,
    #8b5cf6 70px,
    #2563eb 140px,
    #38bdf8 210px,
    #2563eb 280px,
    #8b5cf6 350px,
    #c026d3 420px
  );
  background-size:420px 100%;
  background-repeat:repeat-x;
  background-clip:text;
  -webkit-background-clip:text;
  animation:heading-flow 8.08s linear infinite;
  will-change:background-position;
}

@keyframes heading-flow{
  from{background-position:0px 50%}
  to{background-position:-420px 50%}
}
.hero p:not(.eyebrow),.page-heading p:not(.eyebrow){margin-top:5px;color:var(--muted);font-size:14px;line-height:1.65;font-weight:600;}


.glass-card{position:relative;border:1px solid rgba(255,255,255,.74);background:var(--surface);box-shadow:var(--shadow);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);overflow:hidden}
html[data-theme="dark"] .glass-card{border-color:var(--line)}
.glass-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(145deg,rgba(255,255,255,.26),transparent 42%)}
.metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:17px}

.card-kicker{position:relative;z-index:1;display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px;font-weight:850}
.line-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:11px;background:var(--surface-soft)}
.line-icon svg{width:17px;height:17px}
.temperature-card .line-icon,.temperature-card .metric-value{color:var(--red)}
.humidity-card .line-icon,.humidity-card .metric-value{color:var(--blue)}
.metric-value{position:relative;z-index:1;margin-top:19px;font-size:clamp(46px,7vw,67px);font-weight:950;line-height:.95;letter-spacing:-3.5px}
.metric-value small{margin-left:5px;font-size:18px;letter-spacing:-1px;opacity:.62}
.metric-caption{position:relative;z-index:1;margin-top:13px;color:var(--muted);font-size:11px;font-weight:600;}

.section-card{padding:23px}
.section-head{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:20px}
.section-head h2{margin-top:4px;font-size:19px;letter-spacing:-.5px}

.meal-list{position:relative;z-index:1;display:block;list-style:none;padding:6px 14px;border:1px solid var(--line);border-radius:15px;background:var(--surface-strong);box-shadow:var(--shadow-soft)}
.meal-list li{display:flex;align-items:center;min-width:0;min-height:38px;padding:8px 2px;border:0;border-top:1px solid var(--line);background:transparent;box-shadow:none;font-size:13px;font-weight:750;line-height:1.45;overflow-wrap:anywhere;word-break:keep-all;position:relative}.meal-list li:first-child{border-top:0}
.meal-list li::before{content:none}
.skeleton-line{color:var(--muted)}
.calendar-controls{display:flex;align-items:center;gap:8px}
.calendar-controls strong{min-width:74px;text-align:center;font-size:12px}
.calendar-weekdays,.calendar-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.calendar-weekdays{margin-bottom:6px;color:var(--muted);font-size:10px;text-align:center;font-weight:800}
.calendar-day{position:relative;aspect-ratio:1;border:0;border-radius:12px;background:transparent;color:var(--text);cursor:pointer;font-size:11px;transition:.16s ease}

.calendar-day.is-muted{opacity:.28}.calendar-day.is-today{color:#fff;background:linear-gradient(135deg,var(--purple),var(--blue));font-weight:900}.calendar-day.has-event:not(.is-today)::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--pink);transform:translateX(-50%)}
.calendar-day.is-selected{outline:2px solid rgba(114,87,246,.35);outline-offset:-2px}
.calendar-detail{position:relative;z-index:1;min-width:0;min-height:46px;margin-top:13px;padding:14px 14px 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft);color:var(--muted);font-size:11px;line-height:1.5;overflow-wrap:anywhere;word-break:keep-all;
}
.calendar-detail strong{display:block;color:var(--text);margin-bottom:3px;font-size:12px}

.empty-state{display:grid;place-items:center;min-height:96px;padding:18px;border:0;border-radius:14px;background:var(--surface-soft);color:var(--muted);font-size:11px;font-weight:750;line-height:1.55;text-align:center}
.c0{color:#e11d48}.c1{color:#ea580c}.c2{color:#ca8a04}.c3{color:#16a34a}.c4{color:#059669}.c5{color:#0891b2}.c6{color:#0284c7}.c7{color:#2563eb}.c8{color:#4f46e5}.c9{color:#7c3aed}.c10{color:#c026d3}.c11{color:#db2777}

.links-heading{
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:32px;
}
.links-controls{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex:0 0 100%;
  width:100%;
  min-width:0;
}
.links-controls .search-box{
  flex:0 1 320px;
  width:auto;
  min-width:220px;
}
.links-controls .category-row{
  flex:1 1 260px;
  width:auto;
  min-width:0;
}
.search-box{display:flex;align-items:center;gap:9px;width:min(390px,100%);height:46px;padding:0 14px;border:1px solid var(--line);border-radius:15px;background:var(--surface);box-shadow:var(--shadow-soft)}.search-box svg{width:17px;height:17px;color:var(--muted)}.search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:12px}.category-row{
  display:flex;
  align-items:center;
  gap:8px;
  overflow-x:auto;
  overflow-y:visible;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  height:46px;
  padding:3px 7px;
  margin:0;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(
    to right,
    transparent 0,
    rgba(0,0,0,.55) 4px,
    #000 10px,
    #000 calc(100% - 40px),
    rgba(0,0,0,.55) calc(100% - 18px),
    transparent 100%
  );
  mask-image:linear-gradient(
    to right,
    transparent 0,
    rgba(0,0,0,.55) 4px,
    #000 10px,
    #000 calc(100% - 40px),
    rgba(0,0,0,.55) calc(100% - 18px),
    transparent 100%
  );
}.category-row::-webkit-scrollbar{display:none}.shortcut-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.shortcut-card{position:relative;display:flex;flex-direction:column;min-height:178px;padding:19px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-soft);backdrop-filter:blur(20px);transition:.18s ease}.shortcut-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.shortcut-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:13px;background:rgba(114,87,246,.1);color:var(--purple);font-size:17px;font-weight:900}.favorite-button.is-favorite{color:#f59e0b}.shortcut-card h3{margin-top:16px;font-size:15px}.shortcut-card p{margin-top:6px;color:var(--muted);font-size:10px;line-height:1.5;font-weight:600;}.shortcut-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:17px}.shortcut-category{font-size:9px;color:var(--muted);font-weight:600;}.shortcut-open{display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;background:rgba(114,87,246,.10);color:var(--purple);font-size:10px;font-weight:900}.shortcut-card.is-disabled{opacity:.65}.shortcut-card.is-disabled .shortcut-open{color:var(--muted)}

@media(hover:hover) and (pointer:fine){
  .calendar-day:hover{
    background:var(--surface-strong);
  }

  .shortcut-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow);
  }
}

@media(max-width:899px){
  .shortcut-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){

.hero,.page-heading{align-items:flex-start;flex-direction:column}.metric-value{font-size:46px}.section-card{padding:19px;border-radius:24px}.calendar-head{align-items:flex-start;flex-direction:column}.calendar-controls{width:100%;justify-content:space-between}.links-heading{
  gap:16px;
  margin-bottom:12px;
}
.links-controls{
  width:100%;
  flex:0 0 auto;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}
.links-controls .search-box{
  width:100%;
  min-width:0;
  flex:none;
}
.links-controls .category-row{
  width:100%;
  flex:none;
  height:auto;
  padding:8px 14px 14px;
  margin:-6px 0 -12px;
}
.search-box{width:100%}.shortcut-grid{grid-template-columns:1fr;gap:10px}.shortcut-card p{margin-top:4px}
.shortcut-card{display:grid;grid-template-columns:34px minmax(0,1fr) auto;grid-template-rows:34px 1fr auto;column-gap:9px;row-gap:3px;min-height:0;padding:9px 14px}
.shortcut-top,.shortcut-footer{display:contents}
.shortcut-icon{grid-column:1;grid-row:1;width:34px;height:34px;border-radius:11px;font-size:15px}
.shortcut-category{grid-column:2;grid-row:1;align-self:center;justify-self:start;font-size:11px;font-weight:750}
.shortcut-actions{grid-column:3;grid-row:1;align-self:center;justify-self:end}.shortcut-actions .favorite-button{width:34px;min-width:34px;height:34px;min-height:34px;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;font-size:14px}
.shortcut-card h3{grid-column:1 / 3;grid-row:2;margin:0;align-self:end}
.shortcut-open{grid-column:3;grid-row:2 / 4;align-self:end;justify-self:end;padding:5px 10px;border-radius:999px;background:linear-gradient(135deg,var(--purple),var(--blue));color:#fff;font-weight:900}
.shortcut-card > p{grid-column:1 / 3;grid-row:3;margin:0;align-self:start}
}
@media(max-width:430px){
  .live{width:max(var(--now-width),var(--now-state-width));min-width:max(var(--now-width),var(--now-state-width));padding:0 0 0 27px;justify-content:center}.metric-grid{gap:10px}.card-kicker{font-size:10px}.line-icon{width:28px;height:28px}.metric-value{margin-top:17px;font-size:40px;letter-spacing:-2.5px}.metric-value small{font-size:14px}.shortcut-card{min-height:108px;padding:10px 14px}
  .shortcut-open{padding:6px 10px;border-radius:999px;background:rgba(114,87,246,.10);color:var(--purple);font-size:10px;font-weight:900}
}

/* ===== Brand / links management ===== */
.brand-wordmark{display:block;width:clamp(172px,22vw,260px);height:auto;object-fit:contain;object-position:left center}

.link-manager-card{margin-bottom:15px}
.link-manager-form{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 1.65fr .8fr .42fr 1.3fr auto;gap:9px}
.link-manager-form input{min-width:0;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-strong);color:var(--text);outline:none;font-size:10px}
.managed-link-admin-list{position:relative;z-index:1;display:grid;gap:7px;margin-top:13px}
.managed-link-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:var(--surface-soft)}
.managed-link-row strong,.managed-link-row small{display:block;font-weight:600;}.managed-link-row strong{font-size:11px}.managed-link-row small{max-width:660px;margin-top:3px;color:var(--muted);font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.empty-state.compact{min-height:48px;padding:12px;font-size:10px}

/* Wide screens use one calm horizontal workspace with a left rail. */
@media(min-width:760px){
  .main-content{width:100%;max-width:1320px;margin-left:auto;margin-right:auto}
  .links-heading{margin-bottom:14px}
  .shortcut-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:1050px) and (min-width:760px){
.link-manager-form{grid-template-columns:repeat(2,minmax(0,1fr))}.link-manager-form button{min-height:42px}
}

@media(max-width:759px){
  .brand-wordmark{width:204px}
  .live{--now-top-height:42px;--now-stack-height:60px;height:var(--now-top-height);width:calc(max(var(--now-width),var(--now-state-width)) - 6px);min-width:calc(max(var(--now-width),var(--now-state-width)) - 6px);padding:0 0 0 23px}
  .hero h1,.page-heading h1{font-size:35px;letter-spacing:-1.8px}

  .link-manager-form{grid-template-columns:1fr}

}

@media(max-width:420px){
  .brand-wordmark{width:176px}.live{width:calc(max(var(--now-width),var(--now-state-width)) - 6px);min-width:calc(max(var(--now-width),var(--now-state-width)) - 6px);padding:0 0 0 21px}.live-label{font-size:10px}

}
/* canonical dark tile gradients */
html[data-theme="dark"] .glass-card::before{
  display:none;
}

/* canonical desktop density */
@media(min-width:1024px){
  .main-content{
    max-width:1720px;
  }

  .metric-grid{
    gap:12px;
    margin-bottom:12px;
  }

  .section-card{
    padding:18px;
  }

  .shortcut-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
  }

  .shortcut-card{
    min-height:150px;
    padding:16px;
  }

}

/* v5.1 canonical dark shortcut surface */
:is(html,body)[data-theme="dark"] .shortcut-card{
  border-color:var(--line);
  background:var(--surface);
}

:is(html,body)[data-theme="dark"] .shortcut-card::before{
  opacity:.12;
}

/* v5.3.3 canonical sensor cards */
.metric-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  height:88px;
  min-height:88px;
  max-height:88px;
  padding:9px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid rgba(120,128,150,.11);
  border-radius:24px;
  box-shadow:0 10px 30px rgba(43,48,67,.06),inset 0 1px 0 rgba(255,255,255,.34);
}

.metric-card::after{
  content:"";
  position:absolute;
  z-index:0;
  width:150px;
  height:150px;
  right:-48px;
  bottom:-58px;
  border-radius:50%;
  opacity:.42;
  filter:blur(12px);
  pointer-events:none;
}

.metric-card .card-kicker{
  margin:0;
  flex:0 0 auto;
  transform:translateX(-12px);
}

.metric-card .card-kicker > span:not(.line-icon){
  display:none;
}

.metric-card .metric-value{
  margin:0;
  align-self:auto;
  transform:translateX(-12px);
  font-size:38px;
  line-height:1;
  letter-spacing:-2px;
}

.metric-card .metric-value small{
  margin-left:2px;
  font-size:17px;
  letter-spacing:-.5px;
}

.metric-card .metric-caption{
  display:block;
  position:absolute;
  right:14px;
  bottom:7px;
  margin:0;
  width:auto;
  text-align:right;
  font-size:8.5px;
  line-height:1;
  color:var(--muted);font-weight:600;}

.metric-card .line-icon{
  overflow:visible;
  background:transparent;
  border:0;
  box-shadow:none;
}

.metric-card .line-icon svg{
  display:block;
  margin:auto;
  overflow:visible;
  width:18px;
  height:18px;
}

@media(min-width:760px){
  .metric-card{
    height:99px;
    min-height:99px;
    max-height:99px;
    padding:10px 16px;
    display:grid;
    grid-template-columns:39px 104px;
    justify-content:center;
    align-items:center;
    gap:0 10px;
  }

  .metric-card .card-kicker{
    display:grid;
    place-items:center;
    width:39px;
    height:39px;
    transform:none;
  }

  .metric-card .line-icon{
    width:39px;
    height:39px;
  }

  .metric-card .line-icon svg{
    width:24px;
    height:24px;
  }

  .metric-card .metric-value{
    min-width:104px;
    font-size:47px;
    letter-spacing:-2.5px;
    transform:none;
  }

  .metric-card .metric-value small{
    font-size:20px;
  }

  .metric-card .metric-caption{
    right:16px;
    bottom:8px;
    font-size:10px;font-weight:600;}
}

.temperature-card{
  background:
    linear-gradient(rgba(251,113,133,.055),rgba(251,113,133,.055)),
    var(--surface);
}

.humidity-card{
  background:
    linear-gradient(rgba(59,130,246,.055),rgba(59,130,246,.055)),
    var(--surface);
}

.temperature-card::after{
  background:radial-gradient(
    circle,
    rgba(251,113,133,.42) 0%,
    rgba(249,115,22,.20) 48%,
    transparent 72%
  );
}

.humidity-card::after{
  background:radial-gradient(
    circle,
    rgba(34,211,238,.40) 0%,
    rgba(59,130,246,.20) 48%,
    transparent 72%
  );
}

html[data-theme="dark"] .metric-card{
  box-shadow:0 10px 30px rgba(0,0,0,.16);
}

@media(max-width:430px){
  .metric-card{border-radius:22px}
}

/* v5.4 PRISM - brighter animated title gradient in dark mode */
:is(html,body)[data-theme="dark"] .hero h1 span,
:is(html,body)[data-theme="dark"] .page-heading h1 span,
:is(html,body)[data-theme="dark"] #dashboard-title span,
:is(html,body)[data-theme="dark"] #communication-title span,
:is(html,body)[data-theme="dark"] #links-title span,
:is(html,body)[data-theme="dark"] #settings-title span{
  background-image:linear-gradient(
    90deg,
    #dc4be8 0px,
    #ad86fa 70px,
    #5688f2 140px,
    #72d2fc 210px,
    #5688f2 280px,
    #ad86fa 350px,
    #dc4be8 420px
  );
}