:root {
  --campus-frame-width: 1280px;
  --campus-gutter: clamp(32px, 7vw, 96px);
  --wallpaper-canvas-color: #0b0b0d;
  --wallpaper-canvas-image:
    linear-gradient(180deg, transparent 68%, rgba(4,6,13,.5) 100%),
    radial-gradient(circle at 86% 17%, rgba(111,74,255,.14), transparent 31%),
    radial-gradient(circle at 13% 91%, rgba(32,189,219,.1), transparent 34%),
    linear-gradient(#0b0b0d, #0b0b0d);
  --campus-shell-inset-top: env(safe-area-inset-top, 0px);
  --campus-shell-inset-right: env(safe-area-inset-right, 0px);
  --campus-shell-inset-bottom: env(safe-area-inset-bottom, 0px);
  --campus-shell-inset-left: env(safe-area-inset-left, 0px);
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #171719;
  background-color: var(--wallpaper-canvas-color);
  background-image: var(--wallpaper-canvas-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-synthesis: none;
}
:root[data-campus-shell-theme="dark"] { color-scheme: dark; }
:root[data-campus-shell-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; min-height: 100dvh; margin: 0; overflow-x: hidden; background-color: var(--wallpaper-canvas-color); background-image: var(--wallpaper-canvas-image); background-position: center; background-size: cover; }
:root.appearance-transitions body { transition: background-color .35s ease; }
button { font: inherit; }
button:focus-visible { outline: 3px solid rgba(0,122,255,.26); outline-offset: 2px; }

.home {
  position: relative;
  isolation: isolate;
  width: min(var(--campus-frame-width), 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 30px var(--campus-gutter) 104px;
}
.embedded-launcher .home { padding-top: calc(var(--campus-shell-inset-top, 0px) + 64px); padding-bottom: calc(var(--campus-shell-inset-bottom, 0px) + 104px); }
.home-content { position: relative; z-index: 1; }
.wallpaper-scene { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; background: transparent; }
.wallpaper-image, .wallpaper-atmosphere, .wallpaper-grid { position: absolute; inset: 0; }
.wallpaper-image { background-position: center; background-size: cover; opacity: 0; }
:root.appearance-transitions .wallpaper-image { transition: opacity .42s ease; }
:root[data-wallpaper="clean"] {
  --wallpaper-canvas-color: #0b0b0d;
  --wallpaper-canvas-image:
    linear-gradient(180deg, transparent 68%, rgba(4,6,13,.5) 100%),
    radial-gradient(circle at 86% 17%, rgba(111,74,255,.14), transparent 31%),
    radial-gradient(circle at 13% 91%, rgba(32,189,219,.1), transparent 34%),
    linear-gradient(#0b0b0d, #0b0b0d);
}
:root[data-wallpaper="clean-light"] {
  --wallpaper-canvas-color: #f8faff;
  --wallpaper-canvas-image:
    linear-gradient(180deg, transparent 68%, rgba(220,232,246,.46) 100%),
    radial-gradient(circle at 86% 17%, rgba(111,74,255,.1), transparent 31%),
    radial-gradient(circle at 13% 91%, rgba(32,189,219,.09), transparent 34%),
    linear-gradient(#fff, #f7faff);
}
:root[data-wallpaper="plain-black"] {
  --wallpaper-canvas-color: #0b0b0d;
  --wallpaper-canvas-image: linear-gradient(#0b0b0d, #0b0b0d);
}
:root[data-wallpaper="neon-city"],
:root[data-wallpaper="cyber-city-live"] {
  --wallpaper-canvas-color: #08111f;
  --wallpaper-canvas-image: linear-gradient(180deg, rgba(2,8,20,.18), rgba(2,7,17,.5)), url("./wallpapers/neon-city.jpg");
}
:root[data-wallpaper="sky-garden"] {
  --wallpaper-canvas-color: #08111f;
  --wallpaper-canvas-image: linear-gradient(180deg, rgba(2,13,25,.28), rgba(2,9,19,.53)), url("./wallpapers/sky-garden.jpg");
}
:root[data-wallpaper="neon-city-light"],
:root[data-wallpaper="cyber-city-live-light"] {
  --wallpaper-canvas-color: #f4f8fc;
  --wallpaper-canvas-image: linear-gradient(180deg, rgba(255,255,255,.64), rgba(244,249,255,.78)), url("./wallpapers/neon-city.jpg");
}
:root[data-wallpaper="sky-garden-light"] {
  --wallpaper-canvas-color: #f5fafb;
  --wallpaper-canvas-image: linear-gradient(180deg, rgba(255,255,255,.48), rgba(241,249,250,.72)), url("./wallpapers/sky-garden.jpg");
}
:root[data-wallpaper="custom"] {
  --wallpaper-canvas-color: #08111f;
  --wallpaper-canvas-image: linear-gradient(180deg, rgba(2,7,16,.24), rgba(2,7,16,.5)), var(--custom-wallpaper);
}
:root[data-wallpaper="plain-white"] {
  --wallpaper-canvas-color: #fff;
  --wallpaper-canvas-image: linear-gradient(#fff, #fff);
}
:root[data-wallpaper="white-cyberpunk"] {
  --wallpaper-canvas-color: #f7f9fd;
  --wallpaper-canvas-image:
    radial-gradient(circle at 50% 61%, rgba(0,139,214,.12), transparent 9%),
    radial-gradient(circle at 78% 13%, rgba(240,38,165,.1), transparent 29%),
    linear-gradient(180deg, #fff 0%, #f8faff 52%, #eef4fa 100%);
}
:root[data-wallpaper="neon-grid"] {
  --wallpaper-canvas-color: #080817;
  --wallpaper-canvas-image:
    radial-gradient(circle at 50% 61%, rgba(242,52,190,.26), transparent 5%),
    radial-gradient(circle at 50% 53%, rgba(70,187,255,.2), transparent 24%),
    linear-gradient(180deg, #07091c 0%, #111035 54%, #080817 100%);
}
:root[data-wallpaper="neon-city"] .wallpaper-image,
:root[data-wallpaper="cyber-city-live"] .wallpaper-image {
  background-image: linear-gradient(180deg, rgba(2,8,20,.18), rgba(2,7,17,.5)), url("./wallpapers/neon-city.jpg");
  opacity: 1;
}
:root[data-wallpaper="neon-city-light"] .wallpaper-image,
:root[data-wallpaper="cyber-city-live-light"] .wallpaper-image {
  background-image: linear-gradient(180deg, rgba(255,255,255,.64), rgba(244,249,255,.78)), url("./wallpapers/neon-city.jpg");
  opacity: 1;
}
:root[data-wallpaper="sky-garden"] .wallpaper-image {
  background-image: linear-gradient(180deg, rgba(2,13,25,.28), rgba(2,9,19,.53)), url("./wallpapers/sky-garden.jpg");
  opacity: 1;
}
:root[data-wallpaper="sky-garden-light"] .wallpaper-image {
  background-image: linear-gradient(180deg, rgba(255,255,255,.48), rgba(241,249,250,.72)), url("./wallpapers/sky-garden.jpg");
  opacity: 1;
}
:root[data-wallpaper="custom"] .wallpaper-image {
  background-image: linear-gradient(180deg, rgba(2,7,16,.24), rgba(2,7,16,.5)), var(--custom-wallpaper);
  opacity: 1;
}
:root[data-wallpaper="neon-grid"] .wallpaper-scene {
  background:
    radial-gradient(circle at 50% 61%, rgba(242,52,190,.26), transparent 5%),
    radial-gradient(circle at 50% 53%, rgba(70,187,255,.2), transparent 24%),
    linear-gradient(180deg, #07091c 0%, #111035 54%, #080817 100%);
}
:root[data-wallpaper="white-cyberpunk"] .wallpaper-scene {
  background:
    radial-gradient(circle at 50% 61%, rgba(0,139,214,.12), transparent 9%),
    radial-gradient(circle at 78% 13%, rgba(240,38,165,.1), transparent 29%),
    linear-gradient(180deg, #fff 0%, #f8faff 52%, #eef4fa 100%);
}
:root[data-wallpaper="clean-light"] .wallpaper-scene {
  background:
    radial-gradient(circle at 86% 17%, rgba(111,74,255,.1), transparent 31%),
    radial-gradient(circle at 13% 91%, rgba(32,189,219,.09), transparent 34%),
    linear-gradient(#fff, #f7faff);
}
.wallpaper-atmosphere { opacity: 0; }
:root.appearance-transitions .wallpaper-atmosphere { transition: opacity .4s ease; }
.wallpaper-atmosphere::before,
.wallpaper-atmosphere::after {
  content: "";
  position: absolute;
  width: 38vw;
  height: 38vw;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
}
.wallpaper-atmosphere::before { top: -14vw; right: -7vw; background: rgba(43,168,255,.18); }
.wallpaper-atmosphere::after { bottom: -19vw; left: -11vw; background: rgba(236,38,190,.16); }
:root.appearance-transitions .wallpaper-atmosphere::before { animation: atmosphere-drift 14s ease-in-out infinite alternate; }
:root.appearance-transitions .wallpaper-atmosphere::after { animation: atmosphere-drift 17s ease-in-out -4s infinite alternate-reverse; }
:root[data-wallpaper="neon-grid"] .wallpaper-atmosphere,
:root[data-wallpaper="cyber-city-live"] .wallpaper-atmosphere,
:root[data-wallpaper="cyber-city-live-light"] .wallpaper-atmosphere,
:root[data-wallpaper="white-cyberpunk"] .wallpaper-atmosphere,
:root[data-wallpaper="clean"] .wallpaper-atmosphere,
:root[data-wallpaper="clean-light"] .wallpaper-atmosphere { opacity: 1; }
:root[data-wallpaper="clean"] .wallpaper-atmosphere::before {
  top: -27vw;
  right: -7vw;
  width: 48vw;
  height: 48vw;
  background: rgba(119,75,231,.22);
  filter: blur(110px);
}
:root[data-wallpaper="clean"] .wallpaper-atmosphere::after {
  bottom: -24vw;
  left: -9vw;
  width: 40vw;
  height: 40vw;
  background: rgba(38,185,211,.2);
  filter: blur(110px);
}
:root.appearance-transitions[data-wallpaper="clean"] .wallpaper-atmosphere::before,
:root.appearance-transitions[data-wallpaper="clean"] .wallpaper-atmosphere::after,
:root.appearance-transitions[data-wallpaper="clean-light"] .wallpaper-atmosphere::before,
:root.appearance-transitions[data-wallpaper="clean-light"] .wallpaper-atmosphere::after { animation: none; }
:root[data-wallpaper="clean-light"] .wallpaper-atmosphere::before {
  top: -27vw;
  right: -7vw;
  width: 48vw;
  height: 48vw;
  background: rgba(119,75,231,.12);
  filter: blur(110px);
  mix-blend-mode: multiply;
}
:root[data-wallpaper="clean-light"] .wallpaper-atmosphere::after {
  bottom: -24vw;
  left: -9vw;
  width: 40vw;
  height: 40vw;
  background: rgba(38,185,211,.1);
  filter: blur(110px);
  mix-blend-mode: multiply;
}
:root[data-wallpaper="white-cyberpunk"] .wallpaper-atmosphere::before {
  top: -19vw;
  right: -9vw;
  background: rgba(0,154,230,.14);
  filter: blur(105px);
  mix-blend-mode: multiply;
}
:root[data-wallpaper="cyber-city-live-light"] .wallpaper-atmosphere::before {
  background: rgba(0,154,230,.1);
  filter: blur(105px);
  mix-blend-mode: multiply;
}
:root[data-wallpaper="cyber-city-live-light"] .wallpaper-atmosphere::after {
  background: rgba(238,36,159,.08);
  filter: blur(110px);
  mix-blend-mode: multiply;
}
:root[data-wallpaper="white-cyberpunk"] .wallpaper-atmosphere::after {
  bottom: -20vw;
  left: -10vw;
  background: rgba(238,36,159,.1);
  filter: blur(110px);
  mix-blend-mode: multiply;
}
@keyframes atmosphere-drift { to { transform: translate3d(7vw, 4vw, 0) scale(1.12); } }

.wallpaper-grid {
  top: auto;
  right: -28%;
  bottom: 0;
  left: -28%;
  height: 78%;
  background-image:
    linear-gradient(rgba(45,197,255,.46) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,52,201,.4) 1px, transparent 1px);
  background-position: center 0;
  background-size: 68px 54px;
  opacity: 0;
  transform: perspective(430px) rotateX(61deg);
  transform-origin: center bottom;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 88%, transparent);
}
:root[data-wallpaper="neon-grid"] .wallpaper-grid,
:root[data-wallpaper="cyber-city-live"] .wallpaper-grid,
:root[data-wallpaper="cyber-city-live-light"] .wallpaper-grid { opacity: .64; }
:root[data-wallpaper="cyber-city-live"] .wallpaper-grid { opacity: .26; mix-blend-mode: screen; }
:root[data-wallpaper="white-cyberpunk"] .wallpaper-grid,
:root[data-wallpaper="cyber-city-live-light"] .wallpaper-grid {
  background-image:
    linear-gradient(rgba(0,126,190,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(206,0,143,.2) 1px, transparent 1px);
  opacity: .46;
  mix-blend-mode: multiply;
}
:root[data-wallpaper="cyber-city-live-light"] .wallpaper-grid { opacity: .24; }
:root[data-wallpaper="clean"] .wallpaper-grid {
  top: -46vw;
  right: -34vw;
  bottom: auto;
  left: auto;
  width: 88vw;
  height: 88vw;
  border: 1px solid rgba(194,187,255,.07);
  border-radius: 50%;
  background: none;
  opacity: 1;
  transform: none;
  -webkit-mask-image: none;
  mask-image: none;
}
:root[data-wallpaper="clean-light"] .wallpaper-grid {
  top: -46vw;
  right: -34vw;
  bottom: auto;
  left: auto;
  width: 88vw;
  height: 88vw;
  border: 1px solid rgba(88,74,164,.1);
  border-radius: 50%;
  background: none;
  opacity: 1;
  transform: none;
  -webkit-mask-image: none;
  mask-image: none;
}
:root.appearance-transitions[data-wallpaper="neon-grid"] .wallpaper-grid,
:root.appearance-transitions[data-wallpaper="cyber-city-live"] .wallpaper-grid,
:root.appearance-transitions[data-wallpaper="cyber-city-live-light"] .wallpaper-grid,
:root.appearance-transitions[data-wallpaper="white-cyberpunk"] .wallpaper-grid { animation: grid-travel 5.5s linear infinite; }
@keyframes grid-travel { to { background-position: center 54px; } }

.home-toolbar { display: flex; justify-content: flex-end; gap: 8px; min-height: 38px; margin: 0; }
.appearance-button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #dedee2;
  border-radius: 11px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 7px 24px rgba(24,24,28,.04);
  color: #57575e;
  cursor: pointer;
  backdrop-filter: blur(18px) saturate(1.2);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.appearance-button:disabled { cursor: default; opacity: .55; transform: none; }
.edit-button[aria-pressed="true"] { border-color: rgba(0,122,255,.24); background: rgba(0,122,255,.14); color: #007aff; }
.appearance-button-icon, .home-action-icon { width: 20px; height: 20px; display: block; color: currentColor; }
.appearance-button-icon path, .appearance-button-icon circle,
.home-action-icon path, .home-action-icon circle { vector-effect: non-scaling-stroke; }

.error { margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; background: #ffe4d6; color: #7a3527; font-size: 13px; }
.notice { margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; background: #eaf7ef; color: #24623c; font-size: 13px; }
.empty { grid-column: 1 / -1; padding: 64px; border: 1px dashed #dedee1; border-radius: 22px; background: #fafafa; color: #929298; text-align: center; }

.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: clamp(30px, 3.5vw, 52px) clamp(20px, 2.8vw, 42px); margin-top: 24px; }
.app-tile {
  position: relative;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 26px;
  transition: background-color .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.home.editing .app-tile:not(.new-app-tile) { cursor: grab; }
.home.editing.drag-active .app-tile:not(.new-app-tile) { cursor: grabbing; }
.home.editing .app-launcher { cursor: grab; touch-action: auto; }
.home.editing.drag-active .app-launcher { cursor: grabbing; }
.app-tile.dragging { opacity: .34; }
.app-tile.drop-before::after,
.app-tile.drop-after::after {
  content: "";
  position: absolute;
  z-index: 60;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 99px;
  background: #2684ff;
  box-shadow: 0 0 0 3px rgba(38,132,255,.14);
  pointer-events: none;
}
.app-tile.drop-before::after { left: -12px; }
.app-tile.drop-after::after { right: -12px; }
.app-tile.menu-open, .app-tile:focus-within { background: rgba(248,248,250,.76); }
.app-tile.menu-open { z-index: 80; }
.app-launcher { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 16px 8px 17px; border: 0; border-radius: inherit; background: transparent; color: inherit; cursor: pointer; text-decoration: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.app-launcher:disabled { cursor: default; }
.app-launcher[aria-disabled="true"] { cursor: default; }
.app-icon {
  position: relative;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(24,24,28,.05);
  border-radius: 30px;
  corner-shape: squircle;
  background: var(--tone);
  transform: translateZ(0);
  box-shadow: 0 8px 22px rgba(24,24,28,.1), inset 0 1px rgba(255,255,255,.14);
  transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease;
  -webkit-user-drag: none;
}
.app-icon, .app-icon * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
.app-tile.menu-open .app-icon,
.app-tile:focus-within .app-icon { box-shadow: 0 13px 30px rgba(24,24,28,.16), inset 0 1px rgba(255,255,255,.14); }
.app-launcher:not(:disabled):active .app-icon {
  /* A tap ends before this delay. A continued hold then grows smoothly until
     the 600 ms recognizer fires, without JavaScript owning the gesture. */
  transform: scale(1.045);
  transition: transform .5s linear .1s, box-shadow .24s ease;
}
.app-tile.menu-open .app-launcher .app-icon {
  /* Keep the scale reached by the hold as its iOS-style sheet takes over. */
  transform: scale(1.045);
  transition-duration: .16s;
}
.app-tile.is-opening .app-icon {
  animation: app-icon-opening 1.05s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes app-icon-opening {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .68; transform: scale(.985); }
}
.app-icon-glyph { position: relative; color: var(--tone-glyph, #fff); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol", sans-serif; font-size: 33px; font-weight: 650; line-height: 1; }
.link-icon { background: color-mix(in srgb, var(--tone) 86%, white); }
.link-website-icon { width: 100%; height: 100%; display: block; object-fit: cover; background: #fff; }
.external-link-badge { position: absolute; right: 6px; bottom: 6px; width: 21px; height: 21px; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; background: #252b35; color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.22); font-size: 10px; font-weight: 800; line-height: 1; }
.external-link-mark { color: #74747c; font-size: 10px; font-weight: 800; }
.new-app-tile .app-icon { border: 1.5px dashed #c9c9cf; background: #f7f7f9; }
.new-app-tile .app-icon-glyph { color: #34343a; font-size: 39px; font-weight: 300; transform: translateY(-2px); }
.new-app-tile .app-launcher:disabled .app-icon { opacity: .45; }
.app-name-row { max-width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; }
.app-name { min-width: 0; max-width: 100%; overflow: hidden; color: #28282c; font-size: 13px; font-weight: 670; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }

.tone-gold { --tone: #e9a32d; }
.tone-blue { --tone: #3972d9; }
.tone-violet { --tone: #785bd0; }
.tone-sky { --tone: #319bca; }
.tone-rose { --tone: #7b838e; }
.tone-indigo { --tone: #5968c7; }
.tone-coral { --tone: #db6265; }
.tone-mint { --tone: #37a37d; }
.tone-green { --tone: #61aa45; }
.tone-cyan { --tone: #2fa4a9; }

.app-options { position: absolute; z-index: 42; top: 7px; right: 7px; }
.app-more {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(24,24,28,.07);
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: #626269;
  box-shadow: 0 5px 16px rgba(24,24,28,.08);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateZ(0);
  transition: opacity .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .1s ease;
}
.app-tile:focus-within .app-more,
.app-tile.menu-open .app-more,
.home.editing .app-more {
  opacity: 1;
  pointer-events: auto;
}
.app-more-dots {
  width: 3px;
  height: 3px;
  display: block;
  border-radius: 50%;
  background: currentColor;
  box-shadow: -6px 0 currentColor, 6px 0 currentColor;
}
.app-more[aria-expanded="true"] { border-color: rgba(24,24,28,.12); background: rgba(255,255,255,.96); color: #626269; box-shadow: 0 7px 20px rgba(24,24,28,.11); }
.app-more:active { transform: scale(.94); }
.mobile-menu-layer { display: contents; }
.mobile-menu-dismiss-layer { display: none; }
.app-menu { position: absolute; top: 38px; right: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.app-menu-actions { display: grid; }
@media (hover: hover) and (pointer: fine) {
  .appearance-button:hover { border-color: #cfcfd5; background: #fff; transform: translateY(-1px); }
  .app-tile:hover { background: rgba(248,248,250,.76); }
  .app-tile:not(.new-app-tile):hover .app-icon { box-shadow: 0 13px 30px rgba(24,24,28,.16), inset 0 1px rgba(255,255,255,.14); }
  .app-tile:hover .app-more { opacity: 1; pointer-events: auto; }
  .app-more:hover { border-color: rgba(24,24,28,.12); background: rgba(255,255,255,.96); color: #626269; box-shadow: 0 7px 20px rgba(24,24,28,.11); }
}
.menu-dismiss-layer { position: fixed; z-index: 30; inset: 0; background: transparent; }

.wallpaper-active, .wallpaper-active body { background-color: #08111f; }
.wallpaper-active .appearance-button { border-color: rgba(255,255,255,.2); background: rgba(7,14,27,.45); color: rgba(255,255,255,.9); box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.wallpaper-active .edit-button[aria-pressed="true"] { border-color: rgba(74,163,255,.36); background: rgba(0,122,255,.24); color: #8fc7ff; }
.wallpaper-active .appearance-button-icon { color: #fff; }
.wallpaper-active .app-tile.menu-open,
.wallpaper-active .app-tile:focus-within { border-color: rgba(255,255,255,.14); background: rgba(6,12,25,.36); box-shadow: 0 18px 45px rgba(0,0,0,.12); backdrop-filter: blur(15px) saturate(1.12); }
/* A filtered ancestor becomes the containing block for fixed descendants.
   Release it while actions are open so the dismiss surface covers the iframe,
   rather than being trapped inside the selected launcher tile. */
.wallpaper-active .app-tile.menu-open {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.wallpaper-active .app-icon { border-color: rgba(255,255,255,.15); box-shadow: 0 18px 42px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.1); }
.wallpaper-active .app-tile.menu-open .app-icon,
.wallpaper-active .app-tile:focus-within .app-icon { box-shadow: 0 20px 46px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.1); }
.wallpaper-active .app-name { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.72); }
.wallpaper-active .new-app-tile .app-icon { border-color: rgba(255,255,255,.43); background: rgba(7,14,27,.42); backdrop-filter: blur(14px); }
.wallpaper-active .new-app-tile .app-icon-glyph { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.wallpaper-active .app-more { border-color: rgba(255,255,255,.1); background: rgba(7,14,27,.68); color: rgba(255,255,255,.78); box-shadow: 0 4px 16px rgba(0,0,0,.12); backdrop-filter: blur(12px); }
.wallpaper-active .app-more[aria-expanded="true"] { border-color: rgba(255,255,255,.18); background: rgba(7,14,27,.78); color: rgba(255,255,255,.92); box-shadow: 0 7px 22px rgba(0,0,0,.18); }
.wallpaper-active .empty { border-color: rgba(255,255,255,.23); background: rgba(8,15,28,.46); color: rgba(255,255,255,.7); backdrop-filter: blur(18px); }
.wallpaper-active .error { background: rgba(95,31,24,.82); color: #ffe5df; backdrop-filter: blur(16px); }
.wallpaper-active .notice { background: rgba(18,75,46,.82); color: #e1ffec; backdrop-filter: blur(16px); }
@media (hover: hover) and (pointer: fine) {
  .wallpaper-active .appearance-button:hover { border-color: rgba(255,255,255,.36); background: rgba(9,18,34,.68); }
  .wallpaper-active .app-tile:hover { border-color: rgba(255,255,255,.14); background: rgba(6,12,25,.36); box-shadow: 0 18px 45px rgba(0,0,0,.12); backdrop-filter: blur(15px) saturate(1.12); }
  .wallpaper-active .app-tile:not(.new-app-tile):hover .app-icon { box-shadow: 0 20px 46px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.1); }
  .wallpaper-active .app-more:hover { border-color: rgba(255,255,255,.18); background: rgba(7,14,27,.78); color: rgba(255,255,255,.92); box-shadow: 0 7px 22px rgba(0,0,0,.18); }
}

.campus-icon { width: 100%; height: 100%; display: block; overflow: visible; }
.home-create-sheet .campus-sheet { width: min(560px, calc(100vw - 28px)); }
.create-options { display: grid; gap: 10px; }
.create-option { min-width: 0; min-height: 92px; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--campus-color-line-soft); border-radius: 16px; background: var(--campus-color-fill); color: var(--campus-color-text); cursor: pointer; text-align: left; font: inherit; transition: border-color .16s ease, background .16s ease, transform .14s ease; }
.create-option:focus-visible { border-color: var(--campus-tint, #397ee8); background: color-mix(in srgb, var(--campus-color-fill) 82%, var(--campus-tint, #397ee8)); outline: 3px solid color-mix(in srgb, var(--campus-tint, #397ee8) 17%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .create-option:hover { border-color: var(--campus-color-line); background: color-mix(in srgb, var(--campus-color-fill) 86%, var(--campus-color-text)); transform: translateY(-1px); }
}
.create-option:active { transform: scale(.985); }
.create-option:disabled { cursor: wait; opacity: .64; transform: none; }
.create-option-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--campus-tint, #397ee8) 16%, transparent); color: var(--campus-tint, #397ee8); }
.create-option-icon .campus-icon { width: 23px; height: 23px; }
.create-option-copy { min-width: 0; display: grid; gap: 5px; }
.create-option-copy strong { font-size: 16px; letter-spacing: -.018em; }
.create-option-copy span { color: var(--campus-color-text-secondary); font-size: 11px; line-height: 1.45; }
.create-option-arrow { align-self: center; color: var(--campus-color-text-tertiary); font-size: 20px; }
.create-privacy { display: flex; align-items: flex-start; gap: 8px; margin: 16px 3px 0; color: var(--campus-color-text-tertiary); font-size: 10px; line-height: 1.5; }
.create-privacy span { color: var(--campus-tint, #397ee8); font-size: 8px; }
.create-link-option .create-option-icon { background: color-mix(in srgb, #2fa273 16%, transparent); color: #45b789; }

.home-link-sheet .campus-sheet { width: min(560px, calc(100vw - 28px)); }
.link-form { display: grid; gap: 16px; }
.link-form .campus-field { gap: 7px; }
.link-form input[type="text"],
.link-form input[type="url"] { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--campus-color-line); border-radius: 12px; background: var(--campus-color-surface); color: var(--campus-color-text); font: inherit; font-size: 16px; }
.link-form input:focus { border-color: var(--campus-tint, #397ee8); outline: 3px solid color-mix(in srgb, var(--campus-tint, #397ee8) 17%, transparent); }
.link-icon-option { min-height: 62px; display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: start; gap: 11px; padding: 13px; border: 1px solid var(--campus-color-line-soft); border-radius: 14px; background: var(--campus-color-fill); cursor: pointer; }
.link-icon-option input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--campus-tint, #397ee8); }
.link-icon-option span { min-width: 0; display: grid; gap: 4px; }
.link-icon-option strong { color: var(--campus-color-text); font-size: 13px; }
.link-icon-option small { color: var(--campus-color-text-secondary); font-size: 10px; line-height: 1.45; }

:root.wallpaper-light, :root.wallpaper-light body { background-color: var(--wallpaper-canvas-color); }
:root.wallpaper-light .appearance-button { border-color: rgba(24,36,52,.13); background: rgba(255,255,255,.78); color: #4d5662; box-shadow: 0 10px 30px rgba(22,42,62,.08); }
:root.wallpaper-light .edit-button[aria-pressed="true"] { border-color: rgba(0,122,255,.25); background: rgba(0,122,255,.14); color: #007aff; }
:root.wallpaper-light .appearance-button-icon { color: #4d5662; }
:root.wallpaper-light .app-tile.menu-open,
:root.wallpaper-light .app-tile:focus-within { border-color: rgba(33,55,78,.1); background: rgba(255,255,255,.58); box-shadow: 0 18px 45px rgba(30,55,80,.09); }
:root.wallpaper-light .app-icon { border-color: rgba(24,36,52,.07); box-shadow: 0 12px 30px rgba(28,50,72,.13), inset 0 1px rgba(255,255,255,.2); }
:root.wallpaper-light .app-tile.menu-open .app-icon,
:root.wallpaper-light .app-tile:focus-within .app-icon { box-shadow: 0 16px 36px rgba(28,50,72,.17), inset 0 1px rgba(255,255,255,.2); }
:root.wallpaper-light .app-name { color: #282d34; text-shadow: none; }
:root.wallpaper-light .new-app-tile .app-icon { border-color: rgba(55,73,92,.24); background: rgba(255,255,255,.56); }
:root.wallpaper-light .new-app-tile .app-icon-glyph { color: #343b44; text-shadow: none; }
:root.wallpaper-light .app-more { border-color: rgba(24,36,52,.08); background: rgba(255,255,255,.84); color: #626b75; box-shadow: 0 5px 16px rgba(24,42,60,.08); }
:root.wallpaper-light .app-more[aria-expanded="true"] { border-color: rgba(24,36,52,.14); background: rgba(255,255,255,.96); color: #4a525c; box-shadow: 0 7px 22px rgba(24,42,60,.11); }
:root.wallpaper-light .empty { border-color: rgba(48,69,89,.2); background: rgba(255,255,255,.52); color: #727b85; }
:root.wallpaper-light .error { background: rgba(255,228,214,.94); color: #7a3527; }
:root.wallpaper-light .notice { background: rgba(234,247,239,.94); color: #24623c; }
@media (hover: hover) and (pointer: fine) {
  :root.wallpaper-light .appearance-button:hover { border-color: rgba(24,36,52,.2); background: rgba(255,255,255,.94); }
  :root.wallpaper-light .app-tile:hover { border-color: rgba(33,55,78,.1); background: rgba(255,255,255,.58); box-shadow: 0 18px 45px rgba(30,55,80,.09); }
  :root.wallpaper-light .app-tile:not(.new-app-tile):hover .app-icon { box-shadow: 0 16px 36px rgba(28,50,72,.17), inset 0 1px rgba(255,255,255,.2); }
  :root.wallpaper-light .app-more:hover { border-color: rgba(24,36,52,.14); background: rgba(255,255,255,.96); color: #4a525c; box-shadow: 0 7px 22px rgba(24,42,60,.11); }
}

.appearance-layer {
  position: fixed !important;
  z-index: 100 !important;
  inset: 0;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding:
    calc(var(--campus-shell-inset-top, 0px) + 28px)
    calc(var(--campus-shell-inset-right, 0px) + 28px)
    calc(var(--campus-shell-inset-bottom, 0px) + 28px)
    calc(var(--campus-shell-inset-left, 0px) + 28px);
  background: rgba(3,7,14,.46);
  backdrop-filter: blur(10px) saturate(.92);
  overscroll-behavior: none;
  animation: appearance-layer-in .2s ease both;
}
@keyframes appearance-layer-in { from { opacity: 0; } }
.appearance-backdrop {
  position: absolute;
  inset: 0;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
.appearance-dialog {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: min(
    820px,
    calc(100dvh - var(--campus-shell-inset-top, 0px) - var(--campus-shell-inset-bottom, 0px) - 56px)
  );
  overflow-y: auto;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 28px;
  background: rgba(250,250,252,.97);
  box-shadow: 0 32px 90px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.92);
  color: #202025;
  backdrop-filter: blur(30px) saturate(1.16);
  transform-origin: center bottom;
  will-change: opacity, transform;
  animation: appearance-dialog-in .24s cubic-bezier(.2,.85,.2,1) both;
}
@keyframes appearance-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.appearance-layer.closing { pointer-events: none; animation: appearance-layer-out .2s ease .04s both; }
@keyframes appearance-layer-out { to { opacity: 0; } }
.appearance-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 24px; }
.appearance-title { min-width: 0; }
.appearance-title h1 { margin: 0; color: #1d1d22; font-size: clamp(24px, 3vw, 30px); font-weight: 740; letter-spacing: -.035em; }
.appearance-title p { margin: 6px 0 0; color: #717178; font-size: 13px; line-height: 1.45; }
.appearance-close { min-width: 62px; height: 36px; flex: 0 0 auto; padding: 0 15px; border: 0; border-radius: 999px; background: rgba(0,122,255,.1); color: #0674dc; cursor: pointer; font-size: 13px; font-weight: 720; line-height: 1; }
.theme-control { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 24px; padding: 14px 16px; border: 1px solid #e1e1e5; border-radius: 16px; background: rgba(255,255,255,.72); }
.scope-control { margin-bottom: 12px; }
.theme-control-copy { min-width: 0; display: grid; gap: 3px; }
.theme-control-copy strong { color: #303035; font-size: 12px; }
.theme-control-copy small { color: #7d7d84; font-size: 10px; line-height: 1.4; }
.theme-select { min-width: 164px; height: 36px; padding: 0 34px 0 11px; border: 1px solid #d7d7dc; border-radius: 10px; background-color: #fff; color: #29292f; cursor: pointer; font: inherit; font-size: 11px; font-weight: 680; }
.theme-select:focus-visible { outline: 3px solid rgba(0,122,255,.2); outline-offset: 1px; }
.theme-select:disabled { cursor: wait; opacity: .58; }
@media (max-width: 700px) {
  input, textarea, select, [contenteditable]:not([contenteditable="false"]) { font-size: 16px !important; }
}
.appearance-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.appearance-section-title { margin: 0; color: #3c3c42; font-size: 13px; font-weight: 760; letter-spacing: -.01em; }
.appearance-section-hint { display: none; color: #8b8b92; font-size: 10px; }
.wallpaper-groups { display: grid; gap: 22px; }
.wallpaper-group { min-width: 0; }
.wallpaper-group-title { margin: 0 0 10px 2px; color: #707078; font-size: 10px; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; }
.wallpaper-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 12px; }
.wallpaper-option { min-width: 0; padding: 0; border: 0; border-radius: 16px; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.wallpaper-option-art {
  position: relative;
  aspect-ratio: 16 / 10;
  display: block;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 14px;
  background-position: center;
  background-size: cover;
  box-shadow: 0 8px 20px rgba(25,25,31,.08);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.wallpaper-option.selected .wallpaper-option-art { border-color: #4679ff; box-shadow: 0 0 0 3px rgba(70,121,255,.16), 0 12px 28px rgba(25,25,31,.14); }
.wallpaper-option-check { position: absolute; top: 8px; right: 8px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #4679ff; box-shadow: 0 4px 12px rgba(17,45,116,.3); color: #fff; font-size: 12px; font-weight: 850; opacity: 0; transform: scale(.7); transition: opacity .16s ease, transform .16s ease; }
.wallpaper-option.selected .wallpaper-option-check { opacity: 1; transform: scale(1); }
.preview-clean {
  background:
    radial-gradient(circle at 82% 18%, rgba(111,74,255,.42), transparent 34%),
    radial-gradient(circle at 12% 92%, rgba(32,189,219,.28), transparent 38%),
    #0b0b0d;
}
.preview-clean::before { content: ""; position: absolute; top: -58%; right: -38%; width: 118%; aspect-ratio: 1; border: 1px solid rgba(194,187,255,.18); border-radius: 50%; }
.preview-clean-light {
  background:
    radial-gradient(circle at 82% 18%, rgba(111,74,255,.18), transparent 34%),
    radial-gradient(circle at 12% 92%, rgba(32,189,219,.15), transparent 38%),
    linear-gradient(#fff, #f7faff);
  box-shadow: inset 0 0 0 1px rgba(33,42,52,.06), 0 8px 20px rgba(25,25,31,.08);
}
.preview-clean-light::before { content: ""; position: absolute; top: -58%; right: -38%; width: 118%; aspect-ratio: 1; border: 1px solid rgba(88,74,164,.12); border-radius: 50%; }
.preview-plain-black { background: #0b0b0d; }
.preview-plain-white { background: #fff; box-shadow: inset 0 0 0 1px rgba(33,42,52,.08), 0 8px 20px rgba(25,25,31,.08); }
.preview-white-cyberpunk {
  background-color: #f7f9fd;
  background-image:
    linear-gradient(rgba(0,126,190,.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(206,0,143,.18) 1px, transparent 1px),
    radial-gradient(circle at 50% 52%, rgba(0,139,214,.14), transparent 38%);
  background-size: 21px 18px, 21px 18px, auto;
}
.preview-neon-city,
.preview-cyber-city-live { background-image: linear-gradient(rgba(1,8,20,.08), rgba(1,8,20,.35)), url("./wallpapers/neon-city.jpg"); }
.preview-neon-city-light,
.preview-cyber-city-live-light { background-image: linear-gradient(rgba(255,255,255,.55), rgba(244,249,255,.72)), url("./wallpapers/neon-city.jpg"); }
.preview-sky-garden { background-image: linear-gradient(rgba(1,10,18,.1), rgba(1,10,18,.25)), url("./wallpapers/sky-garden.jpg"); }
.preview-sky-garden-light { background-image: linear-gradient(rgba(255,255,255,.4), rgba(241,249,250,.66)), url("./wallpapers/sky-garden.jpg"); }
.preview-neon-grid {
  background-color: #090923;
  background-image:
    linear-gradient(rgba(58,198,255,.38) 1px, transparent 1px),
    linear-gradient(90deg, rgba(235,50,196,.35) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(227,38,187,.34), transparent 38%);
  background-size: 21px 18px, 21px 18px, auto;
  transform: perspective(180px) rotateX(4deg);
}
.preview-cyber-city-live::before { content: ""; position: absolute; inset: 50% -15% -20%; background-image: linear-gradient(rgba(51,205,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(229,55,205,.44) 1px, transparent 1px); background-size: 25px 18px; transform: perspective(120px) rotateX(55deg); -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000); }
.preview-cyber-city-live-light::before { content: ""; position: absolute; inset: 50% -15% -20%; background-image: linear-gradient(rgba(0,126,190,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(206,0,143,.2) 1px, transparent 1px); background-size: 25px 18px; transform: perspective(120px) rotateX(55deg); mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000); }
.wallpaper-option-copy { display: grid; gap: 2px; padding: 9px 3px 0; }
.wallpaper-option-copy strong { min-width: 0; overflow: hidden; color: #2b2b30; font-size: 12px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.wallpaper-option-copy small { color: #919198; font-size: 9px; }
.custom-wallpaper { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 24px; padding: 15px 16px; border: 1px solid #e1e1e5; border-radius: 16px; background: rgba(255,255,255,.72); }
.custom-wallpaper-copy { display: grid; gap: 3px; }
.custom-wallpaper-copy strong { color: #303035; font-size: 12px; }
.custom-wallpaper-copy span { color: #7d7d84; font-size: 10px; line-height: 1.4; }
.custom-wallpaper-actions { display: flex; align-items: center; gap: 8px; }
.upload-wallpaper, .remove-wallpaper { min-height: 35px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 0; border-radius: 9px; cursor: pointer; font-size: 10px; font-weight: 720; white-space: nowrap; }
.upload-wallpaper { background: #29292f; color: #fff; }
.upload-wallpaper.busy { cursor: wait; opacity: .65; }
.upload-wallpaper input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.remove-wallpaper { background: #ededf0; color: #a34743; }
.remove-wallpaper:disabled { cursor: default; opacity: .5; }
.appearance-error { margin: 14px 0 0; padding: 10px 12px; border-radius: 9px; background: #ffe8e2; color: #934338; font-size: 11px; }
.motion-note { margin: 14px 2px 0; color: #8a8a91; font-size: 9px; line-height: 1.45; }
@media (hover: hover) and (pointer: fine) {
  .appearance-close:hover { background: rgba(0,122,255,.16); color: #005fb8; }
  .wallpaper-option:hover .wallpaper-option-art { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(25,25,31,.14); }
  .wallpaper-option:hover .preview-neon-grid { transform: translateY(-2px) perspective(180px) rotateX(4deg); }
  .upload-wallpaper:hover { background: #111116; }
  .remove-wallpaper:hover { background: #e3e3e7; }
}

@media (max-width: 760px) {
  :root,
  body {
    /* Home owns a deliberately short document scroller so the trusted bars
       can follow the first swipe even when the app grid fits. Keep boundary
       gestures inside that iframe without opting Home into SDK refresh. */
    overscroll-behavior-y: contain;
  }
  .home {
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-right: max(18px, env(safe-area-inset-right));
    padding-bottom: max(64px, calc(32px + env(safe-area-inset-bottom)));
    padding-left: max(18px, env(safe-area-inset-left));
  }
  .embedded-launcher .home {
    --launcher-scroll-runway: 128px;
    /* Home must stay genuinely scrollable when its grid fits the viewport.
       Use stable content insets so hiding the shell bars cannot collapse this
       runway underneath the user's gesture. */
    min-height: calc(100dvh + var(--launcher-scroll-runway));
    padding-top: calc(var(--campus-content-inset-top, var(--campus-shell-inset-top, 0px)) + 16px);
    padding-bottom: calc(var(--campus-content-inset-bottom, var(--campus-shell-inset-bottom, 0px)) + var(--launcher-scroll-runway));
  }
  .home-toolbar { margin-bottom: 0; }
  .appearance-button { width: 44px; height: 44px; min-height: 44px; border-radius: 13px; }
  .app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 6px; margin-top: 20px; }
  .app-tile.menu-open,
  .app-tile:focus-within,
  .wallpaper-active .app-tile.menu-open,
  .wallpaper-active .app-tile:focus-within,
  :root.wallpaper-light .app-tile.menu-open,
  :root.wallpaper-light .app-tile:focus-within {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .app-launcher { padding: 17px 3px 14px; -webkit-tap-highlight-color: transparent; }
  .app-icon { width: min(76px, 22vw); height: min(76px, 22vw); border-radius: 28px; }
  .app-icon-glyph { font-size: 31px; }
  .menu-dismiss-layer { display: none; }
  .mobile-menu-layer {
    position: fixed;
    z-index: 50;
    inset: 0;
    display: grid;
    align-items: end;
    overflow: hidden;
    padding-top: calc(var(--campus-shell-inset-top, 0px) + 7px);
    padding-right: calc(var(--campus-shell-inset-right, 0px) + 10px);
    padding-bottom: calc(var(--campus-shell-inset-bottom, 0px) + 10px);
    padding-left: calc(var(--campus-shell-inset-left, 0px) + 10px);
  }
  .mobile-menu-dismiss-layer {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    background: rgba(7,10,18,.28);
    touch-action: manipulation;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  .mobile-menu-layer .app-menu {
    position: relative;
    z-index: 1;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-height: calc(100dvh - var(--campus-shell-inset-top, 0px) - var(--campus-shell-inset-bottom, 0px) - 14px);
    padding: 14px 8px 8px;
    border: 0;
    border-radius: 28px;
    background: rgba(248,248,250,.94);
    box-shadow: 0 24px 64px rgba(5,7,13,.28);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    transform-origin: center bottom;
    animation-name: sheet-in;
  }
  .app-menu::before { content: ""; position: absolute; top: 7px; left: 50%; width: 34px; height: 4px; border-radius: 999px; background: rgba(60,60,67,.22); transform: translateX(-50%); }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }
  .campus-action-popover-header { min-height: 61px; padding: 8px 10px 10px; }
  .campus-action-popover-leading { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; font-size: 19px; }
  .campus-action-popover-heading strong { font-size: 16px; }
  .campus-action-popover-heading small { font-size: 12px; }
  .campus-action-popover-item { min-height: 54px; grid-template-columns: 28px minmax(0,1fr); padding: 10px 14px; border-radius: 12px; }
  .campus-action-popover-item.has-trailing { grid-template-columns: 28px minmax(0,1fr) auto; }
  .campus-action-popover-item-copy strong { font-size: 16px; }
  .campus-action-popover-item-icon { width: 28px; height: 28px; }
  .campus-action-popover-item-icon svg { width: 20px; height: 20px; }
  .appearance-layer { align-items: end; padding: 10px; }
  .embedded-launcher .appearance-layer {
    /* Render against the post-chrome geometry from the first frame. The shell
       bars animate away concurrently, so their live insets must not move the
       sheet while it appears. Physical device safe areas still apply. */
    padding-top: calc(env(safe-area-inset-top, 0px) + 7px);
    padding-right: calc(env(safe-area-inset-right, 0px) + 10px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    padding-left: calc(env(safe-area-inset-left, 0px) + 10px);
  }
  .appearance-dialog { position: relative; width: 100%; height: 70dvh; max-height: calc(100dvh - 20px); padding: 22px 17px max(18px, env(safe-area-inset-bottom)); border-radius: 28px; transform-origin: center bottom; animation: appearance-sheet-in .32s cubic-bezier(.18,.86,.24,1) both; }
  @keyframes appearance-sheet-in {
    from { opacity: 0; transform: translateY(34px) scale(.985); }
    72% { opacity: 1; }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .embedded-launcher .appearance-dialog { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 14px); }
  .appearance-heading { gap: 16px; margin-bottom: 22px; }
  .appearance-title h1 { font-size: 23px; }
  .appearance-title p { margin-top: 4px; font-size: 12px; }
  .appearance-close { min-width: 58px; height: 34px; padding-inline: 13px; }
  .theme-control { gap: 12px; margin-bottom: 18px; padding: 12px; }
  .theme-select { min-width: 144px; }
  .appearance-section-heading { margin-bottom: 8px; }
  .appearance-section-hint { display: inline; }
  .wallpaper-groups { gap: 16px; }
  .wallpaper-group-title { margin-bottom: 6px; }
  .wallpaper-options {
    grid-auto-flow: column;
    grid-auto-columns: min(148px, 43vw);
    grid-template-columns: none;
    gap: 12px;
    margin: 0 -17px;
    overflow-x: auto;
    padding: 4px 17px 13px;
    scroll-padding-inline: 17px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .wallpaper-options::-webkit-scrollbar { display: none; }
  .wallpaper-option { scroll-snap-align: start; }
  .wallpaper-option-copy { padding-top: 8px; }
  .wallpaper-option-copy strong { font-size: 12.5px; }
  .wallpaper-option-copy small { font-size: 10px; }
  .custom-wallpaper { gap: 12px; margin-top: 10px; padding: 12px; }
  .custom-wallpaper-copy { min-width: 0; }
  .custom-wallpaper-copy span { white-space: normal; }
  .custom-wallpaper-actions { flex: 0 0 auto; }
  .upload-wallpaper, .remove-wallpaper { min-height: 36px; }
  .custom-wallpaper.has-custom { align-items: stretch; flex-direction: column; }
  .custom-wallpaper.has-custom .custom-wallpaper-actions { width: 100%; }
  .custom-wallpaper.has-custom .upload-wallpaper { flex: 1; }
  .motion-note { margin-top: 11px; }
}

@media (max-width: 560px) {
  .home-create-sheet .campus-sheet { width: 100%; }
  .create-option { min-height: 100px; gap: 13px; padding: 14px; }
  .create-option-copy strong { font-size: 17px; }
  .create-option-copy span { font-size: 11px; }
}

/* Squint/Reagami launcher composition. Wallpaper rendering above remains
   product-specific; controls and overlays use the shared Campus primitives. */
.home > .home-content { position: relative; z-index: 1; }
.home .campus-toolbar {
  min-height: 44px;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.home .campus-toolbar-leading { min-width: 0; flex: 0 1 auto; }
.home .campus-toolbar-trailing { gap: 8px; margin-left: auto; }
.home .campus-toolbar .campus-icon-button {
  border-color: rgba(255,255,255,.16);
  background: rgba(7,14,27,.5);
  color: #fff;
}
.home .campus-connection-status {
  padding-left: 1px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.88);
}
.home .campus-connection-status small { color: rgba(255,255,255,.58); }
.home .campus-connection-action { white-space: nowrap; }
.home .campus-notice { margin: 0 0 14px; backdrop-filter: blur(18px); }
.home .campus-empty-state { color: rgba(255,255,255,.82); }
.app-collections { display: grid; gap: 42px; margin-top: 24px; }
.home .app-collection-header {
  padding: 0 8px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 12px rgba(0,0,0,.38);
}
.home .app-collection-header h2 { font-size: 18px; letter-spacing: -.025em; }
.app-collection .app-grid { margin-top: 12px; }
:root.wallpaper-light .home .app-collection-header { color: #282d34; text-shadow: none; }
.app-grid { align-items: start; }
.app-tile[class*="tone-"] { --tone: #394252; }
.app-tile.tone-campus { --tone: #394252; }
.app-tile.tone-communication { --tone: #259b72; }
.app-tile.tone-finance { --tone: #d88727; }
.app-tile.tone-intelligence { --tone: #397ee8; }
.app-tile.tone-files { --tone: #168fa3; }
.app-tile.tone-claw { --tone: #8357d4; }
.app-tile.tone-link { --tone: #526174; }
.app-name-row .campus-status-pill { padding: 3px 6px; font-size: 8px; }
.app-options { right: 5px; }
.app-more { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; font-size: 12px; }
.app-more > span { display: grid; place-items: center; }
.home .campus-sheet-layer { z-index: 120; }
.home .campus-sheet {
  color: var(--ink);
  background: color-mix(in srgb, var(--campus-color-surface-raised) 94%, transparent);
  backdrop-filter: blur(28px) saturate(1.12);
}
.home-app-sheet .campus-collection { overflow: hidden; }
.home-action-row {
  width: 100%;
  min-height: 66px;
  border: 0;
  border-bottom: 1px solid var(--campus-color-line-soft);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.home-action-row:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .home-action-row:hover { background: var(--campus-color-fill); }
}
.home-action-primary .campus-row-title { color: var(--campus-tint, #397ee8); }
.home-action-danger .campus-row-title { color: var(--campus-color-danger, #d74338); }
.home-action-arrow { margin-left: auto; color: var(--campus-color-text-tertiary); font-size: 24px; }
.appearance-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.appearance-wallpapers { margin-top: 24px; }
.wallpaper-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wallpaper-option { display: grid; gap: 8px; }
.wallpaper-preview {
  position: relative;
  aspect-ratio: 16 / 10;
  display: block;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 14px;
  background: var(--wallpaper-canvas-image);
  background-position: center;
  background-size: cover;
  box-shadow: 0 8px 20px rgba(25,25,31,.1);
}
.wallpaper-option.selected .wallpaper-preview {
  border-color: var(--campus-tint, #5065e5);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--campus-tint, #5065e5) 18%, transparent), 0 12px 28px rgba(25,25,31,.14);
}
.wallpaper-option > span:last-child { display: grid; gap: 2px; padding: 0 3px; }
.wallpaper-option > span:last-child strong { font-size: 12px; }
.wallpaper-option > span:last-child small { color: var(--campus-color-text-tertiary); font-size: 10px; }
.wallpaper-option[data-wallpaper-preview="plain-black"] .wallpaper-preview { background: #0b0b0d; }
.wallpaper-option[data-wallpaper-preview="plain-white"] .wallpaper-preview { background: #fff; }
.wallpaper-option[data-wallpaper-preview="clean"] .wallpaper-preview { background: radial-gradient(circle at 82% 18%,rgba(111,74,255,.42),transparent 34%),radial-gradient(circle at 12% 92%,rgba(32,189,219,.28),transparent 38%),#0b0b0d; }
.wallpaper-option[data-wallpaper-preview="clean-light"] .wallpaper-preview { background: radial-gradient(circle at 82% 18%,rgba(111,74,255,.18),transparent 34%),radial-gradient(circle at 12% 92%,rgba(32,189,219,.15),transparent 38%),#fff; }
.wallpaper-option[data-wallpaper-preview="neon-city"] .wallpaper-preview,
.wallpaper-option[data-wallpaper-preview="cyber-city-live"] .wallpaper-preview { background-image: linear-gradient(rgba(1,8,20,.08),rgba(1,8,20,.35)),url("./wallpapers/neon-city.jpg"); }
.wallpaper-option[data-wallpaper-preview="neon-city-light"] .wallpaper-preview,
.wallpaper-option[data-wallpaper-preview="cyber-city-live-light"] .wallpaper-preview { background-image: linear-gradient(rgba(255,255,255,.55),rgba(244,249,255,.72)),url("./wallpapers/neon-city.jpg"); }
.wallpaper-option[data-wallpaper-preview="sky-garden"] .wallpaper-preview { background-image: linear-gradient(rgba(1,10,18,.1),rgba(1,10,18,.25)),url("./wallpapers/sky-garden.jpg"); }
.wallpaper-option[data-wallpaper-preview="sky-garden-light"] .wallpaper-preview { background-image: linear-gradient(rgba(255,255,255,.4),rgba(241,249,250,.66)),url("./wallpapers/sky-garden.jpg"); }
.wallpaper-option[data-wallpaper-preview="neon-grid"] .wallpaper-preview,
.wallpaper-option[data-wallpaper-preview="white-cyberpunk"] .wallpaper-preview { background-image: linear-gradient(rgba(58,198,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(235,50,196,.3) 1px,transparent 1px),radial-gradient(circle at 50% 50%,rgba(70,139,227,.22),transparent 38%); background-size: 21px 18px,21px 18px,auto; }
.custom-wallpaper-option { margin-top: 14px; }
.custom-wallpaper-actions { margin-top: 18px; flex-wrap: wrap; }
.custom-wallpaper-actions label.campus-button { cursor: pointer; }
:root.wallpaper-light .home .campus-toolbar {
  border: 0;
  background: transparent;
  box-shadow: none;
}
:root.wallpaper-light .home .campus-toolbar .campus-icon-button { border-color: rgba(24,36,52,.1); background: rgba(255,255,255,.78); color: #3d4651; }
:root.wallpaper-light .home .campus-connection-status { color: #3d4651; }
:root.wallpaper-light .home .campus-connection-status small { color: #78818b; }
:root.wallpaper-light .home .campus-empty-state { color: #3d4651; }
@media (max-width: 760px) {
  .home .campus-toolbar { align-items: center; flex-direction: row; flex-wrap: nowrap; gap: 8px; }
  .home .campus-toolbar-leading:not(:empty) { width: auto; min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .home .campus-toolbar-leading:empty { display: none; }
  .home .campus-toolbar-trailing { width: auto; flex: 0 0 auto; margin-left: auto; justify-content: flex-end; }
  .home .campus-connection-status { width: 100%; min-width: 0; justify-content: flex-start; overflow: hidden; }
  .home .campus-connection-copy { min-width: 0; }
  .home .campus-connection-status strong,
  .home .campus-connection-status small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-name-row .campus-status-pill { display: none; }
  .appearance-fields { grid-template-columns: 1fr; }
  /* Reset every legacy carousel property before composing the shared mobile
     sheet. Otherwise implicit columns push previews and labels together. */
  .wallpaper-options {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 10px;
    margin: 0;
    overflow: visible;
    padding: 0;
    scroll-padding-inline: 0;
    scroll-snap-type: none;
  }
  .home .campus-sheet { max-height: calc(100dvh - var(--campus-shell-inset-top, 0px) - 12px); }
}

@media (max-width: 390px) {
  .app-name { font-size: 12px; }
  .theme-control { align-items: stretch; flex-direction: column; }
  .theme-select { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .wallpaper-grid { animation: none !important; }
  .app-tile.is-opening .app-icon { animation: none !important; opacity: .72; transform: none; }
}