:root {
    
    --paper-0: #ffffff;   
    --paper-1: #fbf9f5;   
    --paper-2: #f5f2ea;   
    --paper-3: #ece7db;   

    
    --line:        #e4ded1;   
    --line-strong: #d3cbbb;   

    
    --ink-1: #211e1a;   
    --ink-2: #55504a;   
    --ink-3: #6d6558;   
    --ink-4: #a69d90;   

    
    --seal-1: #fcece9;   
    --seal-2: #f2c9c3;   
    --seal-5: #d4261f;   
    --seal-6: #b21d17;   
    --seal-7: #8c160f;   
    --seal-9: #5f0f0a;   

    
    --up:   #c72317;   
    --down: #0b7540;   
    --warn: #a15002;
    --info: #0f6a7a;

    


    --font-sans: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
                 "Source Han Sans SC", "Noto Sans CJK SC",
                 system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;

    
    --fs-2xs: 11px;  --fs-xs: 12px;  --fs-sm: 13px;  --fs-base: 14px;
    --fs-md: 15px;   --fs-lg: 16px;  --fs-xl: 18px;  --fs-2xl: 24px;
    --fs-3xl: 30px;  --fs-4xl: 40px; --fs-5xl: 48px;

    
    --lh-tight: 1.25; --lh-snug: 1.45; --lh-base: 1.6; --lh-read: 1.75;
    --fw-reg: 400; --fw-semi: 600; --fw-bold: 700;

    

    --sp-1: 4px;  --sp-2: 6px;  --sp-3: 8px;  --sp-4: 12px;
    --sp-5: 16px; --sp-6: 20px; --sp-7: 24px; --sp-8: 32px;
    --sp-9: 40px; --sp-10: 56px; --sp-11: 72px;

    
    --r-1: 4px; --r-2: 6px; --r-3: 10px; --r-4: 12px; --r-pill: 999px;

    
    --t-fast: .15s; --t-base: .2s; --ease: cubic-bezier(.4, 0, .2, 1);
}







:root {
    











    --seal-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 516 476' width='516' height='476'%3E%3Cpath fill='%23d6271f' fill-rule='evenodd' d='M438 474 C 434.4 473 419.4 468.1 404.5 463.2 362.9 449.3 339.3 442.9 302.5 435.7 285.4 432.3 230.3 432.4 215.1 435.8 209.4 437.1 203.7 437.9 202.4 437.6 201 437.2 198.4 437.9 195.4 439.5 189.1 442.8 185.4 442.7 169.1 438.5 158 435.6 153.8 435 146.9 435.2 141.2 435.3 136.8 434.8 133 433.6 125.9 431.4 114.8 431.9 102.3 435.1 93.7 437.3 92.8 437.3 85.3 436.1 49.5 429.8 40 429.8 27.8 436.1 20.6 439.7 18.8 439.7 12.2 435.9 1.7 429.9 -0.1 417.9 8 407.5 14.1 399.6 20 400.4 20 409 20 414.6 20.5 415 25.9 415.3 41.3 415.9 43.3 392.6 28 390.6 20.7 389.6 19 387.9 19 381.4 19 376.1 19.6 375 21.6 377 25.4 380.8 30.7 373.8 32.9 362.2 L 34.5 353.5 C 44 348.2 45.1 348 50.5 348.6 65 350.2 65.3 350 67.4 337 70.6 318.1 74.2 302.3 77.2 294.5 81.7 282.8 81.5 281 76 278.3 71.3 276 54.5 276.9 41 280.1 31.8 282.3 31.3 282.3 28.2 280 25.9 278.3 24.3 277.9 22.1 278.3 19.4 278.9 18.9 278.6 18.4 276.3 17.3 271.9 18.9 243.3 21 229.5 23.3 214 23.4 206.1 21.5 187.5 18.9 162.5 19.4 156.6 24.1 158.3 26.2 159.1 28.8 159.1 34.2 158.1 38.2 157.4 44.3 156.5 47.8 156 51.9 155.5 57.3 153.7 62.8 151 75.7 144.8 84.4 144.3 91.7 149.4 94.6 151.4 98.7 153.7 100.8 154.5 103.1 155.5 106.7 158.4 109.4 161.6 112 164.6 115.4 167.7 117.1 168.5 119.2 169.7 120 170.8 120 172.8 119.9 177.7 117.1 179.7 101.5 185.9 80.5 194.2 64 203 62.1 206.9 57.5 216.7 72.4 221.7 85.7 214.7 90.3 212.3 103.6 206.9 111.5 204.2 121.3 200.8 131.2 196.9 135.7 194.6 142.7 191.1 146.3 191.2 150.9 195.1 165.2 207.3 183.4 218.8 196.5 223.9 L 206.6 227.9 C 236.3 225.1 261.3 229.3 266.4 234.9 271.3 240.3 253.4 253.3 235.5 257.4 231.7 258.3 226.3 260.4 223.5 262.1 215.1 267.3 204.1 266 201.2 259.5 195.4 246.3 194.5 250.4 194.5 290.5 194.5 322.8 194.4 323.6 192.4 326.3 189.9 329.4 190.5 335.6 193.4 337.2 195.6 338.4 195.8 365 193.7 365 183.3 365 147.5 338 147.5 330.2 L 147.5 327.5 C 184.2 327.5 186.4 326.7 187.6 318.9 188.9 311.4 186.5 310.3 167.3 309.8 143.6 309.1 139.7 307.3 141.3 297.3 142.2 292.1 142 292.2 159.5 291.4 179.8 290.5 183.9 288.3 181 279.4 179.2 274.1 177.3 273.6 161.4 273.9 L 147.3 274.1 C 144 269.9 143 267.9 143 266.8 143 261.3 138.5 257 132.7 257 128.5 257 127.4 258.2 126.6 264.1 125.4 272.6 116.9 276.2 99.4 275.7 87.5 275.4 85.5 276.6 84.5 284.7 83.4 294.5 84.7 296.4 92.3 295.6 120.4 292.9 123.9 293.5 122.6 300.5 120.7 310.5 95.7 317.5 87.8 310.3 83.4 306.3 76 314.6 75.3 324.2 74.6 332.6 76.7 335 83.1 333.1 89.2 331.3 108.8 328 113.8 328 122.2 328 120.1 333.7 106.5 347.5 90.4 363.9 72.2 373.4 62.9 370.1 53.4 366.8 54.4 379.7 64.5 390.8 72.8 400 78.4 397.2 106.7 369.9 117.6 359.4 118.6 358.8 121.5 362 123.3 364 123.3 386.2 121.4 403.1 120.6 410.1 122.2 412 128.6 412 140.2 412 140.6 410.8 140.2 377.8 139.8 346 140 345.5 148.8 358.8 159.9 375.2 168.6 385.8 174.2 389.4 177.8 391.7 187.1 391.8 190.4 389.6 194.1 387.3 194.8 387.6 195.5 391.8 198 407.7 198.1 408.1 201.3 405.3 202.5 404.2 205 402.5 206.7 401.6 214.8 397.5 240.4 379.7 247.3 373.3 253.5 367.6 262.4 363.4 265.4 364.8 271.8 367.7 269 375.1 257.7 385.1 245.6 395.8 244.9 397.9 252.8 400.3 265.3 404.2 272.4 405.1 289 404.8 298.1 404.6 306.9 404.9 308.7 405.3 316.8 407.4 317.3 403.9 316.7 349.5 316.2 300.1 315.4 295.2 305.5 284.7 298.9 277.7 299.6 277.3 322.5 276.6 344.8 275.9 357.4 272.9 363.9 266.9 368.6 262.5 363.8 255 356.2 255 343.3 255 309.4 260.7 296.3 265.2 286.1 268.6 278 265.1 276.5 256.7 275.1 249.4 279.7 246.3 287.6 249.2 291.9 250.7 299.3 249.1 308.8 244.5 317 240.6 317.5 239.6 317.3 229.1 317 218.8 317.4 219 300 220.7 289.2 221.8 284.7 221.9 282.4 221.1 280.7 220.5 275 220 269.7 220 263.3 220 257.5 219.3 252.8 218.1 239.2 214.5 236.6 214.5 233 218 230.1 220.8 229.5 221 222.1 221 L 214.2 221 C 211.7 215.7 211 213.9 211 213.6 211 211.4 202.4 200.2 198.3 197.2 187.9 189.5 185.2 187.3 178.1 181 174.1 177.4 169.7 173 168.3 171.2 L 165.8 167.9 C 172.1 153 180.6 141.2 183.9 140.5 187.9 139.6 209 148.7 214 153.5 220.4 159.5 240 163.7 249.8 161.1 257.7 158.9 272.3 138.5 273.8 127.7 L 274.3 123.7 C 251.6 127.1 225.6 124.8 201 118.4 183.8 113.9 183.3 113.6 182.5 106.3 180.7 88.6 173.8 80.6 157 77.1 145.5 74.6 145.1 66.6 156.1 59.3 164.6 53.7 196.6 56.5 202.6 63.4 204.4 65.4 204.8 67.5 205.3 77.6 206.3 99 212.5 110.5 218.8 102.5 221.4 99.2 225.6 85 226.4 77 226.8 72.3 227.8 69.2 230 65.7 233.1 60.8 234.7 53 233.6 48.6 232.4 43.7 229.7 43 210.9 42.4 181.7 41.5 170.8 38.4 160.1 28 156.7 24.9 152.3 21.4 150.3 20.5 L 146.5 18.7 C 186.6 11.1 185.9 11.2 196.8 14.8 216.9 21.5 220.8 21.4 236 13.9 247.5 8.3 247.7 8.3 252.2 10.9 261.3 16.1 280.5 16.1 288.5 10.8 L 293.1 7.8 C 323.9 13.2 377.6 9.3 398.4 2.1 405 -0.2 428.3 -1 432.1 1 435.3 2.8 434.6 8.4 430.7 12.4 423.6 19.4 420.1 84.3 425.9 100 429.5 109.8 429.7 124.4 426.4 137 423.5 148.4 423.4 152.4 426 161.5 427.7 167.3 427.8 169.4 427 174.5 426.5 177.8 426 182.7 426 185.3 426 189.9 425.9 190.1 423.8 189.3 419.8 187.9 400.9 188.5 397 190.2 392.9 192 381 202.6 381 204.4 381 210 372.4 213.5 359.8 213.1 351.2 212.8 340 214.4 340 215.9 340 216.3 341.4 217.9 343 219.5 344.7 221.2 346.8 224.7 347.7 227.8 350 234.9 351 235.3 369.5 234.7 390.7 234.1 396.2 231.8 405.9 219.1 411.6 211.5 412.4 211 418 211 422.4 211 430.5 218.9 434.4 227.2 L 436.5 231.5 C 448.9 232.7 459.6 232.9 468.3 232.7 L 484.1 232.3 C 489.9 239.7 488.3 241.6 475.3 246.7 468.6 249.4 468.2 249.4 441.5 249.7 398.7 250.1 394.6 250.8 391.9 257.7 388.8 265.8 404.5 270.2 437 270.4 463.6 270.5 466.6 272.7 458.7 286 451.7 297.7 448.5 311.9 447.5 336.5 447.1 344.2 446.7 352.3 446.5 354.5 446.3 356.7 445.9 365.2 445.5 373.5 444.7 393.8 443.5 400.2 439.9 404.1 436.7 407.5 434.7 407.1 433.6 402.6 431.4 393.7 383.6 390.8 360.1 398.1 356.6 399.1 348.4 400.6 341.9 401.2 319.3 403.5 324.4 413.2 349.5 415.5 373.8 417.8 401.8 423.7 411.6 428.5 431.3 438.3 462.8 434.5 503.7 417.6 517.2 412 519.1 415.3 511.8 431.3 496.3 465.5 467.2 482.3 438 474 Z M346 380 C 349 379.5 354.6 378.5 358.5 377.6 373.8 374.3 397.2 372 416.9 372 430.1 372 433.8 367.7 427.3 359.9 L 424.6 356.7 C 359.4 358.3 338 363.8 333.3 374.9 331.5 379.2 333.8 382.5 338 381.5 339.4 381.1 343 380.4 346 380 Z M209 356.4 C 206.2 349.1 210.1 341 216.3 341 217.5 341 222.1 339.2 226.5 337 236.3 332.1 246.7 329.8 256.9 330.2 269.8 330.7 268.6 332.1 242.5 346.7 235.8 350.5 215.2 359 212.8 359 210.7 359 209.7 358.4 209 356.4 Z M352.4 344.6 C 372.6 337.7 379.5 336.7 412.4 335.4 432.1 334.6 436.2 332 429.6 324.3 L 427.2 321.5 C 364.7 321.7 336 330.3 336 342.7 336 348.4 339.9 348.8 352.4 344.6 Z M35.4 326.4 C 34.5 322.8 35.9 308 37.5 305 41.4 297.4 60 293 61.5 299.3 62.2 302.2 58.6 316.2 55.7 322 52.1 329.1 36.9 332.4 35.4 326.4 Z M353.9 310 C 372 303.4 401.5 300.2 419.9 302.9 431.9 304.7 436.9 300.8 434.6 291.6 432 281.1 365.9 286.8 345.1 299.2 328.2 309.2 334.6 317 353.9 310 Z M207 307.2 C 197.6 302.6 204.8 294.4 224.5 287.3 234.6 283.7 257.1 283.6 261.3 287.2 L 263.5 289 C 247.8 302.3 216.1 311.8 207 307.2 Z M314.5 176.6 C 319.8 173.1 328 155.1 328 147.1 328 145.1 336.9 105 337.5 104 337.8 103.6 338.2 97.9 338.6 91.4 339.4 73.7 339.3 73.9 358.4 70.6 368.8 68.8 371 69.4 371 74.3 371 80.1 366 84 358.6 84 350 84 348.8 85.5 349.5 95.3 349.9 100.3 349.7 105.2 349 108 348.1 111.8 346.8 122.4 345.7 136.4 345.3 141.8 349.3 143.6 356.6 141.1 371.3 136 371.3 136.2 370.9 159.4 L 370.5 178.5 C 381.5 179.3 381.5 179.1 381.1 159.6 380.7 136.7 379.8 138 395.2 138 405.1 138 407.7 137.7 409.2 136.3 411.6 134.1 411.5 128.8 409 126.5 406.6 124.3 406.4 121 408.6 116.8 409.5 115.1 410.8 109.9 411.6 105.2 412.5 99.4 413.8 95.5 415.5 93 421.5 84.3 419.5 82.7 398.5 80.5 381.6 78.6 380.3 77.9 383.1 71.6 384.6 68.5 387.5 67.8 394 69 404.3 70.9 412.1 69.8 413.5 66.2 415.7 60.3 391.5 57.4 362.8 60.1 346.6 61.6 338.2 61.8 335.9 60.7 334.8 60.1 333.3 60.7 331.5 62.2 328.8 64.6 328.7 64.8 328 80.6 327.2 97 324.8 114.3 323.1 116.4 322.5 117 321.1 122.7 319.9 128.9 317.9 139.1 317.2 141 312.6 148 309.8 152.2 306.3 157.8 304.8 160.3 301.6 165.8 298.2 168.2 292.6 169 284.1 170.1 289.4 176 300.8 178 306.7 179.1 311.5 178.6 314.5 176.6 Z M350.9 168.5 C 357.3 165.3 362.4 155.4 360 151 358.8 148.7 358.2 148.6 354.6 150 353.1 150.5 349.2 151.4 345.7 152 338.8 153.1 337 154.7 337 159.4 337.1 167.4 344.2 172 350.9 168.5 Z M413.6 166.9 C 416.5 164.2 421.3 155.2 420.7 153.7 419.4 150.2 393.5 147.6 392.2 150.8 387.2 163.1 404 175.8 413.6 166.9 Z M283.3 153.6 C 295 146.3 297.5 144 301 137.6 305.5 129.1 299.2 130.2 282.5 140.8 279.8 142.5 277 144 276.4 144 272.7 144 268 154.3 270 158 271.5 160.9 272 160.7 283.3 153.6 Z M139 157.1 C 131.8 154.9 121 146.9 121 143.8 121 136.9 140 132.5 150.4 137.1 160.5 141.5 149.8 160.4 139 157.1 Z M356.5 129 C 355.3 127.1 358.1 121.1 361.2 118.9 366.2 115.3 391 112.7 396.5 115.2 400 116.8 399.9 121.1 396.4 123.9 394.1 125.7 392.3 126 382.6 126 374 126 370.1 126.5 365.7 128 359.3 130.3 357.4 130.5 356.5 129 Z M22 117 C 21.9 72.4 16.9 49.2 5.3 39.3 0.6 35.2 -1.6 31 1 31 2.9 31 9.2 24.6 11.1 20.6 20 2.8 24.7 -2 29.9 1.3 38.9 7.1 40.2 7.3 57.9 6.6 73.3 5.9 74.8 5.7 78.3 3.4 82.6 0.6 83 0.7 84.5 5.3 85.8 9.3 89.9 10.2 101.7 9.1 111.6 8.1 114.7 8.6 116.2 11.4 119.2 17.2 120.8 18 130.2 18 135.4 18 139 18.4 139 19 139 19.6 138.6 20 138.2 20 137.2 20 134 26.5 134 28.5 134 36.9 102.3 45.8 75.9 44.6 59.7 43.9 59 44.3 61 51.5 62.6 57.2 61.7 64.7 58.4 72.5 53.5 84 54.5 99.4 60.4 103.2 65.9 106.9 73.7 99.8 81.3 84.3 87.7 71 93.7 65.4 106.8 60.2 125.5 52.8 132.7 61.8 122 79 119.3 83.4 116.3 88.6 115.4 90.5 114.5 92.4 110.6 97.5 106.6 101.7 102.7 106 98.3 110.9 96.9 112.7 92.9 117.5 89.3 118.8 75.4 120.5 59.1 122.5 45.7 124.8 42.2 126.2 40.7 126.8 35.6 127.3 30.8 127.4 L 22 127.6 Z M291.6 119.2 C 299.4 115.2 309.3 102.6 306.2 100.6 305.2 100 289.8 102.6 285.6 104 284 104.6 281.3 105 279.6 105 270 105 263.6 118.6 272 121.2 276.5 122.5 287.2 121.4 291.6 119.2 Z M127.6 113.5 C 120.4 108 142.2 84.3 150.5 88.6 152 89.4 154 90 155 90 158 90 158.9 92.3 159.6 101.1 160.4 111.4 160.2 111.5 149.8 112.3 145.6 112.6 141.3 113.3 140.2 113.9 137.3 115.4 129.9 115.2 127.6 113.5 Z M361.7 104.3 C 360 102.7 361.1 98.1 363.6 96.1 370.5 90.7 402 90 402 95.4 402 100 398.8 101.3 385.9 102.1 379.1 102.5 371.9 103.3 370 103.9 366.1 105.1 362.7 105.3 361.7 104.3 Z M303.6 85.2 C 328.1 72.1 324.5 64 294 63.2 276.8 62.8 275 63.8 275 74.2 275 90.3 286.1 94.6 303.6 85.2 Z'/%3E%3C/svg%3E");

    



    --primary:       #2f2a26;   
    --primary-dark:  #191614;
    --primary-light: #efeae1;

    
    --success: var(--down);
    --warning: var(--warn);
    --danger:  var(--up);
    

    
    --bg:             var(--paper-2);
    --bg-muted:       var(--paper-3);
    --card:           var(--paper-0);
    --border:         var(--line);
    --text:           var(--ink-1);
    --text-secondary: var(--ink-2);
    

    --text-muted:     var(--ink-3);

    
    --sidebar-bg:     #26221d;
    --sidebar-text:   #cfc7ba;   
    --sidebar-hover:  #332e28;
    --sidebar-active: var(--seal-5);   

    --overlay: rgba(33, 30, 26, .48);

    
    --select-bg:        #f0ece4;
    --select-bg-strong: #e4ddd0;
    --select-border:    var(--primary-dark);
    --select-highlight: rgba(47, 42, 38, .32);

    
    --radius:      var(--r-3);
    --radius-sm:   var(--r-2);
    --radius-xs:   var(--r-1);
    --radius-lg:   var(--r-4);
    --radius-pill: var(--r-pill);

    
    --shadow:    0 1px 3px rgba(33, 30, 26, .07), 0 1px 2px rgba(33, 30, 26, .04);
    --shadow-lg: 0 10px 30px rgba(33, 30, 26, .11);

    --sidebar-width: 220px;

    
    --z-sidebar: 40; --z-sidebar-mask: 35; --z-topbar: 30;
    --z-dropdown: 50; --z-modal: 100; --z-toast: 200;

    
    --fs-h3:  var(--fs-md);    
    --fs-h2:  var(--fs-lg);    
    --fs-h1:  var(--fs-xl);    
    --fs-kpi: var(--fs-2xl);   

    

    --ctl-h: 34px;
    --ctl-h-sm: 30px;

    
    --primary-ink: var(--ink-1);
    --primary-bg:  #efeae1;
    --primary-bd:  #ded6c6;

    --success-ink: #0b7540;  --success-bg: #e6f2ea;  --success-bd: #bcdcca;
    --warning-ink: #8a4300;  --warning-bg: #faf0e1;  --warning-bd: #ecd5ae;
    --danger-ink:  #a51b12;  --danger-bg:  #fbeae7;  --danger-bd:  #f0c7c0;
    --info-ink:    #0f6a7a;  --info-bg:    #e4f1f4;  --info-bd:    #b3d8e0;
    --purple-ink:  #6b3fa0;  --purple-bg:  #efe9fa;  --purple-bd:  #d7ccf0;
    --neutral-ink: var(--ink-2); --neutral-bg: #efeae1; --neutral-bd: var(--line);

    --code-bg: #26221d;   
    --code-fg: #ece7db;
}


* { box-sizing: border-box; }



table, .num, .kpi-card, .kpi-extra, .pagination { font-variant-numeric: tabular-nums; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
.muted { color: var(--text-secondary); font-size: var(--fs-sm); font-weight: normal; }











button, input, select, textarea { font-family: inherit; font-size: var(--fs-base); color: inherit; }



input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}



.table-scroll,
.heatmap-wrap,
.pi-w-scroll,
.metric-picker,
.modal-body,
.sidebar-nav,
.sql-preview,
.copy-fallback {
    scrollbar-width: thin;
    scrollbar-color: #c9c1b3 transparent;
}

.table-scroll::-webkit-scrollbar,
.heatmap-wrap::-webkit-scrollbar,
.pi-w-scroll::-webkit-scrollbar,
.metric-picker::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.sql-preview::-webkit-scrollbar,
.copy-fallback::-webkit-scrollbar { width: 10px; height: 10px; }

.table-scroll::-webkit-scrollbar-track,
.heatmap-wrap::-webkit-scrollbar-track,
.pi-w-scroll::-webkit-scrollbar-track,
.metric-picker::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track,
.sql-preview::-webkit-scrollbar-track,
.copy-fallback::-webkit-scrollbar-track { background: transparent; }

.table-scroll::-webkit-scrollbar-thumb,
.heatmap-wrap::-webkit-scrollbar-thumb,
.pi-w-scroll::-webkit-scrollbar-thumb,
.metric-picker::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb,
.sql-preview::-webkit-scrollbar-thumb,
.copy-fallback::-webkit-scrollbar-thumb {
    background: #c9c1b3;
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: var(--radius-pill);
}

.table-scroll::-webkit-scrollbar-thumb:hover,
.heatmap-wrap::-webkit-scrollbar-thumb:hover,
.pi-w-scroll::-webkit-scrollbar-thumb:hover,
.metric-picker::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: #a89f90; background-clip: content-box; }




@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    


    .page { animation: none !important; }
    .is-busy::before { opacity: .85; }
}







html.auth-ok .login-view { display: none; }



.boot-hint { display: none; }
html.auth-ok .boot-hint {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
}
.boot-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    opacity: .7;
}
@media (prefers-reduced-motion: no-preference) {
    .boot-dot { animation: busy-pulse 1.1s ease-in-out infinite; }
}


.login-view {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(150deg, #2b2621 0%, #4a231c 60%, var(--seal-7) 100%);
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-lg);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

















.login-logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background-image: var(--seal-img);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.login-logo.small { width: 32px; height: 32px; }

.login-brand h1 { font-size: var(--fs-h1); margin: 0 0 2px; }
.login-brand p { font-size: var(--fs-xs); color: var(--text-muted); margin: 0; }


















.legal-foot {
    display: flex;
    flex-direction: column;
    

    gap: var(--sp-1);
    margin: var(--sp-5) 0 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs);
    line-height: 1.5;
    

    color: var(--text-secondary);
    text-align: center;
}

.legal-foot .legal-item { display: block; }
.legal-foot a { color: var(--text-secondary); }
.legal-foot a:hover { color: var(--primary); }


.app-view { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-sidebar);
    transition: transform .25s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}



.sidebar-brand > span { line-height: 1.3; text-wrap: balance; }

.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 20px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 14px;
    border-left: 3px solid transparent;
    transition: background-color .15s, color .15s;
}

.nav-item:hover { background: var(--sidebar-hover); color: #fff; }
.nav-item.active {
    background: var(--sidebar-active);
    color: #fff;
    border-left-color: var(--seal-2);
}
.nav-icon { width: 18px; text-align: center; font-size: 15px; }

.sidebar-footer { padding: 12px 18px; border-top: 1px solid rgba(255, 255, 255, .08); }

.service-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xs);
    cursor: pointer;
    color: var(--sidebar-text);
    border-radius: var(--radius-sm);
    transition: color var(--t-fast) var(--ease);
}

.service-status:hover { color: #fff; }

.service-status .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(11, 117, 64, .22);
}

.service-status.degraded .dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(199, 35, 23, .22); }

.main {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-width: 0;
}


.topbar {
    height: 56px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
}

.topbar-title { font-size: var(--fs-h2); font-weight: 600; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 14px; }



.icon-btn {
    display: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 16px;
    color: var(--text);
    transition: background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}

.icon-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.icon-btn:active { background: var(--primary-bg); }

.role-badge {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 500;
}





.role-badge:empty { display: none; }

.user-menu { position: relative; }

.user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: var(--fs-base);
    color: var(--text);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background-color var(--t-fast) var(--ease);
}

.user-btn:hover { background: var(--bg); }

.avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: 600;
}

.dropdown {
    position: absolute;
    right: 0;
    top: 42px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    min-width: 140px;
    overflow: hidden;
    z-index: var(--z-dropdown);
    animation: menuIn var(--t-fast) var(--ease);
}

@keyframes menuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.dropdown button {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: var(--fs-base);
    color: var(--text);
    transition: background-color var(--t-fast) var(--ease);
}

.dropdown button:hover { background: var(--bg); }
.dropdown button:last-child { color: var(--danger); }

.content { padding: 20px; flex: 1; }
.page { animation: fadeIn var(--t-base) var(--ease); }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}



.card,
.kpi-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
}

.card { margin-bottom: 18px; }




.drill-back {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.card-head h3 { margin: 0; font-size: 15px; font-weight: 600; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}



.card-grid .card { margin-bottom: 0; min-width: 0; }
.card-grid .span-2 { grid-column: span 2; }


.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.kpi-card {
    border-left: 3px solid var(--primary);
}

.kpi-card.green { border-left-color: var(--success); }
.kpi-card.orange { border-left-color: var(--warning); }
.kpi-card.cyan { border-left-color: var(--info); }

.kpi-label { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: 6px; }


.kpi-value { font-size: var(--fs-kpi); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi-extra { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 6px; }
.kpi-extra .up { color: var(--danger); }      
.kpi-extra .down { color: var(--success); }   






.chart-box { position: relative; height: 260px; min-width: 0; overflow: hidden; }
.chart-box.tall { height: 320px; }

.chart-box canvas { max-width: 100%; }







.chart-text-layer {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;      
    pointer-events: none;  
}

.chart-text-layer .chart-text {
    position: absolute;
    display: flex;
    align-items: center;
    color: transparent;            
    white-space: nowrap;
    cursor: text;
    user-select: text;
    pointer-events: auto;          
}
.chart-text-layer .chart-text::selection { background: var(--select-highlight); }


.input {
    height: var(--ctl-h);
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    background: #fff;
    color: var(--text);
    outline: none;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
    max-width: 100%;
}

.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 42, 38, .12); }
.input-sm { height: var(--ctl-h-sm); font-size: var(--fs-sm); padding: 0 8px; }
select.input { cursor: pointer; }

.form-item { margin-bottom: 16px; }
.form-item > label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--fs-sm);
    font-weight: 500;
}
.form-item > label .req { color: var(--danger); margin-left: 2px; }
.form-item .input { width: 100%; }

.field-error { display: block; color: var(--danger); font-size: var(--fs-xs); margin-top: 4px; min-height: 16px; }
.field-error:empty { min-height: 0; }



.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.form-grid .full { grid-column: span 2; }


.form-section { margin-bottom: 20px; }

.form-section-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary);
    padding: 6px 10px;
    margin-bottom: 12px;
    background: var(--primary-light);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
}




.inline-label {
    display: inline-flex;
    align-items: center;
    min-height: var(--ctl-h-sm);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}




.btn {
    height: var(--ctl-h);
    padding: 0 14px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-base);
    white-space: nowrap;
    transition: background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}

.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn:active { background: var(--primary-light); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn-primary:active { background: var(--primary-dark); }
.btn-danger-ghost { color: var(--danger); border-color: var(--danger-bd); }
.btn-danger-ghost:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.btn-sm { height: var(--ctl-h-sm); padding: 0 10px; font-size: var(--fs-sm); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn:disabled:hover { border-color: var(--border); color: var(--text); background: #fff; }
.btn-primary:disabled:hover { border-color: var(--primary); color: #fff; background: var(--primary); }




.filter-bar > .input,
.filter-bar > .btn,
.toolbar .btn {
    height: var(--ctl-h-sm);
    font-size: var(--fs-sm);
    padding: 0 10px;
}





.btn:focus-visible,
.page-btn:focus-visible,
.page-size:focus-visible,
.date-chip:focus-visible,
.op-link:focus-visible,
.icon-btn:focus-visible,
.modal-close:focus-visible,
.user-btn:focus-visible,
.nav-item:focus-visible,
.sortable:focus-visible,
.saved-chip:focus-visible,
.metric-group-all:focus-visible,
.service-status:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}


.shop-filter { display: inline-flex; align-items: center; gap: 6px; }
.shop-filter .input { min-width: 150px; }


.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.filter-bar .input { min-width: 130px; }


.date-range { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.date-chips { display: inline-flex; gap: 4px; }

.date-chip {
    height: var(--ctl-h-sm);
    padding: 0 12px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}

.date-chip:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.date-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.date-chip:disabled { opacity: .55; cursor: not-allowed; }

.date-custom { display: inline-flex; align-items: center; gap: 8px; }
.date-custom .input { min-width: 130px; }

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    margin-bottom: 4px;
}

.toolbar-left, .toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }


.table-scroll { overflow-x: auto; }








.table-fold > summary {
    padding: var(--sp-2) 2px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    cursor: pointer;
    user-select: none;
}
.table-fold > summary:hover { color: var(--primary-ink); }
.table-fold[open] > summary {
    margin-bottom: var(--sp-3);
    border-bottom: 1px dashed var(--border);
}

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }

.table th, .table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}



.table td { font-variant-numeric: tabular-nums; }

.table th {
    background: var(--bg-muted);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    position: sticky;
    top: 0;
}

.table tbody tr:hover { background: var(--bg-muted); }
.table .col-check { width: 40px; }
.table .col-op { width: 130px; }

.sortable { cursor: pointer; user-select: none; }
.sortable:hover { color: var(--primary); }
.sortable::after { content: "⇅"; margin-left: 4px; opacity: .35; font-size: 12px; }
.sortable.asc::after { content: "↑"; opacity: 1; color: var(--primary); }
.sortable.desc::after { content: "↓"; opacity: 1; color: var(--primary); }

.table-empty { text-align: center; padding: 40px; color: var(--text-muted); }



.table th.wrap, .table td.wrap {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 120px;
}


.card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }




.table tbody tr.row-selected {
    background: var(--select-bg);
    box-shadow: inset 3px 0 0 var(--select-border);   
}

.table tbody tr.row-selected,
.table tbody tr.row-selected:hover { background: var(--select-bg); }



.table td.cell-selected {
    position: relative;          
    background: var(--select-bg-strong);
    box-shadow: inset 0 0 0 2px var(--select-border);
}

.table td.cell-selected.range-anchor::after {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 0; height: 0;
    border-top: 6px solid var(--select-border);
    border-right: 6px solid transparent;
}
.table td.cell-selected::selection { background: var(--select-highlight); }



.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    font-size: var(--fs-xs);
    line-height: 18px;
    white-space: nowrap;
}

.tag-gray { background: var(--neutral-bg); color: var(--neutral-ink); }
.tag-blue { background: var(--primary-bg); color: var(--primary-ink); }
.tag-cyan { background: var(--info-bg); color: var(--info-ink); }
.tag-green { background: var(--success-bg); color: var(--success-ink); }
.tag-red { background: var(--danger-bg); color: var(--danger-ink); }
.tag-orange { background: var(--warning-bg); color: var(--warning-ink); }
.tag-purple { background: var(--purple-bg); color: var(--purple-ink); }

.op-link {
    border: none;
    background: none;
    color: var(--primary);
    cursor: pointer;
    font-size: var(--fs-sm);
    padding: 2px 4px;
    border-radius: var(--radius-xs);
    transition: background-color var(--t-fast) var(--ease);
}

.op-link:hover { text-decoration: underline; }
.op-link.danger { color: var(--danger); }


.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 14px;
    flex-wrap: wrap;
}

.pagination .page-info { color: var(--text-secondary); font-size: var(--fs-sm); margin-right: auto; }


.page-btn {
    min-width: 30px;
    height: var(--ctl-h-sm);
    padding: 0 8px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--text);
    transition: background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}

.page-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.page-btn:disabled { opacity: .5; cursor: not-allowed; }



.page-size {
    height: var(--ctl-h-sm);
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--text);
    background: #fff;
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease);
}

.page-size:hover { border-color: var(--primary); }


.conditions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.condition-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.condition-row .idx {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-xs);
    background: var(--primary);
    color: #fff;
    font-size: var(--fs-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.condition-row select.input, .condition-row input.input { flex: 1; min-width: 110px; }


.condition-row select.input.connector-select { width: 72px; flex: 0 0 72px; min-width: 72px; }
.condition-row .btn-remove { flex-shrink: 0; }

.conditions-empty {
    padding: 22px;
    text-align: center;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}

.saved-queries { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.saved-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--primary-light);
    border: 1px solid var(--primary-bd);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease);
}

.saved-chip:hover { background: var(--primary-bg); }


.saved-chip .x {
    color: var(--text-muted);
    font-size: var(--fs-base);
    background: none;
    border: 0;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}
.saved-chip .x:hover { color: var(--danger); }



.metric-picker { max-height: clamp(260px, calc(100vh - 260px), 720px); overflow-y: auto; padding-right: 4px; }

.metric-group { margin-bottom: 18px; }
.metric-group:last-child { margin-bottom: 0; }

.metric-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    margin-bottom: 10px;
    background: var(--primary-light);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
}

.metric-group-name { font-size: var(--fs-sm); font-weight: 600; color: var(--primary); }

.metric-group-all {
    border: none;
    background: none;
    padding: 0 4px;
    font-size: var(--fs-xs);
    color: var(--primary);
    cursor: pointer;
}
.metric-group-all:hover { text-decoration: underline; }

.metric-items { display: flex; flex-wrap: wrap; gap: 8px 18px; }

.metric-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    white-space: nowrap;
    cursor: pointer;
}
.metric-item:hover span { color: var(--primary); }


.metric-item.locked { cursor: default; }
.metric-item.locked input { cursor: not-allowed; }
.metric-item.locked:hover span { color: inherit; }

.metric-hint {
    margin: 0 0 12px;
    padding: 8px 10px;
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--text-secondary);
    background: var(--bg-muted);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
}



.cell-sub {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    white-space: normal;
    overflow-wrap: anywhere;
}




.badge-hist {
    margin-left: 4px;
    padding: 0 6px;
    font-size: var(--fs-2xs);
    line-height: 16px;
    color: var(--text-muted);
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    white-space: nowrap;
    vertical-align: middle;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.badge-hist:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.sql-preview {
    margin-top: 12px;
    padding: 12px;
    background: var(--code-bg);
    color: var(--code-fg);
    border-radius: var(--radius-sm);
    font-family: Consolas, Monaco, monospace;
    font-size: var(--fs-xs);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}


.modal-mask {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: var(--z-modal);
    animation: fadeIn var(--t-fast) var(--ease);
}

.modal {
    background: #fff;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: modalIn var(--t-base) var(--ease);
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(8px) scale(.99); }
    to { opacity: 1; transform: none; }
}

.modal-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-head h3 { margin: 0; font-size: var(--fs-h2); }

.modal-close {
    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
    border-radius: var(--radius-xs);
    transition: color var(--t-fast) var(--ease);
}

.modal-close:hover { color: var(--text); }
.modal-body { padding: 20px; overflow-y: auto; }


.modal-text { margin: 0; font-size: var(--fs-base); line-height: 1.7; }
.modal-lead { margin: 0 0 10px; }


.copy-fallback {
    width: 100%;
    height: 240px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: Consolas, Monaco, monospace;
    font-size: var(--fs-xs);
    line-height: 1.6;
    white-space: pre;
    overflow: auto;
    resize: vertical;
}

.modal-foot {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}


.alert {
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    margin-bottom: 14px;
}

.alert-error { background: var(--danger-bg); color: var(--danger-ink); border: 1px solid var(--danger-bd); }
.alert-warn { background: var(--warning-bg); color: var(--warning-ink); border: 1px solid var(--warning-bd); }


.shop-note { margin: -6px 0 12px; font-size: var(--fs-xs); line-height: 1.7; }

.toast-container {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
}

.toast {
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    background: var(--code-bg);
    color: #fff;
    font-size: var(--fs-base);
    box-shadow: var(--shadow-lg);
    animation: toastIn var(--t-base) var(--ease);
}

.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
.toast.info { background: var(--primary); }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}


.sidebar-mask {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: var(--z-sidebar-mask);
}




.head-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.head-controls > * { min-width: 0; }

.chk-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
}
.chk-inline input { margin: 0; cursor: pointer; }


.overview-note { margin: -10px 0 18px; font-size: var(--fs-xs); color: var(--text-muted); }
.overview-note:empty { display: none; }


.funnel { display: flex; flex-direction: column; gap: 14px; }

.funnel-item { display: flex; flex-direction: column; gap: 6px; }

.funnel-head { display: flex; align-items: baseline; justify-content: space-between; }
.funnel-name { font-size: var(--fs-sm); font-weight: 600; }
.funnel-num { font-size: var(--fs-h3); font-weight: 700; font-variant-numeric: tabular-nums; }

.funnel-track {
    height: 26px;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.funnel-bar { height: 100%; border-radius: var(--radius-sm); transition: width var(--t-base) var(--ease); }

.funnel-foot { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-muted); }
.funnel-foot b { color: var(--text-secondary); font-weight: 600; }
.funnel-lost { color: var(--warning); }


.fee-module { display: flex; flex-direction: column; gap: 10px; }


.fee-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.fee-name { font-size: var(--fs-xs); color: var(--text-secondary); }

.fee-track {
    height: 18px;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.fee-bar { height: 100%; border-radius: var(--radius-sm); transition: width var(--t-base) var(--ease); }

.fee-amt { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

.fee-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.fee-chip {
    flex: 1 1 90px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.fee-chip span { font-size: var(--fs-2xs); color: var(--text-muted); }
.fee-chip strong { font-size: var(--fs-h3); font-variant-numeric: tabular-nums; }
.fee-chip .up { color: var(--danger); }     
.fee-chip .down { color: var(--success); }  

.fee-note { margin: 2px 0 0; font-size: var(--fs-2xs); line-height: 1.6; color: var(--text-muted); }




.heatmap-wrap { overflow-x: auto; }

.hm { display: grid; gap: 3px; min-width: 420px; }

.hm-corner, .hm-date, .hm-shop, .hm-cell {
    font-size: var(--fs-2xs);
    line-height: 1.4;
    border-radius: var(--radius-xs);
}

.hm-corner, .hm-date {
    padding: 4px 6px;
    text-align: center;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-muted);
}
.hm-corner { text-align: left; }

.hm-shop {
    padding: 4px 6px;
    color: var(--text-secondary);
    white-space: normal;
    overflow-wrap: anywhere;
}

.hm-cell {
    padding: 4px 2px;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}







.hm-shop, .hm-cell, tr.drill-row { cursor: pointer; }
.hm-shop:hover { background: var(--bg-muted); border-radius: 4px; }
tr.drill-row:hover > td { background: var(--bg-muted); }
.drill-hint {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    align-self: center;
    white-space: nowrap;
}




.hm-cell-anomaly {
    box-shadow: inset 0 0 0 2px var(--danger);
    font-weight: 600;
}
.dir-high { color: var(--danger); font-weight: 600; }
.dir-low { color: var(--success); font-weight: 600; }






[data-copy="selected"].no-selection { visibility: hidden; }



.kpi-delta { font-size: var(--fs-xs); margin-top: 4px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kpi-delta.up { color: var(--danger); }
.kpi-delta.down { color: var(--success); }




.kpi-flag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: var(--radius-xs);
    font-size: var(--fs-xs);
    font-weight: 400;
    vertical-align: 3px;
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-bd);
}


.pi-advice {
    margin: 6px 0 0;
    padding: 6px 9px;
    border-left: 3px solid var(--info);
    background: var(--bg-muted);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}
.pi-advice b { color: var(--text); }


.pi-acts { margin: 2px 0 0; padding-left: 18px; }
.pi-acts li { margin: 1px 0; }


.funnel-note, .heatmap-note {
    margin: 10px 0 0;
    font-size: var(--fs-2xs);
    line-height: 1.7;
    color: var(--text-muted);
}
.heatmap-note:empty { display: none; }


.page-foot { margin: 14px 0 0; font-size: var(--fs-xs); text-align: right; }
.page-foot:empty { display: none; }


.pd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 12px;
}
.pd-meta-item { display: flex; flex-direction: column; gap: 2px; }
.pd-meta-item span { font-size: var(--fs-2xs); color: var(--text-muted); }
.pd-meta-item b { font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.pd-chart-box { height: 260px; }




@media (max-width: 1024px) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card-grid { grid-template-columns: minmax(0, 1fr); }
    .card-grid .span-2 { grid-column: span 1; }
    .chart-box { height: 240px; }
}




@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-mask.show { display: block; }
    .main { margin-left: 0; }
    .icon-btn { display: flex; align-items: center; justify-content: center; }
    .content { padding: 12px; }
    .topbar { padding: 0 12px; gap: 10px; }
    .topbar-title { font-size: var(--fs-h3); }
    .role-badge { display: none; }
    #user-name { display: none; }

    




    .btn,
    .input,
    .date-chip,
    .page-btn,
    .page-size,
    .op-link {
        min-height: var(--ctl-h);
    }

    



    .icon-btn {
        width: 44px;
        height: 44px;
    }

    .chk-inline,
    .metric-item {
        min-height: 32px;
    }

    .table td.col-check {
        min-height: 40px;
    }

    
    .kpi-grid { gap: 10px; }
    .kpi-card { padding: 14px; }
    .kpi-value { font-size: 20px; }

    .card { padding: 14px; }

    .filter-bar { gap: 8px; }
    .filter-bar .input { flex: 1 1 calc(50% - 4px); min-width: 0; }
    .filter-bar .btn { flex: 0 0 auto; }

    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar-left, .toolbar-right { justify-content: flex-start; }
    .toolbar-left .btn { flex: 1; }

    
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }

    .table tr {
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        margin-bottom: 10px;
        padding: 8px 4px;
        background: #fff;
    }

    .table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        border: none;
        padding: 6px 12px;
        white-space: normal;
        text-align: right;
    }

    .table td::before {
        content: attr(data-label);
        color: var(--text-secondary);
        font-size: var(--fs-sm);
        text-align: left;
        flex-shrink: 0;
    }

    .table td.col-check, .table td.col-op { width: auto; }
    .table td.col-op { justify-content: flex-end; gap: 12px; }
    .table td[data-label=""]::before { content: "操作"; }

    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .form-grid .full { grid-column: span 1; }

    .card-head { flex-direction: column; align-items: flex-start; }
    .modal { max-width: 100%; }
    .pagination { justify-content: center; }
    .pagination .page-info { margin-right: 0; width: 100%; text-align: center; }
    .condition-row { flex-wrap: wrap; }
    .condition-row select.input, .condition-row input.input { flex: 1 1 100%; }
}

@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .login-card { padding: 24px 20px; }
}






.load-error {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--danger-bd);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    color: var(--danger-ink);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.load-error .btn { margin-left: auto; flex-shrink: 0; }


.is-busy { position: relative; }
.is-busy::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    height: 3px;
    border-radius: 2px;
    background: var(--primary);
    opacity: .7;
}
.is-busy > * { opacity: .5; }

.is-busy > .load-error { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
    .is-busy::before { animation: busy-pulse 1.1s ease-in-out infinite; }
}

@keyframes busy-pulse {
    0%, 100% { opacity: .3; }
    50% { opacity: .9; }
}


.picker-btn {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}





.pi-pick-note { margin: 0; font-size: var(--fs-xs); }
.pi-pick-note:empty { display: none; }


.pi-id-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.pi-id-title h3 { margin: 0; font-size: 17px; line-height: 1.4; word-break: break-word; }
.pi-id-sub { margin-top: 4px; font-size: 12px; color: var(--text-secondary); }


.pi-warn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--text-muted);
    background: var(--bg-muted);
    flex-shrink: 0;
}
.pi-warn-label { font-size: var(--fs-base); font-weight: 700; }
.pi-warn-tag { font-size: var(--fs-2xs); color: var(--text-muted); }
.pi-warn-green { border-left-color: var(--success); background: var(--success-bg); }
.pi-warn-green .pi-warn-label { color: var(--success-ink); }
.pi-warn-yellow { border-left-color: var(--warning); background: var(--warning-bg); }
.pi-warn-yellow .pi-warn-label { color: var(--warning-ink); }
.pi-warn-red { border-left-color: var(--danger); background: var(--danger-bg); }
.pi-warn-red .pi-warn-label { color: var(--danger-ink); }
.pi-warn-unknown { border-left-color: var(--text-muted); }
.pi-warn-unknown .pi-warn-label { color: var(--text-secondary); }

.pi-id-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}
.pi-id-meta b { color: var(--text); font-variant-numeric: tabular-nums; }

.pi-warn-reasons {
    margin: 12px 0 0;
    padding-left: 18px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}
.pi-warn-reasons li { margin: 3px 0; }
.pi-basis { margin: 8px 0 0; font-size: var(--fs-xs); }

.pi-slope {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-secondary);
}
.pi-slope b { color: var(--text); font-variant-numeric: tabular-nums; }

.pi-caliber { margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-xs); line-height: 1.8; }
.pi-caliber li { margin: 2px 0; }


.pi-group { margin-bottom: 18px; }
.pi-group-name {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    padding-left: 8px;
    border-left: 3px solid var(--primary);
}
.pi-group .kpi-grid { margin-bottom: 0; }
.pi-group-note { margin: 8px 0 0; font-size: var(--fs-xs); }


.pi-missing { margin-top: 12px; display: grid; gap: 10px; }
.pi-missing-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    background: var(--bg-muted);
}
.pi-missing-name { font-size: var(--fs-sm); font-weight: 600; }
.pi-missing-why {
    margin-left: 8px;
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--danger);
}
.pi-missing-note { margin-top: 4px; font-size: var(--fs-xs); color: var(--text-secondary); }




.pi-w-scroll { max-height: 520px; overflow-y: auto; }
.pi-w-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-muted);
    box-shadow: inset 0 -1px 0 var(--border);
}





.pi-w-scroll .table th, .pi-w-scroll .table td {
    padding-left: 8px;
    padding-right: 8px;
}

.pi-w-head { margin-left: 8px; font-size: var(--fs-xs); font-weight: 400; }
.pi-w-head b { color: var(--text); font-variant-numeric: tabular-nums; }
.pi-w-head b.pi-w-risk { color: var(--danger); }




.pi-w-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pi-w-chips .date-chip { display: inline-flex; align-items: center; gap: 6px; }
.pi-w-chips .date-chip b { font-variant-numeric: tabular-nums; }
.pi-w-chips .date-chip.is-zero { opacity: .5; }
.pi-w-chips .date-chip.is-zero:hover { opacity: .8; }
.pi-w-chips .date-chip.lv-info.active { background: var(--info); border-color: var(--info); }
.pi-w-chips .date-chip.lv-muted.active { background: var(--text-muted); border-color: var(--text-muted); }


.pi-w-chips .date-chip.pi-w-toggle { margin-left: 10px; }


.pi-w-chips .date-chip.lv-green.active { background: var(--success); border-color: var(--success); }

.pi-w-note { margin: 0 0 10px; font-size: var(--fs-xs); }
.pi-w-note:empty { display: none; }



.pi-w-row { cursor: pointer; }
.pi-w-row:hover td { background: var(--primary-light); }
.pi-w-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.pi-w-row.lv-red > td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.pi-w-row.lv-info > td:first-child { box-shadow: inset 3px 0 0 var(--info); }
.pi-w-row.lv-muted > td:first-child { box-shadow: inset 3px 0 0 var(--text-muted); }




.pi-w-name {
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    min-width: 140px;
    max-width: 200px;
}
.pi-w-shop {
    margin-top: 2px;
    font-size: var(--fs-2xs);
    color: var(--text-secondary);
    white-space: normal;
    word-break: break-all;
}
.pi-w-tag {
    display: inline-block;
    margin: 1px 3px 1px 0;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-2xs);
    background: var(--bg-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.pi-w-tag.lv-red { background: var(--danger-bg); color: var(--danger-ink); border-color: var(--danger-bd); }
.pi-w-tag.lv-info { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-bd); }
.pi-w-tag.lv-muted { background: var(--bg-muted); color: var(--text-secondary); }




.pi-w-tag.lv-green { background: var(--success-bg); color: var(--success-ink); border-color: var(--success-bd); }
.pi-w-tag.lv-warning { background: var(--warning-bg); color: var(--warning-ink); border-color: var(--warning-bd); }

.pi-w-tag.is-primary { font-weight: 700; }


.pi-w-flag {
    display: inline-block;
    margin-left: 4px;
    padding: 0 4px;
    border-radius: var(--radius-xs);
    font-size: var(--fs-2xs);
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-bd);
}




.table td.pi-w-up { white-space: normal; min-width: 66px; max-width: 110px; }



.table td.pi-w-trend { white-space: normal; max-width: 132px; }

.pi-w-advice {
    margin-top: 3px;
    padding-top: 3px;
    border-top: 1px dashed var(--border);
    color: var(--text-secondary);
    line-height: 1.5;
}
.pi-w-advice b { color: var(--text); font-weight: 600; }


.pi-w-acts { margin: 2px 0 0; padding-left: 14px; }
.pi-w-acts li { margin: 0; }



.table td.pi-w-invest { white-space: normal; min-width: 110px; max-width: 240px; }
.pi-w-tag.pi-w-verdict { white-space: nowrap; }


.table td.pi-w-span { white-space: normal; min-width: 96px; max-width: 150px; }


.table td.pi-w-tags { white-space: normal; max-width: 120px; }

.pi-w-tier {
    display: inline-block;
    padding: 0 6px;
    border-radius: var(--radius-xs);
    font-size: var(--fs-2xs);
    font-weight: 600;
    background: var(--bg-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.pi-w-tier.lv-info { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-bd); }

.pi-w-dir { font-size: var(--fs-2xs); color: var(--text-secondary); white-space: nowrap; }
.pi-w-dir.is-up, .pi-w-dir.is-down { color: var(--text); font-weight: 600; }
.pi-w-dir.is-unknown { color: var(--text-muted); }

.pi-w-muted { color: var(--text-muted); }

.pi-w-row td .up { color: var(--danger); }
.pi-w-row td .down { color: var(--success); }


.pi-w-row td.num { text-align: right; font-variant-numeric: tabular-nums; }




.pi-w-sub { margin-top: 2px; font-size: var(--fs-2xs); color: var(--text-muted); white-space: normal; }























.table td.pi-w-why { white-space: normal; min-width: 200px; max-width: 560px; }
.pi-w-reason {
    display: flex;
    gap: 6px;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--text-secondary);
}
.pi-w-reason + .pi-w-reason { margin-top: 3px; }
.pi-w-no { flex: none; color: var(--text-muted); }

.pi-w-criteria { margin-top: 10px; font-size: var(--fs-xs); color: var(--text-secondary); }
.pi-w-criteria:empty { display: none; }
.pi-w-criteria-title { font-weight: 600; color: var(--text); }
.pi-w-criteria ul { margin: 6px 0 0; padding-left: 18px; }
.pi-w-criteria li { margin: 2px 0; line-height: 1.5; }


.pi-w-criteria .pi-w-tier-item { margin: 7px 0; }
.pi-w-trunc { margin: 8px 0 0; font-size: var(--fs-xs); }

@media (max-width: 768px) {
    .pi-w-name { max-width: none; }
    .table td.pi-w-why { min-width: 220px; max-width: none; }
}
















.sb-topbar { margin: 0 0 14px; }
.sb-topbar h2 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
}
.sb-subtitle {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--text-muted);
}




.sb-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--border);
}
.sb-tab {
    padding: 9px 22px;
    background: transparent;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--t-base) var(--ease);
}
.sb-tab:hover { color: var(--primary); }
.sb-tab.active {
    color: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--primary);
    background: var(--card);
}
.sb-pane { display: none; }
.sb-pane.active { display: grid; }



.sb-empty .sb-tabs { display: none; }



.sb-sub { min-height: 220px; box-sizing: border-box; }

.sb-note {
    margin: 14px 0 0;
    font-size: var(--fs-2xs);
    line-height: 1.7;
    color: var(--text-muted);
}
.sb-note:empty { display: none; }

.sb-subgrid {
    display: grid;
    
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 14px;
}

.sb-sub {
    min-width: 0;
    padding: 12px;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.sb-sub-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--border);
}
.sb-sub-head b {
    font-size: var(--fs-xs);
    overflow-wrap: anywhere;   
}
.sb-sub-head .muted { font-size: var(--fs-2xs); }



.sb-sub-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 68px 46px;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-2xs);
}
.sb-sub-row + .sb-sub-row { margin-top: 5px; }

.sb-sub-name {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.35;
    color: var(--text-secondary);
}

.sb-sub-track {
    height: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    overflow: hidden;
}
.sb-sub-fill {
    display: block;
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius-xs);
    transition: width var(--t-base) var(--ease);
}

.sb-sub-val {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

@media (max-width: 768px) {
    
    .sb-subgrid { grid-template-columns: minmax(0, 1fr); }
}






.range-empty {
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--warning-bd);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    background: var(--warning-bg);
    color: var(--warning-ink);
    font-size: var(--fs-sm);
    line-height: 1.7;
}
.range-empty strong { font-weight: 600; }




.sb-empty .card-grid { display: none; }