:root{--bg:#f4f7fb;--panel:#ffffff;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--brand:#2563eb;--brand-dark:#1e40af;--success:#16a34a;--warning:#d97706;--danger:#dc2626;--neutral:#475569;--sidebar:#0b1220;--sidebar-2:#111827;--shadow:0 20px 60px rgba(15,23,42,.08);--radius:18px}*{box-sizing:border-box}html,body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}input,select,textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 12px;color:var(--ink);outline:none;transition:.15s}input:focus,select:focus,textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(37,99,235,.12)}label{font-weight:700;font-size:13px;margin-bottom:7px;display:block}.help,.small{font-size:12px}.muted{color:var(--muted)}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-weight:800;font-size:11px;color:#2563eb}.app-shell{display:flex;min-height:100vh}.sidebar{width:280px;background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));color:#cbd5e1;padding:24px 18px;position:fixed;top:0;bottom:0;left:0;overflow:auto}.main-shell{margin-left:280px;width:calc(100% - 280px)}.content-wrap{padding:28px;max-width:1500px;margin:0 auto}.brand-row{display:flex;align-items:center;gap:12px}.brand-row strong{display:block;font-size:16px;color:#fff}.brand-row span{display:block;color:#94a3b8;font-size:12px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#60a5fa,#2563eb);color:#fff;font-weight:900;box-shadow:0 10px 25px rgba(37,99,235,.35)}.sidebar-brand{padding:4px 8px 22px;margin-bottom:10px;border-bottom:1px solid rgba(148,163,184,.16)}.nav-list{display:flex;flex-direction:column;gap:5px}.nav-list a,.nav-section{padding:11px 12px;border-radius:12px}.nav-list a:hover{background:rgba(148,163,184,.12);color:#fff}.nav-section{margin-top:12px;color:#64748b;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:800}.topbar{height:86px;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:10}.topbar h2{margin:2px 0 0;font-size:22px}.topbar-actions,.actions,.row-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.user-pill{padding:9px 12px;background:#eef2ff;border:1px solid #dbe4ff;border-radius:999px;color:#1e3a8a;font-weight:700;font-size:13px}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px}.page-head h1{font-size:32px;line-height:1.1;margin:5px 0 8px}.page-head p{margin:0;color:var(--muted)}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:20px}.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.card h3{margin:0 0 12px}.card-head h3{margin:0}.grid{display:grid;gap:20px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.stat-grid{display:grid;gap:18px;margin-bottom:20px}.stat-grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}.stat-card,.metric{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}.stat-card span,.metric span{display:block;color:var(--muted);font-size:13px;font-weight:700}.stat-card strong,.metric strong{display:block;font-size:30px;margin-top:8px}.metric small{display:block;color:var(--muted);margin-top:5px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:#fff;color:#0f172a;border-radius:12px;padding:10px 14px;font-weight:800;font-size:13px;cursor:pointer;transition:.15s}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(15,23,42,.1)}.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-dark));border-color:var(--brand);color:#fff}.btn.ghost{background:#f8fafc}.btn.danger{background:#fff1f2;border-color:#fecdd3;color:#be123c}.btn.tiny{padding:6px 9px;border-radius:10px;font-size:12px}.btn.full{width:100%;height:46px}.table-wrap{overflow:auto}table{width:100%;border-collapse:separate;border-spacing:0}th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:10px;border-bottom:1px solid var(--line)}td{padding:13px 10px;border-bottom:1px solid #eef2f7;vertical-align:middle}tr:last-child td{border-bottom:0}code{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;padding:3px 6px;font-size:12px;color:#334155}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:900;text-transform:capitalize}.badge.active,.badge.online,.badge.ready,.badge.success{background:#dcfce7;color:#166534}.badge.warning,.badge.processing{background:#fef3c7;color:#92400e}.badge.suspended,.badge.disabled,.badge.offline,.badge.danger,.badge.failed,.badge.archived{background:#fee2e2;color:#991b1b}.badge.neutral,.badge.site_global,.badge.zone,.badge.device_locked{background:#e2e8f0;color:#334155}.alert{border-radius:14px;padding:13px 15px;margin:0 0 14px;font-weight:700}.alert.success{background:#dcfce7;color:#166534}.alert.warning{background:#fef3c7;color:#92400e}.alert.danger{background:#fee2e2;color:#991b1b}.flash-stack{margin-bottom:18px}.stack-form{display:flex;flex-direction:column;gap:16px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-group{display:flex;flex-direction:column}.inline-form{display:flex;align-items:flex-end;gap:10px}.inline-form select{max-width:520px}.check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.check-grid label{border:1px solid var(--line);border-radius:12px;padding:10px;background:#f8fafc;font-weight:700}.check-grid input{width:auto;margin-right:8px}.image-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.image-grid.mini{grid-template-columns:repeat(2,minmax(0,1fr))}.image-tile{display:block;border:1px solid var(--line);border-radius:14px;padding:10px;background:#f8fafc}.image-tile img{display:block;width:100%;aspect-ratio:600/448;object-fit:contain;background:white;border-radius:10px;border:1px solid #e5e7eb}.image-tile strong,.image-tile span{display:block;margin-top:8px}.thumb{width:92px;height:68px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px}.preview-large{width:100%;max-height:520px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:14px}.detail-list{display:grid;grid-template-columns:170px 1fr;gap:10px 14px}.detail-list.columns{grid-template-columns:160px 1fr 160px 1fr}.detail-list dt{font-weight:900;color:#475569}.detail-list dd{margin:0;color:#0f172a}.pill-list{display:flex;gap:8px;flex-wrap:wrap}.pill-list span{background:#eef2ff;color:#1e3a8a;border-radius:999px;padding:6px 10px;font-weight:800;font-size:12px}.activity-list{display:flex;flex-direction:column;gap:12px}.activity-list div{padding:12px;border:1px solid #edf2f7;background:#f8fafc;border-radius:14px}.activity-list strong,.activity-list span{display:block}.activity-list span{color:var(--muted);font-size:13px;margin-top:3px}.small-input{max-width:95px}.narrow{max-width:720px}.codebox{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.auth-body{background:radial-gradient(circle at top left,#dbeafe,#f8fafc 35%,#eff6ff);min-height:100vh}.auth-shell{display:grid;grid-template-columns:minmax(360px,470px) 1fr;min-height:100vh}.auth-panel{background:#fff;padding:46px;display:flex;flex-direction:column;justify-content:center;box-shadow:var(--shadow)}.auth-panel h1{font-size:34px;margin:16px 0 8px}.auth-brand .brand-row strong,.auth-brand strong{color:#0f172a}.auth-hero{display:grid;place-items:center;padding:50px}.hero-card{max-width:680px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.8);border-radius:34px;padding:44px;box-shadow:0 30px 90px rgba(37,99,235,.16)}.hero-card h1{font-size:46px;line-height:1.05;margin:8px 0 18px}.hero-card p{font-size:18px;line-height:1.6;color:var(--muted)}hr{border:0;border-top:1px solid var(--line);width:100%;margin:6px 0}@media(max-width:1100px){.stat-grid.five,.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.two,.grid.three{grid-template-columns:1fr}.check-grid,.image-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-list.columns{grid-template-columns:160px 1fr}}@media(max-width:820px){.sidebar{position:static;width:100%;height:auto}.app-shell{display:block}.main-shell{margin-left:0;width:100%}.topbar{position:static;height:auto;padding:18px;align-items:flex-start}.content-wrap{padding:18px}.page-head{flex-direction:column}.form-grid,.check-grid,.image-grid{grid-template-columns:1fr}.auth-shell{grid-template-columns:1fr}.auth-hero{display:none}.auth-panel{min-height:100vh;padding:30px}.inline-form{flex-direction:column;align-items:stretch}.stat-grid.five{grid-template-columns:1fr}.grid.four{grid-template-columns:1fr}}
.company-list{display:flex;flex-direction:column;gap:18px}.company-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.company-card-head h2{margin:4px 0 4px;font-size:25px}.company-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.company-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}.company-metrics div{border:1px solid var(--line);background:#f8fafc;border-radius:14px;padding:12px}.company-metrics span{display:block;color:var(--muted);font-size:12px;font-weight:800}.company-metrics strong{display:block;font-size:20px;margin-top:4px}.company-nested{align-items:start}.subhead{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:0 0 10px}.subhead h3{margin:0;font-size:16px}.nested-table{border:1px solid var(--line);border-radius:14px;background:#fff}.nested-table table th,.nested-table table td{padding:9px 10px}.empty-state{border:1px dashed #cbd5e1;border-radius:14px;background:#f8fafc;color:var(--muted);padding:14px;font-weight:700}.assignment-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.assignment-options label{border:1px solid var(--line);border-radius:14px;background:#f8fafc;padding:12px;display:flex;align-items:center;gap:8px}.assignment-options input{width:auto}.local-preview{border:1px solid var(--line);border-radius:14px;background:#f8fafc;padding:12px;max-width:520px}.local-preview img{display:block;margin-top:8px;max-width:100%;max-height:260px;object-fit:contain;background:#fff;border:1px solid #e5e7eb;border-radius:12px}.preview-confirm h4{margin:8px 0}.preview-details{margin-top:16px}.save-preview-form{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}.copy-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.copy-row code{max-width:100%;overflow:auto}.api-docs .numbered-list{margin:0;padding-left:20px;color:var(--muted);line-height:1.7}.api-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 18px}.api-grid div,.code-samples div{border:1px solid var(--line);border-radius:14px;background:#f8fafc;padding:12px}.api-grid strong,.code-samples span{display:block;margin-bottom:8px;font-weight:900}.api-grid code{display:block;white-space:normal;word-break:break-all;margin-bottom:8px}.code-samples{display:grid;grid-template-columns:1fr;gap:12px}.code-samples pre{white-space:pre-wrap;word-break:break-word;margin:0 0 8px;background:#0f172a;color:#e2e8f0;border-radius:12px;padding:12px;overflow:auto}.badge.neutral{background:#e2e8f0;color:#334155}@media(max-width:1100px){.company-metrics,.assignment-options,.api-grid{grid-template-columns:1fr 1fr}}@media(max-width:820px){.company-card-head{flex-direction:column}.company-actions{justify-content:flex-start}.company-metrics,.assignment-options,.api-grid{grid-template-columns:1fr}}

/* v2 usability additions */
.company-stack{display:flex;flex-direction:column;gap:20px}.company-card{padding:0;overflow:hidden}.company-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,#f8fafc)}.company-card-head h2{margin:0 0 4px;font-size:24px}.nested-company-grid{padding:20px}.nested-panel{border:1px solid var(--line);border-radius:16px;background:#fff;padding:16px}.compact-list{display:flex;flex-direction:column;gap:9px}.compact-list a{display:block;border:1px solid #edf2f7;background:#f8fafc;border-radius:14px;padding:11px 12px}.compact-list strong,.compact-list span{display:block}.compact-list span{font-size:12px;color:var(--muted);margin-top:3px}.radio-stack{display:grid;gap:9px}.radio-stack label{border:1px solid var(--line);background:#f8fafc;border-radius:12px;padding:10px;font-weight:700}.radio-stack input{width:auto;margin-right:8px}.assignment-box{border:1px dashed #cbd5e1;background:#f8fafc;border-radius:16px;padding:14px}.discard-form{margin-top:12px}.api-docs input[readonly]{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#f8fafc}.api-docs pre{white-space:pre-wrap;background:#0f172a;color:#e2e8f0;border-radius:14px;padding:14px;overflow:auto}.preview-approval h4{margin:0 0 8px}.btn.copied{box-shadow:0 0 0 4px rgba(22,163,74,.14)}


/* v3 API/token and active-image usability fixes */
.thumb-cell{display:flex;align-items:center;gap:10px;min-width:220px}.thumb-cell strong,.thumb-cell span{display:block}.thumb-cell .thumb{flex:0 0 auto}.active-image-card{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:start}.active-preview{width:180px;max-width:100%;aspect-ratio:600/448;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:14px}.preview-placeholder{display:grid;place-items:center;min-height:132px;border:1px dashed #cbd5e1;border-radius:14px;background:#f8fafc;color:var(--muted);font-weight:800}.token-card .copy-field{display:flex;gap:8px;align-items:center}.token-card .copy-field input{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.token-status{margin-bottom:12px}.api-docs{overflow:hidden}.api-docs .api-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0}.api-docs .api-grid>div,.api-docs .code-samples>div{border:1px solid var(--line);border-radius:16px;background:#f8fafc;padding:14px;min-width:0}.api-docs .api-grid strong,.api-docs .code-samples span{display:block;font-weight:900;margin-bottom:8px}.api-docs .api-grid code{display:block;white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.5;margin-bottom:10px}.api-docs pre,.codebox{display:block;white-space:pre-wrap;word-break:break-word;overflow:auto;line-height:1.55;margin:0 0 10px;background:#0f172a;color:#e2e8f0;border-radius:14px;padding:14px;max-width:100%}.api-docs .code-samples{display:grid;grid-template-columns:1fr;gap:14px}.numbered-list{line-height:1.75;color:var(--muted);padding-left:22px}.numbered-list code{color:#334155}.copy-field{display:flex;gap:8px;align-items:center}.copy-field input{min-width:0}@media(max-width:900px){.api-docs .api-grid{grid-template-columns:1fr}.active-image-card{grid-template-columns:1fr}.active-preview{width:100%}.thumb-cell{min-width:0}.token-card .copy-field{flex-direction:column;align-items:stretch}}

/* v3 usability fixes: persistent-token API panel and active-image thumbnails */
.active-image-cell{display:flex;align-items:center;gap:12px;min-width:220px}.active-image-cell strong{display:block;line-height:1.25}.small-thumb{width:74px;height:55px;flex:0 0 auto}.thumb-placeholder{display:inline-flex;align-items:center;justify-content:center;width:92px;height:68px;border:1px dashed #cbd5e1;border-radius:10px;background:#f8fafc;color:#64748b;font-size:12px;font-weight:800;text-align:center;padding:6px}.metric-image-row{display:flex;align-items:center;gap:12px;margin-top:8px}.metric-image-row strong{font-size:15px;line-height:1.25}.active-image-hero{display:flex;align-items:center;gap:16px;margin:12px 0 16px}.active-image-hero img{width:180px;max-width:42%;aspect-ratio:600/448;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:14px}.active-image-hero.big img{width:260px}.active-image-hero strong,.active-image-hero span{display:block}.copy-input-row{display:flex;gap:10px;align-items:center}.copy-input-row input{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.copy-input-row .btn{white-space:nowrap}.api-integration .api-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:4px 0 18px}.api-summary-grid div{border:1px solid var(--line);border-radius:14px;background:#f8fafc;padding:12px}.api-summary-grid span{display:block;color:var(--muted);font-size:12px;font-weight:800}.api-summary-grid strong{display:block;margin-top:4px}.endpoint-list{display:grid;grid-template-columns:1fr;gap:16px}.endpoint-card{border:1px solid var(--line);border-radius:18px;background:#fff;padding:16px;box-shadow:0 10px 26px rgba(15,23,42,.04)}.endpoint-title{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}.endpoint-title strong{font-size:16px}.endpoint-title span{color:var(--muted);font-size:13px;line-height:1.45;text-align:right;max-width:440px}.endpoint-card label{margin-top:10px}.endpoint-card input[readonly]{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#f8fafc}.endpoint-card pre,.api-docs pre{display:block;white-space:pre-wrap;word-break:break-word;overflow:auto;margin:0;background:#0f172a;color:#e2e8f0;border-radius:14px;padding:14px;line-height:1.55;font-size:12px;min-height:auto}.api-token-panel .alert{line-height:1.55}.device-active-card{overflow:hidden}@media(max-width:1100px){.api-integration .api-summary-grid{grid-template-columns:1fr}.endpoint-title{display:block}.endpoint-title span{text-align:left;max-width:none;margin-top:4px}.active-image-cell{min-width:180px}}@media(max-width:820px){.active-image-hero{align-items:flex-start;flex-direction:column}.active-image-hero img,.active-image-hero.big img{max-width:100%;width:100%}.copy-input-row{flex-direction:column;align-items:stretch}}


/* v3 token, API, and active-image usability */
.thumb.tiny{width:74px;height:54px;border-radius:10px;flex:0 0 auto}.active-image-cell{display:flex;align-items:center;gap:10px;min-width:190px}.active-image-cell strong,.active-image-cell span{display:block}.active-image-cell strong{font-size:13px}.global-active-preview,.device-active-preview{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);background:#f8fafc;border-radius:16px;padding:12px;margin-bottom:14px}.global-active-preview img{width:180px;max-width:42%;aspect-ratio:600/448;object-fit:contain;background:#fff;border:1px solid #e5e7eb;border-radius:12px}.global-active-preview strong,.global-active-preview span{display:block;margin-bottom:6px}.device-active-preview img{width:260px;max-width:48%;aspect-ratio:600/448;object-fit:contain;background:#fff;border:1px solid #e5e7eb;border-radius:14px}.device-active-preview h3{margin:0 0 6px}.token-card .token-input{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-weight:800;background:#f8fafc}.api-flow{margin:0 0 18px;padding-left:22px;color:var(--muted);line-height:1.7}.endpoint-grid{display:grid;grid-template-columns:1fr;gap:14px}.endpoint-card{border:1px solid var(--line);background:#f8fafc;border-radius:16px;padding:14px;min-width:0}.endpoint-card>div:first-child{display:flex;align-items:center;gap:10px;margin-bottom:10px}.endpoint-card h4{margin:0}.endpoint-method{display:inline-flex;align-items:center;justify-content:center;min-width:48px;border-radius:999px;background:#dbeafe;color:#1e40af;font-weight:900;font-size:12px;padding:5px 8px}.endpoint-method.post{background:#ede9fe;color:#5b21b6}.endpoint-card input{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#fff;margin-bottom:10px}.endpoint-card pre,.api-docs pre{display:block;width:100%;max-width:100%;margin:0;white-space:pre;overflow-x:auto;line-height:1.5;background:#0f172a;color:#e2e8f0;border-radius:14px;padding:14px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px}.compact-site-row{display:flex;align-items:center;gap:10px}.compact-site-row>div{min-width:0}@media(max-width:820px){.global-active-preview,.device-active-preview{flex-direction:column}.global-active-preview img,.device-active-preview img{width:100%;max-width:100%}.active-image-cell{min-width:0}}
/* v3.1 final API readability override */
.api-integration .endpoint-list{display:grid;grid-template-columns:1fr;gap:16px}.api-integration .endpoint-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;min-width:0}.api-integration .endpoint-title{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}.api-integration .endpoint-title strong{font-size:16px}.api-integration .endpoint-title span{color:var(--muted);font-size:13px;line-height:1.45;text-align:right;max-width:440px}.api-integration .endpoint-card pre{display:block;width:100%;max-width:100%;white-space:pre-wrap!important;word-break:break-word;overflow:auto;line-height:1.55!important;margin:0;background:#0f172a;color:#e2e8f0;border-radius:14px;padding:14px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px}.api-integration .endpoint-card input[readonly]{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#fff;margin-bottom:10px}.api-integration .api-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:4px 0 18px}.api-integration .api-summary-grid div{border:1px solid var(--line);border-radius:14px;background:#f8fafc;padding:12px}.api-integration .api-summary-grid span{display:block;color:var(--muted);font-size:12px;font-weight:800}.api-integration .api-summary-grid strong{display:block;margin-top:4px}.api-token-panel .copy-input-row{display:flex;gap:10px;align-items:center}.api-token-panel .copy-input-row input{min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.api-token-panel .copy-input-row button{white-space:nowrap}@media(max-width:1100px){.api-integration .api-summary-grid{grid-template-columns:1fr}.api-integration .endpoint-title{display:block}.api-integration .endpoint-title span{text-align:left;max-width:none;margin-top:4px}}@media(max-width:820px){.api-token-panel .copy-input-row{flex-direction:column;align-items:stretch}}

/* v4 filtering, reporting, and export UI */
.filter-card{padding:14px;margin-bottom:18px;overflow-x:auto}.filter-grid{display:flex;flex-wrap:nowrap;gap:12px;align-items:end;min-width:max-content}.filter-grid>div{min-width:170px}.filter-grid input,.filter-grid select{min-width:170px}.filter-actions{display:flex;gap:8px;align-items:end;flex-wrap:nowrap;min-width:auto}.report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.report-card{display:block;transition:.15s}.report-card:hover{transform:translateY(-2px);box-shadow:0 24px 70px rgba(15,23,42,.12)}.report-card h2{margin:8px 0 8px;font-size:23px}.report-card p{margin:0;color:var(--muted);line-height:1.55}.stat-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.badge.failed{background:#fee2e2;color:#991b1b}.thumb-placeholder.tiny{width:74px;height:54px;font-size:11px}.table-wrap td .muted.small{line-height:1.45}@media(max-width:1200px){.stat-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.report-grid,.stat-grid.four{grid-template-columns:1fr}.filter-actions{align-items:end}.filter-actions .btn{width:auto}}

/* v5 conversion comparison and device test assignment */
.original-preview-row{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}.conversion-stack{display:flex;flex-direction:column;gap:18px}.conversion-option{display:grid;grid-template-columns:32px minmax(240px,520px) minmax(220px,1fr);gap:16px;align-items:center;border:1px solid var(--line);border-radius:18px;background:#f8fafc;padding:14px;cursor:pointer;transition:.15s}.conversion-option:hover{border-color:#93c5fd;box-shadow:0 10px 28px rgba(15,23,42,.08);transform:translateY(-1px)}.conversion-option input{width:auto}.conversion-preview img{display:block;width:100%;max-height:260px;object-fit:contain;background:#fff;border:1px solid #e5e7eb;border-radius:14px}.conversion-meta strong,.conversion-meta span,.conversion-meta code{display:block;margin-bottom:7px}.conversion-meta span{color:var(--muted);font-size:13px}@media(max-width:980px){.original-preview-row{grid-template-columns:1fr}.conversion-option{grid-template-columns:28px 1fr}.conversion-meta{grid-column:2}}@media(max-width:680px){.conversion-option{grid-template-columns:1fr}.conversion-option input{grid-row:1}.conversion-meta{grid-column:auto}.conversion-preview img{max-height:320px}}

.dropzone{border:2px dashed #cbd5e1;border-radius:18px;padding:20px;background:#f8fafc;text-align:center;transition:all .18s ease}
.dropzone.dragging{border-color:#2563eb;background:#eff6ff}
.dropzone.has-file{border-color:#10b981;background:#ecfdf5}
.dropzone input[type=file]{display:block;width:100%;margin-bottom:10px}


/* v6.2 filter bar cleanup: keep filters in one professional horizontal row */
.filter-card {
    overflow-x: auto;
    padding-bottom: 14px;
}

.filter-card .filter-grid,
.filter-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    width: max-content;
    min-width: 100%;
}

.filter-card .filter-grid > div,
.filter-grid > div {
    flex: 0 0 auto !important;
    min-width: 150px;
    max-width: 220px;
}

.filter-card .filter-grid > div:has(input[name="q"]),
.filter-grid > div:has(input[name="q"]) {
    min-width: 240px;
    max-width: 320px;
}

.filter-card .filter-grid label,
.filter-grid label {
    white-space: nowrap;
}

.filter-card .filter-grid input,
.filter-card .filter-grid select,
.filter-grid input,
.filter-grid select {
    width: 100%;
    min-width: 0;
}

.filter-card .filter-actions,
.filter-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    min-width: max-content !important;
    max-width: none !important;
}

@media (max-width: 760px) {
    .filter-card .filter-grid,
    .filter-grid {
        flex-wrap: wrap !important;
        width: 100%;
    }

    .filter-card .filter-grid > div,
    .filter-grid > div {
        flex: 1 1 220px !important;
        max-width: none;
    }
}


/* v6.5 hard filter toolbar override
   This intentionally avoids CSS grid for filter forms. Every filter page gets one
   horizontal toolbar row on desktop with horizontal scroll when needed. */
.card.filter-card-horizontal,
.filter-card-horizontal,
section.filter-card-horizontal {
    display: block !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    white-space: nowrap !important;
    padding: 16px !important;
}

.card.filter-card-horizontal form.filter-toolbar,
.filter-card-horizontal form.filter-toolbar,
form.filter-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: max-content !important;
    min-width: 100% !important;
    margin: 0 !important;
}

.card.filter-card-horizontal form.filter-toolbar > div,
.filter-card-horizontal form.filter-toolbar > div,
form.filter-toolbar > div {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 145px !important;
    max-width: 210px !important;
    margin: 0 !important;
}

.card.filter-card-horizontal form.filter-toolbar > div:first-child,
.filter-card-horizontal form.filter-toolbar > div:first-child,
form.filter-toolbar > div:first-child {
    min-width: 235px !important;
    max-width: 330px !important;
}

.card.filter-card-horizontal form.filter-toolbar label,
.filter-card-horizontal form.filter-toolbar label,
form.filter-toolbar label {
    display: block !important;
    white-space: nowrap !important;
    margin-bottom: 5px !important;
    font-size: 12px !important;
}

.card.filter-card-horizontal form.filter-toolbar input,
.card.filter-card-horizontal form.filter-toolbar select,
.filter-card-horizontal form.filter-toolbar input,
.filter-card-horizontal form.filter-toolbar select,
form.filter-toolbar input,
form.filter-toolbar select {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.card.filter-card-horizontal form.filter-toolbar .filter-actions,
.filter-card-horizontal form.filter-toolbar .filter-actions,
form.filter-toolbar .filter-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 8px !important;
    min-width: max-content !important;
    max-width: none !important;
    width: auto !important;
}

.card.filter-card-horizontal form.filter-toolbar .filter-actions .btn,
.filter-card-horizontal form.filter-toolbar .filter-actions .btn,
form.filter-toolbar .filter-actions .btn {
    white-space: nowrap !important;
}

@media (max-width: 760px) {
    .card.filter-card-horizontal,
    .filter-card-horizontal,
    section.filter-card-horizontal {
        white-space: normal !important;
        overflow-x: visible !important;
    }

    .card.filter-card-horizontal form.filter-toolbar,
    .filter-card-horizontal form.filter-toolbar,
    form.filter-toolbar {
        flex-wrap: wrap !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .card.filter-card-horizontal form.filter-toolbar > div,
    .filter-card-horizontal form.filter-toolbar > div,
    form.filter-toolbar > div {
        flex: 1 1 220px !important;
        max-width: none !important;
    }
}


/* v6.6 preview conversion layout: two columns on desktop */
html body .conversion-stack {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
    gap: 16px !important;
    align-items: start !important;
}

html body .conversion-stack .conversion-option {
    margin: 0 !important;
    height: 100% !important;
}

html body .conversion-stack .conversion-preview img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

@media (max-width: 900px) {
    html body .conversion-stack {
        grid-template-columns: 1fr !important;
    }
}



/* v6.7 final filter fix */
.filter-toolbar label{white-space:nowrap!important;font-size:12px!important;margin-bottom:5px!important}
.filter-toolbar input,.filter-toolbar select{width:100%!important;box-sizing:border-box!important}
.filter-toolbar .btn{white-space:nowrap!important}
@media(max-width:900px){
  .conversion-stack{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  section.filter-card{white-space:normal!important;overflow-x:visible!important}
  form.filter-toolbar{flex-wrap:wrap!important;width:100%!important;min-width:0!important}
  form.filter-toolbar>.filter-field{flex:1 1 220px!important;width:auto!important;min-width:220px!important;max-width:none!important}
}

/* v6.8 provisioning and QR */
.qr-panel{margin-top:14px;padding:14px;border:1px solid #e5e7eb;border-radius:14px;background:#f8fafc}
.qr-img{width:220px;height:220px;display:block;margin:10px 0;border:1px solid #e5e7eb;border-radius:10px;background:#fff}

/* v6.11 quick actions */
.quick-actions{position:relative;display:inline-flex}
.action-trigger{min-width:40px;font-weight:800}
.action-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:240px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 20px 50px rgba(15,23,42,.16);z-index:50;padding:8px}
.quick-actions.open .action-menu{display:flex;flex-direction:column;gap:4px}
.action-menu a,.action-menu span{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:#0f172a;white-space:nowrap}
.action-menu a:hover{background:#f1f5f9}
.action-menu .disabled{color:#94a3b8;background:#f8fafc;cursor:not-allowed}



/* v6.12 responsive form UX */
.required-star{color:#dc2626;font-weight:800}
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea{border-color:#dc2626!important;box-shadow:0 0 0 3px rgba(220,38,38,.12)!important}
button[disabled],
input[type="submit"][disabled],
.btn[disabled],
button.disabled-until-valid,
input.disabled-until-valid{opacity:.48!important;cursor:not-allowed!important;filter:grayscale(1)}
button.is-loading,
input.is-loading{position:relative;opacity:.62!important;cursor:wait!important}
form.is-submitting{opacity:.92}
form.is-submitting input,
form.is-submitting select,
form.is-submitting textarea{pointer-events:none}
.form-group label{display:inline-flex;align-items:center;gap:2px}
@media(max-width:760px){
  .form-grid{grid-template-columns:1fr!important}
  .actions{flex-wrap:wrap}
  .actions .btn,.actions button{width:100%;justify-content:center}
}


/* v6.13 usability final */
.row-quick-actions{display:inline-flex;margin-right:6px}
.quick-actions{position:relative;display:inline-flex}
.action-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);min-width:255px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 18px 45px rgba(15,23,42,.18);z-index:100;padding:8px}
.quick-actions.open .action-menu{display:flex;flex-direction:column;gap:4px}
.action-menu a,.action-menu span{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:#0f172a;white-space:nowrap}
.action-menu a:hover{background:#f1f5f9}
.action-menu .disabled{color:#94a3b8;background:#f8fafc;cursor:not-allowed}
button[disabled],input[type="submit"][disabled],button.disabled-until-valid,input.disabled-until-valid{background:#94a3b8!important;border-color:#94a3b8!important;color:#fff!important;opacity:.55!important;cursor:not-allowed!important;box-shadow:none!important}
button.is-loading,input.is-loading{background:#64748b!important;border-color:#64748b!important;cursor:wait!important}
.required-star{color:#dc2626!important;font-weight:900!important}
.form-group.has-error input,.form-group.has-error select,.form-group.has-error textarea{border-color:#dc2626!important;box-shadow:0 0 0 3px rgba(220,38,38,.14)!important}

/* v6.15 soft delete */
.action-menu form.menu-form{margin:0}
.action-menu .menu-danger{display:block;width:100%;text-align:left;padding:10px 12px;border:0;background:transparent;color:#dc2626;border-radius:10px;cursor:pointer;font:inherit}
.action-menu .menu-danger:hover{background:#fef2f2}
.badge.deleted{background:#fee2e2;color:#991b1b}


/* v6.16 action menu visibility fix */
.card,
.table-wrap,
.row-actions {
    overflow: visible !important;
}

.table-wrap table {
    overflow: visible !important;
}

.row-actions {
    position: relative !important;
    white-space: nowrap !important;
}

.quick-actions {
    position: relative !important;
    display: inline-flex !important;
    vertical-align: middle !important;
}

.quick-actions .action-trigger {
    min-width: 34px !important;
    height: 30px !important;
    line-height: 1 !important;
    padding: 4px 10px !important;
    font-weight: 900 !important;
}

.quick-actions .action-menu {
    display: none !important;
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 6px) !important;
    min-width: 260px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    box-shadow: 0 22px 55px rgba(15,23,42,.22) !important;
    z-index: 99999 !important;
    padding: 8px !important;
    text-align: left !important;
}

.quick-actions.open .action-menu,
.quick-actions:hover .action-menu,
.quick-actions:focus-within .action-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.quick-actions .action-menu a,
.quick-actions .action-menu span,
.quick-actions .action-menu .menu-danger {
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.quick-actions .action-menu a:hover {
    background: #f1f5f9 !important;
}

.quick-actions .action-menu .menu-danger {
    color: #dc2626 !important;
    background: transparent !important;
    border: 0 !important;
    text-align: left !important;
    cursor: pointer !important;
}

.quick-actions .action-menu .menu-danger:hover {
    background: #fef2f2 !important;
}


/* v6.19 required field UX final */
button[disabled],
input[type="submit"][disabled],
button.disabled-until-valid,
input.disabled-until-valid {
  background:#9ca3af!important;
  border-color:#9ca3af!important;
  color:#ffffff!important;
  opacity:.55!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
  pointer-events:none!important;
}
.required-star{color:#dc2626!important;font-weight:900!important}
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea{border-color:#dc2626!important;box-shadow:0 0 0 3px rgba(220,38,38,.14)!important}
button.is-loading,input.is-loading{background:#64748b!important;border-color:#64748b!important;cursor:wait!important}


/* v6.21 summary dashboard */
.stat-card-link{text-decoration:none;color:inherit;transition:transform .16s ease,box-shadow .16s ease}
.stat-card-link:hover{transform:translateY(-2px);box-shadow:0 18px 45px rgba(15,23,42,.12)}
.summary-hero{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:16px;margin-bottom:18px}
.hero-card{display:block;text-decoration:none;background:linear-gradient(135deg,#0f172a,#1d4ed8);color:#fff;border-radius:22px;padding:20px;box-shadow:0 24px 60px rgba(30,64,175,.22)}
.hero-card span{display:block;opacity:.78;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.hero-card strong{display:block;font-size:34px;margin:8px 0}.hero-card small{opacity:.85}
.wow-card{background:linear-gradient(180deg,#fff,#f8fafc)}
.donut-wrap{display:flex;align-items:center;gap:28px;min-height:260px;justify-content:center}
.donut{width:190px;height:190px;border-radius:50%;background:conic-gradient(#22c55e calc(var(--online)*1%),#ef4444 0);position:relative;box-shadow:inset 0 0 0 1px #e5e7eb,0 16px 40px rgba(15,23,42,.12)}
.donut:after{content:"";position:absolute;inset:36px;background:#fff;border-radius:50%;box-shadow:inset 0 0 0 1px #e5e7eb}.donut-legend{font-size:15px}.donut-legend>div{margin:10px 0}
.legend-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px}.legend-dot.online{background:#22c55e}.legend-dot.offline{background:#ef4444}.big-percent{font-size:34px;font-weight:800;color:#0f172a;margin-top:18px!important}
.bar-list{display:flex;flex-direction:column;gap:13px}.bar-row{display:grid;grid-template-columns:minmax(120px,220px) 1fr 52px;gap:12px;align-items:center}.bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#334155}.bar-track{height:15px;background:#e5e7eb;border-radius:999px;overflow:hidden}.bar-fill{height:100%;background:linear-gradient(90deg,#2563eb,#60a5fa);border-radius:999px}.bar-fill.secondary{background:linear-gradient(90deg,#7c3aed,#c084fc)}.bar-fill.accent{background:linear-gradient(90deg,#f97316,#facc15)}
.trend-bars{display:flex;gap:16px;align-items:end;min-height:260px;padding:20px 4px 4px}.trend-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:60px}.trend-bar{width:100%;min-height:5px;background:linear-gradient(180deg,#22c55e,#15803d);border-radius:14px 14px 4px 4px;box-shadow:0 12px 24px rgba(34,197,94,.2)}.trend-col span{font-size:12px;color:#64748b;transform:rotate(-18deg);white-space:nowrap}.trend-col strong{font-size:13px}
@media(max-width:1100px){.summary-hero{grid-template-columns:repeat(2,1fr)}.donut-wrap{flex-direction:column}.bar-row{grid-template-columns:1fr}.trend-bars{overflow-x:auto}.trend-col{min-width:72px}}


/* v6.22 layout fixes: Summary chart overlap + sane filter bars */
.summary-hero {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 16px !important;
    margin: 0 0 22px 0 !important;
    position: static !important;
    align-items: stretch !important;
    clear: both !important;
}

.summary-card {
    display: block !important;
    min-height: 132px !important;
    text-decoration: none !important;
    background: linear-gradient(135deg,#0f172a,#1d4ed8) !important;
    color: #fff !important;
    border-radius: 22px !important;
    padding: 20px !important;
    box-shadow: 0 18px 44px rgba(30,64,175,.20) !important;
    position: static !important;
    max-width: none !important;
    border: 0 !important;
}

.summary-card span {
    display: block !important;
    opacity: .78 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
}

.summary-card strong {
    display: block !important;
    font-size: 32px !important;
    line-height: 1.1 !important;
    margin: 8px 0 !important;
}

.summary-card small {
    display: block !important;
    opacity: .88 !important;
    line-height: 1.25 !important;
}

.wow-card {
    position: static !important;
    margin-top: 0 !important;
    z-index: 1 !important;
}

.content-wrap {
    overflow: visible !important;
}

/* Make filters fit the content area instead of becoming a single giant off-screen row. */
section.filter-card,
.card.filter-card {
    overflow-x: visible !important;
    white-space: normal !important;
    padding: 16px 18px !important;
}

form.filter-toolbar,
.filter-card form.filter-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

form.filter-toolbar > .filter-field,
form.filter-toolbar > div {
    flex: 1 1 180px !important;
    width: auto !important;
    min-width: 160px !important;
    max-width: 260px !important;
    margin: 0 !important;
}

form.filter-toolbar > .filter-field:first-of-type,
form.filter-toolbar > div:first-of-type {
    flex: 2 1 280px !important;
    min-width: 240px !important;
    max-width: 420px !important;
}

form.filter-toolbar .filter-actions {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: flex-end !important;
}

.main-shell {
    min-width: 0 !important;
}

.table-wrap {
    max-width: 100% !important;
}

@media(max-width: 900px) {
    .summary-hero {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
}

@media(max-width: 560px) {
    .summary-hero {
        grid-template-columns: 1fr !important;
    }
    form.filter-toolbar > .filter-field,
    form.filter-toolbar > div {
        flex: 1 1 100% !important;
        max-width: none !important;
    }
}


/* v6.23 API documentation readability */
.api-docs pre,
.endpoint-card pre {
    min-height: 64px !important;
    height: auto !important;
    white-space: pre-wrap !important;
    overflow: auto !important;
    line-height: 1.45 !important;
    padding: 14px 16px !important;
}

.api-token-panel textarea.codebox,
.qr-panel textarea.codebox {
    min-height: 138px !important;
    height: auto !important;
    max-height: 260px !important;
    resize: vertical !important;
    white-space: pre-wrap !important;
    overflow: auto !important;
    line-height: 1.45 !important;
}

.endpoint-card input[readonly],
.api-docs input[readonly] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 14px !important;
}

.endpoint-card {
    overflow: visible !important;
}


/* v6.24 Summary hard isolation */
.summary-hero,.summary-card{all:revert-layer}
body .content-wrap > .summary-hero,
body .content-wrap div[style*="grid-template-columns"] {
  clear: both !important;
}
body .content-wrap .card {
  float: none !important;
}


/* v6.25 API docs readability */
.api-docs pre,
.endpoint-card pre {
    min-height: 64px !important;
    height: auto !important;
    white-space: pre-wrap !important;
    overflow: auto !important;
    line-height: 1.45 !important;
    padding: 14px 16px !important;
}
.api-token-panel textarea.codebox,
.qr-panel textarea.codebox {
    min-height: 138px !important;
    height: auto !important;
    max-height: 260px !important;
    resize: vertical !important;
    white-space: pre-wrap !important;
    overflow: auto !important;
    line-height: 1.45 !important;
}
.endpoint-card input[readonly],
.api-docs input[readonly] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 14px !important;
}


/* v6.28 API menu */
.api-flow-list{margin:0;padding-left:22px;line-height:1.7}
.api-flow-list li{margin:8px 0}
.api-docs pre,.endpoint-card pre{min-height:64px;height:auto;white-space:pre-wrap;overflow:auto;line-height:1.45;padding:14px 16px}
.api-token-panel textarea.codebox,.qr-panel textarea.codebox{min-height:138px;height:auto;max-height:260px;resize:vertical;white-space:pre-wrap;overflow:auto;line-height:1.45}


/* v6.29 next-five feature polish */
.badge.outdated{background:#ffedd5;color:#9a3412}
.badge.offline{background:#fee2e2;color:#991b1b}
.badge.error{background:#fecaca;color:#7f1d1d}
.badge.online{background:#dcfce7;color:#166534}
.badge.warning{background:#fef3c7;color:#92400e}
.badge.schedule{background:#dbeafe;color:#1d4ed8}


/* v6.32 health dashboard unregistered count */
.stat-grid.six{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
@media(max-width:1200px){.stat-grid.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.stat-grid.six{grid-template-columns:1fr}}


/* v6.34 health dashboard summary-style UI */
.health-hero{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important}
.health-card-blue{background:linear-gradient(135deg,#0f172a,#2563eb)!important}
.health-card-green{background:linear-gradient(135deg,#064e3b,#16a34a)!important}
.health-card-orange{background:linear-gradient(135deg,#7c2d12,#f97316)!important}
.health-card-red{background:linear-gradient(135deg,#7f1d1d,#dc2626)!important}
.health-card-purple{background:linear-gradient(135deg,#581c87,#7c3aed)!important}
.health-donut{width:190px;height:190px;border-radius:50%;background:
conic-gradient(
#22c55e 0 calc(var(--online)*1%),
#f59e0b calc(var(--online)*1%) calc((var(--online) + var(--warning))*1%),
#f97316 calc((var(--online) + var(--warning))*1%) calc((var(--online) + var(--warning) + var(--outdated))*1%),
#ef4444 calc((var(--online) + var(--warning) + var(--outdated))*1%) calc((var(--online) + var(--warning) + var(--outdated) + var(--offline))*1%),
#991b1b 0
);position:relative;box-shadow:inset 0 0 0 36px #fff,inset 0 0 0 37px #e5e7eb,0 16px 40px rgba(15,23,42,.12)}
.legend-dot.warning{background:#f59e0b}.legend-dot.outdated{background:#f97316}.legend-dot.error{background:#991b1b}
.bar-fill.online{background:linear-gradient(90deg,#16a34a,#86efac)!important}
.bar-fill.warning{background:linear-gradient(90deg,#f59e0b,#fde68a)!important}
.bar-fill.outdated{background:linear-gradient(90deg,#f97316,#fdba74)!important}
.bar-fill.offline{background:linear-gradient(90deg,#dc2626,#fca5a5)!important}
.bar-fill.error{background:linear-gradient(90deg,#7f1d1d,#ef4444)!important}


/* v1.37 Health inline UI polish */
.health-inline-fill.online{background:linear-gradient(90deg,#16a34a,#86efac)!important}
.health-inline-fill.warning{background:linear-gradient(90deg,#f59e0b,#fde68a)!important}
.health-inline-fill.outdated{background:linear-gradient(90deg,#f97316,#fdba74)!important}
.health-inline-fill.offline{background:linear-gradient(90deg,#dc2626,#fca5a5)!important}
.health-inline-fill.error{background:linear-gradient(90deg,#7f1d1d,#ef4444)!important}


/* v1.38 unified dashboard */
.dashboard-quick-strip .actions{gap:10px;flex-wrap:wrap}
.dashboard-quick-strip .btn{min-width:130px;justify-content:center}
.stat-card-link{text-decoration:none!important}


/* v1.40 Branding themes */
.brand-logo-img{width:42px;height:42px;border-radius:14px;object-fit:contain;background:#fff;padding:4px;box-shadow:0 10px 25px rgba(37,99,235,.18)}
.theme-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.theme-card{border:1px solid var(--line);border-radius:18px;padding:14px;background:#fff;box-shadow:0 12px 32px rgba(15,23,42,.06)}
.theme-card.selected{outline:3px solid var(--brand);border-color:var(--brand)}
.theme-card h4{margin:10px 0 4px}
.theme-preview{height:130px;border-radius:16px;overflow:hidden;display:grid;grid-template-columns:64px 1fr;border:1px solid #e5e7eb}
.theme-sidebar-mini{background:var(--theme-sidebar);padding:12px;display:flex;flex-direction:column;gap:10px}
.theme-sidebar-mini span{display:block;height:10px;border-radius:999px;background:var(--theme-text);opacity:.8}
.theme-main-mini{background:#f8fafc;padding:12px}
.theme-main-mini div{height:16px;width:70%;border-radius:999px;background:var(--theme-accent);margin-bottom:14px}
.theme-main-mini button{height:24px;width:80px;border:0;border-radius:999px;background:var(--theme-accent);margin-bottom:12px}
.theme-main-mini section{height:42px;border-radius:12px;background:linear-gradient(135deg,var(--theme-secondary),#fff);border:1px solid #e5e7eb}
.brand-live-preview{height:360px;border-radius:22px;border:1px solid var(--line);overflow:hidden;display:grid;grid-template-columns:150px 1fr;background:#f8fafc}
.brand-live-preview aside{background:var(--preview-sidebar);color:var(--preview-text);padding:18px;display:flex;flex-direction:column;gap:12px}
.brand-live-preview aside b{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--preview-secondary),var(--preview-accent));color:#fff}
.brand-live-preview aside img{width:60px;height:46px;object-fit:contain;background:#fff;border-radius:12px;padding:5px}
.brand-live-preview main{padding:18px}
.brand-live-preview header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.brand-live-preview button{border:0;background:var(--preview-accent);color:#fff;border-radius:12px;padding:9px 14px;font-weight:800}
.brand-live-preview section{background:#fff;border-radius:18px;border:1px solid #e5e7eb;padding:18px;box-shadow:0 12px 30px rgba(15,23,42,.08)}
.preview-bars{display:flex;gap:10px;margin-top:16px}
.preview-bars i{height:60px;flex:1;border-radius:14px;background:linear-gradient(180deg,var(--preview-accent),var(--preview-secondary))}


/* v1.42 operations pack */
.tree-card details{padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin:8px 0;background:#fff}
.tree-card summary{cursor:pointer}
.tree-card ul{margin:8px 0 0 24px}


/* v1.43 notification engine */
.badge.info{background:#dbeafe;color:#1e40af}.badge.warning{background:#fef3c7;color:#92400e}.badge.critical{background:#fee2e2;color:#991b1b}.badge.emergency{background:#7f1d1d;color:#fff}
.badge.email{background:#e0f2fe;color:#075985}.badge.sms{background:#fef9c3;color:#854d0e}.badge.mqtt{background:#dcfce7;color:#166534}.badge.webhook{background:#ede9fe;color:#5b21b6}.badge.dashboard{background:#f1f5f9;color:#334155}.badge.slack{background:#fce7f3;color:#9d174d}.badge.teams{background:#e0e7ff;color:#3730a3}
.badge.test{background:#dbeafe;color:#1d4ed8}.badge.sent{background:#dcfce7;color:#166534}.badge.failed{background:#fee2e2;color:#991b1b}.badge.suppressed,.badge.muted{background:#f1f5f9;color:#475569}


/* v1.44 custom scripts + notification UI polish */
.notification-tabs{display:flex;gap:10px;align-items:center;padding:10px;margin-bottom:18px}
.notification-tabs a{padding:10px 14px;border-radius:12px;background:#f1f5f9;color:#334155;font-weight:800}
.notification-tabs a.active{background:var(--brand);color:#fff}
.badge.custom_php{background:#111827;color:#fff}
textarea[name="script_code"]{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#0b1220;color:#dbeafe}


/* v1.46 feature menu manager */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.feature-toggle-card{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.04);cursor:pointer}
.feature-toggle-card input{width:auto;margin-top:4px}
.feature-toggle-card strong{display:block}
.feature-toggle-card small{display:block;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.feature-toggle-card em{display:block;color:#64748b;font-size:11px;margin-top:4px}
.feature-section-card{margin-bottom:16px}


/* v1.48 notification channel UX + script IDE */
.channel-help-box{border:1px solid #bfdbfe;background:#eff6ff;color:#1e40af;border-radius:14px;padding:12px 14px;margin:8px 0 16px}
.script-ide-toolbar{display:flex;gap:8px;align-items:center;background:#111827;color:#dbeafe;border-radius:14px 14px 0 0;padding:10px 12px;font-weight:800}
.script-ide-toolbar span{margin-right:auto}
.script-code-wrap textarea,
textarea[data-script-editor]{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace!important;background:#0b1220!important;color:#dbeafe!important;border-radius:0 0 14px 14px!important;line-height:1.5!important;tab-size:4}
.script-editor-card .form-group{margin-bottom:14px}


/* v1.49 notification expansion */
.notification-tabs{overflow-x:auto}
.notification-tabs a{white-space:nowrap}
.badge.expired{background:#f1f5f9;color:#475569}.badge.cancelled{background:#fee2e2;color:#991b1b}


/* v1.50 menu titles */
.menu-title-section input{min-width:240px}


/* v1.52 menu management */
.menu-title-section input,.menu-management input[name*="[title]"],.menu-management input[name*="[section]"]{min-width:180px}


/* v1.55 drag/drop menu management */
.menu-builder{display:flex;flex-direction:column;gap:16px;margin-bottom:18px}
.menu-section-panel{border:1px solid var(--line);background:#f8fafc}
.menu-section-head{display:flex;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.menu-section-name{max-width:260px;font-weight:800}
.drag-handle{cursor:grab;display:inline-grid;place-items:center;min-width:34px;height:34px;border-radius:10px;background:#e2e8f0;color:#334155;font-weight:900}
.menu-dropzone{min-height:54px;display:flex;flex-direction:column;gap:10px;border-radius:14px;padding:8px}
.menu-dropzone.drag-over{background:#eff6ff;outline:2px dashed var(--brand)}
.menu-item-card{display:grid;grid-template-columns:34px 110px minmax(180px,1fr) minmax(320px,1.5fr);gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:0 8px 22px rgba(15,23,42,.05)}
.menu-item-card.dragging,.menu-section-panel.dragging{opacity:.55}
.menu-item-main strong{display:block}.menu-item-main code,.menu-item-main small{display:block;color:#64748b}
.menu-edit-fields{display:grid;grid-template-columns:1fr 1fr 90px;gap:8px}.menu-edit-fields label{font-size:12px;color:#64748b}.menu-edit-fields input{margin-top:4px}
.menu-enabled{display:flex;gap:6px;align-items:center;font-size:13px}
@media(max-width:1100px){.menu-item-card{grid-template-columns:34px 1fr}.menu-edit-fields{grid-column:1/-1;grid-template-columns:1fr}.menu-item-main{grid-column:1/-1}}


/* v1.56 compact enterprise menu management */
.menu-help-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:16px}
.menu-help-strip>div{background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;border-radius:16px;padding:13px 16px;box-shadow:0 14px 35px rgba(15,23,42,.12)}
.menu-help-strip strong{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.menu-help-strip span{display:block;opacity:.78;font-size:12px;margin-top:3px}
.menu-builder-compact{gap:12px}
.compact-section{background:#f8fafc;border:1px solid #dbe3ef;border-radius:18px;box-shadow:0 14px 35px rgba(15,23,42,.07);padding:0;overflow:hidden}
.compact-section-head{background:linear-gradient(135deg,#111827,#334155);color:#fff;margin:0;padding:10px 12px;border:0;display:grid;grid-template-columns:34px minmax(220px,320px) 1fr;gap:10px;align-items:center}
.compact-section-head .muted{color:#cbd5e1}
.compact-section-head .menu-section-name{height:34px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;border-radius:10px;font-weight:900}
.compact-section-head .drag-handle{background:rgba(255,255,255,.14);color:#fff}
.compact-dropzone{gap:5px;padding:8px;min-height:42px;background:#f8fafc}
.compact-dropzone.drag-over{background:#e0f2fe;outline:2px dashed var(--brand);outline-offset:-4px}
.compact-menu-item{display:grid;grid-template-columns:30px 34px minmax(180px,1.3fr) minmax(130px,.8fr) 70px minmax(140px,1fr) minmax(130px,.7fr);gap:8px;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:11px;padding:6px 8px;min-height:42px;box-shadow:none}
.compact-menu-item:hover{border-color:#93c5fd;box-shadow:0 8px 22px rgba(37,99,235,.09)}
.compact-menu-item.dragging{opacity:.48;outline:2px dashed var(--brand)}
.compact-menu-item .drag-handle{height:28px;min-width:28px;border-radius:8px;background:#e2e8f0;color:#334155;font-size:13px}
.compact-enabled{justify-content:center;margin:0}
.compact-enabled input{width:18px;height:18px}
.compact-title,.compact-section-input,.compact-sort{height:30px;border-radius:8px;font-size:13px;padding:4px 8px}
.compact-route{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#475569;background:#f1f5f9;border-radius:7px;padding:5px 7px}
.compact-key{font-size:11px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-save-bar{position:sticky;bottom:0;z-index:20;background:rgba(248,250,252,.92);backdrop-filter:blur(10px);border:1px solid #e2e8f0;border-radius:16px;padding:12px;display:flex;gap:12px;align-items:center;box-shadow:0 -10px 30px rgba(15,23,42,.08);margin:16px 0}
.compact-feature-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.compact-feature-card{padding:9px 11px;border-radius:12px}
@media(max-width:1200px){.compact-menu-item{grid-template-columns:30px 34px 1fr 90px}.compact-section-input,.compact-route,.compact-key{display:none}.compact-sort{max-width:80px}}
@media(max-width:700px){.compact-section-head{grid-template-columns:34px 1fr}.section-count{grid-column:1/-1}.compact-menu-item{grid-template-columns:30px 34px 1fr}.compact-sort{display:none}}