/* Dynamic primary color vars — set via inline style on */ :root { --primary: #F9C100; --primary-dim: rgba(249,193,0,0.10); --primary-glow: rgba(249,193,0,0.22); --primary-text: #000000; } /* KPI grid */ .kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 28px; } @media(min-width:900px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } } /* Charts grid */ .chart-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; } @media(min-width:900px) { .chart-grid { grid-template-columns: 1fr 1fr; } } /* Category stats */ .cat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; } @media(min-width:640px) { .cat-grid { grid-template-columns: repeat(3,1fr); } } @media(min-width:1024px) { .cat-grid { grid-template-columns: repeat(4,1fr); } } /* Sidebar nav sub-items */ .nav-sub { padding-left: 28px; font-size: .8rem; } /* Content area */ .content { padding: 20px 24px; max-width: 1280px; margin: 0 auto; } /* Form grid */ .form-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media(min-width:640px) { .form-grid { grid-template-columns: 1fr 1fr; } } .col-2 { grid-column: 1 / -1; } /* License name col */ .lic-name { font-weight: 500; color: var(--text-head); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .lic-meta { font-size: .72rem; color: var(--text-muted); margin-top: 2px; } .lic-url { font-size: .72rem; color: var(--primary); display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; } /* Settings */ .settings-section { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; margin-bottom: 20px; } .settings-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-head); margin: 0 0 16px; } .color-preview { width: 40px; height: 40px; border-radius: 8px; border: 2px solid var(--border); flex-shrink: 0; } /* User table */ .role-badge { font-size: .7rem; padding: 3px 10px; border-radius: 20px; font-weight: 500; } .role-admin { background: color-mix(in srgb,var(--primary) 15%,transparent); color: var(--primary); border: 1px solid color-mix(in srgb,var(--primary) 30%,transparent); } .role-viewer { background: rgba(107,114,128,.12); color: #9ca3af; border: 1px solid rgba(107,114,128,.3); } /* Filter bar */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .filter-bar .inp { width: auto; } .search-wrap { position: relative; } .search-wrap .inp { padding-left: 32px; width: 160px; } .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; width: 14px; height: 14px; }