:root {
  --brand: #1a73e8;
  --brand-dark: #1557b0;
  --accent: #f97316;
  --accent-dark: #ea580c;
  --border: #e5e7eb;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f5f5f5; color: #333; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.navbar { background: var(--brand); color: #fff; padding: 0 20px; display: flex; align-items: center; gap: 18px; box-shadow: var(--shadow-md); min-height: 52px; flex-wrap: wrap; }
.nav-brand { font-size: 18px; font-weight: 700; letter-spacing: .5px; }
.nav-platform-tabs { display: flex; gap: 6px; }
.ptab { color: rgba(255,255,255,.85); text-decoration: none; padding: 8px 18px; border-radius: 8px 8px 0 0; font-weight: 600; font-size: 14px; transition: all .15s; align-self: flex-end; }
.ptab:hover { background: rgba(255,255,255,.15); }
.ptab.active { background: #fff; color: var(--brand); }
.ptab-tb.active { color: var(--accent-dark); }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; row-gap: 6px; }
.nav-links a { color: rgba(255,255,255,.92); text-decoration: none; padding: 6px 9px; border-radius: 7px; font-size: 13px; line-height: 1.2; white-space: nowrap; transition: background .15s, transform .05s; }
.nav-links a:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
.nav-cid { color: rgba(255,255,255,.6); font-size: 12px; margin-right: 4px; }
body.platform-tb .navbar { box-shadow: inset 0 -3px 0 var(--accent), var(--shadow-md); }
.login-box { max-width: 400px; margin: 100px auto; background: #fff; padding: 40px; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.login-box h2 { margin-bottom: 24px; text-align: center; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 4px; font-weight: 500; }
.form-group input, .form-inline input, .form-inline select { padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; }
.form-group input:focus, .form-inline input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(26,115,232,.15); }
.form-group input { width: 100%; }
.form-inline { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.form-inline input { width: auto; }
.btn { padding: 8px 16px; background: var(--brand); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; transition: background .15s, transform .05s; }
.btn:hover { background: var(--brand-dark); }
.btn:active { transform: translateY(1px); }
.btn-primary { width: 100%; padding: 12px; font-size: 16px; }
.btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 5px; }
.btn-warn { background: var(--accent); }
.btn-warn:hover { background: var(--accent-dark); }
.btn-danger { background: #ef4444; }
.btn-danger:hover { background: #dc2626; }
.data-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); margin-top: 12px; box-shadow: var(--shadow); }
.data-table th, .data-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.data-table th { background: #f1f5f9; font-weight: 600; font-size: 13px; color: #475569; white-space: nowrap; }
.data-table tbody tr:nth-child(even) { background: #fafbfc; }
.data-table tbody tr:hover { background: #eff6ff; }
body.platform-tb .data-table tbody tr:hover { background: #fff7ed; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table thead th {
    position: sticky;
    top: 0;
    background: #f3f4f6;
    z-index: 10;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #fff; padding: 20px; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); }
.stat-card h3 { font-size: 14px; color: #666; }
.stat-number { font-size: 32px; font-weight: 700; color: var(--brand); }
body.platform-tb .stat-number { color: var(--accent-dark); }
.alert { padding: 10px 16px; border-radius: 4px; margin-bottom: 16px; }
.alert.error { background: #fee2e2; color: #dc2626; }
h1 { margin-bottom: 20px; }
h2, h3 { margin: 16px 0 12px; }

/* Unified product pages */
.container:has(.product-page) { max-width: 1680px; }
.product-page { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.product-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; text-decoration: none; white-space: nowrap; }
.product-page .btn:hover { transform: translateY(-1px); }
.product-hero { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%); border: 1px solid #dbeafe; border-radius: 16px; padding: 16px 18px; box-shadow: 0 10px 26px rgba(15, 23, 42, .07); }
.product-hero::before { content: ""; position: absolute; right: -70px; top: -85px; width: 220px; height: 220px; border-radius: 999px; background: rgba(37, 99, 235, .08); pointer-events: none; }
body.platform-tb .product-hero { background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%); border-color: #fed7aa; }
body.platform-tb .product-hero::before { background: rgba(249, 115, 22, .10); }
.product-title { position: relative; z-index: 1; margin: 0; font-size: 24px; line-height: 1.25; color: #0f172a; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.product-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 10px; background: #dbeafe; color: #1d4ed8; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
body.platform-tb .product-badge { background: #ffedd5; color: #c2410c; }
.product-count { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 10px; background: rgba(255,255,255,.72); border: 1px solid rgba(148,163,184,.35); color: #64748b; font-size: 13px; font-weight: 500; }
.product-toolbar { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; max-width: 1050px; }
.product-toolbar form { margin: 0; }
.product-toolbar input[type="file"] { height: 30px; border: 1px dashed #cbd5e1; border-radius: 7px; background: #fff; padding: 4px 6px; }
.product-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px; box-shadow: 0 6px 18px rgba(15, 23, 42, .05); }
.product-note { background: #f8fafc; border-color: #dbeafe; color: #0369a1; font-size: 12px; line-height: 1.75; }
body.platform-tb .product-note { border-color: #fed7aa; color: #9a3412; background: #fff7ed; }
.product-warning { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fffbeb; border-color: #fde68a; color: #92400e; font-size: 13px; }
.product-warning input { height: 32px; border-radius: 8px !important; font-weight: 700; color: #92400e; background: #fff; }
.product-filter { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 0; }
.product-filter input, .product-filter select { height: 36px; border-color: #d1d5db; border-radius: 8px; background: #fff; }
.product-filter > input[name="search"] { min-width: 180px; }
.product-filter .btn { min-height: 36px; }
.product-filter .searchable-select input { border-radius: 8px !important; }
.product-range { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; border-radius: 10px; padding: 5px 8px; font-size: 12px; font-weight: 700; }
.product-range input { width: 76px; height: 26px; padding: 4px 6px; border-radius: 7px; background: #fff; box-sizing: border-box; font-weight: 500; }
.product-range-blue { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }
.product-range-blue input { border: 1px solid #bfdbfe; }
.product-range-green { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.product-range-green input { border: 1px solid #bbf7d0; }
.product-range-purple { background: #f5f3ff; border: 1px solid #ddd6fe; color: #6d28d9; }
.product-range-purple input { border: 1px solid #ddd6fe; }
.product-range-orange { background: #fff7ed; border: 1px solid #fb923c; color: #9a3412; box-shadow: inset 0 0 0 1px rgba(251,146,60,.12); }
.product-range-orange input { border: 1px solid #fb923c; color: #9a3412; font-weight: 700; }
.product-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: 14px; padding: 10px 12px; box-shadow: 0 6px 18px rgba(15, 23, 42, .05); }
body.platform-tb .product-actionbar { border-left-color: var(--accent); }
.product-actionbar-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.product-actionbar-hint { font-size: 12px; color: #64748b; }
.product-table-wrap { position: relative; max-height: calc(100vh - 230px); overflow: auto; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 22px rgba(15, 23, 42, .06); }
.product-table-wrap .data-table { min-width: 1480px; margin-top: 0; box-shadow: none; border-radius: 14px; }
body.platform-tb .product-table-wrap .data-table { min-width: 1420px; }
.product-table-wrap .data-table thead th { position: sticky; top: 0; z-index: 30; background: #f8fafc; color: #334155; box-shadow: 0 2px 5px rgba(15, 23, 42, .12); }
.product-table-wrap .data-table td { vertical-align: middle; }
.product-table-wrap .data-table th:first-child, .product-table-wrap .data-table td:first-child { text-align: center; width: 42px; }
.product-table-wrap .data-table img { border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.product-pager { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: #64748b; }
.product-pager.product-card { padding: 10px 12px; }
.product-pager input, .product-pager select { height: 30px; border-radius: 7px !important; }
.product-pager .btn { min-height: 30px; }
.product-empty { color: #64748b; text-align: center; padding: 42px 16px; }
@media (max-width: 900px) {
  .container:has(.product-page) { padding: 12px; }
  .product-hero, .product-actionbar { align-items: stretch; }
  .product-title { font-size: 21px; }
  .product-toolbar, .product-actionbar-main, .product-filter { justify-content: flex-start; }
  .product-filter > input[name="search"], .product-filter .searchable-select { width: 100% !important; min-width: 0; }
  .product-range { width: 100%; justify-content: flex-start; }
  .product-pager { justify-content: flex-start; }
}