:root{
    --bg:#0f1220;
    --bg2:#0b0f18;
    --panel:#151a26;
    --card:#1b2232;
    --text:#e8edf6;
    --muted:#9aa3b3;
    --border:#2a3344;
    --ok:#2ecc71;
    --warn:#ffb020;
    --danger:#e55353;
    --accent:#6aa0ff;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.25);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.35s ease;
  }

  *{box-sizing:border-box}

  body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto;
    background:linear-gradient(180deg, var(--bg), var(--bg2, var(--bg)));
    color:var(--text);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x: hidden;
  }

  header{
    position:sticky;
    top:0;
    z-index:10;
    background:rgba(10,13,19,0.95);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
    transition:background var(--transition-normal);
  }

  .wrap{
    max-width:1400px;
    margin:0 auto;
    padding: var(--space-lg) var(--space-xl);
  }

  /* Toolbar - Main container for navigation */
  .toolbar{
    display:flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items:center;
    padding: var(--space-md) 0;
    width: 100%;
    box-sizing: border-box;
  }

  /* Toolbar actions - Right side container */
  .toolbar-actions{
    display:flex;
    gap:var(--space-sm);
    align-items:center;
    flex-wrap:nowrap;
    justify-content: flex-end;
    margin-left: auto;
  }

  .toolbar-actions > button,
  .toolbar-actions > .filter-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    height: 44px;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    background: var(--panel);
    border: 1px solid var(--border);
    transition: all var(--transition-fast);
    box-sizing: border-box;
    white-space: nowrap;
  }

  .toolbar-actions > button:hover,
  .toolbar-actions > .filter-toggle:hover,
  .toolbar-actions .quick-stats:hover,
  .toolbar-actions .settings-dropdown:hover {
    background: var(--card);
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  .toolbar-actions .filter-toggle {
    padding: var(--space-sm);
    justify-content: center;
  }

  .toolbar-actions .quick-stats,
  .toolbar-actions .settings-dropdown {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    height: 44px;
    width: 44px;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--panel);
    border: 1px solid var(--border);
    transition: all var(--transition-fast);
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
  }

  .toolbar-actions .quick-stats .stat-item,
  .toolbar-actions .settings-dropdown .settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
  }

  .toolbar-actions .quick-stats .stat-item:hover,
  .toolbar-actions .settings-dropdown .settings-btn:hover {
    background: transparent;
    transform: none;
    box-shadow: none;
  }

  .settings-dropdown {
    position: relative;
  }

  .currency-selector,
  .language-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }

  .toolbar-select {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-xs) var(--space-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: all var(--transition-fast);
    height: 44px;
    min-width: 60px;
    max-width: 80px;
    outline: none;
  }

  .toolbar-select:hover {
    background: var(--card);
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  .toolbar-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(106,160,255,0.1);
  }

  .tabs{
    display:flex;
    background: var(--panel);
    border:1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-xs);
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow-sm);
  }

  .tabs button{
    background:transparent;
    color:var(--text);
    border:1px solid transparent;
    padding: var(--space-sm) var(--space-xl);
    border-radius: calc(var(--radius-lg) - 2px);
    cursor:pointer;
    font-weight:600;
    font-size:14px;
    transition: all var(--transition-fast);
    position:relative;
    flex:1;
    min-width:160px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap: var(--space-xs);
    transform: none !important;
    box-shadow: none !important;
  }

  .tabs button:hover{
    background: rgba(106,160,255,0.1);
    border-color: rgba(106,160,255,0.3);
    transform: none !important;
    box-shadow: none !important;
  }

  .tabs button.active{
    background: var(--accent);
    color: var(--text);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
    border-color: var(--accent);
  }

  .tab-icon{
    font-size:16px;
    line-height:1;
  }

.tab-text{
    font-weight:600;
    white-space: nowrap;
  }

  /* Search container - Flexible width */
  .search-container{
    flex: 1 1 auto;
    min-width: 200px;
    max-width: 400px;
  }

  .search-input-wrapper{
    position:relative;
    display:flex;
    align-items:center;
    background: var(--panel);
    border:1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0 var(--space-sm);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
  }

  .search-input-wrapper:focus-within{
    border-color: var(--accent);
  }

  #q:focus{
    box-shadow: none !important;
  }

  .search-icon{
    color: var(--muted);
    font-size:18px;
    margin-right: var(--space-xs);
  }

  #q{
    flex:1;
    background:transparent;
    border:none;
    outline:none;
    color: var(--text);
    font-size:14px;
    padding: var(--space-sm) 32px var(--space-sm) 0;
    min-width:0;
    max-width: 100%;
    box-sizing: border-box;
    height: 44px;
    line-height: 1.4;
  }

  #q::placeholder{
    color: var(--muted);
  }

  .clear-btn{
    background:none !important;
    border:none !important;
    color: var(--muted);
    cursor:pointer;
    padding: 0;
    transition: color var(--transition-fast);
    font-size:16px;
    line-height: 1;
  }

  .search-input-wrapper #clearSearch{
    position:absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%) !important;
    height: 24px;
    width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  .clear-btn:hover{
    color: var(--text);
    background: none !important;
    transform: translateY(-50%) !important;
    box-shadow: none !important;
  }

  .filter-toggle{
    display:flex;
    align-items:center;
    gap: var(--space-xs);
    background: var(--panel);
    border:1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-lg);
    cursor:pointer;
    transition: all var(--transition-fast);
    font-size:14px;
    font-weight:500;
    color: var(--text);
    white-space: nowrap;
  }

  .filter-toggle:hover{
    background: var(--card);
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }

  .filter-toggle.active{
    background: var(--accent);
    color: var(--text);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(106,160,255,0.2);
  }

  .filter-icon{
    font-size:16px;
    transition: transform var(--transition-normal);
  }

  .filter-toggle.active .filter-icon{
    transform: rotate(180deg);
  }

  .quick-stats{
    display:flex;
    gap: var(--space-sm);
  }

  .stat-item{
    display:flex;
    align-items:center;
    gap: var(--space-xs);
    background: var(--panel);
    border:1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-xs) var(--space-sm);
    font-size:14px;
  }

  .stat-icon{
    font-size:16px;
  }

  .stat-count{
    font-weight:600;
    color: var(--accent);
    min-width:20px;
    text-align:center;
  }

  .logout-btn{
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin-left: var(--space-xs);
    flex: none;
    height: 44px;
    white-space: nowrap;
  }

  .logout-btn:hover{
    background: var(--danger);
    color: var(--text);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }

  .logout-icon{
    font-size: 16px;
  }

  .logout-text{
    display: inline-block;
  }

  .settings-btn{
    background: var(--panel);
    border:1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0;
    cursor:pointer;
    transition: all var(--transition-fast);
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    min-height: inherit;
    box-sizing: border-box;
  }

  .settings-btn:hover{
    background: var(--card);
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }

  .settings-icon{
    font-size:16px;
  }

  .settings-menu{
    position:absolute;
    top:100%;
    right:0;
    background: var(--panel);
    border:1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    min-width:200px;
    box-shadow: var(--shadow-lg);
    z-index:100;
    display:none;
    margin-top: var(--space-xs);
  }

  .settings-menu::before{
    content:'';
    position:absolute;
    top:-6px;
    right: var(--space-lg);
    width:0;
    height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:6px solid var(--panel);
  }

  .settings-group{
    margin-bottom: var(--space-md);
  }

  .settings-group:last-child{
    margin-bottom:0;
  }

  .settings-label{
    display:flex;
    align-items:center;
    gap: var(--space-xs);
    font-size:13px;
    font-weight:600;
    color: var(--text);
    margin-bottom: var(--space-xs);
  }

  .settings-group select{
    width:100%;
    background: var(--card);
    border:1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-xs) var(--space-sm);
    font-size:13px;
    color: var(--text);
  }

  .setting-icon{
    font-size:14px;
  }

  .filters-panel{
    background: var(--panel);
    border:1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-top: var(--space-md);
    box-shadow: var(--shadow-md);
    animation: slideDown var(--transition-normal);
  }

  @keyframes slideDown{
    from{
      opacity:0;
      transform: translateY(-10px);
    }
    to{
      opacity:1;
      transform: translateY(0);
    }
  }

  .filters-content{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    padding: var(--space-lg);
  }

  .filter-group{
    display:flex;
    flex-direction:column;
    gap: var(--space-xs);
  }

  .filter-label{
    display:flex;
    align-items:center;
    gap: var(--space-xs);
    font-size:14px;
    font-weight:600;
    color: var(--text);
  }

  .filter-group select{
    background: var(--card);
    border:1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    font-size:14px;
    color: var(--text);
    cursor:pointer;
    transition: all var(--transition-fast);
  }

  .filter-group select:hover{
    border-color: var(--accent);
  }

  .filter-group select:focus{
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(106,160,255,0.1);
  }

  .checkbox-label{
    display:flex;
    align-items:center;
    gap: var(--space-sm);
    cursor:pointer;
    font-size:14px;
    color: var(--text);
    padding: var(--space-xs);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    position: relative;
  }

  .checkbox-label:hover{
    background: rgba(106,160,255,0.05);
  }

  .checkbox-label input[type="checkbox"]{
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
  }

  .checkmark{
    width:18px;
    height:18px;
    border:2px solid var(--border);
    border-radius: var(--radius-sm);
    position:relative;
    transition: all var(--transition-fast);
    display: inline-block;
    cursor: pointer;
    flex-shrink: 0;
    background: transparent;
  }

  .checkmark:hover{
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(106,160,255,0.1);
  }

  #onlyMixed:checked + .checkmark{
    background: var(--accent);
    border-color: var(--accent);
  }

  #onlyMixed:checked + .checkmark:hover{
    background: linear-gradient(135deg, var(--accent), rgba(106,160,255,0.8));
    box-shadow: 0 0 0 2px rgba(106,160,255,0.2);
  }

  #onlyMixed:checked + .checkmark::after{
    content:'✓';
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    color: var(--text);
    font-size:12px;
    font-weight:600;
  }

  .checkbox-text{
    flex:1;
  }

  .filter-actions{
    display:flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top:1px solid var(--border);
    grid-column: 1 / -1;
  }

  .apply-btn, .reset-btn{
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition: all var(--transition-fast);
    border: none;
  }

  .apply-btn{
    background: var(--accent);
    color: var(--text);
  }

  .apply-btn:hover{
    background: linear-gradient(135deg, var(--accent), rgba(106,160,255,0.8));
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }

  .reset-btn{
    background: var(--card);
    color: var(--text);
    border:1px solid var(--border);
  }

  .reset-btn:hover{
    background: var(--panel);
    border-color: var(--accent);
    transform: translateY(-1px);
  }

  /* Large desktop - Full layout */
  @media (min-width: 1401px) {
    .toolbar {
      justify-content: space-between;
    }
  }

  /* Desktop - Slightly compressed */
  @media (max-width: 1400px) {
    .search-container {
      max-width: 350px;
    }
  }

  /* Small desktop - Hide text labels */
  @media (max-width: 1200px) {
    .toolbar {
      gap: var(--space-sm);
    }
    .toolbar-actions {
      gap: var(--space-xs);
    }
    .filter-text, .logout-text {
      display: none;
    }
    .toolbar-select {
      min-width: 55px;
      max-width: 65px;
    }
    .search-container {
      max-width: 300px;
    }
    .grid2 {
      grid-template-columns: 1fr;
      gap: var(--space-xl);
    }
  }

  /* Tablet - Compact layout */
  @media (max-width: 1024px) {
    .toolbar {
      flex-wrap: wrap;
    }
    .tabs {
      order: 1;
      width: 100%;
      margin-bottom: var(--space-sm);
    }
    .tabs button {
      min-width: 0;
      flex: 1;
      padding: var(--space-sm) var(--space-md);
    }
    .tab-text {
      display: none;
    }
    .search-container {
      order: 2;
      flex: 1 1 50%;
      max-width: none;
      min-width: 250px;
    }
    .toolbar-actions {
      order: 3;
      flex: 1 1 auto;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: var(--space-xs);
    }
    .toolbar-actions > button,
    .toolbar-actions > .filter-toggle {
      height: 40px;
      padding: var(--space-xs) var(--space-sm);
    }
    .quick-stats {
      height: 40px;
      width: auto;
    }
    .toolbar-select {
      height: 40px;
      min-width: 55px;
      max-width: 65px;
    }
    .logout-btn {
      padding: var(--space-xs) var(--space-sm);
      height: 40px;
    }
    .filters-content {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: var(--space-md);
      padding: var(--space-md);
    }
  }


  /* Mobile - Stacked layout */
  @media (max-width: 768px) {
    main {
      padding: var(--space-lg);
      margin-top: var(--space-md);
    }
    .orders {
      grid-template-columns: 1fr;
      gap: var(--space-lg);
    }
    .card {
      padding: var(--space-md);
    }
    .toolbar {
      gap: var(--space-sm);
      padding: var(--space-sm) 0;
    }
    .tabs {
      order: 1;
      width: 100%;
      display: flex;
      gap: var(--space-xs);
      padding: var(--space-xs);
      margin-bottom: var(--space-sm);
    }
    .tabs button {
      flex: 1;
      min-width: 0;
      padding: var(--space-sm);
      font-size: 13px;
      min-height: 42px;
    }
    .tab-icon {
      font-size: 14px;
    }
    .tab-text {
      display: none;
    }
    .search-container {
      order: 2;
      width: 100%;
      max-width: none;
      margin-bottom: var(--space-sm);
    }
    .search-input-wrapper {
      width: 100%;
    }
    #q {
      font-size: 14px;
    }
    .toolbar-actions {
      order: 3;
      width: 100%;
      display: flex;
      justify-content: space-between;
      gap: var(--space-xs);
      flex-wrap: wrap;
    }
    .toolbar-actions > button,
    .toolbar-actions > .filter-toggle {
      height: 38px;
      padding: var(--space-xs) var(--space-sm);
    }
    .quick-stats {
      height: 38px;
    }
    .toolbar-select {
      height: 38px;
      min-width: 50px;
      max-width: 60px;
      padding: var(--space-xs);
    }
    .logout-btn {
      height: 38px;
      padding: var(--space-xs) var(--space-sm);
    }
    .filters-content {
      grid-template-columns: 1fr;
      gap: var(--space-sm);
    }
    .filter-actions {
      flex-direction: column;
      gap: var(--space-xs);
    }
    .apply-btn, .reset-btn {
      width: 100%;
      padding: var(--space-md);
    }
    .gridf, .gridf3 {
      grid-template-columns: 1fr;
    }
  }

  /* Small mobile - Maximum compression */
  @media (max-width: 480px) {
    .wrap {
      padding: var(--space-sm);
    }
    main {
      padding: var(--space-md) var(--space-sm);
      margin-top: var(--space-sm);
    }
    .login {
      margin: var(--space-xl) var(--space-md);
      padding: var(--space-lg);
    }
    .sect {
      padding: var(--space-sm);
      border-radius: var(--radius-md);
      word-break: break-word;
      overflow-wrap: break-word;
    }
    .toolbar {
      padding: var(--space-xs) 0;
    }
    .tabs button {
      padding: var(--space-xs);
      min-height: 36px;
      font-size: 12px;
    }
    .tab-icon {
      font-size: 12px;
    }
    .search-input-wrapper {
      padding: 0 var(--space-xs);
    }
    #q {
      font-size: 13px;
      padding: var(--space-xs) 28px var(--space-xs) 0;
      height: 36px;
    }
    .toolbar-actions {
      gap: 4px;
    }
    .toolbar-actions > button,
    .toolbar-actions > .filter-toggle {
      height: 34px;
      padding: 4px 8px;
    }
    .quick-stats {
      height: 34px;
      width: auto;
    }
    .toolbar-select {
      height: 34px;
      min-width: 45px;
      max-width: 55px;
      font-size: 12px;
    }
    .logout-btn {
      height: 34px;
      padding: 4px 8px;
    }
    .filter-icon, .logout-icon {
      font-size: 12px;
    }
    .stat-icon {
      font-size: 12px;
    }
    .stat-count {
      font-size: 12px;
    }
    .filter-toggle{
      padding: var(--space-xs) var(--space-sm);
      font-size:13px;
    }
    .filter-text{
      display: inline-block;
    }
    .settings-menu{
      right: -10px;
      min-width: 180px;
      padding: var(--space-sm);
    }
    .settings-menu::before{
      right: var(--space-md);
    }
    .filters-panel{
      margin-top: var(--space-sm);
    }
    .filters-content{
      padding: var(--space-sm);
    }
    .gridf, .gridf3, .grid-single{
      gap: var(--space-xs);
    }
    select, input, textarea{
      font-size: 16px;
      min-height: 44px;
      min-width: 80px;
      max-width: 100%;
      word-break: break-word;
    }
    button{
      font-size: 16px;
      min-height: 44px;
      min-width: 60px;
    }
    .sect button{
      word-break: break-word;
      white-space: normal;
      min-height: 44px;
    }
    .flex-row button{
      width: 100%;
      justify-content: center;
    }
  }

  select,input,textarea{
    background:var(--panel);
    color:var(--text);
    border:1px solid var(--border);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size:14px;
    font-weight:500;
    transition: all var(--transition-fast);
    outline:none;
    max-width: 170px;
    min-width: 100px;
    flex: 1;
    box-sizing: border-box;
  }

  input[type="color"]{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    width: 48px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    min-width: 48px;
    max-width: 48px;
    flex: 0 0 48px;
  }
  input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; }
  input[type="color"]::-webkit-color-swatch{ border: none; border-radius: calc(var(--radius-md) - 2px); }
  input[type="color"]::-moz-color-swatch{ border: none; border-radius: calc(var(--radius-md) - 2px); }

  button{
    background:var(--panel);
    color:var(--text);
    border:1px solid var(--border);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size:14px;
    font-weight:600;
    transition: all var(--transition-fast);
    outline:none;
    max-width: 100%;
    min-width: 79px;
    box-sizing: border-box;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: var(--space-xs);
    min-height:40px;
    white-space:nowrap;
  }

  select:hover,input:hover,textarea:hover{
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  button:not(.tabs button):hover{
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  select:focus,input:focus,textarea:focus{
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(106,160,255,0.1);
  }

  button:not(.tabs button):active{
    transform: translateY(0);
  }

  input[type="checkbox"]{
    width:16px;
    height:16px;
    accent-color: var(--accent);
  }

  main{
    max-width:1400px;
    margin:0 auto;
    padding: var(--space-xl);
    margin-top: var(--space-lg);
  }

  .orders{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
    gap: var(--space-xl);
  }

  .card{
    background: var(--card);
    border:1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    display:flex;
    flex-direction:column;
    gap: var(--space-md);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    position:relative;
    overflow:hidden;
  }

  .card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(106,160,255,0.3);
  }

  .card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background: linear-gradient(90deg, var(--accent), transparent);
    opacity:0;
    transition: opacity var(--transition-normal);
  }

  .card:hover::before{
    opacity:1;
  }

  .muted{
    color:var(--muted);
    font-size:13px;
  }

  .total{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid var(--border);
    padding-top: var(--space-md);
    margin-top: var(--space-md);
  }

  .sum{
    font-weight:700;
    font-size:16px;
    color: var(--accent);
  }

  .row{
    display:flex;
    gap: var(--space-sm);
    flex-wrap:wrap;
    align-items:center;
  }

  .card .row{ margin-top: auto; }

  .row button{
    padding: var(--space-xs) var(--space-sm);
    font-size:13px;
    min-height:36px;
    border-radius: var(--radius-md);
  }

  .ok{
    background: linear-gradient(135deg, #163821, #1c5a36) !important;
    border-color:#1c5a36 !important;
    color: #c9f3d2 !important;
  }

  .warn{
    background: linear-gradient(135deg, #3a2c12, #6c5109) !important;
    border-color:#6c5109 !important;
    color: #ffe5b4 !important;
  }

  .danger{
    background: linear-gradient(135deg, #3a1616, #702525) !important;
    border-color:#702525 !important;
    color: #f5c2c2 !important;
  }

  .panel{
    display:none;
    animation: fadeIn var(--transition-normal);
  }

  .panel.active{
    display:block;
  }

  @keyframes fadeIn{
    from{opacity:0} to{opacity:1}
  }

  .skel{
    background: var(--card);
    border:1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    animation: pulse 2s infinite;
  }

  .skel .sh{
    height: var(--space-md);
    background: linear-gradient(90deg, var(--card), var(--panel), var(--card));
    background-size:200% 100%;
    animation:shine 1.5s infinite;
    opacity:.6;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
  }

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

  @keyframes pulse{
    0%,100%{opacity:1}
    50%{opacity:.8}
  }

  .mt-6{ margin-top: var(--space-xs); }
  .mt-8{ margin-top: var(--space-sm); }
  .flex-row{ display:flex; gap: var(--space-xs); align-items:center; }
  .flex-row-wrap{ display:flex; gap: var(--space-xs); flex-wrap:wrap; }
  .flex-actions{ display:flex; gap: var(--space-sm); align-items:center; }
  .flex-between{ display:flex; justify-content:space-between; align-items:center; gap: var(--space-xs); }
  .grid-single{ display:grid; grid-template-columns:1fr; gap: var(--space-xs); width: 100%; box-sizing: border-box; }

  .grid2{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-2xl);
    width: 100%;
    box-sizing: border-box;
  }

  .gridf{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    width: 100%;
    box-sizing: border-box;
  }

  .gridf3{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
    width: 100%;
    box-sizing: border-box;
  }

  .sect{
    background: var(--card);
    border:1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
  }

  .sect h3{
    margin:0 0 var(--space-md) 0;
    font-size:18px;
    font-weight:600;
    color: var(--accent);
  }

  .sect .gridf,
  .sect .gridf3,
  .sect .grid-single{
    overflow: hidden;
    word-break: break-word;
  }

  .gridf > div,
  .gridf3 > div,
  .grid-single > div{
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .gridf > div label,
  .gridf3 > div label,
  .grid-single > div label{
    font-weight: 600;
    margin-bottom: var(--space-xs);
  }

  .list{
    display:flex;
    flex-direction:column;
    gap: var(--space-sm);
    max-height:70vh;
    overflow:auto;
    scrollbar-width:thin;
    scrollbar-color: var(--border) transparent;
  }

  .list::-webkit-scrollbar{
    width:6px;
  }

  .list::-webkit-scrollbar-track{
    background: transparent;
  }

  .list::-webkit-scrollbar-thumb{
    background: var(--border);
    border-radius: var(--radius-full);
  }

  .line{
    border:1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    display:grid;
    grid-template-columns:1fr auto;
    gap: var(--space-md);
    align-items:center;
    transition: all var(--transition-fast);
    background: linear-gradient(135deg, var(--panel), var(--card));
  }

  .line:hover{
    border-color: rgba(106,160,255,0.3);
    background: linear-gradient(135deg, var(--card), var(--panel));
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  .line .meta{
    font-size:13px;
    color:var(--muted);
    line-height:1.3;
  }

  .login{
    max-width:480px;
    margin: var(--space-3xl) auto;
    background: var(--card);
    border:1px solid var(--border);
    padding: var(--space-2xl);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
  }

  #adminUser,
  #adminPass{
    width: 100% !important;
    max-width: 100% !important;
  }

  .login .grid-single > .primary-btn{
    margin-top: var(--space-md);
  }

  .login h3{
    margin:0 0 var(--space-lg) 0;
    font-size:20px;
    font-weight:600;
    text-align:center;
    color: var(--accent);
  }

  .age{
    color:var(--muted);
    font-weight:600;
    font-size:12px;
  }

  .age.warn{
    color: var(--warn);
  }

  .age.danger{
    color: var(--danger);
  }

  .order-badges {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all var(--transition-fast);
  }

  .status-icon {
    font-size: 14px;
    line-height: 1;
  }

  .status-new {
    background: rgba(106, 160, 255, 0.2);
    color: var(--accent);
    border: 1px solid rgba(106, 160, 255, 0.3);
  }

  .status-served {
    background: rgba(46, 204, 113, 0.2);
    color: var(--ok);
    border: 1px solid rgba(46, 204, 113, 0.3);
  }

  .status-canceled {
    background: rgba(229, 83, 83, 0.2);
    color: var(--danger);
    border: 1px solid rgba(229, 83, 83, 0.3);
  }

  .order-items {
    margin: var(--space-md) 0;
    line-height: 1.6;
    flex-grow: 1;
  }

  .order-items > div {
    padding: 2px 0;
    transition: color var(--transition-fast);
  }

  .order-items > div:hover {
    color: var(--accent);
  }

  .admin-tabs {
    display: flex;
    gap: var(--space-sm);
    background: var(--panel);
    padding: var(--space-sm);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
    overflow-x: auto;
  }

  .admin-tab {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    font-weight: 600;
  }

  .admin-tab:hover {
    background: var(--card);
    border-color: var(--border);
  }

  .admin-tab.active {
    background: var(--accent);
    color: var(--text);
    border-color: var(--accent);
  }

  .admin-panel {
    display: none;
  }

  .admin-panel.active {
    display: block;
    animation: fadeIn var(--transition-normal);
  }

  .admin-content {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
  }

  .admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border);
  }

  .admin-header h3 {
    margin: 0;
    font-size: 20px;
    color: var(--accent);
  }

  .product-search-bar {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
  }

  .product-search-bar input {
    flex: 1;
  }

  .product-list {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: var(--space-xl);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
  }

  .product-form, .category-form {
    background: var(--panel);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
  }

  .product-form h4, .category-form h4 {
    margin-top: 0;
    margin-bottom: var(--space-lg);
    color: var(--accent);
  }

  .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .form-group label {
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    max-width: 100%;
  }

  .form-group textarea {
    resize: vertical;
    min-height: 60px;
  }

  .form-group.full-width {
    grid-column: 1 / -1;
  }

  .help-text {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
  }

  .translation-buttons {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--card);
    border-radius: var(--radius-md);
  }

  .trans-btn {
    flex: 1;
    background: var(--accent);
    color: var(--text);
    border: none;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .trans-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }

  .form-actions {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
  }

  .primary-btn, .save-btn {
    background: var(--accent);
    color: var(--text);
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    transition: all var(--transition-fast);
  }

  .delete-btn {
    background: var(--danger);
    color: var(--text);
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    transition: all var(--transition-fast);
  }

  .warn-btn {
    background: var(--warn);
    color: var(--text);
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    transition: all var(--transition-fast);
  }

  .import-btn {
    background: linear-gradient(135deg, var(--accent), rgba(106,160,255,0.7));
    color: var(--text);
    border: none;
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    transition: all var(--transition-fast);
    width: 100%;
  }

  .import-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border);
  }

  .image-upload {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }

  .image-preview {
    width: 100px;
    height: 100px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
  }

  .logo-preview {
    max-width: 200px;
    max-height: 100px;
    border-radius: var(--radius-md);
    margin-top: var(--space-md);
  }

  .category-list {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: var(--space-xl);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
  }

  .settings-section {
    background: var(--panel);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
  }

  .settings-section h4 {
    margin-top: 0;
    margin-bottom: var(--space-md);
    color: var(--accent);
  }

  .color-input {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .color-preview {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    border: 2px solid var(--border);
  }

  .sync-section {
    display: grid;
    gap: var(--space-xl);
  }

  .sync-card {
    background: var(--panel);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid var(--border);
    transition: all var(--transition-fast);
  }

  .sync-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .sync-icon {
    font-size: 48px;
    margin-bottom: var(--space-md);
  }

  .sync-card h4 {
    margin: var(--space-md) 0;
    color: var(--accent);
  }

  .sync-card p {
    color: var(--muted);
    margin-bottom: var(--space-lg);
  }

  .sync-info {
    background: var(--panel);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
  }

  .sync-info h4 {
    margin-top: 0;
    color: var(--accent);
  }

  .sync-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .sync-info li {
    padding: var(--space-sm) 0;
    color: var(--text);
  }