/* Biomass ANVA Tahap 22.13 production-locked canonical CSS bundle. No runtime imports.
 * Legacy source modules below are bundled compatibility sources, not separate runtime requests.
 * Source order: anva-foundation.css -> anva-components.css -> anva-compositions.css -> anva-visualization.css -> project.css -> core-components.css -> role-dashboard.css -> operational-pages.css -> workspace-shell.css -> mobile-contract.css -> tablet-contract.css -> desktop-contract.css -> ui-polish.css -> auth-experience.css
 * Purpose: production-locked foundation/component/compatibility bundle.
 */

/* ===== SOURCE: anva-foundation.css ===== */
/*
 * ANVA UI Foundation — Tahap 20.1
 * Canonical source for reset, semantic tokens, base type and low-level utilities.
 * Feature CSS may consume these tokens but must not redefine the foundation contract.
 */
@layer reset, tokens, base, utilities, components, compositions, visualization, project;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding: 0; }
  img, picture, svg, canvas, video { display: block; max-width: 100%; }
  button, input, textarea, select { font: inherit; }
  button, [role="button"] { -webkit-tap-highlight-color: transparent; }
  table { border-collapse: collapse; border-spacing: 0; }
}

@layer tokens {
  :root {
    color-scheme: light;

    /* Typography */
    --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --font: var(--font-sans);
    --mono: var(--font-mono);

    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-body: 1rem;
    --text-lg: 1.125rem;
    --text-title-3: 1.25rem;
    --text-title-2: 1.5rem;
    --text-title-1: 2rem;
    --text-display: 2.5rem;

    --leading-tight: 1.18;
    --leading-title: 1.25;
    --leading-body: 1.6;
    --tracking-tight: -.02em;
    --tracking-label: .08em;

    --weight-regular: 400;
    --weight-medium: 560;
    --weight-semibold: 650;
    --weight-bold: 760;
    --weight-heavy: 820;

    /* Spacing: 4px base rhythm */
    --space-0: 0;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Shape */
    --radius-sm: .5rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-pill: 999px;

    /* Neutral-first visual language */
    --color-canvas: #f7f7f5;
    --color-surface: #ffffff;
    --color-surface-subtle: #f3f3f1;
    --color-surface-muted: #ececea;
    --color-surface-inverse: #202123;
    --color-text: #202123;
    --color-text-muted: #626466;
    --color-text-subtle: #8a8c8e;
    --color-text-inverse: #ffffff;
    --color-border: #e2e2de;
    --color-border-strong: #d2d2cc;

    /* Action is deliberately neutral. Biomass is an accent, not the whole UI. */
    --color-action: #303030;
    --color-action-hover: #171717;
    --color-action-soft: #efefec;
    --color-action-border: #c8c8c2;
    --color-biomass: #a85f2a;
    --color-biomass-soft: #f8ece2;

    /* Semantic feedback */
    --color-success: #287a55;
    --color-success-soft: #e7f4ec;
    --color-warning: #9a691d;
    --color-warning-soft: #fbf2dd;
    --color-danger: #b5473f;
    --color-danger-soft: #faeae8;
    --color-info: #416f9c;
    --color-info-soft: #eaf1f8;


    /* Tahap 21 centralized compatibility palette.
     * These values preserve existing page art direction while removing raw-color ownership
     * from feature/component styles. New work should prefer semantic tokens above. */
    --palette-051f17: #051f17;
    --palette-06251b: #06251b;
    --palette-071d15: #071d15;
    --palette-082d20: #082d20;
    --palette-0a4733: #0a4733;
    --palette-0b3828: #0b3828;
    --palette-0b3a2a: #0b3a2a;
    --palette-0c2f24: #0c2f24;
    --palette-0d3327: #0d3327;
    --palette-0f3c2d: #0f3c2d;
    --palette-0f6b4b: #0f6b4b;
    --palette-101412: #101412;
    --palette-10231b: #10231b;
    --palette-102a21: #102a21;
    --palette-126047: #126047;
    --palette-14553e: #14553e;
    --palette-151817: #151817;
    --palette-153b31: #153b31;
    --palette-154b38: #154b38;
    --palette-17261f: #17261f;
    --palette-173428: #173428;
    --palette-174c38: #174c38;
    --palette-174f3d: #174f3d;
    --palette-176845: #176845;
    --palette-185b45: #185b45;
    --palette-1c7750: #1c7750;
    --palette-1d8561: #1d8561;
    --palette-1e2221: #1e2221;
    --palette-1f674c: #1f674c;
    --palette-202322: #202322;
    --palette-202523: #202523;
    --palette-232826: #232826;
    --palette-234f42: #234f42;
    --palette-23724f: #23724f;
    --palette-237651: #237651;
    --palette-24a776: #24a776;
    --palette-286b54: #286b54;
    --palette-2e5e4f: #2e5e4f;
    --palette-2f6f56: #2f6f56;
    --palette-2f795c: #2f795c;
    --palette-2f7c5f: #2f7c5f;
    --palette-303634: #303634;
    --palette-31583f: #31583f;
    --palette-326149: #326149;
    --palette-34715c: #34715c;
    --palette-3b6558: #3b6558;
    --palette-44554d: #44554d;
    --palette-49685a: #49685a;
    --palette-4ba377: #4ba377;
    --palette-4c7d6d: #4c7d6d;
    --palette-525957: #525957;
    --palette-557166: #557166;
    --palette-567164: #567164;
    --palette-56cb92: #56cb92;
    --palette-5d7067: #5d7067;
    --palette-5f7168: #5f7168;
    --palette-64756d: #64756d;
    --palette-66706d: #66706d;
    --palette-66756d: #66756d;
    --palette-667e73: #667e73;
    --palette-66b78e: #66b78e;
    --palette-6e8d82: #6e8d82;
    --palette-6f8c80: #6f8c80;
    --palette-708078: #708078;
    --palette-718078: #718078;
    --palette-73d5ad: #73d5ad;
    --palette-75847c: #75847c;
    --palette-779789: #779789;
    --palette-78877f: #78877f;
    --palette-78d8aa: #78d8aa;
    --palette-7a8982: #7a8982;
    --palette-7b8481: #7b8481;
    --palette-7b8982: #7b8982;
    --palette-7b8a82: #7b8a82;
    --palette-7b8b82: #7b8b82;
    --palette-7bd0a7: #7bd0a7;
    --palette-7d8b84: #7d8b84;
    --palette-7e8c85: #7e8c85;
    --palette-7fc9a5: #7fc9a5;
    --palette-7fd8ad: #7fd8ad;
    --palette-829089: #829089;
    --palette-82c7a7: #82c7a7;
    --palette-839089: #839089;
    --palette-858e8b: #858e8b;
    --palette-85a095: #85a095;
    --palette-86948d: #86948d;
    --palette-876749: #876749;
    --palette-87948e: #87948e;
    --palette-89958f: #89958f;
    --palette-89968f: #89968f;
    --palette-8a521a: #8a521a;
    --palette-8a9390: #8a9390;
    --palette-8b9892: #8b9892;
    --palette-8c9993: #8c9993;
    --palette-8cd8b4: #8cd8b4;
    --palette-8de0b8: #8de0b8;
    --palette-8f6614: #8f6614;
    --palette-8fc9ad: #8fc9ad;
    --palette-905a22: #905a22;
    --palette-909795: #909795;
    --palette-909c96: #909c96;
    --palette-91a99e: #91a99e;
    --palette-91d9bc: #91d9bc;
    --palette-936b2f: #936b2f;
    --palette-96deb9: #96deb9;
    --palette-978f72: #978f72;
    --palette-97a39d: #97a39d;
    --palette-97e1bb: #97e1bb;
    --palette-983a34: #983a34;
    --palette-99b6a8: #99b6a8;
    --palette-9bb8aa: #9bb8aa;
    --palette-9c554b: #9c554b;
    --palette-9ce2c1: #9ce2c1;
    --palette-9db4a9: #9db4a9;
    --palette-9ed5ba: #9ed5ba;
    --palette-9f413a: #9f413a;
    --palette-a0a7a5: #a0a7a5;
    --palette-a6adab: #a6adab;
    --palette-a6bdb2: #a6bdb2;
    --palette-a74d45: #a74d45;
    --palette-a8bdb3: #a8bdb3;
    --palette-a9b8b0: #a9b8b0;
    --palette-a9beb4: #a9beb4;
    --palette-aabdb4: #aabdb4;
    --palette-aacfb9: #aacfb9;
    --palette-aeb5b3: #aeb5b3;
    --palette-aee1c7: #aee1c7;
    --palette-alpha-03384cae: rgba(255,255,255,.035);
    --palette-alpha-039ce9ea: rgba(255,255,255,.075);
    --palette-alpha-05285c47: rgba(16,35,27,.14);
    --palette-alpha-08f25b72: rgba(255,255,255,.68);
    --palette-alpha-0b1f9b16: rgba(255,255,255,.58);
    --palette-alpha-0b2af582: rgba(255,255,255,.55);
    --palette-alpha-18c7f924: rgba(244,247,245,.9);
    --palette-alpha-1f523d72: rgba(255,255,255,.08);
    --palette-alpha-207628a0: rgba(255,255,255,.018);
    --palette-alpha-21171e98: rgba(12,50,35,.04);
    --palette-alpha-217bdf37: rgba(86,203,146,.08);
    --palette-alpha-2282bd64: rgba(180,40,40,.25);
    --palette-alpha-2479bba4: rgba(247,251,249,.72);
    --palette-alpha-28e9e123: rgba(255,255,255,.16);
    --palette-alpha-2b6936e9: rgba(255,255,255,.07);
    --palette-alpha-2e12017e: rgba(255,255,255,.62);
    --palette-alpha-2e237837: rgba(32,33,35,.10);
    --palette-alpha-331d914f: rgba(15,107,75,.15);
    --palette-alpha-3437f9d3: rgba(255,255,255,.74);
    --palette-alpha-34a33cde: rgba(2,22,15,.2);
    --palette-alpha-372f3d7b: rgba(247,247,245,.90);
    --palette-alpha-380a83fb: rgba(255,255,255,.6);
    --palette-alpha-38a830cf: rgba(95,211,153,.18);
    --palette-alpha-3a90860f: rgba(13,55,38,.05);
    --palette-alpha-4a0eedf6: rgba(255,255,255,.72);
    --palette-alpha-4cbafdab: rgba(247,251,249,.6);
    --palette-alpha-4f2aa241: rgba(251,252,251,.94);
    --palette-alpha-58a79553: rgba(15,107,75,.018);
    --palette-alpha-59a7043d: rgba(255,255,255,.5);
    --palette-alpha-5c341e04: rgba(32,113,79,.22);
    --palette-alpha-5cde18fc: rgba(15,107,75,.08);
    --palette-alpha-5db79f6a: rgba(24,31,29,.09);
    --palette-alpha-5e8bce57: rgba(255,255,255,.96);
    --palette-alpha-65f4872b: rgba(15,54,39,.05);
    --palette-alpha-660bcdf3: rgba(91,222,159,.17);
    --palette-alpha-69f4521c: rgba(64,118,99,.1);
    --palette-alpha-69f7f977: rgba(15,107,75,.35);
    --palette-alpha-6cb18787: rgba(127,216,173,.2);
    --palette-alpha-6d8d9cf5: rgba(22,28,26,.09);
    --palette-alpha-6dbcde7d: rgba(92,104,84,.12);
    --palette-alpha-6e671185: rgba(16,35,27,.10);
    --palette-alpha-6fb63a02: rgba(32,113,79,.28);
    --palette-alpha-7149d092: rgba(11,74,51,.16);
    --palette-alpha-725b309e: rgba(13,51,36,.05);
    --palette-alpha-7458e199: rgba(235,246,240,.82);
    --palette-alpha-7dc03103: rgba(0,0,0,.18);
    --palette-alpha-82078883: rgba(235,246,240,.9);
    --palette-alpha-822f8621: rgba(255,255,255,.9);
    --palette-alpha-862fa3ac: rgba(44,139,99,.12);
    --palette-alpha-86939c19: rgba(255,255,255,.66);
    --palette-alpha-887c5583: rgba(15,49,36,.12);
    --palette-alpha-8b4f0bc5: rgba(15,107,75,.30);
    --palette-alpha-8dd4404c: rgba(255,255,255,.42);
    --palette-alpha-90f3e5a4: rgba(255,255,255,.055);
    --palette-alpha-976fd8ce: rgba(127,216,173,.16);
    --palette-alpha-9b4e1218: rgba(14,52,37,.07);
    --palette-alpha-a7d3886b: rgba(32, 33, 35, .015);
    --palette-alpha-a833e54c: rgba(12,47,36,.06);
    --palette-alpha-aa3526e2: rgba(78,196,140,.11);
    --palette-alpha-b239cee8: rgba(255,255,255,.65);
    --palette-alpha-b6c2bd30: rgba(15,107,75,.3);
    --palette-alpha-b7866c60: rgba(115,213,173,.11);
    --palette-alpha-b8ec4010: rgba(226,226,222,.88);
    --palette-alpha-c16db71c: rgba(15,107,75,.24);
    --palette-alpha-c4d8d200: rgba(255,255,255,.065);
    --palette-alpha-c843a09e: rgba(255,255,255,.15);
    --palette-alpha-c8a32b0c: rgba(16,45,33,.045);
    --palette-alpha-cb67768b: rgba(180,40,40,.2);
    --palette-alpha-d0665947: rgba(16,45,33,.07);
    --palette-alpha-d1c4d5df: rgba(14,52,37,.08);
    --palette-alpha-d2a2e110: rgba(255,255,255,.12);
    --palette-alpha-d32a792c: rgba(16,45,33,.035);
    --palette-alpha-d4019b9d: rgba(16,45,33,.08);
    --palette-alpha-d9f067ac: rgba(255,255,255,.1);
    --palette-alpha-da319535: rgba(15,54,39,.045);
    --palette-alpha-daa58272: rgba(128,227,178,.35);
    --palette-alpha-daac4d76: rgba(255,255,255,.75);
    --palette-alpha-dc875aa5: rgba(74,192,139,.2);
    --palette-alpha-dc96b382: rgba(32,33,35,.04);
    --palette-alpha-e01753f7: rgba(255,255,255,.56);
    --palette-alpha-e1930cc4: rgba(27,34,31,.12);
    --palette-alpha-e2464f6e: rgba(12,47,36,.22);
    --palette-alpha-e28478e8: rgba(255,255,255,.7);
    --palette-alpha-e593d048: rgba(255,255,255,.84);
    --palette-alpha-e99c0140: rgba(247,251,249,.62);
    --palette-alpha-eed7c196: rgba(255,255,255,.025);
    --palette-alpha-f008f49d: rgba(16,35,27,.08);
    --palette-alpha-f72b43aa: rgba(91,213,151,.14);
    --palette-alpha-f9598b49: rgba(32, 33, 35, .05);
    --palette-alpha-fc1814f2: rgba(8,45,32,.24);
    --palette-alpha-fe456906: rgba(68,201,140,.13);
    --palette-alpha-fea9d4cc: rgba(15,107,75,.2);
    --palette-alpha-ffbe27ee: rgba(15,107,75,.025);
    --palette-b5c9bf: #b5c9bf;
    --palette-b76457: #b76457;
    --palette-b7efd3: #b7efd3;
    --palette-b8b8b2: #b8b8b2;
    --palette-b8d3c4: #b8d3c4;
    --palette-b8e8d2: #b8e8d2;
    --palette-b8efd2: #b8efd2;
    --palette-bae0ca: #bae0ca;
    --palette-bcc5c2: #bcc5c2;
    --palette-bdcec4: #bdcec4;
    --palette-bdd2c6: #bdd2c6;
    --palette-c28a38: #c28a38;
    --palette-c2d1ca: #c2d1ca;
    --palette-c3dfd0: #c3dfd0;
    --palette-cbd8d1: #cbd8d1;
    --palette-cbdad3: #cbdad3;
    --palette-cbdced: #cbdced;
    --palette-cbe4d5: #cbe4d5;
    --palette-cce4d8: #cce4d8;
    --palette-cce6d9: #cce6d9;
    --palette-cddcd3: #cddcd3;
    --palette-cfe3d7: #cfe3d7;
    --palette-cfe5d8: #cfe5d8;
    --palette-d3dfd8: #d3dfd8;
    --palette-d3ecdf: #d3ecdf;
    --palette-d78a2b: #d78a2b;
    --palette-d7d7d2: #d7d7d2;
    --palette-d7e1dc: #d7e1dc;
    --palette-d8b08f: #d8b08f;
    --palette-d8e3dd: #d8e3dd;
    --palette-d9dddb: #d9dddb;
    --palette-dae6df: #dae6df;
    --palette-dbe5df: #dbe5df;
    --palette-dbe6e0: #dbe6e0;
    --palette-dce6e1: #dce6e1;
    --palette-dce7e1: #dce7e1;
    --palette-dceee4: #dceee4;
    --palette-dde5e1: #dde5e1;
    --palette-dfe8e3: #dfe8e3;
    --palette-dfe9e3: #dfe9e3;
    --palette-e0e5e2: #e0e5e2;
    --palette-e0e8e3: #e0e8e3;
    --palette-e1e4e2: #e1e4e2;
    --palette-e3f5eb: #e3f5eb;
    --palette-e5ece8: #e5ece8;
    --palette-e5f4eb: #e5f4eb;
    --palette-e6f5ec: #e6f5ec;
    --palette-e7eee9: #e7eee9;
    --palette-e7f1eb: #e7f1eb;
    --palette-e7f4ed: #e7f4ed;
    --palette-e8eeea: #e8eeea;
    --palette-e8f3ed: #e8f3ed;
    --palette-e9eeeb: #e9eeeb;
    --palette-e9f5ef: #e9f5ef;
    --palette-ead9ad: #ead9ad;
    --palette-eaf4ee: #eaf4ee;
    --palette-eaf5ef: #eaf5ef;
    --palette-ecefed: #ecefed;
    --palette-edcbc7: #edcbc7;
    --palette-edf1ef: #edf1ef;
    --palette-edf5f0: #edf5f0;
    --palette-edf6f0: #edf6f0;
    --palette-edf6f2: #edf6f2;
    --palette-edf7f2: #edf7f2;
    --palette-eed098: #eed098;
    --palette-eef2ef: #eef2ef;
    --palette-eef5f0: #eef5f0;
    --palette-efc6c6: #efc6c6;
    --palette-f0c3c0: #f0c3c0;
    --palette-f0f2f1: #f0f2f1;
    --palette-f1d4b7: #f1d4b7;
    --palette-f1f7f3: #f1f7f3;
    --palette-f2f5f3: #f2f5f3;
    --palette-f2f7f4: #f2f7f4;
    --palette-f3f7f4: #f3f7f4;
    --palette-f4f4f1: #f4f4f1;
    --palette-f5fbf8: #f5fbf8;
    --palette-f7f2e8: #f7f2e8;
    --palette-f7f9f7: #f7f9f7;
    --palette-f7fbf9: #f7fbf9;
    --palette-f8faf8: #f8faf8;
    --palette-f8fbf9: #f8fbf9;
    --palette-faf0ee: #faf0ee;
    --palette-fafaf8: #fafaf8;
    --palette-fafbf9: #fafbf9;
    --palette-fbfcfb: #fbfcfb;
    --palette-fbfdfc: #fbfdfc;
    --palette-fcfcfb: #fcfcfb;
    --palette-fdebea: #fdebea;
    --palette-fff2d9: #fff2d9;
    --palette-fff3e9: #fff3e9;

    /* Effects */
    --shadow-1: 0 1px 2px rgba(32, 33, 35, .05), 0 1px 8px rgba(32, 33, 35, .025);
    --shadow-2: 0 8px 24px rgba(32, 33, 35, .08);
    --shadow-3: 0 24px 64px rgba(32, 33, 35, .16);
    --shadow-action: 0 1px 2px rgba(0, 0, 0, .12);
    --overlay-color: rgba(20, 20, 20, .56);
    --focus-color: #2563eb;
    --focus-ring: 0 0 0 3px rgba(37, 99, 235, .20);

    /* Motion */
    --duration-fast: 120ms;
    --duration-medium: 200ms;
    --duration-slow: 360ms;
    --ease-standard: cubic-bezier(.2, .8, .2, 1);

    /* Layout */
    --container-max: 1440px;
    --reading-max: 760px;
    --control-height: 44px;
    --touch-target: 44px;

    /* Responsive contract: values are documentation tokens; media queries use the same px boundaries. */
    --breakpoint-compact-max: 639px;
    --breakpoint-tablet-min: 640px;
    --breakpoint-tablet-max: 959px;
    --breakpoint-desktop-min: 960px;
    --breakpoint-large-min: 1280px;
    --breakpoint-wide-min: 1600px;

    /* Layering */
    --z-base: 0;
    --z-sticky: 20;
    --z-dropdown: 40;
    --z-overlay: 80;
    --z-modal: 100;
    --z-toast: 120;

    /* Compatibility aliases for Tahap 19 views. Remove only after downstream migration. */
    --xs: var(--text-xs);
    --sm: var(--text-sm);
    --md: var(--text-body);
    --lg: var(--text-lg);
    --xl: var(--text-title-3);
    --2xl: var(--text-title-2);
    --3xl: var(--text-title-1);

    --s1: var(--space-1);
    --s2: var(--space-2);
    --s3: var(--space-3);
    --s4: var(--space-4);
    --s5: var(--space-5);
    --s6: var(--space-6);
    --s8: var(--space-8);
    --s10: var(--space-10);
    --s12: var(--space-12);

    --rsm: var(--radius-sm);
    --rmd: var(--radius-md);
    --rlg: var(--radius-lg);
    --rxl: var(--radius-xl);
    --pill: var(--radius-pill);

    --shadow1: var(--shadow-1);
    --shadow2: var(--shadow-2);
    --shadow3: var(--shadow-3);
    --fast: var(--duration-fast);
    --medium: var(--duration-medium);
    --slow: var(--duration-slow);
    --ease: var(--ease-standard);

    --bg: var(--color-canvas);
    --surface: var(--color-surface);
    --surface2: var(--color-surface-subtle);
    --surface3: var(--color-surface-muted);
    --text: var(--color-text);
    --muted: var(--color-text-muted);
    --subtle: var(--color-text-subtle);
    --border: var(--color-border);
    --border2: var(--color-border-strong);
    --primary: var(--color-action);
    --primary2: var(--color-action-hover);
    --primarySoft: var(--color-action-soft);
    --accent: var(--color-biomass);
    --accentSoft: var(--color-biomass-soft);
    --success: var(--color-success);
    --successSoft: var(--color-success-soft);
    --warning: var(--color-warning);
    --warningSoft: var(--color-warning-soft);
    --danger: var(--color-danger);
    --dangerSoft: var(--color-danger-soft);
    --info: var(--color-info);
    --infoSoft: var(--color-info-soft);
    --focus: var(--focus-ring);
    --max: var(--container-max);
    --reading: var(--reading-max);
    --overlay: var(--overlay-color);
  }
}

@layer base {
  html { background: var(--color-canvas); }
  body {
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    color: var(--color-text);
    background: var(--color-canvas);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  ::selection { background: var(--color-action-soft); color: var(--color-text); }
  :focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; box-shadow: var(--focus-ring); }

  h1, h2, h3, h4, h5, h6 {
    color: var(--color-text);
    font-weight: var(--weight-bold);
    line-height: var(--leading-title);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }
  h1 { font-size: var(--type-page-title); }
  h2 { font-size: var(--type-section-title); }
  h3 { font-size: var(--type-card-title); }
  h4 { font-size: var(--type-body-lg); }
  h5, h6 { font-size: var(--type-body); }

  p { color: inherit; }
  small { font-size: var(--type-body-sm); }
  strong { font-weight: var(--weight-bold); }
  a { color: inherit; }
  code, pre, kbd, samp { font-family: var(--font-mono); }

  input, textarea, select { color: var(--color-text); }
  input::placeholder, textarea::placeholder { color: var(--color-text-subtle); opacity: 1; }
  hr { border: 0; border-top: 1px solid var(--color-border); }
}

@layer utilities {
  .anva-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .anva-muted { color: var(--color-text-muted); }
  .anva-subtle { color: var(--color-text-subtle); }
  .anva-text-success { color: var(--color-success); }
  .anva-text-danger { color: var(--color-danger); }
  .anva-text-warning { color: var(--color-warning); }

  .anva-stack-2 > * + * { margin-top: var(--space-2); }
  .anva-stack-3 > * + * { margin-top: var(--space-3); }
  .anva-stack-4 > * + * { margin-top: var(--space-4); }
  .anva-stack-6 > * + * { margin-top: var(--space-6); }
  .anva-stack-8 > * + * { margin-top: var(--space-8); }

  .anva-cluster,
  .anva-cluster-between {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
  }
  .anva-cluster-between { justify-content: space-between; }

  .anva-grid-2, .anva-grid-3, .anva-grid-4 { display: grid; gap: var(--space-4); min-width: 0; }
  .anva-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anva-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .anva-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .anva-reading-measure { max-inline-size: var(--measure-body); }
  .anva-nowrap { white-space: nowrap; }
  .anva-break { overflow-wrap: anywhere; word-break: break-word; }
}

@media (max-width: 959px) {
  @layer utilities {
    .anva-grid-3, .anva-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}

@media (max-width: 639px) {
  @layer base {
    h1 { font-size: var(--type-page-title); }
    h2 { font-size: var(--type-section-title); }
  }
  @layer utilities {
    .anva-grid-2, .anva-grid-3, .anva-grid-4 { grid-template-columns: 1fr; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
    transition-duration: .001ms;
  }
}


/* Tahap 21.4 — Foundation Compliance Contract.
 * Typography scale, readable measures and layout spacing are owned here.
 * Components/compositions/project layers may consume these tokens, never create parallel scales.
 */
@layer tokens {
  :root {
    /* Semantic typography */
    --type-zero: 0;
    --type-caption: .75rem;
    --type-label: .8125rem;
    --type-body-sm: .875rem;
    --type-body: 1rem;
    --type-body-lg: 1.125rem;
    --type-card-title: 1.25rem;
    --type-title-sm: 1.5rem;
    --type-section-title: clamp(1.75rem, 2.15vw, 2.5rem);
    --type-page-title: clamp(2.25rem, 3.2vw, 3.75rem);
    --type-display: clamp(2.75rem, 4.7vw, 4.75rem);
    --type-metric: clamp(1.75rem, 2.5vw, 2.5rem);

    /* Backward-compatible foundation aliases */
    --text-xs: var(--type-caption);
    --text-sm: var(--type-body-sm);
    --text-body: var(--type-body);
    --text-lg: var(--type-body-lg);
    --text-title-3: var(--type-card-title);
    --text-title-2: var(--type-title-sm);
    --text-title-1: var(--type-section-title);
    --text-display: var(--type-display);

    /* Typography rhythm */
    --leading-display: .98;
    --leading-page: 1.04;
    --leading-section: 1.12;
    --leading-tight: 1.18;
    --leading-compact: 1.42;
    --leading-body: 1.6;
    --tracking-display: -.05em;
    --tracking-title: -.035em;
    --tracking-tight: -.02em;
    --tracking-normal: 0;
    --tracking-label: .08em;

    /* Text measure */
    --measure-display: 22ch;
    --measure-page-title: 36ch;
    --measure-section-title: 42ch;
    --measure-body: 68ch;
    --measure-process-note: 24ch;
    --measure-wide: 88ch;
    --layout-content-max: 77.5rem;

    /* Semantic layout spacing */
    --layout-space-major: var(--space-16);
    --layout-space-section: var(--space-12);
    --layout-space-group: var(--space-6);
    --layout-space-card: var(--space-4);
    --layout-space-item: var(--space-2);
    --layout-edge: 1.75rem;

    /* Canonical icon geometry */
    --icon-xs: .875rem;
    --icon-sm: 1rem;
    --icon-md: 1.25rem;
    --icon-lg: 1.5rem;
    --icon-xl: 2rem;
  }

  @media (min-width: 640px) and (max-width: 959px) {
    :root {
      --type-section-title: clamp(1.75rem, 3.4vw, 2.25rem);
      --type-page-title: clamp(2.25rem, 5vw, 3.25rem);
      --type-display: clamp(2.75rem, 6.2vw, 3.75rem);
      --measure-display: 20ch;
      --measure-page-title: 32ch;
      --measure-section-title: 34ch;
      --measure-body: 64ch;
      --layout-space-major: 3.25rem;
      --layout-space-section: 2.5rem;
      --layout-space-group: 1.25rem;
      --layout-space-card: .875rem;
      --layout-space-item: .625rem;
      --layout-edge: 1.375rem;
    }
  }

  @media (max-width: 639px) {
    :root {
      --type-section-title: clamp(1.75rem, 8.2vw, 2.125rem);
      --type-page-title: clamp(2.125rem, 10vw, 2.625rem);
      --type-display: clamp(2.5rem, 12vw, 3rem);
      --type-metric: clamp(1.625rem, 7vw, 2rem);
      --measure-display: 17ch;
      --measure-page-title: 24ch;
      --measure-section-title: 28ch;
      --measure-body: 58ch;
      --layout-space-major: 2.5rem;
      --layout-space-section: 2rem;
      --layout-space-group: 1rem;
      --layout-space-card: .75rem;
      --layout-space-item: .5rem;
      --layout-edge: 1rem;
    }
  }
}


/* ===== SOURCE: anva-components.css ===== */
@layer components{
.anva-eyebrow{font-size:var(--xs);font-weight:var(--weight-heavy);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--primary)}.anva-lead{font-size:var(--lg);max-width:68ch}.anva-caption{font-size:var(--xs);color:var(--subtle)}
.anva-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border:1px solid transparent;border-radius:var(--rmd);padding:.7rem var(--space-4);font-weight:var(--weight-bold);text-decoration:none;cursor:pointer;transition:transform var(--fast),background var(--fast),box-shadow var(--fast),border-color var(--fast)}.anva-button:hover{transform:translateY(-1px)}.anva-button:active{transform:scale(.985)}.anva-button-primary{background:var(--primary);color:var(--color-surface);box-shadow:var(--shadow-action)}.anva-button-primary:hover{background:var(--primary2)}.anva-button-secondary{background:var(--surface);border-color:var(--border2);color:var(--text)}.anva-button-ghost{background:transparent;color:var(--primary)}.anva-button-danger{background:var(--danger);color:var(--color-surface)}.anva-button-sm{min-height:36px;padding:.48rem .75rem;font-size:var(--sm);border-radius:var(--rsm)}.anva-button[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.anva-card{background:var(--surface);border:1px solid var(--color-border);border-radius:var(--rlg);box-shadow:none;overflow:hidden}.anva-card-interactive{transition:transform var(--medium) var(--ease),box-shadow var(--medium),border-color var(--medium)}.anva-card-interactive:hover{transform:translateY(-3px);box-shadow:var(--shadow2);border-color:var(--border2)}.anva-card-body{padding:var(--s5)}.anva-card-header{padding:var(--s5);border-bottom:1px solid var(--border)}.anva-card-footer{padding:var(--s4) var(--s5);border-top:1px solid var(--border);background:var(--surface2)}
.anva-seller-card{display:grid;grid-template-columns:76px 1fr;gap:var(--s4);align-items:center;padding:var(--s4)}.anva-seller-avatar{width:76px;aspect-ratio:1;border-radius:var(--rlg);display:grid;place-items:center;background:linear-gradient(145deg,var(--primarySoft),var(--surface3));color:var(--primary);font-size:var(--type-title-sm);font-weight:var(--weight-heavy)}.anva-seller-meta{display:flex;flex-wrap:wrap;gap:.45rem .75rem;font-size:var(--sm);color:var(--muted)}.anva-seller-actions{grid-column:1/-1;display:flex;gap:var(--s2);flex-wrap:wrap}
.anva-kpi{position:relative;padding:var(--s5);min-height:140px}.anva-kpi-label{font-size:var(--sm);color:var(--muted);font-weight:var(--weight-semibold)}.anva-kpi-value{margin-top:.25rem;font-size:var(--type-page-title);line-height:var(--leading-display);font-weight:var(--weight-heavy);letter-spacing:var(--tracking-display)}.anva-kpi-delta{margin-top:var(--s3);font-size:var(--sm);font-weight:var(--weight-bold)}.anva-kpi-visual{position:absolute;right:var(--s4);bottom:var(--s4);width:92px;height:34px;opacity:.9}
.anva-badge{display:inline-flex;align-items:center;gap:.35rem;min-height:26px;padding:.2rem .58rem;border-radius:var(--pill);font-size:var(--xs);font-weight:var(--weight-heavy);background:var(--surface3);color:var(--muted)}.anva-badge-success{background:var(--successSoft);color:var(--success)}.anva-badge-warning{background:var(--warningSoft);color:var(--warning)}.anva-badge-danger{background:var(--dangerSoft);color:var(--danger)}.anva-badge-info{background:var(--infoSoft);color:var(--info)}.anva-badge-primary{background:var(--primarySoft);color:var(--primary)}.anva-status-dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.anva-form{display:grid;gap:var(--s4)}.anva-field{display:grid;gap:.42rem}.anva-label{font-size:var(--sm);font-weight:var(--weight-bold)}.anva-hint{font-size:var(--xs);color:var(--subtle)}.anva-input,.anva-select,.anva-textarea{width:100%;min-height:44px;border:1px solid var(--border2);border-radius:var(--rmd);background:var(--surface);color:var(--text);padding:.7rem .8rem;outline:none;transition:border-color var(--fast),box-shadow var(--fast)}.anva-textarea{min-height:120px;resize:vertical}.anva-input:focus,.anva-select:focus,.anva-textarea:focus{border-color:var(--primary);box-shadow:var(--focus)}.anva-field-error{font-size:var(--xs);color:var(--danger);font-weight:var(--weight-semibold)}
.anva-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--rlg);background:var(--surface)}.anva-table{width:100%;min-width:680px}.anva-table th,.anva-table td{padding:.85rem var(--space-4);text-align:left;border-bottom:1px solid var(--border);vertical-align:middle}.anva-table th{position:sticky;top:0;background:var(--surface2);color:var(--muted);font-size:var(--xs);text-transform:uppercase;letter-spacing:var(--tracking-label)}.anva-table tbody tr:hover{background:var(--surface2)}
.anva-record-list{display:grid;gap:var(--s3)}.anva-record{padding:var(--s4);border:1px solid var(--border);border-radius:var(--rlg);background:var(--surface)}.anva-record-head{display:flex;gap:var(--s3);justify-content:space-between}.anva-record-grid{margin-top:var(--s3);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem var(--space-4)}.anva-record-key{font-size:var(--xs);color:var(--subtle)}.anva-record-value{font-size:var(--sm);font-weight:var(--weight-semibold)}
.anva-tabs{border-bottom:1px solid var(--border);display:flex;gap:.25rem;overflow:auto}.anva-tab{position:relative;border:0;background:transparent;padding:.8rem .9rem;color:var(--muted);font-weight:var(--weight-bold);white-space:nowrap;cursor:pointer}.anva-tab[aria-selected=true]{color:var(--primary)}.anva-tab[aria-selected=true]::after{content:"";position:absolute;left:.65rem;right:.65rem;bottom:-1px;height:3px;background:var(--primary);border-radius:3px 3px 0 0}.anva-tab-panel{padding-top:var(--s5)}.anva-tab-panel[hidden]{display:none}
.anva-filterbar{display:flex;flex-wrap:wrap;gap:var(--s2)}.anva-filter{min-height:36px;border:1px solid var(--border);border-radius:var(--pill);padding:.42rem .72rem;background:var(--surface);color:var(--muted);font-size:var(--sm);font-weight:var(--weight-semibold);cursor:pointer}.anva-filter[aria-pressed=true]{background:var(--primarySoft);border-color:var(--color-action-border);color:var(--primary2)}
.anva-alert{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);padding:var(--s4);border:1px solid var(--border);border-radius:var(--rlg);background:var(--surface)}.anva-alert-success{background:var(--successSoft)}.anva-alert-warning{background:var(--warningSoft)}.anva-alert-danger{background:var(--dangerSoft)}.anva-alert-info{background:var(--infoSoft)}.anva-alert-icon{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:var(--palette-alpha-e28478e8);font-weight:var(--weight-heavy)}
.anva-empty{text-align:center;padding:clamp(var(--space-8),7vw,var(--space-20)) var(--s6);border:1px dashed var(--border2);border-radius:var(--rxl);background:linear-gradient(180deg,var(--surface),var(--surface2))}.anva-empty-icon{width:64px;height:64px;margin:var(--space-0) auto var(--s4);display:grid;place-items:center;border-radius:20px;background:var(--primarySoft);color:var(--primary);font-size:var(--type-title-sm)}.anva-empty p{max-width:48ch;margin:.5rem auto var(--space-5)}
.anva-skeleton{position:relative;overflow:hidden;background:var(--color-surface-muted);border-radius:var(--rsm);color:transparent;min-height:1rem}.anva-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--palette-alpha-08f25b72),transparent);animation:shimmer 1.35s infinite}@keyframes shimmer{to{transform:translateX(100%)}}
.anva-progress{height:10px;border-radius:999px;overflow:hidden;background:var(--surface3)}.anva-progress-bar{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--color-action),var(--color-biomass));transition:width var(--slow) var(--ease)}
.anva-timeline{position:relative;display:grid;gap:var(--s5)}.anva-timeline::before{content:"";position:absolute;top:.75rem;bottom:.75rem;left:.7rem;width:2px;background:var(--border)}.anva-timeline-item{position:relative;padding-left:var(--space-10)}.anva-timeline-dot{position:absolute;left:.25rem;top:.25rem;width:1rem;height:1rem;border-radius:50%;background:var(--surface);border:3px solid var(--border2)}.anva-timeline-item.is-done .anva-timeline-dot{border-color:var(--success);background:var(--successSoft)}.anva-timeline-item.is-active .anva-timeline-dot{border-color:var(--primary);box-shadow:0 0 0 4px var(--primarySoft)}
.anva-steps{display:grid;grid-template-columns:repeat(var(--steps,4),minmax(0,1fr));gap:.5rem}.anva-step{position:relative;text-align:center;font-size:var(--xs);color:var(--subtle);padding-top:var(--space-8)}.anva-step::before{content:"";position:absolute;top:.65rem;left:50%;right:-50%;height:2px;background:var(--border)}.anva-step:last-child::before{display:none}.anva-step-marker{position:absolute;top:0;left:50%;translate:-50% 0;width:1.35rem;height:1.35rem;border-radius:50%;border:3px solid var(--border2);background:var(--surface);z-index:1}.anva-step.is-done .anva-step-marker{border-color:var(--success);background:var(--success)}.anva-step.is-done::before{background:var(--success)}.anva-step.is-active .anva-step-marker{border-color:var(--primary);box-shadow:0 0 0 4px var(--primarySoft)}
/* Legacy marker only: .anva-dialog is owned by core-components.css from Tahap 21.13 onward. */
.anva-overlay{position:fixed;inset:0;z-index:80;background:var(--overlay);opacity:0;pointer-events:none;transition:opacity var(--medium)}.anva-overlay.is-open{opacity:1;pointer-events:auto}.anva-drawer{position:absolute;top:0;right:0;width:min(430px,92vw);height:100%;background:var(--surface);box-shadow:var(--shadow3);transform:translateX(100%);transition:transform var(--medium) var(--ease);overflow:auto}.anva-overlay.is-open .anva-drawer{transform:none}.anva-sheet{position:absolute;left:50%;bottom:0;width:min(680px,100%);max-height:82vh;background:var(--surface);border-radius:var(--rxl) var(--rxl) 0 0;transform:translate(-50%,100%);transition:transform var(--medium) var(--ease);overflow:auto}.anva-overlay.is-open .anva-sheet{transform:translate(-50%,0)}.anva-overlay-panel-head,.anva-overlay-panel-body{padding:var(--s5)}.anva-overlay-panel-head{border-bottom:1px solid var(--border)}
/* Legacy marker only: .anva-toast is owned by core-components.css from Tahap 21.13 onward. */
.anva-success-mark{width:64px;height:64px;border-radius:50%;margin:auto;display:grid;place-items:center;background:var(--successSoft);color:var(--success);font-size:var(--type-section-title);animation:successPop var(--slow) var(--ease)}@keyframes successPop{0%{transform:scale(.72);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
}
@media(max-width:639px){.anva-table-wrap[data-mobile-records=true]{display:none}.anva-seller-card{grid-template-columns:64px 1fr}.anva-seller-avatar{width:64px}}@media(min-width:640px){.anva-record-list[data-desktop-hidden=true]{display:none}}


/* ANVA KPI layout hardening — Tahap 8 UI recovery */
@layer components{
.anva-kpi{display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:132px;padding:var(--s5);background:var(--surface);border:1px solid var(--border);border-radius:var(--rlg);box-shadow:var(--shadow1);overflow:hidden}
.anva-kpi-label{display:block;width:100%;line-height:var(--leading-compact)}
.anva-kpi-value{display:block;width:100%;max-width:100%;margin-top:.45rem;font-size:var(--type-page-title);line-height:var(--leading-page);font-weight:var(--weight-heavy);letter-spacing:var(--tracking-display);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.anva-kpi small{display:block;width:100%;margin-top:.6rem;color:var(--muted);font-size:var(--xs);line-height:var(--leading-compact)}
}


/* Tahap 21.1 Universal component refinement — canonical component owner.
 * Tahap 21.2 lowers L2 card weight so spacing remains visually readable. */
@layer components {
  .anva-card-interactive:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--color-biomass) 28%,var(--color-border));box-shadow:0 8px 22px color-mix(in srgb,var(--color-text) 5%,transparent)}
  .anva-card-body{padding:clamp(var(--space-4),1.8vw,var(--space-5))}
  .anva-button{border-radius:12px;letter-spacing:var(--tracking-tight);box-shadow:none}
  .anva-button-primary{background:var(--color-action);border-color:var(--color-action);box-shadow:0 7px 18px color-mix(in srgb,var(--color-action) 14%,transparent)}
  .anva-button-primary:hover{background:var(--color-action-hover);border-color:var(--color-action-hover);box-shadow:0 10px 24px color-mix(in srgb,var(--color-action) 18%,transparent)}
  .anva-button-secondary{background:color-mix(in srgb,var(--color-surface) 92%,var(--color-canvas));border-color:var(--color-border)}
  .anva-input,.anva-select,.anva-textarea{border-radius:12px;border-color:var(--color-border);background:color-mix(in srgb,var(--color-surface) 96%,var(--color-canvas));box-shadow:0 1px 0 color-mix(in srgb,var(--color-text) 2%,transparent)}
  .anva-input:hover,.anva-select:hover,.anva-textarea:hover{border-color:var(--color-border-strong);background:var(--color-surface)}
  .anva-input:focus,.anva-select:focus,.anva-textarea:focus{border-color:color-mix(in srgb,var(--color-biomass) 56%,var(--color-border));box-shadow:0 0 0 4px color-mix(in srgb,var(--color-biomass) 10%,transparent);background:var(--color-surface)}
  .anva-badge{border:1px solid color-mix(in srgb,currentColor 11%,transparent);font-weight:var(--weight-bold)}
  .anva-table-wrap{border-radius:16px;box-shadow:0 8px 24px color-mix(in srgb,var(--color-text) 3%,transparent)}
  .anva-record{border-radius:16px;box-shadow:0 5px 16px color-mix(in srgb,var(--color-text) 3%,transparent)}
  .anva-alert{border-radius:16px}
  .anva-empty{border-radius:20px}
}

/* Tahap 21.5 — Canonical button integrity. Visual state never depends on inherited anchor color. */
.anva-button{box-sizing:border-box;color:var(--color-text);font-size:var(--type-body-sm);line-height:var(--leading-tight);white-space:nowrap}
.anva-button:visited{color:var(--color-text)}
.anva-button-primary,.anva-button-primary:visited{background:var(--color-action);border-color:var(--color-action);color:var(--color-text-inverse)}
.anva-button-secondary,.anva-button-secondary:visited{background:var(--color-surface);border-color:var(--color-border-strong);color:var(--color-text)}
.anva-button-ghost,.anva-button-ghost:visited{background:transparent;border-color:transparent;color:var(--color-action)}
.anva-button-danger,.anva-button-danger:visited{background:var(--color-danger);border-color:var(--color-danger);color:var(--color-text-inverse)}


/* ===== SOURCE: anva-compositions.css ===== */
@layer compositions{
.anva-page{min-height:100vh;opacity:1;transform:none;transition:opacity var(--fast),transform var(--fast)}.anva-page.is-leaving{opacity:0;transform:translateY(3px)}.anva-js .anva-page[data-route-transition]{animation:pageEnter var(--medium) var(--ease)}@keyframes pageEnter{from{opacity:0;transform:translateY(5px)}}
.anva-container{width:min(calc(100% - 2rem),var(--max));margin-inline:auto}.anva-reading{width:min(calc(100% - 2rem),var(--reading));margin-inline:auto}.anva-section{padding-block:clamp(var(--space-8),6vw,var(--space-20))}.anva-section-compact{padding-block:var(--s8)}.anva-section-head{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;align-items:flex-end;margin-bottom:var(--s6)}.anva-section-copy{display:grid;gap:var(--s2);max-width:70ch}
.anva-topbar{position:sticky;top:0;z-index:20;background:var(--palette-alpha-372f3d7b);backdrop-filter:blur(14px);border-bottom:1px solid var(--palette-alpha-b8ec4010)}.anva-topbar-inner{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}.anva-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:var(--weight-heavy)}.anva-brand-mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:var(--color-surface);background:var(--color-action);box-shadow:var(--shadow-action)}.anva-topnav{display:flex;gap:.4rem}.anva-topnav a{text-decoration:none;padding:.45rem .7rem;border-radius:var(--rsm);color:var(--muted);font-size:var(--sm);font-weight:var(--weight-semibold)}.anva-topnav a:hover,.anva-topnav a[aria-current=page]{background:var(--surface);color:var(--primary)}
.anva-hero{padding-block:clamp(var(--space-12),8vw,var(--space-20))}.anva-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:clamp(var(--space-8),6vw,var(--space-20));align-items:center}.anva-hero-copy{display:grid;gap:var(--s5)}.anva-hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3)}.anva-hero-visual{position:relative;min-height:390px;display:grid;place-items:center}.anva-hero-orbit{position:absolute;width:76%;aspect-ratio:1;border:1px dashed var(--color-border-strong);border-radius:50%;animation:orbit 28s linear infinite}.anva-hero-orbit::before,.anva-hero-orbit::after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px var(--accentSoft)}.anva-hero-orbit::before{top:11%;left:18%}.anva-hero-orbit::after{right:8%;bottom:23%;background:var(--primary);box-shadow:0 0 0 6px var(--primarySoft)}@keyframes orbit{to{rotate:360deg}}.anva-showcase-panel{width:min(100%,520px);padding:var(--s5);border-radius:var(--rxl);border:1px solid var(--palette-alpha-822f8621);background:var(--palette-alpha-e593d048);backdrop-filter:blur(16px);box-shadow:var(--shadow2)}
.anva-auth-shell{min-height:100vh;display:grid;place-items:center;padding:var(--s6)}.anva-auth-card{width:min(100%,760px)}.anva-auth-card-wide{width:min(100%,960px)}
.anva-dashboard-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s4)}.anva-span-3{grid-column:span 3}.anva-span-4{grid-column:span 4}.anva-span-6{grid-column:span 6}.anva-span-8{grid-column:span 8}.anva-span-12{grid-column:1/-1}
.anva-reveal{opacity:0;transform:translateY(12px)}.anva-reveal.is-visible{opacity:1;transform:none;transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
.anva-demo-band{padding:var(--s5);background:var(--color-surface-inverse);color:var(--color-surface);border-radius:var(--rxl);overflow:hidden;position:relative}.anva-demo-band p{color:var(--palette-alpha-4a0eedf6)}
}
@media(max-width:959px){.anva-hero-grid{grid-template-columns:1fr}.anva-hero-visual{min-height:340px}.anva-dashboard-grid .anva-span-3,.anva-dashboard-grid .anva-span-4{grid-column:span 6}}@media(max-width:639px){.anva-container{width:min(calc(100% - 1.25rem),var(--max))}.anva-topnav{display:none}.anva-dashboard-grid{grid-template-columns:1fr}.anva-dashboard-grid>*{grid-column:1}.anva-hero-visual{min-height:290px}.anva-auth-shell{padding:var(--s3);align-items:start}}


/* ===== SOURCE: anva-visualization.css ===== */
@layer visualization{.anva-viz{position:relative;width:100%;min-height:220px}.anva-viz.is-compact{min-height:64px}.anva-viz svg{width:100%;height:auto;overflow:visible}.anva-viz-grid{stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke}.anva-viz-line{fill:none;stroke:var(--color-biomass);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.anva-viz-dot{fill:var(--surface);stroke:var(--color-biomass);stroke-width:2}.anva-viz-bar{fill:var(--color-biomass);rx:6}.anva-viz-bar-secondary{fill:var(--color-info)}.anva-viz-muted{fill:var(--surface3)}.anva-viz-ring-bg{fill:none;stroke:var(--surface3);stroke-width:12}.anva-viz-ring{fill:none;stroke:var(--color-biomass);stroke-width:12;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center}.anva-viz-value{fill:var(--text);font:800 21px var(--font);text-anchor:middle}.anva-viz-label{fill:var(--muted);font:650 11px var(--font)}.anva-viz-flow-node{fill:var(--surface);stroke:var(--border2);stroke-width:1.5}.anva-viz-flow-node.is-active{stroke:var(--color-biomass);fill:var(--color-biomass-soft)}.anva-viz-flow-link{stroke:var(--border2);stroke-width:2;fill:none}.anva-viz-mass-in{fill:var(--color-biomass)}.anva-viz-mass-out{fill:var(--color-success)}.anva-viz-mass-loss{fill:var(--accent)}.anva-viz-mass-reject{fill:var(--danger)}.anva-viz[data-animated=true] .anva-viz-line{stroke-dasharray:1000;stroke-dashoffset:1000;animation:lineDraw 1.1s var(--ease) forwards}.anva-viz[data-animated=true] .anva-viz-bar{transform-box:fill-box;transform-origin:center bottom;animation:barGrow .65s var(--ease) both}@keyframes lineDraw{to{stroke-dashoffset:0}}@keyframes barGrow{from{transform:scaleY(.05);opacity:.2}}}


/* ===== SOURCE: project.css ===== */
@layer project{.project-stage-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .65rem;border-radius:var(--pill);background:var(--accentSoft);color:var(--palette-8a521a);font-size:var(--xs);font-weight:var(--weight-heavy)}.project-stage-chip::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--accent)}.project-install-checks{display:grid;gap:var(--s2)}.project-check-row{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3);border:1px solid var(--border);border-radius:var(--rmd);background:var(--surface2)}.project-install-section{padding-top:var(--s5);margin-top:var(--s5);border-top:1px solid var(--border)}.project-mt2{margin-top:.55rem}.project-sk1{height:18px;width:42%}.project-sk2{height:44px;width:72%}.project-sk3{height:12px;width:100%}.project-sk4{height:12px;width:84%}.project-steps4{--steps:4}}

@layer project{
.workspace-body{background:var(--bg)}
.workspace-app{min-height:100vh;display:grid;grid-template-columns:280px minmax(0,1fr)}
.workspace-sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--palette-0c2f24);color:var(--color-surface);border-right:1px solid var(--palette-alpha-1f523d72);z-index:30}
.workspace-brand{padding:var(--space-4) var(--space-4);border-bottom:1px solid var(--palette-alpha-1f523d72)}
.workspace-brand .anva-brand{color:var(--color-surface)}.workspace-brand .anva-brand small{display:block;color:var(--palette-alpha-2e12017e);font-size:var(--type-caption);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label)}.workspace-brand .anva-brand-mark{background:linear-gradient(145deg,var(--palette-24a776),var(--palette-7fd8ad))}
.workspace-nav{padding:.9rem .75rem;overflow:auto;flex:1}.workspace-nav section+section{margin-top:var(--space-4)}.workspace-nav-label{padding:.25rem .65rem;margin-bottom:.25rem;color:var(--palette-alpha-8dd4404c);font-size:var(--type-caption);font-weight:var(--weight-heavy);letter-spacing:var(--tracking-label);text-transform:uppercase}
.workspace-nav-item{display:flex;align-items:center;gap:.7rem;min-height:42px;padding:.55rem .65rem;border-radius:.75rem;text-decoration:none;color:var(--palette-alpha-daac4d76);font-size:var(--type-body-sm);font-weight:var(--weight-semibold);transition:background var(--fast) var(--ease),color var(--fast) var(--ease),transform var(--fast) var(--ease)}.workspace-nav-item:hover{background:var(--palette-alpha-1f523d72);color:var(--color-surface);transform:translateX(2px)}.workspace-nav-item.is-active{background:var(--palette-alpha-976fd8ce);color:var(--color-surface);box-shadow:inset 3px 0 var(--palette-7fd8ad)}.workspace-nav-icon{width:24px;height:24px;display:grid;place-items:center;border-radius:.5rem;background:var(--palette-alpha-2b6936e9);font-size:var(--type-body-sm)}.workspace-nav-item.is-active .workspace-nav-icon{background:var(--palette-alpha-6cb18787)}
.workspace-sidebar-foot{padding:.85rem;border-top:1px solid var(--palette-alpha-1f523d72)}.workspace-user-mini{display:grid;grid-template-columns:36px minmax(0,1fr);gap:.65rem;align-items:center;margin-bottom:.65rem}.workspace-user-mini strong,.workspace-user-mini small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workspace-user-mini strong{font-size:var(--type-label);color:var(--color-surface)}.workspace-user-mini small{font-size:var(--type-caption);color:var(--palette-alpha-59a7043d)}.workspace-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--palette-alpha-976fd8ce);color:var(--palette-b8efd2);font-weight:var(--weight-heavy)}.workspace-logout{width:100%;padding:.45rem .65rem;border:1px solid var(--palette-alpha-c843a09e);border-radius:.65rem;background:transparent;color:var(--palette-alpha-4a0eedf6);font-weight:var(--weight-semibold);cursor:pointer}.workspace-logout:hover{background:var(--palette-alpha-1f523d72);color:var(--color-surface)}
.workspace-main{min-width:0}.workspace-topbar{position:sticky;top:0;z-index:20;min-height:64px;padding:.7rem clamp(var(--space-4),2.2vw,var(--space-8));display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);background:var(--palette-alpha-18c7f924);backdrop-filter:blur(15px);border-bottom:1px solid var(--border)}.workspace-topbar>div:first-child strong{font-size:var(--type-body-sm)}.workspace-mobile-role{display:none}.workspace-top-actions{display:flex;align-items:center;gap:.65rem}.workspace-profile-link{text-decoration:none;color:var(--text);font-size:var(--type-label);font-weight:var(--weight-bold);padding:.4rem .6rem;border-radius:.65rem}.workspace-profile-link:hover{background:var(--surface)}
.workspace-content{max-width:1600px;margin:var(--space-0) auto;padding:clamp(var(--space-4),2vw,var(--space-8))}.workspace-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:var(--space-5);align-items:end;padding:var(--space-4) var(--space-0) var(--space-4);border:0;border-bottom:1px solid var(--border);border-radius:0;background:linear-gradient(90deg,color-mix(in srgb,var(--primarySoft) 44%,transparent),transparent 72%);box-shadow:none}.workspace-hero h1{margin-top:.35rem}.workspace-eyebrow{margin-top:var(--space-4)}.workspace-hero-compact{grid-template-columns:1fr}.workspace-scope-card{padding:.4rem var(--space-0) .4rem .8rem;border:0;border-left:2px solid var(--primary);border-radius:0;background:transparent;color:var(--text);box-shadow:none}.workspace-scope-card p{font-size:var(--type-caption);color:var(--palette-alpha-0b2af582);text-transform:uppercase;letter-spacing:var(--tracking-label)}.workspace-scope-card strong,.workspace-scope-card span{display:block}.workspace-scope-card strong{margin-top:.3rem;font-size:var(--type-card-title)}.workspace-scope-card span{margin-top:.3rem;font-size:var(--type-label);color:var(--palette-alpha-08f25b72)}
.workspace-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem;margin-top:.9rem}.workspace-kpi{padding:var(--space-4) var(--space-4)}.workspace-kpi p{font-size:var(--type-label)}.workspace-kpi strong{display:block;margin-top:.25rem;font-size:var(--type-section-title);letter-spacing:var(--tracking-title)}.workspace-grid-main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(270px,.7fr);gap:.9rem;margin-top:.9rem}.workspace-panel{padding:var(--space-4)}.workspace-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}.workspace-panel-head h2{font-size:var(--type-body)}.workspace-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.workspace-action-card{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:.7rem;align-items:center;padding:.8rem;border:1px solid var(--border);border-radius:var(--rmd);text-decoration:none;background:var(--surface2);color:var(--text);transition:border-color var(--fast),transform var(--fast),box-shadow var(--fast)}.workspace-action-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--shadow1)}.workspace-action-icon{width:38px;height:38px;border-radius:.7rem;display:grid;place-items:center;background:var(--primarySoft);color:var(--primary);font-weight:var(--weight-heavy)}.workspace-action-card strong,.workspace-action-card small{display:block}.workspace-action-card strong{font-size:var(--type-body-sm)}.workspace-action-card small{font-size:var(--type-caption);color:var(--muted)}.workspace-action-card b{color:var(--subtle)}
.workspace-status-list>div{display:flex;justify-content:space-between;gap:var(--space-4);padding:.68rem var(--space-0);border-bottom:1px solid var(--border)}.workspace-status-list>div:last-child{border-bottom:0}.workspace-status-list span{font-size:var(--type-label);color:var(--muted)}.workspace-status-list strong{font-size:var(--type-label);text-align:right}.workspace-tone-success{color:var(--success)}.workspace-tone-warning{color:var(--warning)}.workspace-note{margin-top:.8rem;padding:.75rem;border-radius:.65rem;background:var(--warningSoft)}.workspace-principle{margin-top:.9rem;padding:var(--space-4) var(--space-5);border-radius:var(--rlg);background:var(--palette-102a21);color:var(--color-surface);display:flex;gap:var(--space-4);align-items:flex-start}.workspace-principle span{white-space:nowrap;font-size:var(--type-caption);font-weight:var(--weight-heavy);letter-spacing:var(--tracking-label);color:var(--palette-8de0b8)}.workspace-principle p{color:var(--palette-alpha-08f25b72);font-size:var(--type-label)}
.workspace-table-wrap{overflow:auto}.workspace-table-wrap .anva-table{min-width:860px}.workspace-table-wrap code{font-size:var(--type-caption);color:var(--primary2)}

}

@media (min-width:640px) and (max-width:959px){
.workspace-app{grid-template-columns:76px minmax(0,1fr)}.workspace-sidebar{width:76px}.workspace-brand{padding:var(--space-4) .7rem}.workspace-brand .anva-brand>span:last-child{display:none}.workspace-brand .anva-brand{justify-content:center}.workspace-nav{padding:.75rem .5rem}.workspace-nav-label{display:none}.workspace-nav section+section{margin-top:.55rem}.workspace-nav-item{justify-content:center;padding:.55rem;position:relative}.workspace-nav-item>span:last-child{display:none}.workspace-nav-icon{width:36px;height:36px}.workspace-sidebar-foot{padding:.6rem}.workspace-user-mini{display:block;text-align:center}.workspace-user-mini>div{display:none}.workspace-avatar{margin:auto}.workspace-logout{font-size:var(--type-zero)}.workspace-logout::after{content:'↪';font-size:var(--type-body)}.workspace-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-grid-main{grid-template-columns:1fr}.workspace-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:639px){
.workspace-app{display:block;padding-bottom:var(--space-20)}.workspace-sidebar{display:none}.workspace-topbar{min-height:58px;padding:.55rem .85rem}.workspace-mobile-role{display:block;font-size:var(--type-caption);line-height:var(--leading-display);color:var(--primary);font-weight:var(--weight-heavy);letter-spacing:var(--tracking-label);text-transform:uppercase;margin-bottom:.25rem}.workspace-top-actions .anva-badge,.workspace-profile-link{display:none}.workspace-content{padding:.8rem}.workspace-hero{grid-template-columns:1fr;padding:var(--space-4);border-radius:var(--rlg)}.workspace-hero .anva-lead{font-size:var(--type-body-sm)}.workspace-scope-card{padding:.8rem}.workspace-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.workspace-kpi{padding:.8rem}.workspace-grid-main{grid-template-columns:1fr;gap:.65rem}.workspace-panel{padding:.9rem}.workspace-panel-head{display:block}.workspace-panel-head .anva-badge{margin-top:.5rem}.workspace-action-grid{grid-template-columns:1fr}.workspace-principle{display:block}.workspace-principle p{margin-top:.45rem}.workspace-table-wrap{margin:var(--space-0) -.4rem}.workspace-status-list>div{align-items:flex-start}.workspace-status-list strong{max-width:55%}
}

@media (min-width:1440px){
.workspace-app{grid-template-columns:300px minmax(0,1fr)}.workspace-content{padding:var(--space-8) var(--space-10)}.workspace-grid-main{grid-template-columns:minmax(0,1.75fr) minmax(320px,.65fr)}
}

/* Persistent Role Workspace Shell Recovery */
.workspace-embedded{min-width:0}
.workspace-embedded>.anva-card.anva-auth-card,.workspace-embedded>.anva-card.anva-auth-card-wide,.workspace-embedded .anva-auth-card,.workspace-embedded .anva-auth-card-wide{width:100%;max-width:none}
.workspace-embedded .anva-container{max-width:none;padding-left:var(--space-0);padding-right:var(--space-0)}
.workspace-embedded>.anva-section:first-child,.workspace-embedded>.anva-section-compact:first-child{padding-top:var(--space-0)}
.workspace-profile-link.is-active{background:var(--primarySoft);color:var(--primary)}


/* Embedded workspace density hardening */
@layer project{
.workspace-embedded>.anva-section{padding-bottom:var(--space-8)}
.workspace-embedded .anva-section-head{margin-bottom:var(--space-0)}
.workspace-embedded .anva-grid-4>.anva-kpi{min-width:0}
}
/* Stage 9 — Marketplace + Orders + Logistics */
.market-kpi-grid{align-items:stretch}.market-kpi{padding:var(--space-4) var(--space-4);min-width:0}.market-kpi span,.market-kpi small{display:block;color:var(--muted)}.market-kpi span{font-size:var(--type-label);font-weight:var(--weight-bold)}.market-kpi strong{display:block;margin:.28rem var(--space-0);font-size:var(--type-section-title);letter-spacing:var(--tracking-display);line-height:var(--leading-display)}.market-kpi small{font-size:var(--type-caption)}
.market-filter{display:grid;grid-template-columns:minmax(240px,1fr) auto auto;gap:.75rem;align-items:end}.market-listing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}.market-listing-card{overflow:hidden;min-width:0}.market-listing-image{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surface2)}.market-listing-placeholder,.market-detail-placeholder{display:grid;place-items:center;align-content:center;aspect-ratio:16/9;background:linear-gradient(135deg,var(--palette-0d3327),var(--palette-185b45));color:var(--color-surface);font-weight:var(--weight-heavy);letter-spacing:var(--tracking-label)}.market-listing-placeholder span,.market-detail-placeholder span{display:block;color:var(--palette-78d8aa)}.market-price{font-size:var(--type-card-title);font-weight:var(--weight-heavy);letter-spacing:var(--tracking-display);color:var(--text)}.market-price small{font-size:var(--type-caption);font-weight:var(--weight-semibold);color:var(--muted);letter-spacing:var(--tracking-normal);margin-left:.2rem}.market-price-large{font-size:var(--type-page-title)}.market-stock-line{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.market-stock-line span{padding:.65rem;border:1px solid var(--border);border-radius:var(--rsm);font-size:var(--type-caption);color:var(--muted)}.market-stock-line strong{display:block;margin-top:.2rem;color:var(--text);font-size:var(--type-body-sm)}.market-own-row{align-items:flex-start}.market-own-row>div:first-child strong,.market-own-row>div:first-child small{display:block}.market-own-row>div:first-child small{margin-top:.25rem;color:var(--muted)}
.market-detail-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(340px,1.1fr);gap:var(--space-4)}.market-detail-image{display:block;width:100%;height:100%;min-height:360px;object-fit:cover}.market-detail-placeholder{height:100%;min-height:360px;aspect-ratio:auto}.market-stat{padding:.8rem;border:1px solid var(--border);border-radius:var(--rmd);background:var(--surface2);min-width:0}.market-stat span,.market-stat strong{display:block}.market-stat span{font-size:var(--type-caption);color:var(--muted);text-transform:uppercase;letter-spacing:var(--tracking-label)}.market-stat strong{margin-top:.3rem;font-size:var(--type-body-sm);overflow-wrap:anywhere}.market-order-title{align-items:flex-end;margin:.4rem var(--space-0) var(--space-5)}.market-order-hero{overflow:hidden}
.workspace-embedded .market-listing-grid,.workspace-embedded .market-detail-grid{width:100%}.workspace-embedded .market-kpi strong{white-space:normal}.workspace-embedded .anva-table td small{display:block;color:var(--muted);margin-top:.15rem}
@media(max-width:1100px){.market-listing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.market-detail-grid{grid-template-columns:1fr}.market-detail-image,.market-detail-placeholder{min-height:300px}}
@media(max-width:720px){.market-filter{grid-template-columns:1fr}.market-listing-grid{grid-template-columns:1fr}.market-stock-line{grid-template-columns:1fr}.market-order-title{display:block}.market-order-title .market-price{margin-top:.8rem}.market-detail-image,.market-detail-placeholder{min-height:220px}.market-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.market-filter-advanced{grid-template-columns:minmax(220px,1.2fr) repeat(3,minmax(150px,.7fr)) auto}.market-filter-advanced>.anva-cluster{align-self:end;white-space:nowrap}@media(max-width:1200px){.market-filter-advanced{grid-template-columns:repeat(2,minmax(0,1fr))}.market-filter-advanced>.anva-cluster{grid-column:1/-1}}@media(max-width:720px){.market-filter-advanced{grid-template-columns:1fr}.market-filter-advanced>.anva-cluster{grid-column:auto}}

/* Stage 12 — Invoice + Finance */
@layer project{
.finance-page{padding-top:var(--space-0);display:grid;gap:var(--space-4)}
.finance-page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);padding:var(--space-4) var(--space-5);border:1px solid var(--border);border-radius:var(--rlg);background:linear-gradient(135deg,var(--surface),var(--palette-alpha-7458e199));box-shadow:var(--shadow1)}
.finance-page-head>div:first-child{min-width:0}.finance-page-head h1{margin-top:.25rem}.finance-page-head p{max-width:78ch;margin-top:.35rem}
.finance-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:flex-end}
.finance-page .anva-card+.anva-card{margin-top:var(--space-0)}.finance-page .anva-card-body{display:grid;gap:var(--space-4)}
.finance-page .anva-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem var(--space-4)}
.finance-page .anva-field-span-2,.finance-page .anva-form-span{grid-column:1/-1}
.finance-page .anva-field,.finance-page .anva-form-grid>label{display:grid;gap:.38rem;color:var(--text);font-size:var(--type-label);font-weight:var(--weight-bold)}
.finance-page input,.finance-page select,.finance-page textarea{width:100%;min-height:44px;border:1px solid var(--border2);border-radius:var(--rmd);background:var(--surface);color:var(--text);padding:.68rem .78rem;outline:none}
.finance-page textarea{min-height:96px;resize:vertical}.finance-page input:focus,.finance-page select:focus,.finance-page textarea:focus{border-color:var(--primary);box-shadow:var(--focus)}
.finance-page small{color:var(--muted)}
.finance-filter-row{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}.finance-filter-row input{min-width:220px;flex:1}.finance-filter-row select{width:auto;min-width:160px}
.finance-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.finance-kpi-card{padding:var(--space-4);border:1px solid var(--border);border-radius:var(--rlg);background:var(--surface);box-shadow:var(--shadow1);min-width:0}
.finance-kpi-card span,.finance-kpi-card small{display:block}.finance-kpi-card span{font-size:var(--type-caption);color:var(--muted);font-weight:var(--weight-bold)}.finance-kpi-card strong{display:block;margin:.3rem var(--space-0);font-size:var(--type-section-title);line-height:var(--leading-page);letter-spacing:var(--tracking-title);overflow-wrap:anywhere}
.finance-gap{gap:var(--space-4)}.finance-summary-list{display:grid;gap:.5rem;padding:var(--space-4);border:1px solid var(--border);border-radius:var(--rmd);background:var(--surface2)}.finance-summary-list>div{display:flex;justify-content:space-between;gap:var(--space-4)}.finance-summary-list>div.is-total{padding-top:.6rem;border-top:1px solid var(--border);font-size:var(--type-body)}.finance-note{padding:.85rem;border-radius:var(--rmd);background:var(--warningSoft)}
.finance-action-grid{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-start}.finance-inline-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.finance-inline-form input{width:min(290px,100%)}.finance-form-stack{display:grid;gap:.75rem}.finance-divider{border:0;border-top:1px solid var(--border);margin:.4rem var(--space-0)}
.finance-page .anva-record{display:flex;justify-content:space-between;gap:var(--space-4);align-items:flex-start}.finance-page .anva-record>div:last-child{display:grid;gap:.45rem;justify-items:end}
.finance-timeline{display:grid;gap:.7rem}.finance-timeline article{display:grid;grid-template-columns:14px minmax(0,1fr);gap:.7rem;position:relative}.finance-timeline article>span{width:10px;height:10px;margin-top:.4rem;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px var(--primarySoft)}.finance-timeline article>div{padding-bottom:.75rem;border-bottom:1px solid var(--border)}.finance-timeline article p{margin-top:.15rem}.finance-timeline article small{font-size:var(--type-caption)}
.finance-page .anva-alert{grid-template-columns:1fr}.finance-page .anva-empty{padding:var(--space-6)}
}
@media(max-width:959px){.finance-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.finance-page-head{align-items:flex-start;flex-direction:column}.finance-actions{justify-content:flex-start}}
@media(max-width:639px){.finance-page .anva-form-grid{grid-template-columns:1fr}.finance-page .anva-field-span-2,.finance-page .anva-form-span{grid-column:auto}.finance-kpi-grid{grid-template-columns:1fr 1fr}.finance-page .anva-record{display:grid}.finance-page .anva-record>div:last-child{justify-items:start}.finance-inline-form{display:grid;width:100%}.finance-inline-form input{width:100%}.finance-page-head{padding:.9rem}}

/* Stage 13 — Traceability + Mass Balance */
@layer project{
.stage13-page{padding-top:var(--space-0);display:grid;gap:var(--space-4)}.stage13-page>.anva-container{display:grid;gap:var(--space-4)}
.stage13-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);padding:var(--space-4) var(--space-5);border:1px solid var(--border);border-radius:var(--rlg);background:linear-gradient(135deg,var(--surface),var(--palette-alpha-7458e199));box-shadow:var(--shadow1)}.stage13-head h1{margin-top:.2rem}.stage13-head p{max-width:78ch;margin-top:.35rem}
.stage13-filter .anva-card-body{display:grid;gap:.55rem}.stage13-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.65rem}.stage13-search select,.stage13-search input{min-height:44px}
.stage13-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}.stage13-kpi{padding:var(--space-4);border:1px solid var(--border);border-radius:var(--rlg);background:var(--surface);box-shadow:var(--shadow1);min-width:0}.stage13-kpi span,.stage13-kpi small{display:block}.stage13-kpi>span{font-size:var(--type-caption);color:var(--muted);font-weight:var(--weight-bold)}.stage13-kpi strong{display:block;margin-top:.35rem;font-size:var(--type-section-title);letter-spacing:var(--tracking-title);line-height:var(--leading-page);overflow-wrap:anywhere}.stage13-kpi strong .anva-badge{display:inline-flex;margin-top:.35rem;font-size:var(--type-caption);letter-spacing:var(--tracking-normal)}
.stage13-section{margin-top:var(--space-0)}.stage13-section .anva-card-body{display:grid;gap:var(--space-4)}.stage13-section-title{display:flex;justify-content:space-between;gap:var(--space-4);align-items:flex-end}.stage13-table-wrap{overflow:auto}.stage13-table-wrap .anva-table{min-width:840px}
.stage13-flow{display:flex;gap:.7rem;overflow:auto;padding:.3rem .1rem .7rem;scroll-snap-type:x proximity}.stage13-node{flex:0 0 190px;min-height:118px;padding:.85rem;border:1px solid var(--border);border-radius:var(--rmd);background:var(--surface2);display:grid;align-content:start;gap:.35rem;scroll-snap-align:start;position:relative}.stage13-node:not(:last-child)::after{content:'→';position:absolute;right:-.57rem;top:50%;transform:translateY(-50%);z-index:2;color:var(--primary);font-weight:var(--weight-heavy)}.stage13-node>span{font-size:var(--type-caption);font-weight:var(--weight-heavy);letter-spacing:var(--tracking-label);color:var(--primary);text-transform:uppercase}.stage13-node strong{font-size:var(--type-label);line-height:var(--leading-tight)}.stage13-node small{color:var(--muted);font-size:var(--type-caption)}.stage13-node-source{background:var(--primarySoft)}.stage13-node-sbi{background:var(--palette-0c2f24);color:var(--color-surface)}.stage13-node-sbi>span,.stage13-node-sbi small{color:var(--palette-9ce2c1)}.stage13-node-gap{background:var(--dangerSoft);border-color:var(--palette-alpha-2282bd64)}
.stage13-source-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.stage13-source-grid article{padding:.85rem;border:1px solid var(--border);border-radius:var(--rmd);display:grid;gap:.2rem}.stage13-source-grid span{font-size:var(--type-caption);color:var(--muted)}.stage13-source-grid b{margin-top:.35rem;color:var(--primary)}.stage13-gap{border-color:var(--palette-alpha-cb67768b)}.stage13-action{display:flex;justify-content:flex-end}
.stage13-balance-equation{display:grid;grid-template-columns:repeat(9,auto);gap:.55rem;align-items:center;padding:var(--space-4);border:1px solid var(--border);border-radius:var(--rlg);background:var(--palette-0c2f24);color:var(--color-surface);overflow:auto}.stage13-balance-equation>div{min-width:130px}.stage13-balance-equation span,.stage13-balance-equation strong{display:block}.stage13-balance-equation span{font-size:var(--type-caption);color:var(--palette-alpha-0b1f9b16);text-transform:uppercase;letter-spacing:var(--tracking-label)}.stage13-balance-equation strong{margin-top:.25rem;font-size:var(--type-body)}.stage13-balance-equation>b{color:var(--palette-7fd8ad);font-size:var(--type-card-title)}
.stage13-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}.stage13-detail-grid article{padding:.8rem;border:1px solid var(--border);border-radius:var(--rmd);background:var(--surface2)}.stage13-detail-grid span,.stage13-detail-grid strong{display:block}.stage13-detail-grid span{font-size:var(--type-caption);color:var(--muted)}.stage13-detail-grid strong{margin-top:.25rem;font-size:var(--type-body-sm)}
}
@media(max-width:959px){.stage13-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.stage13-source-grid,.stage13-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stage13-head{align-items:flex-start;flex-direction:column}}
@media(max-width:639px){.stage13-search{grid-template-columns:1fr}.stage13-kpis,.stage13-source-grid,.stage13-detail-grid{grid-template-columns:1fr}.stage13-head{padding:.9rem}.stage13-action{justify-content:stretch}.stage13-action .anva-button{width:100%}}

/* Stage 14 — Advanced Analytics + Control Tower */
.stage14-page{padding-top:var(--space-0)}.stage14-page>.anva-container{display:grid;gap:var(--space-4);min-width:0}.stage14-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-4);align-items:end;padding:var(--space-5);border:1px solid var(--border);border-radius:var(--rlg);background:linear-gradient(135deg,var(--palette-0c2f24) 0%,var(--palette-154b38) 56%,var(--palette-1f674c) 100%);color:var(--color-surface);box-shadow:var(--shadow2)}.stage14-hero .anva-eyebrow{color:var(--palette-9ce2c1)}.stage14-hero h1{color:var(--color-surface);margin:.15rem var(--space-0)}.stage14-hero p{color:var(--palette-alpha-4a0eedf6);max-width:78ch}.stage14-hero-compact{align-items:center}.stage14-risk{min-width:150px;padding:.8rem .9rem;border:1px solid var(--palette-alpha-28e9e123);border-radius:var(--rmd);background:var(--palette-alpha-1f523d72);display:grid;gap:.15rem}.stage14-risk>span{font-size:var(--type-caption);color:var(--palette-alpha-380a83fb);font-weight:var(--weight-heavy);text-transform:uppercase;letter-spacing:var(--tracking-label)}.stage14-risk>strong{font-size:var(--type-title-sm);letter-spacing:var(--tracking-display)}.stage14-risk>.anva-badge{justify-self:start;margin-top:.2rem}.stage14-filter .anva-card-body{display:grid;gap:.7rem}.stage14-filter-grid{display:grid;grid-template-columns:170px 180px minmax(220px,1fr) auto;gap:.65rem;align-items:end}.stage14-period-meta{display:flex;justify-content:space-between;gap:.8rem;color:var(--muted);font-size:var(--type-caption)}.stage14-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.stage14-kpi-card{padding:var(--space-4);border:1px solid var(--border);border-radius:var(--rlg);background:var(--surface);box-shadow:var(--shadow1);display:grid;gap:.18rem;min-width:0;color:inherit;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.stage14-kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow2);border-color:var(--palette-alpha-6fb63a02)}.stage14-kpi-card>span{font-size:var(--type-caption);font-weight:var(--weight-heavy);color:var(--muted)}.stage14-kpi-card>strong{font-size:var(--type-section-title);line-height:var(--leading-display);letter-spacing:var(--tracking-display);overflow-wrap:anywhere}.stage14-kpi-card>small{font-size:var(--type-caption);color:var(--muted)}.stage14-kpi-card>em{margin-top:.45rem;padding-top:.45rem;border-top:1px dashed var(--border);font-size:var(--type-caption);font-style:normal;color:var(--primary);overflow-wrap:anywhere}.stage14-compact-kpis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.55rem}.stage14-compact-kpis>a{padding:.7rem;border:1px solid var(--border);border-radius:var(--rmd);background:var(--surface2);text-decoration:none;color:inherit;min-width:0}.stage14-compact-kpis span,.stage14-compact-kpis strong{display:block}.stage14-compact-kpis span{font-size:var(--type-caption);color:var(--muted);font-weight:var(--weight-bold)}.stage14-compact-kpis strong{margin-top:.25rem;font-size:var(--type-label);overflow-wrap:anywhere}.stage14-section{margin:var(--space-0)}.stage14-section .anva-card-body{display:grid;gap:.9rem}.stage14-section-note{margin:.35rem var(--space-0) var(--space-0);max-width:78ch;font-size:var(--type-caption);line-height:var(--leading-body);color:var(--muted)}.stage14-title-row{display:flex;justify-content:space-between;align-items:end;gap:var(--space-4)}.stage14-target-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}.stage14-target-grid article{padding:.8rem;border:1px solid var(--border);border-radius:var(--rmd);background:var(--surface2);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.55rem;align-items:end}.stage14-target-grid span,.stage14-target-grid strong,.stage14-target-grid small{display:block}.stage14-target-grid span{font-size:var(--type-caption);color:var(--muted);font-weight:var(--weight-bold)}.stage14-target-grid strong{margin-top:.2rem;font-size:var(--type-body)}.stage14-target-grid small{margin-top:.18rem;font-size:var(--type-caption);color:var(--muted)}.stage14-target-grid article>b{font-size:var(--type-body-sm);color:var(--primary)}.stage14-progress{grid-column:1/-1;height:6px;border-radius:999px;background:var(--border);overflow:hidden}.stage14-progress i{display:block;height:100%;border-radius:inherit;background:var(--primary)}.stage14-two-col{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:.8rem;min-width:0}.stage14-three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.stage14-chart-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}.stage14-chart-stack>div{min-height:150px;padding:.65rem;border:1px solid var(--border);border-radius:var(--rmd);background:var(--surface2);display:grid;grid-template-rows:auto 1fr;gap:.45rem}.stage14-chart-stack span{font-size:var(--type-caption);font-weight:var(--weight-bold);color:var(--muted)}.stage14-spark{width:100%;height:110px;overflow:visible}.stage14-spark polyline{fill:none;stroke:var(--primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.stage14-chart-stack>div:nth-child(2) .stage14-spark polyline{stroke:var(--warning)}.stage14-chart-stack>div:nth-child(3) .stage14-spark polyline{stroke:var(--palette-0c2f24)}.stage14-empty-chart{display:grid;place-items:center;min-height:100px;font-size:var(--type-caption);color:var(--muted);text-align:center}.stage14-chart-labels{display:flex;justify-content:space-between;gap:.2rem;overflow:hidden;color:var(--muted);font-size:var(--type-caption)}.stage14-alert-list{display:grid;gap:.55rem}.stage14-alert-list>a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.12rem .55rem;padding:.65rem .7rem;border:1px solid var(--border);border-radius:var(--rmd);text-decoration:none;color:inherit}.stage14-alert-list>a>span{grid-row:1/4;font-size:var(--type-caption);font-weight:var(--weight-heavy);letter-spacing:var(--tracking-label);padding-top:.1rem}.stage14-alert-list strong{font-size:var(--type-label)}.stage14-alert-list p{font-size:var(--type-caption);color:var(--muted);margin:var(--space-0)}.stage14-alert-list small{font-size:var(--type-caption);color:var(--muted)}.stage14-alert-high{background:var(--dangerSoft);border-color:var(--palette-alpha-cb67768b)}.stage14-alert-high>span{color:var(--danger)}.stage14-alert-medium{background:var(--warningSoft)}.stage14-alert-medium>span{color:var(--warning)}.stage14-alert-low>span{color:var(--primary)}.stage14-table-wrap{overflow:auto}.stage14-table-wrap .anva-table{min-width:760px}.stage14-table-wrap td small{display:block;color:var(--muted);font-size:var(--type-caption);margin-top:.12rem}.stage14-ranked{display:grid;gap:.5rem}.stage14-ranked>div{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:.55rem;align-items:center;padding:.55rem var(--space-0);border-bottom:1px solid var(--border)}.stage14-ranked>div:last-child{border-bottom:0}.stage14-ranked>div>b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--primarySoft);color:var(--primary);font-size:var(--type-caption)}.stage14-ranked span strong,.stage14-ranked span small{display:block}.stage14-ranked span strong{font-size:var(--type-caption)}.stage14-ranked span small{font-size:var(--type-caption);color:var(--muted);margin-top:.1rem}.stage14-ranked em{font-size:var(--type-caption);font-style:normal;font-weight:var(--weight-heavy);text-align:right}.stage14-aging{display:grid;gap:.65rem}.stage14-aging>div{display:grid;grid-template-columns:85px minmax(0,1fr) 105px;gap:.65rem;align-items:center}.stage14-aging span{font-size:var(--type-caption);color:var(--muted)}.stage14-aging i{height:9px;background:var(--border);border-radius:999px;overflow:hidden}.stage14-aging i b{display:block;height:100%;background:var(--primary);border-radius:inherit}.stage14-aging strong{font-size:var(--type-caption);text-align:right}.stage14-funnel{display:grid;gap:.45rem}.stage14-funnel>div{display:grid;grid-template-columns:125px minmax(0,1fr);align-items:center;gap:.55rem}.stage14-funnel span{font-size:var(--type-caption);color:var(--muted)}.stage14-funnel i{min-width:8%;height:28px;display:flex;align-items:center;padding:var(--space-0) .55rem;border-radius:var(--rsm);background:linear-gradient(90deg,var(--primary),var(--palette-4ba377));font-style:normal;color:white}.stage14-funnel i b{font-size:var(--type-caption);white-space:nowrap}.stage14-mass{border-color:var(--palette-alpha-5c341e04)}.stage14-mass-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem}.stage14-mass-grid>div{padding:.65rem;border:1px solid var(--border);border-radius:var(--rmd);background:var(--surface2)}.stage14-mass-grid span,.stage14-mass-grid strong{display:block}.stage14-mass-grid span{font-size:var(--type-caption);color:var(--muted)}.stage14-mass-grid strong{margin-top:.25rem;font-size:var(--type-body-sm);overflow-wrap:anywhere}.stage14-snapshot{display:flex;justify-content:flex-end}.stage14-source-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:.65rem;align-items:center;padding:.8rem;border:1px solid var(--border);border-radius:var(--rlg);background:var(--surface)}.stage14-source-proof span,.stage14-source-proof strong{display:block}.stage14-source-proof span{font-size:var(--type-caption);color:var(--muted)}.stage14-source-proof strong{margin-top:.15rem;font-size:var(--type-caption)}.stage14-target-form{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;gap:.65rem;align-items:end}.stage14-target-grid-page{grid-template-columns:repeat(4,minmax(0,1fr))}.workspace-embedded .stage14-page{padding-top:var(--space-0)}.workspace-embedded .stage14-hero{border-radius:var(--rlg)}
@media(max-width:1199px){.stage14-compact-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.stage14-target-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stage14-three-col{grid-template-columns:1fr}.stage14-target-form{grid-template-columns:repeat(3,minmax(0,1fr))}.stage14-target-form .anva-button{align-self:end}}
@media(max-width:959px){.stage14-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stage14-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stage14-two-col{grid-template-columns:1fr}.stage14-chart-stack{grid-template-columns:1fr}.stage14-chart-stack>div{min-height:120px}.stage14-spark{height:85px}.stage14-mass-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.stage14-source-proof{grid-template-columns:repeat(2,minmax(0,1fr))}.stage14-target-form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:639px){.stage14-hero{grid-template-columns:1fr;padding:var(--space-4)}.stage14-risk{min-width:0}.stage14-filter-grid,.stage14-kpi-grid,.stage14-target-grid,.stage14-compact-kpis,.stage14-mass-grid,.stage14-source-proof,.stage14-target-form{grid-template-columns:1fr}.stage14-period-meta{display:grid;gap:.2rem}.stage14-title-row{align-items:flex-start;flex-direction:column}.stage14-aging>div{grid-template-columns:72px minmax(0,1fr);}.stage14-aging strong{grid-column:2;text-align:left}.stage14-funnel>div{grid-template-columns:90px minmax(0,1fr)}.stage14-snapshot .anva-button{width:100%}.stage14-target-grid-page{grid-template-columns:1fr}}

/* Tahap 15 — Export Center */
.export-center{padding-top:var(--space-0)}.export-hero{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:var(--space-6);align-items:end;padding:var(--space-2) var(--space-0) var(--space-1)}.export-hero h1{margin:.2rem var(--space-0) .5rem}.export-trust{padding:var(--space-5);border:1px solid var(--anva-border,var(--palette-dbe5df));border-radius:18px;background:linear-gradient(145deg,var(--palette-f5fbf8),var(--color-surface));display:flex;flex-direction:column;align-items:flex-start}.export-trust strong{font-size:var(--type-section-title);line-height:var(--leading-display)}.export-trust span{margin-top:var(--space-2);color:var(--anva-muted,var(--palette-66756d))}.export-filter .anva-card-body{padding:var(--space-4)}.export-filter-grid{display:grid;grid-template-columns:1.15fr repeat(3,minmax(130px,.8fr));gap:var(--space-3);align-items:end}.export-filter-grid label{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--type-label);font-weight:var(--weight-semibold)}.export-filter-grid input,.export-filter-grid select{min-height:42px;border:1px solid var(--anva-border,var(--palette-d7e1dc));border-radius:10px;background:var(--color-surface);padding:var(--space-2) var(--space-2);min-width:0}.export-filter-search{grid-column:span 2}.export-filter-actions{display:flex;gap:var(--space-2);align-items:center}.export-section-head{display:flex;justify-content:space-between;gap:var(--space-4);align-items:end;margin-bottom:var(--space-3)}.export-section-head h2{margin:.15rem var(--space-0) var(--space-0)}.export-dataset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}.export-dataset-card .anva-card-body{height:100%;display:flex;flex-direction:column;gap:var(--space-2)}.export-dataset-card h3{margin:var(--space-1) var(--space-0)}.export-dataset-card p{margin:var(--space-0);color:var(--anva-muted,var(--palette-66756d));font-size:var(--type-body-sm)}.export-dataset-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--palette-e9f5ef);color:var(--palette-126047);font-weight:var(--weight-heavy)}.export-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:auto;padding-top:var(--space-2)}.export-actions a{font-size:var(--type-label);font-weight:var(--weight-bold);text-decoration:none;border:1px solid var(--palette-cbdad3);border-radius:999px;padding:var(--space-2) var(--space-2);color:var(--palette-174f3d);background:var(--color-surface)}.export-actions a:hover{background:var(--palette-edf7f2)}
@media(max-width:959px){.export-hero{grid-template-columns:1fr}.export-trust{max-width:320px}.export-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.export-filter-search{grid-column:span 1}.export-dataset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:639px){.export-filter-grid{grid-template-columns:1fr}.export-dataset-grid{grid-template-columns:1fr}.export-filter-actions{flex-wrap:wrap}.export-section-head{align-items:flex-start;flex-direction:column}.export-actions a{flex:1;text-align:center;min-width:90px}}

/* Tahap 16 — Reporting */
.report-center,.report-detail{padding-top:var(--space-0)}.report-hero{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:var(--space-6);align-items:end;padding:var(--space-2) var(--space-0) var(--space-1)}.report-hero h1,.report-detail-hero h1{margin:.2rem var(--space-0) .5rem}.report-trust{padding:var(--space-5);border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,var(--palette-f5fbf8),var(--color-surface));display:flex;flex-direction:column;align-items:flex-start}.report-trust strong{font-size:var(--type-section-title);line-height:var(--leading-display)}.report-trust span{margin-top:var(--space-2);color:var(--muted)}.report-trust small{margin-top:var(--space-1);color:var(--muted);font-size:var(--type-caption)}.report-filter .anva-card-body{padding:var(--space-4)}.report-filter-grid{display:grid;grid-template-columns:1.2fr repeat(2,minmax(140px,.8fr)) minmax(180px,1fr) auto;gap:var(--space-3);align-items:end}.report-filter-grid label{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--type-label);font-weight:var(--weight-semibold)}.report-filter-grid input,.report-filter-grid select{min-height:42px;border:1px solid var(--border);border-radius:10px;background:var(--color-surface);padding:var(--space-2) var(--space-2);min-width:0}.report-filter-actions{display:flex;gap:var(--space-2);align-items:center}.report-section-head{display:flex;justify-content:space-between;gap:var(--space-4);align-items:end;margin-bottom:var(--space-3)}.report-section-head h2{margin:.15rem var(--space-0) var(--space-0)}.report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}.report-card .anva-card-body{height:100%;display:flex;flex-direction:column;gap:var(--space-2)}.report-card h3{margin:var(--space-1) var(--space-0)}.report-card p{margin:var(--space-0);color:var(--muted);font-size:var(--type-body-sm);line-height:var(--leading-body)}.report-card-top{display:flex;justify-content:space-between;gap:var(--space-3);align-items:center}.report-card-top>span{font-size:var(--type-caption);color:var(--muted);font-weight:var(--weight-bold)}.report-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--palette-e9f5ef);color:var(--palette-126047);font-weight:var(--weight-heavy)}.report-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:auto;padding-top:var(--space-2)}.report-actions a,.report-source-actions a{font-size:var(--type-label);font-weight:var(--weight-bold);text-decoration:none;border:1px solid var(--palette-cbdad3);border-radius:999px;padding:var(--space-2) var(--space-2);color:var(--palette-174f3d);background:var(--color-surface)}.report-actions a:hover,.report-source-actions a:hover{background:var(--palette-edf7f2)}.report-actions .report-open{background:var(--palette-174f3d);color:var(--color-surface);border-color:var(--palette-174f3d)}.report-detail-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,430px);gap:var(--space-5);align-items:end;padding:var(--space-2) var(--space-0)}.report-detail-hero>div:first-child>p:last-child{max-width:82ch;color:var(--muted)}.report-output-panel{border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,var(--palette-0f3c2d),var(--palette-174f3d));color:var(--color-surface);padding:var(--space-4);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.report-output-panel>div{padding:var(--space-2) var(--space-2);border:1px solid var(--palette-alpha-d2a2e110);border-radius:10px}.report-output-panel strong,.report-output-panel span{display:block}.report-output-panel strong{font-size:var(--type-card-title)}.report-output-panel span{font-size:var(--type-caption);color:var(--palette-alpha-b239cee8)}.report-output-panel nav{grid-column:1/-1;display:flex;gap:var(--space-2);flex-wrap:wrap}.report-output-panel nav a{flex:1;text-align:center;min-width:90px;padding:var(--space-2) var(--space-2);border-radius:999px;background:var(--color-surface);color:var(--palette-174f3d);text-decoration:none;font-size:var(--type-label);font-weight:var(--weight-heavy)}.report-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}.report-meta>div{padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:12px;background:var(--surface2)}.report-meta span,.report-meta strong{display:block}.report-meta span{font-size:var(--type-caption);color:var(--muted)}.report-meta strong{margin-top:var(--space-1);font-size:var(--type-caption);overflow-wrap:anywhere}.report-section .anva-card-body{padding:var(--space-4)}.report-source-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}.report-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);margin-bottom:var(--space-3)}.report-summary>div{padding:var(--space-2);border-radius:10px;background:var(--surface2);border:1px solid var(--border)}.report-summary span,.report-summary strong{display:block}.report-summary span{font-size:var(--type-caption);color:var(--muted)}.report-summary strong{margin-top:var(--space-1);font-size:var(--type-body-sm);overflow-wrap:anywhere}.report-table-wrap{overflow:auto}.report-table-wrap .anva-table{min-width:900px}.report-preview-note{margin:var(--space-2) var(--space-0) var(--space-0);font-size:var(--type-caption);color:var(--muted)}.report-footer-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}.report-footer-actions span{font-size:var(--type-caption);color:var(--muted);text-align:right}.workspace-embedded .report-center,.workspace-embedded .report-detail{padding-top:var(--space-0)}
@media(max-width:1100px){.report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-filter-actions{align-self:end}.report-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.report-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:759px){.report-hero,.report-detail-hero{grid-template-columns:1fr}.report-trust{max-width:320px}.report-grid,.report-filter-grid,.report-summary,.report-meta{grid-template-columns:1fr}.report-section-head,.report-footer-actions{align-items:flex-start;flex-direction:column}.report-source-actions{width:100%}.report-source-actions a{flex:1;text-align:center}.report-footer-actions span{text-align:left}.report-output-panel{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ================================================================
   Tahap 17 — Adaptive UI + PWA
   Compact 0–639 | Medium 640–959 | Expanded 960–1439 | Wide 1440+
   ================================================================ */
@layer project{
.workspace-network{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--type-caption);font-weight:var(--weight-heavy);color:var(--success);padding:.35rem .5rem;border-radius:999px;background:var(--successSoft)}
.workspace-network::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.workspace-network.is-offline{color:var(--danger);background:var(--dangerSoft)}
.workspace-install-button{min-height:34px;border:1px solid var(--border2);border-radius:999px;background:var(--surface);color:var(--primary);padding:.35rem .65rem;font-size:var(--type-caption);font-weight:var(--weight-heavy);cursor:pointer}.workspace-install-button:hover,.workspace-install-button.is-ready{border-color:var(--primary);background:var(--primarySoft)}

.workspace-more-overlay{display:none}.workspace-more-sheet{padding-bottom:env(safe-area-inset-bottom)}.workspace-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.workspace-sheet-head h2{margin:var(--space-0);font-size:var(--type-card-title)}.workspace-sheet-close{width:38px;height:38px;border:1px solid var(--border);border-radius:50%;background:var(--surface2);font-size:var(--type-card-title);cursor:pointer}.workspace-sheet-body{display:grid;gap:var(--space-5)}.workspace-sheet-label{display:block;color:var(--muted);padding:var(--space-0);margin-bottom:.5rem}.workspace-sheet-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.workspace-sheet-links a{display:flex;align-items:center;gap:.65rem;min-width:0;padding:.72rem;border:1px solid var(--border);border-radius:.8rem;background:var(--surface2);color:var(--text);text-decoration:none;font-size:var(--type-label);font-weight:var(--weight-bold)}.workspace-sheet-links a.is-active{border-color:var(--primary);background:var(--primarySoft);color:var(--primary)}
.workspace-inspector{display:none}
.pwa-floating-install{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:65;border:0;border-radius:999px;background:var(--palette-0c2f24);color:var(--color-surface);padding:.72rem var(--space-4);font-size:var(--type-label);font-weight:var(--weight-heavy);box-shadow:0 14px 38px var(--palette-alpha-e2464f6e);cursor:pointer}.pwa-floating-install.is-ready{background:var(--primary)}
.pwa-install-guide{z-index:130}.pwa-guide-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.pwa-guide-head h2{margin:var(--space-0)}.pwa-guide-body{display:grid;gap:var(--space-4)}.pwa-guide-mark{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--palette-0f6b4b);color:var(--color-surface);font-size:var(--type-card-title);font-weight:var(--weight-heavy)}.pwa-guide-body ol{margin:var(--space-0);padding-left:var(--space-5);color:var(--muted);display:grid;gap:.6rem}.pwa-update-banner{position:fixed;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:125;width:min(560px,calc(100% - 1.5rem));display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:.75rem .9rem;border-radius:16px;background:var(--palette-102a21);color:var(--color-surface);box-shadow:var(--shadow3)}.pwa-update-banner strong,.pwa-update-banner span{display:block}.pwa-update-banner strong{font-size:var(--type-label)}.pwa-update-banner span{margin-top:.12rem;font-size:var(--type-caption);color:var(--palette-alpha-08f25b72)}.pwa-update-banner button{border:0;border-radius:999px;background:var(--palette-8de0b8);color:var(--palette-102a21);padding:.55rem .75rem;font-size:var(--type-caption);font-weight:var(--weight-heavy);white-space:nowrap;cursor:pointer}
html.is-offline .workspace-topbar{border-bottom-color:var(--palette-efc6c6)}.workspace-body{min-height:100dvh}.workspace-sidebar{height:100dvh}
}

/* Compact workspace content moved to mobile-contract.css in Tahap 20.5. */

/* Medium — compact navigation rail, content remains fluid. */
@media (min-width:640px) and (max-width:959px){
.workspace-sidebar{box-shadow:6px 0 24px var(--palette-alpha-a833e54c)}
.workspace-nav-item{min-height:48px}.workspace-nav-icon{font-size:var(--type-body)}.workspace-content{padding:var(--space-5)}
}

/* Expanded — permanent full sidebar. */
@media (min-width:960px) and (max-width:1439px){
.workspace-app{grid-template-columns:280px minmax(0,1fr)}.workspace-sidebar{width:auto}.workspace-content{max-width:1500px}
}

/* Wide — full sidebar + context inspector. */
@media (min-width:1440px){
.workspace-app{grid-template-columns:300px minmax(0,1fr) 300px}
.workspace-inspector{display:block;position:sticky;top:0;height:100dvh;overflow:auto;padding:var(--space-5);border-left:1px solid var(--border);background:linear-gradient(180deg,var(--palette-f8fbf9),var(--palette-f2f7f4));z-index:15}
.workspace-inspector-head{padding:var(--space-4);border-radius:16px;background:var(--palette-0c2f24);color:var(--color-surface);margin-bottom:.8rem}.workspace-inspector-head p{font-size:var(--type-caption);font-weight:var(--weight-heavy);letter-spacing:var(--tracking-label);color:var(--palette-8de0b8)}.workspace-inspector-head strong{display:block;margin-top:.25rem;font-size:var(--type-body)}
.workspace-inspector-block{padding:.8rem .2rem;border-bottom:1px solid var(--border)}.workspace-inspector-block span,.workspace-inspector-block strong{display:block}.workspace-inspector-block span{font-size:var(--type-caption);color:var(--muted);text-transform:uppercase;letter-spacing:var(--tracking-label);font-weight:var(--weight-heavy)}.workspace-inspector-block strong{margin-top:.28rem;font-size:var(--type-label);overflow-wrap:anywhere}.workspace-inspector-block strong.is-offline{color:var(--danger)}
.workspace-inspector-actions{display:grid;gap:.45rem;margin-top:var(--space-4)}.workspace-inspector-actions a,.workspace-inspector-actions button{min-height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border2);border-radius:10px;background:var(--surface);color:var(--primary);text-decoration:none;font:inherit;font-size:var(--type-caption);font-weight:var(--weight-heavy);cursor:pointer}.workspace-inspector-actions a:hover,.workspace-inspector-actions button:hover{background:var(--primarySoft);border-color:var(--primary)}.workspace-inspector-note{margin-top:var(--space-4);font-size:var(--type-caption);line-height:var(--leading-body);color:var(--muted)}
.workspace-content{max-width:none;padding:var(--space-8)}
}

@media (prefers-reduced-motion:reduce){.pwa-update-banner,.pwa-floating-install,.workspace-more-sheet{transition:none;animation:none}}


/* Historical regression markers — non-runtime, preserved cumulatively:
.workspace-embedded .stage14-page{padding-top:0}
.workspace-embedded .anva-section-head{margin-bottom:0}
.workspace-embedded>.anva-section{padding-bottom:2rem}
*/


/* ===== SOURCE: core-components.css ===== */
/*
 * Biomass ANVA — Core Components v2 — Tahap 20.6
 * Canonical visual contract for reusable UI controls and data components.
 * Loaded after legacy project.css so old feature views inherit the new component language,
 * and before workspace shell / responsive contracts so viewport-specific density remains authoritative.
 */
@layer project {
  :root {
    --component-radius: 10px;
    --component-radius-lg: 12px;
    --component-border: var(--color-border-strong);
    --component-border-hover: var(--palette-b8b8b2);
    --component-bg: var(--color-surface);
    --component-bg-subtle: var(--color-surface-subtle);
    --component-bg-muted: var(--color-surface-muted);
    --component-height: 44px;
    --component-height-sm: 34px;
    --component-shadow: 0 1px 2px var(--palette-alpha-dc96b382);
    --component-shadow-raised: 0 10px 30px var(--palette-alpha-2e237837);
  }

  /* ---------- Button ---------- */
  .anva-button {
    min-height: var(--component-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap:var(--space-2);
    max-width: 100%;
    padding:var(--space-2) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--component-radius);
    background: var(--component-bg);
    color: var(--color-text);
    font-size:var(--type-body-sm);
    font-weight: var(--weight-semibold);
    line-height:var(--leading-tight);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
    user-select: none;
    transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
  }
  .anva-button:hover { transform: none; }
  @media (hover:hover) {
    .anva-button:hover { border-color: var(--component-border-hover); background: var(--component-bg-subtle); }
  }
  .anva-button:active { transform: translateY(1px); }
  .anva-button:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; box-shadow: var(--focus-ring); }
  .anva-button-primary { background: var(--color-action); border-color: var(--color-action); color: var(--color-text-inverse); box-shadow: var(--shadow-action); }
  @media (hover:hover) { .anva-button-primary:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); } }
  .anva-button-secondary { background: var(--component-bg); border-color: var(--component-border); color: var(--color-text); }
  .anva-button-ghost { background: transparent; border-color: transparent; color: var(--color-text); }
  @media (hover:hover) { .anva-button-ghost:hover { background: var(--component-bg-subtle); border-color: transparent; } }
  .anva-button-danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-surface); }
  @media (hover:hover) { .anva-button-danger:hover { background: var(--palette-983a34); border-color: var(--palette-983a34); } }
  .anva-button-sm,
  .anva-button-small { min-height: var(--component-height-sm); padding:var(--space-2) var(--space-2); border-radius: 8px; font-size:var(--type-caption); }
  .anva-button-icon { width: var(--component-height); padding-inline:var(--space-0); }
  .anva-button-block { width: 100%; }
  .anva-button[disabled],
  .anva-button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; }
  .anva-button svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

  /* ---------- Field / Input / Select / Search ---------- */
  .anva-form { display: grid; gap:var(--space-4); }
  .anva-field { display: grid; gap:var(--space-2); min-width: 0; }
  .anva-label,
  .workspace-embedded form label > span:first-child { color: var(--color-text); font-size:var(--type-label); font-weight: var(--weight-semibold); line-height:var(--leading-compact); }
  .anva-hint { color: var(--color-text-muted); font-size:var(--type-caption); line-height:var(--leading-compact); }
  .anva-field-error { color: var(--color-danger); font-size:var(--type-caption); font-weight: var(--weight-semibold); line-height:var(--leading-compact); }

  .anva-input,
  .anva-select,
  .anva-textarea,
  .workspace-embedded input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  .workspace-embedded select,
  .workspace-embedded textarea {
    width: 100%;
    min-width: 0;
    min-height: var(--component-height);
    border: 1px solid var(--component-border);
    border-radius: var(--component-radius);
    background: var(--component-bg);
    color: var(--color-text);
    padding:var(--space-2) var(--space-3);
    font-size:var(--type-body-sm);
    line-height:var(--leading-compact);
    outline: none;
    box-shadow: inset 0 1px 0 var(--palette-alpha-a7d3886b);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
  }
  .anva-input::placeholder,
  .anva-textarea::placeholder,
  .workspace-embedded input::placeholder,
  .workspace-embedded textarea::placeholder { color: var(--color-text-subtle); opacity: 1; }
  @media (hover:hover) {
    .anva-input:hover,
    .anva-select:hover,
    .anva-textarea:hover,
    .workspace-embedded input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):hover,
    .workspace-embedded select:hover,
    .workspace-embedded textarea:hover { border-color: var(--component-border-hover); }
  }
  .anva-input:focus,
  .anva-select:focus,
  .anva-textarea:focus,
  .workspace-embedded input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
  .workspace-embedded select:focus,
  .workspace-embedded textarea:focus { border-color: var(--focus-color); box-shadow: var(--focus-ring); }
  .anva-input:disabled,
  .anva-select:disabled,
  .anva-textarea:disabled,
  .workspace-embedded input:disabled,
  .workspace-embedded select:disabled,
  .workspace-embedded textarea:disabled { background: var(--component-bg-subtle); color: var(--color-text-subtle); cursor: not-allowed; }
  .anva-input[aria-invalid="true"],
  .anva-select[aria-invalid="true"],
  .anva-textarea[aria-invalid="true"] { border-color: var(--color-danger); }
  .anva-textarea,
  .workspace-embedded textarea { min-height: 112px; resize: vertical; }
  .anva-select,
  .workspace-embedded select { cursor: pointer; }

  .anva-search { position: relative; display: flex; align-items: center; min-width: 0; }
  .anva-search .anva-input,
  .anva-search input { padding-left:var(--space-10); padding-right:var(--space-10); }
  .anva-search-icon { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--color-text-subtle); pointer-events: none; }
  .anva-search-clear { position: absolute; right: 5px; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text-muted); cursor: pointer; }
  .anva-search-clear[hidden] { display: none; }
  @media (hover:hover) { .anva-search-clear:hover { background: var(--component-bg-subtle); color: var(--color-text); } }
  .anva-input-group { display: flex; min-width: 0; }
  .anva-input-group > * { border-radius: 0; }
  .anva-input-group > :first-child { border-radius: var(--component-radius) 0 0 var(--component-radius); }
  .anva-input-group > :last-child { border-radius: 0 var(--component-radius) var(--component-radius) 0; }
  .anva-input-affix { min-height: var(--component-height); display: inline-flex; align-items: center; padding:var(--space-0) var(--space-3); border: 1px solid var(--component-border); background: var(--component-bg-subtle); color: var(--color-text-muted); font-size:var(--type-label); }

  /* Native boolean controls */
  .anva-check,
  .anva-radio { display: inline-flex; align-items: flex-start; gap:var(--space-2); color: var(--color-text); font-size:var(--type-body-sm); cursor: pointer; }
  .anva-check input,
  .anva-radio input { width: 18px; height: 18px; margin-top:var(--space-1); accent-color: var(--color-action); }
  .anva-switch { display: inline-flex; align-items: center; gap:var(--space-2); cursor: pointer; }
  .anva-switch input { position: absolute; opacity: 0; pointer-events: none; }
  .anva-switch-track { width: 42px; height: 24px; padding:var(--space-1); border: 1px solid var(--component-border); border-radius: 999px; background: var(--component-bg-muted); transition: background var(--duration-fast), border-color var(--duration-fast); }
  .anva-switch-track::after { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--color-surface); box-shadow: 0 1px 3px var(--palette-alpha-7dc03103); transition: transform var(--duration-fast); }
  .anva-switch input:checked + .anva-switch-track { background: var(--color-action); border-color: var(--color-action); }
  .anva-switch input:checked + .anva-switch-track::after { transform: translateX(18px); }
  .anva-switch input:focus-visible + .anva-switch-track { outline: 2px solid var(--focus-color); outline-offset: 2px; }

  /* ---------- Card / KPI ----------
   Tahap 21.2: canonical Card/KPI base ownership lives in anva-components.css; surface ownership is canonical there.
   core-components.css intentionally does not redeclare .anva-card or .anva-kpi.
   The Stage 20.6 fixed KPI value typography contract remains a non-surface refinement. ---------- */
  .anva-kpi-value { font-size:var(--type-title-sm); }

  /* ---------- Badge / status ---------- */
  .anva-badge {
    display: inline-flex;
    align-items: center;
    gap:var(--space-2);
    width: max-content;
    max-width: 100%;
    min-height: 24px;
    padding:var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--component-bg-subtle);
    color: var(--color-text-muted);
    font-size:var(--type-caption);
    font-weight: var(--weight-semibold);
    line-height:var(--leading-tight);
    white-space: nowrap;
  }
  .anva-badge-success { border-color: var(--palette-cbe4d5); background: var(--color-success-soft); color: var(--color-success); }
  .anva-badge-warning { border-color: var(--palette-ead9ad); background: var(--color-warning-soft); color: var(--color-warning); }
  .anva-badge-danger { border-color: var(--palette-edcbc7); background: var(--color-danger-soft); color: var(--color-danger); }
  .anva-badge-info { border-color: var(--palette-cbdced); background: var(--color-info-soft); color: var(--color-info); }
  .anva-badge-primary { border-color: var(--color-action-border); background: var(--color-action-soft); color: var(--color-action); }
  .anva-status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }

  /* ---------- Tabs / filters ---------- */
  .anva-tabs { display: flex; gap:var(--space-1); max-width: 100%; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--color-border); scrollbar-width: thin; }
  .anva-tab { position: relative; flex: 0 0 auto; min-height: 42px; padding:var(--space-2) var(--space-3); border: 0; border-radius: 8px 8px 0 0; background: transparent; color: var(--color-text-muted); font-size:var(--type-label); font-weight: var(--weight-semibold); line-height:var(--leading-tight); white-space: nowrap; cursor: pointer; }
  @media (hover:hover) { .anva-tab:hover { background: var(--component-bg-subtle); color: var(--color-text); } }
  .anva-tab[aria-selected="true"] { color: var(--color-text); }
  .anva-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--color-action); }
  .anva-tab-panel { padding-top:var(--space-4); }
  .anva-tab-panel[hidden] { display: none; }

  .anva-filterbar { display: flex; flex-wrap: wrap; gap:var(--space-2); }
  .anva-filter { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding:var(--space-2) var(--space-2); border: 1px solid var(--component-border); border-radius: 999px; background: var(--component-bg); color: var(--color-text-muted); font-size:var(--type-caption); font-weight: var(--weight-semibold); line-height:var(--leading-tight); white-space: nowrap; cursor: pointer; }
  @media (hover:hover) { .anva-filter:hover { background: var(--component-bg-subtle); color: var(--color-text); } }
  .anva-filter[aria-pressed="true"],
  .anva-filter.is-active { border-color: var(--color-action); background: var(--color-action); color: var(--color-surface); }

  /* ---------- Table ---------- */
  .anva-table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--component-radius-lg); background: var(--component-bg); box-shadow: var(--component-shadow); }
  .anva-table { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; background: var(--component-bg); color: var(--color-text); }
  .anva-table th,
  .anva-table td { padding:var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; line-height:var(--leading-compact); }
  .anva-table th { position: sticky; top: 0; z-index: 1; background: var(--component-bg-subtle); color: var(--color-text-muted); font-size:var(--type-caption); font-weight: var(--weight-semibold); letter-spacing:var(--tracking-label); text-transform: uppercase; white-space: nowrap; }
  .anva-table td { font-size:var(--type-label); }
  .anva-table tbody tr:last-child td { border-bottom: 0; }
  @media (hover:hover) { .anva-table tbody tr:hover td { background: var(--palette-fafaf8); } }
  .anva-table td[data-numeric],
  .anva-table th[data-numeric],
  .anva-table .is-numeric { text-align: right; font-variant-numeric: tabular-nums; }
  .anva-table-actions { display: flex; justify-content: flex-end; gap:var(--space-2); white-space: nowrap; }

  /* ---------- Mobile record card ---------- */
  .anva-record-list { display: grid; gap:var(--space-2); }
  .anva-record { min-width: 0; padding:var(--space-3); border: 1px solid var(--color-border); border-radius: var(--component-radius-lg); background: var(--component-bg); box-shadow: var(--component-shadow); }
  .anva-record-head { display: flex; align-items: flex-start; justify-content: space-between; gap:var(--space-2); }
  .anva-record-head > strong { min-width: 0; font-size:var(--type-body-sm); line-height:var(--leading-compact); overflow-wrap: anywhere; }
  .anva-record-grid { margin-top:var(--space-3); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:var(--space-2) var(--space-3); }
  .anva-record-key { color: var(--color-text-subtle); font-size:var(--type-caption); font-weight: var(--weight-semibold); line-height:var(--leading-tight); text-transform: uppercase; letter-spacing:var(--tracking-label); }
  .anva-record-value { margin-top:var(--space-1); color: var(--color-text); font-size:var(--type-label); font-weight: var(--weight-medium); line-height:var(--leading-compact); overflow-wrap: anywhere; }
  .anva-record-actions { margin-top:var(--space-3); padding-top:var(--space-3); border-top: 1px solid var(--color-border); display: flex; gap:var(--space-2); flex-wrap: wrap; }

  /* ---------- Alert ---------- */
  .anva-alert { display: grid; grid-template-columns: auto minmax(0,1fr); gap:var(--space-3); padding:var(--space-3); border: 1px solid var(--color-border); border-radius: var(--component-radius-lg); background: var(--component-bg); color: var(--color-text); }
  .anva-alert-success { border-color: var(--palette-cbe4d5); background: var(--color-success-soft); }
  .anva-alert-warning { border-color: var(--palette-ead9ad); background: var(--color-warning-soft); }
  .anva-alert-danger { border-color: var(--palette-edcbc7); background: var(--color-danger-soft); }
  .anva-alert-info { border-color: var(--palette-cbdced); background: var(--color-info-soft); }
  .anva-alert-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--palette-alpha-b239cee8); color: currentColor; font-size:var(--type-label); font-weight: var(--weight-bold); }
  .anva-alert p { margin-top:var(--space-1); color: inherit; opacity: .8; font-size:var(--type-label); line-height:var(--leading-compact); }

  /* ---------- Empty state ---------- */
  .anva-empty { display: grid; justify-items: center; padding:var(--space-8) var(--space-5); border: 1px dashed var(--color-border-strong); border-radius: var(--component-radius-lg); background: var(--component-bg); text-align: center; }
  .anva-empty-icon { width: 48px; height: 48px; margin:var(--space-0) var(--space-0) var(--space-3); display: grid; place-items: center; border-radius: 12px; background: var(--component-bg-subtle); color: var(--color-text-muted); font-size:var(--type-card-title); }
  .anva-empty h3 { font-size:var(--type-body); }
  .anva-empty p { max-width: 48ch; margin:var(--space-2) auto var(--space-4); color: var(--color-text-muted); font-size:var(--type-label); line-height:var(--leading-compact); }

  /* ---------- Pagination ---------- */
  .anva-pagination { display: flex; align-items: center; justify-content: space-between; gap:var(--space-3); min-width: 0; }
  .anva-pagination-info { color: var(--color-text-muted); font-size:var(--type-caption); line-height:var(--leading-compact); }
  .anva-pagination-list { display: flex; align-items: center; gap:var(--space-1); list-style: none; }
  .anva-page-link { min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding:var(--space-1) var(--space-2); border: 1px solid var(--component-border); border-radius: 8px; background: var(--component-bg); color: var(--color-text); font-size:var(--type-caption); font-weight: var(--weight-semibold); text-decoration: none; }
  @media (hover:hover) { .anva-page-link:hover { background: var(--component-bg-subtle); } }
  .anva-page-link[aria-current="page"] { border-color: var(--color-action); background: var(--color-action); color: var(--color-surface); }
  .anva-page-link[aria-disabled="true"] { opacity: .4; pointer-events: none; }
  .anva-page-ellipsis { min-width: 28px; text-align: center; color: var(--color-text-subtle); }

  /* ---------- Dialog / confirmation ---------- */
  .anva-dialog {
    width: min(560px, calc(100% - 32px));
    max-height: min(84vh, 760px);
    padding:var(--space-0);
    border: 1px solid var(--component-border);
    border-radius: var(--radius-lg);
    background: var(--component-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-3);
    overflow: hidden;
  }
  .anva-dialog::backdrop { background: var(--overlay-color); backdrop-filter: blur(3px); }
  .anva-dialog[open] { animation: anvaDialogIn var(--duration-medium) var(--ease-standard); }
  @keyframes anvaDialogIn { from { opacity: 0; transform: translateY(8px) scale(.985); } }
  .anva-dialog-head,
  .anva-dialog-body,
  .anva-dialog-foot { padding:var(--space-4); }
  .anva-dialog-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:var(--space-3);
    border-bottom: 1px solid var(--component-border);
    background: var(--component-bg);
  }
  .anva-dialog-head h2,
  .anva-dialog-head h3 { min-width:0; font-size:var(--type-card-title); line-height:var(--leading-tight); }
  .anva-dialog-body { overflow: auto; color:var(--color-text-muted); font-size:var(--type-body); line-height:var(--leading-body); }
  .anva-dialog-body > :first-child { margin-top:var(--space-0); }
  .anva-dialog-body > :last-child { margin-bottom:var(--space-0); }
  .anva-dialog-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap:var(--space-2);
    border-top: 1px solid var(--component-border);
    background: var(--component-bg);
  }
  .anva-dialog-close {
    width:var(--touch-target);
    height:var(--touch-target);
    min-width:var(--touch-target);
    min-height:var(--touch-target);
    display:grid;
    place-items:center;
    margin:calc(var(--space-1) * -1);
    padding:var(--space-0);
    border:1px solid var(--component-border);
    border-radius:var(--component-radius);
    background:var(--component-bg-subtle);
    color:var(--color-text);
    cursor:pointer;
  }
  .anva-dialog-close svg { width:var(--icon-sm); height:var(--icon-sm); }
  .anva-system-dialog .anva-dialog-copy { display:grid; gap:var(--space-2); }
  .anva-system-dialog .anva-dialog-copy strong { color:var(--color-text); font-size:var(--type-body); line-height:var(--leading-tight); }
  .anva-system-dialog .anva-dialog-input { margin-top:var(--space-3); }
  @media (hover:hover) {
    .anva-dialog-close:hover { border-color:var(--color-border-strong); background:var(--component-bg-muted); }
  }

  /* ---------- Drawer / sheet / overlay ---------- */
  .anva-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; background: var(--overlay-color); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--duration-medium), visibility var(--duration-medium); }
  .anva-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
  .anva-drawer { position: absolute; inset: 0 0 0 auto; width: min(440px, 92vw); height: 100%; display: flex; flex-direction: column; overflow: hidden; border-left: 1px solid var(--color-border); background: var(--component-bg); box-shadow: var(--shadow-3); transform: translateX(100%); transition: transform var(--duration-medium) var(--ease-standard); }
  .anva-overlay.is-open .anva-drawer { transform: translateX(0); }
  .anva-sheet { position: absolute; left: 50%; bottom: 0; width: min(680px, 100%); max-height: min(82vh, 760px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--component-bg); box-shadow: var(--shadow-3); transform: translate(-50%, 100%); transition: transform var(--duration-medium) var(--ease-standard); }
  .anva-overlay.is-open .anva-sheet { transform: translate(-50%, 0); }
  .anva-overlay-panel-head { flex: 0 0 auto; padding:var(--space-4) var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--component-bg); }
  .anva-overlay-panel-body { min-height: 0; overflow: auto; padding:var(--space-4) var(--space-4); }
  .anva-overlay-panel-foot { flex: 0 0 auto; padding:var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); background: var(--component-bg); }

  /* ---------- Toast ---------- */
  .anva-toast-region {
    position: fixed;
    z-index: var(--z-toast);
    right:var(--space-4);
    bottom:var(--space-4);
    width:min(390px,calc(100% - (var(--space-4) * 2)));
    display:grid;
    gap:var(--space-2);
    pointer-events:none;
  }
  .anva-toast {
    --toast-accent:var(--color-success);
    pointer-events:auto;
    display:grid;
    grid-template-columns:var(--space-8) minmax(0,1fr) var(--touch-target);
    align-items:start;
    gap:var(--space-3);
    padding:var(--space-3);
    border:1px solid var(--component-border);
    border-left:3px solid var(--toast-accent);
    border-radius:var(--radius-md);
    background:var(--component-bg);
    color:var(--color-text);
    box-shadow:var(--component-shadow-raised);
    animation:anvaToastIn var(--duration-medium) var(--ease-standard);
  }
  .anva-toast[data-type="success"] { --toast-accent:var(--color-success); }
  .anva-toast[data-type="warning"] { --toast-accent:var(--color-warning); }
  .anva-toast[data-type="danger"] { --toast-accent:var(--color-danger); }
  .anva-toast[data-type="info"] { --toast-accent:var(--color-info); }
  .anva-toast-icon {
    width:var(--space-8);
    height:var(--space-8);
    display:grid;
    place-items:center;
    border-radius:var(--radius-sm);
    background:var(--component-bg-subtle);
    color:var(--toast-accent);
    font-size:var(--type-caption);
    font-weight:var(--weight-bold);
  }
  .anva-toast-copy { min-width:0; padding-top:var(--space-1); }
  .anva-toast strong { display:block; color:var(--color-text); font-size:var(--type-label); line-height:var(--leading-compact); }
  .anva-toast p { margin-top:var(--space-1); color:var(--color-text-muted); font-size:var(--type-caption); line-height:var(--leading-compact); overflow-wrap:anywhere; }
  .anva-toast .anva-toast-close {
    width:var(--touch-target);
    height:var(--touch-target);
    min-width:var(--touch-target);
    min-height:var(--touch-target);
    display:grid;
    place-items:center;
    align-self:center;
    padding:var(--space-0);
    border:1px solid var(--component-border);
    border-radius:var(--component-radius);
    background:var(--component-bg-subtle);
    color:var(--color-text);
    cursor:pointer;
  }
  .anva-toast .anva-toast-close svg { width:var(--icon-sm); height:var(--icon-sm); }
  @media (hover:hover) {
    .anva-toast .anva-toast-close:hover { border-color:var(--color-border-strong); background:var(--component-bg-muted); }
  }
  @keyframes anvaToastIn { from { opacity:0; transform:translateY(var(--space-2)); } }

  /* ---------- Loading / progress ---------- */
  .anva-skeleton { position: relative; overflow: hidden; min-height: 1rem; border-radius: 8px; background: var(--component-bg-muted); color: transparent; }
  .anva-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg,transparent,var(--palette-alpha-86939c19),transparent); animation: anvaShimmer 1.35s infinite; }
  @keyframes anvaShimmer { to { transform: translateX(100%); } }
  .anva-progress { height: 8px; overflow: hidden; border-radius: 999px; background: var(--component-bg-muted); }
  .anva-progress-bar { height: 100%; width: 0; border-radius: inherit; background: var(--color-action); transition: width var(--duration-slow) var(--ease-standard); }

  /* ---------- Compatibility normalization ---------- */
  .workspace-embedded .export-filter-grid input,
  .workspace-embedded .export-filter-grid select,
  .workspace-embedded .report-filter-grid input,
  .workspace-embedded .report-filter-grid select { border-color: var(--component-border); border-radius: var(--component-radius); background: var(--component-bg); color: var(--color-text); }
  .workspace-embedded .export-actions a,
  .workspace-embedded .report-actions a,
  .workspace-embedded .report-source-actions a { border-color: var(--component-border); background: var(--component-bg); color: var(--color-text); }
  .workspace-embedded .report-actions .report-open { border-color: var(--color-action); background: var(--color-action); color: var(--color-surface); }

  @media (max-width: 639px) {
    .anva-toast-region {
      right:var(--space-3);
      bottom:calc(var(--workspace-mobile-nav-height, var(--space-0)) + env(safe-area-inset-bottom, 0px) + var(--space-3));
      width:calc(100% - (var(--space-3) * 2));
    }
    .anva-dialog {
      inset:auto 0 0 0;
      width:100%;
      max-width:none;
      max-height:min(88dvh,760px);
      margin:var(--space-0);
      border-width:1px 0 0;
      border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    }
    .anva-dialog-head,
    .anva-dialog-body,
    .anva-dialog-foot { padding-inline:var(--space-4); }
    .anva-dialog-foot {
      flex-direction:column-reverse;
      align-items:stretch;
      padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom,var(--space-0)));
    }
    .anva-dialog-foot .anva-button { width: 100%; }
    .anva-drawer { width: min(92vw, 390px); }
    .anva-sheet { max-height: 88dvh; padding-bottom:env(safe-area-inset-bottom,var(--space-0)); }
    .anva-record-grid { grid-template-columns: 1fr; }
    .anva-pagination { align-items: flex-start; flex-direction: column; }
    .anva-pagination-list { max-width: 100%; overflow-x: auto; padding-bottom:var(--space-1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .anva-dialog[open],
    .anva-toast,
    .anva-drawer,
    .anva-sheet { animation: none; transition: none; }
  }
}


/* Tahap 21 Universal UI native acquisition — canonical ANVA ownership. */
@layer project {
  .anva-data-grid { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--component-radius-lg); background: var(--color-surface); box-shadow: var(--shadow-1); }
  .anva-data-grid-toolbar { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:var(--space-2); padding:var(--space-3); border-bottom:1px solid var(--color-border); }
  .anva-data-grid-search { flex:1 1 260px; max-width:420px; }
  .anva-data-grid-controls { display:flex; flex-wrap:wrap; gap:var(--space-2); }
  .anva-data-grid-scroll { overflow-x:auto; }
  .anva-data-grid table { width:100%; min-width:720px; border-collapse:collapse; }
  .anva-data-grid th { padding:var(--space-3) var(--space-3); color:var(--color-text-muted); background:var(--color-surface-subtle); font-size:var(--type-caption); font-weight:var(--weight-bold); text-align:left; white-space:nowrap; }
  .anva-data-grid th[data-sort] { cursor:pointer; user-select:none; }
  .anva-data-grid th[data-sort]::after { content:"↕"; margin-inline-start:6px; color:var(--color-text-subtle); }
  .anva-data-grid th[aria-sort="ascending"]::after { content:"↑"; color:var(--color-biomass); }
  .anva-data-grid th[aria-sort="descending"]::after { content:"↓"; color:var(--color-biomass); }
  .anva-data-grid td { padding:var(--space-3) var(--space-3); border-bottom:1px solid var(--color-border); vertical-align:middle; font-size:var(--type-caption); }
  .anva-data-grid tbody tr:last-child td { border-bottom:0; }
  .anva-data-grid tbody tr:hover td { background:var(--color-surface-subtle); }
  .anva-data-grid-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-top:1px solid var(--color-border); color:var(--color-text-muted); font-size:var(--type-caption); }
  .anva-data-grid-pager { display:flex; align-items:center; gap:var(--space-1); }
  .anva-data-grid-pager button { min-width:34px; min-height:34px; border:1px solid var(--color-border); border-radius:8px; background:var(--color-surface); color:var(--color-text-muted); cursor:pointer; }
  .anva-data-grid-pager button[aria-current="page"] { border-color:var(--color-action); background:var(--color-action); color:var(--color-text-inverse); }
  .anva-data-grid-pager button:disabled { opacity:.4; cursor:not-allowed; }

  .anva-tags { min-height:48px; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); padding:var(--space-2); border:1px solid var(--component-border); border-radius:var(--component-radius); background:var(--color-surface); }
  .anva-tag { display:inline-flex; align-items:center; gap:var(--space-2); min-height:30px; padding:var(--space-1) var(--space-2); border-radius:8px; color:var(--color-text); background:var(--color-action-soft); font-size:var(--type-caption); font-weight:var(--weight-semibold); }
  .anva-tag button { border:0; padding:var(--space-0); background:transparent; color:inherit; cursor:pointer; }
  .anva-tags input { flex:1 1 120px; min-width:90px; border:0; outline:0; background:transparent; color:var(--color-text); }

  .anva-form-stepper { display:grid; grid-template-columns:repeat(var(--anva-step-count,4),minmax(0,1fr)); gap:var(--space-2); }
  .anva-form-step { position:relative; display:grid; gap:var(--space-2); min-width:0; }
  .anva-form-step::after { content:""; position:absolute; top:14px; left:calc(50% + 20px); right:calc(-50% + 20px); height:1px; background:var(--color-border); }
  .anva-form-step:last-child::after { display:none; }
  .anva-form-step-number { position:relative; z-index:1; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--color-surface-muted); color:var(--color-text-muted); font-size:var(--type-caption); font-weight:var(--weight-bold); }
  .anva-form-step[aria-current="step"] .anva-form-step-number,.anva-form-step[data-complete="true"] .anva-form-step-number { background:var(--color-action); color:var(--color-text-inverse); }
  .anva-form-step-label { overflow:hidden; color:var(--color-text-muted); font-size:var(--type-caption); font-weight:var(--weight-semibold); text-overflow:ellipsis; white-space:nowrap; }
  .anva-form-step[aria-current="step"] .anva-form-step-label { color:var(--color-text); }

  .anva-entity-hero { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--space-4); align-items:center; padding:var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-xl); background:var(--color-surface); box-shadow:var(--shadow-1); }
  .anva-entity-avatar { width:64px; height:64px; display:grid; place-items:center; border-radius:20px; background:var(--color-biomass-soft); color:var(--color-biomass); font-size:var(--type-card-title); font-weight:var(--weight-heavy); }
  .anva-detail-list { display:grid; gap:var(--space-0); }
  .anva-detail-row { display:grid; grid-template-columns:minmax(120px,34%) 1fr; gap:var(--space-3); padding:var(--space-2) var(--space-0); border-bottom:1px solid var(--color-border); }
  .anva-detail-row:last-child { border-bottom:0; }
  .anva-detail-key { color:var(--color-text-muted); font-size:var(--type-caption); }
  .anva-detail-value { color:var(--color-text); font-size:var(--type-caption); font-weight:var(--weight-semibold); }

  .anva-invoice-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:var(--space-4); align-items:start; }
  .anva-invoice-document { min-width:0; padding:var(--space-6); border:1px solid var(--color-border); border-radius:var(--radius-xl); background:var(--color-surface); box-shadow:var(--shadow-1); }
  .anva-invoice-summary { width:min(100%,360px); margin:var(--space-4) var(--space-0) var(--space-0) auto; display:grid; gap:var(--space-2); }
  .anva-invoice-summary-row { display:flex; justify-content:space-between; gap:var(--space-4); color:var(--color-text-muted); font-size:var(--type-caption); }
  .anva-invoice-summary-row.is-total { padding-top:var(--space-2); border-top:1px solid var(--color-border); color:var(--color-text); font-size:var(--type-body); font-weight:var(--weight-bold); }

  .anva-note-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); }
  .anva-note { min-height:190px; display:flex; flex-direction:column; padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); }
  .anva-note[data-favorite="true"] { border-color:var(--color-warning); }
  .anva-note-body { flex:1; color:var(--color-text-muted); font-size:var(--type-caption); line-height:var(--leading-body); }
  .anva-note-footer { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); margin-top:var(--space-3); padding-top:var(--space-2); border-top:1px solid var(--color-border); }

  .anva-chart { min-height:280px; width:100%; }
}
@media (max-width:959px){
  @layer project { .anva-invoice-layout{grid-template-columns:1fr}.anva-note-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
}
@media (max-width:639px){
  @layer project {
    .anva-data-grid-toolbar{align-items:stretch;flex-direction:column}.anva-data-grid-search{max-width:none}
    .anva-data-grid[data-mobile-cards="true"] .anva-data-grid-scroll{overflow:visible}.anva-data-grid[data-mobile-cards="true"] table{min-width:0}.anva-data-grid[data-mobile-cards="true"] thead{display:none}
    .anva-data-grid[data-mobile-cards="true"] table,.anva-data-grid[data-mobile-cards="true"] tbody,.anva-data-grid[data-mobile-cards="true"] tr,.anva-data-grid[data-mobile-cards="true"] td{display:block;width:100%}
    .anva-data-grid[data-mobile-cards="true"] tr{padding:var(--space-3) var(--space-3);border-bottom:1px solid var(--color-border)}.anva-data-grid[data-mobile-cards="true"] tr:last-child{border-bottom:0}
    .anva-data-grid[data-mobile-cards="true"] td{display:grid;grid-template-columns:minmax(96px,34%) 1fr;gap:var(--space-2);padding:var(--space-1) var(--space-0);border:0}.anva-data-grid[data-mobile-cards="true"] td::before{content:attr(data-label);color:var(--color-text-muted);font-size:var(--type-caption);font-weight:var(--weight-semibold)}
    .anva-form-stepper{overflow-x:auto;grid-template-columns:repeat(var(--anva-step-count,4),minmax(120px,1fr))}
    .anva-entity-hero{grid-template-columns:auto 1fr}.anva-entity-hero-actions{grid-column:1/-1}
    .anva-note-grid{grid-template-columns:1fr}.anva-invoice-document{padding:var(--space-4)}
  }
}


/* Historical Stage 20.6 regression marker — runtime now consumes --type-metric:
.anva-kpi-value{font-size:26px}
*/


/* ===== SOURCE: role-dashboard.css ===== */
/* Tahap 20.7 — role dashboard. Dashboard owns information hierarchy, not application shell. */
[data-role-dashboard="stage20.7"]{display:grid;gap:var(--space-4);min-width:0}
.role-dashboard-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);padding:var(--space-1) var(--space-0) var(--space-1)}.role-dashboard-intro{min-width:0;max-width:760px}.role-dashboard-intro h1{margin:var(--space-1) var(--space-0) var(--space-2);letter-spacing:var(--tracking-title)}.role-dashboard-intro .anva-lead{max-width:720px}.role-dashboard-scope{display:flex;gap:var(--space-2);flex:0 0 auto}.role-dashboard-scope>span{min-width:138px;padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-1)}.role-dashboard-scope small,.role-dashboard-scope strong{display:block}.role-dashboard-scope small{font-size:var(--type-caption);color:var(--muted);margin-bottom:var(--space-1)}.role-dashboard-scope strong{font-size:var(--type-label);line-height:var(--leading-tight)}
.role-dashboard-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2)}.role-metric{position:relative;min-width:0;min-height:116px;padding:var(--space-4) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);text-decoration:none;color:var(--text);box-shadow:var(--shadow-1);transition:border-color var(--duration-fast),box-shadow var(--duration-fast),background var(--duration-fast)}.role-metric:hover{border-color:var(--border2);box-shadow:var(--shadow-2);background:var(--surface2)}.role-metric:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--border2)}.role-metric.role-tone-warning:before{background:var(--warning)}.role-metric.role-tone-success:before{background:var(--success)}.role-metric.role-tone-danger:before{background:var(--danger)}.role-metric.role-tone-info:before{background:var(--info)}.role-metric-label,.role-metric small{display:block}.role-metric-label{font-size:var(--type-caption);color:var(--muted);font-weight:var(--weight-semibold)}.role-metric strong{display:block;margin-top:var(--space-2);font-size:var(--type-title-sm);line-height:var(--leading-page);letter-spacing:var(--tracking-title)}.role-metric small{margin-top:var(--space-2);font-size:var(--type-caption);line-height:var(--leading-compact);color:var(--subtle)}
.role-dashboard-grid{display:grid;gap:var(--space-3);min-width:0}.role-dashboard-grid-primary{grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr)}.role-dashboard-grid-secondary{grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr)}.role-dashboard-panel{padding:var(--space-4);min-width:0}.role-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}.role-panel-head h2{font-size:var(--type-body);margin-top:var(--space-1)}.role-panel-copy{margin:-4px var(--space-0) var(--space-3);color:var(--muted);font-size:var(--type-caption);line-height:var(--leading-compact)}
.role-priority-list,.role-activity-list,.role-context-list{display:grid}.role-priority-item{display:grid;grid-template-columns:8px minmax(0,1fr) auto 18px;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-0);border-top:1px solid var(--border);text-decoration:none;color:var(--text)}.role-priority-item:first-child{border-top:0}.role-priority-dot,.role-activity-marker{width:8px;height:8px;border-radius:999px;background:var(--border2)}.role-priority-item span strong,.role-priority-item span small{display:block}.role-priority-item span strong{font-size:var(--type-label)}.role-priority-item span small{margin-top:var(--space-1);font-size:var(--type-caption);color:var(--muted);line-height:var(--leading-compact)}.role-priority-item>b{font-size:var(--type-body-sm);letter-spacing:var(--tracking-tight)}.role-priority-item>i{font-style:normal;color:var(--subtle)}
.role-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.role-quick-action{display:grid;grid-template-columns:34px minmax(0,1fr) 16px;gap:var(--space-2);align-items:center;min-height:74px;padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface2);color:var(--text);text-decoration:none}.role-quick-action:hover{border-color:var(--border2);background:var(--surface)}.role-quick-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--accentSoft);color:var(--accent);font-size:var(--type-body-sm);font-weight:var(--weight-heavy)}.role-quick-action strong,.role-quick-action small{display:block}.role-quick-action strong{font-size:var(--type-caption)}.role-quick-action small{margin-top:var(--space-1);font-size:var(--type-caption);line-height:var(--leading-tight);color:var(--muted)}.role-quick-action>b{font-size:var(--type-label);color:var(--subtle)}
.role-activity-item{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-3) var(--space-0);border-top:1px solid var(--border);text-decoration:none;color:var(--text)}.role-activity-item:first-child{border-top:0}.role-activity-copy strong,.role-activity-copy small,.role-activity-end em,.role-activity-end time{display:block}.role-activity-copy strong{font-size:var(--type-label)}.role-activity-copy small{margin-top:var(--space-1);font-size:var(--type-caption);color:var(--muted)}.role-activity-end{text-align:right}.role-activity-end em{font-size:var(--type-caption);font-style:normal;font-weight:var(--weight-bold)}.role-activity-end time{margin-top:var(--space-1);font-size:var(--type-caption);color:var(--subtle)}.role-dashboard-empty{padding:var(--space-5) var(--space-3);text-align:center;border:1px dashed var(--border2);border-radius:var(--radius-md);background:var(--surface2)}.role-dashboard-empty strong,.role-dashboard-empty span{display:block}.role-dashboard-empty strong{font-size:var(--type-label)}.role-dashboard-empty span{margin-top:var(--space-1);font-size:var(--type-caption);color:var(--muted)}
.role-context-list>div{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-2) var(--space-0);border-top:1px solid var(--border)}.role-context-list>div:first-child{border-top:0}.role-context-list span{font-size:var(--type-caption);color:var(--muted)}.role-context-list strong{max-width:58%;font-size:var(--type-caption);text-align:right}.role-dashboard-note{margin-top:var(--space-3);padding:var(--space-2);border-radius:var(--radius-md);background:var(--warningSoft);font-size:var(--type-caption);line-height:var(--leading-compact)}.role-text-success{color:var(--success)}.role-text-warning{color:var(--warning)}.role-text-danger{color:var(--danger)}.role-text-info{color:var(--info)}.role-tone-bg-success{background:var(--success)}.role-tone-bg-warning{background:var(--warning)}.role-tone-bg-danger{background:var(--danger)}.role-tone-bg-info{background:var(--info)}
@media (max-width:1199px){.role-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.role-dashboard-grid-primary,.role-dashboard-grid-secondary{grid-template-columns:1fr}.role-dashboard-scope{display:none}}
@media (min-width:640px) and (max-width:959px){[data-role-dashboard="stage20.7"]{gap:var(--space-3)}.role-dashboard-head{align-items:flex-start}.role-dashboard-metrics{gap:var(--space-2)}.role-metric{min-height:106px;padding:var(--space-3) var(--space-3)}.role-dashboard-panel{padding:var(--space-4)}}
@media (max-width:639px){[data-role-dashboard="stage20.7"]{gap:var(--space-3)}.role-dashboard-head{display:block;padding-top:var(--space-0)}.role-dashboard-intro h1{font-size:var(--type-card-title)}.role-dashboard-intro .anva-lead{font-size:var(--type-label)}.role-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.role-metric{min-height:98px;padding:var(--space-3) var(--space-3) var(--space-3)}.role-metric strong{font-size:var(--type-card-title)}.role-metric small{margin-top:var(--space-1)}.role-dashboard-panel{padding:var(--space-3)}.role-quick-grid{grid-template-columns:1fr}.role-quick-action{min-height:68px}.role-priority-item{grid-template-columns:8px minmax(0,1fr) auto}.role-priority-item>i{display:none}.role-activity-item{grid-template-columns:8px minmax(0,1fr)}.role-activity-end{grid-column:2;text-align:left;display:flex;gap:var(--space-2);align-items:center;margin-top:-5px}.role-activity-end em,.role-activity-end time{display:inline;margin:var(--space-0)}.role-context-list strong{max-width:62%}}
@media (max-width:359px){.role-dashboard-metrics{grid-template-columns:1fr}.role-metric{min-height:88px}}


/* Tahap 21.1 Total Role Dashboard Application — cumulative baseline retained.
 * Tahap 21.1 role hierarchy retained; Tahap 21.2 repairs surface depth and spacing.
 * Hero = L1 section plane, KPI/panel = L2, list/action = L3 flat content.
 */
.workspace-app[data-workspace-surface="stage21.2"] [data-universal-dashboard="stage21.1"][data-surface-hierarchy="stage21.2"]{
  gap:var(--layout-space-group);
}
.workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-head{
  position:relative;
  align-items:center;
  min-height:124px;
  padding:var(--space-4) var(--space-1) var(--space-4);
  border:0;
  border-bottom:1px solid color-mix(in srgb,var(--workspace-role-accent) 18%,var(--color-border));
  border-radius:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--workspace-role-soft) 48%,transparent),transparent 68%);
  box-shadow:none;
  overflow:visible;
}
.workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-head:after{display:none}
.workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-intro,
.workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-scope{position:relative;z-index:1}
.workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-intro .anva-eyebrow{color:var(--workspace-role-accent)}
.workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-intro h1{margin:var(--space-2) var(--space-0) var(--space-2);font-size:var(--type-page-title);letter-spacing:var(--tracking-display);text-wrap:balance}
.workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-scope{gap:var(--space-2);flex-wrap:wrap;justify-content:flex-end}
.workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-scope>span{
  min-width:0;
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-2) var(--space-2);
  border:1px solid color-mix(in srgb,var(--workspace-role-accent) 16%,var(--color-border));
  border-radius:999px;
  background:color-mix(in srgb,var(--workspace-role-soft) 64%,var(--color-surface));
  box-shadow:none;
  backdrop-filter:none;
}
.workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-scope small,
.workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-scope strong{display:inline;margin:var(--space-0);font-size:var(--type-caption)}
.workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-scope small{color:var(--color-text-muted)}
.workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-scope small:after{content:"·";margin-inline-start:6px;color:var(--color-text-subtle)}
.workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-scope strong{color:var(--color-text)}

.workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-metrics{gap:var(--layout-space-card)}
.workspace-app[data-workspace-surface="stage21.2"] .role-metric{
  min-height:126px;
  padding:var(--space-4);
  border-radius:var(--workspace-card-radius);
  border-color:color-mix(in srgb,var(--workspace-role-accent) 10%,var(--color-border));
  background:var(--color-surface);
  box-shadow:none;
}
.workspace-app[data-workspace-surface="stage21.2"] .role-metric:hover{border-color:color-mix(in srgb,var(--workspace-role-accent) 30%,var(--color-border));background:color-mix(in srgb,var(--workspace-role-soft) 22%,var(--color-surface));box-shadow:0 8px 22px color-mix(in srgb,var(--color-text) 5%,transparent)}
.workspace-app[data-workspace-surface="stage21.2"] .role-metric:before{left:16px;top:15px;bottom:auto;width:28px;height:3px;border-radius:999px;background:var(--workspace-role-accent)}
.workspace-app[data-workspace-surface="stage21.2"] .role-metric-label{padding-top:var(--space-3)}
.workspace-app[data-workspace-surface="stage21.2"] .role-metric strong{font-size:var(--type-section-title)}

.workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-grid{gap:var(--layout-space-group)}
.workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-panel{
  padding:var(--space-5);
  border-radius:var(--workspace-panel-radius);
  box-shadow:none;
}
.workspace-app[data-workspace-surface="stage21.2"] .role-priority-item,
.workspace-app[data-workspace-surface="stage21.2"] .role-activity-item{padding:var(--space-3) var(--space-0)}

/* Quick actions are L3 rows, not cards inside the action panel. */
.workspace-app[data-workspace-surface="stage21.2"] .role-quick-grid{
  grid-template-columns:1fr;
  gap:var(--space-0);
}
.workspace-app[data-workspace-surface="stage21.2"] .role-quick-action{
  min-height:66px;
  padding:var(--space-3) var(--space-1);
  border:0;
  border-top:1px solid var(--color-border);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.workspace-app[data-workspace-surface="stage21.2"] .role-quick-action:first-child{border-top:0}
.workspace-app[data-workspace-surface="stage21.2"] .role-quick-action:hover{background:color-mix(in srgb,var(--workspace-role-soft) 34%,transparent);border-color:var(--color-border)}
.workspace-app[data-workspace-surface="stage21.2"] .role-quick-icon{border-radius:10px;background:color-mix(in srgb,var(--workspace-role-accent) 12%,var(--color-surface));color:var(--workspace-role-accent)}

@media(min-width:640px) and (max-width:959px){
  .workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-head{min-height:112px;padding:var(--space-4) var(--space-1)}
  .workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workspace-app[data-workspace-surface="stage21.2"] .role-metric{min-height:112px;padding:var(--space-4)}
  .workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-panel{padding:var(--space-4)}
}
@media(max-width:639px){
  .workspace-app[data-workspace-surface="stage21.2"] [data-universal-dashboard="stage21.1"][data-surface-hierarchy="stage21.2"]{gap:var(--layout-space-group)}
  .workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-head{display:block;min-height:0;padding:var(--space-2) var(--space-0) var(--space-3)}
  .workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-intro h1{font-size:var(--type-title-sm)}
  .workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-scope{display:none}
  .workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-space-card)}
  .workspace-app[data-workspace-surface="stage21.2"] .role-metric{min-height:106px;padding:var(--space-3);border-radius:13px}
  .workspace-app[data-workspace-surface="stage21.2"] .role-metric strong{font-size:var(--type-title-sm)}
  .workspace-app[data-workspace-surface="stage21.2"] .role-dashboard-panel{padding:var(--space-4);border-radius:14px}
  .workspace-app[data-workspace-surface="stage21.2"] .role-quick-action{min-height:62px}
}


/* Historical Stage 21.2 marker — runtime now consumes --layout-space-card:
.role-dashboard-metrics{gap:var(--workspace-gap-card)}
*/


/* ===== SOURCE: operational-pages.css ===== */
/*
 * Biomass ANVA — Operational Pages v1 — Tahap 20.8
 * Canonical presentation layer for transactional/operational modules.
 * Owns page hierarchy and operational composition only; shell, components,
 * and viewport density remain owned by Tahap 20.2–20.6 contracts.
 */
@layer project {
  .anva-operational-page {
    --ops-accent: var(--color-biomass);
    --ops-accent-soft: var(--color-biomass-soft);
    --ops-panel-gap:var(--space-3);
    --ops-section-gap:var(--space-4);
    display: grid;
    gap:var(--ops-section-gap);
    min-width: 0;
  }

  .anva-operational-page[data-operational-module="deposits"] { --ops-accent: var(--color-biomass); --ops-accent-soft: var(--color-biomass-soft); }
  .anva-operational-page[data-operational-module="inventory"] { --ops-accent: var(--color-info); --ops-accent-soft: var(--color-info-soft); }
  .anva-operational-page[data-operational-module="marketplace"] { --ops-accent: var(--color-success); --ops-accent-soft: var(--color-success-soft); }
  .anva-operational-page[data-operational-module="processing"] { --ops-accent: var(--color-warning); --ops-accent-soft: var(--color-warning-soft); }
  .anva-operational-page[data-operational-module="vendor-sbi"] { --ops-accent: var(--color-success); --ops-accent-soft: var(--color-success-soft); }
  .anva-operational-page[data-operational-module="finance"] { --ops-accent: var(--color-info); --ops-accent-soft: var(--color-info-soft); }
  .anva-operational-page[data-operational-module="traceability"] { --ops-accent: var(--color-action); --ops-accent-soft: var(--color-action-soft); }
  .anva-operational-page[data-operational-module="reporting"] { --ops-accent: var(--color-biomass); --ops-accent-soft: var(--color-biomass-soft); }

  /* Normalize legacy section wrappers when embedded in the canonical workspace. */
  .anva-operational-page > .anva-section,
  .anva-operational-page > .anva-section-compact,
  .anva-operational-page > .finance-page,
  .anva-operational-page > .stage13-page,
  .anva-operational-page > .report-center,
  .anva-operational-page > .report-detail,
  .anva-operational-page .anva-section:first-child,
  .anva-operational-page .anva-section-compact:first-child {
    padding-top:var(--space-0);
  }

  .anva-operational-page .anva-container {
    width: 100%;
    max-width: none;
  }

  .anva-operational-page .anva-stack-6,
  .anva-operational-page .anva-stack-lg {
    gap:var(--ops-section-gap);
  }

  /* ---------- Canonical page head ---------- */
  .anva-operational-page :is(.anva-section-head,.anva-page-header,.finance-page-head,.stage13-head,.report-hero,.report-detail-hero) {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap:var(--space-5);
    min-width: 0;
    padding:var(--space-1) var(--space-0) var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .anva-operational-page :is(.anva-section-head,.anva-page-header,.finance-page-head,.stage13-head,.report-hero,.report-detail-hero)::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 42px;
    height: 2px;
    border-radius: 2px;
    background: var(--ops-accent);
  }

  .anva-operational-page :is(.anva-section-head,.anva-page-header,.finance-page-head,.stage13-head,.report-hero,.report-detail-hero) > :first-child {
    min-width: 0;
    max-width: 820px;
  }

  .anva-operational-page :is(.anva-section-head,.anva-page-header,.finance-page-head,.stage13-head,.report-hero,.report-detail-hero) h1 {
    margin:var(--space-1) var(--space-0) var(--space-1);
    letter-spacing:var(--tracking-title);
    line-height:var(--leading-section);
  }

  .anva-operational-page :is(.anva-section-head,.anva-page-header,.finance-page-head,.stage13-head,.report-hero,.report-detail-hero) :is(p,.anva-lead) {
    max-width: 76ch;
    color: var(--color-text-muted);
  }

  .anva-operational-page .anva-eyebrow {
    color: var(--ops-accent);
    font-size:var(--type-caption);
    font-weight: var(--weight-bold);
    letter-spacing:var(--tracking-label);
  }

  .anva-operational-page .project-stage-chip {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    padding:var(--space-1) var(--space-2);
    border: 1px solid color-mix(in srgb, var(--ops-accent) 24%, var(--color-border));
    border-radius: var(--radius-pill);
    background: var(--ops-accent-soft);
    color: var(--ops-accent);
    font-size:var(--type-caption);
    font-weight: var(--weight-bold);
    letter-spacing:var(--tracking-label);
  }

  /* ---------- Context/sub navigation ---------- */
  .anva-operational-page .ops-subnav,
  .anva-operational-page .anva-section-head > .anva-cluster,
  .anva-operational-page .anva-page-header > .anva-cluster,
  .anva-operational-page .finance-actions {
    display: flex;
    gap:var(--space-2);
    align-items: center;
    flex-wrap: wrap;
  }

  .anva-operational-page .ops-subnav .anva-button,
  .anva-operational-page .anva-section-head > .anva-cluster .anva-button,
  .anva-operational-page .anva-page-header > .anva-cluster .anva-button {
    min-height: 34px;
    padding:var(--space-2) var(--space-2);
    border-radius: var(--radius-pill);
    font-size:var(--type-caption);
  }

  /* ---------- KPI / operational summary ---------- */
  .anva-operational-page :is(.anva-grid-4,.finance-kpi-grid,.stage13-kpis,.report-summary) {
    gap:var(--space-2);
  }

  .anva-operational-page .anva-grid-4 > .anva-card,
  .anva-operational-page .finance-kpi-grid > *,
  .anva-operational-page .stage13-kpi,
  .anva-operational-page .report-summary > div {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border-color: var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-1);
  }

  .anva-operational-page .anva-grid-4 > .anva-card::before,
  .anva-operational-page .finance-kpi-grid > *::before,
  .anva-operational-page .stage13-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ops-accent);
  }

  .anva-operational-page .anva-grid-4 > .anva-card .anva-card-body {
    padding:var(--space-3) var(--space-4) var(--space-3) var(--space-4);
  }

  .anva-operational-page .anva-grid-4 > .anva-card :is(span,small):first-child,
  .anva-operational-page .stage13-kpi > span,
  .anva-operational-page .report-summary span {
    color: var(--color-text-muted);
    font-size:var(--type-caption);
    font-weight: var(--weight-semibold);
  }

  .anva-operational-page .anva-grid-4 > .anva-card :is(h2,.anva-kpi-value),
  .anva-operational-page .stage13-kpi > strong {
    display: block;
    margin-top:var(--space-2);
    font-size:var(--type-title-sm);
    line-height:var(--leading-page);
    letter-spacing:var(--tracking-title);
  }

  /* ---------- Panels/forms ---------- */
  .anva-operational-page .anva-card {
    border-color: var(--color-border);
  }

  .anva-operational-page .anva-card > .anva-card-body > :is(h2,h3):first-child,
  .anva-operational-page .anva-card-body > .anva-section-head h2,
  .anva-operational-page .report-section-head h2 {
    font-size:var(--type-body);
    letter-spacing:var(--tracking-tight);
  }

  .anva-operational-page form.anva-card,
  .anva-operational-page .anva-card:has(> .anva-card-body > form.anva-form-grid),
  .anva-operational-page .anva-card:has(> .anva-card-body > .anva-form) {
    background: linear-gradient(180deg,var(--color-surface),var(--color-surface-subtle));
  }

  .anva-operational-page :is(.anva-form-grid,.anva-form) .anva-label,
  .anva-operational-page :is(.anva-form-grid,.anva-form) > label > span,
  .anva-operational-page .report-filter-grid label > span {
    font-size:var(--type-caption);
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
  }

  .anva-operational-page :is(.anva-form-grid,.anva-form) small,
  .anva-operational-page .anva-hint {
    color: var(--color-text-subtle);
    font-size:var(--type-caption);
    line-height:var(--leading-compact);
  }

  /* ---------- Filter/action bars ---------- */
  .anva-operational-page :is(.finance-filter-row,.report-filter-grid,.stage13-search) {
    border-radius: var(--radius-md);
  }

  .anva-operational-page .finance-filter-row {
    display: flex;
    gap:var(--space-2);
    align-items: center;
    flex-wrap: wrap;
  }

  .anva-operational-page .finance-filter-row :is(input,select) {
    min-width: 160px;
    flex: 1 1 190px;
  }

  .anva-operational-page .report-filter {
    background: var(--color-surface-subtle);
    box-shadow: none;
  }

  /* ---------- Operational tables ---------- */
  .anva-operational-page :is(.anva-table-wrap,.workspace-table-wrap,.stage13-table-wrap,.report-table-wrap) {
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    scrollbar-width: thin;
  }

  .anva-operational-page :is(.anva-table-wrap,.workspace-table-wrap,.stage13-table-wrap,.report-table-wrap) .anva-table {
    width: 100%;
    margin:var(--space-0);
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .anva-operational-page .anva-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid var(--color-border-strong);
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    font-size:var(--type-caption);
    font-weight: var(--weight-bold);
    letter-spacing:var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .anva-operational-page .anva-table tbody tr {
    transition: background var(--duration-fast) var(--ease-standard);
  }

  .anva-operational-page .anva-table tbody tr:hover {
    background: color-mix(in srgb, var(--ops-accent-soft) 42%, var(--color-surface));
  }

  .anva-operational-page .anva-table tbody td {
    border-bottom-color: var(--color-border);
    vertical-align: top;
  }

  .anva-operational-page .anva-table tbody tr:last-child td {
    border-bottom: 0;
  }

  .anva-operational-page .anva-table code {
    padding:var(--space-1) var(--space-1);
    border-radius: 5px;
    background: var(--color-surface-muted);
    color: var(--color-text);
    font-size:var(--type-caption);
  }

  /* ---------- Empty / status / timeline ---------- */
  .anva-operational-page .anva-empty {
    min-height: 126px;
    display: grid;
    place-content: center;
    text-align: center;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
  }

  .anva-operational-page .anva-empty::before {
    content: "";
    width: 30px;
    height: 4px;
    margin:var(--space-0) auto var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--ops-accent);
    opacity: .65;
  }

  .anva-operational-page :is(.anva-timeline,.anva-timeline-item) {
    min-width: 0;
  }

  .anva-operational-page .anva-timeline-item {
    position: relative;
    padding:var(--space-0) var(--space-0) var(--space-3) var(--space-5);
  }

  .anva-operational-page .anva-timeline-item::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 11px;
    bottom: -4px;
    width: 1px;
    background: var(--color-border-strong);
  }

  .anva-operational-page .anva-timeline-item:last-child::before { display: none; }
  .anva-operational-page .anva-timeline-dot { left: 1px; background: var(--ops-accent); }

  /* ---------- Marketplace / report / trace cleanup ---------- */
  .anva-operational-page .report-trust,
  .anva-operational-page .report-output-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-1);
  }

  .anva-operational-page .report-trust strong { color: var(--ops-accent); }
  .anva-operational-page .report-output-panel span { color: var(--color-text-muted); }
  .anva-operational-page .report-output-panel nav a {
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface-subtle);
    color: var(--color-text);
  }

  .anva-operational-page .report-icon {
    background: var(--ops-accent-soft);
    color: var(--ops-accent);
  }

  .anva-operational-page .report-actions a,
  .anva-operational-page .report-source-actions a {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
  }

  .anva-operational-page .report-actions .report-open {
    border-color: var(--color-action);
    background: var(--color-action);
    color: var(--color-text-inverse);
  }

  .anva-operational-page .stage13-flow {
    gap:var(--space-2);
    padding:var(--space-1) 1px var(--space-2);
  }

  .anva-operational-page .stage13-node {
    border-color: var(--color-border);
    background: var(--color-surface-subtle);
  }

  .anva-operational-page .stage13-node-source { background: var(--ops-accent-soft); }
  .anva-operational-page .stage13-node-sbi {
    border-color: var(--color-action);
    background: var(--color-surface-inverse);
    color: var(--color-text-inverse);
  }

  .anva-operational-page .stage13-node-sbi > span,
  .anva-operational-page .stage13-node-sbi small { color: var(--palette-d7d7d2); }

  .anva-operational-page .stage13-balance-equation {
    border-color: var(--color-border-strong);
    background: var(--color-surface-inverse);
    color: var(--color-text-inverse);
  }

  .anva-operational-page .stage13-balance-equation > b { color: var(--palette-d8b08f); }

  /* ---------- Mobile ---------- */
  @media (max-width: 639px) {
    .anva-operational-page { --ops-section-gap:var(--space-3); gap:var(--space-3); }

    .anva-operational-page :is(.anva-section-head,.anva-page-header,.finance-page-head,.stage13-head,.report-hero,.report-detail-hero) {
      display: grid;
      align-items: start;
      gap:var(--space-3);
      padding-bottom:var(--space-3);
    }

    .anva-operational-page :is(.anva-section-head,.anva-page-header,.finance-page-head,.stage13-head,.report-hero,.report-detail-hero) h1 {
      font-size:var(--type-card-title);
    }

    .anva-operational-page :is(.anva-section-head,.anva-page-header,.finance-page-head,.stage13-head,.report-hero,.report-detail-hero) > :last-child:not(:first-child) {
      width: 100%;
      justify-content: flex-start;
    }

    .anva-operational-page .ops-subnav,
    .anva-operational-page .anva-section-head > .anva-cluster,
    .anva-operational-page .anva-page-header > .anva-cluster,
    .anva-operational-page .finance-actions {
      width: 100%;
      overflow-x: auto;
      flex-wrap: nowrap;
      padding-bottom:var(--space-1);
      scrollbar-width: none;
    }

    .anva-operational-page .ops-subnav::-webkit-scrollbar,
    .anva-operational-page .anva-section-head > .anva-cluster::-webkit-scrollbar { display: none; }

    .anva-operational-page .ops-subnav .anva-button,
    .anva-operational-page .anva-section-head > .anva-cluster .anva-button,
    .anva-operational-page .anva-page-header > .anva-cluster .anva-button {
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .anva-operational-page .finance-filter-row {
      display: grid;
      grid-template-columns: 1fr;
    }

    .anva-operational-page .finance-filter-row :is(input,select,.anva-button) { width: 100%; min-width: 0; }

    .anva-operational-page :is(.anva-table-wrap,.workspace-table-wrap,.stage13-table-wrap,.report-table-wrap) {
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    /* Adaptive record cards are generated by the existing PWA enhancer on compact screens. */
    .anva-operational-page .anva-adaptive-record {
      border-color: var(--color-border);
      background: var(--color-surface);
      box-shadow: var(--shadow-1);
    }

    .anva-operational-page .report-trust { max-width: none; width: 100%; }
  }

  /* ---------- Tablet ---------- */
  @media (min-width: 640px) and (max-width: 959px) {
    .anva-operational-page { --ops-section-gap:var(--space-4); }
    .anva-operational-page :is(.anva-section-head,.anva-page-header,.finance-page-head,.stage13-head,.report-hero,.report-detail-hero) {
      align-items: flex-start;
    }
  }

  /* ---------- Desktop ---------- */
  @media (min-width: 960px) {
    .anva-operational-page .anva-table tbody td,
    .anva-operational-page .anva-table thead th {
      padding-top:var(--space-2);
      padding-bottom:var(--space-2);
    }

    .anva-operational-page .anva-card:has(.anva-table-wrap) > .anva-card-body,
    .anva-operational-page .anva-card:has(.workspace-table-wrap) > .anva-card-body {
      gap:var(--space-3);
    }
  }
}


/* Tahap 21.1 Total Operational Workspace Application — cumulative baseline retained.
 * Tahap 21.1 operational application retained; Tahap 21.2 enforces one surface hierarchy.
 * Operational page headers are L1 planes, actual data cards are L2, rows inside cards are L3.
 */
@layer project {
  .workspace-app[data-workspace-surface="stage21.2"] .anva-operational-page{
    --ops-accent:var(--workspace-role-accent);
    --ops-accent-soft:var(--workspace-role-soft);
    display:grid;
    gap:var(--layout-space-group);
  }
  .workspace-app[data-workspace-surface="stage21.2"] .anva-operational-page :is(.anva-section-head,.anva-page-header,.finance-page-head,.stage13-head,.report-hero,.report-detail-hero){
    position:relative;
    min-height:0;
    align-items:end;
    padding:var(--space-1) var(--space-0) var(--space-4);
    border:0;
    border-bottom:1px solid var(--color-border);
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
  }
  .workspace-app[data-workspace-surface="stage21.2"] .anva-operational-page :is(.anva-section-head,.anva-page-header,.finance-page-head,.stage13-head,.report-hero,.report-detail-hero)::before{
    left:0;
    bottom:-1px;
    width:42px;
    height:2px;
    border-radius:2px;
    background:var(--ops-accent);
  }
  .workspace-app[data-workspace-surface="stage21.2"] .anva-operational-page .anva-card{
    border-radius:var(--workspace-card-radius);
    box-shadow:none;
  }
  .workspace-app[data-workspace-surface="stage21.2"] .anva-operational-page :is(.anva-grid-4,.finance-kpi-grid,.stage13-kpis,.report-summary){
    gap:var(--layout-space-card);
  }
  .workspace-app[data-workspace-surface="stage21.2"] .anva-operational-page .anva-grid-4>.anva-card,
  .workspace-app[data-workspace-surface="stage21.2"] .anva-operational-page .finance-kpi-grid>*,
  .workspace-app[data-workspace-surface="stage21.2"] .anva-operational-page .stage13-kpi{
    border-radius:var(--workspace-card-radius);
    background:color-mix(in srgb,var(--ops-accent-soft) 12%,var(--color-surface));
    box-shadow:none;
  }
  .workspace-app[data-workspace-surface="stage21.2"] .anva-operational-page :is(.anva-table-wrap,.workspace-table-wrap,.stage13-table-wrap,.report-table-wrap){
    border-radius:12px;
    box-shadow:none;
  }
  .workspace-app[data-workspace-surface="stage21.2"] .anva-operational-page :is(.anva-input,.anva-select,.anva-textarea){background:var(--color-surface)}
  .workspace-app[data-workspace-surface="stage21.2"] .anva-operational-page .anva-empty{border-radius:14px}

  /* Any remaining L2 inside L2 is flattened globally. */
  .workspace-app[data-workspace-surface="stage21.2"] .anva-operational-page .anva-card .anva-card{
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
}
@media(max-width:639px){
  @layer project {
    .workspace-app[data-workspace-surface="stage21.2"] .anva-operational-page{gap:var(--layout-space-group)}
    .workspace-app[data-workspace-surface="stage21.2"] .anva-operational-page :is(.anva-section-head,.anva-page-header,.finance-page-head,.stage13-head,.report-hero,.report-detail-hero){
      display:grid;
      min-height:0;
      padding:var(--space-0) var(--space-0) var(--space-3);
      gap:var(--space-2);
      border-radius:0;
    }
    .workspace-app[data-workspace-surface="stage21.2"] .anva-operational-page .anva-card{
      border-radius:13px;
      box-shadow:none;
    }
  }
}


/* Historical Stage 21.2 markers — runtime now consumes foundation semantic spacing:
padding:4px 0 16px;
gap:var(--workspace-gap-page)
gap:var(--workspace-gap-card)
*/


/* ===== SOURCE: workspace-shell.css ===== */
/*
 * Biomass Workspace Shell — Tahap 20.2
 * Canonical owner for authenticated application chrome.
 * Breakpoints follow Tahap 20.1: Compact 0–639, Tablet 640–959,
 * Desktop 960+, Large 1280+, Wide 1600+.
 */
@layer project {
  .workspace-body {
    min-height: 100dvh;
    overflow-x: hidden;
    background: var(--color-canvas);
  }

  .workspace-app {
    --workspace-sidebar-width: 264px;
    --workspace-rail-width: 76px;
    --workspace-topbar-height: 64px;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: var(--workspace-sidebar-width) minmax(0, 1fr);
    background: var(--color-canvas);
  }

  .workspace-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--color-text);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    box-shadow: none;
    z-index: var(--z-sticky);
  }

  .workspace-brand {
    flex: 0 0 auto;
    min-height: var(--workspace-topbar-height);
    padding:var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .workspace-brand .anva-brand {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap:var(--space-2);
    color: var(--color-text);
    text-decoration: none;
  }

  .workspace-brand .anva-brand-mark,
  .workspace-mobile-brand-mark {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--color-biomass-soft);
    color: var(--color-biomass);
    font-size:var(--type-body-sm);
    font-weight: var(--weight-heavy);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-biomass) 18%, transparent);
  }

  .workspace-brand .anva-brand > span:last-child {
    min-width: 0;
    display: block;
  }

  .workspace-brand .anva-brand strong,
  .workspace-brand .anva-brand small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-brand .anva-brand strong {
    color: var(--color-text);
    font-size:var(--type-body-sm);
    line-height:var(--leading-tight);
    letter-spacing:var(--tracking-tight);
  }

  .workspace-brand .anva-brand small {
    margin-top:var(--space-1);
    color: var(--color-text-muted);
    font-size:var(--type-caption);
    line-height:var(--leading-tight);
    font-weight: var(--weight-medium);
  }

  .workspace-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding:var(--space-2) var(--space-2) var(--space-4);
  }

  .workspace-nav::-webkit-scrollbar { width: 8px; }
  .workspace-nav::-webkit-scrollbar-thumb {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
  }
  .workspace-sidebar:hover .workspace-nav::-webkit-scrollbar-thumb {
    background-color: var(--color-border-strong);
  }

  .workspace-nav section + section { margin-top:var(--space-4); }

  .workspace-nav-label {
    margin:var(--space-0) var(--space-2) var(--space-2);
    padding:var(--space-0);
    color: var(--color-text-subtle);
    font-size:var(--type-caption);
    line-height:var(--leading-compact);
    font-weight: var(--weight-bold);
    letter-spacing:var(--tracking-label);
    text-transform: uppercase;
  }

  .workspace-nav-item {
    position: relative;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap:var(--space-2);
    margin:var(--space-1) var(--space-0);
    padding:var(--space-2) var(--space-2);
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size:var(--type-label);
    line-height:var(--leading-compact);
    font-weight: var(--weight-medium);
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
  }

  .workspace-nav-item:hover {
    color: var(--color-text);
    background: var(--color-surface-subtle);
    transform: none;
  }

  .workspace-nav-item.is-active {
    color: var(--color-text);
    background: var(--color-action-soft);
    border-color: transparent;
    box-shadow: none;
    font-weight: var(--weight-semibold);
  }

  .workspace-nav-item.is-active::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--color-biomass);
  }

  .workspace-nav-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: transparent;
    color: currentColor;
  }

  .workspace-nav-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .workspace-nav-item.is-active .workspace-nav-icon {
    background: transparent;
    color: var(--color-biomass);
  }

  .workspace-sidebar-foot {
    flex: 0 0 auto;
    padding:var(--space-2);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .workspace-user-mini {
    min-width: 0;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap:var(--space-2);
    align-items: center;
    margin:var(--space-0) var(--space-0) var(--space-2);
    padding:var(--space-1);
  }

  .workspace-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface-subtle);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    font-size:var(--type-caption);
    font-weight: var(--weight-bold);
  }

  .workspace-user-mini > div { min-width: 0; }
  .workspace-user-mini strong,
  .workspace-user-mini small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .workspace-user-mini strong { color: var(--color-text); font-size:var(--type-caption); }
  .workspace-user-mini small { margin-top:var(--space-1); color: var(--color-text-muted); font-size:var(--type-caption); }

  .workspace-logout {
    width: 100%;
    min-height: 38px;
    padding:var(--space-2) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size:var(--type-caption);
    font-weight: var(--weight-semibold);
    cursor: pointer;
  }
  .workspace-logout:hover { background: var(--color-surface-subtle); color: var(--color-text); }

  .workspace-main {
    min-width: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  .workspace-topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    min-height: var(--workspace-topbar-height);
    padding:var(--space-2) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:var(--space-4);
    background: color-mix(in srgb, var(--color-canvas) 88%, transparent);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
  }

  .workspace-topbar-leading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap:var(--space-2);
  }

  .workspace-page-context { min-width: 0; }
  .workspace-page-context strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
    font-size:var(--type-body-sm);
    line-height:var(--leading-tight);
    font-weight: var(--weight-semibold);
  }

  .workspace-mobile-role {
    display: block;
    margin:var(--space-0) var(--space-0) var(--space-1);
    color: var(--color-text-subtle);
    font-size:var(--type-caption);
    line-height:var(--leading-tight);
    font-weight: var(--weight-semibold);
    letter-spacing:var(--tracking-label);
    text-transform: none;
  }

  .workspace-mobile-menu,
  .workspace-mobile-brand { display: none; }

  .workspace-top-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap:var(--space-2);
  }

  .workspace-network,
  .workspace-install-button,
  .workspace-version,
  .workspace-profile-link {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size:var(--type-caption);
    font-weight: var(--weight-semibold);
    line-height:var(--leading-display);
  }

  .workspace-network {
    gap:var(--space-2);
    padding:var(--space-0) var(--space-2);
    color: var(--color-text-muted);
    background: transparent;
  }
  .workspace-network::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-success);
  }
  .workspace-network.is-offline::before { background: var(--color-danger); }
  .workspace-network.is-offline { color: var(--color-danger); background: transparent; }

  .workspace-install-button,
  .workspace-profile-link {
    padding:var(--space-0) var(--space-2);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    text-decoration: none;
    cursor: pointer;
  }
  .workspace-install-button:hover,
  .workspace-install-button.is-ready,
  .workspace-profile-link:hover,
  .workspace-profile-link.is-active {
    border-color: var(--color-border-strong);
    background: var(--color-surface-subtle);
    color: var(--color-text);
  }

  .workspace-version {
    padding:var(--space-0) var(--space-2);
    color: var(--color-text-subtle);
    background: transparent;
  }

  .workspace-content {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    margin:var(--space-0);
    padding:var(--space-6);
  }

  .workspace-content-inner {
    width: min(100%, var(--container-max));
    margin-inline:auto;
  }

  .workspace-embedded { min-width: 0; }

  .workspace-inspector { display: none; }
  .workspace-bottom-nav { display: none; }

  .workspace-more-overlay {
    display: block;
    z-index: var(--z-overlay);
  }

  .workspace-more-sheet {
    width: min(560px, 100%);
    max-height: min(82dvh, 760px);
    padding-bottom:env(safe-area-inset-bottom);
    border-radius: 18px 18px 0 0;
    background: var(--color-surface);
  }

  .workspace-sheet-head {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(16px);
  }

  .workspace-sheet-head h2 {
    margin:var(--space-0);
    font-size:var(--type-body);
    line-height:var(--leading-tight);
  }

  .workspace-sheet-close,
  .workspace-mobile-menu {
    width: 40px;
    height: 40px;
    min-height: 40px;
    display: grid;
    place-items: center;
    padding:var(--space-0);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
  }
  .workspace-sheet-close:hover,
  .workspace-mobile-menu:hover { background: var(--color-surface-subtle); }

  .workspace-sheet-close svg,
  .workspace-mobile-menu svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .workspace-sheet-body {
    display: grid;
    gap:var(--space-4);
    padding:var(--space-3) var(--space-4) var(--space-5);
    overflow: visible;
  }

  .workspace-sheet-body section + section { margin-top:var(--space-0); }
  .workspace-sheet-label {
    display: block;
    margin:var(--space-0) var(--space-0) var(--space-2);
    padding:var(--space-0) var(--space-1);
    color: var(--color-text-subtle);
  }

  .workspace-sheet-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:var(--space-2); }
  .workspace-sheet-links a {
    min-width: 0;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap:var(--space-2);
    padding:var(--space-2) var(--space-2);
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size:var(--type-caption);
    font-weight: var(--weight-medium);
  }
  .workspace-sheet-links a:hover { background: var(--color-surface-subtle); color: var(--color-text); }
  .workspace-sheet-links a.is-active {
    border-color: transparent;
    background: var(--color-action-soft);
    color: var(--color-text);
    font-weight: var(--weight-semibold);
  }
  .workspace-sheet-links a.is-active .workspace-nav-icon { color: var(--color-biomass); }

  .workspace-sheet-account {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap:var(--space-2);
    align-items: center;
    padding:var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface-subtle);
  }
  .workspace-sheet-account .workspace-avatar { width: 38px; height: 38px; }
  .workspace-sheet-account > div { min-width: 0; }
  .workspace-sheet-account strong,
  .workspace-sheet-account small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .workspace-sheet-account strong { font-size:var(--type-caption); }
  .workspace-sheet-account small { margin-top:var(--space-1); color: var(--color-text-muted); font-size:var(--type-caption); }
  .workspace-sheet-account a { color: var(--color-text); font-size:var(--type-caption); font-weight: var(--weight-semibold); text-decoration: none; }

  .workspace-sheet-actions form { display: contents; }

  .workspace-sheet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:var(--space-2);
  }
  .workspace-sheet-actions a,
  .workspace-sheet-actions button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding:var(--space-2) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    text-decoration: none;
    font: inherit;
    font-size:var(--type-caption);
    font-weight: var(--weight-semibold);
    cursor: pointer;
  }
  .workspace-sheet-actions a:hover,
  .workspace-sheet-actions button:hover { background: var(--color-surface-subtle); color: var(--color-text); }

  html.is-offline .workspace-topbar { border-bottom-color: color-mix(in srgb, var(--color-danger) 32%, var(--color-border)); }
}

/* Tablet — icon rail is deliberately different from desktop, not a squeezed sidebar. */
@media (min-width: 640px) and (max-width: 959px) {
  .workspace-app { grid-template-columns: var(--workspace-rail-width) minmax(0, 1fr); }
  .workspace-sidebar { width: var(--workspace-rail-width); }
  .workspace-brand { justify-content: center; padding-inline:var(--space-2); }
  .workspace-brand .anva-brand { justify-content: center; }
  .workspace-brand .anva-brand > span:last-child { display: none; }
  .workspace-nav { padding:var(--space-2) var(--space-2) var(--space-4); scrollbar-gutter: auto; }
  .workspace-nav-label { display: none; }
  .workspace-nav section + section { margin-top:var(--space-2); padding-top:var(--space-2); border-top: 1px solid var(--color-border); }
  .workspace-nav-item { min-height: 48px; justify-content: center; padding:var(--space-2); }
  .workspace-nav-item > span:last-child { display: none; }
  .workspace-nav-item.is-active::before { left: 1px; top: 9px; bottom: 9px; }
  .workspace-nav-icon { width: 34px; height: 34px; }
  .workspace-user-mini { display: block; padding:var(--space-0); text-align: center; }
  .workspace-user-mini > div { display: none; }
  .workspace-avatar { margin-inline:auto; }
  .workspace-logout { min-height: 38px; font-size:var(--type-zero); }
  .workspace-logout::after { content: "↪"; font-size:var(--type-body-sm); }
  .workspace-topbar { padding-inline:var(--space-4); }
  .workspace-content { padding:var(--space-5); }
}

/* Compact — dedicated mobile shell with sticky header + bottom navigation. */
@media (max-width: 639px) {
  .workspace-body { background: var(--color-surface); }
  .workspace-app {
    display: block;
    min-height: 100dvh;
    padding-bottom:calc(var(--space-16) + env(safe-area-inset-bottom));
    background: var(--color-surface);
  }
  .workspace-sidebar { display: none; }
  .workspace-main { min-height: 100dvh; }
  .workspace-topbar {
    min-height: 58px;
    padding:var(--space-2) max(var(--space-2), env(safe-area-inset-right)) var(--space-2) max(var(--space-2), env(safe-area-inset-left));
    gap:var(--space-2);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  }
  .workspace-topbar-leading { flex: 1 1 auto; gap:var(--space-2); }
  .workspace-mobile-menu { display: grid; flex: 0 0 auto; width: 38px; height: 38px; min-height: 38px; }
  .workspace-page-context { min-width: 0; }
  .workspace-page-context strong { font-size:var(--type-label); }
  .workspace-mobile-role { font-size:var(--type-caption); }
  .workspace-top-actions { gap:var(--space-1); }
  .workspace-top-actions .workspace-install-button,
  .workspace-top-actions .workspace-version,
  .workspace-top-actions .workspace-profile-link { display: none; }
  .workspace-network {
    width: 36px;
    min-height: 36px;
    padding:var(--space-0);
    font-size:var(--type-zero);
  }
  .workspace-network::before { width: 8px; height: 8px; }
  .workspace-content { padding:var(--space-3) var(--space-3) var(--space-4); }
  .workspace-content-inner { width: 100%; }

  .workspace-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-dropdown);
    min-height: calc(62px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    padding:var(--space-1) max(var(--space-2), env(safe-area-inset-right)) calc(var(--space-1) + env(safe-area-inset-bottom)) max(var(--space-2), env(safe-area-inset-left));
    border-top: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
    box-shadow: 0 -6px 22px var(--palette-alpha-f9598b49);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
  }

  .workspace-bottom-nav a,
  .workspace-bottom-nav button {
    min-width: 0;
    min-height: 50px;
    display: grid;
    grid-template-rows: 24px auto;
    align-content: center;
    justify-items: center;
    gap:var(--space-1);
    padding:var(--space-1) var(--space-1);
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--color-text-subtle);
    text-decoration: none;
    font: inherit;
    cursor: pointer;
  }

  .workspace-bottom-nav a:hover,
  .workspace-bottom-nav button:hover { background: var(--color-surface-subtle); color: var(--color-text); }
  .workspace-bottom-nav a.is-active { color: var(--color-text); background: transparent; font-weight: var(--weight-semibold); }
  .workspace-bottom-nav a.is-active .workspace-bottom-icon { color: var(--color-biomass); }

  .workspace-bottom-icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    color: currentColor;
  }
  .workspace-bottom-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .workspace-bottom-nav small {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:var(--type-caption);
    line-height:var(--leading-section);
  }

  .workspace-sheet-links { grid-template-columns: 1fr; }
  .workspace-more-sheet { max-height: 86dvh; }
  .workspace-sheet-actions { grid-template-columns: 1fr; }

  .workspace-embedded input,
  .workspace-embedded select,
  .workspace-embedded textarea { font-size:var(--type-body); }
}

/* Large desktop gets breathing room without inflating typography. */
@media (min-width: 1280px) {
  .workspace-content { padding:var(--space-8) var(--space-8); }
}

/* Wide — optional contextual rail. It appears only when enough real width exists. */
@media (min-width: 1600px) {
  .workspace-app { grid-template-columns: var(--workspace-sidebar-width) minmax(0, 1fr) 280px; }
  .workspace-inspector {
    display: block;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100dvh;
    overflow-y: auto;
    padding:var(--space-4);
    border-left: 1px solid var(--color-border);
    background: var(--color-surface);
    z-index: var(--z-sticky);
  }
  .workspace-inspector-head { padding:var(--space-2) var(--space-1) var(--space-3); border-bottom: 1px solid var(--color-border); }
  .workspace-inspector-head p { color: var(--color-text-subtle); font-size:var(--type-caption); font-weight: var(--weight-bold); letter-spacing:var(--tracking-label); }
  .workspace-inspector-head strong { display: block; margin-top:var(--space-1); color: var(--color-text); font-size:var(--type-body-sm); }
  .workspace-inspector-block { padding:var(--space-3) var(--space-1); border-bottom: 1px solid var(--color-border); }
  .workspace-inspector-block span,
  .workspace-inspector-block strong { display: block; }
  .workspace-inspector-block span { color: var(--color-text-subtle); font-size:var(--type-caption); font-weight: var(--weight-semibold); }
  .workspace-inspector-block strong { margin-top:var(--space-1); color: var(--color-text); font-size:var(--type-caption); overflow-wrap: anywhere; }
  .workspace-inspector-actions { display: grid; gap:var(--space-2); margin-top:var(--space-3); }
  .workspace-inspector-actions a,
  .workspace-inspector-actions button {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:var(--space-2) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    text-decoration: none;
    font: inherit;
    font-size:var(--type-caption);
    font-weight: var(--weight-semibold);
    cursor: pointer;
  }
  .workspace-inspector-actions a:hover,
  .workspace-inspector-actions button:hover { background: var(--color-surface-subtle); color: var(--color-text); }
  .workspace-inspector-note { margin-top:var(--space-3); color: var(--color-text-muted); font-size:var(--type-caption); line-height:var(--leading-body); }
  .workspace-content { padding-inline:var(--space-10); }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-nav-item,
  .workspace-more-sheet,
  .workspace-bottom-nav,
  .workspace-topbar { transition: none; }
}


/* Tahap 21 command palette — Universal UI capability, ANVA shell owner. */
.workspace-command-button { min-height:36px; display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-2); border:1px solid var(--color-border); border-radius:9px; background:var(--color-surface); color:var(--color-text-muted); font:inherit; font-size:var(--type-caption); font-weight:var(--weight-semibold); cursor:pointer; }
.workspace-command-button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.workspace-command-button kbd { padding:var(--space-1) var(--space-1); border:1px solid var(--color-border); border-radius:5px; background:var(--color-surface-subtle); color:var(--color-text-subtle); font:600 9px var(--font-sans); }
.workspace-command-dialog { width:min(620px,calc(100vw - 28px)); max-height:min(78dvh,680px); padding:var(--space-0); overflow:hidden; }
.workspace-command-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) var(--space-3) var(--space-2); }
.workspace-command-head h2 { margin:var(--space-0); font-size:var(--type-body); }
.workspace-command-search { padding:var(--space-0) var(--space-3) var(--space-3); }
.workspace-command-results { max-height:min(56dvh,480px); overflow:auto; padding:var(--space-0) var(--space-2) var(--space-2); }
.workspace-command-group { padding:var(--space-2) var(--space-2) var(--space-1); color:var(--color-text-subtle); font-size:var(--type-caption); font-weight:var(--weight-bold); letter-spacing:var(--tracking-label); text-transform:uppercase; }
.workspace-command-item { min-height:48px; display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:var(--space-2); align-items:center; padding:var(--space-2) var(--space-2); border-radius:10px; color:var(--color-text); text-decoration:none; }
.workspace-command-item:hover,.workspace-command-item.is-focused { background:var(--color-surface-subtle); }
.workspace-command-item .workspace-nav-icon { width:30px; height:30px; }
.workspace-command-item strong { display:block; font-size:var(--type-caption); }
.workspace-command-item small { display:block; margin-top:1px; color:var(--color-text-muted); font-size:var(--type-caption); }
.workspace-command-empty { padding:var(--space-8) var(--space-4); color:var(--color-text-muted); text-align:center; font-size:var(--type-caption); }
@media(max-width:639px){.workspace-command-button{display:none}.workspace-command-dialog{width:calc(100vw - 16px);max-height:84dvh}.workspace-command-results{max-height:64dvh}}


/* Tahap 21.1 Total Workspace Universal UI Application — retained as cumulative baseline.
 * Tahap 21.2 repairs surface hierarchy + spacing ownership for every role and viewport.
 * Surface levels:
 *   L0 = application canvas
 *   L1 = section/header plane
 *   L2 = actual card/panel/KPI
 *   L3 = flat row/chip/action inside L2
 */
.workspace-app[data-universal-application="stage21.1"][data-workspace-surface="stage21.2"]{
  --workspace-role-accent:var(--color-biomass);
  --workspace-role-soft:var(--color-biomass-soft);
  --workspace-card-radius:14px;
  --workspace-panel-radius:16px;
  background:radial-gradient(circle at 82% 4%,color-mix(in srgb,var(--workspace-role-accent) 5%,transparent),transparent 28rem),var(--color-canvas);
}
.workspace-app[data-role-code="SUPERADMIN"]{--workspace-role-accent:var(--color-info);--workspace-role-soft:var(--color-info-soft)}
.workspace-app[data-role-code="MANAGER"]{--workspace-role-accent:var(--color-success);--workspace-role-soft:var(--color-success-soft)}
.workspace-app[data-role-code="COORDINATOR"]{--workspace-role-accent:var(--color-biomass);--workspace-role-soft:var(--color-biomass-soft)}
.workspace-app[data-role-code="MASYARAKAT"],.workspace-app[data-role-code="USER"]{--workspace-role-accent:var(--color-action);--workspace-role-soft:var(--color-action-soft)}
.workspace-app[data-role-code="BANK_SAMPAH"]{--workspace-role-accent:var(--color-success);--workspace-role-soft:var(--color-success-soft)}
.workspace-app[data-role-code="TRANSPORTER"]{--workspace-role-accent:var(--color-info);--workspace-role-soft:var(--color-info-soft)}
.workspace-app[data-role-code="PENGOLAH"]{--workspace-role-accent:var(--color-biomass);--workspace-role-soft:var(--color-biomass-soft)}
.workspace-app[data-role-code="VENDOR"]{--workspace-role-accent:var(--color-warning);--workspace-role-soft:var(--color-warning-soft)}
.workspace-app[data-role-code="PETUGAS_SBI"]{--workspace-role-accent:var(--color-danger);--workspace-role-soft:var(--color-danger-soft)}

.workspace-role-chip{min-height:30px;display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);border:1px solid color-mix(in srgb,var(--workspace-role-accent) 22%,var(--color-border));border-radius:999px;background:var(--workspace-role-soft);color:var(--workspace-role-accent);font-size:var(--type-caption);font-weight:var(--weight-bold);white-space:nowrap}
.workspace-app[data-workspace-surface="stage21.2"] .workspace-nav-item.is-active{background:var(--workspace-role-soft);color:var(--workspace-role-accent)}
.workspace-app[data-workspace-surface="stage21.2"] .workspace-nav-item.is-active .workspace-nav-icon{background:color-mix(in srgb,var(--workspace-role-accent) 13%,var(--color-surface));color:var(--workspace-role-accent)}
.workspace-app[data-workspace-surface="stage21.2"] .workspace-brand .anva-brand-mark{background:var(--workspace-role-accent);box-shadow:0 10px 24px color-mix(in srgb,var(--workspace-role-accent) 18%,transparent)}
.workspace-app[data-workspace-surface="stage21.2"] .workspace-content{background:transparent}
.workspace-app[data-workspace-surface="stage21.2"] .workspace-content-inner{width:min(100%,var(--layout-content-max));margin-inline:auto}

/* L0 content canvas: never a card. */
.workspace-app[data-workspace-surface="stage21.2"] .workspace-embedded{
  min-width:0;
  width:100%;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.workspace-app[data-workspace-surface="stage21.2"] .workspace-embedded > *{min-width:0}
.workspace-app[data-workspace-surface="stage21.2"] .workspace-embedded > * + *{margin-top:var(--layout-space-group)}

/* L2 inside L2 is flattened into L3 content rows, not another floating card. */
.workspace-app[data-workspace-surface="stage21.2"] .workspace-embedded :is(.anva-card,.workspace-panel) :is(.anva-card,.workspace-panel){
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.workspace-app[data-workspace-surface="stage21.2"] .workspace-embedded :is(.anva-card,.workspace-panel) :is(.anva-card,.workspace-panel) + :is(.anva-card,.workspace-panel){
  border-top:1px solid var(--color-border);
}

@media(min-width:960px){
  .workspace-app[data-workspace-surface="stage21.2"]{
    --workspace-sidebar-width:276px;
    grid-template-columns:var(--workspace-sidebar-width) minmax(0,1fr);
    gap:var(--space-3);
    padding:var(--space-3);
  }
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-sidebar{top:12px;height:calc(100dvh - 24px);border:1px solid var(--color-border);border-radius:22px;box-shadow:0 18px 46px color-mix(in srgb,var(--color-text) 6%,transparent)}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-brand{min-height:70px;padding-inline:var(--space-4)}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-nav{padding:var(--space-2) var(--space-2) var(--space-3)}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-nav-label{padding:var(--space-4) var(--space-2) var(--space-2)}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-nav-item{min-height:42px;border-radius:12px;padding:var(--space-2) var(--space-2)}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-sidebar-foot{margin:var(--space-0) var(--space-2) var(--space-2);padding:var(--space-3);border:1px solid var(--color-border);border-radius:16px;background:var(--color-surface-subtle)}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-main{min-width:0}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-topbar{top:12px;margin:var(--space-0) var(--space-0) var(--space-3);min-height:60px;border:1px solid color-mix(in srgb,var(--color-border) 90%,transparent);border-radius:18px;background:color-mix(in srgb,var(--color-surface) 92%,transparent);box-shadow:0 12px 34px color-mix(in srgb,var(--color-text) 5%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-content{padding:var(--space-2) var(--space-2) var(--space-8)}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-embedded{min-height:calc(100dvh - 112px);padding:var(--space-2) var(--space-1) var(--space-8)}
}
@media(min-width:640px) and (max-width:959px){
  .workspace-app[data-workspace-surface="stage21.2"]{
    --workspace-rail-width:76px;
    grid-template-columns:var(--workspace-rail-width) minmax(0,1fr);
    gap:var(--space-2);
    padding:var(--space-2);
  }
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-sidebar{top:8px;height:calc(100dvh - 16px);border:1px solid var(--color-border);border-radius:20px;box-shadow:0 15px 38px color-mix(in srgb,var(--color-text) 6%,transparent)}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-topbar{top:8px;margin-bottom:var(--space-2);min-height:58px;border:1px solid var(--color-border);border-radius:17px;background:color-mix(in srgb,var(--color-surface) 94%,transparent);box-shadow:0 9px 28px color-mix(in srgb,var(--color-text) 4%,transparent)}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-content{padding:var(--space-2) var(--space-2) var(--space-8)}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-embedded{padding:var(--space-1) var(--space-1) var(--space-8)}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-role-chip{display:none}
}
@media(max-width:639px){
  .workspace-body[data-workspace-surface="stage21.2"]{background:linear-gradient(180deg,var(--color-canvas),color-mix(in srgb,var(--color-canvas) 70%,var(--color-surface)))}
  .workspace-app[data-workspace-surface="stage21.2"]{
    display:block;
    padding:var(--space-0);
    background:transparent;
  }
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-topbar{top:0;min-height:60px;border-bottom:1px solid color-mix(in srgb,var(--color-border) 88%,transparent);background:color-mix(in srgb,var(--color-surface) 94%,transparent);box-shadow:0 8px 24px color-mix(in srgb,var(--color-text) 4%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-mobile-menu{border-radius:12px;background:var(--color-surface-subtle)}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-role-chip{display:none}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-content{padding:var(--space-3) var(--space-3) calc(var(--space-20) + env(safe-area-inset-bottom))}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-embedded{padding:var(--space-1) var(--space-0) calc(var(--space-4) + env(safe-area-inset-bottom))}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-bottom-nav{left:10px;right:10px;bottom:8px;min-height:calc(66px + env(safe-area-inset-bottom));padding:var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom));border:1px solid color-mix(in srgb,var(--color-border) 90%,transparent);border-radius:22px;background:color-mix(in srgb,var(--color-surface) 95%,transparent);box-shadow:0 16px 44px color-mix(in srgb,var(--color-text) 14%,transparent);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-bottom-nav>a,.workspace-app[data-workspace-surface="stage21.2"] .workspace-bottom-nav>button{min-height:54px;border-radius:15px}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-bottom-nav .is-active{background:var(--workspace-role-soft);color:var(--workspace-role-accent)}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-more-sheet{border-radius:26px 26px 0 0}
}
@media(min-width:1600px){
  .workspace-app[data-workspace-surface="stage21.2"]{grid-template-columns:276px minmax(0,1fr) 286px}
  .workspace-app[data-workspace-surface="stage21.2"] .workspace-inspector{top:12px;height:calc(100dvh - 24px);margin:var(--space-0);border:1px solid var(--color-border);border-radius:22px;background:var(--color-surface);box-shadow:0 18px 46px color-mix(in srgb,var(--color-text) 5%,transparent)}
}


/* Historical Stage 21.2 spacing markers — superseded by foundation semantic spacing in 21.4:
--workspace-gap-page:24px
--workspace-gap-section:20px
--workspace-gap-card:16px
--workspace-gap-item:10px
.workspace-embedded{min-height:calc(100dvh - 112px);padding:6px 2px 32px}
--workspace-gap-page:20px
--workspace-gap-card:14px
.workspace-embedded{padding:4px 2px 28px}
--workspace-gap-page:16px
--workspace-gap-card:12px
.workspace-embedded{padding:4px 0 calc(16px + env(safe-area-inset-bottom))}
*/

/* Historical exact Stage 21.2 desktop canvas marker:
.workspace-app[data-workspace-surface="stage21.2"] .workspace-embedded{min-height:calc(100dvh - 112px);padding:6px 2px 32px}
*/


/* ===== SOURCE: mobile-contract.css ===== */
/*
 * Biomass Mobile Content Contract — Tahap 20.5
 * Scope: authenticated workspace content at 0–639px.
 * Shell chrome remains owned by workspace-shell.css; this file owns the content inside the mobile shell.
 */

@media (max-width: 639px) {
  @layer project {
    .workspace-content {
      --mobile-control-height: 48px;
      --mobile-record-label: 34%;
    }

    .workspace-content-inner {
      width: 100%;
      max-width: none;
      margin-inline:var(--space-0);
    }

    .workspace-embedded {
      width: 100%;
      min-width: 0;
      padding-bottom:var(--space-2);
      font-size:var(--type-body-sm);
      line-height:var(--leading-compact);
    }

    /* Embedded feature pages do not get to recreate a second outer page frame. */
    .workspace-embedded > .anva-page,
    .workspace-embedded .anva-page,
    .workspace-embedded > [class*="-page"] {
      min-height: 0;
    }

    .workspace-embedded .anva-topbar { display: none; }

    .workspace-embedded .anva-section,
    .workspace-embedded .anva-section-compact {
      padding-block:var(--space-0);
    }

    .workspace-embedded .anva-section + .anva-section,
    .workspace-embedded .anva-section + [class*="-section"],
    .workspace-embedded [class*="-section"] + .anva-section {
      margin-top:var(--layout-space-group);
    }

    .workspace-embedded .anva-container,
    .workspace-embedded .anva-reading {
      width: 100%;
      max-width: none;
      margin-inline:var(--space-0);
    }

    /* Mobile hierarchy: compact, readable and never viewport-scaled. */
    .workspace-embedded h1 {
      max-width: none;
      font-size:var(--type-card-title);
      line-height:var(--leading-tight);
      letter-spacing:var(--tracking-tight);
      overflow-wrap: anywhere;
      text-wrap: pretty;
    }

    .workspace-embedded h2 {
      font-size:var(--type-body);
      line-height:var(--leading-tight);
      letter-spacing:var(--tracking-tight);
      overflow-wrap: anywhere;
      text-wrap: pretty;
    }

    .workspace-embedded h3 {
      font-size:var(--type-body-sm);
      line-height:var(--leading-compact);
      letter-spacing:var(--tracking-tight);
    }

    .workspace-embedded .anva-eyebrow {
      font-size:var(--type-caption);
      line-height:var(--leading-compact);
      letter-spacing:var(--tracking-label);
    }

    .workspace-embedded .anva-lead {
      max-width: none;
      font-size:var(--type-label);
      line-height:var(--leading-body);
      color: var(--color-text-muted);
    }

    .workspace-embedded .anva-caption { font-size:var(--type-caption); line-height:var(--leading-compact); }

    /* Page headers are a vertical reading flow on phones. */
    .workspace-embedded .anva-section-head,
    .workspace-embedded .anva-page-header,
    .workspace-embedded .finance-page-head,
    .workspace-embedded .stage13-head,
    .workspace-embedded .stage14-hero,
    .workspace-embedded .report-hero,
    .workspace-embedded .report-detail-hero,
    .workspace-embedded .export-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap:var(--space-2);
      align-items: start;
      margin:var(--space-0);
    }

    .workspace-embedded .anva-section-head { margin-bottom:var(--space-3); }

    .workspace-embedded .anva-section-head > :last-child,
    .workspace-embedded .anva-page-header > :last-child,
    .workspace-embedded .finance-actions,
    .workspace-embedded .stage13-action,
    .workspace-embedded .report-source-actions,
    .workspace-embedded .export-actions {
      justify-self: stretch;
      width: 100%;
      max-width: 100%;
    }

    .workspace-embedded .anva-section-head > .anva-cluster,
    .workspace-embedded .anva-page-header > .anva-cluster,
    .workspace-embedded .finance-actions,
    .workspace-embedded .stage13-action,
    .workspace-embedded .report-source-actions,
    .workspace-embedded .export-actions {
      display: flex;
      flex-wrap: wrap;
      gap:var(--space-2);
    }

    .workspace-embedded .anva-section-head > .anva-cluster > .anva-button,
    .workspace-embedded .anva-page-header > .anva-cluster > .anva-button,
    .workspace-embedded .finance-actions > .anva-button,
    .workspace-embedded .stage13-action > .anva-button,
    .workspace-embedded .report-source-actions > .anva-button,
    .workspace-embedded .report-source-actions > a,
    .workspace-embedded .export-actions > .anva-button,
    .workspace-embedded .export-actions > a {
      flex: 1 1 136px;
      min-width: 0;
    }

    .workspace-embedded .finance-page-head,
    .workspace-embedded .stage13-head,
    .workspace-embedded .stage14-hero {
      padding:var(--space-0) var(--space-0) var(--space-3);
      border-radius: 0;
      background: transparent;
      border-color: var(--color-border);
      box-shadow: none;
    }

    .workspace-embedded .workspace-hero {
      grid-template-columns: minmax(0, 1fr);
      gap:var(--space-3);
      align-items: start;
      padding:var(--space-2) var(--space-0) var(--space-3);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .workspace-embedded .workspace-scope-card {
      width: 100%;
      padding:var(--space-1) var(--space-0) var(--space-1) var(--space-2);
      border: 0;
      border-left: 2px solid var(--workspace-role-accent);
      border-radius: 0;
      background: transparent;
      color: var(--color-text);
      box-shadow: none;
    }

    .workspace-embedded .workspace-scope-card p { font-size:var(--type-caption); color: var(--color-text-subtle); }
    .workspace-embedded .workspace-scope-card strong { margin-top:var(--space-1); font-size:var(--type-body); overflow-wrap: anywhere; }
    .workspace-embedded .workspace-scope-card span { margin-top:var(--space-1); font-size:var(--type-caption); color: var(--color-text-muted); }

    /* Mobile vertical rhythm. */
    .workspace-embedded .anva-stack-2 > * + * { margin-top:var(--space-2); }
    .workspace-embedded .anva-stack-3 > * + * { margin-top:var(--space-2); }
    .workspace-embedded .anva-stack-4 > * + * { margin-top:var(--space-2); }
    .workspace-embedded .anva-stack-6 > * + * { margin-top:var(--space-3); }
    .workspace-embedded .anva-stack-8 > * + * { margin-top:var(--space-4); }

    /* General content is single-column. Only small KPI/summary groups stay two-up. */
    .workspace-embedded .anva-grid-2,
    .workspace-embedded .anva-grid-3,
    .workspace-embedded .anva-grid-4,
    .workspace-embedded .anva-dashboard-grid,
    .workspace-embedded .workspace-grid-main,
    .workspace-embedded .workspace-action-grid,
    .workspace-embedded .market-detail-grid,
    .workspace-embedded .market-listing-grid,
    .workspace-embedded .stage13-source-grid,
    .workspace-embedded .stage13-detail-grid,
    .workspace-embedded .stage14-two-col,
    .workspace-embedded .stage14-three-col,
    .workspace-embedded .stage14-chart-stack,
    .workspace-embedded .stage14-filter-grid,
    .workspace-embedded .stage14-source-proof,
    .workspace-embedded .stage14-target-form,
    .workspace-embedded .export-filter-grid,
    .workspace-embedded .export-dataset-grid,
    .workspace-embedded .report-grid,
    .workspace-embedded .report-filter-grid,
    .workspace-embedded .report-meta {
      grid-template-columns: minmax(0, 1fr);
      gap:var(--space-2);
    }

    .workspace-embedded .anva-dashboard-grid > * { grid-column: 1; }
    .workspace-embedded .workspace-grid-main,
    .workspace-embedded .workspace-kpi-grid { margin-top:var(--space-2); }

    .workspace-embedded .workspace-kpi-grid,
    .workspace-embedded .market-kpi-grid,
    .workspace-embedded .finance-kpi-grid,
    .workspace-embedded .stage13-kpis,
    .workspace-embedded .stage14-kpi-grid,
    .workspace-embedded .stage14-compact-kpis,
    .workspace-embedded .report-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:var(--space-2);
    }

    /* Cards carry information, not decorative whitespace. */
    .workspace-embedded .anva-card,
    .workspace-embedded .workspace-panel,
    .workspace-embedded .finance-kpi-card,
    .workspace-embedded .stage13-kpi {
      min-width: 0;
      border-radius: 11px;
      box-shadow: var(--shadow-1);
    }

    .workspace-embedded .anva-card-body,
    .workspace-embedded .anva-card-header,
    .workspace-embedded .workspace-panel,
    .workspace-embedded .report-section .anva-card-body {
      padding:var(--space-3);
    }

    .workspace-embedded .anva-card-footer { padding:var(--space-2) var(--space-3); }
    .workspace-embedded .workspace-panel-head { margin-bottom:var(--space-2); gap:var(--space-2); }

    .workspace-embedded .anva-kpi {
      min-width: 0;
      min-height: 98px;
      padding:var(--space-3);
      border-radius: 11px;
    }

    .workspace-embedded .anva-kpi-label { font-size:var(--type-caption); line-height:var(--leading-tight); }
    .workspace-embedded .anva-kpi-value {
      margin-top:var(--space-1);
      font-size:var(--type-card-title);
      line-height:var(--leading-page);
      letter-spacing:var(--tracking-title);
      overflow-wrap: anywhere;
    }
    .workspace-embedded .anva-kpi small { margin-top:var(--space-2); font-size:var(--type-caption); line-height:var(--leading-compact); }

    .workspace-embedded .workspace-kpi { min-width: 0; min-height: 92px; padding:var(--space-3); }
    .workspace-embedded .workspace-kpi p { font-size:var(--type-caption); color: var(--color-text-muted); }
    .workspace-embedded .workspace-kpi strong { margin-top:var(--space-1); font-size:var(--type-card-title); line-height:var(--leading-page); overflow-wrap: anywhere; }

    /* One-column forms, thumb-sized controls and 16px inputs to avoid iOS zoom. */
    .workspace-embedded .anva-form,
    .workspace-embedded .anva-form-grid,
    .workspace-embedded .finance-inline-form,
    .workspace-embedded .finance-form-stack,
    .workspace-embedded form[class*="grid"] {
      grid-template-columns: minmax(0, 1fr);
      gap:var(--space-3);
    }

    .workspace-embedded .anva-field-span-2,
    .workspace-embedded .anva-form-span,
    .workspace-embedded [class*="span-2"] {
      grid-column: 1;
    }

    .workspace-embedded .anva-field { gap:var(--space-2); min-width: 0; }
    .workspace-embedded .anva-label { font-size:var(--type-caption); line-height:var(--leading-compact); }
    .workspace-embedded .anva-hint,
    .workspace-embedded .anva-field-error { font-size:var(--type-caption); line-height:var(--leading-compact); }

    .workspace-embedded input,
    .workspace-embedded select,
    .workspace-embedded textarea,
    .workspace-embedded .anva-input,
    .workspace-embedded .anva-select,
    .workspace-embedded .anva-textarea {
      width: 100%;
      min-width: 0;
      min-height: var(--mobile-control-height);
      font-size:var(--type-body);
    }

    .workspace-embedded textarea,
    .workspace-embedded .anva-textarea { min-height: 112px; }

    .workspace-embedded button,
    .workspace-embedded .anva-button,
    .workspace-embedded .anva-filter,
    .workspace-embedded [role="button"] {
      min-height: 44px;
    }

    .workspace-embedded .anva-button { padding:var(--space-2) var(--space-3); font-size:var(--type-label); }
    .workspace-embedded .anva-button-sm,
    .workspace-embedded .anva-button-small { min-height: 40px; padding:var(--space-2) var(--space-2); font-size:var(--type-caption); }

    /* Horizontal navigation remains horizontally scrollable instead of wrapping into tall blocks. */
    .workspace-embedded .anva-tabs {
      width: 100%;
      gap:var(--space-1);
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scrollbar-width: none;
    }
    .workspace-embedded .anva-tabs::-webkit-scrollbar { display: none; }
    .workspace-embedded .anva-tab { min-height: 44px; padding:var(--space-2) var(--space-3); font-size:var(--type-caption); }

    .workspace-embedded .anva-filterbar {
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-bottom:var(--space-1);
      overscroll-behavior-inline: contain;
      scrollbar-width: none;
    }
    .workspace-embedded .anva-filterbar::-webkit-scrollbar { display: none; }
    .workspace-embedded .anva-filter { flex: 0 0 auto; min-height: 40px; }

    /* Alerts and empty states use the width available without oversized artwork/padding. */
    .workspace-embedded .anva-alert { gap:var(--space-2); padding:var(--space-3); border-radius: 11px; }
    .workspace-embedded .anva-alert-icon { width: 30px; height: 30px; }
    .workspace-embedded .anva-empty,
    .workspace-embedded .anva-empty-state { padding:var(--space-8) var(--space-4); border-radius: 12px; }
    .workspace-embedded .anva-empty-icon { width: 48px; height: 48px; margin-bottom:var(--space-3); border-radius: 14px; }

    /* Explicit record components become one-column detail stacks. */
    .workspace-embedded .anva-record { padding:var(--space-3); border-radius: 11px; }
    .workspace-embedded .anva-record-head { align-items: flex-start; gap:var(--space-2); }
    .workspace-embedded .anva-record-grid { grid-template-columns: minmax(0, 1fr); gap:var(--space-2); }
    .workspace-embedded .anva-record-key { font-size:var(--type-caption); }
    .workspace-embedded .anva-record-value { margin-top:1px; font-size:var(--type-caption); overflow-wrap: anywhere; }

    /* Canonical mobile table transformation. JS supplies data-label from the table header. */
    .workspace-embedded .report-table-wrap,
    .workspace-embedded .workspace-table-wrap,
    .workspace-embedded .stage13-table-wrap,
    .workspace-embedded .stage14-table-wrap,
    .workspace-embedded [class*="table-wrap"] {
      overflow: visible;
      margin-inline:var(--space-0);
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    .workspace-embedded table.anva-table.is-adaptive-records {
      display: block;
      width: 100%;
      min-width: 0;
      border: 0;
      background: transparent;
    }

    .workspace-embedded table.anva-table.is-adaptive-records thead { display: none; }
    .workspace-embedded table.anva-table.is-adaptive-records tbody {
      display: grid;
      width: 100%;
      gap:var(--space-2);
    }

    .workspace-embedded table.anva-table.is-adaptive-records tr {
      display: block;
      width: 100%;
      min-width: 0;
      padding:var(--space-2) var(--space-3);
      border: 1px solid var(--color-border);
      border-radius: 11px;
      background: var(--color-surface);
      box-shadow: var(--shadow-1);
    }

    .workspace-embedded table.anva-table.is-adaptive-records td {
      display: grid;
      grid-template-columns: minmax(88px, var(--mobile-record-label)) minmax(0, 1fr);
      gap:var(--space-2);
      align-items: start;
      width: 100%;
      min-width: 0;
      min-height: 38px;
      padding:var(--space-2) var(--space-0);
      border: 0;
      border-bottom: 1px solid var(--color-border);
      text-align: left;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .workspace-embedded table.anva-table.is-adaptive-records td:last-child { border-bottom: 0; }
    .workspace-embedded table.anva-table.is-adaptive-records td::before {
      content: attr(data-label);
      min-width: 0;
      color: var(--color-text-muted);
      font-size:var(--type-caption);
      line-height:var(--leading-compact);
      font-weight: var(--weight-semibold);
      letter-spacing:var(--tracking-label);
      overflow-wrap: anywhere;
    }

    .workspace-embedded table.anva-table.is-adaptive-records td[data-label=""] { display: block; }
    .workspace-embedded table.anva-table.is-adaptive-records td[data-label=""]::before { display: none; }
    .workspace-embedded table.anva-table.is-adaptive-records td .anva-cluster { gap:var(--space-2); }
    .workspace-embedded table.anva-table.is-adaptive-records td .anva-button { min-height: 40px; }

    /* Long process visualisations must never create horizontal page overflow. */
    .workspace-embedded .anva-steps {
      grid-template-columns: minmax(0, 1fr);
      gap:var(--space-2);
    }
    .workspace-embedded .anva-step { min-height: 34px; padding:var(--space-2) var(--space-0) var(--space-2) var(--space-8); text-align: left; }
    .workspace-embedded .anva-step::before { top: 50%; bottom: -13px; left: 10px; right: auto; width: 2px; height: auto; }
    .workspace-embedded .anva-step-marker { top: 7px; left: 10px; translate: -50% 0; }
    .workspace-embedded .anva-step:last-child::before { display: none; }

    .workspace-embedded .anva-dialog {
      width: calc(100% - 20px);
      max-height: calc(100dvh - 20px);
      border-radius: 14px;
    }
    .workspace-embedded .anva-dialog-head,
    .workspace-embedded .anva-dialog-body,
    .workspace-embedded .anva-dialog-foot { padding:var(--space-3); }
    .workspace-embedded .anva-dialog-foot {
      position: sticky;
      bottom: 0;
      z-index: 2;
      flex-wrap: wrap;
      background: var(--color-surface);
    }
    .workspace-embedded .anva-dialog-foot .anva-button { flex: 1 1 120px; }

    /* Opt-in sticky actions for long mobile forms; clearance follows the canonical bottom nav. */
    .workspace-embedded .anva-mobile-sticky-actions,
    .workspace-embedded [data-mobile-sticky-actions] {
      position: sticky;
      z-index: 8;
      bottom: calc(68px + env(safe-area-inset-bottom));
      display: flex;
      flex-wrap: wrap;
      gap:var(--space-2);
      margin:var(--space-3) -4px -4px;
      padding:var(--space-2) var(--space-1) var(--space-1);
      background: linear-gradient(to bottom, transparent, var(--color-canvas) 18px);
    }
    .workspace-embedded .anva-mobile-sticky-actions > .anva-button,
    .workspace-embedded [data-mobile-sticky-actions] > .anva-button { flex: 1 1 136px; }

    /* PWA notices stay above the canonical bottom navigation safe area. */
    .pwa-floating-install {
      right: max(12px, env(safe-area-inset-right));
      bottom: calc(76px + env(safe-area-inset-bottom));
    }
    .pwa-update-banner {
      width: calc(100% - 20px);
      bottom: calc(76px + env(safe-area-inset-bottom));
      align-items: flex-start;
    }
    .pwa-update-banner button { align-self: center; }
  }
}

/* Very narrow phones trade two-up summaries for legibility. */
@media (max-width: 359px) {
  @layer project {
    .workspace-embedded .workspace-kpi-grid,
    .workspace-embedded .market-kpi-grid,
    .workspace-embedded .finance-kpi-grid,
    .workspace-embedded .stage13-kpis,
    .workspace-embedded .stage14-kpi-grid,
    .workspace-embedded .stage14-compact-kpis,
    .workspace-embedded .report-summary {
      grid-template-columns: minmax(0, 1fr);
    }

    .workspace-embedded table.anva-table.is-adaptive-records td {
      grid-template-columns: minmax(0, 1fr);
      gap:var(--space-1);
    }
  }
}


/* Tahap 21.1 mobile experience application — content density and touch hierarchy. */
@media(max-width:639px){
  @layer project {
    .workspace-app[data-universal-application="stage21.1"] .workspace-embedded h1{font-size:var(--type-title-sm);line-height:var(--leading-section);letter-spacing:var(--tracking-title)}
    .workspace-app[data-universal-application="stage21.1"] .workspace-embedded h2{font-size:var(--type-body)}
    .workspace-app[data-universal-application="stage21.1"] .workspace-embedded .anva-section-head{gap:var(--space-3)}
    .workspace-app[data-universal-application="stage21.1"] .workspace-embedded .anva-card-body{padding:var(--space-4)}
    .workspace-app[data-universal-application="stage21.1"] .workspace-embedded :is(.anva-button,.anva-input,.anva-select){min-height:48px}
    .workspace-app[data-universal-application="stage21.1"] .workspace-embedded .anva-grid-3,.workspace-app[data-universal-application="stage21.1"] .workspace-embedded .anva-grid-4{grid-template-columns:1fr}
  }
}


/* Tahap 21.2 Surface/Spacing ownership: mobile consumes workspace gap tokens; surface creation stays with canonical component/composition owner. */


/* Historical Stage 20.5 regression markers — runtime now consumes foundation spacing/type:
.workspace-embedded .anva-section{padding-block: 0}
.workspace-embedded h1{font-size: 22px}
.workspace-embedded input,
.workspace-embedded select,
.workspace-embedded textarea{font-size: 16px;}
*/


/* ===== SOURCE: tablet-contract.css ===== */
/*
 * Biomass Tablet Content Contract — Tahap 20.4
 * Scope: authenticated workspace content at 640–959px.
 * Shell chrome remains owned by workspace-shell.css; this file owns only the content beside the tablet rail.
 */

@media (min-width: 640px) and (max-width: 959px) {
  @layer project {
    .workspace-content {
      --tablet-control-height: 44px;
    }

    .workspace-content-inner {
      width: 100%;
      max-width: none;
      margin-inline:var(--space-0);
    }

    .workspace-embedded {
      min-width: 0;
      width: 100%;
      font-size:var(--type-body-sm);
      line-height:var(--leading-body);
    }

    /* Embedded pages must not recreate a second standalone page frame. */
    .workspace-embedded > .anva-page,
    .workspace-embedded .anva-page,
    .workspace-embedded > [class*="-page"] {
      min-height: 0;
    }

    .workspace-embedded .anva-topbar { display: none; }

    .workspace-embedded .anva-section,
    .workspace-embedded .anva-section-compact {
      padding-block:var(--space-0);
    }

    .workspace-embedded .anva-section + .anva-section,
    .workspace-embedded .anva-section + [class*="-section"],
    .workspace-embedded [class*="-section"] + .anva-section {
      margin-top:var(--layout-space-group);
    }

    .workspace-embedded .anva-container,
    .workspace-embedded .anva-reading {
      width: 100%;
      max-width: none;
      margin-inline:var(--space-0);
    }

    /* Tablet typography stays compact but remains more touch-oriented than desktop. */
    .workspace-embedded h1 {
      max-width: 30ch;
      font-size:var(--type-title-sm);
      line-height:var(--leading-tight);
      letter-spacing:var(--tracking-tight);
      text-wrap: pretty;
    }

    .workspace-embedded h2 {
      font-size:var(--type-body);
      line-height:var(--leading-tight);
      letter-spacing:var(--tracking-tight);
      text-wrap: pretty;
    }

    .workspace-embedded h3 {
      font-size:var(--type-body);
      line-height:var(--leading-compact);
      letter-spacing:var(--tracking-tight);
    }

    .workspace-embedded .anva-eyebrow {
      font-size:var(--type-caption);
      line-height:var(--leading-tight);
      letter-spacing:var(--tracking-label);
    }

    .workspace-embedded .anva-lead {
      max-width: 74ch;
      font-size:var(--type-body-sm);
      line-height:var(--leading-body);
      color: var(--color-text-muted);
    }

    /* Headers are allowed to wrap; actions do not squeeze the page title. */
    .workspace-embedded .anva-section-head,
    .workspace-embedded .anva-page-header,
    .workspace-embedded .finance-page-head,
    .workspace-embedded .stage13-head,
    .workspace-embedded .stage14-hero,
    .workspace-embedded .report-hero,
    .workspace-embedded .report-detail-hero,
    .workspace-embedded .export-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap:var(--space-3);
      align-items: start;
      margin:var(--space-0);
    }

    .workspace-embedded .anva-section-head { margin-bottom:var(--space-4); }

    .workspace-embedded .anva-section-head > :last-child,
    .workspace-embedded .anva-page-header > :last-child,
    .workspace-embedded .finance-actions,
    .workspace-embedded .stage13-action,
    .workspace-embedded .report-source-actions,
    .workspace-embedded .export-actions {
      justify-self: start;
      max-width: 100%;
    }

    .workspace-embedded .finance-page-head,
    .workspace-embedded .stage13-head,
    .workspace-embedded .stage14-hero {
      padding:var(--space-1) var(--space-0) var(--space-3);
      border-radius: 0;
      background: transparent;
      border-color: var(--color-border);
      box-shadow: none;
    }

    .workspace-embedded .workspace-hero {
      grid-template-columns: minmax(0, 1fr);
      gap:var(--space-3);
      align-items: start;
      padding:var(--space-3) var(--space-0) var(--space-4);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .workspace-embedded .workspace-scope-card {
      width: 100%;
      padding:var(--space-2) var(--space-0) var(--space-2) var(--space-3);
      border: 0;
      border-left: 2px solid var(--workspace-role-accent);
      border-radius: 0;
      background: transparent;
      color: var(--color-text);
      box-shadow: none;
    }

    .workspace-embedded .workspace-scope-card p {
      color: var(--color-text-subtle);
      font-size:var(--type-caption);
      letter-spacing:var(--tracking-label);
    }

    .workspace-embedded .workspace-scope-card strong { margin-top:var(--space-1); font-size:var(--type-body); }
    .workspace-embedded .workspace-scope-card span { margin-top:var(--space-1); color: var(--color-text-muted); font-size:var(--type-caption); }

    /* Tablet rhythm: denser than compact, more breathable than desktop. */
    .workspace-embedded .anva-stack-3 > * + * { margin-top:var(--space-2); }
    .workspace-embedded .anva-stack-4 > * + * { margin-top:var(--space-3); }
    .workspace-embedded .anva-stack-6 > * + * { margin-top:var(--layout-space-group); }
    .workspace-embedded .anva-stack-8 > * + * { margin-top:var(--space-5); }

    /* Tablet uses two-up information groups; primary/secondary desktop split becomes a stack. */
    .workspace-embedded .anva-grid-2,
    .workspace-embedded .anva-grid-3,
    .workspace-embedded .anva-grid-4,
    .workspace-embedded .workspace-kpi-grid,
    .workspace-embedded .finance-kpi-grid,
    .workspace-embedded .stage13-kpis,
    .workspace-embedded .stage14-kpi-grid,
    .workspace-embedded .stage14-compact-kpis,
    .workspace-embedded .report-grid,
    .workspace-embedded .report-summary,
    .workspace-embedded .export-dataset-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:var(--space-3);
    }

    .workspace-embedded .workspace-kpi-grid { margin-top:var(--space-3); }

    .workspace-embedded .workspace-grid-main,
    .workspace-embedded .market-detail-grid,
    .workspace-embedded .stage14-two-col,
    .workspace-embedded .stage14-three-col,
    .workspace-embedded .stage14-chart-stack {
      grid-template-columns: minmax(0, 1fr);
      gap:var(--space-3);
    }

    .workspace-embedded .workspace-grid-main { margin-top:var(--space-3); }

    .workspace-embedded .workspace-action-grid,
    .workspace-embedded .stage13-source-grid,
    .workspace-embedded .stage13-detail-grid,
    .workspace-embedded .stage14-filter-grid,
    .workspace-embedded .stage14-source-proof,
    .workspace-embedded .stage14-target-form,
    .workspace-embedded .export-filter-grid,
    .workspace-embedded .report-filter-grid,
    .workspace-embedded .report-meta {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:var(--space-2) var(--space-3);
    }

    /* Cards keep enough room for touch but avoid large desktop-like voids. */
    .workspace-embedded .anva-card,
    .workspace-embedded .workspace-panel,
    .workspace-embedded .finance-kpi-card,
    .workspace-embedded .stage13-kpi {
      border-radius: 12px;
      box-shadow: var(--shadow-1);
    }

    .workspace-embedded .anva-card-body,
    .workspace-embedded .workspace-panel {
      padding:var(--space-4);
    }

    .workspace-embedded .workspace-panel-head { margin-bottom:var(--space-3); }

    .workspace-embedded .anva-kpi {
      min-height: 108px;
      padding:var(--space-4);
    }

    .workspace-embedded .anva-kpi-label { font-size:var(--type-caption); line-height:var(--leading-compact); }
    .workspace-embedded .anva-kpi-value {
      margin-top:var(--space-2);
      font-size:var(--type-title-sm);
      line-height:var(--leading-page);
      letter-spacing:var(--tracking-title);
      overflow-wrap: anywhere;
    }
    .workspace-embedded .anva-kpi small { margin-top:var(--space-2); font-size:var(--type-caption); }

    .workspace-embedded .workspace-kpi { min-height: 0; padding:var(--space-3) var(--space-4); }
    .workspace-embedded .workspace-kpi p { font-size:var(--type-caption); color: var(--color-text-muted); }
    .workspace-embedded .workspace-kpi strong { margin-top:var(--space-1); font-size:var(--type-card-title); overflow-wrap: anywhere; }

    /* Tablet remains a touch surface. */
    .workspace-embedded .anva-button:not(.anva-button-sm):not(.anva-button-small),
    .workspace-embedded .anva-input,
    .workspace-embedded .anva-select,
    .workspace-embedded input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .workspace-embedded select {
      min-height: var(--tablet-control-height);
    }

    .workspace-embedded .anva-button:not(.anva-button-sm):not(.anva-button-small) {
      padding:var(--space-2) var(--space-3);
      font-size:var(--type-label);
      border-radius: 10px;
    }

    .workspace-embedded .anva-button-sm,
    .workspace-embedded .anva-button-small {
      min-height: 38px;
      padding:var(--space-2) var(--space-3);
      font-size:var(--type-caption);
    }

    .workspace-embedded .anva-input,
    .workspace-embedded .anva-select,
    .workspace-embedded .anva-textarea,
    .workspace-embedded input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .workspace-embedded select,
    .workspace-embedded textarea {
      padding:var(--space-2) var(--space-3);
      border-radius: 10px;
      font-size:var(--type-body-sm);
    }

    .workspace-embedded .anva-textarea,
    .workspace-embedded textarea { min-height: 104px; }

    .workspace-embedded .anva-form { gap:var(--space-3); }
    .workspace-embedded .anva-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:var(--space-3) var(--space-3);
    }

    .workspace-embedded .anva-field-span-2,
    .workspace-embedded .anva-form-span { grid-column: 1 / -1; }

    /* Keep tables as tables on tablet; record-card transformation stays mobile-only. */
    .workspace-embedded .anva-table-wrap,
    .workspace-embedded .workspace-table-wrap,
    .workspace-embedded .stage13-table-wrap,
    .workspace-embedded .stage14-table-wrap,
    .workspace-embedded .report-table-wrap,
    .workspace-embedded [class*="table-wrap"] {
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      border-radius: 11px;
      -webkit-overflow-scrolling: touch;
      scrollbar-gutter: stable;
    }

    .workspace-embedded .anva-table {
      min-width: 680px;
      font-size:var(--type-caption);
    }

    .workspace-embedded .anva-table th,
    .workspace-embedded .anva-table td {
      padding:var(--space-3) var(--space-3);
      line-height:var(--leading-compact);
    }

    .workspace-embedded .anva-table th {
      font-size:var(--type-caption);
      letter-spacing:var(--tracking-label);
      white-space: nowrap;
    }

    .workspace-embedded .anva-table td small { font-size:var(--type-caption); line-height:var(--leading-compact); }

    .workspace-embedded .anva-record-list { gap:var(--space-2); }
    .workspace-embedded .anva-record { padding:var(--space-3) var(--space-3); border-radius: 10px; }
    .workspace-embedded .anva-record-key { font-size:var(--type-caption); }
    .workspace-embedded .anva-record-value { font-size:var(--type-caption); }

    .workspace-embedded .anva-alert {
      gap:var(--space-2);
      padding:var(--space-3) var(--space-3);
      border-radius: 11px;
      font-size:var(--type-caption);
    }

    .workspace-embedded .anva-alert-icon { width: 30px; height: 30px; font-size:var(--type-caption); }
    .workspace-embedded .anva-empty { padding:var(--space-8) var(--space-5); border-radius: 13px; }

    .workspace-embedded .finance-page,
    .workspace-embedded .stage13-page,
    .workspace-embedded .stage14-page,
    .workspace-embedded .report-center,
    .workspace-embedded .report-detail {
      gap:var(--layout-space-group);
      padding-top:var(--space-0);
    }

    .workspace-embedded .market-listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:var(--space-3); }
    .workspace-embedded .report-section-head { margin-bottom:var(--space-3); }
    .workspace-embedded p { max-width: 82ch; }
    .workspace-embedded td p,
    .workspace-embedded .anva-alert p,
    .workspace-embedded .anva-record p,
    .workspace-embedded [class*="summary"] p { max-width: none; }
  }
}

/* Narrow tablet: avoid cramped paired fields/actions while retaining the tablet rail. */
@media (min-width: 640px) and (max-width: 719px) {
  @layer project {
    .workspace-embedded .anva-form-grid,
    .workspace-embedded .stage13-source-grid,
    .workspace-embedded .stage13-detail-grid,
    .workspace-embedded .stage14-filter-grid,
    .workspace-embedded .stage14-source-proof,
    .workspace-embedded .stage14-target-form,
    .workspace-embedded .export-filter-grid,
    .workspace-embedded .report-filter-grid,
    .workspace-embedded .report-meta {
      grid-template-columns: minmax(0, 1fr);
    }

    .workspace-embedded .anva-field-span-2,
    .workspace-embedded .anva-form-span { grid-column: auto; }

    .workspace-embedded .workspace-action-grid { grid-template-columns: minmax(0, 1fr); }
  }
}


/* Tahap 21.1 tablet experience application — balanced workspace, not enlarged mobile. */
@media(min-width:640px) and (max-width:959px){
  @layer project {
    .workspace-app[data-universal-application="stage21.1"] .workspace-embedded h1{font-size:var(--type-section-title);letter-spacing:var(--tracking-title)}
    .workspace-app[data-universal-application="stage21.1"] .workspace-embedded .anva-grid-3,.workspace-app[data-universal-application="stage21.1"] .workspace-embedded .anva-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
    .workspace-app[data-universal-application="stage21.1"] .workspace-embedded .anva-section-head{align-items:center}
    .workspace-app[data-universal-application="stage21.1"] .workspace-embedded .anva-card-body{padding:var(--space-4)}
  }
}


/* Tahap 21.2 Surface/Spacing ownership: tablet consumes workspace gap tokens; surface creation stays with canonical component/composition owner. */


/* Historical Stage 20.4 regression markers — runtime now consumes foundation spacing/type:
.workspace-embedded .anva-section{padding-block: 0}
.workspace-embedded h1{font-size: 25px}
*/


/* ===== SOURCE: desktop-contract.css ===== */
/*
 * Biomass Desktop Content Contract — Tahap 20.3
 * Scope: authenticated workspace content only.
 * This file deliberately does not own sidebar, topbar, mobile nav, overlays or public pages.
 * Desktop is a first-class layout: dense, aligned and information-forward rather than a widened mobile stack.
 */

@media (min-width: 960px) {
  @layer project {
    .workspace-content {
      --desktop-control-height: 40px;
    }

    .workspace-content-inner {
      width: 100%;
      max-width: 1440px;
      margin-inline:auto;
    }

    .workspace-embedded {
      min-width: 0;
      width: 100%;
      font-size:var(--type-body-sm);
      line-height:var(--leading-compact);
    }

    /* Embedded feature pages must not re-create an outer page shell. */
    .workspace-embedded > .anva-page,
    .workspace-embedded .anva-page,
    .workspace-embedded > [class*="-page"] {
      min-height: 0;
    }

    .workspace-embedded .anva-topbar { display: none; }

    .workspace-embedded .anva-section,
    .workspace-embedded .anva-section-compact {
      padding-block:var(--space-0);
    }

    .workspace-embedded .anva-section + .anva-section,
    .workspace-embedded .anva-section + [class*="-section"],
    .workspace-embedded [class*="-section"] + .anva-section {
      margin-top:var(--layout-space-group);
    }

    .workspace-embedded .anva-container,
    .workspace-embedded .anva-reading {
      width: 100%;
      max-width: none;
      margin-inline:var(--space-0);
    }

    /* Page-title contract: compact and left aligned on desktop. */
    .workspace-embedded h1 {
      max-width: 28ch;
      font-size:var(--type-section-title);
      line-height:var(--leading-section);
      letter-spacing:var(--tracking-title);
      text-wrap: pretty;
    }

    .workspace-embedded h2 {
      font-size:var(--type-card-title);
      line-height:var(--leading-tight);
      letter-spacing:var(--tracking-tight);
      text-wrap: pretty;
    }

    .workspace-embedded h3 {
      font-size:var(--type-body);
      line-height:var(--leading-tight);
      letter-spacing:var(--tracking-tight);
    }

    .workspace-embedded .anva-eyebrow {
      font-size:var(--type-caption);
      line-height:var(--leading-tight);
      letter-spacing:var(--tracking-label);
    }

    .workspace-embedded .anva-lead {
      max-width: 82ch;
      font-size:var(--type-body-sm);
      line-height:var(--leading-body);
      color: var(--color-text-muted);
    }

    .workspace-embedded .anva-caption,
    .workspace-embedded .anva-hint { line-height:var(--leading-compact); }

    /* A desktop page head has content on the left and actions on the right. */
    .workspace-embedded .anva-section-head,
    .workspace-embedded .anva-page-header,
    .workspace-embedded .finance-page-head,
    .workspace-embedded .stage13-head,
    .workspace-embedded .stage14-hero,
    .workspace-embedded .report-hero,
    .workspace-embedded .report-detail-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap:var(--space-4) var(--space-6);
      align-items: end;
      margin:var(--space-0);
    }

    .workspace-embedded .anva-section-head {
      margin-bottom:var(--space-4);
    }

    .workspace-embedded .anva-section-copy { max-width: 82ch; gap:var(--space-2); }

    .workspace-embedded .finance-page-head,
    .workspace-embedded .stage13-head,
    .workspace-embedded .stage14-hero {
      padding:var(--space-1) var(--space-0) var(--space-4);
      border-radius: 0;
      background: transparent;
      border-color: var(--color-border);
      box-shadow: none;
    }

    .workspace-embedded .workspace-hero {
      grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
      gap:var(--space-5);
      align-items: end;
      padding:var(--space-4) var(--space-0) var(--space-4);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .workspace-embedded .workspace-hero-compact { grid-template-columns: 1fr; }
    .workspace-embedded .workspace-hero h1 { margin-top:var(--space-1); }
    .workspace-embedded .workspace-eyebrow { margin-top:var(--space-0); }

    .workspace-embedded .workspace-scope-card {
      padding:var(--space-2) var(--space-0) var(--space-2) var(--space-3);
      border: 0;
      border-left: 2px solid var(--workspace-role-accent);
      border-radius: 0;
      background: transparent;
      color: var(--color-text);
      box-shadow: none;
    }
    .workspace-embedded .workspace-scope-card p {
      color: var(--color-text-subtle);
      font-size:var(--type-caption);
      letter-spacing:var(--tracking-label);
    }
    .workspace-embedded .workspace-scope-card strong { margin-top:var(--space-1); font-size:var(--type-body); }
    .workspace-embedded .workspace-scope-card span { margin-top:var(--space-1); color: var(--color-text-muted); font-size:var(--type-caption); }

    /* Vertical rhythm inside the workspace. */
    .workspace-embedded .anva-stack-3 > * + * { margin-top:var(--space-2); }
    .workspace-embedded .anva-stack-4 > * + * { margin-top:var(--space-3); }
    .workspace-embedded .anva-stack-6 > * + * { margin-top:var(--layout-space-group); }
    .workspace-embedded .anva-stack-8 > * + * { margin-top:var(--space-6); }

    /* Grids stay genuinely multi-column on desktop and use consistent gutters. */
    .workspace-embedded .anva-grid-2,
    .workspace-embedded .anva-grid-3,
    .workspace-embedded .anva-grid-4,
    .workspace-embedded .workspace-kpi-grid,
    .workspace-embedded .finance-kpi-grid,
    .workspace-embedded .stage13-kpis,
    .workspace-embedded .stage14-kpi-grid,
    .workspace-embedded .stage14-compact-kpis,
    .workspace-embedded .report-grid,
    .workspace-embedded .report-summary {
      gap:var(--space-3);
    }

    .workspace-embedded .anva-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workspace-embedded .anva-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .workspace-embedded .anva-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .workspace-embedded .workspace-kpi-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-top:var(--space-3);
    }

    .workspace-embedded .workspace-grid-main {
      grid-template-columns: minmax(0, 1.7fr) minmax(260px, .72fr);
      gap:var(--space-3);
      margin-top:var(--space-3);
    }

    .workspace-embedded .workspace-action-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:var(--space-2);
    }

    /* Cards: lower visual weight, less empty space. */
    .workspace-embedded .anva-card,
    .workspace-embedded .workspace-panel,
    .workspace-embedded .finance-kpi-card,
    .workspace-embedded .stage13-kpi {
      border-radius: 12px;
      box-shadow: var(--shadow-1);
    }

    .workspace-embedded .anva-card-body { padding:var(--space-4); }
    .workspace-embedded .workspace-panel { padding:var(--space-4); }
    .workspace-embedded .workspace-panel-head { margin-bottom:var(--space-3); }

    .workspace-embedded .anva-kpi {
      min-height: 112px;
      padding:var(--space-4);
    }
    .workspace-embedded .anva-kpi-label { font-size:var(--type-caption); line-height:var(--leading-compact); }
    .workspace-embedded .anva-kpi-value {
      margin-top:var(--space-2);
      font-size:var(--type-title-sm);
      line-height:var(--leading-page);
      letter-spacing:var(--tracking-title);
    }
    .workspace-embedded .anva-kpi small { margin-top:var(--space-2); font-size:var(--type-caption); }

    .workspace-embedded .workspace-kpi { min-height: 0; padding:var(--space-4) var(--space-4); }
    .workspace-embedded .workspace-kpi p { font-size:var(--type-caption); color: var(--color-text-muted); }
    .workspace-embedded .workspace-kpi strong { margin-top:var(--space-1); font-size:var(--type-card-title); }

    /* Controls are mouse/keyboard dense on desktop while compact/tablet retain touch sizes. */
    .workspace-embedded .anva-button:not(.anva-button-sm):not(.anva-button-small),
    .workspace-embedded .anva-input,
    .workspace-embedded .anva-select,
    .workspace-embedded input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .workspace-embedded select {
      min-height: var(--desktop-control-height);
    }

    .workspace-embedded .anva-button:not(.anva-button-sm):not(.anva-button-small) {
      padding:var(--space-2) var(--space-3);
      font-size:var(--type-caption);
      border-radius: 9px;
    }

    .workspace-embedded .anva-button-sm,
    .workspace-embedded .anva-button-small { min-height: 34px; padding:var(--space-2) var(--space-2); font-size:var(--type-caption); }

    .workspace-embedded .anva-input,
    .workspace-embedded .anva-select,
    .workspace-embedded .anva-textarea,
    .workspace-embedded input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .workspace-embedded select,
    .workspace-embedded textarea {
      padding:var(--space-2) var(--space-2);
      border-radius: 9px;
      font-size:var(--type-label);
    }

    .workspace-embedded .anva-textarea,
    .workspace-embedded textarea { min-height: 92px; }
    .workspace-embedded .anva-label,
    .workspace-embedded .anva-field { font-size:var(--type-caption); }
    .workspace-embedded .anva-form { gap:var(--space-3); }

    .workspace-embedded .anva-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:var(--space-3) var(--space-4);
    }
    .workspace-embedded .anva-field-span-2,
    .workspace-embedded .anva-form-span { grid-column: 1 / -1; }

    /* Dense data tables: horizontal information is preferred over card inflation on desktop. */
    .workspace-embedded .anva-table-wrap,
    .workspace-embedded .workspace-table-wrap,
    .workspace-embedded .stage13-table-wrap,
    .workspace-embedded .stage14-table-wrap,
    .workspace-embedded .report-table-wrap,
    .workspace-embedded [class*="table-wrap"] {
      overflow: auto;
      max-width: 100%;
      border-radius: 11px;
    }

    .workspace-embedded .anva-table { min-width: 720px; font-size:var(--type-caption); }
    .workspace-embedded .anva-table th,
    .workspace-embedded .anva-table td {
      padding:var(--space-2) var(--space-3);
      line-height:var(--leading-compact);
    }
    .workspace-embedded .anva-table th {
      font-size:var(--type-caption);
      letter-spacing:var(--tracking-label);
      white-space: nowrap;
    }
    .workspace-embedded .anva-table td small { font-size:var(--type-caption); line-height:var(--leading-compact); }

    /* Records are compact supporting data on desktop. */
    .workspace-embedded .anva-record-list { gap:var(--space-2); }
    .workspace-embedded .anva-record { padding:var(--space-3) var(--space-3); border-radius: 10px; }
    .workspace-embedded .anva-record-key { font-size:var(--type-caption); }
    .workspace-embedded .anva-record-value { font-size:var(--type-caption); }

    .workspace-embedded .anva-alert {
      gap:var(--space-2);
      padding:var(--space-3) var(--space-3);
      border-radius: 11px;
      font-size:var(--type-caption);
    }
    .workspace-embedded .anva-alert-icon { width: 28px; height: 28px; font-size:var(--type-caption); }

    .workspace-embedded .anva-empty { padding:var(--space-10) var(--space-6); border-radius: 14px; }

    /* Feature contracts that previously used standalone-page spacing. */
    .workspace-embedded .finance-page,
    .workspace-embedded .stage13-page,
    .workspace-embedded .stage14-page,
    .workspace-embedded .report-center,
    .workspace-embedded .report-detail {
      gap:var(--layout-space-group);
      padding-top:var(--space-0);
    }

    .workspace-embedded .stage13-page > .anva-container { gap:var(--layout-space-group); }
    .workspace-embedded .finance-page .anva-card-body,
    .workspace-embedded .stage13-section .anva-card-body { gap:var(--space-3); }

    .workspace-embedded .market-listing-grid { gap:var(--space-3); }
    .workspace-embedded .market-detail-grid { gap:var(--space-4); }
    .workspace-embedded .report-section-head { margin-bottom:var(--space-3); }

    /* Prevent long prose and status lines from producing oversized horizontal voids. */
    .workspace-embedded p { max-width: 92ch; }
    .workspace-embedded td p,
    .workspace-embedded .anva-alert p,
    .workspace-embedded .anva-record p,
    .workspace-embedded [class*="summary"] p { max-width: none; }
  }
}

/* Large desktop: use available width for more information, not larger typography. */
@media (min-width: 1280px) {
  @layer project {
    .workspace-content { }
    .workspace-content-inner { max-width: 1480px; }

    .workspace-embedded .workspace-grid-main {
      grid-template-columns: minmax(0, 1.85fr) minmax(280px, .68fr);
    }

    .workspace-embedded .market-listing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .workspace-embedded .report-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}

/* Wide: the shell already owns the context rail. Content remains readable and bounded. */
@media (min-width: 1600px) {
  @layer project {
    .workspace-content-inner { max-width: 1500px; }
    .workspace-embedded h1 { max-width: 34ch; }
  }
}


/* Tahap 21.1 desktop experience application — denser information canvas with independent hierarchy. */
@media(min-width:960px){
  @layer project {
    .workspace-app[data-universal-application="stage21.1"] .workspace-embedded h1{font-size:var(--type-page-title);letter-spacing:var(--tracking-display);text-wrap:balance}
    .workspace-app[data-universal-application="stage21.1"] .workspace-embedded .anva-lead{max-width:76ch}
    .workspace-app[data-universal-application="stage21.1"] .workspace-embedded .anva-grid-4{gap:var(--space-3)}
    .workspace-app[data-universal-application="stage21.1"] .workspace-embedded .anva-section-head{align-items:center}
    .workspace-app[data-universal-application="stage21.1"] .workspace-embedded .anva-card-body{padding:var(--space-5)}
  }
}


/* Tahap 21.2 Surface/Spacing ownership: desktop consumes workspace gap tokens; surface creation stays with canonical component/composition owner. */


/* Historical Stage 20.3 regression markers — runtime now consumes foundation spacing/type:
.workspace-embedded .anva-section{padding-block: 0}
.workspace-embedded h1{font-size: 28px}
--desktop-table-x: 12px
--desktop-table-y: 10px
*/


/* ===== SOURCE: ui-polish.css ===== */
/*
 * Biomass ANVA — UI Polish — Tahap 20.9
 * Final presentation/micro-interaction layer. This file deliberately does not
 * own application layout, role information architecture, or business workflow.
 */
@layer project {
  :root {
    --polish-ease-enter: cubic-bezier(.16, 1, .3, 1);
    --polish-ease-exit: cubic-bezier(.4, 0, 1, 1);
    --polish-ring-soft: 0 0 0 4px color-mix(in srgb, var(--focus-color) 14%, transparent);
    --polish-spinner-size: 15px;
  }

  /* ---------- Accessibility & document ergonomics ---------- */
  html { scroll-padding-top:var(--space-20); }
  :where([id]) { scroll-margin-top:var(--space-20); }
  :where(button, a, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

  .anva-skip-link {
    position: fixed;
    left: var(--space-3);
    top: var(--space-3);
    z-index: calc(var(--z-toast) + 20);
    width: 1px;
    height: 1px;
    padding: var(--space-0);
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--type-label);
    font-weight: var(--weight-bold);
    text-decoration: none;
    box-shadow: var(--shadow-2);
  }
  .anva-skip-link:focus,
  .anva-skip-link:focus-visible {
    width: auto;
    height: auto;
    padding: var(--space-2) var(--space-3);
    margin: var(--space-0);
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    border: 1px solid var(--color-action);
  }

  /* ---------- Route/page transition: content only ---------- */
  .anva-js [data-ui-polish="stage20.9"] [data-route-transition] {
    animation: anvaPolishPageIn 180ms var(--polish-ease-enter) both;
  }
  [data-ui-polish="stage20.9"] [data-route-transition].is-leaving {
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 90ms var(--polish-ease-exit), transform 90ms var(--polish-ease-exit);
  }
  @keyframes anvaPolishPageIn {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
  }

  /* ---------- Click/touch feedback ---------- */
  :where(.anva-button, .anva-page-link, .anva-filter, .anva-tab, .workspace-nav-item,
         .workspace-profile-link, .workspace-install-button, .workspace-logout,
         .workspace-bottom-nav a, .workspace-bottom-nav button,
         .workspace-sheet-links a, .workspace-sheet-actions button,
         .workspace-inspector-actions a, .workspace-inspector-actions button) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  :where(.anva-page-link, .anva-filter, .anva-tab, .workspace-nav-item,
         .workspace-profile-link, .workspace-install-button, .workspace-logout,
         .workspace-bottom-nav a, .workspace-bottom-nav button,
         .workspace-sheet-links a, .workspace-sheet-actions button,
         .workspace-inspector-actions a, .workspace-inspector-actions button):active {
    transform: translateY(1px);
  }

  /* Interactive cards opt in; ordinary data cards remain still. */
  :where(a.anva-card, button.anva-card, .anva-card[data-action], .anva-card[tabindex="0"]) {
    transition: border-color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
  }
  @media (hover: hover) {
    :where(a.anva-card, button.anva-card, .anva-card[data-action], .anva-card[tabindex="0"]):hover {
      border-color: var(--color-border-strong);
      box-shadow: var(--shadow-1);
    }
  }
  :where(a.anva-card, button.anva-card, .anva-card[data-action], .anva-card[tabindex="0"]):active { transform: translateY(1px); }

  /* ---------- Busy/loading protection ---------- */
  form[aria-busy="true"] { cursor: progress; }
  form[aria-busy="true"] :where(input, select, textarea) { cursor: progress; }
  .anva-button.is-loading,
  button.is-loading,
  input[type="submit"].is-loading {
    position: relative;
    pointer-events: none;
    cursor: progress;
  }
  .anva-button.is-loading::before,
  button.is-loading::before {
    content: "";
    width: var(--polish-spinner-size);
    height: var(--polish-spinner-size);
    flex: 0 0 var(--polish-spinner-size);
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: .82;
    animation: anvaPolishSpin 650ms linear infinite;
  }
  @keyframes anvaPolishSpin { to { transform: rotate(360deg); } }

  [aria-busy="true"] > .anva-skeleton:first-child:last-child { min-height: 44px; }
  .anva-progress-bar { will-change: width; }

  /* ---------- Form polish ---------- */
  :where(.anva-input, .anva-select, .anva-textarea,
         .workspace-embedded input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
         .workspace-embedded select, .workspace-embedded textarea):focus {
    box-shadow: var(--polish-ring-soft), inset 0 1px 0 var(--palette-alpha-a7d3886b);
  }
  :where(.anva-input, .anva-select, .anva-textarea)[aria-invalid="true"]:focus {
    outline-color: var(--color-danger);
    border-color: var(--color-danger);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-danger) 14%, transparent);
  }
  :where(input, select, textarea):user-invalid { border-color: var(--color-danger); }
  :where(input, select, textarea):user-valid:not(:placeholder-shown) { border-color: color-mix(in srgb, var(--color-success) 42%, var(--component-border)); }

  /* ---------- Table/readability polish ---------- */
  .workspace-embedded .anva-table tbody tr:focus-within {
    background: color-mix(in srgb, var(--color-info-soft) 46%, var(--color-surface));
  }
  @media (hover: none) {
    .anva-operational-page .anva-table tbody tr:hover { background: transparent; }
  }
  .workspace-embedded .anva-table :where(a, button) { position: relative; }

  /* ---------- Toast lifecycle ---------- */
  .anva-toast { transform-origin: right bottom; }
  .anva-toast.is-leaving {
    opacity: 0;
    transform: translateY(6px) scale(.985);
    transition: opacity 140ms var(--polish-ease-exit), transform 140ms var(--polish-ease-exit);
  }
  .anva-toast:focus-within { box-shadow: var(--shadow-2), var(--focus-ring); }

  /* ---------- PWA/install/update polish ---------- */
  .pwa-floating-install {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap:var(--space-2);
    padding:var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font-size:var(--type-caption);
    font-weight: var(--weight-bold);
    box-shadow: var(--shadow-2);
  }
  .pwa-floating-install::before {
    content: "B";
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--color-biomass-soft);
    color: var(--color-biomass);
    font-size:var(--type-caption);
    font-weight: var(--weight-heavy);
  }
  .pwa-floating-install.is-ready { border-color: color-mix(in srgb, var(--color-biomass) 38%, var(--color-border)); background: var(--color-surface); }
  @media (hover: hover) { .pwa-floating-install:hover { background: var(--color-surface-subtle); } }

  .pwa-guide-mark {
    background: var(--color-biomass-soft);
    color: var(--color-biomass);
    border: 1px solid color-mix(in srgb, var(--color-biomass) 18%, var(--color-border));
  }

  .pwa-update-banner {
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom));
    width: min(620px, calc(100% - 28px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap:var(--space-3);
    align-items: center;
    padding:var(--space-3) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: 13px;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-3);
  }
  .pwa-update-banner > div:first-child { min-width: 0; padding-right:var(--space-10); }
  .pwa-update-banner .pwa-update-close {
    position:absolute;
    top:var(--space-2);
    right:var(--space-2);
    width:var(--touch-target);
    height:var(--touch-target);
    min-width:var(--touch-target);
    min-height:var(--touch-target);
    display:grid;
    place-items:center;
    padding:var(--space-0);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    background:var(--color-surface-subtle);
    color:var(--color-text);
    font-size:var(--type-body);
    line-height:var(--leading-display);
  }
  .pwa-update-banner strong { color: var(--color-text); font-size:var(--type-label); }
  .pwa-update-banner span { margin-top:var(--space-1); color: var(--color-text-muted); font-size:var(--type-caption); }
  .pwa-update-actions { display: flex; gap:var(--space-2); align-items: center; }
  .pwa-update-banner button {
    min-height: 36px;
    padding:var(--space-2) var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: 9px;
    background: var(--color-surface-subtle);
    color: var(--color-text);
    font: inherit;
    font-size:var(--type-caption);
    font-weight: var(--weight-bold);
    cursor: pointer;
  }
  .pwa-update-banner button[data-pwa-update-apply] {
    border-color: var(--color-action);
    background: var(--color-action);
    color: var(--color-text-inverse);
  }
  .pwa-update-banner button[data-pwa-update-apply][aria-busy="true"] { opacity: .72; pointer-events: none; cursor: progress; }
  .pwa-update-banner button[data-pwa-update-apply][aria-busy="true"]::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left:var(--space-2);
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: anvaPolishSpin 650ms linear infinite;
  }

  /* Network state should be readable without turning the whole shell red. */
  .workspace-network { transition: color var(--duration-fast), background var(--duration-fast); }
  .workspace-network::before { transition: background var(--duration-fast), box-shadow var(--duration-fast); }
  .workspace-network.is-offline::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 14%, transparent); }

  /* ---------- Scrollbar polish on pointer devices ---------- */
  @media (hover: hover) and (pointer: fine) {
    :where(.workspace-nav, .workspace-inspector, .anva-table-wrap, .workspace-table-wrap, .report-table-wrap, .stage13-table-wrap) {
      scrollbar-width: thin;
      scrollbar-color: var(--color-border-strong) transparent;
    }
    :where(.workspace-nav, .workspace-inspector, .anva-table-wrap, .workspace-table-wrap, .report-table-wrap, .stage13-table-wrap)::-webkit-scrollbar { width: 8px; height: 8px; }
    :where(.workspace-nav, .workspace-inspector, .anva-table-wrap, .workspace-table-wrap, .report-table-wrap, .stage13-table-wrap)::-webkit-scrollbar-thumb {
      border: 2px solid transparent;
      border-radius: 999px;
      background: var(--color-border-strong);
      background-clip: padding-box;
    }
  }

  /* ---------- Visualization polish ---------- */
  .anva-viz-line { stroke: var(--color-biomass); }
  .anva-viz-dot { stroke: var(--color-biomass); }
  .anva-viz-bar { fill: var(--color-biomass); }
  .anva-viz-bar-secondary { fill: var(--color-info); }
  .anva-viz-ring { stroke: var(--color-biomass); }
  .anva-viz-flow-node.is-active { stroke: var(--color-biomass); fill: var(--color-biomass-soft); }
  .anva-viz-mass-in { fill: var(--color-biomass); }

  /* ---------- Mobile ---------- */
  @media (max-width: 639px) {
    html { scroll-padding-top:var(--space-16); }
    :where([id]) { scroll-margin-top:var(--space-20); }
    .pwa-floating-install {
      right: max(12px, env(safe-area-inset-right));
      bottom: calc(76px + env(safe-area-inset-bottom));
    }
    .pwa-update-banner {
      bottom: calc(76px + env(safe-area-inset-bottom));
      grid-template-columns: 1fr;
      width: calc(100% - 20px);
    }
    .pwa-update-actions { justify-content: stretch; }
    .pwa-update-actions button { flex: 1 1 0; }
  }

  /* ---------- High-contrast / reduced-motion ---------- */
  @media (prefers-contrast: more) {
    :root { --component-border: var(--color-text-muted); --component-border-hover: var(--color-text); }
    .anva-card, .anva-alert, .anva-empty, .pwa-update-banner { border-width: 2px; }
  }

  @media (forced-colors: active) {
    .anva-brand-mark,
    .workspace-avatar,
    .pwa-guide-mark,
    .pwa-floating-install::before { forced-color-adjust: none; border: 1px solid CanvasText; }
    .anva-button-primary,
    .pwa-update-banner button[data-pwa-update-apply] { border: 1px solid ButtonText; }
  }

  @media (prefers-reduced-motion: reduce) {
    .anva-js [data-ui-polish="stage20.9"] [data-route-transition],
    [data-ui-polish="stage20.9"] [data-route-transition].is-leaving,
    .anva-toast,
    .anva-toast.is-leaving,
    .anva-button.is-loading::before,
    button.is-loading::before { animation: none; transition: none; transform: none; }
    .anva-skeleton::after { display: none; }
  }

  @media print {
    .anva-skip-link,
    .anva-toast-region,
    .pwa-floating-install,
    .pwa-update-banner,
    .workspace-network,
    [data-pwa-install] { display: none; }
  }
}


/* Tahap 21 final reduced-motion owner: final cascade position avoids priority overrides. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none; transition: none; scroll-behavior: auto; }
}


/* ===== SOURCE: auth-experience.css ===== */
/* Biomass Tahap 20.9.3 — Premium Auth Experience
 * Scope: standalone authentication + account recovery pages.
 */
.anva-auth-page{min-height:100dvh;background:var(--palette-f4f4f1);color:var(--ink,var(--palette-202322))}
.anva-auth-page .anva-page{min-height:100dvh}
.anva-auth-shell{min-height:100dvh;display:grid;place-items:center;padding:clamp(var(--space-4),4vw,var(--space-12))}
.anva-auth-frame{width:min(1120px,100%);min-height:min(760px,calc(100dvh - 64px));display:grid;grid-template-columns:minmax(320px,.86fr) minmax(500px,1.14fr);background:var(--color-surface);border:1px solid var(--palette-alpha-6d8d9cf5);border-radius:30px;overflow:hidden;box-shadow:0 24px 70px var(--palette-alpha-5db79f6a)}
.anva-auth-brand{position:relative;display:flex;flex-direction:column;min-width:0;padding:var(--space-10);background:var(--palette-153b31);color:var(--palette-f7fbf9);overflow:hidden}
.anva-auth-brand::before{content:"";position:absolute;inset:auto -90px -120px auto;width:360px;height:360px;border:1px solid var(--palette-alpha-d2a2e110);border-radius:50%}
.anva-auth-brand::after{content:"";position:absolute;right:82px;bottom:-120px;width:280px;height:280px;border:1px solid var(--palette-alpha-1f523d72);border-radius:50%}
.anva-auth-brandmark{position:relative;z-index:1;display:inline-flex;align-items:center;gap:var(--space-3);width:max-content;color:inherit;text-decoration:none}
.anva-auth-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--palette-alpha-d2a2e110);color:var(--palette-b8e8d2)}
.anva-auth-mark svg{width:28px;height:28px}
.anva-auth-brandmark strong{display:block;font-size:var(--type-body);letter-spacing:var(--tracking-tight)}
.anva-auth-brandmark small{display:block;margin-top:var(--space-1);color:var(--palette-alpha-e99c0140);font-size:var(--type-caption);line-height:var(--leading-tight)}
.anva-auth-brand-copy{position:relative;z-index:1;margin:auto var(--space-0);max-width:390px}
.anva-auth-kicker{margin:var(--space-0) var(--space-0) var(--space-2);color:var(--palette-6e8d82);font-size:var(--type-caption);font-weight:var(--weight-heavy);letter-spacing:var(--tracking-label);text-transform:uppercase}
.anva-auth-brand .anva-auth-kicker{color:var(--palette-91d9bc)}
.anva-auth-brand-copy h2{margin:var(--space-0);font-size:var(--type-page-title);line-height:var(--leading-page);letter-spacing:var(--tracking-display);color:var(--color-surface)}
.anva-auth-brand-copy>p:last-child{max-width:34ch;margin:var(--space-4) var(--space-0) var(--space-0);color:var(--palette-alpha-2479bba4);font-size:var(--type-body-sm);line-height:var(--leading-body)}
.anva-auth-brand-foot{position:relative;z-index:1;display:flex;align-items:center;gap:var(--space-2);color:var(--palette-alpha-4cbafdab);font-size:var(--type-caption)}
.anva-auth-signal{width:8px;height:8px;border-radius:50%;background:var(--palette-73d5ad);box-shadow:0 0 0 5px var(--palette-alpha-b7866c60)}
.anva-auth-panel{display:flex;flex-direction:column;min-width:0;background:var(--color-surface)}
.anva-auth-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-8) var(--space-8) var(--space-0)}
.anva-auth-home-link,.anva-auth-top-action{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--palette-525957);text-decoration:none;font-size:var(--type-label);font-weight:var(--weight-semibold)}
.anva-auth-home-link svg{width:18px;height:18px}
.anva-auth-top-action{color:var(--palette-234f42)}
.anva-auth-home-link:hover,.anva-auth-top-action:hover{color:var(--palette-151817)}
.anva-auth-content{width:min(470px,calc(100% - 68px));margin:auto;padding:var(--space-8) var(--space-0) var(--space-10)}
.anva-auth-heading{margin-bottom:var(--space-8)}
.anva-auth-heading-icon{width:46px;height:46px;display:grid;place-items:center;margin-bottom:var(--space-4);border-radius:15px;background:var(--palette-edf6f2);color:var(--palette-286b54);font-size:var(--type-card-title)}
.anva-auth-heading h1,.anva-auth-result h1{margin:var(--space-0);color:var(--palette-1e2221);font-size:var(--type-section-title);line-height:var(--leading-page);letter-spacing:var(--tracking-display)}
.anva-auth-heading>p:last-child,.anva-auth-result>p{margin:var(--space-3) var(--space-0) var(--space-0);color:var(--palette-66706d);font-size:var(--type-body-sm);line-height:var(--leading-body)}
.anva-auth-form{gap:var(--space-4)}
.anva-auth-form .anva-field{gap:var(--space-2)}
.anva-auth-form .anva-label{font-size:var(--type-caption);font-weight:var(--weight-bold);color:var(--palette-303634)}
.anva-label-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.anva-field-meta{color:var(--palette-8a9390);font-size:var(--type-caption);font-weight:var(--weight-semibold)}
.anva-field-link{color:var(--palette-3b6558);font-size:var(--type-caption);font-weight:var(--weight-bold);text-decoration:none}
.anva-field-link:hover{text-decoration:underline}
.anva-auth-form .anva-input{height:52px;border-radius:13px;border-color:var(--palette-d9dddb);background:var(--palette-fcfcfb);padding-inline:var(--space-4);font-size:var(--type-body-sm);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.anva-auth-form .anva-input::placeholder{color:var(--palette-a6adab)}
.anva-auth-form .anva-input:hover{border-color:var(--palette-bcc5c2);background:var(--color-surface)}
.anva-auth-form .anva-input:focus{background:var(--color-surface);border-color:var(--palette-4c7d6d);box-shadow:0 0 0 4px var(--palette-alpha-69f4521c)}
.anva-password-control{position:relative;display:block}
.anva-password-control .anva-input{width:100%;padding-right:var(--space-12)}
.anva-password-toggle{position:absolute;top:50%;right:7px;translate:0 -50%;width:39px;height:39px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--palette-66706d);cursor:pointer;font-size:var(--type-caption);font-weight:var(--weight-bold)}
.anva-password-toggle:hover{background:var(--palette-f0f2f1);color:var(--palette-232826)}
.anva-password-toggle:focus-visible{outline:2px solid var(--palette-34715c);outline-offset:2px}
.anva-password-toggle svg{width:19px;height:19px}
.anva-password-toggle .anva-eye-closed{display:none}
.anva-password-toggle[aria-pressed="true"] .anva-eye-open{display:none}
.anva-password-toggle[aria-pressed="true"] .anva-eye-closed{display:block}
.anva-password-strength{display:grid;gap:var(--space-2);margin-top:var(--space-1)}
.anva-password-strength>span{display:block;height:4px;background:var(--palette-ecefed);border-radius:99px;overflow:hidden}
.anva-password-strength>span i{display:block;width:0;height:100%;border-radius:inherit;background:var(--palette-aeb5b3);transition:width .2s ease,background .2s ease}
.anva-password-strength small{color:var(--palette-858e8b);font-size:var(--type-caption);line-height:var(--leading-compact)}
.anva-password-strength[data-strength="weak"]>span i{width:33%;background:var(--palette-b76457)}
.anva-password-strength[data-strength="fair"]>span i{width:66%;background:var(--palette-c28a38)}
.anva-password-strength[data-strength="strong"]>span i{width:100%;background:var(--palette-2f7c5f)}
.anva-password-strength[data-strength="weak"] small{color:var(--palette-9c554b)}
.anva-password-strength[data-strength="fair"] small{color:var(--palette-936b2f)}
.anva-password-strength[data-strength="strong"] small{color:var(--palette-2f6f56)}
.anva-auth-submit{width:100%;min-height:52px;margin-top:var(--space-1);border-radius:13px;background:var(--palette-202523);border-color:var(--palette-202523);color:var(--color-surface);font-size:var(--type-body-sm);font-weight:var(--weight-heavy);box-shadow:0 7px 18px var(--palette-alpha-e1930cc4)}
.anva-auth-submit:hover{background:var(--palette-101412);border-color:var(--palette-101412);transform:none}
.anva-auth-submit:active{translate:0 1px}
.anva-auth-switch{margin:var(--space-1) var(--space-0) var(--space-0);text-align:center;color:var(--palette-7b8481);font-size:var(--type-caption)}
.anva-auth-switch a{color:var(--palette-2e5e4f);font-weight:var(--weight-heavy);text-decoration:none}
.anva-auth-switch a:hover{text-decoration:underline}
.anva-auth-legal{margin:-2px var(--space-0) var(--space-0);color:var(--palette-909795);font-size:var(--type-caption);line-height:var(--leading-body);text-align:center}
.anva-auth-panel-foot{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-0) var(--space-8) var(--space-6);color:var(--palette-a0a7a5);font-size:var(--type-caption)}
.anva-auth-email-card{display:grid;gap:var(--space-2);margin:var(--space-0) var(--space-0) var(--space-5);padding:var(--space-4) var(--space-4);border:1px solid var(--palette-e0e5e2);border-radius:15px;background:var(--palette-fafbf9)}
.anva-auth-email-card>span:first-child{color:var(--palette-8a9390);font-size:var(--type-caption);text-transform:uppercase;letter-spacing:var(--tracking-label);font-weight:var(--weight-bold)}
.anva-auth-email-card strong{font-size:var(--type-body-sm);overflow-wrap:anywhere}
.anva-auth-email-card .anva-badge{width:max-content}
.anva-auth-secondary-form{margin-top:var(--space-2);text-align:center}
.anva-auth-result{text-align:center;padding:var(--space-2) var(--space-0)}
.anva-auth-result-icon{width:54px;height:54px;display:grid;place-items:center;margin:var(--space-0) auto var(--space-4);border-radius:18px;background:var(--palette-edf6f2);color:var(--palette-2f795c);font-size:var(--type-card-title);font-weight:var(--weight-heavy)}
.anva-auth-result.is-error .anva-auth-result-icon{background:var(--palette-faf0ee);color:var(--palette-a74d45)}
.anva-auth-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-6)}
.anva-auth-actions>*{flex:1 1 160px}
.anva-auth-content>.anva-alert{margin-bottom:var(--space-5)}
.anva-auth-shell-profile{padding:var(--s4)}
.anva-auth-shell-profile .anva-auth-card{width:min(100%,960px)}
.anva-auth-shell-profile .anva-password-toggle{position:absolute}
@media(max-width:839px){
  .anva-auth-shell{padding:var(--space-0);place-items:stretch;background:var(--color-surface)}
  .anva-auth-frame{min-height:100dvh;border:0;border-radius:0;box-shadow:none;grid-template-columns:1fr}
  .anva-auth-brand{display:none}
  .anva-auth-topbar{padding:var(--space-5) var(--space-5) var(--space-0)}
  .anva-auth-content{width:min(100% - 44px,500px);padding:var(--space-12) var(--space-0) var(--space-10)}
  .anva-auth-panel-foot{padding:var(--space-0) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom,var(--space-0)))}
}
@media(max-width:639px){
  .anva-auth-topbar{padding:var(--space-4) var(--space-4) var(--space-0)}
  .anva-auth-home-link span{display:none}
  .anva-auth-home-link{width:40px;height:40px;justify-content:center;border:1px solid var(--palette-e1e4e2);border-radius:12px}
  .anva-auth-top-action{font-size:var(--type-caption)}
  .anva-auth-content{width:calc(100% - 36px);padding:var(--space-10) var(--space-0) var(--space-8);margin:var(--space-0) auto}
  .anva-auth-heading{margin-bottom:var(--space-6)}
  .anva-auth-heading h1,.anva-auth-result h1{font-size:var(--type-section-title)}
  .anva-auth-heading>p:last-child,.anva-auth-result>p{font-size:var(--type-label);line-height:var(--leading-body)}
  .anva-auth-form{gap:var(--space-4)}
  .anva-auth-form .anva-input{height:50px;font-size:var(--type-body)}
  .anva-auth-submit{min-height:50px}
  .anva-auth-panel-foot{font-size:var(--type-caption);padding:var(--space-0) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom,var(--space-0)))}
  .anva-auth-panel-foot span:last-child{display:none}
}
@media(max-width:359px){.anva-auth-content{width:calc(100% - 28px)}.anva-auth-topbar{padding-inline:var(--space-3)}.anva-auth-heading h1{font-size:var(--type-title-sm)}}
@media(prefers-reduced-motion:reduce){.anva-password-strength>span i,.anva-auth-form .anva-input{transition:none}}


/* Tahap 21 settings workspace — native acquisition for Profile & Security. */
.anva-profile-settings{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--space-4);align-items:start}
.anva-profile-settings-nav{position:sticky;top:18px;display:grid;gap:var(--space-1);padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.anva-profile-settings-nav a{min-height:40px;display:flex;align-items:center;padding:var(--space-2) var(--space-2);border-radius:9px;color:var(--color-text-muted);font-size:var(--type-caption);font-weight:var(--weight-semibold);text-decoration:none}
.anva-profile-settings-nav a:hover,.anva-profile-settings-nav a:focus-visible{background:var(--color-surface-subtle);color:var(--color-text)}
.anva-profile-settings-content{display:grid;gap:var(--space-3);min-width:0}
.anva-settings-card{scroll-margin-top:var(--space-5)}
.anva-settings-head{margin-bottom:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border)}
.anva-settings-head h2{margin:var(--space-0);font-size:var(--type-body)}.anva-settings-head p{margin:var(--space-1) var(--space-0) var(--space-0);color:var(--color-text-muted);font-size:var(--type-caption)}
@media(max-width:759px){.anva-profile-settings{grid-template-columns:1fr}.anva-profile-settings-nav{position:static;display:flex;overflow-x:auto}.anva-profile-settings-nav a{min-width:max-content}.anva-auth-shell-profile .anva-auth-card{width:100%}}


/* Tahap 21.1 Total Auth Universal UI Application — distinct desktop/tablet/mobile composition. */
.anva-auth-page[data-auth-ui="stage21.1"]{background:radial-gradient(circle at 14% 10%,color-mix(in srgb,var(--color-biomass) 7%,transparent),transparent 24rem),radial-gradient(circle at 88% 82%,color-mix(in srgb,var(--color-success) 7%,transparent),transparent 26rem),var(--color-canvas)}
.anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-shell:not(.anva-auth-shell-profile){padding:var(--space-6)}
.anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-frame{width:min(1180px,100%);min-height:min(760px,calc(100dvh - 48px));grid-template-columns:minmax(390px,.92fr) minmax(0,1.08fr);border:1px solid color-mix(in srgb,var(--color-border) 82%,transparent);border-radius:30px;box-shadow:0 32px 90px color-mix(in srgb,var(--color-text) 13%,transparent)}
.anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-brand{padding:var(--space-10);background:radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--color-success) 18%,transparent),transparent 18rem),linear-gradient(145deg,var(--palette-051f17),var(--palette-0d3327));border-radius:29px 0 0 29px}
.anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-brand-copy{max-width:440px}
.anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-brand-copy h2{font-size:var(--type-page-title);line-height:var(--leading-display);text-wrap:balance}
.anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-panel{border-radius:0 29px 29px 0;overflow:hidden}
.anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-content{width:min(480px,calc(100% - 72px));padding:var(--space-10) var(--space-0) var(--space-12)}
.anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-heading h1{font-size:var(--type-page-title);text-wrap:balance}
.anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-form .anva-input{height:54px;border-radius:14px;background:var(--color-surface)}
.anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-submit{min-height:54px;border-radius:14px}
.anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-shell-profile{padding:var(--space-8);background:var(--color-canvas)}
.anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-shell-profile .anva-auth-card{width:min(1180px,100%);border-radius:26px;box-shadow:0 28px 70px color-mix(in srgb,var(--color-text) 9%,transparent)}
.anva-auth-page[data-auth-ui="stage21.1"] .anva-profile-settings{grid-template-columns:240px minmax(0,1fr);gap:var(--space-5)}
.anva-auth-page[data-auth-ui="stage21.1"] .anva-profile-settings-nav{top:20px;border-radius:18px;padding:var(--space-3);box-shadow:0 8px 24px color-mix(in srgb,var(--color-text) 4%,transparent)}
.anva-auth-page[data-auth-ui="stage21.1"] .anva-settings-card{border-radius:20px}

@media(min-width:720px) and (max-width:959px){
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-shell:not(.anva-auth-shell-profile){padding:var(--space-3)}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-frame{min-height:calc(100dvh - 28px);grid-template-columns:280px minmax(0,1fr);border-radius:24px;box-shadow:0 22px 60px color-mix(in srgb,var(--color-text) 10%,transparent)}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-brand{display:flex;padding:var(--space-8) var(--space-6);border-radius:23px 0 0 23px}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-brand-copy h2{font-size:var(--type-section-title)}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-brand-copy>p:last-child{font-size:var(--type-label)}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-panel{border-radius:0 23px 23px 0}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-content{width:min(100% - 48px,480px);padding:var(--space-10) var(--space-0) var(--space-10)}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-heading h1{font-size:var(--type-section-title)}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-profile-settings{grid-template-columns:200px minmax(0,1fr)}
}
@media(min-width:640px) and (max-width:719px){
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-shell:not(.anva-auth-shell-profile){padding:var(--space-3)}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-frame{min-height:calc(100dvh - 24px);grid-template-columns:1fr;border-radius:23px}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-brand{display:flex;min-height:auto;padding:var(--space-5) var(--space-8);border-radius:22px 22px 0 0}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-brand-copy{display:none}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-brand-foot{margin-left:auto}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-panel{border-radius:0 0 22px 22px}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-content{width:min(100% - 56px,500px);padding:var(--space-10) var(--space-0) var(--space-12)}
}
@media(max-width:639px){
  .anva-auth-page[data-auth-ui="stage21.1"]{background:linear-gradient(180deg,var(--color-canvas),var(--color-surface))}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-shell:not(.anva-auth-shell-profile){padding:var(--space-0)}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-frame{min-height:100dvh;border:0;border-radius:0;background:transparent;box-shadow:none}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-panel{background:transparent}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-topbar{padding:var(--space-4) var(--space-4) var(--space-0)}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-content{width:calc(100% - 24px);margin:var(--space-4) auto var(--space-6);padding:var(--space-8) var(--space-4) var(--space-8);border:1px solid color-mix(in srgb,var(--color-border) 86%,transparent);border-radius:23px;background:var(--color-surface);box-shadow:0 20px 55px color-mix(in srgb,var(--color-text) 8%,transparent)}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-heading h1{font-size:var(--type-section-title)}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-form .anva-input{height:52px;font-size:var(--type-body)}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-panel-foot{padding:var(--space-0) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom))}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-shell-profile{padding:var(--space-3)}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-auth-shell-profile .anva-auth-card{border-radius:21px;box-shadow:0 16px 44px color-mix(in srgb,var(--color-text) 7%,transparent)}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-profile-settings{grid-template-columns:1fr;gap:var(--space-3)}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-profile-settings-nav{position:static;display:flex;overflow-x:auto;padding:var(--space-2);border-radius:15px}
  .anva-auth-page[data-auth-ui="stage21.1"] .anva-profile-settings-nav a{min-width:max-content}
}


/* Historical Stage 20.9.3 regression marker — runtime now consumes foundation typography:
.anva-auth-form .anva-input{height:50px;font-size:16px}
*/