:root{
      --background: 60 9% 98%;
      --foreground: 24 10% 10%;
      --card: 0 0% 100%;
      --card-foreground: 24 10% 10%;
      --popover: 0 0% 100%;
      --popover-foreground: 24 10% 10%;
      --primary: 142 76% 36%;
      --primary-foreground: 355.7 100% 97.3%;
      --secondary: 60 5% 96%;
      --secondary-foreground: 24 9.8% 10%;
      --muted: 60 5% 96%;
      --muted-foreground: 24 5% 64%;
      --accent: 60 5% 96%;
      --accent-foreground: 24 9.8% 10%;
      --destructive: 0 84.2% 60.2%;
      --destructive-foreground: 60 9% 98%;
      --border: 20 6% 90%;
      --input: 20 6% 90%;
      --ring: 142 76% 36%;
      --radius: 0.5rem;

      --z-header: 40;
      --z-overlay: 40;
      --z-panel: 50;

      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);

      --sidebar-w: 16rem;        
      --sidebar-w-mini: 4rem;    
      --topbar-h: 4rem;          
      --page-pad: 1rem;          
    }

    
    [data-theme="dark"]{
      --background: 222 19% 10%;
      --foreground: 210 18% 92%;
      --card: 222 18% 13%;
      --card-foreground: 210 18% 92%;
      --popover: 222 18% 13%;
      --popover-foreground: 210 18% 92%;
      --primary: 142 70% 45%;
      --primary-foreground: 0 0% 100%;
      --secondary: 222 16% 16%;
      --secondary-foreground: 210 18% 92%;
      --muted: 222 14% 16%;
      --muted-foreground: 215 14% 75%;
      --accent: 222 14% 18%;
      --accent-foreground: 210 18% 92%;
      --destructive: 0 74% 55%;
      --destructive-foreground: 210 18% 96%;
      --border: 222 14% 22%;
      --input: 222 14% 24%;
      --ring: 142 70% 45%;

      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.35);
      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.65), 0 4px 6px -4px rgb(0 0 0 / 0.45);
    }

    
    [data-theme="dark"] .Badge--success{
      background: hsl(142 70% 45% / .14); border-color: hsl(142 70% 45% / .28); color: hsl(142 65% 70%);
    }
    [data-theme="dark"] .Badge--warn{
      background: hsl(38 92% 50% / .14); border-color: hsl(38 92% 50% / .28); color: hsl(38 90% 72%);
    }
    [data-theme="dark"] .Badge--info{
      background: hsl(210 90% 55% / .14); border-color: hsl(210 90% 55% / .28); color: hsl(210 90% 74%);
    }
    [data-theme="dark"] .Badge--danger{
      background: hsl(0 74% 55% / .14); border-color: hsl(0 74% 55% / .28); color: hsl(0 85% 75%);
    }

    
    *{ box-sizing: border-box; border-color: hsl(var(--border)); }
    html, body { height: 100%; }
    body{
      margin:0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
      background: hsl(var(--background));
      color: hsl(var(--foreground));
      font-size: 14px;
      line-height: 20px;
      overflow-x: hidden;
    }
    a{ color: inherit; text-decoration: none; }

    .muted{ color: hsl(var(--muted-foreground)); }
    .mono{ font-family: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; font-variant-numeric: tabular-nums; }
    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
    .hidden{ display:none !important; }
    @keyframes fadeIn { from{ opacity:0; transform: translateY(4px);} to{ opacity:1; transform: translateY(0);} }

    
    :where(button, a, input, select, textarea, [tabindex]):focus-visible{
      outline: none;
      box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));
      border-radius: 6px;
    }

    
    .AppShell{
      display:flex;
      min-height:100vh;
      background: hsl(var(--background));
    }

    
    .Sidebar{
      position: fixed;
      inset: 0 auto 0 0;
      z-index: var(--z-panel);
      width: var(--sidebar-w);
      background: hsl(var(--card));
      border-right: 1px solid hsl(var(--border));
      display:flex;
      flex-direction: column;
      transition: width 300ms ease, transform 300ms ease;
      overflow:hidden;
    }

    .SidebarHeader{
      padding: 0 1rem;
      border-bottom: 1px solid hsl(var(--border));
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: .75rem;
      height: var(--topbar-h);
    }
    .Brand{
      display:flex;
      align-items:center;
      gap:.75rem;
      min-width: 0;
    }
    .BrandMark{
      width: 36px;
      height: 36px;
      border-radius: 9999px;
      display:grid;
      place-items:center;
      background: hsl(var(--primary));
      color: hsl(var(--primary-foreground));
      font-weight: 700;
      letter-spacing: -0.02em;
      box-shadow: var(--shadow-sm);
      flex: 0 0 auto;
    }
    .BrandText{
      min-width:0;
    }
    .BrandTitle{
      font-weight: 700;
      letter-spacing: -0.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .BrandSub{
      font-size: 12px;
      color: hsl(var(--muted-foreground));
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      margin-top: 2px;
    }

    .SidebarNav{
      padding: .75rem;
      display:flex;
      flex-direction: column;
      gap: .25rem;
      overflow-y:auto;
      overflow-x:hidden;
    }

    .NavItem{
      display:flex;
      align-items:center;
      gap: .75rem;
      padding: .65rem .75rem;
      border-radius: .5rem;
      color: hsl(var(--muted-foreground));
      font-weight: 500;
      cursor:pointer;
      transition: background-color 150ms ease, color 150ms ease;
      user-select:none;
      min-height: 2.75rem;
      padding: 0;
      gap: 0;
    }
    .NavItem:hover{
      background: hsl(var(--accent));
      color: hsl(var(--accent-foreground));
    }
    .NavItem.active{
      background: hsl(var(--primary));
      color: hsl(var(--primary-foreground));
    }
    .NavItem i{ width: 40px; height: 2.75rem; display:flex; align-items:center; justify-content:center; font-size: 20px; flex-shrink:0; }
    .NavLabel{ padding-right: .75rem; }

    .SidebarFooter{
      margin-top:auto;
      padding: .75rem;
      border-top: 1px solid hsl(var(--border));
      display:flex;
      flex-direction: column;
      gap: .5rem;
      white-space: nowrap;
      overflow: hidden;
      min-height: 90px;
      justify-content: center;
    }

    .Sidebar.collapsed{
      width: var(--sidebar-w-mini);
    }
    .Sidebar.collapsed .Brand{ display:none; }
    .Sidebar.collapsed .SidebarHeader{ justify-content:center; padding:0; }
    .Sidebar.collapsed .NavLabel{ display:none; }
    .Sidebar.collapsed .NavItem{ padding: 0; }
    .Sidebar.collapsed .SidebarFooter .Btn{ justify-content:center; padding:0; }
    .Sidebar.collapsed .SidebarFooter > .muted{ display:none; }
    .Sidebar.collapsed .SidebarFooter .Row{ flex-direction: column; }
    #toggle-btn .ph-x{ display:none; }

    
    .MobileBackdrop{
      position: fixed;
      inset: 0;
      background: rgb(0 0 0 / .5);
      z-index: var(--z-overlay);
      display:none;
    }
    @media (max-width: 900px){
      .Sidebar{
        transform: translateX(-100%);
        width: min(20rem, 92vw);
        box-shadow: var(--shadow-lg);
      }
      .Sidebar.open{
        transform: translateX(0);
      }
      .MobileBackdrop.open{ display:block; }
      #toggle-btn .ph-list{ display:none; }
      #toggle-btn .ph-x{ display:inline-block; }
    }

    
    .Main{
      margin-left: var(--sidebar-w);
      width: calc(100% - var(--sidebar-w));
      display:flex;
      flex-direction: column;
      min-height: 100vh;
      transition: margin-left 300ms ease, width 300ms ease;
    }
    .Main.expanded{
      margin-left: var(--sidebar-w-mini);
      width: calc(100% - var(--sidebar-w-mini));
    }
    @media (max-width: 900px){
      .Main, .Main.expanded{
        margin-left: 0;
        width: 100%;
      }
    }

    
    .Topbar{
      position: sticky;
      top:0;
      z-index: var(--z-header);
      height: var(--topbar-h);
      background: hsl(var(--card));
      border-bottom: 1px solid hsl(var(--border));
      display:flex;
      align-items:center;
    }
    .TopbarInner{
      width:100%;
      height: 100%;
      padding: .5rem var(--page-pad);
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 1rem;
    }
    @media (min-width: 768px){
      :root{ --page-pad: 2rem; } 
    }

    .TopLeft{
      display:flex;
      align-items:center;
      gap: .75rem;
      min-width: 0;
    }
    .PageMeta{
      min-width:0;
    }
    .PageTitle{
      font-size: 20px;
      line-height: 28px;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin:0;
      white-space:nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
    }
    .PageDesc{
      font-size: 12px;
      color: hsl(var(--muted-foreground));
      margin-top: 2px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
    }

    .TopRight{
      display:flex;
      align-items:center;
      gap: .5rem;
      flex: 0 0 auto;
    }

    
    .SearchWrap{
      position: relative;
      display:none;
    }
    .SearchWrap i{
      position:absolute;
      left: .75rem;
      top: 50%;
      transform: translateY(-50%);
      color: hsl(var(--muted-foreground));
      font-size: 16px;
    }
    .SearchInput{
      width: min(520px, 42vw);
      height: 40px;
      padding: 0 .75rem 0 2.25rem;
      border-radius: .375rem;
      border: 1px solid hsl(var(--input));
      background: hsl(var(--background));
      color: hsl(var(--foreground));
      transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
    }
    .SearchInput:focus{
      border-color: hsl(var(--ring));
      box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));
    }
    .ColorPicker{
      -webkit-appearance: none;
      border: none;
      width: 32px;
      height: 32px;
      cursor: pointer;
      background: none;
      padding: 0;
      border-radius: 9999px;
    }
    .ColorPicker::-webkit-color-swatch-wrapper { padding: 0; }
    .ColorPicker::-webkit-color-swatch { border: 1px solid hsl(var(--border)); border-radius: 9999px; }
    .ThemeDropdown{ position: relative; }
    .ThemeMenu{
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: .5rem;
      background: hsl(var(--card));
      border: 1px solid hsl(var(--border));
      border-radius: .5rem;
      box-shadow: var(--shadow-lg);
      padding: .5rem;
      display: none;
      grid-template-columns: repeat(4, 1fr);
      gap: .5rem;
      z-index: 50;
      width: max-content;
    }
    .ThemeMenu.open{ display: grid; }
    .ThemeSwatch{
      width: 32px;
      height: 32px;
      border-radius: 9999px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: transform 100ms;
    }
    .ThemeSwatch:hover{ transform: scale(1.1); }
    @media (min-width: 980px){
      .SearchWrap{ display:block; }
    }

    
    .Btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      height: 40px;
      padding: 0 1rem;
      border-radius: .375rem;
      border: 1px solid transparent;
      font-size: 14px;
      font-weight: 500;
      cursor:pointer;
      transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
      user-select:none;
      white-space: nowrap;
      background: transparent;
      color: hsl(var(--foreground));
    }
    .Btn:disabled{ opacity:.5; pointer-events:none; }

    .Btn--primary{ background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
    .Btn--primary:hover{ background: hsl(var(--primary) / 0.90); }

    .Btn--secondary{
      background: hsl(var(--secondary));
      color: hsl(var(--secondary-foreground));
      border-color: hsl(var(--border));
    }
    .Btn--secondary:hover{ background: hsl(var(--secondary) / 0.80); }

    .Btn--outline{
      background: hsl(var(--background));
      border-color: hsl(var(--input));
      color: hsl(var(--foreground));
    }
    .Btn--outline:hover{
      background: hsl(var(--accent));
      color: hsl(var(--accent-foreground));
    }

    .Btn--ghost{
      background: transparent;
      color: hsl(var(--muted-foreground));
    }
    .Btn--ghost:hover{
      background: hsl(var(--accent));
      color: hsl(var(--accent-foreground));
    }

    .Btn--destructive{
      background: hsl(var(--destructive));
      color: hsl(var(--destructive-foreground));
    }
    .Btn--destructive:hover{ background: hsl(var(--destructive) / 0.90); }

    .Btn--sm{ height: 36px; padding: 0 .75rem; }
    .Btn--icon{ width: 40px; padding: 0; }
    .Btn--pill{ border-radius: 9999px; }

    
    .Card{
      background: hsl(var(--card));
      color: hsl(var(--card-foreground));
      border: 1px solid hsl(var(--border));
      border-radius: .5rem;
      box-shadow: var(--shadow-sm);
      overflow:hidden;
    }
    .CardHeader{
      padding: .75rem;
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: .75rem;
      border-bottom: 1px solid hsl(var(--border));
      flex-wrap: wrap;
    }
    .CardTitle{
      display:flex;
      align-items:center;
      gap:.5rem;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: -0.02em;
      margin:0;
      line-height: 1;
    }
    .CardTitle i{ color: hsl(var(--primary)); font-size: 18px; }
    .CardDesc{
      margin-top: .25rem;
      font-size: 12px;
      color: hsl(var(--muted-foreground));
    }
    .CardContent{ padding: .75rem; }
    .AccordionContent{
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms ease, padding 300ms ease;
    }
    .AccordionContent.open{
      max-height: 600px;
      opacity: 1;
      padding-top: .75rem !important;
      padding-bottom: .75rem !important;
    }

    
    .Page{
      padding: 1rem;
      display:flex;
      flex-direction: column;
      gap: 1rem;
    }
    .Page > * { animation: fadeIn 400ms ease-out; }

    .Grid{
      display:grid;
      gap: 1rem;
    }
    .Grid--2{ grid-template-columns: 1fr; }
    @media (min-width: 1100px){
      .Grid--2{ grid-template-columns: 1fr 1fr; }
    }

    
    .Field{ display:flex; flex-direction: column; gap:.5rem; }
    .Label{ font-size: 14px; font-weight: 500; }
    .Control{
      width:100%;
      height: 40px;
      border-radius: .375rem;
      border: 1px solid hsl(var(--input));
      background: hsl(var(--background));
      color: hsl(var(--foreground));
      padding: 0 .75rem;
      transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
    }
    .Control:focus{
      border-color: hsl(var(--ring));
      box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));
    }
    select.Control{
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8A29F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right .75rem center;
      background-size: 16px;
      padding-right: 2.5rem;
    }
    .Textarea{
      min-height: 92px;
      padding: .6rem .75rem;
      height: auto;
      resize: vertical;
    }
    .Help{
      font-size: 12px;
      color: hsl(var(--muted-foreground));
      line-height: 16px;
    }
    .InlineRow{
      display:flex;
      gap:.75rem;
      flex-wrap: wrap;
      align-items:flex-start;
    }
    .InlineRow > *{ flex: 1 1 200px; }
    .InlineRow .Shrink{ flex: 0 0 auto; }

    
    .Badge{
      display:inline-flex;
      align-items:center;
      gap: .375rem;
      border-radius: 9999px;
      padding: .125rem .5rem;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .Badge--neutral{
      background: hsl(var(--muted));
      color: hsl(var(--muted-foreground));
      border-color: hsl(var(--border));
    }
    .Badge--success{
      background: rgb(34 197 94 / .12);
      border-color: rgb(34 197 94 / .20);
      color: rgb(22 101 52);
    }
    .Badge--danger{
      background: hsl(var(--destructive) / .10);
      border-color: hsl(var(--destructive) / .20);
      color: hsl(var(--destructive));
    }
    .Badge--warn{
      background: rgb(245 158 11 / .12);
      border-color: rgb(245 158 11 / .20);
      color: rgb(146 64 14);
    }
    .Badge--info{
      background: rgb(59 130 246 / .12);
      border-color: rgb(59 130 246 / .20);
      color: rgb(29 78 216);
    }

    
    .Segment{
      display:inline-flex;
      gap: .25rem;
      padding: .25rem;
      border-radius: .5rem;
      background: hsl(var(--muted));
      border: 1px solid hsl(var(--border));
      flex-wrap: wrap;
    }
    .SegmentBtn{
      height: 36px;
      padding: 0 .75rem;
      border-radius: .375rem;
      border: 1px solid transparent;
      background: transparent;
      color: hsl(var(--muted-foreground));
      font-weight: 600;
      cursor:pointer;
      transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
      display:flex;
      align-items:center;
      gap:.5rem;
      white-space: nowrap;
    }
    .SegmentBtn:hover{ background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
    @media (max-width: 600px){
      .Segment{ width: 100%; }
      .SegmentBtn{ flex: 1; justify-content: center; }
      .CardHeader .RowWrap{ width: 100%; }
      .CardHeader .RowWrap > .Btn{ width: 100%; }
      .CardHeader .RowWrap > .Btn.Btn--outline{ display: none; }
    }
    @media (min-width: 601px){
      .CardHeader .RowWrap > .Btn{ width: 170px; }
    }
    .SegmentBtn.active{
      background: hsl(var(--card));
      color: hsl(var(--foreground));
      border-color: hsl(var(--border));
      box-shadow: var(--shadow-sm);
    }

    
    .TableGrid{
      display:flex;
      flex-direction: column;
      gap: .5rem;
    }
    .TGHead{
      display:none;
      grid-template-columns: 80px 2fr 1.2fr 140px 140px;
      gap: 1rem;
      padding: .5rem .75rem;
      font-size: 12px;
      font-weight: 600;
      color: hsl(var(--muted-foreground));
      text-transform: uppercase;
      letter-spacing: .08em;
      border-bottom: 1px solid hsl(var(--border));
    }
    @media (min-width: 900px){
      .TGHead{ display:grid; }
    }

    .TGRow{
      display:flex;
      flex-direction: column;
      gap: .5rem;
      padding: .75rem;
      border: 1px solid hsl(var(--border));
      border-radius: .5rem;
      background: hsl(var(--card));
      transition: background-color 150ms ease, border-color 150ms ease;
    }
    @media (max-width: 900px){
      .TGRow{ position: relative; }
      .TGRow > .mono{
        position: absolute;
        top: .75rem;
        right: .75rem;
        background: hsl(var(--muted));
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 11px;
      }
      .ProviderRow{
        display: grid;
        grid-template-columns: auto 1fr !important;
        align-items: center;
        gap: .5rem !important;
      }
      .ProviderRow > div:nth-child(3){ grid-row: 1; grid-column: 1; }
      .ProviderRow > div:nth-child(2){ grid-row: 1; grid-column: 2; padding-right: 2.5rem; }
      .ProviderRow > .TGRight{ grid-row: 2; grid-column: 1 / -1; width: 100%; }
      .ProviderRow > .TGRight > .Btn{ flex: 1; }
    }
    .TGRow:hover{
      background: hsl(var(--accent));
      border-color: hsl(var(--border));
    }
    @media (min-width: 900px){
      .TGRow{
        display:grid;
        grid-template-columns: 80px 2fr 1.2fr 140px 140px;
        gap: 1rem;
        align-items:center;
      }
    }
    .TGCellPrimary{ font-weight: 600; }
    .TGCellSecondary{ font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 2px; }
    .TGRight{ display:flex; gap: .5rem; justify-content:flex-end; }
    @media (min-width: 900px){
      .TGRight{ justify-content:flex-end; }
    }

    
    .Overlay{
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgb(0 0 0 / .5);
      display:flex;
      align-items: center;
      justify-content:center;
      padding: 1rem;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 200ms ease, visibility 200ms ease;
    }
    .Overlay.open{ opacity: 1; visibility: visible; pointer-events: auto; }
    .Dialog{
      width: min(720px, 96vw);
      max-height: 92vh;
      overflow:auto;
      background: hsl(var(--card));
      border: 1px solid hsl(var(--border));
      border-radius: .75rem;
      box-shadow: var(--shadow-lg);
      transform: scale(0.96);
      transition: transform 200ms ease;
    }
    .Overlay.open .Dialog{ transform: scale(1); }
    .DialogHeader{
      padding: 1rem;
      border-bottom: 1px solid hsl(var(--border));
      display:flex;
      align-items:flex-start;
      justify-content: space-between;
      gap: 1rem;
    }
    .DialogTitle{
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin: 0;
    }
    .DialogBody{ padding: 1rem; }
    .DialogFooter{
      padding: 1rem;
      border-top: 1px solid hsl(var(--border));
      display:flex;
      justify-content:flex-end;
      gap: .5rem;
      flex-wrap: wrap;
    }

    
    .ToastHost{
      position: fixed;
      right: 1rem;
      bottom: 1rem;
      z-index: 10000;
      display:flex;
      flex-direction: column;
      gap: .5rem;
    }
    .Toast{
      width: min(420px, 92vw);
      background: hsl(var(--card));
      border: 1px solid hsl(var(--border));
      border-radius: .75rem;
      box-shadow: var(--shadow-lg);
      padding: .75rem;
      display:flex;
      gap:.75rem;
      align-items:flex-start;
      animation: toastIn 120ms ease-out;
    }
    @keyframes toastIn{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform: translateY(0);} }
    .ToastIcon{ font-size: 18px; margin-top: 2px; }
    .ToastTitle{ font-weight: 700; margin:0; }
    .ToastText{ margin-top: 2px; font-size: 12px; color: hsl(var(--muted-foreground)); }
    .ToastClose{ margin-left:auto; }

    
    @keyframes spin { to{ transform: rotate(360deg);} }
    .spin{ animation: spin 1s linear infinite; }

    
    .Row{ display:flex; align-items:center; gap:.75rem; }
    .RowWrap{ display:flex; align-items:center; gap:.75rem; flex-wrap: wrap; }
    .Spacer{ flex: 1 1 auto; }
    .Stack{ display:flex; flex-direction: column; gap:.75rem; }
    .KpiGrid{ display:grid; gap:1rem; grid-template-columns: 1fr; }
    @media (min-width: 900px){
      .KpiGrid{ grid-template-columns: repeat(3, 1fr); }
    }
    .Kpi{
      padding: .75rem;
      border: 1px solid hsl(var(--border));
      border-radius: .75rem;
      background: hsl(var(--card));
      box-shadow: var(--shadow-sm);
    }
    .KpiLabel{ font-size: 12px; color: hsl(var(--muted-foreground)); }
    .KpiValue{ font-size: 24px; line-height: 32px; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; }
    .KpiHint{ font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 4px; }

    
    .Empty{
      padding: 2rem 1rem;
      text-align:center;
      display:flex;
      flex-direction: column;
      gap: .75rem;
      align-items:center;
      justify-content:center;
    }
    .EmptyIcon{
      width: 56px;
      height: 56px;
      border-radius: 9999px;
      display:grid;
      place-items:center;
      background: hsl(var(--muted));
      border: 1px solid hsl(var(--border));
      color: hsl(var(--muted-foreground));
      font-size: 26px;
    }
    .EmptyTitle{ font-weight: 800; letter-spacing: -0.02em; }
    .EmptyText{ max-width: 48ch; color: hsl(var(--muted-foreground)); font-size: 13px; }

    
    .LoginScreen{
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: hsl(var(--background));
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .LoginCard{
      width: 100%;
      max-width: 400px;
      background: hsl(var(--card));
      border: 1px solid hsl(var(--border));
      border-radius: .75rem;
      box-shadow: var(--shadow-lg);
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    .LoginLogo{
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: hsl(var(--primary));
      color: hsl(var(--primary-foreground));
      display: grid;
      place-items: center;
      font-size: 24px;
      font-weight: 700;
      margin: 0 auto;
    }