:root {
    --sp-bg: #0f172a;
    --sp-surface: #111827;
    --sp-surface-2: #1f2937;
    --sp-border: rgba(255,255,255,.08);
    --sp-text: #f8fafc;
    --sp-text-soft: #cbd5e1;
    --sp-accent: #3b82f6;
    --sp-accent-2: #60a5fa;
    --sp-danger: #ef4444;
    --sp-radius: 18px;
}

body .sp-login-wrap,
body .sp-app {
    font-family: Inter, Arial, sans-serif;
}

.sp-login-wrap {
    min-height: 70vh;
    display: grid;
    place-items: center;
    padding: 24px;
    color: var(--sp-text);
}

.sp-app,
.sp-app h1,
.sp-app h2,
.sp-app h3,
.sp-app h4,
.sp-app p,
.sp-app label,
.sp-app span,
.sp-app div,
.sp-app td,
.sp-app th,
.sp-app small,
.sp-login-wrap,
.sp-login-wrap h1,
.sp-login-wrap h2,
.sp-login-wrap p,
.sp-login-wrap label,
.sp-login-wrap span,
.sp-login-wrap div {
    color: var(--sp-text);
}

.sp-login-card,
.sp-card {
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
}

.sp-login-card {
    width: 100%;
    max-width: 440px;
    padding: 28px;
    color: var(--sp-text);
    background: var(--sp-surface);
}

.sp-kicker { color: var(--sp-accent-2) !important; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; margin: 0 0 8px; }
.sp-muted, .sp-app .sp-muted, .sp-login-wrap .sp-muted { color: var(--sp-text-soft) !important; }
.sp-form-stack { display: grid; gap: 16px; margin-top: 20px; }
.sp-form-stack label, .sp-item-form label { display: grid; gap: 8px; color: var(--sp-text) !important; }
.sp-form-stack input,
.sp-item-form input,
.sp-item-form select,
.sp-item-form textarea,
.sp-search-inline input,
.sp-filter-row select,
.sp-app input,
.sp-app textarea,
.sp-app select,
.sp-login-wrap input {
    width: 100%;
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,.06) !important;
    color: var(--sp-text) !important;
}
.sp-app input::placeholder,
.sp-app textarea::placeholder,
.sp-login-wrap input::placeholder { color: var(--sp-text-soft) !important; opacity: 1; }
.sp-app option { color: #111827; }

.sp-inline-check { grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; }
.sp-btn {
    border: 1px solid var(--sp-border);
    background: rgba(255,255,255,.04);
    color: var(--sp-text) !important;
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sp-btn-primary { background: linear-gradient(180deg, var(--sp-accent), #2563eb); border-color: transparent; }
.sp-form-message { min-height: 22px; color: #fca5a5 !important; }

.sp-app {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 85vh;
    background: var(--sp-bg);
    color: var(--sp-text);
    border-radius: 24px;
    overflow: hidden;
}

.sp-sidebar { background: rgba(255,255,255,.03); padding: 24px; border-right: 1px solid var(--sp-border); }
.sp-brand { display:flex; gap:12px; align-items:center; margin-bottom:32px; }
.sp-brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:linear-gradient(180deg, var(--sp-accent), #1d4ed8); font-weight:700; }
.sp-brand p { margin: 2px 0 0; color: var(--sp-text-soft) !important; font-size: 13px; }
.sp-nav { display:grid; gap:8px; }
.sp-nav-link { all: unset; padding: 12px 14px; border-radius: 12px; color: var(--sp-text-soft) !important; cursor:pointer; }
.sp-nav-link.is-active, .sp-nav-link:hover { background: rgba(255,255,255,.06); color: var(--sp-text) !important; }
.sp-main { padding: 24px; display:grid; gap:24px; }
.sp-topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.sp-topbar h1 { margin:0 0 4px; color: var(--sp-text) !important; }
.sp-topbar p { margin:0; color: var(--sp-text-soft) !important; }
.sp-tab { display:none; }
.sp-tab.is-active { display:block; }
.sp-card-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:16px; }
.sp-card { padding: 18px; background: var(--sp-surface); }
.sp-card h2, .sp-card h3, .sp-card h4 { margin-top:0; color: var(--sp-text) !important; }
.sp-card strong { font-size: 1.6rem; color: var(--sp-text) !important; }
.sp-section-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom: 16px; }
.sp-search-inline { display:flex; gap:10px; flex-wrap:wrap; }
.sp-filter-row { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin-bottom: 16px; }
.sp-table-wrap { overflow:auto; }
.sp-table { width:100%; border-collapse: collapse; }
.sp-table th, .sp-table td { padding: 12px; border-bottom: 1px solid var(--sp-border); text-align:left; color: var(--sp-text) !important; }
.sp-form-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:14px; }
.sp-item-form { display:grid; gap:16px; }
.sp-fitment-box { border:1px solid var(--sp-border); border-radius:16px; padding:14px; }
.sp-fitment-row { display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap:10px; align-items:end; }
.sp-form-actions { display:flex; justify-content:flex-end; }
.sp-guard { padding: 16px; border: 1px solid #fca5a5; background: #fff1f2; color: #881337 !important; border-radius: 12px; }

@media (max-width: 960px) {
    .sp-app { grid-template-columns: 1fr; }
    .sp-sidebar { border-right: none; border-bottom: 1px solid var(--sp-border); }
    .sp-topbar, .sp-section-head { flex-direction: column; align-items: stretch; }
}

.sp-sidebar-foot{margin-top:24px}.sp-flash{padding:12px 14px;border-radius:12px}.sp-flash.is-success{background:#052e16;color:#dcfce7 !important;border:1px solid #14532d}.sp-flash.is-error{background:#450a0a;color:#fecaca !important;border:1px solid #7f1d1d}.sp-status{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px}.sp-status.is-low{background:#7f1d1d;color:#fecaca !important}.sp-status.is-ok{background:#0f3d2e;color:#bbf7d0 !important}.sp-btn-danger{background:rgba(127,29,29,.25)}.sp-item-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.sp-items-view{display:none}.sp-items-view.is-active{display:block}.sp-card-actions{display:flex;gap:8px;flex-wrap:wrap}.sp-fitment-row .sp-btn{height:44px}.sp-btn.is-active{background:rgba(255,255,255,.12)}

.sp-scanner-modal[hidden]{display:none !important;}
.sp-scanner-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:24px;}
.sp-scanner-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.7);backdrop-filter:blur(4px);}
.sp-scanner-panel{position:relative;z-index:1;width:min(680px,100%);background:var(--sp-surface,#111827);color:var(--sp-text,#f9fafb);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:20px;box-shadow:0 30px 60px rgba(0,0,0,.35);}
.sp-scanner-video-wrap{position:relative;background:#000;border-radius:18px;overflow:hidden;aspect-ratio:4/3;margin:16px 0;}
#sp-scanner-video{width:100%;height:100%;object-fit:cover;display:block;}
.sp-scanner-overlay{position:absolute;inset:0;pointer-events:none;}
.sp-scanner-overlay::before{content:'';position:absolute;left:10%;right:10%;top:32%;bottom:32%;border:3px solid rgba(255,255,255,.9);border-radius:16px;box-shadow:0 0 0 999px rgba(0,0,0,.18);}
.sp-scanner-status{margin:0 0 14px;font-size:.95rem; color: var(--sp-text) !important;}
.sp-scanner-status.is-error{color:#fca5a5 !important;}
.sp-scanner-status.is-success{color:#86efac !important;}
@media (max-width: 640px){.sp-scanner-modal{padding:12px;}.sp-scanner-panel{padding:14px;border-radius:16px;}}

.sp-lookup-results{margin:0 0 1rem 0;padding:1rem;border:1px solid rgba(148,163,184,.2);border-radius:18px;background:rgba(255,255,255,.03)}
.sp-lookup-results-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1rem}
.sp-lookup-card{border:1px solid rgba(148,163,184,.18);border-radius:18px;padding:1rem;background:rgba(15,23,42,.28);display:flex;flex-direction:column;justify-content:space-between;gap:.75rem}
.sp-lookup-card h4{margin:.15rem 0 .45rem 0;font-size:1rem;color: var(--sp-text) !important}
.sp-lookup-meta{display:flex;flex-wrap:wrap;gap:.5rem}
.sp-lookup-meta span{display:inline-flex;padding:.25rem .55rem;border-radius:999px;background:rgba(59,130,246,.14);font-size:.8rem;color: var(--sp-text) !important}
.sp-inline-field{display:flex;gap:.5rem;align-items:center}.sp-inline-field input{flex:1}.sp-lookup-tools{margin-bottom:1rem}.sp-lookup-tools .sp-form-grid{margin-top:1rem}#sp-lookup-debug{margin-top:.5rem;font-size:.85rem;opacity:.9;color: var(--sp-text-soft) !important}
.sp-lookup-fallbacks{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
.sp-lookup-fallbacks .sp-btn{background:rgba(255,255,255,.06)}
.sp-manual-import{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--sp-border)}
.sp-manual-import textarea{min-height:90px}

.sp-image-preview{min-height:120px;border:1px dashed rgba(255,255,255,.18);border-radius:16px;background:var(--sp-surface-2);display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden}.sp-image-preview img{display:block;max-width:100%;max-height:180px;border-radius:12px}.sp-lookup-result{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start}.sp-lookup-thumb img,.sp-item-thumb img{display:block;width:100%;height:auto;border-radius:12px}.sp-item-thumb{margin-bottom:12px;height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:rgba(255,255,255,.04);border-radius:14px}.sp-item-thumb img{width:100%;height:100%;object-fit:contain;background:#fff}.sp-item-cards .sp-card{overflow:hidden}.sp-item-cards .sp-card h3{margin-top:6px}.sp-lookup-thumb{width:96px}.sp-inline-field{display:flex;gap:8px;align-items:center}.sp-inline-field input{flex:1}

.sp-field-span-3{grid-column:span 3;}
.sp-url-import-tools,.sp-lookup-tools{margin-bottom:1rem;}
@media (max-width: 900px){.sp-field-span-3{grid-column:span 1;}}


.sp-lookup-tools,.sp-url-import-tools,.sp-lookup-results{background:var(--sp-surface) !important;}
.sp-items-search-inline{margin-bottom:16px;}
.sp-scanner-reader{width:100%;height:100%;display:none;}
.sp-scanner-reader video{width:100% !important;height:100% !important;object-fit:cover;border-radius:18px;}
.sp-scanner-reader section{background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important;}
.sp-scanner-reader section > div{background:transparent !important;}
.sp-scanner-reader section img{display:none !important;}
.sp-scanner-reader section > div:first-child{display:none !important;}
.sp-scanner-reader #qr-shaded-region{border-width:0 !important;}
.sp-scanner-reader #qr-code-full-region{border:0 !important;background:transparent !important;}
.sp-scanner-actions{margin-top:10px;}
.sp-item-thumb{height:140px;}
.sp-item-cards .sp-card{padding:14px;}

/* v0.4.6 colour consistency patch */
.sp-app .sp-card,
.sp-app .sp-lookup-tools,
.sp-app .sp-url-import-tools,
.sp-app .sp-lookup-results,
.sp-app .sp-fitment-box,
.sp-app .sp-items-search-inline,
.sp-app .sp-scanner-panel {
    background: var(--sp-surface) !important;
    background-image: none !important;
}

.sp-app .sp-lookup-tools .sp-form-grid,
.sp-app .sp-url-import-tools .sp-form-grid,
.sp-app .sp-item-form .sp-form-grid,
.sp-app .sp-fitment-box {
    background: transparent !important;
}

.sp-app .sp-lookup-tools,
.sp-app .sp-url-import-tools,
.sp-app .sp-lookup-results,
.sp-app .sp-fitment-box,
.sp-app .sp-card {
    border-color: var(--sp-border) !important;
}

.sp-app .sp-lookup-tools .sp-section-head,
.sp-app .sp-url-import-tools .sp-section-head,
.sp-app .sp-lookup-results .sp-section-head,
.sp-app .sp-card .sp-section-head {
    background: transparent !important;
}
.sp-workspace-switch{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--sp-text-soft)}.sp-workspace-switch span{font-weight:600}.sp-workspace-switch select{min-width:180px;background:var(--sp-surface-2);color:var(--sp-text);border:1px solid rgba(148,163,184,.25);border-radius:10px;padding:8px 10px}

.sp-workspace-switcher-wrap{display:flex;flex-direction:column;gap:8px;margin:0 0 18px}
.sp-side-label{font-size:.78rem;color:var(--sp-text-soft);font-weight:600}
.sp-workspace-switcher{width:100%;background:var(--sp-surface-2);color:var(--sp-text);border:1px solid rgba(148,163,184,.25);border-radius:12px;padding:10px 12px}
.sp-workspace-meta{display:flex;gap:8px;flex-wrap:wrap}
.sp-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:rgba(59,130,246,.18);color:var(--sp-text);font-size:.78rem}
.sp-badge-soft{background:rgba(255,255,255,.07)}
.sp-nav-link-foot{width:100%;text-align:left;justify-content:flex-start;margin:0 0 12px 0}
.sp-users-plan-summary{font-size:.92rem}
#sp-users-table-body .sp-btn{margin-right:6px}
.sp-app .sp-sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.sp-app .sp-sidebar-foot .sp-btn,.sp-app .sp-sidebar-foot .sp-nav-link{width:100%}


.sp-app[data-theme="light"], .sp-login-wrap[data-theme="light"]{
    --sp-bg:#f8fafc;
    --sp-surface:#ffffff;
    --sp-surface-2:#e5eefb;
    --sp-border:rgba(15,23,42,.12);
    --sp-text:#0f172a;
    --sp-text-soft:#475569;
}
.sp-app[data-theme="dark"], .sp-login-wrap[data-theme="dark"]{
    --sp-bg:#0f172a;
    --sp-surface:#111827;
    --sp-surface-2:#1f2937;
    --sp-border:rgba(255,255,255,.08);
    --sp-text:#f8fafc;
    --sp-text-soft:#cbd5e1;
}
@media (prefers-color-scheme: light){
  .sp-app[data-theme="auto"], .sp-login-wrap[data-theme="auto"]{
      --sp-bg:#f8fafc;
      --sp-surface:#ffffff;
      --sp-surface-2:#e5eefb;
      --sp-border:rgba(15,23,42,.12);
      --sp-text:#0f172a;
      --sp-text-soft:#475569;
  }
}
@media (prefers-color-scheme: dark){
  .sp-app[data-theme="auto"], .sp-login-wrap[data-theme="auto"]{
      --sp-bg:#0f172a;
      --sp-surface:#111827;
      --sp-surface-2:#1f2937;
      --sp-border:rgba(255,255,255,.08);
      --sp-text:#f8fafc;
      --sp-text-soft:#cbd5e1;
  }
}


/* v0.5.3 global page spacing cleanup */
.sp-main > .sp-tab.is-active,
.sp-tab.is-active,
.sp-tab.is-active > .sp-card,
.sp-tab.is-active > .sp-card:first-child,
.sp-tab.is-active > *:first-child {
    margin-top: 0 !important;
    padding-top: 0;
}
.sp-tab .sp-card + .sp-card { margin-top: 16px; }
.sp-tab .sp-section-head:first-child { margin-top: 0 !important; }

.sp-usage-strip{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}.sp-usage-strip .sp-badge{font-size:.85rem}.sp-locations-plan-summary{font-size:.92rem}
.sp-bulk-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 16px}.sp-bulk-toolbar select,.sp-bulk-toolbar input{max-width:220px}.sp-category-card .sp-category-icon{font-size:2rem;line-height:1;margin-bottom:10px}.sp-category-card h3{margin-bottom:6px}.sp-category-card{min-height:180px}.sp-card-actions{display:flex;gap:8px;flex-wrap:wrap}.sp-items-view[data-cat-panel]{display:none}.sp-items-view[data-cat-panel].is-active{display:block}.sp-items-view[data-view-panel]{display:none}.sp-items-view[data-view-panel].is-active{display:block}


.sp-condition-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:600;line-height:1.2;margin-top:8px;background:rgba(255,255,255,.08);color:var(--sp-text)}
.sp-condition-new{background:#e8f7e8;color:#14532d}
.sp-condition-new_other{background:#ecfccb;color:#3f6212}
.sp-condition-used{background:#fff3cd;color:#854d0e}
.sp-condition-refurbished{background:#dbeafe;color:#1d4ed8}
.sp-condition-spares_repair{background:#ffe5b4;color:#9a3412}
.sp-condition-damaged{background:#f8d7da;color:#991b1b}
.sp-condition-untested{background:#e5e7eb;color:#374151}

.sp-app[data-theme="dark"] .sp-condition-new{color:#14532d}
.sp-app[data-theme="dark"] .sp-condition-new_other{color:#3f6212}
.sp-app[data-theme="dark"] .sp-condition-used{color:#854d0e}
.sp-app[data-theme="dark"] .sp-condition-refurbished{color:#1e40af}
.sp-app[data-theme="dark"] .sp-condition-spares_repair{color:#9a3412}
.sp-app[data-theme="dark"] .sp-condition-damaged{color:#991b1b}
.sp-app[data-theme="dark"] .sp-condition-untested{color:#374151}

.sp-items-admin-tools{align-items:end}
.sp-items-admin-tools label{display:flex;flex-direction:column;gap:6px}
.sp-items-admin-tools select,.sp-items-admin-tools input{width:100%}
.sp-filter-actions{display:flex;gap:8px;align-items:end;flex-wrap:wrap}
.sp-bulk-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:0 0 16px;padding:12px 14px;border:1px solid var(--sp-border);border-radius:14px;background:var(--sp-surface-2)}
.sp-bulk-toolbar-main{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sp-table-actions{display:flex;gap:8px;flex-wrap:wrap}
.sp-quick-edit-modal[hidden]{display:none !important}
.sp-quick-edit-modal{position:fixed;inset:0;z-index:99998;display:flex;align-items:center;justify-content:center;padding:20px}
.sp-quick-edit-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.7);backdrop-filter:blur(4px)}
.sp-quick-edit-panel{position:relative;z-index:1;width:min(900px,100%);max-height:90vh;overflow:auto;background:var(--sp-surface);border:1px solid var(--sp-border);border-radius:20px;padding:20px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.sp-quick-edit-panel textarea,.sp-quick-edit-panel input,.sp-quick-edit-panel select{width:100%}
@media (max-width: 700px){.sp-bulk-toolbar,.sp-bulk-toolbar-main,.sp-filter-actions,.sp-table-actions{flex-direction:column;align-items:stretch}.sp-quick-edit-modal{padding:12px}.sp-quick-edit-panel{padding:14px;border-radius:16px}}


/* v0.6.5 library + dashboard tidy */
.sp-stat-card{
    min-height: 168px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.sp-stat-card h3{
    margin:0;
    min-height: 3.4em;
    display:flex;
    align-items:flex-start;
}
.sp-stat-card strong{
    margin-top:auto;
}
.sp-dashboard-search-card{
    margin-top: 12px;
}
.sp-library-tools{
    margin-bottom: 1rem;
}
.sp-library-results{
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sp-border);
}
.sp-library-results-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1rem;
    margin-top: .85rem;
}
.sp-library-card{
    border:1px solid rgba(148,163,184,.18);
    border-radius:18px;
    padding:1rem;
    background:rgba(15,23,42,.18);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:.75rem;
}
.sp-library-card h4{
    margin:.15rem 0 .45rem;
}
.sp-guard-panel{
    max-width: 720px;
    margin: 2rem auto;
    background: #fff1f2;
}
.sp-guard-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:16px;
}