:root{
    --primary-color:#222; --secondary-color:#286090; --accent-color:#b3e5fc; --success-color:#43a047; --warning-color:#ff9800;
    --info-color:#2196f3; --danger-color:#f44336; --background-color:#f5f5f5; --container-bg:#fff; --text-primary:#333; --text-secondary:#666;
    --border-color:#e2e8f0; --card-bg:#ffffff; --card-shadow:0 4px 20px rgba(0,0,0,0.08); --card-hover-shadow:0 8px 40px rgba(0,0,0,0.15);
    --theme-bg:var(--background-color); --theme-surface:var(--container-bg); --theme-text:var(--text-primary); --theme-text-secondary:var(--text-secondary);
    --theme-border:var(--border-color); --desktop:1200px;
  }
  [data-theme="dark"]{
    --primary-color:#1a1a1a; --background-color:#121212; --container-bg:#1e1e1e; --text-primary:#ffffff; --text-secondary:#b0b0b0; --border-color:#404040;
    --card-bg:#2a2a2a; --accent-color:#81d4fa; --secondary-color:#3498db; --card-shadow:0 4px 20px rgba(0,0,0,0.3); --card-hover-shadow:0 8px 40px rgba(0,0,0,0.5);
    --theme-bg:var(--background-color); --theme-surface:var(--container-bg); --theme-text:var(--text-primary); --theme-text-secondary:var(--text-secondary); --theme-border:var(--border-color);
  }
  *,*::before,*::after{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background:var(--theme-bg); color:var(--theme-text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Helvetica Neue',Arial,sans-serif;
    min-height:100vh; width:100vw; overflow-x:hidden; display:flex; flex-direction:column; font-size:16px; line-height:1.5; transition:background-color .3s ease,color .3s ease;
  }

  /* Header */
  .header {
    background: var(--primary-color);
    color: #fff;
    padding: 0 16px; /* Reduced vertical padding to let height control it */
    display: flex;
    align-items: center;
    position: relative;
    height: 60px; /* Force fixed height */
    overflow: hidden; /* Cut off excess logo height */
    flex-wrap: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .header .logo{ display:flex; align-items:center; font-size:1.4em; font-weight:600; margin-right:16px; }
  .header .logo img{ height:132px; width:132px; margin-right:8px; object-fit:contain; }
  .header-title-center{ flex:1 1 0; text-align:center; font-size:1.2em; font-weight:600; color:var(--accent-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .header .right{ display:flex; align-items:center; gap:12px; }
  .theme-dropdown{ position:relative; margin:4px 12px 8px; }
  .theme-toggle{ color:#fff; padding:14px 16px; border-radius:6px; font-weight:500; display:flex; align-items:center; justify-content:space-between; min-height:44px; cursor:pointer; background:none; border:none; width:100%; text-align:left; }
  .theme-toggle .arrow{ transition:transform .2s; font-size:.8em; }
  .theme-toggle.active .arrow{ transform:rotate(180deg); }
  .theme-options{ display:none; background:#1a4a6b; border-radius:6px; margin-top:4px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
  .theme-options.show{ display:block; animation:slideDown .2s ease; }
  @keyframes slideDown{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);} }
  .theme-option{ color:#fff; padding:12px 20px; font-size:.95em; font-weight:500; display:flex; align-items:center; gap:8px; cursor:pointer; border:none; background:none; width:100%; text-align:left; min-height:40px; }
  .theme-option:hover,.theme-option:focus{ background:#204d74; outline:none; }
  .theme-option.active{ background:#204d74; position:relative; }
  .theme-option.active::after{ content:'✓'; margin-left:auto; font-weight:bold; color:var(--accent-color); }
  .theme-icon{ font-size:1.1em; width:16px; text-align:center; }

  /* Container */
  .container{ max-width:var(--desktop); margin:24px auto; background:var(--theme-surface); border-radius:16px; box-shadow:var(--card-shadow); padding:24px; min-height:60vh; width:calc(100% - 32px); }

  /* Top actions */
  .page-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:16px; border-bottom:2px solid var(--secondary-color); margin-bottom:16px; }
  .page-title{ font-size:1.8em; font-weight:700; color:var(--theme-text); display:flex; align-items:center; gap:10px; margin:0; }
  .actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:8px; border:1px solid var(--theme-border); background:var(--secondary-color); color:#fff; cursor:pointer; font-weight:600; text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,0.12); }
  .btn.secondary{ background:transparent; color:var(--secondary-color); }
  .btn.warning{ background:var(--warning-color); color:#444; border-color:#e0c46a; }
  .btn.success{ background:var(--success-color); color:#fff; }
  .btn:disabled{ opacity:.6; cursor:not-allowed; }

  /* List card */
  .list-card{ background:var(--card-bg); border:1px solid var(--theme-border); border-radius:12px; box-shadow:var(--card-shadow); overflow:hidden; }
  .list-header{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--theme-border); }
  .search{ flex:1; }
  .search input{ width:100%; padding:10px 12px; border:1px solid var(--theme-border); border-radius:8px; background:var(--theme-surface); color:var(--theme-text); }
  .table-wrap{ overflow:auto; }
  table{ width:100%; border-collapse:collapse; }
  thead th{
    background:rgba(40,96,144,0.08); color:var(--theme-text); text-align:left; padding:12px; font-size:.9em; position:sticky; top:0; z-index:1; border-bottom:1px solid var(--theme-border);
  }
  tbody tr{ transition:background .15s; cursor:pointer; }
  tbody tr:hover{ background:rgba(40,96,144,0.06); }
  tbody td{ padding:12px; border-bottom:1px solid var(--theme-border); color:var(--theme-text); }
  .prod{ display:flex; align-items:center; gap:12px; }
  .prod img{ width:44px; height:44px; border-radius:8px; object-fit:cover; border:1px solid var(--theme-border); background:#fff; }
  .badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:.75em; font-weight:600; border:1px solid var(--theme-border); }
  .badge.instock{ color:#2e7d32; background:rgba(76,175,80,0.12); border-color:rgba(76,175,80,0.4); }
  .badge.low{ color:#f57c00; background:rgba(255,152,0,0.12); border-color:rgba(255,152,0,0.4); }
  .badge.out{ color:#c62828; background:rgba(244,67,54,0.12); border-color:rgba(244,67,54,0.4); }

  /* Modal */
.modal-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:2000; align-items:center; justify-content:center; padding:16px; overscroll-behavior:contain; }
.modal{ width:100%; max-width:720px; max-height:calc(100vh - 32px); background:var(--theme-surface); color:var(--theme-text); border-radius:16px; border:1px solid var(--theme-border); box-shadow:0 20px 60px rgba(0,0,0,0.35); overflow:hidden; display:flex; flex-direction:column; }
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--theme-border); font-weight:700; flex-shrink:0; }
.modal-body{ padding:16px 20px; overflow-y:auto; flex:1 1 auto; min-height:0; -webkit-overflow-scrolling:touch; }
.modal-footer{ padding:16px 20px; display:flex; justify-content:flex-end; gap:10px; border-top:1px solid var(--theme-border); flex-shrink:0; }

  .grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
  .field{ display:flex; flex-direction:column; gap:6px; }
  .field label{ font-size:.9em; color:var(--theme-text-secondary); }
  .field input,.field textarea,.field select{ padding:10px 12px; border:1px solid var(--theme-border); border-radius:8px; background:var(--theme-surface); color:var(--theme-text); }
  .close-x{ background:transparent; color:var(--theme-text); border:none; font-size:1.4em; cursor:pointer; line-height:1; }

  /* Loading overlay */
  .loading-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.8); display:flex; align-items:center; justify-content:center; z-index:10000; transition:opacity .3s; backdrop-filter:blur(4px); }
  .loading-spinner{ background:var(--theme-surface); padding:32px; border-radius:16px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.4); border:1px solid var(--theme-border); }
  .spinner{ width:44px; height:44px; border:5px solid var(--border-color); border-top:5px solid var(--secondary-color); border-radius:50%; animation:spin 1s linear infinite; margin:0 auto 16px; }
  @keyframes spin{ 0%{transform:rotate(0);} 100%{transform:rotate(360deg);} }

  /* Footer */
  .footer{ background:var(--primary-color); color:var(--accent-color); font-size:.9em; text-align:center; padding:20px 16px; margin-top:auto; letter-spacing:.3px; border-top:1px solid #2c5070; width:100%; }
  .footer a{ color:var(--accent-color); text-decoration:none; margin:0 8px; font-weight:500; transition:opacity .2s; }
  .footer a:hover{ opacity:.8; text-decoration:underline; }

  /* Responsive */
  @media (max-width:1024px){ .container{ margin:16px auto; width:calc(100% - 24px); } }
  @media (max-width:768px){
    .header{ padding:10px 12px; min-height:56px; }
    .header .logo img{ height:132px; width:132px; }
    .container{ margin:12px auto; width:calc(100% - 16px); border-radius:12px; padding:20px; }
    .grid-2{ grid-template-columns:1fr; }
  }
  @media (max-width:480px){ body{ font-size:14px; } .container{ margin:8px auto; width:calc(100% - 12px); padding:16px; } }
  @media print{ .header,.burger,.side-menu,.side-menu-backdrop,.footer,.loading-overlay,.modal-backdrop{ display:none!important; } .container{ margin:0; padding:0; box-shadow:none; max-width:none; width:100%; } }