/* ==========================================================================
   Homepage · Liquid Glass  (v3 — themes, backgrounds, reactive light)
   A macOS Tahoe–inspired design layer for gethomepage (v2.x).

   Rules this file follows
   - Pure styling. No Homepage element is hidden, removed or re-ordered.
   - Selectors target Homepage's semantic hooks (#services, #layout-groups,
     .service-card, .bookmark, .information-widget-*, #myTab …), never
     generated headlessui ids.
   - Every colour comes from a token, so Light/Dark, accent, glass style and
     background preset are just attribute switches on <html>, set by
     custom.js (Control Center panel):
         data-lg-mode   = dark | light          (resolved; "auto" follows OS)
         data-lg-accent = blue | purple | pink | orange | green | graphite
         data-lg-bg     = aurora | sunset | ocean | forest | lavender | graphite
         data-lg-motion = off | calm | lively
         data-lg-glass  = tinted | clear
         data-lg-light  = on | off              (pointer-reactive highlights)
     Without JS the page renders in Dark · Blue · Aurora · Calm · Tinted.
   - Blur budget: backdrop-filter only on large sheets (group panels,
     header widgets, search, sidebar, quick launch, Control Center).

   Sections
    0. Registered properties     8. Bookmarks
    1. Tokens · dark (default)   9. Quick launch (Spotlight)
    2. Tokens · light           10. Sidebar tabs
    3. Accent · glass · presets 11. Footer & focus
    4. Base & background        12. Jelly press
    5. Glass primitives         13. Control Center panel
    6. Header & widgets         14. Motion · responsive · fallbacks
    7. Services
   ========================================================================== */

/* 0. Registered properties ------------------------------------------------- */
/* Registering colours makes them animatable, so background presets and
   modes morph smoothly instead of snapping. */
@property --lg-a1 { syntax: "<color>"; inherits: true; initial-value: #0a84ff; }
@property --lg-a2 { syntax: "<color>"; inherits: true; initial-value: #bf5af2; }
@property --lg-a3 { syntax: "<color>"; inherits: true; initial-value: #64d2ff; }
@property --lg-a4 { syntax: "<color>"; inherits: true; initial-value: #5e5ce6; }
@property --lg-base-1 { syntax: "<color>"; inherits: true; initial-value: #0a0f1f; }
@property --lg-base-2 { syntax: "<color>"; inherits: true; initial-value: #05060a; }
@property --lg-base-3 { syntax: "<color>"; inherits: true; initial-value: #16181d; }
@property --lg-base-top { syntax: "<color>"; inherits: true; initial-value: #111a33; }
/* Pointer highlight colour: not inherited so each card fades on its own. */
@property --lg-spot-c { syntax: "<color>"; inherits: false; initial-value: transparent; }

/* 1. Tokens · dark (default) ----------------------------------------------- */
:root {
  /* system colours */
  --lg-green: #30d158;
  --lg-orange: #ff9f0a;
  --lg-yellow: #ffd60a;
  --lg-red: #ff453a;
  --lg-pink: #ff6482;
  --lg-tab-1: #0a84ff;
  --lg-tab-2: #bf5af2;
  --lg-tab-3: #64d2ff;
  --lg-tab-4: #30d158;

  /* accent (overridden by data-lg-accent) */
  --lg-accent: #0a84ff;
  --lg-accent-soft: color-mix(in srgb, var(--lg-accent) 24%, transparent);
  --lg-accent-glow: color-mix(in srgb, var(--lg-accent) 40%, transparent);
  --lg-accent-hi: color-mix(in srgb, var(--lg-accent) 55%, white);

  /* page base */
  --lg-base-1: #0a0f1f;               /* dark navy  */
  --lg-base-2: #05060a;               /* deep black */
  --lg-base-3: #16181d;               /* charcoal   */
  --lg-base-top: #111a33;
  --lg-aurora-mix: 30%;
  --lg-aurora-opacity: 1;
  --lg-vignette: rgba(0, 0, 0, 0.55);
  --lg-grain: 0.035;

  /* text */
  --lg-text: rgba(255, 255, 255, 0.96);
  --lg-text-2: rgba(235, 235, 245, 0.62);
  --lg-text-3: rgba(235, 235, 245, 0.38);
  --lg-on-accent: #fff;

  /* glass surfaces */
  --lg-glass: rgba(255, 255, 255, 0.06);        /* sheets & tiles     */
  --lg-glass-hi: rgba(255, 255, 255, 0.10);
  --lg-card-a: rgba(255, 255, 255, 0.07);       /* chips inside sheets */
  --lg-card-b: rgba(255, 255, 255, 0.025);
  --lg-card-ha: rgba(255, 255, 255, 0.13);
  --lg-card-hb: rgba(255, 255, 255, 0.05);
  --lg-stroke: rgba(255, 255, 255, 0.10);
  --lg-stroke-hi: rgba(255, 255, 255, 0.20);
  --lg-bar: rgba(14, 16, 24, 0.42);             /* scrolled header      */
  --lg-side: rgba(20, 22, 32, 0.38);            /* sidebar / seg bar    */
  --lg-pop: rgba(28, 30, 40, 0.74);             /* popovers             */
  --lg-dialog: rgba(30, 32, 42, 0.62);          /* quick launch         */
  --lg-input: rgba(255, 255, 255, 0.07);
  --lg-input-hi: rgba(255, 255, 255, 0.10);
  --lg-input-focus: rgba(255, 255, 255, 0.12);
  --lg-track: rgba(255, 255, 255, 0.10);
  --lg-hover: rgba(255, 255, 255, 0.07);
  --lg-sel-a: rgba(255, 255, 255, 0.14);
  --lg-sel-b: rgba(255, 255, 255, 0.07);
  --lg-btn: rgba(255, 255, 255, 0.10);
  --lg-btn-hi: rgba(255, 255, 255, 0.18);
  --lg-divider: rgba(255, 255, 255, 0.10);
  --lg-scrollbar: rgba(255, 255, 255, 0.16);
  --lg-spot: rgba(255, 255, 255, 0.13);
  --lg-spot-soft: rgba(255, 255, 255, 0.06);
  --lg-fallback: rgba(22, 24, 32, 0.94);
  --lg-blur: 28px;
  --lg-sat: 170%;

  /* light on glass */
  --lg-rim: linear-gradient(150deg,
            rgba(255, 255, 255, 0.42) 0%,
            rgba(255, 255, 255, 0.10) 28%,
            rgba(255, 255, 255, 0.04) 60%,
            rgba(255, 255, 255, 0.16) 100%);
  --lg-sheen: linear-gradient(180deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0.02) 38%,
            rgba(255, 255, 255, 0) 60%);

  /* depth */
  --lg-shadow-1: 0 1px 1px rgba(0, 0, 0, 0.20), 0 6px 18px -6px rgba(0, 0, 0, 0.45);
  --lg-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.18), 0 22px 48px -18px rgba(0, 0, 0, 0.70);
  --lg-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.22), 0 18px 36px -14px rgba(0, 0, 0, 0.65);
  --lg-shadow-pop: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  --lg-inner: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  --lg-inner-card: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --lg-inner-card-hi: inset 0 1px 0 rgba(255, 255, 255, 0.20);

  /* shape */
  --lg-r-sheet: 26px;
  --lg-r-card: 16px;

  /* motion (150–300ms UI, springs for physical things) */
  --lg-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lg-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --lg-fast: 160ms;
  --lg-med: 240ms;
  --lg-slow: 300ms;
  --lg-jelly-press: 1.045 0.93;
  --lg-jelly-time: 560ms;

  --lg-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
             "Apple SD Gothic Neo", "Pretendard", "Segoe UI Variable", "Segoe UI",
             "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

/* 2. Tokens · light -------------------------------------------------------- */
html[data-lg-mode="light"] {
  color-scheme: light;
  --lg-base-1: #e9eefb;
  --lg-base-2: #f5f6fa;
  --lg-base-3: #eceef3;
  --lg-base-top: #dbe6ff;
  --lg-aurora-mix: 42%;
  --lg-vignette: rgba(190, 200, 225, 0.30);
  --lg-grain: 0.025;

  --lg-text: rgba(0, 0, 0, 0.86);
  --lg-text-2: rgba(60, 60, 67, 0.72);
  --lg-text-3: rgba(60, 60, 67, 0.48);

  --lg-glass: rgba(255, 255, 255, 0.40);
  --lg-glass-hi: rgba(255, 255, 255, 0.56);
  --lg-card-a: rgba(255, 255, 255, 0.66);
  --lg-card-b: rgba(255, 255, 255, 0.40);
  --lg-card-ha: rgba(255, 255, 255, 0.90);
  --lg-card-hb: rgba(255, 255, 255, 0.64);
  --lg-stroke: rgba(255, 255, 255, 0.70);
  --lg-stroke-hi: rgba(255, 255, 255, 0.95);
  --lg-bar: rgba(255, 255, 255, 0.55);
  --lg-side: rgba(255, 255, 255, 0.46);
  --lg-pop: rgba(250, 250, 253, 0.80);
  --lg-dialog: rgba(248, 248, 252, 0.74);
  --lg-input: rgba(255, 255, 255, 0.55);
  --lg-input-hi: rgba(255, 255, 255, 0.72);
  --lg-input-focus: rgba(255, 255, 255, 0.86);
  --lg-track: rgba(0, 0, 0, 0.08);
  --lg-hover: rgba(0, 0, 0, 0.05);
  --lg-sel-a: rgba(255, 255, 255, 0.95);
  --lg-sel-b: rgba(255, 255, 255, 0.70);
  --lg-btn: rgba(0, 0, 0, 0.06);
  --lg-btn-hi: rgba(0, 0, 0, 0.10);
  --lg-divider: rgba(0, 0, 0, 0.08);
  --lg-scrollbar: rgba(0, 0, 0, 0.18);
  --lg-spot: rgba(255, 255, 255, 0.75);
  --lg-spot-soft: rgba(255, 255, 255, 0.35);
  --lg-fallback: rgba(246, 247, 250, 0.96);

  --lg-rim: linear-gradient(150deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.45) 30%,
            rgba(255, 255, 255, 0.20) 60%,
            rgba(255, 255, 255, 0.75) 100%);
  --lg-sheen: linear-gradient(180deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.12) 40%,
            rgba(255, 255, 255, 0) 65%);

  --lg-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 22px -10px rgba(15, 23, 42, 0.20);
  --lg-shadow-2: 0 2px 6px rgba(15, 23, 42, 0.05), 0 24px 50px -24px rgba(15, 23, 42, 0.30);
  --lg-shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.08), 0 20px 40px -16px rgba(15, 23, 42, 0.30);
  --lg-shadow-pop: 0 30px 80px -24px rgba(15, 23, 42, 0.40), 0 0 0 0.5px rgba(15, 23, 42, 0.12);
  --lg-inner: inset 0 1px 0 rgba(255, 255, 255, 0.90), inset 0 -1px 0 rgba(255, 255, 255, 0.30);
  --lg-inner-card: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --lg-inner-card-hi: inset 0 1px 0 rgba(255, 255, 255, 1);
}
/* Homepage's own Tailwind text colours assume dark; in light mode quietly
   re-tint anything not styled below (zero specificity, so our rules win). */
:where(html[data-lg-mode="light"] #inner_wrapper [class*="text-theme-"],
       html[data-lg-mode="light"] #inner_wrapper [class*="text-white"]) {
  color: var(--lg-text-2) !important;
}

/* 3. Accent · glass style · background presets ----------------------------- */
html[data-lg-accent="purple"]   { --lg-accent: #bf5af2; }
html[data-lg-accent="pink"]     { --lg-accent: #ff375f; }
html[data-lg-accent="orange"]   { --lg-accent: #ff9f0a; }
html[data-lg-accent="green"]    { --lg-accent: #30d158; }
html[data-lg-accent="graphite"] { --lg-accent: #8e8e93; }
html[data-lg-mode="light"]                          { --lg-accent: #007aff; }
html[data-lg-mode="light"][data-lg-accent="purple"]   { --lg-accent: #af52de; }
html[data-lg-mode="light"][data-lg-accent="pink"]     { --lg-accent: #ff2d55; }
html[data-lg-mode="light"][data-lg-accent="orange"]   { --lg-accent: #ff9500; }
html[data-lg-mode="light"][data-lg-accent="green"]    { --lg-accent: #28b24a; }
html[data-lg-mode="light"][data-lg-accent="graphite"] { --lg-accent: #6e6e73; }

/* Clear glass: more see-through, crisper blur (Tahoe "Clear"). */
html[data-lg-glass="clear"] {
  --lg-glass: rgba(255, 255, 255, 0.025);
  --lg-glass-hi: rgba(255, 255, 255, 0.05);
  --lg-card-a: rgba(255, 255, 255, 0.045);
  --lg-card-b: rgba(255, 255, 255, 0.012);
  --lg-side: rgba(20, 22, 32, 0.18);
  --lg-bar: rgba(14, 16, 24, 0.22);
  --lg-blur: 16px;
  --lg-sat: 210%;
}
html[data-lg-mode="light"][data-lg-glass="clear"] {
  --lg-glass: rgba(255, 255, 255, 0.18);
  --lg-glass-hi: rgba(255, 255, 255, 0.30);
  --lg-card-a: rgba(255, 255, 255, 0.40);
  --lg-card-b: rgba(255, 255, 255, 0.20);
  --lg-side: rgba(255, 255, 255, 0.22);
  --lg-bar: rgba(255, 255, 255, 0.30);
}

/* Background presets: four aurora hues each. */
html[data-lg-bg="sunset"]   { --lg-a1: #ff9f0a; --lg-a2: #ff375f; --lg-a3: #ffd60a; --lg-a4: #bf5af2; }
html[data-lg-bg="ocean"]    { --lg-a1: #64d2ff; --lg-a2: #0a84ff; --lg-a3: #30d5c8; --lg-a4: #5e5ce6; }
html[data-lg-bg="forest"]   { --lg-a1: #30d158; --lg-a2: #40c8e0; --lg-a3: #a8e063; --lg-a4: #0f9d8a; }
html[data-lg-bg="lavender"] { --lg-a1: #bf5af2; --lg-a2: #ff6482; --lg-a3: #a5b4fc; --lg-a4: #5e5ce6; }
html[data-lg-bg="graphite"] { --lg-a1: #8e8e93; --lg-a2: #636366; --lg-a3: #aeaeb2; --lg-a4: #48484a; }
html[data-lg-bg="graphite"][data-lg-mode="light"] { --lg-a1: #b0b4be; --lg-a2: #c7c7cc; --lg-a3: #9aa3b5; --lg-a4: #d1d1d6; }

/* 4. Base & background ----------------------------------------------------- */
html,
body {
  background-color: var(--lg-base-2) !important;
  color: var(--lg-text);
  font-family: var(--lg-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  background-image:
    radial-gradient(120% 80% at 50% -10%, var(--lg-base-top) 0%, transparent 60%),
    linear-gradient(180deg, var(--lg-base-1) 0%, var(--lg-base-2) 55%, var(--lg-base-3) 100%) !important;
  background-attachment: fixed !important;
  transition: --lg-base-1 700ms var(--lg-ease), --lg-base-2 700ms var(--lg-ease),
              --lg-base-3 700ms var(--lg-ease), --lg-base-top 700ms var(--lg-ease);
}
::selection { background: var(--lg-accent-glow); color: var(--lg-text); }

/* Homepage paints its theme colour on #__next; let the base gradient show. */
#__next { background: transparent !important; }

/* Content sits above the aurora layers. */
#page_wrapper {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* Aurora: two fixed layers that drift at different depths. custom.js adds
   real elements (.lg-aurora) so it can also parallax them with the pointer;
   without JS the body pseudo-elements draw the same light. */
.lg-aurora,
html:not(.lg-js) body::before,
html:not(.lg-js) body::after {
  content: "";
  position: fixed;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  opacity: var(--lg-aurora-opacity);
  transform: translate3d(0, 0, 0);
  will-change: transform, translate;
  transition: --lg-a1 1.1s var(--lg-ease), --lg-a2 1.1s var(--lg-ease),
              --lg-a3 1.1s var(--lg-ease), --lg-a4 1.1s var(--lg-ease),
              opacity 600ms var(--lg-ease);
}
.lg-aurora--a,
html:not(.lg-js) body::before {
  background:
    radial-gradient(38% 32% at 24% 26%, color-mix(in srgb, var(--lg-a1) var(--lg-aurora-mix), transparent), transparent 70%),
    radial-gradient(34% 30% at 80% 18%, color-mix(in srgb, var(--lg-a2) calc(var(--lg-aurora-mix) * 0.85), transparent), transparent 70%);
  animation: lg-drift-a 48s ease-in-out infinite alternate;
}
.lg-aurora--b,
html:not(.lg-js) body::after {
  background:
    radial-gradient(30% 26% at 72% 78%, color-mix(in srgb, var(--lg-a3) calc(var(--lg-aurora-mix) * 0.6), transparent), transparent 70%),
    radial-gradient(36% 30% at 18% 86%, color-mix(in srgb, var(--lg-a4) calc(var(--lg-aurora-mix) * 0.75), transparent), transparent 70%);
  animation: lg-drift-b 62s ease-in-out infinite alternate;
}
/* Vignette (::after) and a very fine white grain (::before) keep the
   gradients from banding. */
#page_wrapper::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(140% 100% at 50% 40%, transparent 55%, var(--lg-vignette) 100%);
}
#page_wrapper::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--lg-grain);
}

/* Motion modes */
@keyframes lg-drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(3%, -2%, 0) scale(1.05); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.02); }
}
@keyframes lg-drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1.02); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1); }
  100% { transform: translate3d(2%, -3%, 0) scale(1.06); }
}
@keyframes lg-swirl-a {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  33%  { transform: translate3d(9%, -6%, 0) scale(1.14) rotate(10deg); }
  66%  { transform: translate3d(-6%, 7%, 0) scale(0.96) rotate(-8deg); }
  100% { transform: translate3d(5%, 4%, 0) scale(1.08) rotate(6deg); }
}
@keyframes lg-swirl-b {
  0%   { transform: translate3d(0, 0, 0) scale(1.05) rotate(0deg); }
  33%  { transform: translate3d(-8%, 6%, 0) scale(0.95) rotate(-12deg); }
  66%  { transform: translate3d(7%, -5%, 0) scale(1.15) rotate(9deg); }
  100% { transform: translate3d(-4%, -6%, 0) scale(1) rotate(-4deg); }
}
html[data-lg-motion="lively"] .lg-aurora--a { animation: lg-swirl-a 16s ease-in-out infinite alternate; }
html[data-lg-motion="lively"] .lg-aurora--b { animation: lg-swirl-b 21s ease-in-out infinite alternate; }
html[data-lg-motion="lively"] { --lg-aurora-mix: 36%; }
html[data-lg-motion="lively"][data-lg-mode="light"] { --lg-aurora-mix: 50%; }
html[data-lg-motion="off"] .lg-aurora { animation: none; }

#inner_wrapper {
  scrollbar-width: thin;
  scrollbar-color: var(--lg-scrollbar) transparent;
}
#inner_wrapper::-webkit-scrollbar { width: 10px; }
#inner_wrapper::-webkit-scrollbar-thumb {
  background: var(--lg-scrollbar);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* 5. Glass primitives ------------------------------------------------------ */
/* Rim light: 1px gradient stroke drawn with a mask, so edges catch light. */
.services-group::after,
.bookmark-group::after,
.widget-container > div > [class*="information-widget-"]::after,
.widget-container > [class*="information-widget-"]::after,
.lg-rim::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: var(--lg-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.lg-rim::after { inset: 0; }

/* Pointer highlight layer used by cards, tiles and tabs. custom.js writes
   --lg-mx/--lg-my on the hovered element; --lg-spot-c fades it in/out. */
.service-card,
.bookmark > a,
.widget-container > div > [class*="information-widget-"],
.widget-container > [class*="information-widget-"],
#myTab button[role="tab"] {
  --lg-spot-layer: radial-gradient(220px circle at var(--lg-mx, 50%) var(--lg-my, 0%), var(--lg-spot-c), transparent 70%);
}
html[data-lg-light="on"] .service-card:hover,
html[data-lg-light="on"] .bookmark > a:hover,
html[data-lg-light="on"] .widget-container > div > [class*="information-widget-"]:hover,
html[data-lg-light="on"] .widget-container > [class*="information-widget-"]:hover,
html[data-lg-light="on"] #myTab button[role="tab"]:hover {
  --lg-spot-c: var(--lg-spot);
}

/* 6. Header & information widgets ------------------------------------------ */
/* The content column is `h-full min-h-screen`; let it grow so the sticky
   header keeps working on long pages. */
#inner_wrapper > div:has(> #information-widgets) { height: auto !important; }

#information-widgets {
  position: sticky;
  top: 12px;
  z-index: 15;                      /* below quick launch (z-20) */
  border: 0 !important;
  border-radius: calc(var(--lg-r-sheet) + 4px);
  margin: 16px 20px 6px !important;
  padding: 10px 12px !important;
  background: transparent;
  transition: background var(--lg-slow) var(--lg-ease),
              box-shadow var(--lg-slow) var(--lg-ease);
}
html.lg-scrolled #information-widgets {
  background: var(--lg-bar);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
          backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow: var(--lg-shadow-2), var(--lg-inner);
}

#widgets-wrap { align-items: center; gap: 10px 12px !important; }
#information-widgets-right { gap: 10px 12px !important; align-items: center; }

/* Every information widget gets its own glass tile. */
.widget-container > div > [class*="information-widget-"],
.widget-container > [class*="information-widget-"] {
  position: relative;
  margin: 0 !important;
  padding: 10px 16px !important;
  min-height: 52px;
  border-radius: 18px;
  background: var(--lg-spot-layer), var(--lg-sheen), var(--lg-glass);
  -webkit-backdrop-filter: blur(22px) saturate(var(--lg-sat));
          backdrop-filter: blur(22px) saturate(var(--lg-sat));
  box-shadow: var(--lg-shadow-1), var(--lg-inner);
  transition: background-color var(--lg-med) var(--lg-ease), --lg-spot-c var(--lg-med) var(--lg-ease);
}
.widget-container > div > [class*="information-widget-"]:hover,
.widget-container > [class*="information-widget-"]:hover {
  background: var(--lg-spot-layer), var(--lg-sheen), var(--lg-glass-hi);
}
.widget-container > div > [class*="information-widget-"]::after,
.widget-container > [class*="information-widget-"]::after { inset: 0; }
.widget-container > div { gap: 10px; }

/* Resource widget: value is the hero, label is quiet. */
.information-widget-resource .resource-icon {
  color: var(--lg-accent) !important;
  opacity: 0.95;
  filter: drop-shadow(0 0 6px var(--lg-accent-glow));
}
.information-widget-resource .resource-value {
  color: var(--lg-text) !important;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  transition: color var(--lg-med) var(--lg-ease);
}
.information-widget-resource .resource-value + div {
  color: var(--lg-text-3) !important;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.resource-usage {
  height: 4px !important;
  margin-top: 6px !important;
  background: var(--lg-track) !important;
  overflow: hidden;
}
.resource-usage > div {
  height: 100% !important;
  background: linear-gradient(90deg, var(--lg-accent), var(--lg-accent-hi)) !important;
  box-shadow: 0 0 10px var(--lg-accent-glow);
  transition: width 600ms var(--lg-ease), background var(--lg-slow) var(--lg-ease) !important;
}
/* Status colour from the bar's own inline width: 75–89% warn, 90–100% critical. */
.resource-usage > div:is([style^="width: 75"], [style^="width: 76"], [style^="width: 77"],
                         [style^="width: 78"], [style^="width: 79"]),
.resource-usage > div[style^="width: 8"]:not([style^="width: 8%"]):not([style^="width: 8."]) {
  background: linear-gradient(90deg, var(--lg-orange), var(--lg-yellow)) !important;
  box-shadow: 0 0 10px rgba(255, 159, 10, 0.55);
}
.resource-usage > div[style^="width: 9"]:not([style^="width: 9%"]):not([style^="width: 9."]),
.resource-usage > div[style^="width: 100"] {
  background: linear-gradient(90deg, var(--lg-red), var(--lg-pink)) !important;
  box-shadow: 0 0 10px rgba(255, 69, 58, 0.6);
}

/* Date/time & greeting */
.information-widget-datetime span,
.information-widget-greeting span {
  color: var(--lg-text) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Search — Spotlight capsule */
.information-widget-search > div { height: 44px !important; margin: 0 !important; }
.information-widget-search > div > div:first-child {
  z-index: 2;
  color: var(--lg-text-3) !important;
  padding-left: 16px !important;
}
.information-widget-search > div > div:last-child,
.information-widget-search > div > div:last-child > div { position: static !important; }
.information-widget-search input {
  height: 44px !important;
  padding-left: 20px !important;
  padding-right: 56px !important;
  border-radius: 999px !important;
  border: 1px solid var(--lg-stroke) !important;
  background: var(--lg-sheen), var(--lg-input) !important;
  -webkit-backdrop-filter: blur(22px) saturate(var(--lg-sat));
          backdrop-filter: blur(22px) saturate(var(--lg-sat));
  box-shadow: var(--lg-shadow-1), var(--lg-inner) !important;
  color: var(--lg-text) !important;
  font-size: 0.9rem !important;
  letter-spacing: -0.005em;
  outline: none !important;
  transition: background var(--lg-med) var(--lg-ease),
              border-color var(--lg-med) var(--lg-ease),
              box-shadow var(--lg-med) var(--lg-ease) !important;
}
.information-widget-search input::placeholder { color: var(--lg-text-3) !important; }
.information-widget-search input:hover { background: var(--lg-sheen), var(--lg-input-hi) !important; }
.information-widget-search input:focus {
  background: var(--lg-sheen), var(--lg-input-focus) !important;
  border-color: var(--lg-accent) !important;
  box-shadow: 0 0 0 4px var(--lg-accent-soft),
              0 0 28px var(--lg-accent-glow),
              var(--lg-shadow-1), var(--lg-inner) !important;
}
.information-widget-search button[aria-haspopup="listbox"] {
  z-index: 2;
  top: 50% !important;
  bottom: auto !important;
  right: 6px !important;
  transform: translateY(-50%);
  height: 32px;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: var(--lg-btn) !important;
  color: var(--lg-text) !important;
  transition: background var(--lg-fast) var(--lg-ease);
}
.information-widget-search button[aria-haspopup="listbox"]:hover { background: var(--lg-btn-hi) !important; }
.information-widget-search [role="listbox"] {
  border-radius: 16px !important;
  overflow: hidden;
  background: var(--lg-pop) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%);
          backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--lg-stroke) !important;
  box-shadow: var(--lg-shadow-2), var(--lg-inner) !important;
  color: var(--lg-text) !important;
}
.information-widget-search [role="option"] { border-radius: 10px; }

/* 7. Services -------------------------------------------------------------- */
#services,
#bookmarks,
#layout-groups { margin: 12px 14px 0 !important; }

/* Group = a glass sheet on pseudo-elements, so Homepage's flex-basis math
   stays untouched. */
.services-group,
.bookmark-group {
  position: relative;
  padding: 20px 20px 12px !important;
}
.services-group::before,
.bookmark-group::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--lg-r-sheet);
  background:
    radial-gradient(420px circle at var(--lg-mx, 50%) var(--lg-my, 0%), var(--lg-spot-c), transparent 70%),
    var(--lg-sheen), var(--lg-glass);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
          backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow: var(--lg-shadow-2), var(--lg-inner);
  transition: --lg-spot-c 400ms var(--lg-ease);
}
html[data-lg-light="on"] .services-group:hover::before,
html[data-lg-light="on"] .bookmark-group:hover::before { --lg-spot-c: var(--lg-spot-soft); }
.services-group::after,
.bookmark-group::after {
  inset: 6px;
  border-radius: var(--lg-r-sheet);
}
.services-group > *,
.bookmark-group > * { position: relative; z-index: 1; }

/* Nested groups: tint only, no second blur. */
.services-group .services-group { padding: 14px 14px 6px !important; }
.services-group .services-group::before {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  background: var(--lg-hover);
  box-shadow: var(--lg-inner);
  border-radius: 20px;
}
.services-group .services-group::after { border-radius: 20px; opacity: 0.6; }

.service-group-name,
.bookmark-group-name {
  color: var(--lg-text) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  padding: 0 4px;
}
.services-group > button,
.bookmark-group > button { padding: 2px 0; border-radius: 10px; }
.services-group > button svg,
.bookmark-group > button svg { color: var(--lg-text-3) !important; }

.services-list { margin-top: 12px !important; }

/* Service card = tinted glass chip inside the sheet (no own blur). */
.service-card {
  margin-bottom: 8px !important;
  padding: 4px !important;
  border-radius: var(--lg-r-card) !important;
  background: var(--lg-spot-layer), linear-gradient(180deg, var(--lg-card-a), var(--lg-card-b)) !important;
  border: 1px solid var(--lg-stroke);
  box-shadow: var(--lg-shadow-1), var(--lg-inner-card) !important;
  color: var(--lg-text) !important;
  transform: translate3d(0, 0, 0);
}
.service-card:hover {
  transform: translate3d(0, -3px, 0);
  background: var(--lg-spot-layer), linear-gradient(180deg, var(--lg-card-ha), var(--lg-card-hb)) !important;
  border-color: var(--lg-stroke-hi);
  box-shadow: var(--lg-shadow-hover), var(--lg-inner-card-hi) !important;
}
.service-card:focus-within {
  border-color: var(--lg-accent);
  box-shadow: 0 0 0 3px var(--lg-accent-soft), var(--lg-shadow-1) !important;
}

.service-title { align-items: center; min-height: 44px; }
.service-title-text { border-radius: 12px; outline: none; }
.service-name {
  padding: 8px 10px !important;
  color: var(--lg-text) !important;
  font-size: 0.875rem !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.service-description {
  margin-top: 2px;
  color: var(--lg-text-2) !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  letter-spacing: 0;
}
.service-title img {
  border-radius: 10px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}
.service-tags { top: 50% !important; transform: translateY(-50%); margin-right: 12px !important; }
.service-tags > * { border-radius: 999px !important; font-variant-numeric: tabular-nums; }

/* Service widget stats (customapi, docker, …): value + label chips.
   custom.js adds data-lg-level / --lg-pct from the value text so each chip
   gets a live level bar (see section 15). */
.service-container { gap: 6px; padding: 2px 4px 4px; }
.service-block {
  position: relative;
  margin: 0 !important;
  padding: 8px 6px 15px !important;
  border-radius: 12px !important;
  background: var(--lg-hover) !important;
  box-shadow: var(--lg-inner-card);
  overflow: hidden;
  transition: background-color var(--lg-med) var(--lg-ease);
}
.service-block-value {
  color: var(--lg-text) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color var(--lg-med) var(--lg-ease);
}
/* List display (customapi `display: list` / `dynamic-list`): an inset
   grouped list, like macOS Settings. */
.service-container > div:not(.service-block) {
  margin: 2px 4px 4px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--lg-hover);
  box-shadow: var(--lg-inner-card);
}
.service-container > div:not(.service-block) > div {
  margin: 0 !important;
  padding: 7px 4px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--lg-text-2) !important;
  font-size: 0.75rem !important;
}
.service-container > div:not(.service-block) > div + div { box-shadow: inset 0 1px 0 var(--lg-divider); }
.service-container > div:not(.service-block) > div > div:last-child,
.service-container > div:not(.service-block) > div > div:last-child * {
  color: var(--lg-text) !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}
.service-container > div:not(.service-block) > div:only-child > div:only-child {
  color: var(--lg-text-3) !important;
  font-weight: 400 !important;
}
.service-icon { color: var(--lg-text-2) !important; }

.service-block-label {
  margin-top: 2px;
  color: var(--lg-text-3) !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em;
}

/* 8. Bookmarks ------------------------------------------------------------- */
.bookmark-list { margin-top: 12px !important; }
.bookmark > a {
  display: block;
  margin-bottom: 8px !important;
  border-radius: 14px !important;
  overflow: hidden;
  background: var(--lg-spot-layer), linear-gradient(180deg, var(--lg-card-a), var(--lg-card-b)) !important;
  border: 1px solid var(--lg-stroke);
  box-shadow: var(--lg-shadow-1), var(--lg-inner-card) !important;
  color: var(--lg-text) !important;
  transform: translate3d(0, 0, 0);
}
.bookmark > a:hover {
  transform: translate3d(0, -3px, 0);
  background: var(--lg-spot-layer), linear-gradient(180deg, var(--lg-card-ha), var(--lg-card-hb)) !important;
  border-color: var(--lg-stroke-hi);
  box-shadow: var(--lg-shadow-hover), var(--lg-inner-card-hi) !important;
}
.bookmark > a:focus-visible {
  outline: none;
  border-color: var(--lg-accent);
  box-shadow: 0 0 0 3px var(--lg-accent-soft), var(--lg-shadow-1) !important;
}
.bookmark > a > div { align-items: center; padding: 6px; }

/* App-icon style tile */
.bookmark-icon {
  width: 34px !important;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px !important;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%),
    linear-gradient(140deg, var(--lg-a1), var(--lg-a2)) !important;
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--lg-a1) 45%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #fff !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.bookmark-icon img { border-radius: 8px; }
.bookmark-group:nth-child(3n+2) .bookmark-icon {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%),
    linear-gradient(140deg, var(--lg-a4), var(--lg-a3)) !important;
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--lg-a3) 40%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.bookmark-group:nth-child(3n+3) .bookmark-icon {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%),
    linear-gradient(140deg, var(--lg-a2), var(--lg-a3)) !important;
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--lg-a2) 45%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.bookmark-text { padding-left: 8px; }
.bookmark-name {
  padding: 0 !important;
  color: var(--lg-text) !important;
  font-size: 0.82rem !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bookmark-description {
  padding: 0 8px 0 0 !important;
  color: var(--lg-text-3) !important;
  font-size: 0.72rem !important;
}

/* 9. Quick launch — Spotlight panel ---------------------------------------- */
#inner_wrapper dialog {
  margin-top: 12vh !important;
  border-radius: 24px !important;
  overflow: hidden;
  border: 1px solid var(--lg-stroke) !important;
  background: var(--lg-sheen), var(--lg-dialog) !important;
  -webkit-backdrop-filter: blur(40px) saturate(190%);
          backdrop-filter: blur(40px) saturate(190%);
  box-shadow: var(--lg-shadow-pop), var(--lg-inner) !important;
  color: var(--lg-text) !important;
  animation: lg-pop var(--lg-slow) var(--lg-spring);
}
#inner_wrapper dialog > input {
  padding: 18px 22px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--lg-divider) !important;
  color: var(--lg-text) !important;
  font-size: 1.35rem !important;
  font-weight: 400;
  letter-spacing: -0.015em;
}
#inner_wrapper dialog > input::placeholder { color: var(--lg-text-3); }
#inner_wrapper dialog ul { margin: 8px !important; }
#inner_wrapper dialog li > button {
  border-radius: 12px !important;
  font-size: 0.95rem !important;
  color: var(--lg-text) !important;
  transition: background var(--lg-fast) var(--lg-ease);
}
#inner_wrapper dialog li > button:hover { background-color: var(--lg-hover); }
#inner_wrapper dialog li > button[class*="bg-theme-"] {
  background: linear-gradient(180deg, var(--lg-accent), color-mix(in srgb, var(--lg-accent) 85%, black)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: var(--lg-on-accent) !important;
}
#inner_wrapper dialog li > button[class*="bg-theme-"] * { color: rgba(255, 255, 255, 0.9) !important; }
#inner_wrapper div:has(> div > dialog) {
  background: rgba(0, 0, 0, 0.30);
  animation: lg-fade var(--lg-med) var(--lg-ease);
}

/* 10. Sidebar tabs (Homepage `layout: … tab:` restyled) -------------------- */
#tabs { position: relative; z-index: 14; }
#myTab {
  display: flex !important;
  gap: 4px;
  padding: 0;
  margin: 0;
  list-style: none;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
#myTab > li {
  height: auto !important;
  width: auto !important;
  background: transparent !important;
}
#myTab button[role="tab"] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 !important;
  padding: 9px 14px;
  border-radius: 12px !important;
  background: var(--lg-spot-layer), transparent !important;
  color: var(--lg-text-2) !important;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: left;
  white-space: nowrap;
}
#myTab button[role="tab"]::before {
  content: "";
  flex: 0 0 18px;
  height: 18px;
  border-radius: 6px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60%),
    var(--lg-tab-accent, var(--lg-accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  opacity: 0.55;
  transition: opacity var(--lg-fast) var(--lg-ease), box-shadow var(--lg-fast) var(--lg-ease);
}
#myTab > li:nth-child(4n+1) { --lg-tab-accent: var(--lg-accent); }
#myTab > li:nth-child(4n+2) { --lg-tab-accent: var(--lg-tab-2); }
#myTab > li:nth-child(4n+3) { --lg-tab-accent: var(--lg-tab-3); }
#myTab > li:nth-child(4n+4) { --lg-tab-accent: var(--lg-tab-4); }
#myTab button[role="tab"]:hover {
  background: var(--lg-spot-layer), var(--lg-hover) !important;
  color: var(--lg-text) !important;
}
#myTab button[role="tab"]:hover::before { opacity: 0.85; }
#myTab button[role="tab"][aria-selected="true"] {
  background: var(--lg-spot-layer), linear-gradient(180deg, var(--lg-sel-a), var(--lg-sel-b)) !important;
  color: var(--lg-text) !important;
  font-weight: 600;
  box-shadow: var(--lg-inner-card), 0 4px 14px -6px rgba(0, 0, 0, 0.35);
}
#myTab button[role="tab"][aria-selected="true"]::before {
  opacity: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 12px var(--lg-tab-accent, var(--lg-accent));
}

@media (min-width: 1024px) {
  #inner_wrapper > div:has(> #tabs) {
    max-width: none !important;
    padding-left: 268px;
    padding-right: 12px;
  }
  #tabs {
    position: fixed;
    top: 12px;
    bottom: 12px;
    left: 12px;
    width: 240px;
    margin: 0 !important;
    padding: 44px 12px 76px;          /* bottom room for the Appearance button */
    overflow-y: auto;
    border-radius: var(--lg-r-sheet);
    background: var(--lg-sheen), var(--lg-side);
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
            backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
    box-shadow: var(--lg-shadow-2), var(--lg-inner);
    animation: lg-slide-in var(--lg-slow) var(--lg-ease) both;
  }
  #tabs::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    padding: 1px;
    background: var(--lg-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  #tabs::before {
    content: "Dashboard";
    position: absolute;
    top: 18px;
    left: 26px;
    color: var(--lg-text-3);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  #myTab { flex-direction: column; }
  #information-widgets { margin-left: 8px !important; margin-right: 8px !important; }
}
@media (max-width: 1023px) {
  #tabs {
    position: sticky;
    top: 8px;
    margin: 8px 20px 0 !important;
    padding: 4px;
    border-radius: 999px;
    background: var(--lg-sheen), var(--lg-side);
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
            backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
    box-shadow: var(--lg-shadow-1), var(--lg-inner);
  }
  #myTab {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #myTab::-webkit-scrollbar { display: none; }
  #myTab > li { flex: 1 0 auto; }
  #myTab button[role="tab"] {
    justify-content: center;
    padding: 8px 16px;
    border-radius: 999px !important;
  }
  #myTab button[role="tab"]::before { flex-basis: 10px; height: 10px; border-radius: 50%; }
}
@media (max-width: 640px) {
  #tabs { margin: 8px 8px 0 !important; }
}

/* 11. Footer & focus ------------------------------------------------------- */
#footer { opacity: 0.55; transition: opacity var(--lg-med) var(--lg-ease); }
#footer:hover { opacity: 1; }
#footer svg { color: var(--lg-text-2) !important; }
#footer button,
#revalidate { border-radius: 999px !important; }

#inner_wrapper button:focus-visible,
#inner_wrapper a:focus-visible,
.lg-cc button:focus-visible,
.lg-cc-toggle:focus-visible {
  outline: 2px solid var(--lg-accent);
  outline-offset: 2px;
}
#inner_wrapper a:focus-visible { border-radius: 12px; }

/* Shared transitions for interactive glass */
.service-card,
.bookmark > a,
#myTab button[role="tab"] {
  transition: transform var(--lg-med) var(--lg-ease),
              background-color var(--lg-med) var(--lg-ease),
              border-color var(--lg-med) var(--lg-ease),
              box-shadow var(--lg-med) var(--lg-ease),
              color var(--lg-med) var(--lg-ease),
              --lg-spot-c var(--lg-med) var(--lg-ease),
              scale var(--lg-med) var(--lg-ease) !important;
}

/* 12. Jelly press ---------------------------------------------------------- */
/* Squash while held, wobble on release. Uses the independent `scale`
   property so it stacks with the hover lift. custom.js sets [data-lg-jelly]
   on release to replay the wobble. */
.service-card,
.bookmark > a,
#myTab button[role="tab"],
.widget-container > div > [class*="information-widget-"],
.widget-container > [class*="information-widget-"],
.information-widget-search button[aria-haspopup="listbox"],
#inner_wrapper dialog li > button,
#footer button,
#revalidate,
.lg-cc-toggle,
.lg-seg button,
.lg-swatch,
.lg-dot,
.lg-switch,
.lg-cc-reset {
  scale: 1;
  transform-origin: 50% 60%;
  -webkit-tap-highlight-color: transparent;
}
.service-card:active,
.bookmark > a:active,
#myTab button[role="tab"]:active,
.widget-container > div > [class*="information-widget-"]:active,
.widget-container > [class*="information-widget-"]:active,
#inner_wrapper dialog li > button:active,
.lg-seg button:active,
.lg-cc-toggle:active,
.lg-ai-toggle:active,
.lg-ai-chip:active,
.lg-ai-run:active {
  scale: var(--lg-jelly-press);
  transition: scale 140ms cubic-bezier(0.3, 0.7, 0.4, 1.2) !important;
}
.information-widget-search button[aria-haspopup="listbox"]:active,
#footer button:active,
#revalidate:active,
.lg-swatch:active,
.lg-dot:active,
.lg-switch:active,
.lg-cc-reset:active,
.lg-ai-send:active,
.lg-ai-iconbtn:active {
  scale: 0.86;
  transition: scale 140ms cubic-bezier(0.3, 0.7, 0.4, 1.2) !important;
}
[data-lg-jelly] { animation: lg-jelly var(--lg-jelly-time) linear both; }
.information-widget-search button[aria-haspopup="listbox"][data-lg-jelly],
#footer button[data-lg-jelly],
#revalidate[data-lg-jelly],
.lg-swatch[data-lg-jelly],
.lg-dot[data-lg-jelly],
.lg-switch[data-lg-jelly],
.lg-cc-reset[data-lg-jelly],
.lg-ai-send[data-lg-jelly],
.lg-ai-iconbtn[data-lg-jelly] { animation-name: lg-jelly-round; }
@keyframes lg-jelly {
  0%   { scale: 1.045 0.93; }
  22%  { scale: 0.955 1.055; }
  40%  { scale: 1.03 0.975; }
  56%  { scale: 0.985 1.015; }
  72%  { scale: 1.008 0.994; }
  86%  { scale: 0.998 1.002; }
  100% { scale: 1 1; }
}
@keyframes lg-jelly-round {
  0%   { scale: 0.86; }
  25%  { scale: 1.12; }
  45%  { scale: 0.95; }
  65%  { scale: 1.03; }
  82%  { scale: 0.995; }
  100% { scale: 1; }
}

/* 13. Control Center panel (built by custom.js, lives outside React) ------- */
.lg-cc-toggle {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--lg-text);
  font: 500 0.875rem/1 var(--lg-font);
  letter-spacing: -0.01em;
  cursor: pointer;
  background: var(--lg-sheen), var(--lg-side);
  -webkit-backdrop-filter: blur(22px) saturate(var(--lg-sat));
          backdrop-filter: blur(22px) saturate(var(--lg-sat));
  box-shadow: var(--lg-shadow-2), var(--lg-inner);
  transition: background-color var(--lg-med) var(--lg-ease), box-shadow var(--lg-med) var(--lg-ease),
              scale var(--lg-med) var(--lg-ease);
}
.lg-cc-toggle svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  transition: transform 500ms var(--lg-spring);
}
.lg-cc-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.lg-cc-toggle[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--lg-accent-soft), var(--lg-shadow-2), var(--lg-inner); }
.lg-cc-toggle .lg-cc-toggle-label { display: none; }
/* Desktop with sidebar: the button becomes the sidebar's bottom row. */
@media (min-width: 1024px) {
  html:has(#tabs) .lg-cc-toggle {
    left: 24px;
    bottom: 24px;
    width: 216px;
    height: 44px;
    justify-content: flex-start;
    padding: 0 14px;
    border-radius: 14px;
    background: var(--lg-hover);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    box-shadow: var(--lg-inner-card);
    color: var(--lg-text-2);
  }
  html:has(#tabs) .lg-cc-toggle:hover { color: var(--lg-text); background: var(--lg-btn-hi); }
  html:has(#tabs) .lg-cc-toggle .lg-cc-toggle-label { display: inline; }
}

.lg-cc {
  position: fixed;
  left: 16px;
  bottom: 76px;
  z-index: 40;
  width: 340px;
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px 16px;
  border-radius: 28px;
  color: var(--lg-text);
  font-family: var(--lg-font);
  background: var(--lg-sheen), var(--lg-pop);
  -webkit-backdrop-filter: blur(40px) saturate(190%);
          backdrop-filter: blur(40px) saturate(190%);
  box-shadow: var(--lg-shadow-pop), var(--lg-inner);
  transform-origin: 0% 100%;
  opacity: 0;
  visibility: hidden;
  scale: 0.92;
  translate: 0 10px;
  pointer-events: none;
  transition: opacity 220ms var(--lg-ease), scale 380ms var(--lg-spring),
              translate 380ms var(--lg-spring), visibility 0s linear 380ms;
  scrollbar-width: none;
}
.lg-cc::-webkit-scrollbar { display: none; }
.lg-cc[data-open] {
  opacity: 1;
  visibility: visible;
  scale: 1;
  translate: 0 0;
  pointer-events: auto;
  transition: opacity 180ms var(--lg-ease), scale 420ms var(--lg-spring),
              translate 420ms var(--lg-spring), visibility 0s;
}
@media (min-width: 1024px) {
  html:has(#tabs) .lg-cc { left: 264px; bottom: 12px; }
}

.lg-cc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 12px;
}
.lg-cc-title { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.lg-cc-reset {
  border: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--lg-btn);
  color: var(--lg-text-2);
  font: 500 0.75rem/1 var(--lg-font);
  cursor: pointer;
  transition: background var(--lg-fast) var(--lg-ease), color var(--lg-fast) var(--lg-ease), scale var(--lg-med) var(--lg-ease);
}
.lg-cc-reset:hover { background: var(--lg-btn-hi); color: var(--lg-text); }

.lg-cc-section {
  margin-top: 10px;
  padding: 12px;
  border-radius: 20px;
  background: var(--lg-hover);
  box-shadow: var(--lg-inner-card);
}
.lg-cc-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 2px 10px;
  color: var(--lg-text-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lg-cc-label output { color: var(--lg-text-3); font-weight: 500; letter-spacing: 0; text-transform: none; }

/* Segmented control with a sliding glass thumb */
.lg-seg {
  --n: 3;
  --i: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  padding: 3px;
  border-radius: 14px;
  background: var(--lg-track);
}
.lg-seg::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--n));
  border-radius: 11px;
  background: linear-gradient(180deg, var(--lg-sel-a), var(--lg-sel-b));
  box-shadow: var(--lg-inner-card), 0 3px 10px -3px rgba(0, 0, 0, 0.35);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform 420ms var(--lg-spring);
}
.lg-seg button {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 8px 4px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--lg-text-2);
  font: 500 0.78rem/1.1 var(--lg-font);
  cursor: pointer;
  transition: color var(--lg-med) var(--lg-ease), scale var(--lg-med) var(--lg-ease);
}
.lg-seg button svg { width: 18px; height: 18px; }
.lg-seg button[aria-checked="true"] { color: var(--lg-text); font-weight: 600; }

/* Background swatches */
.lg-swatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.lg-swatch {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 58px;
  padding: 6px 8px;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  font: 600 0.7rem/1 var(--lg-font);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  background: var(--sw-bg);
  background-size: 160% 160%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 12px -6px rgba(0, 0, 0, 0.5);
  transition: box-shadow var(--lg-med) var(--lg-ease), scale var(--lg-med) var(--lg-ease),
              background-position 1.2s var(--lg-ease);
}
.lg-swatch:hover { background-position: 100% 100%; }
.lg-swatch[aria-checked="true"] {
  box-shadow: 0 0 0 2px var(--lg-pop), 0 0 0 4px var(--lg-accent), 0 6px 16px -6px rgba(0, 0, 0, 0.5);
}
.lg-swatch[aria-checked="true"]::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  animation: lg-pop 300ms var(--lg-spring);
}

/* Accent dots */
.lg-dots { display: flex; justify-content: space-between; padding: 2px 4px; }
.lg-dot {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60%),
    var(--dot);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
  transition: box-shadow var(--lg-med) var(--lg-ease), scale var(--lg-med) var(--lg-ease);
}
.lg-dot[aria-checked="true"] {
  box-shadow: 0 0 0 2px var(--lg-pop), 0 0 0 4px var(--dot), 0 0 14px var(--dot);
}

/* iOS-style switch row */
.lg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 2px 4px;
}
.lg-row-text { display: flex; flex-direction: column; gap: 3px; }
.lg-row-title { font-size: 0.85rem; font-weight: 600; }
.lg-row-sub { font-size: 0.72rem; color: var(--lg-text-3); }
.lg-switch {
  position: relative;
  flex: 0 0 auto;
  width: 50px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: var(--lg-track);
  box-shadow: inset 0 0 0 1px var(--lg-divider);
  transition: background var(--lg-med) var(--lg-ease), scale var(--lg-med) var(--lg-ease);
}
.lg-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 420ms var(--lg-spring), width 200ms var(--lg-ease);
}
.lg-switch:active::after { width: 32px; }
.lg-switch[aria-checked="true"] { background: var(--lg-accent); }
.lg-switch[aria-checked="true"]::after { transform: translateX(20px); }
.lg-switch[aria-checked="true"]:active::after { transform: translateX(14px); }

/* Theme switch: circular reveal from the pressed control (View Transitions). */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) {
  animation: lg-reveal 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lg-reveal {
  from { clip-path: circle(0 at var(--lg-vt-x, 50%) var(--lg-vt-y, 50%)); }
  to   { clip-path: circle(var(--lg-vt-r, 150vmax) at var(--lg-vt-x, 50%) var(--lg-vt-y, 50%)); }
}

/* 14. Motion · responsive · fallbacks -------------------------------------- */
/* First paint with saved preferences: skip transitions for one frame. */
html.lg-no-trans *,
html.lg-no-trans *::before,
html.lg-no-trans *::after { transition: none !important; }

@keyframes lg-rise {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes lg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lg-pop {
  from { opacity: 0; transform: scale(0.96) translate3d(0, -6px, 0); }
  to   { opacity: 1; transform: scale(1) translate3d(0, 0, 0); }
}
@keyframes lg-slide-in {
  from { opacity: 0; transform: translate3d(-10px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
#information-widgets { animation: lg-fade var(--lg-slow) var(--lg-ease) both; }
.services-group,
.bookmark-group { animation: lg-rise var(--lg-slow) var(--lg-ease) both; }
.services-group:nth-child(2), .bookmark-group:nth-child(2) { animation-delay: 40ms; }
.services-group:nth-child(3), .bookmark-group:nth-child(3) { animation-delay: 80ms; }
.services-group:nth-child(4), .bookmark-group:nth-child(4) { animation-delay: 120ms; }
.services-group:nth-child(n+5), .bookmark-group:nth-child(n+5) { animation-delay: 160ms; }

@media (min-width: 1536px) {
  #services, #bookmarks, #layout-groups { margin-left: 28px !important; margin-right: 28px !important; }
  #information-widgets { margin-left: 32px !important; margin-right: 32px !important; }
}
@media (max-width: 1024px) {
  :root { --lg-blur: 22px; --lg-r-sheet: 22px; }
}
/* Phones: header scrolls away, tighter gutters, lighter blur, calmer aurora,
   Control Center becomes a bottom sheet. */
@media (max-width: 640px) {
  :root { --lg-blur: 16px; --lg-sat: 150%; --lg-r-sheet: 20px; }
  html[data-lg-motion="lively"] .lg-aurora--a { animation-duration: 28s; }
  html[data-lg-motion="lively"] .lg-aurora--b { animation-duration: 34s; }
  #information-widgets {
    position: relative;
    top: 0;
    margin: 10px 8px 0 !important;
    padding: 6px !important;
  }
  html.lg-scrolled #information-widgets {
    background: transparent;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    box-shadow: none;
  }
  #widgets-wrap, #information-widgets-right { gap: 8px !important; }
  .widget-container > div > [class*="information-widget-"],
  .widget-container > [class*="information-widget-"] {
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    padding: 8px 12px !important;
    min-height: 46px;
  }
  .information-widget-search { min-width: 100%; }
  #services, #bookmarks, #layout-groups { margin: 6px 2px 0 !important; }
  .services-group, .bookmark-group { padding: 16px 16px 8px !important; }
  .services-group::before, .bookmark-group::before,
  .services-group::after, .bookmark-group::after { inset: 5px; }
  #inner_wrapper dialog { margin-top: 8vh !important; border-radius: 20px !important; }
  #inner_wrapper dialog > input { font-size: 1.1rem !important; }
  #footer { padding-left: 72px !important; }    /* keep clear of the round button */
  .lg-cc {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-height: 82dvh;
    border-radius: 30px;
    transform-origin: 50% 100%;
    translate: 0 40px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .lg-cc[data-open] + .lg-cc-toggle,
  .lg-cc-toggle[aria-expanded="true"] { opacity: 0; pointer-events: none; }
}
@media (hover: none) {
  .service-card:hover,
  .bookmark > a:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-aurora { animation: none !important; translate: none !important; }
  #information-widgets,
  .services-group,
  .bookmark-group,
  #tabs,
  #inner_wrapper dialog,
  #inner_wrapper div:has(> div > dialog),
  [data-lg-jelly] { animation: none !important; }
  .service-card:hover,
  .bookmark > a:hover { transform: none !important; }
  .service-card:active, .bookmark > a:active, #myTab button[role="tab"]:active,
  .lg-seg button:active, .lg-cc-toggle:active, .lg-swatch:active, .lg-dot:active,
  .lg-switch:active, .lg-cc-reset:active { scale: 0.98 !important; }
  #inner_wrapper *, #inner_wrapper *::before, #inner_wrapper *::after,
  .lg-cc, .lg-cc *, .lg-cc *::before, .lg-cc *::after { transition-duration: 1ms !important; }
  ::view-transition-new(root) { animation: none; }
}

/* No backdrop-filter support: near-opaque surfaces instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .services-group::before,
  .bookmark-group::before,
  .widget-container > div > [class*="information-widget-"],
  .widget-container > [class*="information-widget-"],
  html.lg-scrolled #information-widgets,
  #inner_wrapper dialog,
  .information-widget-search [role="listbox"],
  #tabs,
  .lg-cc,
  .lg-cc-toggle {
    background: var(--lg-fallback) !important;
  }
  .information-widget-search input { background: var(--lg-fallback) !important; }
}
/* System "Reduce transparency": solid surfaces, same layout. */
@media (prefers-reduced-transparency: reduce) {
  .services-group::before,
  .bookmark-group::before,
  .widget-container > div > [class*="information-widget-"],
  .widget-container > [class*="information-widget-"],
  html.lg-scrolled #information-widgets,
  #inner_wrapper dialog,
  #tabs,
  .lg-cc,
  .lg-cc-toggle {
    background: var(--lg-fallback) !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  .lg-aurora { opacity: 0.5; }
}

/* ==========================================================================
   15. Live metrics (GPU monitoring and any other service widget)
   custom.js reads each .service-block value and sets:
     data-lg-kind  = pct | temp
     data-lg-level = ok | warn | crit
     --lg-pct      = 0–100 (bar fill)
     data-lg-tick  = replays a short pulse when the value changes
   ========================================================================== */
@property --lg-pct { syntax: "<number>"; inherits: false; initial-value: 0; }
.service-block[data-lg-kind] {
  --lg-level: var(--lg-accent);
  transition: --lg-pct 700ms var(--lg-ease), background-color var(--lg-med) var(--lg-ease);
}
.service-block[data-lg-kind]::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 3px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, var(--lg-level) 0%, color-mix(in srgb, var(--lg-level) 60%, white) calc(var(--lg-pct) * 1%),
                    var(--lg-track) calc(var(--lg-pct) * 1%));
  box-shadow: 0 0 8px color-mix(in srgb, var(--lg-level) 45%, transparent);
}
.service-block[data-lg-level="warn"] { --lg-level: var(--lg-orange); }
.service-block[data-lg-level="crit"] {
  --lg-level: var(--lg-red);
  background: color-mix(in srgb, var(--lg-red) 14%, var(--lg-hover)) !important;
}
.service-block[data-lg-level="warn"] .service-block-value { color: var(--lg-orange) !important; }
.service-block[data-lg-level="crit"] .service-block-value { color: var(--lg-red) !important; }
.service-block[data-lg-kind="temp"] { --lg-level: var(--lg-green); }
.service-block[data-lg-kind="temp"][data-lg-level="warn"] { --lg-level: var(--lg-orange); }
.service-block[data-lg-kind="temp"][data-lg-level="crit"] { --lg-level: var(--lg-red); }

/* Value changed: a quick glint so live updates are noticeable. */
.service-block[data-lg-tick] .service-block-value { animation: lg-tick 600ms var(--lg-ease); }
@keyframes lg-tick {
  0%   { text-shadow: 0 0 0 transparent; }
  30%  { text-shadow: 0 0 12px var(--lg-accent-glow); }
  100% { text-shadow: 0 0 0 transparent; }
}
.service-block[data-lg-level="crit"] { animation: lg-crit 1.6s ease-in-out infinite; }
@keyframes lg-crit {
  0%, 100% { box-shadow: var(--lg-inner-card), 0 0 0 0 transparent; }
  50%      { box-shadow: var(--lg-inner-card), 0 0 0 2px color-mix(in srgb, var(--lg-red) 45%, transparent); }
}

/* "Live" indicator on the icon of cards whose widget is updating. */
.service-card:has(.service-block[data-lg-kind]) .service-icon { position: relative; }
.service-card:has(.service-block[data-lg-kind]) .service-icon::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 6px;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--lg-pop);
  border-radius: 50%;
  background: var(--lg-green);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--lg-green) 60%, transparent);
  animation: lg-live 2s ease-out infinite;
}
@keyframes lg-live {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lg-green) 60%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .service-block[data-lg-tick] .service-block-value,
  .service-block[data-lg-level="crit"],
  .service-card:has(.service-block[data-lg-kind]) .service-icon::after { animation: none !important; }
}

/* ==========================================================================
   16. AI system administrator (chat panel built by custom.js)
   ========================================================================== */
.lg-ai-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  font: 600 0.875rem/1 var(--lg-font);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%),
    linear-gradient(140deg, var(--lg-accent), color-mix(in srgb, var(--lg-accent) 50%, var(--lg-tab-2)));
  box-shadow: 0 10px 30px -8px var(--lg-accent-glow), var(--lg-shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: box-shadow var(--lg-med) var(--lg-ease), scale var(--lg-med) var(--lg-ease), opacity var(--lg-med) var(--lg-ease);
}
.lg-ai-toggle svg { width: 22px; height: 22px; flex: 0 0 22px; }
.lg-ai-toggle:hover { box-shadow: 0 14px 36px -8px var(--lg-accent-glow), var(--lg-shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.lg-ai-toggle .lg-ai-toggle-label { display: none; }
.lg-ai-toggle-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--lg-base-2);
  background: var(--lg-text-3);
  opacity: 0;
  transition: background var(--lg-med) var(--lg-ease), opacity var(--lg-med) var(--lg-ease);
}
.lg-ai-toggle[data-state="ready"] .lg-ai-toggle-dot,
.lg-ai-toggle[data-state="loading"] .lg-ai-toggle-dot,
.lg-ai-toggle[data-state="generating"] .lg-ai-toggle-dot { opacity: 1; background: var(--lg-green); }
.lg-ai-toggle[data-state="loading"] .lg-ai-toggle-dot,
.lg-ai-toggle[data-state="generating"] .lg-ai-toggle-dot { animation: lg-live 1.4s ease-out infinite; }
.lg-ai-toggle[data-state="offline"] .lg-ai-toggle-dot,
.lg-ai-toggle[data-state="nollama"] .lg-ai-toggle-dot { opacity: 1; background: var(--lg-red); }
.lg-ai-toggle[aria-expanded="true"] { opacity: 0; pointer-events: none; scale: 0.8; }

/* Desktop with sidebar: a row above "모양". */
@media (min-width: 1024px) {
  html:has(#tabs) #tabs { padding-bottom: 128px; }
  html:has(#tabs) .lg-ai-toggle {
    left: 24px;
    right: auto;
    bottom: 76px;
    width: 216px;
    height: 44px;
    justify-content: flex-start;
    padding: 0 14px;
    border-radius: 14px;
    font-weight: 600;
  }
  html:has(#tabs) .lg-ai-toggle svg { width: 20px; height: 20px; flex-basis: 20px; }
  html:has(#tabs) .lg-ai-toggle .lg-ai-toggle-label { display: inline; }
  html:has(#tabs) .lg-ai-toggle-dot { position: static; margin-left: auto; border: 0; width: 8px; height: 8px; }
  html:has(#tabs) .lg-ai-toggle[aria-expanded="true"] { opacity: 1; pointer-events: auto; scale: 1;
    box-shadow: 0 0 0 3px var(--lg-accent-soft), var(--lg-shadow-2); }
}

.lg-ai {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: min(440px, calc(100vw - 24px));
  border-radius: 28px;
  overflow: hidden;
  color: var(--lg-text);
  font-family: var(--lg-font);
  background: var(--lg-sheen), var(--lg-pop);
  -webkit-backdrop-filter: blur(40px) saturate(190%);
          backdrop-filter: blur(40px) saturate(190%);
  box-shadow: var(--lg-shadow-pop), var(--lg-inner);
  transform-origin: 100% 100%;
  opacity: 0;
  visibility: hidden;
  scale: 0.94;
  translate: 24px 0;
  pointer-events: none;
  transition: opacity 220ms var(--lg-ease), scale 420ms var(--lg-spring),
              translate 420ms var(--lg-spring), visibility 0s linear 420ms;
}
.lg-ai[data-open] {
  opacity: 1;
  visibility: visible;
  scale: 1;
  translate: 0 0;
  pointer-events: auto;
  transition: opacity 180ms var(--lg-ease), scale 460ms var(--lg-spring),
              translate 460ms var(--lg-spring), visibility 0s;
}

.lg-ai-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 12px 16px;
  box-shadow: inset 0 -1px 0 var(--lg-divider);
}
.lg-ai-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  color: #fff;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%),
    linear-gradient(140deg, var(--lg-accent), color-mix(in srgb, var(--lg-accent) 50%, var(--lg-tab-2)));
  box-shadow: 0 6px 16px -6px var(--lg-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.lg-ai-avatar svg { width: 20px; height: 20px; }
.lg-ai-titles { flex: 1; min-width: 0; }
.lg-ai-titles h2 { margin: 0; font-size: 0.98rem; font-weight: 700; letter-spacing: -0.02em; }
.lg-ai-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  color: var(--lg-text-3);
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lg-ai-status i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--lg-text-3);
  transition: background var(--lg-med) var(--lg-ease);
}
.lg-ai-status[data-state="ready"] i { background: var(--lg-green); }
.lg-ai-status[data-state="loading"] i,
.lg-ai-status[data-state="snapshot"] i,
.lg-ai-status[data-state="queued"] i,
.lg-ai-status[data-state="generating"] i { background: var(--lg-accent); animation: lg-live 1.4s ease-out infinite; }
.lg-ai-status[data-state="offline"] i,
.lg-ai-status[data-state="nollama"] i { background: var(--lg-red); }
.lg-ai-status[data-state="offline"],
.lg-ai-status[data-state="nollama"] { color: var(--lg-red); }

.lg-ai-iconbtn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 0;
  border-radius: 999px;
  background: var(--lg-btn);
  color: var(--lg-text-2);
  cursor: pointer;
  transition: background var(--lg-fast) var(--lg-ease), color var(--lg-fast) var(--lg-ease), scale var(--lg-med) var(--lg-ease);
}
.lg-ai-iconbtn svg { width: 17px; height: 17px; }
.lg-ai-iconbtn:hover { background: var(--lg-btn-hi); color: var(--lg-text); }
.lg-ai-iconbtn[hidden] { display: none; }

.lg-ai-log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--lg-scrollbar) transparent;
}

.lg-ai-empty { margin: auto 0; padding: 12px 6px; text-align: center; }
.lg-ai-hero {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 20px;
  color: #fff;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 55%),
    linear-gradient(140deg, var(--lg-accent), color-mix(in srgb, var(--lg-accent) 45%, var(--lg-tab-2)));
  box-shadow: 0 16px 40px -12px var(--lg-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  animation: lg-float 5s ease-in-out infinite;
}
.lg-ai-hero svg { width: 32px; height: 32px; }
@keyframes lg-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.lg-ai-empty h3 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.lg-ai-empty p { margin: 0 0 18px; color: var(--lg-text-2); font-size: 0.82rem; }
.lg-ai-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lg-ai-chip {
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--lg-hover);
  box-shadow: var(--lg-inner-card), inset 0 0 0 1px var(--lg-divider);
  color: var(--lg-text);
  font: 500 0.8rem/1 var(--lg-font);
  cursor: pointer;
  transition: background var(--lg-fast) var(--lg-ease), scale var(--lg-med) var(--lg-ease);
}
.lg-ai-chip:hover { background: var(--lg-btn-hi); }

.lg-ai-msg { display: flex; flex-direction: column; max-width: 100%; animation: lg-msg-in 280ms var(--lg-ease) both; }
@keyframes lg-msg-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.lg-ai-msg--ai.is-live { animation: none; }
.lg-ai-msg--user { align-items: flex-end; }
.lg-ai-bubble {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 20px;
  font-size: 0.86rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.lg-ai-msg--user .lg-ai-bubble {
  border-bottom-right-radius: 6px;
  color: #fff;
  background: linear-gradient(180deg, var(--lg-accent), color-mix(in srgb, var(--lg-accent) 82%, black));
  box-shadow: 0 6px 16px -8px var(--lg-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.lg-ai-msg--ai .lg-ai-bubble {
  max-width: 100%;
  border-bottom-left-radius: 6px;
  background: var(--lg-hover);
  box-shadow: var(--lg-inner-card), inset 0 0 0 1px var(--lg-divider);
}
.lg-ai-msg--ai.is-error .lg-ai-bubble {
  color: var(--lg-red);
  background: color-mix(in srgb, var(--lg-red) 10%, transparent);
}
.lg-ai-bubble p { margin: 0 0 6px; }
.lg-ai-bubble p:last-child { margin-bottom: 0; }
.lg-ai-bubble .lg-ai-h { font-weight: 700; margin-top: 4px; }
.lg-ai-bubble ul, .lg-ai-bubble ol { margin: 2px 0 8px; padding-left: 20px; }
.lg-ai-bubble li { margin: 2px 0; }
.lg-ai-bubble code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--lg-btn);
  font: 0.8em/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.lg-ai-msg--user .lg-ai-bubble code { background: rgba(255, 255, 255, 0.2); }
.lg-ai-code { position: relative; margin: 6px 0 8px; }
.lg-ai-code pre {
  margin: 0;
  padding: 12px 40px 12px 12px;
  border-radius: 12px;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.35);
  color: #e6edf3;
  font: 0.78rem/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
html[data-lg-mode="light"] .lg-ai-code pre { background: rgba(15, 23, 42, 0.88); }
.lg-ai-code pre code { padding: 0; background: none; font: inherit; }
.lg-ai-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}
.lg-ai-copy svg { width: 15px; height: 15px; }
.lg-ai-copy[data-copied] { background: var(--lg-green); color: #fff; }

.lg-ai-msg--ai.is-live .lg-ai-bubble > :last-child::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  border-radius: 2px;
  background: var(--lg-accent);
  animation: lg-caret 900ms steps(2) infinite;
}
@keyframes lg-caret { 50% { opacity: 0; } }
.lg-ai-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.lg-ai-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lg-text-3);
  animation: lg-dot 1.2s ease-in-out infinite;
}
.lg-ai-dots i:nth-child(2) { animation-delay: 0.15s; }
.lg-ai-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes lg-dot { 0%, 80%, 100% { translate: 0 0; opacity: 0.5; } 40% { translate: 0 -4px; opacity: 1; } }
.lg-ai-msg--ai.is-live .lg-ai-dots::after { display: none; }
.lg-ai-meta { margin: 4px 0 0 6px; color: var(--lg-text-3); font-size: 0.68rem; font-variant-numeric: tabular-nums; }

/* Proposed actions */
.lg-ai-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.lg-ai-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 10px 10px 12px;
  border-radius: 16px;
  background: var(--lg-hover);
  box-shadow: var(--lg-inner-card), inset 0 0 0 1px var(--lg-divider);
  animation: lg-msg-in 300ms var(--lg-ease) both;
}
.lg-ai-act[data-risk="change"] { box-shadow: var(--lg-inner-card), inset 0 0 0 1px color-mix(in srgb, var(--lg-orange) 40%, transparent); }
.lg-ai-act-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
.lg-ai-badge {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--lg-green);
  background: color-mix(in srgb, var(--lg-green) 16%, transparent);
}
.lg-ai-act[data-risk="change"] .lg-ai-badge { color: var(--lg-orange); background: color-mix(in srgb, var(--lg-orange) 16%, transparent); }
.lg-ai-act-label { font-size: 0.82rem; font-weight: 600; }
.lg-ai-act-target {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--lg-btn);
  font: 600 0.75rem/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.lg-ai-run {
  margin-left: auto;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  font: 600 0.78rem/1 var(--lg-font);
  background: var(--lg-accent);
  box-shadow: 0 4px 12px -4px var(--lg-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: background var(--lg-fast) var(--lg-ease), scale var(--lg-med) var(--lg-ease);
}
.lg-ai-act[data-risk="change"] .lg-ai-run { background: var(--lg-orange); box-shadow: 0 4px 12px -4px rgba(255, 159, 10, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.lg-ai-act[data-state="confirm"] .lg-ai-run { background: var(--lg-red); animation: lg-confirm 900ms ease-in-out infinite; }
@keyframes lg-confirm { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--lg-red) 30%, transparent); } }
.lg-ai-act[data-state="running"] .lg-ai-run { opacity: 0.6; pointer-events: none; }
.lg-ai-act-note { margin-left: auto; color: var(--lg-text-3); font-size: 0.74rem; }
.lg-ai-act[data-state="invalid"] { opacity: 0.7; }
.lg-ai-act[data-state="done"] .lg-ai-act-note { color: var(--lg-green); font-weight: 600; }
.lg-ai-act[data-state="failed"] .lg-ai-act-note { color: var(--lg-red); font-weight: 600; }
.lg-ai-out { flex-basis: 100%; }
.lg-ai-out summary { cursor: pointer; color: var(--lg-text-2); font-size: 0.74rem; padding: 2px 0 6px; }
.lg-ai-out pre {
  max-height: 260px;
  margin: 0 0 8px;
  padding: 10px 12px;
  overflow: auto;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  color: #e6edf3;
  font: 0.72rem/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre;
}
html[data-lg-mode="light"] .lg-ai-out pre { background: rgba(15, 23, 42, 0.88); }
.lg-ai-explain {
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--lg-btn);
  color: var(--lg-text);
  font: 500 0.74rem/1 var(--lg-font);
  cursor: pointer;
}
.lg-ai-explain:hover { background: var(--lg-btn-hi); }

/* Composer */
.lg-ai-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 8px 12px 6px;
  padding: 6px 6px 6px 14px;
  border-radius: 24px;
  background: var(--lg-input);
  box-shadow: var(--lg-inner-card), inset 0 0 0 1px var(--lg-divider);
  transition: box-shadow var(--lg-med) var(--lg-ease);
}
.lg-ai-compose:focus-within {
  box-shadow: 0 0 0 3px var(--lg-accent-soft), inset 0 0 0 1px var(--lg-accent);
}
.lg-ai-compose textarea {
  flex: 1;
  min-height: 24px;
  max-height: 160px;
  padding: 7px 0;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--lg-text);
  font: 400 0.88rem/1.45 var(--lg-font);
}
.lg-ai-compose textarea::placeholder { color: var(--lg-text-3); }
.lg-ai-send {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: var(--lg-accent);
  box-shadow: 0 4px 12px -4px var(--lg-accent-glow);
  transition: background var(--lg-fast) var(--lg-ease), scale var(--lg-med) var(--lg-ease);
}
.lg-ai-send svg { width: 18px; height: 18px; }
.lg-ai-send.is-stop { background: var(--lg-text-2); }
.lg-ai-foot { margin: 0 16px 12px; text-align: center; color: var(--lg-text-3); font-size: 0.66rem; }

@media (max-width: 640px) {
  #footer { padding-right: 76px !important; }
  .lg-ai {
    top: auto;
    left: 6px;
    right: 6px;
    bottom: 6px;
    width: auto;
    height: 88dvh;
    border-radius: 30px;
    transform-origin: 50% 100%;
    translate: 0 40px;
  }
  .lg-ai-foot { margin-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .lg-ai, .lg-ai *, .lg-ai *::before, .lg-ai *::after { animation: none !important; transition-duration: 1ms !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg-ai { background: var(--lg-fallback) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .lg-ai { background: var(--lg-fallback) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
.lg-ai-compose textarea:focus,
.lg-ai-compose textarea:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; }

/* ==========================================================================
   17. Section order (목차 순서)
   custom.js writes only --lg-order on #myTab > li and top-level groups;
   both parents are flex containers, so `order` reorders them visually.
   ========================================================================== */
#myTab > li,
#layout-groups > .services-group,
#layout-groups > .bookmark-group { order: var(--lg-order, 0); }

.lg-ord-reset {
  border: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--lg-btn);
  color: var(--lg-text-2);
  font: 500 0.7rem/1.2 var(--lg-font);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background var(--lg-fast) var(--lg-ease), opacity var(--lg-fast) var(--lg-ease), scale var(--lg-med) var(--lg-ease);
}
.lg-ord-reset:hover:not(:disabled) { background: var(--lg-btn-hi); color: var(--lg-text); }
.lg-ord-reset:disabled { opacity: 0.4; cursor: default; }
.lg-ord-hint { margin: -4px 2px 10px; font-size: 0.72rem; line-height: 1.4; color: var(--lg-text-3); }
.lg-ord-block + .lg-ord-block { margin-top: 12px; }
.lg-ord-sub {
  margin: 0 4px 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--lg-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lg-ord-list {
  overflow-anchor: none;
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 14px;
  background: var(--lg-input, rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 0 0 1px var(--lg-divider);
}
.lg-ord-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  padding: 0 4px 0 2px;
  border-radius: 14px;
  transition: background var(--lg-fast) var(--lg-ease), box-shadow var(--lg-med) var(--lg-ease), scale var(--lg-med) var(--lg-spring);
}
.lg-ord-item + .lg-ord-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 40px;
  right: 10px;
  height: 1px;
  background: var(--lg-divider);
}
.lg-ord-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lg-ord-grip,
.lg-ord-btn {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--lg-text-3);
  cursor: pointer;
  transition: background var(--lg-fast) var(--lg-ease), color var(--lg-fast) var(--lg-ease), opacity var(--lg-fast) var(--lg-ease), scale var(--lg-med) var(--lg-ease);
}
.lg-ord-grip { cursor: grab; touch-action: none; }
.lg-ord-grip svg { width: 16px; height: 16px; }
.lg-ord-btn svg { width: 16px; height: 16px; }
.lg-ord-grip:hover,
.lg-ord-btn:hover:not(:disabled) { background: var(--lg-btn); color: var(--lg-text); }
.lg-ord-btn:active:not(:disabled) { scale: 0.88; }
.lg-ord-btn:disabled { opacity: 0.25; cursor: default; }
.lg-ord-grip:focus-visible,
.lg-ord-btn:focus-visible,
.lg-ord-reset:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 1px; }

/* Lifted row while dragging */
.lg-ord-list[data-dragging] { cursor: grabbing; }
.lg-ord-list[data-dragging] .lg-ord-item:not([data-dragging]) { transition: background var(--lg-fast) var(--lg-ease); }
.lg-ord-item[data-dragging] {
  z-index: 2;
  scale: 1.03;
  background: var(--lg-pop);
  box-shadow: var(--lg-shadow-pop), inset 0 0 0 1px var(--lg-stroke);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.lg-ord-item[data-dragging] .lg-ord-grip { cursor: grabbing; color: var(--lg-accent); }
.lg-ord-item[data-dragging]::before,
.lg-ord-item[data-dragging] + .lg-ord-item::before { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .lg-ord-item[data-dragging] { scale: 1; }
}

/* Tab rows carry the same tinted square as the sidebar */
.lg-ord-list[data-kind="tabs"] .lg-ord-name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lg-ord-list[data-kind="tabs"] .lg-ord-name::before {
  content: "";
  flex: 0 0 16px;
  height: 16px;
  border-radius: 5px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60%),
    var(--lg-ord-tint, var(--lg-accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ==========================================================================
   18. Sidebar edit sheet ("편집" in the sidebar header)
   Our own layer laid exactly over #tabs; Homepage's tab buttons are untouched.
   ========================================================================== */
.lg-side-edit-btn,
.lg-side-edit { display: none; }

@media (min-width: 1024px) {
  html[data-lg-has-tabs] .lg-side-edit-btn {
    display: block;
    position: fixed;
    top: 24px;
    left: calc(12px + 240px - 16px);
    translate: -100% 0;
    z-index: 26;
    height: 24px;
    padding: 0 11px;
    border: 0;
    border-radius: 999px;
    background: var(--lg-btn);
    color: var(--lg-text-2);
    font: 600 0.72rem/24px var(--lg-font);
    cursor: pointer;
    transition: background var(--lg-fast) var(--lg-ease), color var(--lg-fast) var(--lg-ease), scale var(--lg-med) var(--lg-ease);
  }
  html[data-lg-has-tabs] .lg-side-edit-btn:hover { background: var(--lg-btn-hi); color: var(--lg-text); }
  html[data-lg-has-tabs] .lg-side-edit-btn:active { scale: 0.92; }
  html[data-lg-has-tabs] .lg-side-edit-btn:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 2px; }
  html[data-lg-side-edit] .lg-side-edit-btn {
    background: var(--lg-accent);
    color: var(--lg-on-accent, #fff);
    box-shadow: 0 4px 14px -4px var(--lg-accent-glow, var(--lg-accent));
  }

  html[data-lg-has-tabs] .lg-side-edit {
    display: block;
    position: fixed;
    top: 12px;
    bottom: 12px;
    left: 12px;
    width: 240px;
    z-index: 23;                      /* above #tabs, below the frame and bottom buttons */
    border-radius: var(--lg-r-sheet);
    color: var(--lg-text);
    font-family: var(--lg-font);
    background: var(--lg-sheen), var(--lg-pop);
    -webkit-backdrop-filter: blur(40px) saturate(190%);
            backdrop-filter: blur(40px) saturate(190%);
    box-shadow: var(--lg-shadow-pop), var(--lg-inner);
    opacity: 0;
    visibility: hidden;
    scale: 0.97;
    pointer-events: none;
    transition: opacity 200ms var(--lg-ease), scale 380ms var(--lg-spring), visibility 0s linear 380ms;
  }
  html[data-lg-has-tabs] .lg-side-edit[data-open] {
    opacity: 1;
    visibility: visible;
    scale: 1;
    pointer-events: auto;
    transition: opacity 180ms var(--lg-ease), scale 420ms var(--lg-spring), visibility 0s;
  }
  .lg-side-edit-scroll {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-anchor: none;            /* rows move while dragging: don't let anchoring fight auto-scroll */
    padding: 56px 10px 132px;         /* under the frame's header strip / above the bottom buttons */
    scroll-padding: 60px 0 132px;
    scrollbar-width: thin;
  }
  .lg-side-edit-title {
    margin: 0 16px 12px;
    height: 24px;
    line-height: 24px;
    color: var(--lg-text-3);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .lg-side-edit .lg-ord-hint { margin: 0 6px 12px; }
  .lg-side-edit .lg-ord-sub { margin-left: 6px; }
  .lg-side-edit .lg-ord-item { min-height: 40px; }
  .lg-side-edit .lg-ord-btn { width: 28px; }
  .lg-side-edit-reset { display: block; margin: 14px auto 0; }

  /* While editing, the real sidebar recedes behind the sheet */
  html[data-lg-side-edit] #tabs { opacity: 0; transition: opacity 200ms var(--lg-ease); }
}
@media (prefers-reduced-motion: reduce) {
  .lg-side-edit { scale: 1 !important; }
}

/* Sidebar frame: fixed header strip + footer fade + rim over the scrolling list */
.lg-side-frame { display: none; }
@media (min-width: 1024px) {
  html[data-lg-has-tabs] #tabs { padding-top: 56px; scroll-padding: 60px 0 132px; }
  html[data-lg-has-tabs] #tabs::before,
  html[data-lg-has-tabs] #tabs::after { display: none; }
  html[data-lg-has-tabs] .lg-side-frame {
    display: block;
    position: fixed;
    top: 12px;
    bottom: 12px;
    left: 12px;
    width: 240px;
    z-index: 24;
    pointer-events: none;
    border-radius: var(--lg-r-sheet);
    overflow: hidden;
    animation: lg-slide-in var(--lg-slow) var(--lg-ease) both;
  }
  .lg-side-frame::before {
    content: attr(data-title);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 62px;
    padding-left: 26px;
    line-height: 48px;
    color: var(--lg-text-3);
    font: 600 0.7rem/48px var(--lg-font);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent;
    -webkit-mask-image: linear-gradient(180deg, #000 46px, transparent);
            mask-image: linear-gradient(180deg, #000 46px, transparent);
    transition: background var(--lg-med) var(--lg-ease);
  }
  /* solid title bar only once the list has scrolled under it */
  html[data-lg-side-scrolled]:not([data-lg-side-edit]) .lg-side-frame::before,
  html[data-lg-side-edit][data-lg-sheet-scrolled] .lg-side-frame::before {
    background: var(--lg-fallback);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
            backdrop-filter: blur(24px) saturate(160%);
  }
  html[data-lg-side-edit] .lg-side-frame::before { content: "목차 편집"; }
  .lg-side-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--lg-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  .lg-side-frame-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 150px;
    background: linear-gradient(180deg, transparent, var(--lg-pop) 50%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
            backdrop-filter: blur(24px) saturate(160%);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%);
            mask-image: linear-gradient(180deg, transparent, #000 40%);
  }
}
@media (min-width: 1024px) and (prefers-reduced-transparency: reduce) {
  .lg-side-frame::before,
  .lg-side-frame-foot { background: var(--lg-fallback); -webkit-mask-image: none; mask-image: none; }
}

/* ==========================================================================
   19. Custom names (목차 이름)
   custom.js sets data-lg-label on the tab button / group title; Homepage's
   own text stays in the DOM (it is the stable id) and is visually swapped.
   ========================================================================== */
#myTab button[role="tab"][data-lg-label] { font-size: 0 !important; }
#myTab button[role="tab"][data-lg-label]::after {
  content: attr(data-lg-label);
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
h2.service-group-name[data-lg-label],
h2.bookmark-group-name[data-lg-label] { font-size: 0 !important; }
h2.service-group-name[data-lg-label]::after,
h2.bookmark-group-name[data-lg-label]::after {
  content: attr(data-lg-label);
  font-size: 0.95rem;
}
html[data-lg-side-edit] .lg-side-frame::before { content: "목차 편집"; }

/* Editable name inside a row */
.lg-ord-input,
.lg-title-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--lg-text);
  font: 500 0.85rem/1.3 var(--lg-font);
  text-overflow: ellipsis;
  outline: none;
  transition: background var(--lg-fast) var(--lg-ease), box-shadow var(--lg-fast) var(--lg-ease);
}
.lg-ord-name { gap: 4px; }
.lg-ord-list[data-kind="tabs"] .lg-ord-name { gap: 6px; }
.lg-ord-input { margin-left: -4px; cursor: text; }
.lg-ord-input:hover { background: var(--lg-hover); }
.lg-ord-input:focus,
.lg-title-input:focus {
  background: var(--lg-input-focus, var(--lg-input, rgba(255, 255, 255, 0.1)));
  box-shadow: 0 0 0 2px var(--lg-accent);
}
.lg-ord-input::placeholder,
.lg-title-input::placeholder { color: var(--lg-text-3); }
.lg-ord-item[data-renamed] .lg-ord-input { font-weight: 600; }
.lg-ord-item[data-renamed] .lg-ord-name::after {
  content: "";
  flex: 0 0 6px;
  height: 6px;
  margin-right: 2px;
  border-radius: 50%;
  background: var(--lg-accent);
}
.lg-title-block { display: block; margin-bottom: 14px; }
.lg-title-input {
  display: block;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--lg-input, rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 0 0 1px var(--lg-divider);
}
.lg-side-edit .lg-ord-grip { width: 24px; }
.lg-side-edit .lg-ord-btn { width: 24px; }
/* give the name the whole row while it is being edited */
.lg-ord-item:has(.lg-ord-input:focus) .lg-ord-btn { display: none; }
.lg-ord-item:has(.lg-ord-input:focus) .lg-ord-name::after { display: none; }

/* ==========================================================================
   20. VPN key records drawer (키별 사이트·패킷 기록)
   Base drawer/animation from .lg-ai; wider for tables.
   ========================================================================== */
.lg-kr { width: min(620px, calc(100vw - 24px)); z-index: 41; }
.lg-kr .lg-ai-titles h2 { margin: 0; }
.lg-kr-sub { margin: 2px 0 0; font-size: 0.72rem; color: var(--lg-text-3); }

li.service[data-name="키별 기록"] .service-card { cursor: pointer; }
li.service[data-name="키별 기록"] .service-container > div > div,
li.service[data-name="접속자"] .service-container > div > div {
  cursor: pointer;
  transition: background var(--lg-fast) var(--lg-ease);
}
li.service[data-name="키별 기록"] .service-container > div > div:hover,
li.service[data-name="접속자"] .service-container > div > div:hover {
  background: color-mix(in srgb, var(--lg-accent) 14%, transparent) !important;
}

.lg-kr-keys {
  display: flex;
  gap: 6px;
  padding: 12px 14px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.lg-kr-keys::-webkit-scrollbar { display: none; }
.lg-kr-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  max-width: 220px;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--lg-btn);
  color: var(--lg-text-2);
  font: 600 0.8rem/1.2 var(--lg-font);
  cursor: pointer;
  transition: background var(--lg-fast) var(--lg-ease), color var(--lg-fast) var(--lg-ease), scale var(--lg-med) var(--lg-ease);
}
.lg-kr-key span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-kr-key i { flex: 0 0 7px; height: 7px; border-radius: 50%; background: var(--lg-text-3); opacity: 0.6; }
.lg-kr-key[data-online] i { background: #30d158; opacity: 1; box-shadow: 0 0 8px #30d158; }
.lg-kr-key:hover { background: var(--lg-btn-hi); color: var(--lg-text); }
.lg-kr-key[aria-selected="true"] {
  background: var(--lg-accent);
  color: var(--lg-on-accent, #fff);
  box-shadow: 0 4px 14px -6px var(--lg-accent-glow, var(--lg-accent));
}
.lg-kr-key[aria-selected="true"] i { background: #fff; box-shadow: none; }
.lg-kr-key:active { scale: 0.94; }
.lg-kr-key:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 2px; }

.lg-kr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 8px 16px 2px;
  font-size: 0.72rem;
  color: var(--lg-text-2);
}
.lg-kr-meta span {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--lg-hover);
  font-variant-numeric: tabular-nums;
}
.lg-kr-meta span[data-state="on"] { color: #30d158; font-weight: 600; }

.lg-kr-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 10px;
  box-shadow: inset 0 -1px 0 var(--lg-divider);
}
.lg-kr-tabs { flex: 0 0 200px; }
.lg-kr-search {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--lg-input, rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 0 0 1px var(--lg-divider);
  color: var(--lg-text);
  font: 500 0.8rem var(--lg-font);
  outline: none;
}
.lg-kr-search:focus { box-shadow: 0 0 0 2px var(--lg-accent); }
.lg-kr-search::placeholder { color: var(--lg-text-3); }

.lg-kr-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 8px 14px;
  outline: none;
}
.lg-kr-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.lg-kr-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 8px 8px;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--lg-text-3);
  background: var(--lg-fallback);
  box-shadow: inset 0 -1px 0 var(--lg-divider);
}
.lg-kr-table td {
  padding: 8px;
  vertical-align: top;
  border-bottom: 1px solid var(--lg-divider);
  color: var(--lg-text);
}
.lg-kr-table .n { text-align: right; white-space: nowrap; }
.lg-kr-table td.t { white-space: nowrap; color: var(--lg-text-2); }
.lg-kr-table b { display: block; font-weight: 600; word-break: break-all; }
.lg-kr-table small {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  color: var(--lg-text-3);
  word-break: break-all;
}
.lg-kr-table tbody tr { transition: background var(--lg-fast) var(--lg-ease); }
.lg-kr-table tbody tr:hover td { background: var(--lg-hover); }
.lg-kr-flows tr[data-open="1"] td.t { color: var(--lg-text); }
.lg-kr-proto {
  display: inline-block;
  margin-right: 5px;
  padding: 0 5px;
  border-radius: 4px;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--lg-accent) 20%, transparent);
  color: var(--lg-text-2);
}
.lg-kr-flows tr[data-open="1"] .lg-kr-proto { background: color-mix(in srgb, #30d158 30%, transparent); }
.lg-kr-empty {
  margin: 48px 16px;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--lg-text-3);
}
.lg-kr-note { margin: 10px 8px 0; font-size: 0.7rem; color: var(--lg-text-3); text-align: center; }

@media (max-width: 640px) {
  .lg-kr-tabs { flex-basis: 150px; }
  .lg-kr-table td, .lg-kr-table th { padding: 7px 5px; }
}

/* ==========================================================================
   21. Lite 모드 (효과 끄기) — low-spec mode
   html[data-lg-fx="off"] (custom.js) drops everything that costs GPU time:
   backdrop blur, aurora + grain + vignette, animations and transitions,
   big soft shadows, pointer light and parallax. Layout stays identical;
   popovers become solid so nothing shows through without the blur.
   ========================================================================== */
.lg-cc-hint { margin: 8px 4px 0; color: var(--lg-text-3); font-size: 0.72rem; line-height: 1.4; }

html[data-lg-fx="off"][data-lg-mode] {
  --lg-shadow-1: 0 0 #0000;
  --lg-shadow-2: 0 0 #0000;
  --lg-shadow-hover: 0 0 #0000;
  --lg-shadow-pop: 0 0 0 1px var(--lg-hair, rgba(127, 127, 127, 0.25));
  --lg-pop: var(--lg-base-2);           /* fully opaque: nothing ghosts through */
  --lg-spot-c: transparent;
}
html[data-lg-fx="off"] .lg-aurora,
html[data-lg-fx="off"] #page_wrapper::before,
html[data-lg-fx="off"] #page_wrapper::after { display: none !important; }
html[data-lg-fx="off"] body {
  background-image: none !important;
  background-attachment: scroll !important;
}
html[data-lg-fx="off"] *,
html[data-lg-fx="off"] *::before,
html[data-lg-fx="off"] *::after {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  animation: none !important;
  transition: none !important;
  filter: none !important;
  will-change: auto !important;
}
html[data-lg-fx="off"] .service-card:hover,
html[data-lg-fx="off"] .bookmark > a:hover { transform: none !important; }
html[data-lg-fx="off"] *:active { scale: none !important; }
/* Surfaces that relied on blur to hide what is behind them */
html[data-lg-fx="off"] .lg-cc,
html[data-lg-fx="off"] .lg-ai,
html[data-lg-fx="off"] #lg-side-edit,
html[data-lg-fx="off"] #inner_wrapper dialog,
html[data-lg-fx="off"] .lg-cc-toggle { background: linear-gradient(var(--lg-fallback), var(--lg-fallback)), var(--lg-base-2) !important; }
html[data-lg-fx="off"].lg-scrolled #information-widgets { background: var(--lg-fallback) !important; }
html[data-lg-fx="off"] .lg-side-frame-foot { display: none !important; }
html[data-lg-fx="off"]::view-transition-old(root),
html[data-lg-fx="off"]::view-transition-new(root) { animation: none !important; }

/* ==========================================================================
   22. AI 요청 기록 · 처리 순서도 (inside the AI panel)
   ========================================================================== */
.lg-tr {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 14px 16px;
  outline: none;
  scrollbar-width: thin;
  scrollbar-color: var(--lg-scrollbar) transparent;
}
.lg-ai[data-view="trace"] .lg-tr { display: block; }
.lg-ai[data-view="trace"] .lg-ai-log,
.lg-ai[data-view="trace"] .lg-ai-compose,
.lg-ai[data-view="trace"] .lg-ai-foot { display: none; }
.lg-ai-trace-btn[aria-pressed="true"] { color: var(--lg-accent); background: var(--lg-accent-soft); }

.lg-tr-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -14px 8px;
  padding: 10px 14px;
  background: var(--lg-fallback);
  box-shadow: inset 0 -1px 0 var(--lg-divider);
}
.lg-tr-bar h3 { flex: 1; margin: 0; font-size: 0.86rem; font-weight: 700; }
.lg-tr-back, .lg-tr-clear, .lg-ai-seetrace {
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--lg-btn);
  color: var(--lg-text-2);
  font: 600 0.74rem/1.2 var(--lg-font);
  cursor: pointer;
}
.lg-tr-back:hover, .lg-tr-clear:hover, .lg-ai-seetrace:hover { background: var(--lg-btn-hi); color: var(--lg-text); }
.lg-tr-clear[data-armed="1"] { background: var(--lg-red); color: #fff; }
.lg-ai-seetrace { margin-left: 8px; padding: 2px 8px; font-size: 0.66rem; color: var(--lg-accent); }
.lg-tr-empty { margin: 40px 10px; text-align: center; color: var(--lg-text-3); font-size: 0.8rem; line-height: 1.6; }

.lg-tr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lg-tr-row {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  text-align: left;
  color: var(--lg-text);
  background: var(--lg-hover);
  box-shadow: var(--lg-inner-card);
  font-family: var(--lg-font);
  cursor: pointer;
}
.lg-tr-row:hover { background: var(--lg-btn-hi); }
.lg-tr-q {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}
.lg-tr-sub { display: flex; align-items: center; gap: 6px; color: var(--lg-text-3); font-size: 0.68rem; font-variant-numeric: tabular-nums; }
.lg-tr-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--lg-green); }
[data-status="running"] > .lg-tr-sub .lg-tr-dot { background: var(--lg-accent); animation: lg-live 1.4s ease-out infinite; }
[data-status="error"] > .lg-tr-sub .lg-tr-dot { background: var(--lg-red); }
[data-status="aborted"] > .lg-tr-sub .lg-tr-dot { background: var(--lg-text-3); }

.lg-tr-sec { margin: 4px 0 14px; }
.lg-tr-sec h4 { margin: 0 2px 8px; color: var(--lg-text-2); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; }
.lg-tr-sec h4 small { margin-left: 4px; color: var(--lg-text-3); font-weight: 500; }
.lg-tr-query {
  padding: 10px 12px;
  border-radius: 14px 14px 4px 14px;
  background: var(--lg-accent);
  color: #fff;
  font-size: 0.84rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.lg-tr-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.lg-tr-pills span {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--lg-btn);
  color: var(--lg-text-2);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
}
.lg-tr-pills [data-status="done"] { color: var(--lg-green); background: color-mix(in srgb, var(--lg-green) 16%, transparent); font-weight: 700; }
.lg-tr-pills [data-status="running"] { color: var(--lg-accent); background: var(--lg-accent-soft); font-weight: 700; }
.lg-tr-pills [data-status="error"] { color: var(--lg-red); background: color-mix(in srgb, var(--lg-red) 16%, transparent); font-weight: 700; }

/* Flowchart: numbered nodes joined by a line with an arrow head */
.lg-tr-flow { list-style: none; margin: 0; padding: 0; }
.lg-tr-node { position: relative; display: flex; gap: 10px; padding-bottom: 14px; }
.lg-tr-node:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 28px;
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: var(--lg-divider);
}
.lg-tr-node:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 0;
  border: 5px solid transparent;
  border-top: 6px solid var(--lg-text-3);
  border-bottom: 0;
}
.lg-tr-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  color: #fff;
  background: var(--lg-green);
  font-size: 0.72rem;
  font-weight: 700;
}
.lg-tr-node[data-status="running"] .lg-tr-num { background: var(--lg-accent); animation: lg-live 1.4s ease-out infinite; }
.lg-tr-node[data-status="warn"] .lg-tr-num { background: var(--lg-orange); }
.lg-tr-node[data-status="error"] .lg-tr-num { background: var(--lg-red); }
.lg-tr-node[data-status="aborted"] .lg-tr-num { background: var(--lg-text-3); }
.lg-tr-node[data-key="exec"] .lg-tr-box { box-shadow: var(--lg-inner-card), inset 0 0 0 1px color-mix(in srgb, var(--lg-orange) 40%, transparent); }
.lg-tr-box {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--lg-hover);
  box-shadow: var(--lg-inner-card);
}
.lg-tr-node-head { display: flex; align-items: baseline; gap: 8px; }
.lg-tr-node-head strong { flex: 1; font-size: 0.8rem; }
.lg-tr-ms { color: var(--lg-text-2); font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lg-tr-box p { margin: 3px 0 0; color: var(--lg-text-3); font-size: 0.7rem; line-height: 1.4; word-break: break-word; }
.lg-tr-gantt { position: relative; height: 4px; margin-top: 7px; border-radius: 4px; background: var(--lg-track); }
.lg-tr-gantt i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--lg-accent); min-width: 3px; }
.lg-tr-node[data-status="error"] .lg-tr-gantt i { background: var(--lg-red); }
.lg-tr-box .lg-ai-out { margin-top: 6px; }

.lg-tr-msg { margin-bottom: 6px; border-radius: 12px; background: var(--lg-hover); box-shadow: var(--lg-inner-card); }
.lg-tr-msg summary {
  padding: 8px 10px;
  overflow: hidden;
  color: var(--lg-text-2);
  font-size: 0.72rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.lg-tr-msg summary b { margin-right: 4px; color: var(--lg-accent); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.lg-tr-msg pre, .lg-tr-pre {
  max-height: 320px;
  margin: 0;
  padding: 10px 12px;
  overflow: auto;
  border-radius: 0 0 12px 12px;
  background: rgba(0, 0, 0, 0.35);
  color: #e6edf3;
  font: 0.7rem/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
.lg-tr-pre { border-radius: 12px; }
.lg-tr-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lg-tr-acts li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 12px;
  background: var(--lg-hover);
  font-size: 0.72rem;
  color: var(--lg-text-3);
}
.lg-tr-acts li[data-risk="change"] .lg-ai-badge { color: var(--lg-orange); background: color-mix(in srgb, var(--lg-orange) 16%, transparent); }
.lg-tr-acts code { color: var(--lg-text); font-size: 0.7rem; }
@media (prefers-reduced-motion: reduce) {
  .lg-tr-node[data-status="running"] .lg-tr-num, [data-status="running"] > .lg-tr-sub .lg-tr-dot { animation: none; }
}

/* Lite 모드 + 라이트: without blur and soft shadows every surface was near-white
   on a near-white page. Give it a grey page, solid white sheets, light-grey
   cards and hairline borders so the layers stay distinguishable. */
html[data-lg-fx="off"][data-lg-mode="light"] {
  --lg-base-1: #dfe3ea;
  --lg-base-2: #dfe3ea;
  --lg-base-3: #dfe3ea;
  --lg-text-2: rgba(40, 40, 50, 0.78);
  --lg-text-3: rgba(40, 40, 50, 0.60);
  --lg-glass: #ffffff;
  --lg-glass-hi: #ffffff;
  --lg-card-a: #f1f3f7;
  --lg-card-b: #f1f3f7;
  --lg-card-ha: #e7eaf0;
  --lg-card-hb: #e7eaf0;
  --lg-bar: #ffffff;
  --lg-side: #ffffff;
  --lg-pop: #ffffff;
  --lg-dialog: #ffffff;
  --lg-fallback: #ffffff;
  --lg-input: #f1f3f7;
  --lg-input-hi: #e9ecf1;
  --lg-input-focus: #ffffff;
  --lg-track: rgba(15, 23, 42, 0.10);
  --lg-hover: rgba(15, 23, 42, 0.05);
  --lg-btn: rgba(15, 23, 42, 0.07);
  --lg-btn-hi: rgba(15, 23, 42, 0.12);
  --lg-divider: rgba(15, 23, 42, 0.12);
  --lg-sel-a: #ffffff;
  --lg-sel-b: #ffffff;
  --lg-sheen: linear-gradient(transparent, transparent);
  --lg-rim: linear-gradient(transparent, transparent);
  --lg-shadow-1: 0 0 0 1px rgba(15, 23, 42, 0.10);
  --lg-shadow-2: 0 0 0 1px rgba(15, 23, 42, 0.12);
  --lg-shadow-hover: 0 0 0 1px rgba(15, 23, 42, 0.18);
  --lg-shadow-pop: 0 0 0 1px rgba(15, 23, 42, 0.16), 0 8px 24px -8px rgba(15, 23, 42, 0.25);
  --lg-inner: inset 0 0 0 #0000;
  --lg-inner-card: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
  --lg-inner-card-hi: inset 0 0 0 1px rgba(15, 23, 42, 0.10);
}
html[data-lg-fx="off"][data-lg-mode="light"] #myTab button[role="tab"][aria-selected="true"] {
  background: var(--lg-accent-soft) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lg-accent) 35%, transparent) !important;
}

/* ==========================================================================
   23. GPU budget (normal mode)
   Measured: the page never went idle, it drew ~60 frames/s forever. Causes:
   - the "live" dot pulsed with an infinite box-shadow animation (a repaint
     every frame inside blurred sheets);
   - the aurora drifted every frame, so every backdrop blur on screen had to
     be recomputed every frame (that is what pins a GPU near 100%).
   Now the dot pulses only when a value actually changes, the aurora moves
   in small steps a few times per second (invisible behind the blur), and
   attention pulses stop after a few beats.
   ========================================================================== */
.service-card:has(.service-block[data-lg-kind]) .service-icon::after { animation: none; }
.service-card:has(.service-block[data-lg-tick]) .service-icon::after { animation: lg-live 700ms ease-out 1; }
.service-block[data-lg-level="crit"] { animation-iteration-count: 4; }
.lg-ai-hero { animation-iteration-count: 2 !important; }

/* calm: 2 updates/s; lively: 4 updates/s (per 24s / 8s keyframe segment) */
html[data-lg-motion="calm"] .lg-aurora { animation-timing-function: steps(48) !important; }
html[data-lg-motion="lively"] .lg-aurora { animation-timing-function: steps(32) !important; }
/* Layers that finished their entrance animation do not need to stay promoted. */
.services-group, .bookmark-group, #information-widgets { animation-fill-mode: backwards !important; }

/* ==========================================================================
   24. 로컬 AI tab: the chat page (ai-admin /chat) in Homepage's iframe widget
   ========================================================================== */
li.service[data-name="로컬 AI 채팅"] .service-card,
li.service[data-name="로컬 AI 채팅"] .service-card:hover { transform: none !important; scale: none !important; }
li.service[data-name="로컬 AI 채팅"] .service-block {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
li.service[data-name="로컬 AI 채팅"] iframe {
  display: block;
  height: max(520px, calc(100dvh - 260px)) !important;
  border: 0;
  border-radius: 14px;
  background: transparent;
}
@media (max-width: 640px) {
  li.service[data-name="로컬 AI 채팅"] iframe { height: max(480px, calc(100dvh - 200px)) !important; }
}