/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Albert_Sans","arguments":[{"subsets":["latin"],"weight":["400","500","600","700","800"],"variable":"--font-geist","display":"swap"}],"variableName":"albertSans"} ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: '__Albert_Sans_544aab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/dashboard/_next/static/media/866ace25ba8133d9-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Albert_Sans_544aab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/dashboard/_next/static/media/0ecabae3741772cf-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: '__Albert_Sans_544aab';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/dashboard/_next/static/media/866ace25ba8133d9-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Albert_Sans_544aab';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/dashboard/_next/static/media/0ecabae3741772cf-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: '__Albert_Sans_544aab';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/dashboard/_next/static/media/866ace25ba8133d9-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Albert_Sans_544aab';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/dashboard/_next/static/media/0ecabae3741772cf-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: '__Albert_Sans_544aab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/dashboard/_next/static/media/866ace25ba8133d9-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Albert_Sans_544aab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/dashboard/_next/static/media/0ecabae3741772cf-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: '__Albert_Sans_544aab';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/dashboard/_next/static/media/866ace25ba8133d9-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Albert_Sans_544aab';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/dashboard/_next/static/media/0ecabae3741772cf-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Albert_Sans_Fallback_544aab';src: local("Arial");ascent-override: 91.47%;descent-override: 24.07%;line-gap-override: 0.00%;size-adjust: 103.86%
}.__className_544aab {font-family: '__Albert_Sans_544aab', '__Albert_Sans_Fallback_544aab';font-style: normal
}.__variable_544aab {--font-geist: '__Albert_Sans_544aab', '__Albert_Sans_Fallback_544aab'
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Instrument_Serif","arguments":[{"subsets":["latin"],"weight":["400"],"style":["normal","italic"],"variable":"--font-instrument-serif","display":"swap"}],"variableName":"instrumentSerif"} ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: '__Instrument_Serif_3f0ed3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/dashboard/_next/static/media/5ece437c7024c161-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Instrument_Serif_3f0ed3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/dashboard/_next/static/media/9cc5b37ab1350db7-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: '__Instrument_Serif_3f0ed3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/dashboard/_next/static/media/35f3de0ebb1cfc70-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Instrument_Serif_3f0ed3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/dashboard/_next/static/media/e6099e249fd938cc-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Instrument_Serif_Fallback_3f0ed3';src: local("Times New Roman");ascent-override: 117.94%;descent-override: 36.93%;line-gap-override: 0.00%;size-adjust: 83.94%
}.__className_3f0ed3 {font-family: '__Instrument_Serif_3f0ed3', '__Instrument_Serif_Fallback_3f0ed3';font-weight: 400
}.__variable_3f0ed3 {--font-instrument-serif: '__Instrument_Serif_3f0ed3', '__Instrument_Serif_Fallback_3f0ed3'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"JetBrains_Mono","arguments":[{"subsets":["latin"],"weight":["400","500","600"],"variable":"--font-jetbrains","display":"swap"}],"variableName":"jetbrainsMono"} ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: '__JetBrains_Mono_e01552';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/dashboard/_next/static/media/edc640959b0c7826-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__JetBrains_Mono_e01552';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/dashboard/_next/static/media/ac0e76ddaeeb7981-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: '__JetBrains_Mono_e01552';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/dashboard/_next/static/media/64d784ea54a4acde-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: '__JetBrains_Mono_e01552';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/dashboard/_next/static/media/ff71da380fbe67dd-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__JetBrains_Mono_e01552';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/dashboard/_next/static/media/6d831b18ae5b01dc-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__JetBrains_Mono_e01552';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/dashboard/_next/static/media/558ca1a6aa3cb55e-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__JetBrains_Mono_e01552';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/dashboard/_next/static/media/edc640959b0c7826-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__JetBrains_Mono_e01552';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/dashboard/_next/static/media/ac0e76ddaeeb7981-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: '__JetBrains_Mono_e01552';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/dashboard/_next/static/media/64d784ea54a4acde-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: '__JetBrains_Mono_e01552';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/dashboard/_next/static/media/ff71da380fbe67dd-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__JetBrains_Mono_e01552';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/dashboard/_next/static/media/6d831b18ae5b01dc-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__JetBrains_Mono_e01552';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/dashboard/_next/static/media/558ca1a6aa3cb55e-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__JetBrains_Mono_e01552';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/dashboard/_next/static/media/edc640959b0c7826-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__JetBrains_Mono_e01552';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/dashboard/_next/static/media/ac0e76ddaeeb7981-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: '__JetBrains_Mono_e01552';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/dashboard/_next/static/media/64d784ea54a4acde-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: '__JetBrains_Mono_e01552';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/dashboard/_next/static/media/ff71da380fbe67dd-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__JetBrains_Mono_e01552';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/dashboard/_next/static/media/6d831b18ae5b01dc-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__JetBrains_Mono_e01552';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/dashboard/_next/static/media/558ca1a6aa3cb55e-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__JetBrains_Mono_Fallback_e01552';src: local("Arial");ascent-override: 75.79%;descent-override: 22.29%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_e01552 {font-family: '__JetBrains_Mono_e01552', '__JetBrains_Mono_Fallback_e01552';font-style: normal
}.__variable_e01552 {--font-jetbrains: '__JetBrains_Mono_e01552', '__JetBrains_Mono_Fallback_e01552'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/* Patchwork OS 2.0 — Design System
 * Warm cream light mode + dark mode, Albert Sans, dual nav
 */

:root {
  /* surfaces */
  --canvas:  #f3efe5;
  --surface: #fbf8f0;
  --recess:  #ece7d8;
  --pressed: #e0dac8;

  /* borders */
  --line-1: rgba(60,45,20,0.10);
  --line-2: rgba(60,45,20,0.18);
  --line-3: rgba(60,45,20,0.28);
  --line: var(--line-1);
  --line-strong: var(--line-2);

  /* text */
  --ink-0: #2a2418;
  --ink-1: #4a4030;
  --ink-2: #6e6450;
  --ink-3: #9a907a;
  --text-0: var(--ink-0);
  --text-1: var(--ink-1);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);

  /* brand */
  --orange:        #c5532a;
  --orange-hover:  #ab4622;
  --orange-soft:   rgba(197,83,42,0.13);
  --orange-tint:   rgba(197,83,42,0.24);
  --orange-rgb:    197, 83, 42;
  --accent-glow:   rgba(197,83,42,0.28);

  /* secondary palette */
  --purple:       #7a5b9c;
  --purple-hover: #684987;
  --purple-soft:  rgba(122,91,156,0.14);
  --green:        #5b8a4f;
  --green-soft:   rgba(91,138,79,0.15);
  --amber:        #c98e2b;
  --amber-soft:   rgba(201,142,43,0.16);
  --red:          #b54343;
  --red-soft:     rgba(181,67,67,0.14);
  --blue:         #4a6fa5;
  --blue-soft:    rgba(74,111,165,0.14);

  /* semantic aliases */
  --accent:        var(--orange);
  --accent-hover:  var(--orange-hover);
  --accent-soft:   var(--orange-soft);
  --accent-tint:   var(--orange-tint);
  --accent-strong: #9d3f20;
  --accent-rgb:    var(--orange-rgb);
  --ok:            var(--green);
  --ok-soft:       var(--green-soft);
  --warn:          var(--amber);
  --warn-soft:     var(--amber-soft);
  --err:           var(--red);
  --err-soft:      var(--red-soft);
  --info:          var(--blue);
  --info-soft:     var(--blue-soft);

  /* legacy dark-mode compat aliases */
  --bg-0: var(--canvas);
  --bg-1: var(--surface);
  --bg-2: var(--recess);
  --bg-3: var(--pressed);
  --bg-hover: var(--recess);
  --border-subtle:  var(--line-1);
  --border-default: var(--line-2);
  --border-strong:  var(--line-3);
  --fg-0: var(--ink-0);
  --fg-1: var(--ink-1);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);

  /* type */
  --font-sans: var(--font-geist, "Albert Sans"), ui-sans-serif, "SF Pro Text", "Segoe UI", sans-serif;
  --font-serif: var(--font-instrument-serif, "Instrument Serif"), ui-serif, Georgia, serif;
  --font-mono: var(--font-jetbrains, "JetBrains Mono"), ui-monospace, "SF Mono", Menlo, monospace;

  /* radii */
  --r-s:  6px;
  --r-m:  10px;
  --r-l:  14px;
  --r-xl: 20px;
  --r-1:  4px;
  --r-2:  6px;
  --r-3:  10px;
  --r-4:  14px;
  --r-full: 999px;
  --radius: 10px;

  /* shadows */
  --shadow-s: 0 1px 3px rgba(42,36,24,.07), 0 1px 2px rgba(42,36,24,.04);
  --shadow-m: 0 8px 24px rgba(42,36,24,.08), 0 2px 6px rgba(42,36,24,.04);
  --shadow-l: 0 20px 50px rgba(42,36,24,.15), 0 5px 16px rgba(42,36,24,.07);
  --shadow-1: var(--shadow-s);
  --shadow-2: var(--shadow-m);

  /* card glass */
  --card-bg:     rgba(251,248,240,0.82);
  --card-blur:   blur(36px) saturate(170%);
  --card-shadow: 0 1px 0 0 rgba(255,255,255,0.85) inset, var(--shadow-s);
  --card-shadow-hover: 0 1px 0 0 rgba(255,255,255,0.95) inset, 0 0 30px rgba(var(--orange-rgb),0.10), var(--shadow-l);

  /* glass */
  --glass-bg:     rgba(251,248,240,0.58);
  --glass-border: rgba(255,255,255,0.70);
  --glass-blur:   38px;
  --glass-blur-filter: blur(38px) saturate(175%);

  /* layout */
  --nav-w:    240px;
  --header-h: 56px;
  --transition: cubic-bezier(0.4, 0, 0.2, 1);
  --stitch-line: rgba(60,45,20,0.10);
  --quilt-soft: rgba(197,83,42,0.07);
  --aurora-1: rgba(197,83,42,0.05);
  --aurora-2: rgba(120,90,40,0.04);
  --aurora-3: rgba(160,120,60,0.04);
  --grid-mask-opacity: 0.55;
  --paper-grain:
    radial-gradient(circle at 13% 22%, rgba(120,90,40,0.025) 0, transparent 0.7px),
    radial-gradient(circle at 67% 41%, rgba(120,90,40,0.025) 0, transparent 0.7px),
    radial-gradient(circle at 89% 78%, rgba(120,90,40,0.025) 0, transparent 0.7px),
    radial-gradient(circle at 31% 89%, rgba(120,90,40,0.02) 0, transparent 0.7px),
    radial-gradient(circle at 52% 12%, rgba(120,90,40,0.02) 0, transparent 0.7px);

  /* spacing */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px;  --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px;
}

/* ---- Accent swap ---- */
[data-accent="purple"] {
  --orange:       #6b6bff;
  --orange-hover: #5a5ae6;
  --orange-soft:  #eeeeff;
  --orange-tint:  #d5d5ff;
  --orange-rgb:   107, 107, 255;
}
[data-accent="green"] {
  --orange:       #0d8a5e;
  --orange-hover: #0a7250;
  --orange-soft:  #e4f4ec;
  --orange-tint:  #b6e4d0;
  --orange-rgb:   13, 138, 94;
}

/* ---- Dark mode ---- */
[data-theme="dark"] {
  --canvas:  #0a0b0d;
  --surface: #101216;
  --recess:  #15181d;
  --pressed: #1c2026;
  --line-1:  rgba(255,255,255,0.08);
  --line-2:  rgba(255,255,255,0.16);
  --line-3:  rgba(255,255,255,0.24);
  --ink-0:   #f6f7f8;
  --ink-1:   #d4d6dc;
  --ink-2:   #a3a7b1;
  --ink-3:   #71757f;
  --orange:  #ff7a45;
  --orange-hover: #ff8f62;
  --orange-soft:  rgba(255,122,69,0.14);
  --orange-tint:  rgba(255,122,69,0.25);
  --orange-rgb: 255, 122, 69;
  --purple-soft:  #1c1b32;
  --green-soft:   #0e2519;
  --amber-soft:   #2b2110;
  --red-soft:     #2b1511;
  --blue-soft:    #101b2c;
  --accent-strong: #e8956e;
  --accent-glow: rgba(255,122,69,0.35);
  --stitch-line: rgba(255,255,255,0.05);
  --quilt-soft: rgba(255,122,69,0.06);
  --aurora-1: rgba(255,122,69,0.06);
  --aurora-2: rgba(110,168,254,0.05);
  --aurora-3: rgba(176,140,232,0.04);
  --grid-mask-opacity: 0.4;
  --paper-grain: none;

  --card-bg:     rgba(16,18,22,0.76);
  --card-shadow: 0 1px 0 0 rgba(255,255,255,0.1) inset, var(--shadow-s);
  --card-shadow-hover:
    inset 0 1px 0 0 rgba(255,255,255,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 0 0 1px rgba(0,0,0,0.18),
    0 3px 6px rgba(0,0,0,0.22),
    0 12px 28px rgba(0,0,0,0.24);
  --glass-bg:     rgba(16,18,22,0.58);
  --glass-border: rgba(255,255,255,0.1);

  --shadow-s: 0 1px 2px rgba(0,0,0,.25);
  --shadow-m: 0 2px 5px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.12);
  --shadow-l:
    inset 0 1px 0 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 0 1px rgba(0,0,0,0.16),
    0 1px 1px -0.5px rgba(0,0,0,0.18),
    0 3px 3px -1.5px rgba(0,0,0,0.18),
    0 6px 6px -3px rgba(0,0,0,0.18),
    0 12px 12px -6px rgba(0,0,0,0.18);
}

/* ---- Reset ---- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--canvas);
  color: var(--ink-0);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 200ms, color 200ms;
}

a {
  color: var(--orange);
  text-decoration: none;
}
a:hover { text-decoration: underline; color: var(--orange-hover); }

h1, h2, h3, h4 {
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--ink-0);
}
h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.25; }
h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; }
h3 { font-size: 15px; font-weight: 600; line-height: 1.4; }
h4 { font-size: 13px; font-weight: 600; line-height: 1.4; }

p { margin: 0; }
code, pre { font-family: var(--font-mono); }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

button { font-family: inherit; }

/* ---- Layout ---- */

.app-shell {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  grid-template-rows: var(--header-h) minmax(0, 1fr);
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--aurora-1), transparent 60%),
    var(--canvas);
}

/* ---- Sidebar ---- */

.app-sidebar {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background: color-mix(in srgb, var(--canvas) 90%, transparent);
  border-right: 1px solid var(--line);
  padding: 16px 12px;
  position: -webkit-sticky;
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

[data-theme="dark"] .app-sidebar {
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 8px 6px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink-0);
  margin-bottom: 2px;
  text-decoration: none;
}
.app-brand:hover { text-decoration: none; color: var(--ink-0); }

/* Sidebar "Create" button */
.sidebar-create {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 36px;
  border-radius: var(--r-m);
  background: var(--orange);
  border: none;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
  transition: background 200ms var(--transition), transform 120ms var(--transition), box-shadow 200ms var(--transition);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.35) inset, 0 2px 8px rgba(var(--orange-rgb), 0.3);
}
.sidebar-create::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 500ms ease;
  pointer-events: none;
  z-index: 0;
}
.sidebar-create:hover::before { left: 140%; }
.sidebar-create:hover {
  background: var(--orange-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.35) inset, 0 4px 16px rgba(var(--orange-rgb), 0.4);
}
.sidebar-create svg,
.sidebar-create span {
  position: relative;
  z-index: 1;
}
.sidebar-create:active { transform: translateY(0); }

.app-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1;
}

.app-nav-section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 14px 8px 4px;
}

.app-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-m);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  min-height: 34px;
  position: relative;
  transition: background 200ms var(--transition), color 200ms var(--transition), transform 200ms var(--transition);
}
.app-nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-m);
  background: rgba(var(--orange-rgb), 0.08);
  opacity: 0;
  transition: opacity 200ms var(--transition);
  pointer-events: none;
}
.app-nav-link:hover {
  background: var(--recess);
  color: var(--ink-0);
  transform: translateX(2px);
  text-decoration: none;
}
.app-nav-link:hover::before { opacity: 1; }
.app-nav-link.is-active {
  background: var(--recess);
  color: var(--ink-0);
  font-weight: 600;
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.5) inset, 0 0 0 1px rgba(var(--orange-rgb), 0.2);
}
.app-nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--orange);
  box-shadow: 0 0 8px rgba(var(--orange-rgb), 0.5);
}
.app-nav-link.is-active .app-nav-link-icon { color: var(--orange); }
[data-theme="dark"] .app-nav-link.is-active {
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.08) inset, 0 0 0 1px rgba(var(--orange-rgb), 0.3);
}
.app-nav-link-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 200ms var(--transition);
}

/* Nav badge (approval count) */
.nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.app-sidebar-footer {
  padding: 12px 8px 2px;
  border-top: 1px solid var(--line-1);
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 6px;
}
.app-sidebar-footer-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 300ms;
}
.app-sidebar-footer-dot.online {
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
  animation: pulse-ring 2.5s ease-in-out infinite;
}
.app-sidebar-footer-dot.offline { background: var(--ink-3); }

/* ---- Header / Topbar ---- */

.app-main {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  min-width: 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(600px 400px at 15% 20%, var(--aurora-2), transparent 60%),
    radial-gradient(500px 350px at 90% 70%, var(--aurora-1), transparent 65%),
    radial-gradient(400px 300px at 50% 110%, var(--aurora-3), transparent 60%),
    var(--paper-grain);
}

.app-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  opacity: var(--grid-mask-opacity);
  mask-image: radial-gradient(ellipse at top, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at top, black 30%, transparent 80%);
  pointer-events: none;
}

.app-main::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(720px 460px at 82% 0%, var(--aurora-1), transparent 62%),
    radial-gradient(520px 360px at 8% 58%, var(--aurora-2), transparent 65%);
  animation: aurora 18s ease-in-out infinite alternate;
  pointer-events: none;
}

.app-header {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  height: var(--header-h);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(32px) saturate(175%);
  -webkit-backdrop-filter: blur(32px) saturate(175%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
}

[data-theme="dark"] .app-header {
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1 1;
}

.app-header-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
}

.brand-mark {
  width: 22px;
  height: 22px;
  position: relative;
  flex-shrink: 0;
}
.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.brand-stitch {
  stroke-dasharray: 3 3;
  animation: stitch 4s linear infinite;
}

.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-0);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
}
.topbar-brand:hover {
  color: var(--ink-0);
  text-decoration: none;
}
.topbar-local {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--recess);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 7px;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.topbar-nav::-webkit-scrollbar { display: none; }

.topbar-link {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--r-s);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
  flex-shrink: 0;
}
.topbar-link:hover {
  background: var(--recess);
  color: var(--ink-0);
  text-decoration: none;
}
.topbar-link.is-active {
  background: var(--recess);
  color: var(--orange);
  font-weight: 600;
}

.topbar-search {
  flex: 1 1;
  max-width: 460px;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--recess);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  color: var(--ink-2);
  transition: border-color 160ms var(--transition), background 160ms var(--transition);
}
.topbar-search:hover {
  border-color: var(--line-strong);
}
.topbar-search input {
  min-width: 0;
  flex: 1 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink-0);
  font: inherit;
  font-size: 13px;
}
.topbar-search input::placeholder {
  color: var(--ink-3);
}
.kbd {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.6;
  background: var(--pressed);
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
}
.app-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.demo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r-s);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background 150ms var(--transition), color 150ms var(--transition), border-color 150ms var(--transition);
}
.demo-toggle:hover {
  background: var(--recess);
  color: var(--ink-0);
}
.demo-toggle.is-active {
  background: var(--orange-soft);
  color: var(--orange);
  border-color: var(--orange-tint);
}
.demo-toggle-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
}

.app-content {
  position: relative;
  z-index: 1;
  padding: 32px 36px 72px;
  max-width: 1400px;
  width: 100%;
  min-height: calc(100vh - var(--header-h));
}

/* ---- Page head ---- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.page-head h1 { margin-bottom: 4px; }
.page-head-sub { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }

/* ---- Cards ---- */

.card {
  background: var(--card-bg);
  border: 1px solid var(--line-1);
  border-radius: var(--r-l);
  padding: 22px;
  box-shadow: var(--card-shadow);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  position: relative;
  transition: transform 250ms var(--transition), box-shadow 250ms var(--transition), border-color 250ms var(--transition);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(var(--orange-rgb), 0.25);
}
.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* Mouse-tracking radial glow on cards */
.card::before,
.stat-card::before,
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(var(--orange-rgb), 0.12),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 300ms;
  pointer-events: none;
  z-index: 0;
}
.card:hover::before,
.stat-card:hover::before,
.glass-card:hover::before { opacity: 1; }
/* Ensure card children stack above the glow layer */
.card > *, .stat-card > *, .glass-card > * { position: relative; z-index: 1; }
[data-theme="dark"] .card::before,
[data-theme="dark"] .stat-card::before,
[data-theme="dark"] .glass-card::before { opacity: 0; }
[data-theme="dark"] .card:hover::before,
[data-theme="dark"] .stat-card:hover::before,
[data-theme="dark"] .glass-card:hover::before { opacity: 0.3; }

/* Border beam animation on cards */
.card.beam {
  overflow: hidden;
}
.card.beam::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from var(--beam-angle, 0deg) at 50% 50%,
    transparent 0deg,
    var(--orange) 60deg,
    transparent 120deg
  );
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.card.beam:hover::before {
  opacity: 0.12;
  animation: borderBeam 3s linear infinite;
}
[data-theme="dark"] .card.beam:hover::before {
  opacity: 0.2;
}
@keyframes borderBeam {
  to { --beam-angle: 360deg; }
}
@property --beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-l);
  backdrop-filter: var(--glass-blur-filter);
  -webkit-backdrop-filter: var(--glass-blur-filter);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.6) inset, var(--card-shadow);
  position: relative;
  transition: transform 250ms var(--transition), box-shadow 250ms var(--transition), border-color 250ms var(--transition);
}
[data-theme="dark"] .glass-card {
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.07) inset, var(--card-shadow);
}
.glass-card--hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(var(--orange-rgb), 0.25);
}

/* ---- Stat grid ---- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--line-1);
  border-radius: var(--r-l);
  padding: 20px 22px;
  display: block;
  color: inherit;
  box-shadow: var(--card-shadow);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  position: relative;
  overflow: hidden;
  transition: transform 200ms var(--transition), box-shadow 200ms var(--transition), border-color 200ms var(--transition);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(var(--orange-rgb), 0.3);
  text-decoration: none;
}
.stat-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--orange-soft);
  border: 1px solid var(--orange-tint);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  transition: box-shadow 200ms var(--transition), background 200ms var(--transition);
}
.stat-card:hover .stat-card-icon {
  box-shadow: 0 0 12px rgba(var(--orange-rgb), 0.35);
  background: var(--orange-tint);
}
[data-theme="dark"] .stat-card-icon {
  background: rgba(var(--orange-rgb), 0.12);
  border-color: rgba(var(--orange-rgb), 0.2);
}
[data-theme="dark"] .stat-card:hover .stat-card-icon {
  box-shadow: 0 0 14px rgba(var(--orange-rgb), 0.4);
  background: rgba(var(--orange-rgb), 0.2);
}
.stat-card-label {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.stat-card-value {
  font-size: 28px;
  font-weight: 800;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--ink-0);
  line-height: 1.1;
}
.stat-card-foot {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 4px;
}
.stat-card-delta {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--green);
}
.stat-card-delta.neutral { color: var(--ink-3); }

/* ---- Button ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-m);
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 150ms var(--transition), border-color 150ms var(--transition),
    transform 120ms var(--transition), box-shadow 150ms var(--transition);
  box-shadow: var(--shadow-s);
}
.btn:hover {
  background: var(--recess);
  border-color: var(--line-3);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }

.btn.primary {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.35) inset, 0 2px 8px rgba(var(--orange-rgb), 0.25), 0 0 20px rgba(var(--orange-rgb), 0.12);
}
.btn.primary::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 500ms ease;
}
.btn.primary:hover::before { left: 140%; }
.btn.primary:hover {
  background: var(--orange-hover);
  border-color: var(--orange-hover);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.35) inset, 0 4px 16px rgba(var(--orange-rgb), 0.4), 0 0 24px rgba(var(--orange-rgb), 0.18);
}

.btn.success {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.25) inset, 0 2px 6px rgba(13,138,94,.25);
}
.btn.success:hover { filter: brightness(1.08); }

.btn.danger {
  background: transparent;
  border-color: var(--line-2);
  color: var(--red);
  box-shadow: none;
}
.btn.danger:hover {
  background: var(--red-soft);
  border-color: var(--red);
  transform: translateY(0);
}

.btn.warn {
  background: transparent;
  border-color: var(--line-2);
  color: var(--amber);
  box-shadow: none;
}
.btn.warn:hover {
  background: var(--amber-soft);
  border-color: var(--amber);
  transform: translateY(0);
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.btn.ghost:hover {
  background: var(--recess);
  border-color: var(--line-1);
  transform: translateY(0);
}

.btn.sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 7px;
}

.btn.lg {
  height: 44px;
  padding: 0 20px;
  font-size: 15px;
  border-radius: var(--r-l);
}

/* btn-primary alias */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-m);
  font-size: 13.5px;
  font-weight: 600;
  border: none;
  background: var(--orange);
  color: #fff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.35) inset, 0 2px 8px rgba(var(--orange-rgb), 0.25);
  transition: background 150ms var(--transition), transform 120ms var(--transition), box-shadow 150ms var(--transition);
}
.btn-primary:hover {
  background: var(--orange-hover);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.35) inset, 0 4px 16px rgba(var(--orange-rgb), 0.4);
}
.btn-primary:active { transform: translateY(0); }

/* ---- Input ---- */

.input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-m);
  color: var(--ink-0);
  font-family: inherit;
  font-size: 13.5px;
  box-shadow: var(--shadow-s);
  transition: border-color 150ms, box-shadow 150ms;
}
.input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-soft), 0 0 12px rgba(var(--orange-rgb), 0.15);
}
[data-theme="dark"] .input:focus {
  box-shadow: 0 0 0 3px rgba(var(--orange-rgb), 0.18), 0 0 14px rgba(var(--orange-rgb), 0.2);
}
.input::placeholder { color: var(--ink-3); }

/* ---- Pill / Badge ---- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--recess);
  color: var(--ink-2);
  border: 1px solid var(--line-1);
  white-space: nowrap;
  line-height: 1;
}
.pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.pill.ok   { background: var(--green-soft); color: var(--green); border-color: transparent; }
.pill.warn { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.pill.err  { background: var(--red-soft);   color: var(--red);   border-color: transparent; }
.pill.info { background: var(--blue-soft);  color: var(--blue);  border-color: transparent; }
.pill.muted { color: var(--ink-3); background: var(--recess); border-color: transparent; }
/* ── VD-3: per-step hover diff panel ─────────────────────────────── */
/* Position is set inline (fixed coordinates from the anchor row's
 * getBoundingClientRect) — the panel renders into a React Portal at
 * document.body so it escapes the steps card's overflow:hidden clip
 * (BUG-1 from the post-merge dogfood). */
.step-diff-hover {
  z-index: 50;
  background: var(--bg-1, #1a1a1a);
  border: 1px solid var(--line-2, #333);
  border-radius: var(--r-2, 6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 12px 14px;
  max-height: 360px;
  overflow-y: auto;
  font-size: 12px;
  pointer-events: auto;
}
.step-diff-section { margin-bottom: 12px; }
.step-diff-section:last-child { margin-bottom: 0; }
.step-diff-heading {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.step-diff-value {
  background: var(--recess, #0d0d0d);
  border: 1px solid var(--line-2, #333);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
}
.step-diff-empty {
  color: var(--ink-3, #666);
  font-style: italic;
  font-size: 11px;
}
.step-diff-group { margin-bottom: 8px; }
.step-diff-group-label {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
}
.step-diff-added    { color: var(--green, #4ade80); }
.step-diff-modified { color: var(--amber, #fbbf24); }
.step-diff-removed  { color: var(--red, #f87171); }
.step-diff-row {
  display: flex;
  gap: 12px;
  padding: 2px 0;
  font-size: 11px;
}
.step-diff-key {
  flex-shrink: 0;
  color: var(--ink-1, #ddd);
  font-weight: 500;
  min-width: 80px;
}
.step-diff-value-inline {
  color: var(--ink-2, #888);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pill.running {
  background: var(--blue-soft);
  color: var(--blue);
  border-color: transparent;
  position: relative;
  padding-left: 18px;
}
.pill.running::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--blue);
  animation: pill-pulse 1.4s ease-in-out infinite;
}
@keyframes pill-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* Prototype color name aliases */
.pill.green  { background: var(--green-soft);  color: var(--green);  border-color: transparent; }
.pill.amber  { background: var(--amber-soft);  color: var(--amber);  border-color: transparent; }
.pill.purp   { background: var(--purple-soft); color: var(--purple); border-color: transparent; }
.pill.red    { background: var(--red-soft);    color: var(--red);    border-color: transparent; }
.pill.blue   { background: var(--blue-soft);   color: var(--blue);   border-color: transparent; }

/* round variant for nav/count chips */
.pill.round { border-radius: 999px; }

/* ---- Connector dot (marketplace + health panel) ---- */
.connector-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
  flex-shrink: 0;
}

/* ---- Tag pill (marketplace recipe tags) ---- */
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: var(--recess);
  color: var(--ink-3);
  border: 1px solid var(--line-1);
  white-space: nowrap;
  line-height: 1.4;
}

/* ---- Bridge status pill ---- */

.bridge-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid rgba(13,138,94,.2);
  white-space: nowrap;
}
.bridge-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-ring 2.5s ease-in-out infinite;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(13,138,94,0.2);
}

/* ---- Table ---- */

.table-wrap {
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  border: 1px solid var(--line-1);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: var(--recess);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-1);
  z-index: 1;
}
.table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-1);
  color: var(--ink-1);
  vertical-align: top;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--recess); }
.table .mono { font-family: var(--font-mono); font-size: 12px; color: var(--ink-1); }
.table .muted { color: var(--ink-3); }

/* .tbl — prototype alias for .table */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.tbl thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: var(--recess);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-1);
  z-index: 1;
}
.tbl tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-1);
  color: var(--ink-1);
  vertical-align: top;
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--recess); }

/* ---- Empty / Error ---- */

.empty-state {
  text-align: center;
  padding: 56px 24px;
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-l);
  color: var(--ink-2);
  animation: fade-in 300ms ease;
}

/* Prototype alias for .empty-state */
.empty {
  text-align: center;
  padding: 72px 28px;
  background: transparent;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-l);
  color: var(--ink-2);
  animation: fadeInUp 400ms ease;
}
.empty-state h3 { color: var(--ink-1); margin-bottom: 8px; }
.empty-state code {
  background: var(--recess);
  padding: 2px 6px;
  border-radius: var(--r-1);
  color: var(--ink-0);
  font-size: 12px;
}

.alert-err {
  padding: 12px 16px;
  background: var(--red-soft);
  color: var(--red);
  border: 1px solid rgba(192,40,31,.2);
  border-radius: var(--r-m);
  font-size: 13px;
  margin-bottom: 16px;
}

/* ---- Progress ---- */

.progress {
  height: 6px;
  background: var(--recess);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--orange);
  position: relative;
  overflow: hidden;
  transition: width 600ms var(--transition);
}
.progress-fill::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 2s ease infinite;
}

/* ---- Approval cards ---- */

.approval-list { display: grid; grid-gap: 16px; gap: 16px; }
.approval {
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  border: 1px solid var(--line-1);
  border-radius: var(--r-l);
  padding: 20px;
  box-shadow: var(--card-shadow);
  transition: transform 200ms var(--transition), box-shadow 200ms var(--transition);
}
.approval:hover {
  transform: translateY(-1px);
  box-shadow: var(--card-shadow-hover);
}
.approval-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.approval-head h3 { font-family: var(--font-mono); font-size: 14px; }
.approval-summary { color: var(--ink-1); font-size: 13.5px; margin-bottom: 12px; }
.approval-primary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 12px 0;
  padding: 8px 12px;
  background: var(--recess);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--r-s) var(--r-s) 0;
}
.approval-primary-label {
  font-size: 10.5px;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 700;
}
.approval-primary-value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-0);
  word-break: break-all;
  white-space: pre-wrap;
}
.approval-params-wrap { margin: 12px 0; }
.approval-params-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--ink-2);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}
.approval-params-toggle:hover { color: var(--ink-1); }
.approval-params-json {
  margin-top: 8px;
  background: var(--recess);
  border: 1px solid var(--line-1);
  padding: 12px;
  border-radius: var(--r-s);
  font-size: 12px;
  max-height: 300px;
  overflow: auto;
  color: var(--ink-1);
  -moz-tab-size: 2;
       tab-size: 2;
}
.approval-actions { display: flex; gap: 8px; margin-top: 16px; }

.approval.fading-out {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}
.approval-spacer { flex: 1 1; }
.countdown { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 12px; }
.countdown.urgent { color: var(--amber); font-weight: 600; }

/* ---- Activity ---- */

.activity-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.activity-toolbar .input { max-width: 320px; }

.status-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.status-cell.ok  { color: var(--green); }
.status-cell.err { color: var(--red); }

/* ---- Tasks ---- */

.task-row-expand { background: var(--recess); }
.task-output {
  margin: 0;
  padding: 12px 16px;
  background: var(--recess);
  border-top: 1px solid var(--line-1);
  font-size: 12px;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--ink-1);
}

/* ---- Metrics ---- */

.metrics-group { margin-bottom: 32px; }
.metrics-group-title {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-2);
  margin-bottom: 12px;
  font-weight: 700;
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.metric-card {
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  border: 1px solid var(--line-1);
  border-radius: var(--r-l);
  padding: 16px;
  box-shadow: var(--card-shadow);
}
.metric-card-name {
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 8px;
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metric-card-value {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--ink-0);
}
.metric-card ul { list-style: none; padding: 0; margin: 0; }
.metric-card li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
  font-family: var(--font-mono);
  font-size: 12px;
}
.metric-card li .key {
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 65%;
}
.metric-card li .val { color: var(--ink-0); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ---- Decision rows ---- */

.decision-row {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-m);
  text-decoration: none;
  color: inherit;
  border-left: 3px solid var(--orange);
  background: var(--surface);
  border-top: 1px solid var(--line-1);
  border-right: 1px solid var(--line-1);
  border-bottom: 1px solid var(--line-1);
  overflow: hidden;
  transition: background 120ms;
}
.decision-row:hover { background: var(--recess); text-decoration: none; }
.decision-row-accent { border-left-color: var(--orange); }
.decision-row-info   { border-left-color: var(--blue); }
.decision-row-warn   { border-left-color: var(--amber); }
.decision-row-err    { border-left-color: var(--red); }

/* ---- Filter chips ---- */

.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filter-chip {
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  transition: background 100ms, color 100ms, border-color 100ms, transform 100ms;
}
.filter-chip:hover { color: var(--ink-0); border-color: var(--line-3); transform: translateY(-1px); }
.filter-chip.active {
  background: var(--orange-soft);
  color: var(--orange);
  border-color: var(--orange-tint);
  box-shadow: 0 0 10px rgba(var(--orange-rgb), 0.18);
}

/* ---- Theme toggle ---- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-m);
  border: 1px solid var(--line-1);
  background: var(--surface);
  cursor: pointer;
  color: var(--ink-2);
  position: relative;
  transition: background 120ms, color 120ms, border-color 120ms;
  box-shadow: var(--shadow-s);
}
.theme-toggle:hover { background: var(--recess); color: var(--ink-0); border-color: var(--line-2); }
.theme-toggle-auto {
  position: absolute;
  right: -3px;
  bottom: -3px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--pressed);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1;
  padding: 2px 3px;
  pointer-events: none;
}

/* ---- Animations ---- */

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  60%  { box-shadow: 0 0 0 4px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
}

@keyframes aurora {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.9; }
  50% { transform: translate3d(2%, -1%, 0) scale(1.05); opacity: 1; }
  100% { transform: translate3d(-1%, 2%, 0) scale(0.98); opacity: 0.85; }
}

@keyframes stitch {
  to { stroke-dashoffset: -24; }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 140%; }
}

/* ---- ConnectorCard ---- */
.connector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

/* ---- Marketplace / template card ---- */
.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 14px;
  gap: 14px;
}
.template-card {
  display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 14px;
  background: var(--card-bg);
  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
  border: 1px solid var(--line-1); border-radius: var(--r-l);
  box-shadow: var(--card-shadow);
  transition: transform 220ms var(--transition), box-shadow 220ms var(--transition), border-color 220ms var(--transition);
}
.template-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(var(--orange-rgb), 0.25);
}

/* ---- Custom scrollbars ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--line-2); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

/* ============================================================ */
/* Patchwork 2.0 layout primitives                                */
/* ============================================================ */

/* ---- Section header ---- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.section-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-0);
  letter-spacing: -0.005em;
}
.section-link {
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 500;
  transition: color 150ms ease;
}
.section-link:hover {
  color: var(--orange);
  text-decoration: none;
}
.page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ---- Editorial page heading (Instrument Serif accent) ---- */
.editorial-h1 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--ink-0);
  margin: 0 0 6px;
}
.editorial-h1 .accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--orange);
  letter-spacing: 0;
}
.editorial-h1 .num {
  color: var(--orange);
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.editorial-sub {
  color: var(--ink-2);
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  margin: 0;
}

/* ---- Grids ---- */
.grid { display: grid; grid-gap: 16px; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2-3 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .grid-2, .grid-3, .grid-4, .grid-2-3 { grid-template-columns: 1fr; }
}

/* ---- Quilt hero ---- */
.quilt {
  position: relative;
  border: 1px solid var(--line-1);
  border-radius: var(--r-l);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  box-shadow: var(--card-shadow);
  margin-bottom: 28px;
  min-height: 220px;
}
.quilt-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.85;
}
.quilt-bg svg {
  width: 100%;
  height: 100%;
  display: block;
}
.quilt-content {
  position: relative;
  z-index: 2;
  padding: 28px 32px 26px;
  max-width: 720px;
}
.quilt-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--surface) 35%, color-mix(in srgb, var(--surface) 55%, transparent) 75%, transparent 100%);
  z-index: -1;
}
[data-theme="dark"] .quilt-content::before {
  background: linear-gradient(to right, var(--surface) 35%, color-mix(in srgb, var(--surface) 60%, transparent) 75%, transparent 100%);
}
.quilt-greeting {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.quilt-title {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.018em;
  color: var(--ink-0);
  margin: 0 0 14px;
}
.quilt-title .num {
  color: var(--orange);
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.quilt-title .accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--orange);
  letter-spacing: 0;
}
.quilt-summary {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 540px;
  margin: 0 0 18px;
}
.quilt-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 12px;
  color: var(--ink-2);
}
.quilt-stats b {
  color: var(--ink-0);
  font-weight: 600;
  font-family: var(--font-mono);
}

/* ---- Weather (stitched-seam gauge) ---- */
.weather {
  position: relative;
  z-index: 2;
  align-self: stretch;
  width: 280px;
  padding: 22px 24px;
  border-left: 1px solid var(--line-1);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.weather-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.weather-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  font-weight: 600;
}
.weather-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--green);
  font-weight: 600;
}
.dot-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-live 1.6s ease-in-out infinite;
}
@keyframes pulse-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91,138,79,0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(91,138,79,0); }
}
.weather-readout {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.weather-pct {
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--ink-0);
  letter-spacing: -0.03em;
  line-height: 1;
}
.weather-pct-unit {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--ink-2);
  font-weight: 600;
}
.weather-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--green);
  font-weight: 600;
}
.weather-seam {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-gap: 2px;
  gap: 2px;
}
.weather-seam .stitch {
  height: 8px;
  border-radius: 2px;
  background: var(--orange);
  opacity: 0.95;
}
.weather-seam .stitch.off {
  background: var(--line-2);
  opacity: 0.5;
}
.weather-trend { display: flex; flex-direction: column; gap: 4px; }
.weather-trend-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}
.weather-mood {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-2);
  flex-wrap: wrap;
}
.weather-mood em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-1);
}
.weather-mood-divider {
  width: 1px;
  height: 10px;
  background: var(--line-2);
}
.weather-mood-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
@media (max-width: 900px) {
  .quilt { grid-template-columns: 1fr; }
  .weather { width: auto; border-left: 0; border-top: 1px solid var(--line-1); }
}

/* ---- Chip (2.0 small inline pills) ---- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: var(--recess);
  color: var(--ink-1);
  border: 1px solid var(--line-1);
  white-space: nowrap;
  line-height: 1.4;
}
.chip .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.chip-accent { background: var(--orange-soft); color: var(--orange); border-color: var(--orange-tint); }
.chip-green  { background: var(--green-soft); color: var(--green); border-color: transparent; }
.chip-amber  { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.chip-red    { background: var(--red-soft);   color: var(--red);   border-color: transparent; }
.chip-blue   { background: var(--blue-soft);  color: var(--blue);  border-color: transparent; }
.chip-purple { background: var(--purple-soft); color: var(--purple); border-color: transparent; }
.chip-muted  { background: var(--recess); color: var(--ink-3); border-color: transparent; }

/* ---- Thread (activity feed rows) ---- */
.thread {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.thread-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--r-s);
  font-size: 12.5px;
  color: var(--ink-1);
  animation: fadeInUp 320ms ease both;
  transition: background 120ms ease;
}
.thread-item:nth-child(odd) { background: rgba(0,0,0,0.015); }
[data-theme="dark"] .thread-item:nth-child(odd) { background: rgba(255,255,255,0.02); }
.thread-item:hover { background: var(--recess); }
.thread-item.error .thread-title { color: var(--red); }
.thread-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.thread-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thread-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

/* ---- Code block (YAML preview) ---- */
.code-block {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.65;
  background: var(--recess);
  border: 1px solid var(--line-1);
  border-radius: var(--r-s);
  padding: 12px 14px;
  color: var(--ink-1);
  overflow-x: auto;
  -moz-tab-size: 2;
       tab-size: 2;
}
.yaml-key     { color: var(--purple); }
.yaml-string  { color: var(--green); }
.yaml-comment { color: var(--ink-3); font-style: italic; }
[data-theme="dark"] .yaml-key { color: #b08ce8; }
[data-theme="dark"] .yaml-string { color: #5fc88f; }

/* ---- Spinner ---- */
.spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  border-top-color: var(--orange);
  animation: spinner-spin 700ms linear infinite;
  flex-shrink: 0;
}
@keyframes spinner-spin { to { transform: rotate(360deg); } }

/* ---- Toggle switch ---- */
.toggle {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: var(--line-2);
  cursor: pointer;
  transition: background 200ms ease;
  flex-shrink: 0;
  border: none;
  padding: 0;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: transform 200ms cubic-bezier(.2,.7,.2,1);
}
.toggle.on { background: var(--orange); }
.toggle.on::after { transform: translateX(14px); }

/* ---- Connector logo tile ---- */
.connector-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: #fff;
  flex-shrink: 0;
}

/* ---- Editorial demo banner (2.0 style) ---- */
.demo-banner {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  font-size: 12px;
  color: var(--ink-1);
  background: linear-gradient(90deg, var(--orange-soft) 0%, color-mix(in srgb, var(--orange-soft) 40%, transparent) 100%);
  border-bottom: 1px solid var(--orange-tint);
}
.demo-banner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--orange);
}
.demo-banner-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulse-live 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.demo-banner-text { flex: 1 1; min-width: 0; }
.demo-banner-text strong {
  color: var(--orange);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 6px;
}
.demo-banner-cta {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  transition: background 150ms ease;
}
.demo-banner-cta:hover {
  background: var(--orange-hover);
  color: #fff;
  text-decoration: none;
}

/* ---- Mobile responsive (≤768px) ----
   The sidebar collapses to an off-canvas drawer with a hamburger toggle in
   the header. Backdrop scrim closes the drawer on tap. */

.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--r-s);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-1);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms var(--transition);
}
.mobile-menu-btn:hover { background: var(--recess); }

.mobile-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgba(0, 0, 0, 0.32);
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--transition);
}

@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-h) minmax(0, 1fr);
  }
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(82vw, 320px);
    height: 100vh;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 220ms var(--transition);
    box-shadow: var(--shadow-l);
  }
  .app-shell.mobile-open .app-sidebar {
    transform: translateX(0);
  }
  .mobile-scrim {
    display: block;
  }
  .app-shell.mobile-open .mobile-scrim {
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-menu-btn {
    display: inline-flex;
  }
  .app-header {
    padding: 0 14px;
  }
  .app-header-left {
    gap: 12px;
  }
  .topbar-brand span:not(.topbar-local) {
    display: none;
  }
  .topbar-local,
  .topbar-search,
  .demo-toggle,
  .bridge-status-pill {
    display: none;
  }
  .app-header-title {
    font-size: 13px;
  }
  /* Hide the section/topbar nav on mobile — drawer handles it. */
  .topbar-nav {
    display: none;
  }
  .app-content {
    padding: 16px;
  }
  .app-main {
    grid-column: 1 / 2;
  }
}