: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;

      --chart-1: 142 76% 36%;
      --chart-2: 210 90% 55%;
      --chart-3: 38 92% 50%;
      --chart-4: 0 84% 60%;
      --chart-5: 280 70% 55%;

      --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);

      --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial;
      --font-display: "Unbounded", "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial;

      --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%;

      --chart-1: 142 70% 45%;
      --chart-2: 210 90% 65%;
      --chart-3: 38 92% 62%;
      --chart-4: 0 74% 65%;
      --chart-5: 280 70% 70%;

      --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: var(--font-sans);
  background: hsl(var(--background));
  background-image: var(--app-bg-image, none);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  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));
      border: 1px solid hsl(var(--primary) / .72);
      box-shadow:
        0 0 0 1px hsl(var(--background)),
        0 0 0 2px hsl(var(--primary) / .18),
        0 4px 10px hsl(var(--primary) / .14),
        inset 0 1px 0 rgb(255 255 255 / .14);
      position: relative;
      isolation: isolate;
    }
    .NavItem.active::after{
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      border: 1px solid rgb(255 255 255 / .16);
      mix-blend-mode: screen;
    }
    .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;
    }
    .SidebarActionsRow{
      position: relative;
      padding: .25rem;
      border-radius: .75rem;
      background: hsl(var(--muted) / .6);
      border: 1px solid hsl(var(--border));
    }
    .SidebarAction{
      border-radius: .6rem;
      transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease;
    }
    .SidebarAction:hover{
      transform: translateY(-1px);
    }
    .SidebarAction:active{
      transform: translateY(0);
    }
    .SidebarAction--logout{
      background: linear-gradient(135deg, hsl(var(--card)) 0%, hsl(var(--accent) / .75) 100%);
      border-color: hsl(var(--border));
      color: hsl(var(--foreground));
      box-shadow: inset 0 1px 0 rgb(255 255 255 / .06);
    }
    .SidebarAction--logout:hover{
      background: linear-gradient(135deg, hsl(var(--card)) 0%, hsl(var(--accent)) 100%);
      border-color: hsl(var(--ring) / .45);
      box-shadow: 0 6px 14px rgb(0 0 0 / .18);
    }
    .SidebarAction--theme{
      background: linear-gradient(135deg, hsl(var(--secondary)) 0%, hsl(var(--accent) / .8) 100%);
      border-color: hsl(var(--border));
      color: hsl(var(--foreground));
      box-shadow: inset 0 1px 0 rgb(255 255 255 / .08);
    }
    .SidebarAction--theme:hover{
      border-color: hsl(var(--ring) / .45);
      box-shadow: 0 6px 14px rgb(0 0 0 / .2);
    }

    .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 .NavItem i{ width: 100%; }
    .Sidebar.collapsed .SidebarFooter .Btn{ justify-content:center; padding:0; }
    .Sidebar.collapsed .SidebarFooter > .muted{ display:none; }
    .Sidebar.collapsed .SidebarFooter{
      padding: .5rem .45rem;
    }
    .Sidebar.collapsed .SidebarActionsRow{
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      gap: .35rem;
      padding: 0;
      border: 0;
      background: transparent;
    }
    .Sidebar.collapsed .SidebarAction{
      width: 100%;
      min-width: 0;
      height: 38px;
      padding: 0;
      justify-content: center;
      transform: none;
      box-shadow: none;
    }
    .Sidebar.collapsed .SidebarAction--logout,
    .Sidebar.collapsed .SidebarAction--theme{
      background: hsl(var(--secondary));
      border-color: hsl(var(--border));
    }
    #toggle-btn i:last-child{ 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 i:first-child{ display:none; }
      #toggle-btn i:last-child{ 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: 24px;
      line-height: 38px;
      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; }
    i.ti{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      vertical-align: middle;
    }
    .ThemeDropdown{ position: relative; }
    .ThemeMenu{
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: .5rem;
      background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--accent) / .38) 100%);
      border: 1px solid hsl(var(--border));
      border-radius: .85rem;
      box-shadow: var(--shadow-lg);
      padding: .7rem;
      display: flex;
      gap: .75rem;
      z-index: 50;
      width: 320px;
      opacity: 0;
      transform: translateY(-6px) scale(.98);
      pointer-events: none;
      transition: opacity 160ms ease, transform 180ms ease;
    }
    .ThemeMenu.open{
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
      flex-direction: column;
    }
    .ThemeMenuHead{
      border: 1px solid hsl(var(--border));
      border-radius: .65rem;
      background: hsl(var(--card) / .78);
      padding: .55rem .65rem;
    }
    .ThemeMenuTitle{
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      font-size: 12px;
      line-height: 1;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: hsl(var(--foreground));
    }
    .ThemeMenuSub{
      margin-top: .3rem;
      color: hsl(var(--muted-foreground));
      font-size: 12px;
      line-height: 1.25;
    }
    .ThemeGrid{
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: .45rem;
    }
    .ThemeSwatch{
      width: 32px;
      height: 32px;
      border-radius: 9999px;
      cursor: pointer;
      border: 2px solid hsl(var(--card));
      outline: 1px solid hsl(var(--border));
      transition: transform 120ms ease, box-shadow 120ms ease;
      box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14);
    }
    .ThemeSwatch:hover{
      transform: translateY(-1px);
      box-shadow: 0 6px 14px rgb(0 0 0 / .2);
    }
    .ThemeSwatch.is-active{
      box-shadow: 0 0 0 2px hsl(var(--ring)), 0 8px 16px rgb(0 0 0 / .25);
    }
    .ThemeCustomSwatch{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
      border: 1px solid hsl(var(--border));
      border-radius: .65rem;
      padding: .5rem .6rem;
      background: hsl(var(--card) / .68);
      cursor: pointer;
    }
    .ThemeCustomSwatchLabel{
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      color: hsl(var(--muted-foreground));
      font-weight: 600;
      font-size: 12px;
    }
    .ThemeCustomSwatch input[type="color"]{
      width: 38px;
      height: 28px;
      border: 1px solid hsl(var(--border));
      border-radius: .45rem;
      padding: 0;
      background: transparent;
      cursor: pointer;
    }
    .ThemeCustomGradient{
      border: 1px solid hsl(var(--border));
      border-radius: .5rem;
      padding: .5rem;
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: .5rem;
      align-items: center;
    }
    .ThemeCustomGradient input[type="color"]{
      width: 100%;
      height: 30px;
      border: 1px solid hsl(var(--border));
      border-radius: .4rem;
      padding: 0;
      background: transparent;
      cursor: pointer;
    }
    .ThemeCustomGradient input[type="range"]{
      grid-column: 1 / 3;
      width: 100%;
    }
    .ThemeCustomGradient .Btn{
      height: 30px;
      padding: 0 .75rem;
    }
    @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; }
    .WarehouseCategoryAddBtn{
      font-size: clamp(10px, 0.9vw, 13px);
      letter-spacing: .01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      gap: .35rem;
      padding-inline: .75rem;
      width: fit-content;
      max-width: 100%;
      flex: 0 1 auto;
    }
    .CardHeader .RowWrap > .WarehouseCategoryAddBtn{
      width: fit-content;
    }

    
    .Card{
      background: hsl(var(--card));
      color: hsl(var(--card-foreground));
      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: 16px;
      line-height: 22px;
      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;
      font-family: var(--font-display);
    }
    .SegmentBtn{
      height: 36px;
      padding: 0 .75rem;
      border-radius: .375rem;
      border: 1px solid transparent;
      background: transparent;
      font-family: var(--font-display);
      color: hsl(var(--muted-foreground));
      font-weight: 500;
      font-size: 12px;
      letter-spacing: .01em;
      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));
    }
    .TGRow.is-dragging{
      opacity: .55;
      box-shadow: none;
    }
    .TGRow.drag-over{
      border-color: hsl(var(--ring));
      box-shadow: 0 0 0 2px hsl(var(--ring) / .28);
      background: hsl(var(--accent));
    }
    .ProductRowEnter{
      opacity: 0;
      transform: translateY(8px);
      animation: productRowIn 280ms ease-out forwards;
      animation-delay: var(--enter-delay, 0ms);
      position: relative;
      overflow: hidden;
      border-left: 4px solid rgb(var(--status-rgb, 148 163 184));
      border-color: hsl(var(--border) / 0.9);
      box-shadow: var(--shadow-sm);
      background:
        linear-gradient(90deg,
          rgb(var(--status-rgb, 148 163 184) / .22) 0%,
          rgb(var(--status-rgb, 148 163 184) / .10) 14%,
          transparent 34%
        ),
        radial-gradient(120% 160% at 100% -10%, hsl(var(--primary) / 0.08), transparent 55%),
        hsl(var(--card));
    }
    .ProductRowEnter:hover{
      background:
        linear-gradient(90deg,
          rgb(var(--status-rgb, 148 163 184) / .28) 0%,
          rgb(var(--status-rgb, 148 163 184) / .14) 16%,
          transparent 36%
        ),
        radial-gradient(120% 160% at 100% -10%, hsl(var(--primary) / 0.1), transparent 58%),
        hsl(var(--accent));
    }
    .ProductRowEnter::before{
      content: "";
      position: absolute;
      left: 0;
      top: 8px;
      bottom: 8px;
      width: 4px;
      border-radius: 999px;
      opacity: .9;
      pointer-events: none;
      transition: all 200ms ease;
    }
    .ProductRow--on::before{
      background: linear-gradient(180deg, #34d399, #059669);
      box-shadow: 0 0 14px rgb(5 150 105 / 0.45);
    }
    .ProductRow--off::before{
      background: linear-gradient(180deg, #ef4444, #dc2626);
      box-shadow: 0 0 14px rgb(220 38 38 / 0.42);
    }
    @keyframes productRowIn{
      from{ opacity: 0; transform: translateY(8px); }
      to{ opacity: 1; transform: translateY(0); }
    }
    .CategoryRowEnter{
      opacity: 0;
      transform: translateY(6px);
      animation: categoryRowIn 220ms ease-out forwards;
      animation-delay: var(--enter-delay, 0ms);
    }
    @keyframes categoryRowIn{
      from{ opacity: 0; transform: translateY(6px); }
      to{ opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce){
      .ProductRowEnter{
        animation: none;
        opacity: 1;
        transform: none;
      }
      .CategoryRowEnter{
        animation: none;
        opacity: 1;
        transform: none;
      }
    }
    @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: 16px;
      line-height: 22px;
      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;
    }
    .DialogHero{
      display:flex;
      gap:.75rem;
      align-items:flex-start;
      margin-bottom: 1rem;
    }
    .DialogHeroIcon{
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display:grid;
      place-items:center;
      background: hsl(var(--accent));
      color: hsl(var(--foreground));
      font-size: 20px;
      box-shadow: var(--shadow-sm);
    }
    .DialogHeroIcon.danger{
      background: hsl(var(--destructive) / 0.12);
      color: hsl(var(--destructive));
    }
    .DialogHeroTitle{
      margin: 0 0 4px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .DialogHeroText{
      margin: 0;
      color: hsl(var(--muted-foreground));
      font-size: 13px;
      line-height: 18px;
    }
    .DialogChecklist{
      list-style: none;
      padding: 0;
      margin: 0;
      display:flex;
      flex-direction: column;
      gap: .5rem;
    }
    .DialogChecklist li{
      display:flex;
      gap:.5rem;
      align-items:flex-start;
      color: hsl(var(--foreground));
    }
    .DialogChecklist i{
      color: hsl(var(--primary));
      margin-top: 2px;
    }

    
    .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);
    }
    .Kpi--accent{
      background: linear-gradient(135deg, hsl(var(--card)) 0%, hsl(var(--accent)) 100%);
      border-color: hsl(var(--border));
    }
    .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; }
    .KpiGrid--4{ grid-template-columns: 1fr; }
    @media (min-width: 720px){
      .KpiGrid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 1100px){
      .KpiGrid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    .Delta{ font-weight: 700; margin-right: 6px; }
    .Delta--up{ color: hsl(var(--primary)); }
    .Delta--down{ color: hsl(var(--destructive)); }

    
    .ChartCard{
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--card)) 60%, hsl(var(--accent) / 0.35) 100%);
    }
    .ChartCard::after{
      content: "";
      position: absolute;
      inset: -40% -20% auto auto;
      width: 280px;
      height: 280px;
      border-radius: 999px;
      background: radial-gradient(circle at center, hsl(var(--primary) / 0.18), transparent 65%);
      pointer-events: none;
    }
    .ChartHead{
      padding: .85rem .85rem 0 .85rem;
      display:flex;
      align-items:flex-start;
      justify-content: space-between;
      gap: .75rem;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }
    .ChartTitle{ font-weight: 700; letter-spacing: -0.02em; }
    .ChartMeta{ font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 4px; }
    .ChartValue{
      font-size: 18px;
      font-weight: 700;
      background: hsl(var(--background));
      border: 1px solid hsl(var(--border));
      border-radius: 999px;
      padding: .35rem .75rem;
      box-shadow: var(--shadow-sm);
    }
    .ChartBody{
      position: relative;
      z-index: 1;
      padding: .5rem .85rem 0 .85rem;
      height: 240px;
      display: flex;
      flex-direction: column;
    }
    .ChartCanvas{
      width: 100% !important;
      height: 100% !important;
    }
    .ChartCanvas--tall{ height: 260px !important; }
    .ChartLegend{
      padding: .35rem .85rem .85rem .85rem;
      display:flex;
      flex-wrap: wrap;
      gap: .5rem 1rem;
      font-size: 12px;
      color: hsl(var(--muted-foreground));
      position: relative;
      z-index: 1;
    }
    .LegendItem{
      display:flex;
      align-items:center;
      gap: .4rem;
    }
    .LegendDot{
      width: 10px;
      height: 10px;
      border-radius: 999px;
      flex-shrink: 0;
      background: hsl(var(--primary));
    }

    @media (min-width: 1100px){
      .ChartBody{ height: 260px; }
      .ChartCanvas--tall{ height: 290px !important; }
    }

    
    .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; }

    .OrdersLayout{
      align-items: start;
    }
    @media (min-width: 1200px){
      .OrdersLayout{
        grid-template-columns: 1.35fr .9fr;
      }
    }
    .OrdersCard{
      position: relative;
      overflow: hidden;
    }
    .OrdersCard::after{
      content: "";
      position: absolute;
      inset: -120px -110px auto auto;
      width: 260px;
      height: 260px;
      border-radius: 9999px;
      pointer-events: none;
      background: radial-gradient(circle at center, hsl(var(--primary) / .14), transparent 68%);
    }
    .OrdersHeader{
      position: relative;
      z-index: 1;
    }
    .OrdersControls{
      gap: .5rem;
      align-items: center;
    }
    .OrdersModeBadge{
      font-weight: 700;
    }
    .OrdersOffset{
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      font-size: 12px;
      color: hsl(var(--muted-foreground));
      border: 1px dashed hsl(var(--border));
      border-radius: .5rem;
      padding: .2rem .4rem;
      background: hsl(var(--background));
    }
    .OrdersOffsetInput{
      width: 92px;
      height: 30px;
      padding: 0 .5rem;
      border-radius: .35rem;
    }
    .OrdersSummary{
      display: grid;
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: .65rem;
    }
    @media (min-width: 700px){
      .OrdersSummary{
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    .OrdersMetric{
      border: 1px solid hsl(var(--border));
      border-radius: .7rem;
      background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--accent) / .35) 100%);
      padding: .65rem .75rem;
      box-shadow: var(--shadow-sm);
    }
    .OrdersMetric--positive{
      border-color: rgb(34 197 94 / .25);
      background: linear-gradient(180deg, hsl(var(--card)) 0%, rgb(34 197 94 / .10) 100%);
    }
    .OrdersMetric--negative{
      border-color: hsl(var(--destructive) / .3);
      background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--destructive) / .1) 100%);
    }
    .OrdersMetricLabel{
      font-size: 12px;
      color: hsl(var(--muted-foreground));
    }
    .OrdersMetricValue{
      margin-top: .2rem;
      font-size: 20px;
      line-height: 28px;
      font-weight: 800;
      letter-spacing: -0.02em;
    }
    .OrdersHead,
    .OrdersRow{
      grid-template-columns: 90px 1.6fr 1.2fr 1fr !important;
    }
    .OrdersRow{
      border-radius: .75rem;
      transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
    }
    .OrdersRow:hover{
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
      border-color: hsl(var(--ring) / .4);
    }
    .OrdersUser .TGCellPrimary{
      max-width: 24ch;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .OrdersProfitUp{ color: rgb(21 128 61); font-weight: 700; }
    .OrdersProfitDown{ color: hsl(var(--destructive)); font-weight: 700; }
    .OrdersStatusCell{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: .3rem;
    }
    .OrdersStatusBadge{
      font-weight: 700;
      min-height: 24px;
    }
    .OrdersStatsCard .CardContent{
      background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--accent) / .35) 100%);
    }
    .OrdersStatsGrid{
      gap: .75rem;
    }
    .OrdersStatCard{
      background: hsl(var(--card) / .7);
      backdrop-filter: blur(2px);
    }
    .OrdersStatLabel{
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    @media (max-width: 900px){
      .OrdersControls{
        width: 100%;
      }
      .OrdersControls > .Btn{
        width: 100% !important;
      }
      .OrdersOffset{
        width: 100%;
        justify-content: space-between;
      }
      .OrdersOffsetInput{
        width: 115px;
      }
      .OrdersRow .OrdersAmount{
        padding-right: 1.8rem;
      }
    }

    
.LoginScreen{
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: hsl(var(--background));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.LoginScreen--gradient{
  background: linear-gradient(135deg, #16425b 0%, #3a7ca5 100%) !important;
  color: #f5f7fb;
}
.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;
  position: relative;
  z-index: 1;
}
.LoginCard--wide{
  max-width: 980px;
  padding: 1.25rem 1.5rem;
  background: hsl(var(--card) / 0.85);
  border: 1px solid hsl(var(--border) / 0.6);
  box-shadow: 0 25px 60px -35px rgb(0 0 0 / 0.65), var(--shadow-lg);
}

h1,
.PageTitle,
.LoginCard h1{
      font-family: var(--font-display);
    }

h2, h3,
.BrandTitle,
.CardTitle,
.DialogTitle,
.ToastTitle,
.KpiValue,
.EmptyTitle{
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
}
.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;
}
.LoginIntro{
  display:flex;
  align-items:center;
  gap: 1rem;
}
.LoginMark{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(145deg, hsl(var(--primary)), hsl(var(--primary) / 0.7));
  color: hsl(var(--primary-foreground));
  display:grid;
  place-items:center;
  font-weight: 800;
  letter-spacing: -0.06em;
  font-size: 18px;
  box-shadow: var(--shadow-lg);
}
.LoginHero{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.25rem;
  align-items: center;
}
@media (max-width: 920px){
  .LoginHero{
    grid-template-columns: 1fr;
  }
}
.LoginPill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.16);
  color: hsl(var(--primary-foreground));
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.LoginHero h2{
  margin: .5rem 0 .35rem;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.02em;
}
.LoginBadges{
  display:flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}
.LoginBadges span{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding: 6px 10px;
  border-radius: 10px;
  background: hsl(var(--secondary) / 0.4);
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border) / 0.6);
  font-weight: 600;
}
.LoginCardGlass{
  background: hsl(var(--card) / 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid hsl(var(--border) / 0.5);
  box-shadow: 0 10px 40px -24px rgb(0 0 0 / 0.6);
}
    /* ===== FIX: превью товара в таблице склада ===== */

    .ProductPreview {
      width: 100%;
      max-width: min(420px, 100%);
      aspect-ratio: 1 / 1;
      background: #000;
      border-radius: 1.5rem; /* мягкое большое скругление */
      overflow: hidden;

      display: flex;
      align-items: center;
      justify-content: center;

      margin-top: .5rem;
    }

.ProductPreview img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* чтобы не обрезало */
  object-position: center;
  display: block;
  margin: auto;
}

/* ===== Документация по ценообразованию ===== */
.RecsCatThumb{
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted));
  object-fit: cover;
  object-position: center;
  display: block;
}

.RecsActionBtn{
  font-family: var(--font-display);
}

div.RowWrap:nth-child(2) > button:nth-child(2){
  font-family: var(--font-display);
}

.DocGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.DocList{
  display: grid;
  gap: .5rem;
  font-size: 14px;
  line-height: 20px;
}
.DocChip{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 4px 8px;
  border-radius: 8px;
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  font-weight: 600;
  font-size: 12px;
}
.DocNote{
  margin-top: .25rem;
  padding: 8px 10px;
  border-radius: 10px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  line-height: 18px;
}

/* ===== Product dialog polish (UI kit aligned) ===== */
.ProductDialog{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ProductDialog .FieldRow{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
}
.ProductDialog .GlassCard{
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  background:
    radial-gradient(120% 160% at 100% -10%, hsl(var(--primary) / 0.08), transparent 55%),
    hsl(var(--card));
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
}
.ProductDialog .GlassCard.dashed{ border-style: dashed; background: hsl(var(--card) / 0.75); }
.ProductDialog .GlassCard .CardHeader{ border-bottom: 1px solid hsl(var(--border)); padding-bottom: 8px; margin-bottom: 10px; }
.ProductDialog .GlassCard .CardDesc{ margin-top: 2px; }
.ProductDialog .ToggleSwitch{ gap: 10px; }

.SkeletonStack{ display: flex; flex-direction: column; gap: 10px; }
.SkeletonLine{
  --skeleton-from: hsl(var(--muted) / 0.55);
  --skeleton-mid: hsl(var(--muted) / 0.85);
  height: 34px;
  width: var(--w, 100%);
  border-radius: 10px;
  background: linear-gradient(90deg, var(--skeleton-from), var(--skeleton-mid), var(--skeleton-from));
  background-size: 200% 100%;
  animation: skeleton-shine 1.1s ease-in-out infinite;
}
.SkeletonLine.sm{ height: 12px; border-radius: 6px; }
.SkeletonLine.round{ border-radius: 999px; }

@keyframes skeleton-shine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.ToggleTrack{
  width: 54px;
  height: 28px;
  border-radius: 999px;
  background: hsl(var(--muted));
  box-shadow: inset 0 0 0 1px hsl(var(--border));
  transition: all 200ms ease;
  position: relative;
}
.ToggleThumb{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: hsl(var(--card));
  box-shadow: 0 4px 12px hsl(var(--foreground) / 0.25);
  position: absolute;
  top: 3px;
  left: 3px;
  transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ToggleTrack.on{ background: linear-gradient(135deg, hsl(var(--ring)), hsl(var(--primary))); box-shadow: inset 0 0 0 1px hsl(var(--ring) / 0.6); }
.ToggleTrack.on .ToggleThumb{ transform: translateX(26px); }

.ProductDialog .BadgeHelp{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  font-weight: 600;
  font-size: 12px;
  border: 1px solid hsl(var(--border));
}
/* ===== Login: Telegram widget ===== */
.TelegramAuthCard{
  border: 1px solid hsl(var(--border));
  border-radius: .75rem;
  background:
    radial-gradient(120% 120% at 100% 0%, hsl(var(--primary) / 0.08) 0%, transparent 60%),
    hsl(var(--card));
  overflow: hidden;
}
.TelegramAuthHeader{
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem;
  border-bottom: 1px solid hsl(var(--border));
}
.TelegramAuthIcon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: hsl(var(--primary) / 0.14);
  color: hsl(var(--primary));
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.TelegramAuthIcon i{
  font-size: 20px;
}
.TelegramAuthTitle{
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.TelegramAuthSubtitle{
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: hsl(var(--muted-foreground));
}
.TelegramAuthBody{
  padding: 1rem .85rem;
}
.TelegramWidgetHost{
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.TelegramWidgetHost iframe{
  max-width: 100%;
}

/* ===== Proxy Page ===== */
.ProxyPageShell{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 100% 0%, hsl(190 95% 45% / 0.12) 0%, transparent 55%),
    radial-gradient(90% 100% at 0% 100%, hsl(var(--primary) / 0.1) 0%, transparent 60%),
    hsl(var(--card));
}
.ProxyHero{
  position: relative;
  overflow: hidden;
  align-items: flex-end;
}
.ProxyHeroGlow{
  position: absolute;
  inset: -80px -180px auto auto;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle at center, hsl(190 90% 58% / 0.25), transparent 68%);
}
.ProxyHeroIntro{
  position: relative;
  z-index: 1;
}
.ProxyHeroPill{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 6px 12px;
  border-radius: 999px;
  background: hsl(190 90% 42% / .16);
  border: 1px solid hsl(190 90% 42% / .26);
  color: hsl(190 88% 40%);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
[data-theme="dark"] .ProxyHeroPill{
  color: hsl(190 92% 74%);
}
.ProxyHeroTitle{
  margin-top: .55rem;
}
.ProxyHeroTitle i{
  color: hsl(190 90% 45%);
}
.ProxyHeroDesc{
  max-width: 62ch;
}
.ProxyHeroActions{
  position: relative;
  z-index: 1;
}
.ProxyBtnAccent{
  box-shadow: 0 10px 24px hsl(var(--primary) / 0.3);
}
.ProxyBtnGhost{
  background: hsl(var(--card) / .65);
  backdrop-filter: blur(4px);
}
.ProxyKpiGrid{
  margin-bottom: 1rem;
}
.ProxyKpi{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ProxyKpi::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(160deg, rgb(255 255 255 / .06), transparent 35%);
}
.ProxyKpi--status{ border-color: hsl(var(--ring) / .4); }
.ProxyKpi--good{ border-color: hsl(142 70% 45% / .38); }
.ProxyKpi--checked{ border-color: hsl(38 92% 52% / .35); }
.ProxyKpi--timer{ border-color: hsl(190 90% 45% / .38); }
.ProxyTopGrid{
  margin-top: .25rem;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
}
.ProxyPanel{
  border: 1px solid hsl(var(--border));
  background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--accent) / .34) 100%);
}
.ProxyMetaBadges{
  gap: .45rem;
}
.ProxyMetaLine{
  margin-top: 6px;
  font-size: 12px;
}
.ProxyErrorBadge{
  margin-top: 10px;
}
.ProxyListCard{
  margin-top: 1rem;
  border: 1px solid hsl(var(--border));
  background:
    radial-gradient(100% 180% at 100% 0%, hsl(var(--primary) / .08), transparent 58%),
    hsl(var(--card));
}
.ProxySearchInput{
  height: 36px;
  width: 220px;
  background: hsl(var(--background));
}
.ProxyTable .TGHead,
.ProxyTable .TGRow{
  border-radius: 12px;
}
.ProxyTableHead{
  position: sticky;
  top: 0;
  z-index: 1;
}
.ProxyTableRow{
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.ProxyTableRow:hover{
  transform: translateY(-1px);
  border-color: hsl(190 90% 45% / .35);
  box-shadow: 0 10px 20px -18px hsl(190 90% 45% / .55);
}
@media (max-width: 900px){
  .ProxyHero{
    align-items: flex-start;
  }
  .ProxyHeroActions{
    width: 100%;
  }
  .ProxyHeroActions .Btn{
    width: 100%;
  }
  .ProxySearchInput{
    width: 100%;
  }
}