:root {
  --text: #6b6375;
  --text-h: #08060d;
  --bg: #fff;
  --border: #e5e4e7;
  --code-bg: #f4f3ec;
  --accent: #aa3bff;
  --accent-bg: rgba(170, 59, 255, 0.1);
  --accent-border: rgba(170, 59, 255, 0.5);
  --social-bg: rgba(244, 243, 236, 0.5);
  --shadow:
    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;

  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, Consolas, monospace;

  font: 18px/145% var(--sans);
  letter-spacing: 0.18px;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @media (max-width: 1024px) {
    font-size: 16px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #9ca3af;
    --text-h: #f3f4f6;
    --bg: #16171d;
    --border: #2e303a;
    --code-bg: #1f2028;
    --accent: #c084fc;
    --accent-bg: rgba(192, 132, 252, 0.15);
    --accent-border: rgba(192, 132, 252, 0.5);
    --social-bg: rgba(47, 48, 58, 0.5);
    --shadow:
      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
  }

  #social .button-icon {
    filter: invert(1) brightness(2);
  }
}

body {
  margin: 0;
}

#root {
  width: 100%;
  min-width: 0;
  min-height: 100svh;
  margin: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

h1,
h2 {
  font-family: var(--heading);
  font-weight: 500;
  color: var(--text-h);
}

h1 {
  font-size: 56px;
  letter-spacing: -1.68px;
  margin: 32px 0;
  @media (max-width: 1024px) {
    font-size: 36px;
    margin: 20px 0;
  }
}
h2 {
  font-size: 24px;
  line-height: 118%;
  letter-spacing: -0.24px;
  margin: 0 0 8px;
  @media (max-width: 1024px) {
    font-size: 20px;
  }
}
p {
  margin: 0;
}

code,
.counter {
  font-family: var(--mono);
  display: inline-flex;
  border-radius: 4px;
  color: var(--text-h);
}

code {
  font-size: 15px;
  line-height: 135%;
  padding: 4px 8px;
  background: var(--code-bg);
}
/* ==========================================================
   Skeleton Loading
========================================================== */

.cf-skeleton {
  position: relative;
  display: block;
  max-width: 100%;
  overflow: hidden;
  background: #e8edf4;
}

.cf-skeleton::after {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.78),
    transparent
  );
  content: "";
  animation: cf-skeleton-shimmer 1.35s ease-in-out infinite;
}

.cf-skeleton-text {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cf-skeleton-card {
  display: flex;
  min-height: 150px;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
}

.cf-skeleton-table {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #e2e8f0;
}

.cf-skeleton-table-row {
  display: grid;
  align-items: center;
  gap: 18px;
  min-height: 48px;
  padding: 12px 14px;
  background: #ffffff;
}

@keyframes cf-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cf-skeleton::after {
    animation: none;
  }
}:root{
  /* Brand */
  --cf-brand:#2563eb;
  --cf-brand-dark:#1d4ed8;
  --cf-brand-soft:#eef3ff;

  /* Backgrounds */
  --cf-bg:#f8f9fb;
  --cf-surface:#ffffff;
  --cf-surface-soft:#f8fafc;

  /* Text */
  --cf-text:#111827;
  --cf-heading:#0f172a;
  --cf-muted:#6b7280;

  /* Borders */
  --cf-border:#e6eaf0;
  --cf-border-strong:#cbd5e1;

  /* Status */
  --cf-success:#16a34a;
  --cf-warning:#d97706;
  --cf-danger:#dc2626;
  --cf-info:#0284c7;

  /* Radius */
  --cf-radius-sm:8px;
  --cf-radius-md:12px;
  --cf-radius-lg:18px;
  --cf-radius-xl:24px;
  --cf-radius-full:999px;

  /* Shadows */
  --cf-shadow-sm:0 4px 12px rgba(15,23,42,.06);
  --cf-shadow-md:0 8px 24px rgba(15,23,42,.08);
  --cf-shadow-lg:0 24px 70px rgba(15,23,42,.18);

  /* Spacing */
  --cf-space-1:4px;
  --cf-space-2:8px;
  --cf-space-3:12px;
  --cf-space-4:16px;
  --cf-space-5:20px;
  --cf-space-6:24px;
  --cf-space-8:32px;
  --cf-space-10:40px;
  --cf-space-12:48px;

  /* Typography */
  --cf-font:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:var(--cf-font);
  background:var(--cf-bg);
  color:var(--cf-text);
}

h1,h2,h3,h4,p{
  margin-top:0;
}

button,
input,
select,
textarea{
  font-family:inherit;
}

img{
  max-width:100%;
  display:block;
}/* ==========================================================
   OPTIC DATA · Intelligence Platform Design System v1.0
   Core UI Components
========================================================== */

.cf-card{
  background:var(--cf-surface);
  border:1px solid var(--cf-border);
  border-radius:var(--cf-radius-lg);
  padding:var(--cf-space-6);
  box-shadow:var(--cf-shadow-sm);
}

.cf-card:hover{
  box-shadow:var(--cf-shadow-md);
}

.cf-btn{
  border:none;
  border-radius:var(--cf-radius-md);
  padding:12px 18px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

.cf-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.cf-btn-primary{
  background:var(--cf-brand);
  color:white;
}

.cf-btn-primary:hover{
  background:var(--cf-brand-dark);
}

.cf-btn-secondary{
  background:var(--cf-brand-soft);
  color:var(--cf-brand-dark);
}

.cf-btn-danger{
  background:var(--cf-danger);
  color:white;
}

.cf-badge{
  display:inline-flex;
  align-items:center;
  border-radius:var(--cf-radius-full);
  padding:5px 10px;
  font-size:12px;
  font-weight:800;
}

.cf-badge-default{
  background:#eef2ff;
  color:#3730a3;
}

.cf-badge-available{
  background:#dcfce7;
  color:#166534;
}

.cf-badge-sold,
.cf-badge-damaged{
  background:#fee2e2;
  color:#991b1b;
}

.cf-badge-held,
.cf-badge-grading,
.cf-badge-consignment{
  background:#fef3c7;
  color:#92400e;
}

.cf-empty-state{
  border:1px dashed var(--cf-border-strong);
  border-radius:var(--cf-radius-lg);
  padding:var(--cf-space-8);
  text-align:center;
  background:var(--cf-surface-soft);
}

.cf-empty-icon{
  width:56px;
  height:56px;
  margin:0 auto 16px;
  border-radius:var(--cf-radius-lg);
  display:grid;
  place-items:center;
  background:var(--cf-brand-soft);
  font-size:26px;
}

.cf-empty-state h3{
  color:var(--cf-heading);
  margin-bottom:8px;
}

.cf-empty-state p{
  color:var(--cf-muted);
  margin-bottom:18px;
}

.cf-spinner-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:var(--cf-muted);
  padding:var(--cf-space-6);
}

.cf-spinner{
  width:22px;
  height:22px;
  border:3px solid var(--cf-border);
  border-top-color:var(--cf-brand);
  border-radius:50%;
  animation:cf-spin .8s linear infinite;
}

@keyframes cf-spin{
  to{
    transform:rotate(360deg);
  }
}

.cf-toast-container{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:20000;
  width:min(360px, calc(100vw - 48px));
}

/* ============================================
   Toast
============================================ */

.cf-toast{
    border-radius:16px;
    padding:18px;
    box-shadow:0 14px 40px rgba(0,0,0,.18);
    animation:toastSlide .25s ease;
    color:white;
}

.cf-toast-success{
    background:#10b981;
}

.cf-toast-danger{
    background:#ef4444;
}

.cf-toast-warning{
    background:#f59e0b;
}

.cf-toast-title{
    font-weight:700;
    margin-bottom:6px;
}

.cf-toast-message{
    opacity:.95;
    font-size:14px;
}

@keyframes toastSlide{

    from{
        transform:translateY(20px);
        opacity:0;
    }

    to{
        transform:translateY(0);
        opacity:1;
    }

}/* ==========================================================
   OPTIC DATA · Intelligence Platform Design System
   Global Search Module
========================================================== */

.global-search{
    position:relative;
    width:420px;
}

.global-search input{
    width:100%;
    padding:14px 18px;
    border-radius:14px;
    border:1px solid #d9d9d9;
    background:#ffffff;
    color:#222;
    font-size:15px;
    outline:none;
    transition:.2s;
}

.global-search input:focus{
    border-color:#2d7dff;
    box-shadow:0 0 0 3px rgba(45,125,255,.15);
}

.search-results{
    position:absolute;
    top:58px;
    left:0;
    right:0;
    background:white;
    border-radius:14px;
    box-shadow:0 12px 40px rgba(0,0,0,.15);
    overflow:hidden;
    z-index:5000;
    max-height:450px;
    overflow-y:auto;
}

.search-result{
    display:flex;
    gap:14px;
    align-items:center;
    padding:12px;
    cursor:pointer;
    transition:.15s;
}

.search-result:hover{
    background:#f3f7ff;
}

.search-result img{
    width:48px;
    height:68px;
    object-fit:cover;
    border-radius:8px;
}

.search-result strong{
    display:block;
    color:#111;
}

.search-result p{
    margin:3px 0;
    color:#666;
}

.search-result small{
    color:#888;
}

.command-search-trigger{
    background:#ffffff;
    color:#111;
    border:1px solid #ddd;
    border-radius:14px;
    padding:12px 16px;
    min-width:260px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    font-weight:600;
}

.command-search-trigger span{
    background:#eef3ff;
    color:#2d7dff;
    padding:4px 8px;
    border-radius:8px;
    font-size:12px;
}

.command-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top:90px;
    z-index:10000;
}

.command-palette{
    width:min(720px,92vw);
    background:#ffffff;
    border-radius:22px;
    box-shadow:0 30px 90px rgba(0,0,0,.4);
    overflow:hidden;
}

.command-palette input{
    width:100%;
    padding:22px;
    border:none;
    border-bottom:1px solid #eee;
    font-size:20px;
    outline:none;
}

.command-results{
    max-height:520px;
    overflow-y:auto;
}

.command-result{
    width:100%;
    display:flex;
    gap:16px;
    align-items:center;
    padding:16px 20px;
    background:white;
    border:none;
    border-bottom:1px solid #f0f0f0;
    cursor:pointer;
    text-align:left;
}

.command-result:hover{
    background:#f4f8ff;
}

.command-result img{
    width:52px;
    height:74px;
    object-fit:cover;
    border-radius:9px;
}

.command-result strong{
    color:#111;
    display:block;
}

.command-result p{
    color:#555;
    margin:4px 0;
}

.command-result small,
.command-status{
    color:#777;
}

.command-status{
    padding:18px 22px;
}

.command-icon{
  width:52px;
  height:52px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:var(--cf-brand-soft);
  font-size:22px;
}/* ==========================================================
   OPTIC DATA · Intelligence Platform Design System
   Trading Cards Module
   Version: 3.0
========================================================== */

.cf-btn{
  border:none;
  border-radius:12px;
  padding:12px 18px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

.cf-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.cf-btn-primary{
  background:#2563eb;
  color:white;
}

.cf-btn-secondary{
  background:#eef3ff;
  color:#1d4ed8;
}

.cf-btn-danger{
  background:#dc2626;
  color:white;
}

.cf-card{
  background:#ffffff;
  border:1px solid #e6eaf0;
  border-radius:18px;
  padding:24px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}

.cf-field{
  display:block;
  margin-bottom:16px;
}

.cf-field span{
  display:block;
  color:#374151;
  font-size:13px;
  font-weight:700;
  margin-bottom:8px;
}

.cf-field input{
  width:100%;
  border:1px solid #d1d5db;
  border-radius:12px;
  padding:12px 14px;
  font-size:15px;
  color:#111827;
  background:white;
}

.cf-field input:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.cf-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:5px 10px;
  font-size:12px;
  font-weight:800;
}

.cf-badge-default{
  background:#eef2ff;
  color:#3730a3;
}

.cf-badge-available{
  background:#dcfce7;
  color:#166534;
}

.cf-badge-sold{
  background:#fee2e2;
  color:#991b1b;
}

.cf-badge-held,
.cf-badge-grading,
.cf-badge-consignment{
  background:#fef3c7;
  color:#92400e;
}

.cf-badge-damaged{
  background:#fee2e2;
  color:#991b1b;
}

.cf-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:12000;
  padding:24px;
}

.cf-modal{
  width:min(720px,96vw);
  background:white;
  border-radius:22px;
  box-shadow:0 30px 90px rgba(0,0,0,.35);
  overflow:hidden;
}

.cf-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 24px;
  border-bottom:1px solid #e6eaf0;
}

.cf-modal-header h2{
  color:#111827;
}

.cf-modal-header button{
  border:none;
  background:#f3f4f6;
  width:36px;
  height:36px;
  border-radius:50%;
  cursor:pointer;
  font-size:22px;
}

.cf-modal-body{
  padding:24px;
  color:#111827;
}

.cf-tabs{
  display:flex;
  gap:8px;
  background:#f1f5f9;
  padding:6px;
  border-radius:14px;
}

.cf-tabs button{
  border:none;
  background:transparent;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  color:#64748b;
}

.cf-tabs button.active{
  background:white;
  color:#2563eb;
  box-shadow:0 4px 12px rgba(15,23,42,.08);
}

.tc-v3-shell{
  display:grid;
  grid-template-columns:280px minmax(0, 1fr);
}

/* ==========================================================
   Card Browser
========================================================== */

.tc-card-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    height:calc(100vh - 185px);
    overflow-y:auto;
    padding:6px;
}

.tc-card-list-item{
    display:flex;
    align-items:center;
    gap:16px;
    width:100%;
    border:none;
    border-radius:18px;
    padding:14px;
    background:#ffffff;
    border:1px solid #e6ebf2;
    cursor:pointer;
    transition:.18s ease;
    text-align:left;
}

.tc-card-list-item:hover{
    transform:translateY(-2px);
    border-color:#3b82f6;
    box-shadow:0 12px 24px rgba(59,130,246,.15);
}

.tc-card-list-item.selected{
    border-color:#2563eb;
    background:#eef4ff;
    box-shadow:0 12px 26px rgba(37,99,235,.18);
}

.tc-card-thumb{
    width:82px;
    height:114px;
    border-radius:12px;
    overflow:hidden;
    background:#f3f4f6;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.tc-card-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.tc-card-thumb-placeholder{
    font-size:34px;
    opacity:.35;
}

.tc-card-list-content{
    flex:1;
    min-width:0;
}

.tc-card-name{
    display:block;
    font-size:17px;
    font-weight:800;
    color:#111827;
    margin-bottom:4px;
}

.tc-card-subtitle{
    font-size:14px;
    color:#64748b;
}

.tc-card-id{
    margin-top:8px;
    font-size:12px;
    color:#94a3b8;
    font-family:monospace;
}

.tc-card-footer{
    margin-top:12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.tc-card-price{
    font-size:18px;
    font-weight:800;
    color:#16a34a;
}

.tc-card-list-item:hover{
    transform:translateX(6px);
    border-color:#2563eb;
    box-shadow:0 12px 24px rgba(37,99,235,.12);
}

.tc-card-list-item.selected{
  border-color:#2563eb;
  background:#eef3ff;
}

.tc-card-thumb{
  width:72px;
  height:100px;
  border-radius:10px;
  background:#e5e7eb;
  overflow:hidden;
  display:grid;
  place-items:center;
}

.tc-card-thumb img,
.tc-image-box img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.tc-card-list-item strong{
  font-size:17px;
  margin-bottom:4px;
  display:block;
  color:#111827;
}

.tc-card-list-item span,
.tc-card-list-item small{
  display:block;
  color:#6b7280;
  margin-top:4px;
}

.tc-v3-inspector{
  min-height:620px;
}

.tc-v3-inspector-header{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-start;
  margin-bottom:20px;
}

.tc-image-manager{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:24px;
}

.tc-image-panel h4{
  color:#374151;
  margin-bottom:10px;
}

.tc-image-box{
  height:260px;
  border:2px dashed #d1d5db;
  border-radius:18px;
  background:#f8fafc;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#6b7280;
  margin-bottom:14px;
}

.tc-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:24px;
}

.tc-detail-grid div{
  background:#f8fafc;
  border:1px solid #e6eaf0;
  border-radius:16px;
  padding:14px;
}

.tc-detail-grid span{
  display:block;
  color:#6b7280;
  font-size:13px;
  margin-bottom:8px;
}

.tc-label-panel,
.tc-history-panel{
  margin-top:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.tc-history-item{
  width:100%;
  background:#f8fafc;
  border:1px solid #e6eaf0;
  border-radius:14px;
  padding:16px;
}

.tc-history-item span{
  display:block;
  color:#6b7280;
  margin-top:6px;
}

.tc-edit-form{
  max-width:620px;
  margin:24px auto 0;
}

.cf-field select{
  width:100%;
  border:1px solid #d1d5db;
  border-radius:12px;
  padding:12px 14px;
  font-size:15px;
  color:#111827;
  background:white;
}

.tc-form-actions{
  display:flex;
  gap:12px;
}

@media(max-width:1100px){
  .tc-v3-shell{
    grid-template-columns:1fr;
  }

  .tc-image-manager,
  .tc-detail-grid{
    grid-template-columns:1fr;
  }
}
/* ==========================================================
   Sprint 2.6 Professional Workspace
==========================================================*/

.tc-workspace{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.tc-hero{
  display:grid;
  grid-template-columns:420px 1fr;
  gap:24px;
  align-items:start;
}

.tc-photo-area{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.tc-photo-card{
  height:320px;
  background:#f8fafc;
  border:1px solid #e6eaf0;
  border-radius:18px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
}

.tc-photo-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,.10);
}

.tc-photo-card img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#fff;
}

.tc-photo-placeholder{
  color:#94a3b8;
  font-weight:700;
}

.tc-card-summary{
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:white;
  border-radius:22px;
  padding:28px;
}

.tc-card-summary h2{
  margin:10px 0;
  font-size:34px;
}

.tc-card-summary .muted{
  color:rgba(255,255,255,.75);
}

.tc-info-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.tc-info-card{
  background:white;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:22px;
  box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.tc-info-card h3{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  color:#0f172a;
}

.tc-detail-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid #edf2f7;
}

.tc-detail-row:last-child{
  border-bottom:none;
}

.tc-detail-label{
  display:flex;
  align-items:center;
  gap:10px;
  color:#64748b;
  font-weight:600;
}

.tc-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.tc-action-btn{
  border:none;
  background:#2563eb;
  color:white;
  border-radius:14px;
  padding:14px 22px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

.tc-action-btn:hover{
  transform:translateY(-2px);
  background:#1d4ed8;
  box-shadow:0 10px 24px rgba(37,99,235,.25);
}

@media(max-width:1200px){

.tc-hero{
grid-template-columns:1fr;
}

.tc-info-grid{
grid-template-columns:1fr;
}

.tc-photo-area{
grid-template-columns:1fr;
}

}
/* ---------- Detail Dashboard ---------- */

.tc-detail-hero{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:18px;
padding-bottom:16px;
border-bottom:1px solid #e5e7eb;
}

.tc-detail-dashboard{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-top:18px;
}

.tc-info-card{
background:#fff;
border:1px solid #e5e7eb;
border-radius:18px;
padding:18px;
box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.tc-info-header{
display:flex;
align-items:center;
gap:10px;
margin-bottom:14px;
font-weight:700;
color:#111827;
}

.tc-info-header h3{
margin:0;
font-size:18px;
}

.tc-info-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 0;
border-bottom:1px solid #edf0f5;
}

.tc-info-row:last-child{
border-bottom:none;
}

.tc-info-row span{
color:#64748b;
font-size:14px;
}

.tc-info-row strong{
color:#111827;
font-size:15px;
}
.tc-v3-inspector{
  min-width:0;
}

.tc-detail-dashboard{
  grid-template-columns:repeat(2,minmax(260px,1fr));
}

.tc-info-row{
  gap:16px;
}

.tc-info-row span{
  flex:0 0 120px;
}

.tc-info-row strong{
  text-align:right;
  overflow-wrap:anywhere;
}
/* Sprint 2.6 width correction */

.tc-v3-shell {
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
}

.tc-v3-inspector {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.tc-detail-panel {
  width: 100%;
  min-width: 0;
}

.tc-detail-dashboard {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tc-info-card {
  min-width: 0;
  box-sizing: border-box;
}

.tc-info-row span,
.tc-info-row strong {
  min-width: 0;
}

.tc-info-row strong {
  max-width: 55%;
  overflow-wrap: anywhere;
}

@media (max-width: 1250px) {
  .tc-v3-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .tc-detail-dashboard {
    grid-template-columns: 1fr;
  }
}
/* Fix cramped detail-card text */

.tc-detail-dashboard {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.tc-info-row {
  display: grid;
  grid-template-columns: minmax(85px, 1fr) minmax(90px, auto);
  gap: 12px;
  align-items: center;
}

.tc-info-row span {
  flex: initial;
  min-width: 0;
}

.tc-info-row strong {
  width: auto;
  max-width: none;
  min-width: 0;
  text-align: right;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 1050px) {
  .tc-detail-dashboard {
    grid-template-columns: 1fr;
  }
}
/* Sprint 2.6 inspector layout fix */

.tc-detail-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
}

.tc-info-card {
  width: 100%;
  min-width: 0;
}

.tc-info-row {
  grid-template-columns: 130px minmax(0, 1fr);
}

.tc-info-row strong {
  text-align: right;
  white-space: normal;
  overflow-wrap: break-word;
}
/* Hero Card */

.tc-card-title{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:22px;
padding-bottom:18px;
border-bottom:1px solid #e5e7eb;
}

.tc-card-code{
display:inline-block;
padding:6px 12px;
border-radius:999px;
background:#eef4ff;
color:#2563eb;
font-size:13px;
font-weight:700;
margin-bottom:10px;
letter-spacing:.04em;
}

.tc-card-title h1{
margin:0;
font-size:34px;
font-weight:800;
color:#111827;
line-height:1.1;
}

.tc-card-title p{
margin-top:8px;
font-size:18px;
color:#64748b;
}
.tc-card-summary{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:28px;
    padding-bottom:24px;
    border-bottom:1px solid #e8edf5;
}

.tc-summary-left h1{
    margin:8px 0 4px;
    font-size:42px;
    font-weight:800;
    color:#18212f;
}

.tc-summary-left p{
    color:#7b8798;
    font-size:18px;
}

.tc-summary-code{
    color:#3b82f6;
    font-weight:700;
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.tc-summary-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:18px;
}

.tc-summary-price{
    font-size:34px;
    font-weight:800;
    color:#16a34a;
}
/* Sprint 2.6 Image Workspace */

.tc-image-workspace {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}

.tc-image-workspace-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.tc-image-workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.tc-image-workspace-header span {
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tc-image-workspace-header h3 {
  margin: 3px 0 0;
  color: #111827;
  font-size: 19px;
}

.tc-image-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  padding: 8px 11px;
  background: #f8fafc;
  color: #2563eb;
  font-weight: 700;
  cursor: pointer;
}

.tc-image-workspace-frame {
  position: relative;
  display: grid;
  min-height: 390px;
  place-items: center;
  overflow: hidden;
  border: 2px dashed #cbd5e1;
  border-radius: 18px;
  background: #f8fafc;
  transition: 0.2s ease;
}

.tc-image-workspace-frame:hover {
  border-color: #2563eb;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.1);
}

.tc-image-workspace-frame.has-image {
  border-style: solid;
  border-color: #e2e8f0;
  background: #fff;
}

.tc-image-workspace-frame img {
  width: 100%;
  height: 390px;
  object-fit: contain;
  cursor: zoom-in;
}

.tc-image-expand-overlay {
  position: absolute;
  left: 50%;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  background: rgba(15, 23, 42, 0.86);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transition: 0.2s ease;
}

.tc-image-workspace-frame:hover
  .tc-image-expand-overlay {
  opacity: 1;
}

.tc-image-empty-state {
  display: grid;
  place-items: center;
  gap: 9px;
  padding: 30px;
  color: #94a3b8;
  text-align: center;
}

.tc-image-empty-state strong {
  color: #475569;
}

.tc-image-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  padding: 12px 16px;
  background: #eef3ff;
  color: #1d4ed8;
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s ease;
}

.tc-image-upload-btn:hover {
  background: #dfe9ff;
  transform: translateY(-1px);
}

@media (max-width: 1000px) {
  .tc-image-workspace {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================
   Workspace Header
========================================================== */

.tc-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:32px;
    margin-bottom:26px;
}

.tc-header-subtitle{
    margin-top:8px;
    color:#64748b;
    max-width:650px;
    line-height:1.5;
}

.tc-header-stats{
    display:flex;
    gap:18px;
}

.tc-stat{
    min-width:150px;
    padding:18px;
    background:white;
    border:1px solid #e5e7eb;
    border-radius:18px;
    text-align:center;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.tc-stat span{
    display:block;
    color:#64748b;
    font-size:13px;
    margin-bottom:8px;
}

.tc-stat strong{
    font-size:28px;
    color:#111827;
    font-weight:800;
}

@media (max-width:1100px){

    .tc-header{
        flex-direction:column;
    }

    .tc-header-stats{
        width:100%;
        display:grid;
        grid-template-columns:repeat(3,1fr);
    }
    .trading-card-qr-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.7);
}

.trading-card-qr-section p {
  margin: 6px 0 0;
}

.trading-card-qr-preview {
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 6px;
  background: #ffffff;
  border-radius: 8px;
}

.trading-card-qr-preview svg {
  width: 100%;
  height: 100%;
}

.trading-card-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

@media (max-width: 600px) {
  .trading-card-qr-section {
    align-items: flex-start;
    flex-direction: column;
  }
}

}
/* ==========================================================
   OPTIC PRE-RELEASE POLISH · Trading Cards History
   Keep History consistent with the dark Optic workspace.
========================================================== */
.tc-history-panel {
  width: 100%;
  align-items: stretch;
  color: #eaf2fb;
}

.tc-history-panel > h3 {
  width: 100%;
  margin: 0;
  color: #eaf2fb;
}

.tc-history-item {
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(135deg, rgba(18, 34, 52, 0.96), rgba(12, 25, 39, 0.96));
  border: 1px solid rgba(113, 138, 163, 0.28);
  border-radius: 14px;
  padding: 16px;
  color: #eaf2fb;
  box-shadow: none;
}

.tc-history-item strong {
  display: block;
  color: #eaf2fb;
}

.tc-history-item span {
  display: block;
  margin-top: 6px;
  color: #9fb2c6;
}


/* ==========================================================
   OPTIC PRE-RELEASE POLISH · Availability Status
   Bright green status badge with readable black text.
========================================================== */
.cf-badge-available,
.tc-card-list-item .cf-badge-available,
.tc-detail-panel .cf-badge-available,
.tc-v3-inspector .cf-badge-available,
.trading-card-detail .cf-badge-available {
  background: #39f07f !important;
  color: #000000 !important;
  border-color: #39f07f !important;
  box-shadow: 0 0 0 1px rgba(57, 240, 127, 0.18);
}

.cf-badge-available *,
.tc-detail-panel .cf-badge-available *,
.tc-v3-inspector .cf-badge-available * {
  color: #000000 !important;
}


/* ==========================================================
   OPTIC PRE-RELEASE POLISH · Availability Badge Text
========================================================== */
.tc-card-grid .cf-badge-available,
.tc-card-grid .cf-badge-available span,
.tc-card-grid .cf-badge-available strong,
.tc-card-grid [class*="badge"][class*="available"],
.tc-card-grid [class*="badge"][class*="available"] span,
.tc-card-grid [class*="status"][class*="available"],
.tc-card-grid [class*="status"][class*="available"] span,
.tc-v3-inspector [class*="available"],
.tc-v3-inspector [class*="available"] span,
.tc-detail-panel [class*="available"],
.tc-detail-panel [class*="available"] span {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}


/* ==========================================================
   OPTIC PRE-RELEASE POLISH · Card List Available Badges
   Match the readable black text used in Details.
========================================================== */
.tc-card-list-item [class*="available"],
.tc-card-list-item [class*="available"] *,
.tc-card-list [class*="available"],
.tc-card-list [class*="available"] *,
.tc-v3-card-list [class*="available"],
.tc-v3-card-list [class*="available"] * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}
/* ==========================================================
   Dashboard Control Center v2
========================================================== */

.dashboard-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.dashboard-banner h1 {
  margin: 0;
  color: var(--cf-text);
  font-size: 2rem;
}

.dashboard-banner p {
  margin-top: 8px;
  color: var(--cf-muted);
}

.dashboard-date {
  color: var(--cf-primary);
  font-weight: 700;
}

.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

.dashboard-stat-card {
  text-align: center;
}

.dashboard-stat-card p {
  color: var(--cf-muted);
  margin-bottom: 12px;
}

.dashboard-stat-card h2 {
  font-size: 2.4rem;
  margin: 0;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, .9fr);
  gap: 24px;
  margin-top: 24px;
  align-items: start;
}

.dashboard-left-column,
.dashboard-right-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dashboard-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.dashboard-action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.dashboard-action-grid .cf-btn {
  height: 58px;
  font-size: 15px;
}

.dashboard-recent-list,
.dashboard-activity-list,
.dashboard-snapshot-list,
.dashboard-task-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

.dashboard-recent-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--cf-border);
  border-radius: 14px;
  background: #f8fafc;
}

.dashboard-thumb {
  width: 56px;
  height: 78px;
  border-radius: 10px;
  background: #e5e7eb;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.dashboard-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard-card-info strong {
  display: block;
  color: var(--cf-text);
}

.dashboard-card-info span {
  display: block;
  margin-top: 4px;
  color: var(--cf-muted);
  font-size: 13px;
}

.dashboard-activity-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--cf-border);
  border-radius: 14px;
  background: #f8fafc;
}

.activity-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #eef3ff;
  font-size: 22px;
}

.dashboard-activity-item strong,
.dashboard-task-item strong,
.dashboard-snapshot-item strong {
  color: var(--cf-text);
}

.dashboard-activity-item p,
.dashboard-activity-item span,
.dashboard-snapshot-item span {
  color: var(--cf-muted);
  font-size: 13px;
}

.dashboard-snapshot-item {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--cf-border);
  border-radius: 14px;
  background: #f8fafc;
}

.dashboard-task-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--cf-border);
  border-radius: 14px;
  background: #f8fafc;
}

.dashboard-task-item span {
  color: var(--cf-primary);
}

@media (max-width: 1000px) {
  .dashboard-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .dashboard-layout {
    grid-template-columns: 1fr;
  }
}
.executive-revenue-svg {
  display: block;
  width: 100%;
  height: 250px;
  overflow: visible;
}

.executive-chart-grid-line {
  stroke: #e2e8f0;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.executive-chart-axis-label {
  fill: #64748b;
  font-size: 11px;
}

.executive-chart-line {
  fill: none;
  stroke: #2563eb;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.executive-chart-point {
  fill: #2563eb;
  stroke: #ffffff;
  stroke-width: 2;
}
.workspace-selected-card {
  margin-top: 8px;
}

.workspace-selected-card h3 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.workspace-selected-card p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

/* Keep your existing dashboard.css above this section. */

/* ==========================================================
   Sprint 3.4 — Executive AI Inventory Command Center
========================================================== */

.executive-ai-command-center {
  margin: 24px 0;
  padding: 24px;
  border: 1px solid #cbd5e1;
  border-radius: 22px;
  background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 34%), linear-gradient(145deg, #ffffff, #f8fafc);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.executive-ai-command-header { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 22px; }
.executive-ai-command-header h2 { margin: 4px 0 8px; color: #0f172a; font-size: clamp(1.35rem, 2vw, 2rem); }
.executive-ai-health-score { min-width: 190px; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; padding: 18px; border: 1px solid #bfdbfe; border-radius: 18px; background: #eff6ff; color: #1d4ed8; }
.executive-ai-health-score svg { grid-row: 1 / span 2; }
.executive-ai-health-score span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.executive-ai-health-score strong { color: #0f172a; font-size: 30px; }
.executive-ai-health-score small { font-size: 14px; color: #64748b; }
.executive-ai-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.executive-ai-kpi-grid article { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; align-items: center; padding: 16px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; }
.executive-ai-kpi-grid article svg { grid-row: 1 / span 3; color: #2563eb; }
.executive-ai-kpi-grid span { color: #64748b; font-size: 12px; font-weight: 700; }
.executive-ai-kpi-grid strong { color: #0f172a; font-size: 22px; }
.executive-ai-kpi-grid small { color: #94a3b8; font-size: 11px; }
.executive-ai-command-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.executive-ai-list-panel > header { display: flex; gap: 11px; align-items: center; margin-bottom: 16px; }
.executive-ai-list-panel > header svg { color: #2563eb; }
.executive-ai-list-panel > header span { color: #64748b; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.executive-ai-list-panel > header h3 { margin: 2px 0 0; color: #0f172a; }
.executive-ai-recommendation-list, .executive-ai-card-list, .executive-ai-risk-list { display: flex; flex-direction: column; gap: 10px; }
.executive-ai-recommendation-list > div { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; padding: 12px; border: 1px solid #e2e8f0; border-radius: 13px; background: #f8fafc; }
.executive-ai-recommendation-list p { margin: 4px 0 0; color: #64748b; font-size: 13px; line-height: 1.45; }
.executive-ai-priority { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #dbeafe; color: #1d4ed8; font-size: 12px; font-weight: 900; }
.executive-ai-priority-success { background: #dcfce7; color: #15803d; }
.executive-ai-priority-warning { background: #fef3c7; color: #b45309; }
.executive-ai-card-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #e2e8f0; }
.executive-ai-card-list > div:last-child { border-bottom: 0; }
.executive-ai-card-list > div > div:last-child { text-align: right; }
.executive-ai-card-list span { display: block; margin-top: 3px; color: #64748b; font-size: 12px; }
.executive-ai-risk-list > div { display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: start; }
.executive-ai-risk-list p { margin: 0; color: #475569; font-size: 13px; line-height: 1.5; }
.executive-ai-risk-dot { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: #f59e0b; }
.executive-ai-risk-danger { background: #dc2626; }
.executive-ai-risk-success { background: #16a34a; }

@media (max-width: 1100px) {
  .executive-ai-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .executive-ai-command-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .executive-ai-command-center { padding: 16px; }
  .executive-ai-command-header { flex-direction: column; }
  .executive-ai-health-score { width: 100%; }
  .executive-ai-kpi-grid { grid-template-columns: 1fr; }
}/* ==========================================================
   OPTIC DATA · Intelligence Platform Inventory Table v1
========================================================== */

.inventory-table-card{
  overflow:hidden;
  padding:0;
}

.inventory-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}

.inventory-table thead{
  background:var(--cf-surface-soft);
}

.inventory-table th{
  padding:16px;
  text-align:left;
  color:var(--cf-muted);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  border-bottom:1px solid var(--cf-border);
  letter-spacing:.04em;
}

.inventory-table td{
  padding:16px;
  border-bottom:1px solid var(--cf-border);
  color:var(--cf-text);
  vertical-align:middle;
}

.inventory-table tbody tr{
  transition:background .2s ease;
}

.inventory-table tbody tr:hover{
  background:var(--cf-brand-soft);
}

.inventory-table tbody tr:last-child td{
  border-bottom:none;
}

.inventory-empty{
  text-align:center;
  padding:60px 20px;
}

/* Small image / QR columns */

.inventory-table th:first-child,
.inventory-table td:first-child{
  width:70px;
  text-align:center;
}

.inventory-table th:nth-child(2),
.inventory-table td:nth-child(2){
  width:70px;
  text-align:center;
}

/* Value column */

.inventory-table td:last-child{
  text-align:right;
  font-weight:700;
}

/* Responsive */

@media (max-width: 1000px){

  .inventory-table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }

}

.inventory-table th{
  user-select:none;
}

.inventory-table th:nth-child(n+3){
  cursor:pointer;
}

.inventory-table th:nth-child(n+3):hover{
  color:var(--cf-brand);
}

.inventory-row{
  cursor:pointer;
  transition:all .18s ease;
}

.inventory-row:hover{
  transform:translateY(-1px);
  box-shadow:inset 4px 0 0 var(--cf-brand);
}

.inventory-row{
  cursor:pointer;
  transition:all .18s ease;
}

.inventory-row:hover{
  transform:translateY(-1px);
  box-shadow:inset 4px 0 0 var(--cf-brand);
}

.inventory-detail-panel{
  position:fixed;
  top:0;
  right:0;
  width:min(520px, 94vw);
  height:100vh;
  background:var(--cf-surface);
  border-left:1px solid var(--cf-border);
  box-shadow:var(--cf-shadow-lg);
  z-index:9000;
  padding:24px;
  overflow-y:auto;
}

.inventory-detail-header{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px;
}

.inventory-detail-close{
  border:none;
  background:#f3f4f6;
  width:38px;
  height:38px;
  border-radius:50%;
  cursor:pointer;
  font-size:24px;
}

.inventory-detail-images{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:24px;
}

.inventory-detail-images span,
.inventory-detail-grid span{
  display:block;
  color:var(--cf-muted);
  font-size:13px;
  margin-bottom:8px;
}

.inventory-detail-image{
  height:220px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid var(--cf-border);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.inventory-detail-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.inventory-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.inventory-detail-grid div{
  background:#f8fafc;
  border:1px solid var(--cf-border);
  border-radius:14px;
  padding:14px;
}

.inventory-detail-actions{
  display:flex;
  gap:12px;
  margin-top:24px;
}

.inventory-detail-tab{
  margin-top:20px;
}

.inventory-placeholder-panel{
  border:1px dashed var(--cf-border-strong);
  border-radius:16px;
  padding:24px;
  background:#f8fafc;
}

.inventory-placeholder-panel h3{
  color:var(--cf-heading);
  margin-bottom:8px;
}

.inventory-placeholder-panel p{
  color:var(--cf-muted);
  margin:0;
}

/* ==========================================================
   Card Workspace v2
========================================================== */

.card-workspace-v2{
  width:min(620px, 96vw);
  padding:0;
}

.card-workspace-header{
  position:relative;
  padding:28px;
  border-bottom:1px solid var(--cf-border);
  background:linear-gradient(135deg, #ffffff, #f8fafc);
}

.card-workspace-header h2{
  color:var(--cf-heading);
  margin-bottom:6px;
}

.card-workspace-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

.card-workspace-meta span{
  color:var(--cf-muted);
  font-size:13px;
  font-weight:700;
}

.card-workspace-meta strong{
  color:var(--cf-success);
}

.card-workspace-v2 .inventory-detail-close{
  position:absolute;
  top:20px;
  right:20px;
}

.card-workspace-v2 .cf-tabs{
  margin:20px 24px 0;
}

.card-workspace-body{
  padding:24px;
}

.card-workspace-v2 .inventory-detail-tab{
  margin-top:0;
}

.card-workspace-v2 .inventory-detail-images{
  gap:20px;
}

.card-workspace-image-block{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.card-workspace-upload{
  justify-content:center;
  text-align:center;
}

@media(max-width:700px){
  .card-workspace-v2{
    width:100vw;
  }

  .card-workspace-v2 .inventory-detail-images{
    grid-template-columns:1fr;
  }
}

.pos-layout{
  display:grid;
  grid-template-columns:1.5fr .8fr;
  gap:24px;
  margin-top:24px;
}

.pos-result-list,
.pos-cart-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.pos-result-item,
.pos-cart-item{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  padding:14px;
  border:1px solid var(--cf-border);
  border-radius:14px;
  background:#f8fafc;
}

.pos-result-item span,
.pos-cart-item span{
  display:block;
  color:var(--cf-muted);
  margin-top:4px;
}

.pos-cart-total{
  display:flex;
  justify-content:space-between;
  margin:20px 0;
  padding-top:16px;
  border-top:1px solid var(--cf-border);
}

@media(max-width:1000px){
  .pos-layout{
    grid-template-columns:1fr;
  }
}

.pos-remove-btn{
  border:none;
  background:#fee2e2;
  color:#991b1b;
  width:32px;
  height:32px;
  border-radius:50%;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}

.pos-remove-btn:hover{
  background:#fecaca;
}

.pos-checkout-summary{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:20px 0;
  padding-top:16px;
  border-top:1px solid var(--cf-border);
}

.pos-checkout-summary div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.pos-checkout-summary span{
  color:var(--cf-muted);
}

.pos-checkout-summary input{
  width:100px;
  border:1px solid var(--cf-border);
  border-radius:10px;
  padding:8px 10px;
  text-align:right;
}

.pos-grand-total{
  border-top:1px solid var(--cf-border);
  padding-top:14px;
  margin-top:6px;
}

.pos-grand-total strong{
  font-size:1.4rem;
  color:var(--cf-success);
}

.pos-payment-methods{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
}

.pos-payment-methods label{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--cf-text);
}

/* ==========================================================
   POS Receipt
========================================================== */

.pos-receipt{
  max-width:420px;
  margin:28px auto 0;
  text-align:center;
}

.pos-receipt-header{
  border-bottom:1px dashed var(--cf-border-strong);
  padding-bottom:18px;
  margin-bottom:18px;
}

.pos-receipt-header h2{
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:8px;
}

.pos-receipt-header p,
.pos-receipt-header span,
.pos-receipt-payment{
  color:var(--cf-muted);
}

.pos-receipt-items,
.pos-receipt-totals{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:18px;
}

.pos-receipt-item,
.pos-receipt-totals div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  text-align:left;
}

.pos-receipt-grand-total{
  border-top:1px dashed var(--cf-border-strong);
  padding-top:14px;
  margin-top:6px;
  font-size:1.2rem;
}

.pos-receipt-grand-total strong{
  color:var(--cf-success);
}

.pos-receipt button{
  width:100%;
  margin-top:16px;
}
/* Inventory table base — column widths are owned by InventoryTable.jsx colgroup */
.inventory-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.inventory-table th,
.inventory-table td {
  box-sizing: border-box;
  vertical-align: middle;
}

.inventory-thumbnail {
  display: grid;
  width: 42px;
  height: 58px;
  overflow: hidden;
  place-items: center;
  border: 1px solid #dbe3ef;
  border-radius: 7px;
  background: #f8fafc;
}

.inventory-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inventory-thumbnail-empty {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
}

.inventory-table tbody tr {
  min-height: 74px;
}

/* ==========================================================
   Inventory Bulk Selection
========================================================== */

.inventory-select-column {
  width: 48px !important;
  text-align: center !important;
}

.inventory-select-column input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #2563eb;
}

.inventory-row-selected {
  background: #eff6ff !important;
  box-shadow: inset 3px 0 0 #2563eb;
}

.inventory-bulk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
  padding: 14px 16px;
}

.inventory-bulk-toolbar > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.inventory-bulk-toolbar strong {
  color: #0f172a;
  font-size: 14px;
}

.inventory-bulk-toolbar span {
  color: #64748b;
  font-size: 11px;
}

.inventory-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inventory-bulk-actions button {
  min-height: 38px;
}

.label-modal-bulk {
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.bulk-label-print-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.bulk-label-print-item {
  min-width: 0;
}

@media (max-width: 900px) {
  .inventory-bulk-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .inventory-bulk-actions {
    width: 100%;
  }

  .inventory-bulk-actions button {
    flex: 1;
  }

  .bulk-label-print-grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================
   Inventory Statistics Bar
========================================================== */

.inventory-stats-bar {
  display: grid;
  grid-template-columns:
    repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.inventory-stat-item {
  display: grid;
  grid-template-columns:
    38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 82px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #ffffff;
}

.inventory-stat-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background: #dbeafe;
  color: #2563eb;
}

.inventory-stat-item span {
  display: block;
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.inventory-stat-item strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #0f172a;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-stat-green
  .inventory-stat-icon {
  background: #dcfce7;
  color: #15803d;
}

.inventory-stat-emerald
  .inventory-stat-icon {
  background: #d1fae5;
  color: #047857;
}

.inventory-stat-slate
  .inventory-stat-icon {
  background: #e2e8f0;
  color: #475569;
}

.inventory-stat-amber
  .inventory-stat-icon {
  background: #fef3c7;
  color: #d97706;
}

.inventory-stat-violet
  .inventory-stat-icon {
  background: #ede9fe;
  color: #7c3aed;
}

@media (max-width: 1200px) {
  .inventory-stats-bar {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .inventory-stats-bar {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 440px) {
  .inventory-stats-bar {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================
   Inventory Final Beta Polish
========================================================== */

.inventory-loading-skeleton {
  overflow: hidden;
  padding: 0;
}

.inventory-skeleton-header,
.inventory-skeleton-row {
  display: grid;
  grid-template-columns:
    48px 72px 50px 150px
    130px minmax(190px, 1fr)
    110px 105px 130px;
  align-items: center;
  gap: 0;
  min-width: 990px;
  padding: 12px 18px;
}

.inventory-skeleton-header {
  min-height: 48px;
  border-bottom: 1px solid #e2e8f0;
}

.inventory-skeleton-row {
  min-height: 76px;
  border-bottom: 1px solid #edf1f6;
}

.inventory-skeleton-heading,
.inventory-skeleton-cell {
  width: 72%;
  height: 12px;
}

.inventory-skeleton-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.inventory-skeleton-image {
  width: 42px;
  height: 58px;
  border-radius: 7px;
}

.inventory-empty-actions {
  display: flex;
  justify-content: center;
  padding: 0 0 24px;
}

.inventory-row-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0.55;
  transition: opacity 0.16s ease;
}

.inventory-row:hover
  .inventory-row-actions,
.inventory-row:focus-within
  .inventory-row-actions {
  opacity: 1;
}

.inventory-row-actions button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #dbe3ef;
  border-radius: 9px;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.inventory-row-actions button:hover {
  transform: translateY(-1px);
  border-color: #93c5fd;
  background: #eff6ff;
  color: #2563eb;
}

@media (max-width: 900px) {
  .inventory-row-actions {
    opacity: 1;
  }
}

/* ==========================================================
   POS Search Results · Beta Polish
========================================================== */

.pos-search {
  min-width: 0;
}

.pos-search-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.pos-search-input > svg {
  position: absolute;
  left: 15px;
  z-index: 2;
  color: #64748b;
  pointer-events: none;
}

.pos-search-input .cf-field {
  width: 100%;
  margin: 0;
}

.pos-search-input input {
  width: 100%;
  min-height: 48px;
  padding: 12px 46px 12px 44px;
  border: 1px solid #dbe3ef;
  border-radius: 13px;
  background: #ffffff;
  color: #0f172a;
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.pos-search-input input::placeholder {
  color: #94a3b8;
}

.pos-search-input input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.pos-search-clear {
  position: absolute;
  right: 12px;
  z-index: 3;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #e2e8f0;
  color: #475569;
  cursor: pointer;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.pos-search-clear:hover {
  transform: scale(1.04);
  background: #cbd5e1;
  color: #0f172a;
}

.pos-result-count {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.pos-result-list {
  max-height: 580px;
  margin-top: 18px;
  padding-right: 4px;
  overflow-y: auto;
}

.pos-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.pos-result-item:hover {
  transform: translateY(-1px);
  border-color: #93c5fd;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.pos-result-details {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.pos-result-details strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-result-details span {
  display: block;
  margin: 0;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.pos-result-details small {
  display: block;
  overflow: hidden;
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-result-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

.pos-result-price {
  min-width: 72px;
  color: #15803d;
  font-size: 16px;
  font-weight: 900;
  text-align: right;
}

.pos-result-actions button {
  min-width: 62px;
  min-height: 38px;
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 800;
}

.pos-result-actions button:hover {
  border-color: #60a5fa;
  background: #dbeafe;
  color: #1e40af;
}

.pos-search-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 30px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
  color: #64748b;
  text-align: center;
}

.pos-search-empty strong

/* ==========================================================
   Point of Sale · Complete Visibility Repair
========================================================== */

.pos-page {
  width: 100%;
  min-width: 0;
  color: #0f172a;
}

.pos-workspace-header {
  padding: 24px;
  border: 1px solid #dbe3ef;
  border-radius: 18px;
  background: #ffffff;
  color: #0f172a;
}

.pos-workspace-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.pos-workspace-heading h2 {
  margin: 4px 0 8px;
  color: #0f172a;
  font-size: 28px;
  font-weight: 800;
}

.pos-workspace-heading .muted {
  margin: 0;
  color: #64748b;
}

.pos-register-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
}

.pos-register-status strong {
  color: #166534;
}

.pos-register-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}

.pos-workspace-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.pos-workspace-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  color: #2563eb;
}

.pos-workspace-stat div {
  min-width: 0;
}

.pos-workspace-stat span {
  display: block;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pos-workspace-stat strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #0f172a;
  font-size: 17px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Main search and cart columns */

.pos-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(340px, 0.75fr);
  align-items: start;
  gap: 22px;
  margin-top: 22px;
}

.pos-layout > * {
  min-width: 0;
}

/*
  Keeps the checkout cart visible while the
  inventory search results scroll.
*/
.pos-layout > :nth-child(2) {
  position: sticky;
  top: 20px;
  color: #0f172a;
}

.pos-search,
.pos-cart {
  color: #0f172a;
}

.pos-search h2,
.pos-cart h2,
.pos-search strong,
.pos-cart strong {
  color: #0f172a;
}

.pos-search .muted,
.pos-cart .muted {
  color: #64748b;
}

/* Cart list visibility */

.pos-cart-list {
  max-height: 340px;
  overflow-y: auto;
}

.pos-cart-item {
  border: 1px solid #dbe3ef;
  background: #ffffff;
  color: #0f172a;
}

.pos-cart-item strong {
  color: #0f172a;
}

.pos-cart-item span,
.pos-cart-item small {
  color: #64748b;
}

/* Checkout totals */

.pos-checkout-summary,
.pos-checkout-summary span,
.pos-checkout-summary strong,
.pos-payment-methods,
.pos-payment-methods label {
  color: #0f172a;
}

.pos-checkout-summary span {
  color: #64748b;
}

.pos-checkout-summary input {
  background: #ffffff;
  color: #0f172a;
}

/* Completed-sale receipt */

.pos-receipt {
  max-width: 520px;
  margin: 30px auto 0;
  padding: 26px;
  border: 1px solid #dbe3ef;
  border-radius: 18px;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.pos-receipt h2,
.pos-receipt strong,
.pos-receipt-item,
.pos-receipt-totals,
.pos-receipt-grand-total {
  color: #0f172a;
}

.pos-receipt p,
.pos-receipt span,
.pos-receipt-payment {
  color: #64748b;
}

.pos-receipt-grand-total strong {
  color: #15803d;
}

/* Responsive */

@media (max-width: 1050px) {
  .pos-workspace-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .pos-layout {
    grid-template-columns: 1fr;
  }

  .pos-layout > :nth-child(2) {
    position: static;
  }
}

@media (max-width: 650px) {
  .pos-workspace-heading {
    flex-direction: column;
  }

  .pos-workspace-stats {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   OPTIC PRE-RELEASE POLISH · Inventory Location Column
   Keep long location labels compact so they do not increase
   row height or carry into the row below.
========================================================== */
.inventory-table tbody td:nth-child(9) {
  overflow: hidden;
  font-size: 11px !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}


/* ==========================================================
   OPTIC PRE-RELEASE POLISH · Inventory Row Separators
   The inventory table is rendered as a CSS grid with
   display: contents rows. Native cell borders can appear
   broken between grid columns, so draw the separator as a
   full-width bottom background on every cell instead.
========================================================== */
.inventory-table tbody td {
  border-bottom: 0 !important;
  background-image: linear-gradient(
    to bottom,
    transparent calc(100% - 1px),
    rgba(76, 111, 142, 0.34) calc(100% - 1px)
  ) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

.inventory-table tbody tr:last-child td {
  background-image: none !important;
}


/* ==========================================================
   OPTIC PRE-RELEASE POLISH · Location Single-Line Repair
========================================================== */
.inventory-table th:nth-child(9),
.inventory-table td:nth-child(9) {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.inventory-table tbody td:nth-child(9) {
  overflow: hidden !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}


/* ==========================================================
   OPTIC PRE-RELEASE POLISH · Fixed Inventory Table Geometry
   User-entered content must adapt to the table. It must never
   resize columns or increase row height.
========================================================== */

/* Lock the 13 inventory columns to fixed widths. */
.inventory-table {
  grid-template-columns:
    40px   /* Select */
    55px   /* Image */
    75px   /* Player / Product */
    55px   /* Year */
    130px  /* Mfg. */
    200px  /* Set */
    90px   /* Parallel */
    80px   /* Status */
    105px  /* Location */
    70px   /* Value */
    70px   /* Price */
    110px  /* Sales Platform */
    85px   /* Actions */ !important;
  width: 1165px !important;
  min-width: 1165px !important;
  max-width: 1165px !important;
}

/* Keep every inventory record the same height. */
.inventory-table tbody td {
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  overflow: hidden !important;
  vertical-align: middle !important;
}

/* Long user-entered fields stay inside their assigned column. */
.inventory-table tbody td:nth-child(5),
.inventory-table tbody td:nth-child(6),
.inventory-table tbody td:nth-child(7),
.inventory-table tbody td:nth-child(9),
.inventory-table tbody td:nth-child(12) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Player/product name may be long, but the column never grows. */
.inventory-table tbody td:nth-child(3) {
  overflow: hidden !important;
}

.inventory-table tbody td:nth-child(3) strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Preserve the small inventory code beneath the player/product name. */
.inventory-table tbody td:nth-child(3) small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Location should be compact but readable inside its fixed column. */
.inventory-table tbody td:nth-child(9) {
  font-size: 10px !important;
  line-height: 1.1 !important;
}

/* Header geometry follows the same locked columns. */
.inventory-table th,
.inventory-table td {
  min-width: 0 !important;
}

/* Do not let children force a grid track wider. */
.inventory-table td > *,
.inventory-table th > * {
  min-width: 0 !important;
  max-width: 100%;
}
/* ==========================================================
   Live QR Camera Scanner
========================================================== */

.camera-scanner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.camera-scanner-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.camera-scanner-controls button,
.camera-scanner-manual button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.camera-scanner-preview {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 320px;
  overflow: hidden;
  place-items: center;
  border: 1px solid #475569;
  border-radius: 15px;
  background: #080f1c;
}

.camera-scanner-preview video {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.camera-scanner-placeholder {
  display: flex;
  max-width: 310px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px;
  color: #cbd5e1;
  text-align: center;
}

.camera-scanner-placeholder span {
  font-size: 12px;
  line-height: 1.5;
}

.camera-scanner-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      rgba(2, 6, 23, 0.55),
      rgba(2, 6, 23, 0.55)
    );
  pointer-events: none;
}

.camera-qr-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(220px, 62%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

.camera-qr-frame > span {
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: #22c55e;
  border-style: solid;
}

.camera-qr-frame > span:nth-child(1) {
  top: -2px;
  left: -2px;
  border-width: 4px 0 0 4px;
}

.camera-qr-frame > span:nth-child(2) {
  top: -2px;
  right: -2px;
  border-width: 4px 4px 0 0;
}

.camera-qr-frame > span:nth-child(3) {
  right: -2px;
  bottom: -2px;
  border-width: 0 4px 4px 0;
}

.camera-qr-frame > span:nth-child(4) {
  bottom: -2px;
  left: -2px;
  border-width: 0 0 4px 4px;
}

.camera-qr-scan-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #22c55e;
  transform: translate(-50%, -50%);
}

.camera-scanner-status {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-height: 42px;
  padding: 11px 12px;
  border: 1px solid #334155;
  border-radius: 11px;
  background: #111c2d;
  color: #dbeafe;
  font-size: 11px;
  line-height: 1.45;
}

.camera-scanner-status-found {
  border-color: #22c55e;
  background: #052e1a;
  color: #bbf7d0;
}

.camera-scanner-last-code {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  color: #cbd5e1;
  font-size: 11px;
}

.camera-scanner-last-code strong {
  color: #ffffff;
}

.camera-scanner-manual {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.camera-scanner-manual label {
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 800;
}

.camera-scanner-manual > div {
  display: flex;
  gap: 8px;
}

.camera-scanner-manual input {
  min-width: 0;
  flex: 1;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid #475569;
  border-radius: 10px;
  background: #0f172a;
  color: #ffffff;
}

.camera-scanner-manual input::placeholder {
  color: #94a3b8;
}

@media (max-width: 600px) {
  .camera-scanner-manual > div {
    flex-direction: column;
  }

  .camera-scanner-manual button {
    width: 100%;
  }
}
/* ==========================================================
   QR Inventory Scanner
========================================================== */

.qr-scanner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qr-scanner-controls {
  display: flex;
  gap: 10px;
}

.qr-scanner-controls button,
.qr-scanner-manual button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.qr-scanner-preview {
  position: relative;
  display: grid;
  min-height: 320px;
  overflow: hidden;
  place-items: center;
  border: 1px solid #475569;
  border-radius: 15px;
  background: #080f1c;
}

.qr-scanner-preview video {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.qr-scanner-placeholder {
  display: flex;
  max-width: 300px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px;
  color: #cbd5e1;
  text-align: center;
}

.qr-scanner-placeholder span {
  font-size: 12px;
  line-height: 1.5;
}

.qr-scanner-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(220px, 65%);
  aspect-ratio: 1;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 4px solid #22c55e;
  border-radius: 16px;
  color: #22c55e;
  box-shadow:
    0 0 0 999px rgba(2, 6, 23, 0.5);
  pointer-events: none;
}

.qr-scanner-status {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-height: 42px;
  padding: 11px 12px;
  border: 1px solid #334155;
  border-radius: 11px;
  background: #111c2d;
  color: #dbeafe;
  font-size: 11px;
}

.qr-scanner-status-found {
  border-color: #22c55e;
  background: #052e1a;
  color: #bbf7d0;
}

.qr-scanner-manual {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.qr-scanner-manual label {
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 800;
}

.qr-scanner-manual > div {
  display: flex;
  gap: 8px;
}

.qr-scanner-manual input {
  min-width: 0;
  min-height: 40px;
  flex: 1;
  padding: 9px 11px;
  border: 1px solid #475569;
  border-radius: 10px;
  background: #0f172a;
  color: #ffffff;
}

.qr-scanner-parsed {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  color: #94a3b8;
  font-size: 10px;
}

.qr-scanner-parsed strong {
  color: #ffffff;
}

@media (max-width: 600px) {
  .qr-scanner-manual > div {
    flex-direction: column;
  }

  .qr-scanner-manual button {
    width: 100%;
  }
}/* ==========================================================
   OPTIC DATA · Authentication Experience v3
========================================================== */

.optic-auth-page,
.optic-login-page,
.optic-signup-page {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 28px;
  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(37, 99, 235, .24),
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 82%,
      rgba(14, 165, 233, .14),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #050b15 0%,
      #091423 48%,
      #07111f 100%
    );
}

.optic-auth-page *,
.optic-login-page *,
.optic-signup-page * {
  box-sizing: border-box;
}

.optic-auth-orb {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .24;
  pointer-events: none;
}

.optic-auth-orb-one {
  top: -220px;
  left: -180px;
  background: #2563eb;
}

.optic-auth-orb-two {
  right: -180px;
  bottom: -240px;
  background: #0ea5e9;
}

.optic-auth-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(360px, .9fr)
    minmax(440px, 1.1fr);
  width: min(1080px, 100%);
  min-height: 650px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 28px;
  background: #ffffff;
  box-shadow:
    0 40px 120px rgba(0, 0, 0, .42);
}

.optic-login-shell {
  min-height: 590px;
  width: min(980px, 100%);
}

.optic-auth-story {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 38px;
  padding: 42px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(96, 165, 250, .18),
      transparent 34%
    ),
    linear-gradient(
      155deg,
      #07111f 0%,
      #0d1b2e 55%,
      #10233d 100%
    );
  color: #ffffff;
}

.optic-auth-story::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(96, 165, 250, .14);
  border-radius: 50%;
  box-shadow:
    0 0 0 40px rgba(96, 165, 250, .03),
    0 0 0 90px rgba(96, 165, 250, .02);
}

.optic-auth-logo {
  display: block;
  width: 132px !important;
  max-width: 132px !important;
  height: auto !important;
  max-height: 72px !important;
  object-fit: contain;
}

.optic-auth-logo-light {
  filter:
    drop-shadow(
      0 6px 18px
      rgba(37, 99, 235, .18)
    );
}

.optic-auth-story-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 28px;
  padding: 7px 10px;
  border: 1px solid rgba(147, 197, 253, .22);
  border-radius: 999px;
  background: rgba(37, 99, 235, .12);
  color: #bfdbfe;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.optic-auth-story h1 {
  max-width: 520px;
  margin: 20px 0 0;
  color: #ffffff;
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.optic-auth-story-copy {
  max-width: 520px;
  margin: 18px 0 0;
  color: #b8c5d8;
  font-size: 14px;
  line-height: 1.65;
}

.optic-auth-feature-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
}

.optic-auth-feature {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: start;
}

.optic-auth-feature > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(147, 197, 253, .18);
  border-radius: 11px;
  background: rgba(255, 255, 255, .06);
  color: #93c5fd;
}

.optic-auth-feature strong {
  display: block;
  color: #f8fafc;
  font-size: 13px;
}

.optic-auth-feature p {
  margin: 4px 0 0;
  color: #91a3ba;
  font-size: 11px;
  line-height: 1.45;
}

.optic-auth-story-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #91a3ba;
  font-size: 10px;
  line-height: 1.4;
}

.optic-login-story-stat {
  position: relative;
  z-index: 1;
  padding-top: 20px;
  border-top: 1px solid rgba(148, 163, 184, .15);
}

.optic-login-story-stat span {
  display: block;
  color: #60a5fa;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.optic-login-story-stat strong {
  display: block;
  margin-top: 5px;
  color: #ffffff;
  font-size: 17px;
}

.optic-login-story-stat p {
  margin: 5px 0 0;
  color: #91a3ba;
  font-size: 11px;
}

.optic-auth-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 46px 52px;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfdff 100%
    );
}

.optic-login-form-panel {
  padding-top: 54px;
  padding-bottom: 54px;
}

.optic-auth-back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  margin-bottom: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.optic-auth-back:hover {
  color: #2563eb;
}

.optic-auth-form-heading p {
  margin: 0 0 8px;
  color: #2563eb;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .11em;
}

.optic-auth-form-heading h2 {
  margin: 0;
  color: #0f172a;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.optic-auth-form-heading > span {
  display: block;
  max-width: 520px;
  margin-top: 10px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
}

.optic-modern-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 28px;
}

.optic-modern-field-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.optic-modern-field > span {
  display: block;
  margin-bottom: 6px;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
}

.optic-modern-input {
  position: relative;
  display: flex;
  align-items: center;
}

.optic-modern-input > svg {
  position: absolute;
  left: 13px;
  z-index: 1;
  color: #64748b;
  pointer-events: none;
}

.optic-modern-input input {
  width: 100%;
  min-height: 46px;
  padding:
    0 44px
    0 41px;
  border: 1px solid #d6dee9;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  outline: none;
  box-shadow:
    inset 0 1px 2px
    rgba(15, 23, 42, .025);
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

.optic-modern-input input::placeholder {
  color: #a3afbf;
  font-weight: 500;
}

.optic-modern-input input:focus {
  border-color: #60a5fa;
  box-shadow:
    0 0 0 4px
    rgba(37, 99, 235, .09);
}

.optic-modern-input input:disabled {
  background: #f8fafc;
  cursor: not-allowed;
}

.optic-modern-password-toggle {
  position: absolute;
  right: 8px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
}

.optic-modern-password-toggle:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.optic-password-check-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 3px 0 1px;
}

.optic-password-check {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  transition: color .15s ease;
}

.optic-password-check > span {
  display: grid;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  place-items: center;
  border: 1px solid #dbe3ef;
  border-radius: 50%;
  background: #f8fafc;
  color: transparent;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}

.optic-password-check.valid {
  color: #15803d;
}

.optic-password-check.valid > span {
  border-color: #86efac;
  background: #dcfce7;
  color: #15803d;
}

.optic-field-note {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 750;
}

.optic-field-note.valid {
  color: #15803d;
}

.optic-field-note.invalid {
  color: #b45309;
}

.optic-auth-alert {
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.optic-auth-alert-error {
  border: 1px solid #fecaca;
  background: #fff5f5;
  color: #b91c1c;
}

.optic-auth-alert-success {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

.optic-modern-primary,
.optic-modern-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 47px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background .15s ease;
}

.optic-modern-primary {
  border: 0;
  background:
    linear-gradient(
      180deg,
      #3b82f6,
      #2563eb
    );
  color: #ffffff;
  box-shadow:
    0 10px 22px
    rgba(37, 99, 235, .22);
}

.optic-modern-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  background:
    linear-gradient(
      180deg,
      #2563eb,
      #1d4ed8
    );
  box-shadow:
    0 13px 28px
    rgba(37, 99, 235, .26);
}

.optic-modern-primary:disabled {
  opacity: .62;
  cursor: wait;
}

.optic-modern-secondary {
  border: 1px solid #dbe3ef;
  background: #ffffff;
  color: #334155;
}

.optic-modern-secondary:hover {
  transform: translateY(-1px);
  border-color: #93c5fd;
  background: #f8fbff;
  color: #1d4ed8;
}

.optic-auth-divider {
  display: grid;
  grid-template-columns:
    1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
}

.optic-auth-divider span {
  height: 1px;
  background: #e2e8f0;
}

.optic-auth-divider strong {
  color: #94a3b8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .03em;
}

.optic-auth-trust-line,
.optic-auth-form-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #94a3b8;
  font-size: 9px;
  line-height: 1.4;
  text-align: center;
}

.optic-auth-form-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #edf2f7;
}

/* ==========================================================
   Startup splash — intentionally compact
========================================================== */

.optic-splash {
  position: fixed;
  inset: 0;
  z-index: 50000;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 32%,
      rgba(37, 99, 235, .15),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #050b15,
      #0a1525
    );
}

.optic-splash-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(37, 99, 235, .12);
  filter: blur(100px);
}

.optic-splash-content {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(360px, 92vw);
  place-items: center;
  padding: 34px 30px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 22px;
  background: rgba(10, 21, 37, .74);
  box-shadow:
    0 28px 70px
    rgba(0, 0, 0, .34);
  backdrop-filter: blur(12px);
  text-align: center;
}

.optic-splash-logo {
  display: block !important;
  width: 132px !important;
  max-width: 132px !important;
  height: auto !important;
  max-height: 78px !important;
  object-fit: contain !important;
  margin: 0 auto 17px !important;
}

.optic-splash-copy h1 {
  margin: 0;
  color: #ffffff;
  font-size: 25px;
  letter-spacing: .1em;
}

.optic-splash-copy p {
  margin: 6px 0 0;
  color: #cbd5e1;
  font-size: 12px;
}

.optic-splash-copy span {
  display: inline-block;
  margin-top: 8px;
  color: #60a5fa;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.optic-splash-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 24px;
  color: #aebdd0;
  font-size: 10px;
  font-weight: 700;
}

.optic-splash-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.14);
  border-top-color: #60a5fa;
  border-radius: 50%;
  animation: opticAuthSpin .75s linear infinite;
}

.optic-splash-progress {
  width: 100%;
  height: 3px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.optic-splash-progress span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #2563eb,
      #60a5fa
    );
  animation:
    opticSplashProgress
    1.35s ease-in-out
    infinite;
}

/* ==========================================================
   Authentication loading
========================================================== */

.optic-auth-loading {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(37, 99, 235, .14),
      transparent 34%
    ),
    #07111f;
}

.optic-auth-loading-content {
  display: grid;
  width: min(290px, 88vw);
  place-items: center;
  gap: 13px;
  padding: 26px;
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 18px;
  background: rgba(15, 23, 42, .62);
  color: #ffffff;
  text-align: center;
}

.optic-auth-loading-logo {
  display: block !important;
  width: 116px !important;
  max-width: 116px !important;
  height: auto !important;
  max-height: 68px !important;
  object-fit: contain !important;
}

.optic-auth-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255,255,255,.16);
  border-top-color: #60a5fa;
  border-radius: 50%;
  animation: opticAuthSpin .75s linear infinite;
}

.optic-auth-loading-content p {
  margin: 0;
  color: #aebdd0;
  font-size: 10px;
  font-weight: 750;
}

@keyframes opticAuthSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes opticSplashProgress {
  0% {
    transform: translateX(-115%);
  }

  55% {
    transform: translateX(115%);
  }

  100% {
    transform: translateX(250%);
  }
}

@media (max-width: 900px) {
  .optic-auth-shell,
  .optic-login-shell {
    grid-template-columns: 1fr;
    width: min(620px, 100%);
  }

  .optic-auth-story {
    min-height: auto;
    padding: 28px;
  }

  .optic-auth-story h1 {
    font-size: 30px;
  }

  .optic-auth-feature-list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .optic-auth-form-panel {
    padding: 34px 30px;
  }
}

@media (max-width: 620px) {
  .optic-auth-page,
  .optic-login-page,
  .optic-signup-page {
    padding: 0;
  }

  .optic-auth-shell,
  .optic-login-shell {
    min-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .optic-auth-story {
    padding: 24px 20px;
  }

  .optic-auth-story-copy,
  .optic-auth-feature-list,
  .optic-auth-story-footer,
  .optic-login-story-stat {
    display: none;
  }

  .optic-auth-story h1 {
    margin-top: 15px;
    font-size: 25px;
  }

  .optic-auth-form-panel {
    padding: 28px 20px 34px;
  }

  .optic-modern-field-grid,
  .optic-password-check-grid {
    grid-template-columns: 1fr;
  }

  .optic-auth-form-heading h2 {
    font-size: 25px;
  }
}


/* ==========================================================
   Auth recovery
========================================================== */

.optic-recovery-shell {
  min-height: 560px;
}

.optic-recovery-story {
  min-height: 560px;
}

.optic-recovery-security {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px;
  border: 1px solid rgba(147, 197, 253, .14);
  border-radius: 13px;
  background: rgba(255, 255, 255, .04);
  color: #bfdbfe;
}

.optic-recovery-security strong {
  display: block;
  color: #f8fafc;
  font-size: 12px;
}

.optic-recovery-security p {
  margin: 4px 0 0;
  color: #91a3ba;
  font-size: 10px;
  line-height: 1.5;
}

.optic-recovery-tabs {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 24px;
  padding: 4px;
  border-radius: 12px;
  background: #f1f5f9;
}

.optic-recovery-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #64748b;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.optic-recovery-tabs button.active {
  background: #ffffff;
  color: #1d4ed8;
  box-shadow:
    0 2px 8px
    rgba(15, 23, 42, .08);
}

.optic-login-forgot {
  align-self: flex-end;
  margin-top: -5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2563eb;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.optic-login-forgot:hover {
  text-decoration: underline;
}

.optic-reset-password-panel {
  min-height: 520px;
}

@media (max-width: 620px) {
  .optic-recovery-tabs {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================
   USER MANAGEMENT v2 — BLACK TEXT / CLEAN LAYOUT
========================================================== */

.user-management-page,
.user-management-page * {
  box-sizing: border-box;
}

.user-management-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #000000;
}

.user-management-page .cf-card {
  color: #000000;
}

.user-management-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
}

.user-management-header h2,
.user-create-card h3 {
  margin: 4px 0 6px;
  color: #000000 !important;
}

.user-management-header .muted,
.user-create-heading p,
.user-setup-code p {
  color: #334155 !important;
}

.user-management-summary {
  display: flex;
  gap: 12px;
}

.user-management-summary > div {
  min-width: 120px;
  padding: 12px 14px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #f8fafc;
  color: #000000;
}

.user-management-summary span,
.user-management-summary strong {
  display: block;
  color: #000000 !important;
}

.user-management-summary span {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.user-management-summary strong {
  margin-top: 2px;
  font-size: 20px;
}

.user-create-card {
  padding: 22px;
}

.user-create-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.user-create-heading > svg {
  color: #2563eb;
}

.user-create-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px auto;
  gap: 12px;
  align-items: end;
  margin-top: 18px;
}

.user-create-form label > span {
  display: block;
  margin-bottom: 6px;
  color: #000000 !important;
  font-size: 11px;
  font-weight: 800;
}

.user-create-form input,
.user-create-form select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #000000 !important;
  outline: none;
}

.user-create-button,
.user-row-button,
.user-delete-button,
.user-setup-code button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 13px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.user-create-button {
  border: 1px solid #2563eb;
  background: #2563eb;
  color: #ffffff;
}

.user-setup-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  padding: 15px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: #000000;
}

.user-setup-code span {
  display: block;
  color: #1d4ed8 !important;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.user-setup-code strong {
  display: block;
  margin-top: 4px;
  color: #000000 !important;
  font-size: 24px;
  letter-spacing: .12em;
}

.user-setup-code button {
  border: 1px solid #93c5fd;
  background: #ffffff;
  color: #000000;
}

.user-management-error,
.user-management-success {
  padding: 12px 14px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 750;
}

.user-management-error {
  border: 1px solid #fecaca;
  background: #fff1f2;
  color: #991b1b !important;
}

.user-management-success {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #166534 !important;
}

.user-management-table-card {
  overflow: hidden;
  padding: 0;
}

.user-table-wrap {
  overflow-x: auto;
}

.user-management-table {
  width: 100%;
  border-collapse: collapse;
  color: #000000 !important;
}

.user-management-table thead {
  background: #f8fafc;
}

.user-management-table th {
  padding: 13px 15px;
  border-bottom: 1px solid #e2e8f0;
  color: #000000 !important;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-align: left;
  text-transform: uppercase;
}

.user-management-table td {
  padding: 14px 15px;
  border-bottom: 1px solid #edf2f7;
  color: #000000 !important;
  vertical-align: middle;
}

.user-management-table strong,
.user-management-table span {
  color: #000000;
}

.user-management-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: #dbeafe;
  color: #1d4ed8;
}

.user-management-name strong {
  display: block;
  color: #000000 !important;
}

.user-management-name span {
  display: block;
  margin-top: 3px;
  color: #475569 !important;
  font-size: 10px;
}

.user-management-table select {
  min-width: 120px;
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #000000 !important;
}

.user-status-active,
.user-status-disabled {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
}

.user-status-active {
  background: #dcfce7;
  color: #166534 !important;
}

.user-status-active * {
  color: #166534 !important;
}

.user-status-disabled {
  background: #fee2e2;
  color: #991b1b !important;
}

.user-status-disabled * {
  color: #991b1b !important;
}

.user-row-button {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #000000;
}

.user-delete-button {
  border: 1px solid #fecaca;
  background: #fff1f2;
  color: #991b1b;
}

.user-delete-button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.user-management-loading {
  padding: 30px;
  color: #000000;
}

@media (max-width: 900px) {
  .user-management-header {
    flex-direction: column;
  }

  .user-create-form {
    grid-template-columns: 1fr;
  }

  .user-management-table {
    min-width: 850px;
  }
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#07111f;
    color:white;
    font-family:Inter,Segoe UI,sans-serif;
}

.app-shell{
    display:flex;
    min-height:100vh;
}

/* Sidebar */

.sidebar {
  width: 300px;
  background: linear-gradient(
    180deg,
    #07111f 0%,
    #0d1729 45%,
    #111d34 100%
  );

  border-right: 1px solid rgba(255, 255, 255, 0.06);

  padding: 28px 22px;

  display: flex;
  flex-direction: column;

  position: sticky;
  top: 0;

  height: 100vh;

  overflow-y: auto;

  box-shadow:
    inset -1px 0 rgba(255,255,255,.04),
    12px 0 40px rgba(0,0,0,.28);
}

.sidebar-logo {
  width: 240px;
  height: auto;
  display: block;
  margin: 0 auto 12px;
}


.nav-links{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.nav-links button {
  display: flex;
  align-items: center;
  gap: 14px;

  width: 100%;

  padding: 14px 18px;

  margin-bottom: 8px;

  border: none;
  border-radius: 14px;

  background: transparent;

  color: #b7c6df;

  font-size: .95rem;
  font-weight: 600;

  cursor: pointer;

  transition: all .25s ease;
}

.nav-links button:hover {
  background: rgba(59,130,246,.12);
  color: white;
  transform: translateX(6px);
}

.nav-links .active{
    background:#1b63ff;
    color:white;
}

/* Main */

.main-area{
    flex:1;
    width:100%;
    min-width:0;
    padding:32px;
}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
}

.top-actions{
    display:flex;
    gap:15px;
}

.top-actions input{
    width:280px;
    padding:12px 18px;
    border-radius:10px;
    border:none;
    background:#13203a;
    color:white;
}

.top-actions button{
    background:#1b63ff;
    color:white;
    border:none;
    padding:12px 22px;
    border-radius:10px;
    cursor:pointer;
}

.eyebrow{
    color:#57b2ff;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:12px;
    margin-bottom:6px;
}

/* Hero */

.hero-card{
    background:#111d31;
    padding:35px;
    border-radius:20px;
    margin-bottom:30px;
    box-shadow:0 10px 25px rgba(0,0,0,.35);
}

.hero-card h2{
    font-size:36px;
    margin:10px 0;
}

.hero-card p{
    color:#bfd3ea;
    line-height:1.8;
}

/* KPI */

.kpi-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:30px;
}

.kpi-grid article{
    background:#111d31;
    border-radius:18px;
    padding:25px;
}

.kpi-grid span{
    color:#6ec2ff;
    font-size:14px;
}

.kpi-grid strong{
    display:block;
    font-size:44px;
    margin:10px 0;
}

/* Panels */

.panel{
    background:#111d31;
    padding:30px;
    border-radius:20px;
}

.panel-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:25px;
}

.activity-list{
    margin-left:20px;
    line-height:2;
    color:#d3def2;
}

/* Inventory Table */

.inventory-table{
    display:flex;
    flex-direction:column;
}

.table-row{
    display:grid;
    grid-template-columns:
        1.2fr
        2fr
        .8fr
        1.5fr
        1.3fr
        1.4fr
        1.3fr
        1fr;
    gap:15px;
    padding:16px;
    border-bottom:1px solid rgba(255,255,255,.05);
    align-items:center;
}

.table-head{
    font-weight:bold;
    color:#66bcff;
}

.table-row:hover{
    background:#15233d;
}

.status{
    padding:6px 12px;
    border-radius:999px;
    display:inline-block;
    font-size:13px;
}

.available{
    background:#18a558;
}

.pending-intake{
    background:#f0a500;
    color:black;
}

.review{
    background:#ff5252;
}

/* Empty */

.empty-state{
    text-align:center;
    padding:80px;
}

.primary-btn{
    background:#1b63ff;
    color:white;
    border:none;
    padding:12px 20px;
    border-radius:10px;
    cursor:pointer;
    font-weight:600;
}

.page-search{
    width:100%;
    padding:14px;
    margin:20px 0;
    border:none;
    border-radius:10px;
    background:#13203a;
    color:white;
    font-size:15px;
}

.results-count{
    color:#7fb9ff;
    margin-bottom:20px;
}

.stat-card{
    display:flex;
    gap:18px;
    align-items:center;
}

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

.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:22px;
    margin-top:24px;
}

.inventory-card{
    background:#0d1729;
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    overflow:hidden;
    transition:.25s;
}

.inventory-card:hover{
    transform:translateY(-5px);
    border-color:#1b63ff;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
}

.card-image{
    height:170px;
    background:linear-gradient(135deg,#13203a,#1b63ff);
    display:grid;
    place-items:center;
    font-size:58px;
}

.card-info{
    padding:20px;
}

.card-id{
    color:#57b2ff;
    font-size:12px;
    letter-spacing:1px;
    margin-bottom:8px;
}

.card-info h3{
    font-size:22px;
    margin-bottom:8px;
}

.card-info p{
    color:#b8c8dd;
    margin-bottom:8px;
}

.card-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:18px 0;
}

.card-footer strong{
    font-size:22px;
}

.details-btn{
    width:100%;
    background:#1b63ff;
    color:white;
    border:none;
    padding:12px;
    border-radius:12px;
    cursor:pointer;
    font-weight:700;
}

.workspace{
    display:grid;
    grid-template-columns:360px 1fr;
    gap:24px;
    margin-top:24px;
}

.card-list{
    background:#0d1729;
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:12px;
    max-height:650px;
    overflow:auto;
}

.card-list-item{
    display:grid;
    grid-template-columns:58px 1fr;
    gap:14px;
    align-items:center;
    background:#111d31;
    border:1px solid transparent;
    color:white;
    text-align:left;
    padding:12px;
    border-radius:16px;
    cursor:pointer;
    transition:.2s;
}

.card-list-item:hover,
.card-list-item.selected{
    border-color:#1b63ff;
    background:#16284a;
}

.mini-card-image{
    width:58px;
    height:72px;
    border-radius:10px;
    background:linear-gradient(135deg,#13203a,#1b63ff);
    display:grid;
    place-items:center;
    font-size:28px;
}

.card-list-item strong{
    display:block;
    margin-bottom:4px;
}

.card-list-item span{
    display:block;
    color:#b8c8dd;
    font-size:14px;
}

.card-list-item small{
    display:block;
    color:#57b2ff;
    margin-top:5px;
}

.card-detail-panel{
    background:#0d1729;
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:28px;
    display:grid;
    grid-template-columns:330px 1fr;
    gap:32px;
    min-height:520px;
}

.large-card-preview{
    background:linear-gradient(135deg,#13203a,#1b63ff);
    border-radius:22px;
    display:grid;
    place-items:center;
    font-size:110px;
    min-height:430px;
}

.detail-content h2{
    font-size:42px;
    margin:8px 0;
}

.muted{
    color:#b8c8dd;
    margin-bottom:28px;
}

.detail-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin:26px 0;
}

.detail-grid div{
    background:#111d31;
    border-radius:16px;
    padding:18px;
}

.detail-grid span{
    display:block;
    color:#57b2ff;
    font-size:13px;
    margin-bottom:8px;
}

.detail-grid strong{
    font-size:20px;
}

.detail-actions{
    display:flex;
    gap:14px;
    margin-top:28px;
}

.detail-actions button{
    background:#1b63ff;
    color:white;
    border:none;
    padding:13px 20px;
    border-radius:12px;
    cursor:pointer;
    font-weight:700;
}

.secondary-btn{
    background:#13203a!important;
    border:1px solid rgba(255,255,255,.12)!important;
}

.empty-message{
    color:#b8c8dd;
    padding:24px;
}

@media(max-width:1000px){
    .workspace{
        grid-template-columns:1fr;
    }

    .card-detail-panel{
        grid-template-columns:1fr;
    }

    .large-card-preview{
        min-height:260px;
    }
}

.edit-panel label{
    display:block;
    color:#9fc7ff;
    font-size:13px;
    margin-bottom:18px;
}

.edit-panel input{
    width:100%;
    margin-top:8px;
    padding:13px;
    border:none;
    border-radius:10px;
    background:#13203a;
    color:white;
    box-sizing:border-box;
}

.edit-panel select{
    width:100%;
    margin-top:8px;
    padding:13px;
    border:none;
    border-radius:10px;
    background:#13203a;
    color:white;
    box-sizing:border-box;
}

.edit-panel textarea{
    width:100%;
    min-height:120px;
    margin-top:8px;
    margin-bottom:22px;
    padding:13px;
    border:none;
    border-radius:10px;
    background:#13203a;
    color:white;
    resize:vertical;
    box-sizing:border-box;
}

.edit-panel button{
    margin-top:12px;
}

.workspace-toolbar{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    margin-top:20px;
}

.danger-btn{
    background:#ff4d4d;
    color:white;
    border:none;
    padding:12px 20px;
    border-radius:10px;
    cursor:pointer;
    font-weight:700;
}

.intake-page{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.intake-hero{
    background:linear-gradient(135deg,#111d31,#0d1729);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:34px;
}

.intake-hero h2{
    font-size:36px;
    margin:8px 0;
}

.intake-hero p{
    color:#bfd3ea;
    max-width:760px;
    line-height:1.7;
}

.intake-pro-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.intake-card{
    background:#0d1729;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:24px;
}

.form-panel{
    grid-column:1 / -1;
}

.selected-card-pro{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:22px;
    align-items:center;
    margin-top:18px;
}

.small-preview{
    min-height:230px;
    font-size:64px;
}

.empty-selected{
    margin-top:18px;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.save-inventory-btn{
    width:100%;
    margin-top:12px;
    font-size:16px;
}

@media(max-width:1100px){
    .intake-pro-layout{
        grid-template-columns:1fr;
    }

    .selected-card-pro{
        grid-template-columns:1fr;
    }

    .form-grid{
        grid-template-columns:1fr;
    }
}

.catalog-search input{
    width:100%;
    padding:13px;
    border:none;
    border-radius:10px;
    background:#13203a;
    color:white;
    margin-bottom:14px;
}

.catalog-results{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.catalog-card{
    background:#111d31;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:14px;
    cursor:pointer;
    transition:.2s;
    text-align:left;
}

.catalog-card:hover{
    border-color:#1b63ff;
    background:#16284a;
}

.catalog-card strong{
    display:block;
    color:white;
    margin-bottom:6px;
}

.catalog-card p{
    color:#bfd3ea;
    margin:4px 0;
}

.catalog-card small{
    color:#57b2ff;
}

.large-card-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 14px;
}

.mini-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.upload-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.image-manager{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:24px;
}

.image-panel h4{
    color:#9fc7ff;
    margin-bottom:12px;
    text-align:center;
}

@media(max-width:900px){
    .image-manager{
        grid-template-columns:1fr;
    }
}
.drop-zone{
    border:2px dashed rgba(255,255,255,.16);
    transition:.2s;
}

.drop-zone:hover{
    border-color:#1b63ff;
    background:#102544;
}

.image-viewer{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.88);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:40px;
}

.image-viewer img{
    max-width:90vw;
    max-height:90vh;
    object-fit:contain;
    border-radius:18px;
    box-shadow:0 30px 80px rgba(0,0,0,.6);
}

.viewer-close{
    position:absolute;
    top:24px;
    right:30px;
    background:#1b63ff;
    color:white;
    border:none;
    width:44px;
    height:44px;
    border-radius:50%;
    font-size:28px;
    cursor:pointer;
}
.qr-label-preview{
    background:#111d31;
    border-radius:16px;
    padding:18px;
    margin-top:22px;
}

.qr-label-preview h4{
    color:#9fc7ff;
    margin-bottom:12px;
}

.qr-label{
    background:white;
    color:#111;
    border-radius:14px;
    padding:16px;
    width:180px;
    text-align:center;
}

.qr-label strong{
    display:block;
    margin-top:10px;
    font-size:13px;
}

.qr-label span{
    display:block;
    margin-top:4px;
    font-size:11px;
}

/* ===========================================
   Trading Cards v2
=========================================== */



/* ==========================================
   Global Search
========================================== */



/* ==========================================
   OPTIC DATA · Intelligence Platform Design System - Core UI
========================================== */

/* ============================
   Executive Dashboard
============================ */

.dashboard-page{
    max-width:1400px;
    margin:auto;
    padding:32px;
    color:#f4f4f4;
}

.dashboard-hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    margin-bottom:35px;
}

.dashboard-hero h1{
    font-size:2.4rem;
    margin:8px 0;
}

.eyebrow{
    color:#63b3ff;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:.8rem;
}

.primary-btn{
    background:#1e88ff;
    color:white;
    border:none;
    padding:14px 24px;
    border-radius:10px;
    cursor:pointer;
    font-weight:600;
    transition:.25s;
}

.primary-btn:hover{
    background:#0d6efd;
    transform:translateY(-2px);
}

.metrics-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
    margin-bottom:35px;
}

.metric-card{
    background:#1f2937;
    padding:24px;
    border-radius:14px;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
    display:flex;
    flex-direction:column;
}

.metric-card span{
    color:#9ca3af;
    margin-bottom:12px;
}

.metric-card strong{
    font-size:2rem;
}

.metric-card.warning{
    border-left:5px solid orange;
}

.dashboard-panel{
    background:#1f2937;
    border-radius:14px;
    padding:24px;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.panel-header{
    margin-bottom:20px;
}

.panel-header h2{
    margin-bottom:5px;
}

.panel-header p{
    color:#9ca3af;
}

.sales-list{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.sale-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#111827;
    padding:18px;
    border-radius:10px;
    transition:.2s;
}

.sale-row:hover{
    transform:translateY(-2px);
    background:#182334;
}

.sale-row div{
    display:flex;
    flex-direction:column;
}

.sale-row span{
    color:#9ca3af;
    font-size:.9rem;
}

@media(max-width:768px){

.dashboard-page{
    padding:18px;
}

.dashboard-hero{
    flex-direction:column;
    align-items:flex-start;
}

.dashboard-hero h1{
    font-size:2rem;
}

.sale-row{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
}

}

/* ============================
   Scanner Panel
============================ */

.scanner-panel {
  background: #1f2937;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.scanner-box {
  margin-top: 20px;
  padding: 32px;
  border: 2px dashed #374151;
  border-radius: 14px;
  text-align: center;
  background: #111827;
}

.scanner-box p {
  font-size: 1.2rem;
  font-weight: 700;
}

.scanner-box span {
  color: #9ca3af;
}

/* ============================
   Inventory QR Code
============================ */

.inventory-qr-code {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px;
  background: white;
  color: #111827;
  border-radius: 12px;
}

.inventory-qr-code span {
  font-size: 0.75rem;
  font-weight: 700;
}

/* =====================================
   Inventory Label
===================================== */

.inventory-label{
    display:flex;
    gap:20px;
    align-items:center;
    background:white;
    color:#111827;
    border-radius:14px;
    padding:20px;
    width:460px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.label-details{
    display:flex;
    flex-direction:column;
}

.label-details h3{
    margin:0;
    font-size:1.2rem;
}

.label-details p{
    margin:3px 0;
}

.label-details strong{
    margin-top:10px;
    font-size:1.3rem;
}

.label-details small{
    margin-top:10px;
    color:#666;
    font-weight:bold;
}

/* =====================================
   Print Label Modal
===================================== */

.label-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  padding: 24px;
}

.label-modal {
  background: #111827;
  color: #f9fafb;
  border-radius: 18px;
  padding: 28px;
  width: min(620px, 100%);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}

.label-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.print-label-area {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.secondary-btn {
  background: #374151;
  color: white;
  border: none;
  padding: 12px 18px;
  border-radius: 10px;
  cursor: pointer;
}

.secondary-btn:hover {
  background: #4b5563;
}

@media print {
  body * {
    visibility: hidden;
  }

  .print-label-area,
  .print-label-area * {
    visibility: visible;
  }

  .print-label-area {
    position: absolute;
    left: 20px;
    top: 20px;
  }
}

/* ============================
   v2.0 Premium Sidebar
============================ */

.sidebar {
  background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
  border-right: 1px solid rgba(148, 163, 184, 0.18);
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
}

.nav-links button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  font-weight: 700;
  text-align: left;
  transition: 0.2s ease;
}

.nav-links button:hover {
  background: rgba(30, 136, 255, 0.12);
  color: #e5f2ff;
  border-color: rgba(30, 136, 255, 0.25);
}

.nav-links button.active {
  background: linear-gradient(
    90deg,
    #2563eb,
    #4f7cff
  );

  color: white;

  box-shadow:
    0 10px 24px rgba(37,99,235,.35);

  transform: translateX(8px);
}

.nav-links button svg {
  flex-shrink: 0;
}

.sidebar-logo {
  width: 220px;
  height: auto;
  display: block;
  margin: -12px auto 10px;
  object-fit: contain;
}

/* ===========================
   OPTIC DATA · Intelligence Platform Brand Block
=========================== */

 .brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 24px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand-block h2 {
  margin: 0;
  color: white;
  font-size: 1.3rem;
  font-weight: 800;
}

.brand-block p {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: .85rem;
}

.sidebar-footer {
  margin-top: auto;
  padding: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #94a3b8;
  font-size: .8rem;
}

.sidebar-footer strong {
  display: block;
  margin-top: 6px;
  color: white;
}

/* ===========================
   OPTIC DATA · Intelligence Platform Brand Block
=========================== */

.brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 24px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-logo {
  width: 220px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 2px;
  object-fit: contain;
}

.brand-block h2 {
  margin: 0;
  color: white;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.brand-block p {
  margin: 4px 0 0;
  color: #b8c5d9;
  font-size: 0.82rem;
}

.brand-block span {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 12px;
  border: 1px solid rgba(59, 130, 246, 0.55);
  border-radius: 999px;
  color: #8fb8ff;
  font-size: 0.72rem;
  font-weight: 700;
}

.sidebar-footer {
  margin-top: auto;
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-size: 0.8rem;
}

.sidebar-footer strong {
  display: block;
  margin-top: 6px;
  color: white;
}
/* ============================
   Dashboard v2 Fixes
============================ */

.metric-card-v2 {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  min-height: 120px;
}

.metric-card-v2 div:last-child {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.metric-card-v2 span {
  font-size: 0.95rem;
}

.metric-card-v2 strong {
  font-size: 2rem;
  line-height: 1;
}

.metric-card-v2 small {
  color: #9ca3af;
  font-size: 0.8rem;
}

.metric-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(30, 136, 255, 0.15);
  color: #60a5fa;
}

/* ============================
   Dashboard Header Readability
============================ */

.dashboard-hero-v2 {
  color: #111827;
}

.dashboard-hero-v2 p {
  color: #334155;
  opacity: 1;
}

.dashboard-hero-v2 .eyebrow {
  color: #2563eb;
}

.dashboard-hero-v2 h1,
.dashboard-hero-v2 h2 {
  color: #0f172a;
}

.dashboard-subtitle{
    font-size:1.05rem;
    color:#475569;
    margin-top:8px;
    max-width:650px;
    line-height:1.6;
}

.dashboard-hero h1{
    font-size:2.8rem;
    margin:0;
    color:#0f172a;
}

/* ========================================
   AI Scanner Page
======================================== */

.scanner-hero {
  margin-bottom: 30px;
}

.scanner-hero h1 {
  font-size: 3.5rem;
  font-weight: 800;
  margin: 12px 0 18px;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -1px;
}

.scanner-subtitle {
  font-size: 1.2rem;
  color: #c7d2e6;
  max-width: 760px;
  line-height: 1.8;
  font-weight: 500;
}

.scanner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 24px;
}

.scanner-card {
  background: #1f2937;
  color: white;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 15px 40px rgba(0,0,0,.18);
}

.scanner-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.scanner-title h2 {
  margin: 0;
  font-size: 1.3rem;
}

.scanner-status {
  list-style: none;
  padding: 0;
  margin: 0;
}

.scanner-status li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.scanner-status li:last-child {
  border-bottom: none;
}/* ========================================
   AI Scanner Page
======================================== */

.scanner-page {
  padding: 20px;
}

.scanner-hero {
  margin-bottom: 30px;
}

.scanner-hero h1 {
  font-size: 3rem;
  margin: 10px 0;
  color: #111827;
}

.scanner-subtitle {
  color: #475569;
  max-width: 700px;
  line-height: 1.6;
}

.scanner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 24px;
}

.scanner-card {
  background: #1f2937;
  color: white;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 15px 40px rgba(0,0,0,.18);
}

.scanner-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.scanner-title h2 {
  margin: 0;
  font-size: 1.3rem;
}

.scanner-status {
  list-style: none;
  padding: 0;
  margin: 0;
}

.scanner-status li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.scanner-status li:last-child {
  border-bottom: none;
}

/* ========================================
   Smart Intake
======================================== */

.smart-intake-page {
  padding: 20px;
}

.smart-intake-hero {
  margin-bottom: 28px;
}

.smart-intake-hero h1 {
  margin: 8px 0;
  color: #0f172a;
  font-size: 2.6rem;
}

.smart-intake-hero p:last-child {
  max-width: 720px;
  color: #475569;
  line-height: 1.6;
}

.smart-intake-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 24px;
}

.smart-intake-card {
  background: #1f2937;
  color: white;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);
}

.smart-intake-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.smart-intake-card-title h2 {
  margin: 0;
  font-size: 1.25rem;
}

.smart-upload-area {
  min-height: 360px;
  border: 2px dashed rgba(148, 163, 184, 0.35);
  border-radius: 16px;
  background: #111827;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  cursor: pointer;
  overflow: hidden;
  margin-bottom: 18px;
}

.smart-upload-area:hover {
  border-color: #60a5fa;
  background: #182334;
}

.smart-upload-area input {
  display: none;
}

.smart-upload-area img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 12px;
}

.smart-upload-area span,
.smart-intake-card .muted {
  color: #94a3b8;
}

.recognition-result {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border-radius: 14px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.recognition-result p {
  margin-bottom: 0;
  color: #cbd5e1;
}

@media (max-width: 768px) {
  .smart-intake-page {
    padding: 12px;
  }

  .smart-intake-grid {
    grid-template-columns: 1fr;
  }

  .smart-upload-area {
    min-height: 280px;
  }
}

.camera-scanner-preview {
  position: relative;
  width: 100%;
  height: 560px;
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #080b10;
}

.camera-scanner-preview video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.camera-scanner-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.3);
}

.camera-scan-frame {
  position: relative;
  width: 330px;
  aspect-ratio: 2.5 / 3.5;
  height: auto;
  max-width: 72%;
  max-height: 88%;
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 28px rgba(255, 255, 255, 0.16);
}

.camera-scan-message {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.78);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}

.camera-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: #ffffff;
}

.camera-corner-top-left {
  top: -3px;
  left: -3px;
  border-top: 4px solid;
  border-left: 4px solid;
  border-radius: 9px 0 0 0;
}

.camera-corner-top-right {
  top: -3px;
  right: -3px;
  border-top: 4px solid;
  border-right: 4px solid;
  border-radius: 0 9px 0 0;
}

.camera-corner-bottom-left {
  bottom: -3px;
  left: -3px;
  border-bottom: 4px solid;
  border-left: 4px solid;
  border-radius: 0 0 0 9px;
}

.camera-corner-bottom-right {
  right: -3px;
  bottom: -3px;
  border-right: 4px solid;
  border-bottom: 4px solid;
  border-radius: 0 0 9px 0;
}

.camera-loading-icon {
  animation: camera-spin 0.9s linear infinite;
}

@keyframes camera-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 700px) {
  .camera-scanner-preview {
    height: 280px;
  }

  .camera-scan-frame {
  position: relative;
  width: 235px;
  aspect-ratio: 2.5 / 3.5;
  height: auto;
  max-width: 68%;
  max-height: 90%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.14);
}
}

.capture-step-status {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.capture-step {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border-color, #334155);
  border-radius: 10px;
  color: var(--muted-text, #94a3b8);
  text-align: center;
}

.capture-step-active {
  border-color: #60a5fa;
  color: #ffffff;
  background: rgba(59, 130, 246, 0.12);
}

.capture-step-complete {
  border-color: #22c55e;
  color: #ffffff;
  background: rgba(34, 197, 94, 0.12);
}

.flip-card-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(96, 165, 250, 0.45);
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.1);
}

.flip-card-notice p {
  margin: 3px 0 0;
}

.card-side-previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 20px 0;
}

.card-side-preview {
  min-width: 0;
}

.card-side-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.card-side-preview-header .secondary-btn {
  padding: 6px 12px;
  font-size: 0.8rem;
}

.card-side-preview .smart-upload-area {
  min-height: 180px;
}

.card-side-preview .smart-upload-area img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  border-radius: 10px;
}

@media (max-width: 700px) {
  .card-side-previews {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .card-side-preview .smart-upload-area {
    min-height: 150px;
  }

  .card-side-preview .smart-upload-area img {
    height: 180px;
  }
}
@media (max-width: 700px) {
  .camera-scanner-preview {
    height: 360px;
  }

  .camera-scan-frame {
    width: 215px;
    max-width: 72%;
    max-height: 90%;
  }
}

.camera-scan-line {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  right: 8px;
  height: 3px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow:
    0 0 8px rgba(34, 197, 94, 0.9),
    0 0 18px rgba(34, 197, 94, 0.55);
  animation: optic-data-scan-line 2.2s ease-in-out infinite;
}

@keyframes optic-data-scan-line {
  0% {
    top: 8px;
    opacity: 0.35;
  }

  10% {
    opacity: 1;
  }

  50% {
    top: calc(100% - 11px);
    opacity: 1;
  }

  60% {
    opacity: 0.35;
  }

  100% {
    top: 8px;
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .camera-scan-line {
    animation: none;
    top: 50%;
  }
}

.recognized-card-fallback {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.recognized-card-fallback .muted {
  margin: 0;
}

.recognized-card-fallback .primary-btn {
  justify-self: start;
}

.intake-card-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.intake-card-image {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.intake-card-image > span {
  font-size: 0.8rem;
  font-weight: 700;
}

.intake-card-image img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: contain;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.3);
}

.recognized-card-source {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 8px;
  padding: 5px 9px;
  border: 1px solid rgba(59, 130, 246, 0.45);
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  font-size: 0.78rem;
  font-weight: 700;
}

@media (max-width: 700px) {
  .intake-card-images {
    grid-template-columns: 1fr 1fr;
  }

  .intake-card-image img {
    height: 180px;
  }
}

.inventory-detail-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.card-workspace-image-block {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.card-workspace-image-block > span {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
}

.inventory-detail-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 360px;
  padding: 14px;
  overflow: hidden;
  border-radius: 14px;
  background: #0f172a;
}

.inventory-detail-image img {
  display: block;
  width: 100%;
  height: 330px;
  object-fit: contain;
  border-radius: 10px;
}

.card-workspace-upload {
  width: 100%;
  justify-content: center;
}

@media (max-width: 900px) {
  .inventory-detail-images {
    grid-template-columns: 1fr;
  }

  .inventory-detail-image {
    min-height: 420px;
  }

  .inventory-detail-image img {
    height: 390px;
  }
}
.smart-intake-analysis-status {
  display: flex;
  align-items: center;
  min-height: 46px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.08);
}

.smart-intake-analysis-status span {
  font-weight: 600;
}

.smart-intake-analysis-status .primary-btn {
  margin: 0;
}
.camera-scan-frame {
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.camera-scan-frame-ready {
  border-color: #22c55e;
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.2),
    0 0 28px rgba(34, 197, 94, 0.55);
}

.camera-scan-frame-ready .camera-corner {
  border-color: #22c55e;
}

.camera-scan-frame-ready .camera-scan-message {
  background: rgba(20, 83, 45, 0.92);
}

.camera-scan-frame-ready .camera-scan-line {
  background: #4ade80;
  box-shadow:
    0 0 10px rgba(74, 222, 128, 0.95),
    0 0 22px rgba(74, 222, 128, 0.65);
}
.camera-scan-frame-captured {
  border-color: #60a5fa;
  box-shadow:
    0 0 0 2px rgba(96, 165, 250, 0.2),
    0 0 28px rgba(96, 165, 250, 0.55);
}

.camera-scan-frame-captured .camera-corner {
  border-color: #60a5fa;
}

.camera-scan-frame-captured .camera-scan-message {
  background: rgba(30, 64, 175, 0.92);
}

.camera-scan-frame-captured .camera-scan-line {
  animation-play-state: paused;
  background: #60a5fa;
}
.camera-flip-card-notice{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:16px;
    padding:14px 18px;

    border-radius:14px;
    border:1px solid rgba(59,130,246,.35);

    background:rgba(30,41,59,.95);

    animation:fadeSlide .25s ease;
}

.camera-flip-card-notice strong{
    display:block;
    font-size:16px;
    color:#fff;
}

.camera-flip-card-notice span{
    color:#b9c3d3;
    font-size:14px;
}

.camera-capture-complete{
    border-color:#22c55e;
    background:rgba(22,101,52,.25);
}

@keyframes fadeSlide{
    from{
        opacity:0;
        transform:translateY(-8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
.smart-intake-auto-continue {
  margin-top: 12px;
  padding: 11px 14px;
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.1);
  font-size: 0.88rem;
  font-weight: 700;
}
.pricing-preview-card {
  margin: 18px 0;
  padding: 18px;
  border-radius: 14px;
  background: #101826;
  border: 1px solid rgba(255,255,255,.08);
}

.pricing-preview-card h3 {
  margin: 0 0 14px;
}

.pricing-preview-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 18px;
  margin-bottom: 14px;
}

.pricing-preview-grid span {
  display: block;
  color: #94a3b8;
  font-size: .82rem;
  margin-bottom: 4px;
}

.pricing-preview-grid strong {
  font-size: 1.6rem;
  color: #22c55e;
}
.condition-estimate-summary {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 14px;
  background: rgba(30, 41, 59, 0.55);
}

.condition-estimate-summary p {
  margin: 0;
}

.condition-score-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.condition-score-grid span {
  display: grid;
  gap: 4px;
  padding: 9px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.65);
  color: #94a3b8;
  font-size: 0.76rem;
  text-align: center;
}

.condition-score-grid strong {
  color: #ffffff;
  font-size: 1rem;
}

.condition-notes {
  margin: 0;
  padding-left: 20px;
}

.condition-estimate-summary small {
  color: #94a3b8;
}

@media (max-width: 700px) {
  .condition-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.intake-condition-review {
  display: grid;
  gap: 14px;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 14px;
  background: rgba(30, 41, 59, 0.55);
}

.intake-condition-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.intake-condition-review-header > div:first-child {
  display: grid;
  gap: 4px;
}

.intake-condition-review-header span {
  color: #94a3b8;
  font-size: 0.82rem;
}

.intake-condition-review-header strong {
  font-size: 1.25rem;
}

.condition-confidence-badge {
  padding: 6px 10px;
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.1);
  font-size: 0.8rem;
  font-weight: 700;
}

.intake-condition-review .condition-notes {
  margin: 0;
}

.intake-condition-review .muted {
  margin: 0;
}

@media (max-width: 700px) {
  .intake-condition-review-header {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* ==========================================================
   Command Palette
========================================================== */

.cf-command-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: start center;
  padding-top: 9vh;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
}

.cf-command-palette {
  width: min(720px, 92vw);
  overflow: hidden;
  border: 1px solid #dbe4ef;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 35px 80px rgba(15, 23, 42, 0.35),
    0 0 0 1px rgba(255,255,255,.5);
}

.cf-command-search {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid #e5edf5;
}

.cf-command-search svg {
  color: #64748b;
}

.cf-command-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: #0f172a;
  font-size: 18px;
  font-weight: 600;
}

.cf-command-search input::placeholder {
  color: #94a3b8;
}

.cf-command-close {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.cf-command-close:hover {
  background: #eef2f7;
}

.cf-command-results {
  max-height: 420px;
  overflow-y: auto;
}

.cf-command-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  border: none;
  background: #ffffff;
  cursor: pointer;
  text-align: left;
}

.cf-command-item:hover,
.cf-command-item.is-selected {
  background: #eef5ff;
}

.cf-command-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 10px;
  background: #e8f0ff;
  color: #2563eb;
}

.cf-command-copy {
  flex: 1;
}

.cf-command-copy strong {
  display: block;
  color: #111827;
  font-size: 14px;
}

.cf-command-copy small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
}

.cf-command-item kbd {
  padding: 4px 8px;
  border: 1px solid #d8e2ec;
  border-radius: 6px;
  background: #ffffff;
  color: #64748b;
  font-size: 11px;
}

.cf-command-footer {
  display: flex;
  justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid #e5edf5;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
}

.cf-command-footer span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cf-command-footer kbd {
  padding: 2px 7px;
  border: 1px solid #d8e2ec;
  border-radius: 5px;
  background: white;
}

.cf-command-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 40px;
  color: #94a3b8;
  text-align: center;
}
/* ==========================================================
   Optic Data Branding
========================================================== */

.optic-brand-block {
  align-items: center;
}

.optic-brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px;
}

.optic-brand-copy {
  min-width: 0;
}

.optic-brand-copy h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.optic-brand-copy h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.optic-brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 16px 20px;
}

.optic-beta-badge {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ==========================================================
   Optic Data Startup Splash
========================================================== */

.optic-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  overflow: hidden;
  place-items: center;
  background:
    radial-gradient(
      circle at center,
      #102a4a 0%,
      #081625 44%,
      #030914 100%
    );
  animation:
    optic-splash-exit
    0.45s ease
    6.45s forwards;
}

.optic-splash-glow {
  position: absolute;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(59, 130, 246, 0.22),
      rgba(37, 99, 235, 0.04) 48%,
      transparent 70%
    );
  filter: blur(16px);
  animation:
    optic-glow-pulse
    1.5s ease-in-out infinite;
}

.optic-splash-content {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(520px, calc(100vw - 40px));
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation:
    optic-splash-enter
    0.65s ease both;
}

.optic-splash-logo {
  display: block;
  width: min(310px, 75vw);
  max-height: 220px;
  border-radius: 24px;
  object-fit: cover;
  box-shadow:
    0 30px 80px
    rgba(0, 0, 0, 0.42),
    0 0 55px
    rgba(59, 130, 246, 0.18);
}

.optic-splash-copy {
  margin-top: 22px;
}

.optic-splash-copy h1 {
  margin: 0;
  color: #f8fafc;
  font-size: clamp(27px, 5vw, 42px);
  font-weight: 900;
  letter-spacing: 0.16em;
}

.optic-splash-copy p {
  margin: 8px 0 0;
  color: #bfdbfe;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.optic-splash-copy span {
  display: inline-flex;
  margin-top: 12px;
  padding: 6px 11px;
  border: 1px solid
    rgba(96, 165, 250, 0.38);
  border-radius: 999px;
  background:
    rgba(37, 99, 235, 0.14);
  color: #93c5fd;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.optic-splash-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 25px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.optic-splash-spinner {
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid
    rgba(147, 197, 253, 0.25);
  border-top-color: #60a5fa;
  border-radius: 50%;
  animation:
    optic-spinner
    0.8s linear infinite;
}

.optic-splash-message {
  display: inline-block;
  min-width: 205px;
  animation:
    optic-message-enter
    0.35s ease both;
}

.optic-splash-progress {
  width: min(310px, 72vw);
  height: 3px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  background:
    rgba(148, 163, 184, 0.18);
}

.optic-splash-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #2563eb,
      #38bdf8,
      #2563eb
    );
  transform-origin: left;
  animation:
    optic-progress-load
    6.5s linear forwards;
}

@keyframes optic-message-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes optic-progress-load {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .optic-splash,
  .optic-splash-content,
  .optic-splash-glow,
  .optic-splash-spinner,
  .optic-splash-message,
  .optic-splash-progress span {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

@keyframes optic-splash-enter {
  from {
    opacity: 0;
    transform:
      translateY(18px)
      scale(0.97);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes optic-splash-exit {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes optic-glow-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.92);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes optic-spinner {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 650px) {
  .optic-splash-logo {
    width: min(270px, 82vw);
  }

  .optic-beta-badge {
    display: none;
  }
}

/* Inventory Workspace spacing */
.inventory-toolbar {
  margin-bottom: 24px;
}

/* ==========================================================
   Scanner Workstation Header Override
========================================================== */

.scanner-workstation-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin: 0 0 24px;
  padding: 22px 24px;
  border: 1px solid #2a3a52;
  border-radius: 18px;
  background:
    radial-gradient(
      circle at top right,
      rgba(37, 99, 235, 0.2),
      transparent 38%
    ),
    #142033;
}

.scanner-workstation-copy {
  min-width: 0;
}

.scanner-workstation-copy h1 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em;
}

.scanner-workstation-copy p {
  max-width: 760px;
  margin: 12px 0 0;
  color: #cbd5e1 !important;
  font-size: 17px;
  font-weight: 550;
  line-height: 1.65;
}

.scanner-workstation-ready {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
  font-size: 12px;
  font-weight: 850;
}

.scanner-workstation-ready span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.12);
}

@media (max-width: 720px) {
  .scanner-workstation-hero {
    flex-direction: column;
    padding: 18px;
  }
}
/* ==========================================================
   TOPBAR SIGN OUT BUTTON
========================================================== */

.optic-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.optic-signout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-height: 38px;
  padding: 0 14px;

  border: 1px solid #cbd5e1;
  border-radius: 10px;

  background: #ffffff;
  color: #000000;

  font-size: 12px;
  font-weight: 800;
  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06);

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.optic-signout-button svg {
  color: #000000;
}

.optic-signout-button:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;

  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.10);

  transform: translateY(-1px);
}

.optic-signout-button:active:not(:disabled) {
  transform: translateY(0);
}

.optic-signout-button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.optic-beta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 38px;
  padding: 0 13px;

  border: 1px solid #bfdbfe;
  border-radius: 999px;

  background: #eff6ff;
  color: #1d4ed8;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}


/* OPTIC FINAL PAGE-BY-PAGE POLISH PASS */

/* Shared success / danger palette */
.optic-app-shell {
  --optic-success-bright: #39ff88;
  --optic-success-solid: #16c963;
  --optic-danger-bright: #ff3157;
  --optic-dark-surface: #0d1f33;
  --optic-dark-surface-2: #10263d;
  --optic-dark-border: rgba(148, 163, 184, 0.26);
  --optic-readable: #eef6ff;
  --optic-readable-soft: #b9c9dc;
}

/* ==========================================================
   TRADING CARDS
   - brighter Available buttons/badges
   - eliminate light/white utility boxes
========================================================== */

.optic-app-shell .tc-header-stats .tc-stat,
.optic-app-shell .card-list,
.optic-app-shell .card-list-item,
.optic-app-shell .card-detail-panel,
.optic-app-shell .detail-grid > div,
.optic-app-shell .detail-panel,
.optic-app-shell .inventory-card {
  background: var(--optic-dark-surface) !important;
  border-color: var(--optic-dark-border) !important;
  color: var(--optic-readable) !important;
}

.optic-app-shell .card-list-item [class*="available"],
.optic-app-shell .card-detail-panel [class*="available"],
.optic-app-shell .trading-cards-page [class*="available"],
.optic-app-shell .tc-workspace [class*="available"],
.optic-app-shell .status.available,
.optic-app-shell .available {
  background: var(--optic-success-solid) !important;
  color: #04140b !important;
  border-color: #5dffa3 !important;
  font-weight: 900 !important;
  box-shadow:
    0 0 0 1px rgba(57,255,136,.24),
    0 0 12px rgba(57,255,136,.34) !important;
}

.optic-app-shell .trading-cards-page [style*="background: white"],
.optic-app-shell .trading-cards-page [style*="background:#fff"],
.optic-app-shell .trading-cards-page [style*="background: #fff"],
.optic-app-shell .tc-workspace [style*="background: white"],
.optic-app-shell .tc-workspace [style*="background:#fff"],
.optic-app-shell .tc-workspace [style*="background: #fff"] {
  background: var(--optic-dark-surface) !important;
  color: var(--optic-readable) !important;
}

/* ==========================================================
   INVENTORY
   - matching-card number styled like Executive Dashboard
========================================================== */

.optic-app-shell .inventory-page :is(
  .inventory-filter-count,
  .inventory-result-count,
  .inventory-matching-count,
  .filter-result-count
) strong,
.optic-app-shell .inventory-page :is(
  .inventory-filter-count,
  .inventory-result-count,
  .inventory-matching-count,
  .filter-result-count
) b {
  color: #05070a !important;
  font-weight: 950 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 0 3px #f1f5f9,
    0 0 7px rgba(203,213,225,.95),
    0 0 12px rgba(148,163,184,.62) !important;
}

.optic-app-shell .inventory-page :is(
  .inventory-filter-count,
  .inventory-result-count,
  .inventory-matching-count,
  .filter-result-count
) {
  background: linear-gradient(180deg,#d9e1ea,#bac5d1) !important;
  border-color: rgba(100,116,139,.72) !important;
  color: #172033 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 8px 20px rgba(15,23,42,.22) !important;
}

/* ==========================================================
   USERS
   - Active brighter green
   - Delete brighter red
========================================================== */

.optic-app-shell .user-status-active {
  background: rgba(22,201,99,.22) !important;
  border-color: rgba(57,255,136,.70) !important;
  color: var(--optic-success-bright) !important;
  font-weight: 900 !important;
  box-shadow: 0 0 12px rgba(57,255,136,.26) !important;
}

.optic-app-shell .user-delete-button {
  background: #d9163f !important;
  border-color: #ff6480 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  box-shadow:
    0 0 0 1px rgba(255,49,87,.18),
    0 0 11px rgba(255,49,87,.28) !important;
}

.optic-app-shell .user-delete-button:hover:not(:disabled) {
  background: var(--optic-danger-bright) !important;
  color: #ffffff !important;
}

/* ==========================================================
   SCANNER
   - Advanced Scanner Tools card identity text stronger
========================================================== */

.optic-app-shell .scanner-page :is(
  .scanner-advanced-tools,
  .scanner-tools,
  .scanner-tool-card,
  .scanner-advanced-card
) :is(h3,h4,strong) {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
}

.optic-app-shell .scanner-page :is(
  .scanner-advanced-tools,
  .scanner-tools,
  .scanner-tool-card,
  .scanner-advanced-card
) :is(p,span,small) {
  color: #d8e5f4 !important;
  opacity: 1 !important;
  font-weight: 650 !important;
}

/* Broad scanner identity fallback */
.optic-app-shell .scanner-page [class*="identity"] :is(strong,p,span),
.optic-app-shell .scanner-page [class*="card"] [class*="meta"] {
  color: #eef6ff !important;
  opacity: 1 !important;
}

/* ==========================================================
   POS
   - Register Ready same bright green
   - Complete Sale text brighter
========================================================== */

.optic-app-shell .pos-register-status {
  background: rgba(22,201,99,.18) !important;
  border-color: rgba(57,255,136,.68) !important;
  color: var(--optic-success-bright) !important;
  box-shadow:
    0 0 0 1px rgba(57,255,136,.16),
    0 0 13px rgba(57,255,136,.28) !important;
}

.optic-app-shell .pos-register-status strong,
.optic-app-shell .pos-register-dot {
  color: var(--optic-success-bright) !important;
}

.optic-app-shell .pos-register-dot {
  background: var(--optic-success-bright) !important;
  box-shadow: 0 0 9px rgba(57,255,136,.9) !important;
}

/* Complete Sale button - covers shared Button component */
.optic-app-shell .pos-page :is(
  .pos-cart,
  .pos-cart-card,
  .pos-checkout,
  .pos-payment-section
) button:not(:disabled),
.optic-app-shell .pos-page button[class*="primary"]:not(:disabled) {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
}

/* ==========================================================
   EBAY / MARKETPLACE
   - remove white boxes
   - Available green
   - intelligence text stronger
   - Save Draft matches Prepare Listing
========================================================== */

.optic-app-shell .mp-workspace {
  --mp-surface: #0d1f33 !important;
  --mp-surface-2: #10263d !important;
  --mp-surface-soft: #112941 !important;
  --mp-text: #f4f8ff !important;
  --mp-text-soft: #d3e0ee !important;
  --mp-muted: #a8bbcf !important;
  --mp-border: rgba(148,163,184,.28) !important;
  --mp-border-soft: rgba(148,163,184,.18) !important;
  --mp-green: #39ff88 !important;
}

.optic-app-shell .mp-workspace :is(
  .mp-summary-grid > article,
  .mp-panel,
  .mp-preview-card,
  .mp-readiness-card,
  .mp-optic-generator,
  .mp-preview-content,
  .mp-checklist,
  .mp-preview-shipping,
  .mp-intelligence-card,
  .mp-selling-highlights,
  .mp-pricing-strategy,
  .mp-shipping-condition,
  .mp-highlight-card,
  .mp-pricing-card,
  .mp-shipping-card,
  .mp-category-card,
  .mp-result-card
) {
  background: var(--mp-surface) !important;
  border-color: var(--mp-border) !important;
  color: var(--mp-text) !important;
}

.optic-app-shell .mp-workspace :is(
  .mp-panel > header,
  .mp-preview-card > header,
  .mp-readiness-card > header
) {
  background: var(--mp-surface-soft) !important;
  border-color: var(--mp-border-soft) !important;
}

.optic-app-shell .mp-workspace :is(
  h2,h3,h4,strong,label
) {
  color: #f7fbff !important;
}

.optic-app-shell .mp-optic-generator p {
  color: #75baff !important;
  opacity: 1 !important;
  font-weight: 950 !important;
}

.optic-app-shell .mp-optic-generator span,
.optic-app-shell .mp-intelligence-panel :is(p,span,small),
.optic-app-shell .mp-workspace .muted {
  color: #c9d8e8 !important;
  opacity: 1 !important;
}

.optic-app-shell .mp-workspace :is(
  .is-available,
  .available,
  [class*="available"]
) {
  background: var(--optic-success-solid) !important;
  color: #04140b !important;
  border-color: #5dffa3 !important;
  font-weight: 900 !important;
  box-shadow: 0 0 11px rgba(57,255,136,.30) !important;
}

/* Save Draft exactly same visual family as Prepare Listing */
.optic-app-shell .mp-save-button,
.optic-app-shell .mp-prepare-button {
  min-height: 42px !important;
  border: 1px solid #2563eb !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  box-shadow: 0 7px 16px rgba(37,99,235,.28) !important;
}

.optic-app-shell .mp-save-button:hover:not(:disabled),
.optic-app-shell .mp-prepare-button:hover:not(:disabled) {
  background: #1d4ed8 !important;
  border-color: #4f83ff !important;
}

/* Kill hard-coded white boxes safely inside Marketplace */
.optic-app-shell .mp-workspace [style*="background: white"],
.optic-app-shell .mp-workspace [style*="background:#fff"],
.optic-app-shell .mp-workspace [style*="background: #fff"],
.optic-app-shell .mp-workspace [style*="background-color: white"],
.optic-app-shell .mp-workspace [style*="background-color:#fff"],
.optic-app-shell .mp-workspace [style*="background-color: #fff"] {
  background: var(--mp-surface) !important;
  color: var(--mp-text) !important;
}

/* ==========================================================
   SETTINGS
   - Repair Inventory Identity button text brighter
========================================================== */

.optic-app-shell :is(
  .inventory-repair-panel,
  .inventory-repair-actions,
  .settings-maintenance
) button {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
}

.optic-app-shell :is(
  .inventory-repair-panel,
  .inventory-repair-actions
) button:not(:disabled) {
  border-color: #4f83ff !important;
  background: #2563eb !important;
}


/* OPTIC DATA · EXACT TC-CARD-LIST FIX */

/* Actual CardList.jsx selectors */
.tc-card-list {
  background: #0b1d2f !important;
  border: 1px solid #244766 !important;
  box-shadow: none !important;
}

.tc-card-list-item {
  width: 100% !important;
  background: #111d31 !important;
  border: 1px solid #1c3a56 !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

.tc-card-list-item:hover,
.tc-card-list-item.selected {
  background: #16284a !important;
  border-color: #4fb3ff !important;
  box-shadow:
    0 0 0 1px rgba(79, 179, 255, 0.15),
    0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

.tc-card-list-content {
  background: transparent !important;
  color: #f8fafc !important;
}

.tc-card-name {
  color: #ffffff !important;
}

.tc-card-subtitle {
  color: #cbd5e1 !important;
}

.tc-card-id {
  color: #63bdff !important;
}

.tc-card-footer {
  background: transparent !important;
}

.tc-card-price {
  color: #f8fafc !important;
  font-weight: 900 !important;
}

/* Actual Available badge from CardList.jsx */
.tc-card-list-item .cf-badge-available {
  background: #16c963 !important;
  border: 1px solid #5dffa3 !important;
  color: #04140b !important;
  font-weight: 900 !important;
  box-shadow:
    0 0 0 1px rgba(57, 255, 136, 0.18),
    0 0 12px rgba(57, 255, 136, 0.32) !important;
}

/* Keep image tiles dark */
.tc-card-thumb {
  background: #081827 !important;
  border-color: #244766 !important;
}

.tc-card-thumb-placeholder {
  background: #10263d !important;
  color: #f8fafc !important;
}
/* ==========================================================
   POS SPLIT TENDER READABILITY
========================================================== */

.optic-app-shell .pos-page [class*="store-credit"],
.optic-app-shell .pos-page [class*="split"],
.optic-app-shell .pos-page [class*="payment"] {
  color: #f8fafc;
}

/* Labels */
.optic-app-shell .pos-page [class*="store-credit"] :is(
  label,
  span,
  p,
  small
),
.optic-app-shell .pos-page [class*="split"] :is(
  label,
  span,
  p,
  small
) {
  color: #dbeafe !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}

/* Dollar amounts / emphasized values */
.optic-app-shell .pos-page [class*="store-credit"] :is(
  strong,
  b
),
.optic-app-shell .pos-page [class*="split"] :is(
  strong,
  b
) {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 900 !important;
}

/* Make available credit stand out */
.optic-app-shell .pos-page [class*="credit"] strong {
  color: #5dffa3 !important;
  text-shadow: 0 0 8px rgba(57, 255, 136, 0.25);
}

/* Remaining balance should be impossible to miss */
.optic-app-shell .pos-page [class*="remaining"] {
  color: #ffffff !important;
  font-weight: 900 !important;
}

/* Cash / Card selector text */
.optic-app-shell .pos-page [class*="payment"] label,
.optic-app-shell .pos-page [class*="payment"] select {
  color: #ffffff !important;
  opacity: 1 !important;
}
/* ==========================================================
   OPTIC DATA — FULL DARK ENTERPRISE THEME v2
   Put this at: app/src/EnterpriseDark.css
   Keep imported AFTER App.css in App.jsx.

   This file intentionally uses strong scoped overrides so the
   older light component styles cannot punch white panels through
   the dark application shell.
   ========================================================== */

:root {
  --od-bg: #06111f;
  --od-bg-deep: #040d18;
  --od-shell: #071522;
  --od-sidebar: #05111f;
  --od-panel: #0b1b2e;
  --od-panel-2: #0e2137;
  --od-panel-3: #112941;
  --od-panel-soft: rgba(14, 33, 55, .88);

  --od-line: rgba(148, 163, 184, .18);
  --od-line-strong: rgba(96, 165, 250, .34);

  --od-text: #f8fafc;
  --od-text-2: #d9e4f2;
  --od-muted: #9fb0c7;
  --od-faint: #70859f;

  --od-blue: #45a7ff;
  --od-blue-strong: #1677ff;
  --od-green: #3bd37f;
  --od-amber: #f5b942;
  --od-red: #fb7185;
  --od-violet: #a78bfa;

  --od-shadow: 0 18px 48px rgba(0, 0, 0, .25);
  --od-shadow-soft: 0 10px 26px rgba(0, 0, 0, .18);
}

/* ----------------------------------------------------------
   DOCUMENT / APPLICATION FOUNDATION
   ---------------------------------------------------------- */

html,
body,
#root {
  min-height: 100%;
  background: var(--od-bg) !important;
}

body {
  margin: 0;
  color: var(--od-text);
}

.optic-app-shell,
.optic-app-shell .main-area {
  min-height: 100vh;
  background:
    radial-gradient(circle at 74% -10%, rgba(22, 119, 255, .10), transparent 34rem),
    linear-gradient(180deg, var(--od-bg) 0%, #071725 100%) !important;
  color: var(--od-text) !important;
}

.optic-app-shell .main-area {
  overflow-x: hidden;
}

/* Never let generic page roots create a white canvas. */
.optic-app-shell :is(
  .dashboard,
  .dashboard-page,
  .inventory-page,
  .intake-page,
  .reports-page,
  .settings-page,
  .users-page,
  .scanner-page,
  .smart-intake,
  .ai-workbench,
  .pos-page,
  .trading-cards-page,
  .page-content,
  .workspace,
  .workspace-page
) {
  background: transparent !important;
  color: var(--od-text) !important;
}

/* ----------------------------------------------------------
   SIDEBAR
   ---------------------------------------------------------- */

.optic-app-shell .sidebar {
  border-right: 1px solid var(--od-line) !important;
  background:
    linear-gradient(180deg, rgba(4, 14, 26, .99), rgba(5, 17, 31, .99)) !important;
  color: var(--od-text) !important;
  box-shadow: 10px 0 32px rgba(0, 0, 0, .18);
}

.optic-app-shell .brand-block,
.optic-app-shell .optic-brand-block {
  border-bottom-color: var(--od-line) !important;
}

.optic-app-shell .optic-brand-copy h2,
.optic-app-shell .brand-block h2 {
  color: #ffffff !important;
}

.optic-app-shell .optic-brand-copy p,
.optic-app-shell .brand-block p {
  color: var(--od-muted) !important;
}

.optic-app-shell .nav-links button {
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #aebed2 !important;
}

.optic-app-shell .nav-links button:hover {
  border-color: rgba(96, 165, 250, .14) !important;
  background: rgba(30, 64, 175, .18) !important;
  color: #ffffff !important;
}

.optic-app-shell .nav-links button.active {
  border-color: rgba(96, 165, 250, .28) !important;
  background:
    linear-gradient(90deg, rgba(22, 119, 255, .36), rgba(30, 64, 175, .16)) !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 var(--od-blue);
}

.sidebar-store-block {
  margin: 16px 14px 8px;
  padding: 12px 14px;
  border: 1px solid var(--od-line);
  border-radius: 12px;
  background: rgba(14, 33, 55, .76);
}

.sidebar-store-block span {
  display: block;
  color: var(--od-blue);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.sidebar-store-block strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #ffffff !important;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.optic-app-shell .sidebar-footer {
  border-top-color: var(--od-line) !important;
}

.optic-app-shell .sidebar-footer p {
  color: var(--od-text-2) !important;
}

.optic-app-shell .sidebar-footer strong {
  color: var(--od-blue) !important;
}

/* ----------------------------------------------------------
   TOP BAR / PAGE IDENTITY
   ---------------------------------------------------------- */

.optic-app-shell .topbar {
  display: grid !important;
  grid-template-columns: minmax(180px, .85fr) minmax(260px, 1.35fr) auto;
  align-items: center !important;
  gap: 24px;
  min-height: 78px;
  padding: 14px 26px !important;
  border-bottom: 1px solid var(--od-line) !important;
  background: rgba(4, 14, 26, .92) !important;
  color: var(--od-text) !important;
  backdrop-filter: blur(15px);
}

.optic-topbar-store,
.optic-topbar-page,
.optic-user-context {
  min-width: 0;
}

.optic-topbar-store span,
.optic-user-context span {
  display: block;
  color: var(--od-muted) !important;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.optic-topbar-store strong,
.optic-user-context strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #ffffff !important;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.optic-topbar-store strong {
  color: #dcecff !important;
}

.optic-topbar-page .eyebrow,
.optic-app-shell .eyebrow {
  color: var(--od-blue) !important;
}

.optic-topbar-page h1,
.optic-app-shell .topbar h1 {
  margin: 2px 0 0 !important;
  color: #ffffff !important;
  font-size: clamp(24px, 2.15vw, 34px) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em;
  line-height: 1.05;
}

.optic-app-shell .optic-topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.optic-app-shell .optic-beta-badge {
  border: 1px solid rgba(96, 165, 250, .28) !important;
  background: rgba(30, 64, 175, .22) !important;
  color: #79c2ff !important;
}

.optic-app-shell .optic-signout-button {
  border: 1px solid var(--od-line) !important;
  background: #0a192a !important;
  color: #ffffff !important;
}

.optic-app-shell .optic-signout-button:hover {
  border-color: var(--od-line-strong) !important;
  background: #10273f !important;
}

/* ----------------------------------------------------------
   GLOBAL TYPOGRAPHY
   ---------------------------------------------------------- */

.optic-app-shell :is(h1, h2, h3, h4, h5, h6) {
  color: #ffffff !important;
}

.optic-app-shell :is(p, li, td, dd) {
  color: var(--od-text-2);
}

.optic-app-shell :is(
  .muted,
  .subtitle,
  .subtext,
  .helper-text,
  .description,
  .results-count,
  small
) {
  color: var(--od-muted) !important;
}

.optic-app-shell :is(label, dt) {
  color: #b9c8da !important;
}

.optic-app-shell hr {
  border-color: var(--od-line) !important;
}

/* ----------------------------------------------------------
   GLOBAL SURFACES
   ---------------------------------------------------------- */

.optic-app-shell :is(
  .panel,
  .cf-card,
  .card,
  .dashboard-card,
  .stat-card,
  .summary-card,
  .metric-card,
  .detail-panel,
  .settings-card,
  .report-card,
  .user-card,
  .scanner-card,
  .intake-card,
  .ai-panel,
  .ai-timing-card
) {
  border-color: var(--od-line) !important;
  background:
    linear-gradient(180deg, rgba(13, 31, 52, .98), rgba(9, 24, 42, .98)) !important;
  color: var(--od-text) !important;
  box-shadow: var(--od-shadow-soft);
}

/* Catch many old white content blocks without changing QR/print elements. */
.optic-app-shell :is(
  .inventory-stat-item,
  .inventory-bulk-toolbar,
  .inventory-toolbar,
  .inventory-table-shell,
  .inventory-empty-state,
  .inventory-loading-skeleton,
  .tc-stat,
  .catalog-search,
  .catalog-search-results,
  .pos-search,
  .pos-cart,
  .pos-workspace,
  .pos-scanner,
  .report-summary,
  .report-panel,
  .settings-section,
  .user-management-section,
  .scanner-workstation,
  .scanner-status-card,
  .batch-label-center
) {
  border-color: var(--od-line) !important;
  background: var(--od-panel) !important;
  color: var(--od-text) !important;
}

/* ----------------------------------------------------------
   INPUTS / CONTROLS
   ---------------------------------------------------------- */

.optic-app-shell :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .page-search,
  .cf-field input,
  .cf-field select,
  .cf-field textarea
) {
  border-color: rgba(148, 163, 184, .25) !important;
  background: #071625 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.optic-app-shell :is(input, textarea)::placeholder {
  color: #71869f !important;
}

.optic-app-shell :is(input, select, textarea):focus {
  border-color: rgba(69, 167, 255, .72) !important;
  box-shadow: 0 0 0 3px rgba(69, 167, 255, .13) !important;
  outline: none;
}

/* Buttons */
.optic-app-shell :is(.primary-btn, .cf-button-primary) {
  border-color: #1677ff !important;
  background: linear-gradient(180deg, #2589ff, #146ce1) !important;
  color: #ffffff !important;
}

.optic-app-shell :is(.secondary-btn, .cf-button-secondary) {
  border-color: rgba(96, 165, 250, .28) !important;
  background: #10253b !important;
  color: #dcecff !important;
}

.optic-app-shell button:disabled {
  opacity: .55;
}

/* ----------------------------------------------------------
   TABLES
   ---------------------------------------------------------- */

.optic-app-shell table {
  border-color: var(--od-line) !important;
  background: transparent !important;
  color: var(--od-text-2) !important;
}

.optic-app-shell thead,
.optic-app-shell th {
  border-color: var(--od-line) !important;
  background: #0d2239 !important;
  color: #bcd0e7 !important;
}

.optic-app-shell td {
  border-color: rgba(148, 163, 184, .12) !important;
  background: transparent !important;
  color: var(--od-text-2) !important;
}

.optic-app-shell tbody tr {
  background: rgba(10, 27, 46, .72) !important;
}

.optic-app-shell tbody tr:nth-child(even) {
  background: rgba(13, 33, 55, .78) !important;
}

.optic-app-shell tbody tr:hover {
  background: #102941 !important;
}

/* ----------------------------------------------------------
   INVENTORY
   ---------------------------------------------------------- */

.inventory-stats-bar {
  gap: 10px;
}

.optic-app-shell .inventory-stat-item {
  border: 1px solid var(--od-line) !important;
  background: linear-gradient(180deg, #0d2137, #0a1a2b) !important;
}

.optic-app-shell .inventory-stat-item span {
  color: var(--od-muted) !important;
}

.optic-app-shell .inventory-stat-item strong {
  color: #ffffff !important;
}

.optic-app-shell .inventory-stat-icon {
  background: rgba(69, 167, 255, .13) !important;
  color: var(--od-blue) !important;
}

.optic-app-shell .inventory-stat-green .inventory-stat-icon,
.optic-app-shell .inventory-stat-emerald .inventory-stat-icon {
  background: rgba(59, 211, 127, .13) !important;
  color: #71e5a2 !important;
}

.optic-app-shell .inventory-stat-amber .inventory-stat-icon {
  background: rgba(245, 185, 66, .13) !important;
  color: #f8c966 !important;
}

.optic-app-shell .inventory-stat-violet .inventory-stat-icon {
  background: rgba(167, 139, 250, .13) !important;
  color: #c4b5fd !important;
}

.optic-app-shell .inventory-bulk-toolbar strong {
  color: #ffffff !important;
}

.optic-app-shell .inventory-bulk-toolbar span {
  color: var(--od-muted) !important;
}

.optic-app-shell .inventory-row {
  border-color: rgba(148, 163, 184, .13) !important;
  background: rgba(10, 27, 46, .78) !important;
  color: var(--od-text-2) !important;
}

.optic-app-shell .inventory-row:hover {
  background: #102941 !important;
}

.optic-app-shell .inventory-row-actions button {
  border-color: var(--od-line) !important;
  background: #0c2035 !important;
  color: #b9c9da !important;
}

.optic-app-shell .inventory-row-actions button:hover {
  border-color: rgba(69, 167, 255, .45) !important;
  background: rgba(22, 119, 255, .15) !important;
  color: #78c4ff !important;
}

/* ----------------------------------------------------------
   TRADING CARDS
   ---------------------------------------------------------- */

.optic-app-shell .tc-header-subtitle {
  color: var(--od-muted) !important;
}

.optic-app-shell .tc-stat {
  border: 1px solid var(--od-line) !important;
  background: #0d2137 !important;
}

.optic-app-shell .tc-stat span {
  color: var(--od-muted) !important;
}

.optic-app-shell .tc-stat strong {
  color: #ffffff !important;
}

.optic-app-shell .detail-panel {
  border: 1px solid var(--od-line) !important;
  background: linear-gradient(180deg, #0d2137, #091827) !important;
}

.optic-app-shell .detail-row {
  border-color: rgba(148, 163, 184, .12) !important;
}

.optic-app-shell .detail-row span {
  color: var(--od-muted) !important;
}

.optic-app-shell .detail-row strong {
  color: #ffffff !important;
}

/* QR itself must remain white for reliable scanning. */
.optic-app-shell .trading-card-qr-preview,
.optic-app-shell #trading-card-print-qr {
  background: #ffffff !important;
}

/* ----------------------------------------------------------
   POINT OF SALE
   ---------------------------------------------------------- */

.pos-page {
  padding: 24px 26px 34px;
  color: var(--od-text) !important;
}

.optic-app-shell .pos-workspace {
  padding: 24px;
  border: 1px solid var(--od-line) !important;
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 0%, rgba(22, 119, 255, .10), transparent 22rem),
    linear-gradient(180deg, #0b1b2e, #091827) !important;
  box-shadow: var(--od-shadow);
}

.pos-page .dashboard-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}

.pos-page .dashboard-section-header h2 {
  margin: 3px 0 0 !important;
  color: #ffffff !important;
  font-size: 28px !important;
  letter-spacing: -.025em;
}

.pos-page .dashboard-section-header .muted {
  margin-top: 8px;
  color: #a8b8cc !important;
}

.pos-store-name {
  margin: 6px 0 0;
  color: var(--od-muted) !important;
  font-size: 13px;
}

.pos-store-name strong {
  color: var(--od-blue) !important;
}

.pos-register-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(59, 211, 127, .28) !important;
  border-radius: 12px;
  background: rgba(22, 163, 74, .12) !important;
  color: #8ff0b3 !important;
}

.pos-register-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--od-green) !important;
  box-shadow: 0 0 0 4px rgba(59, 211, 127, .10);
}

.pos-express-mode-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(96, 165, 250, .30) !important;
  border-radius: 12px;
  background: rgba(30, 64, 175, .20) !important;
  color: #dbeafe !important;
  font-weight: 800;
}

.pos-workspace-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.optic-app-shell .pos-workspace-stat {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 88px;
  padding: 16px;
  border: 1px solid var(--od-line) !important;
  border-radius: 14px;
  background: rgba(13, 33, 55, .82) !important;
}

.pos-workspace-stat > svg {
  color: var(--od-blue) !important;
}

.pos-workspace-stat span {
  display: block;
  color: #93a6be !important;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.pos-workspace-stat strong {
  display: block;
  margin-top: 4px;
  color: #ffffff !important;
  font-size: 20px;
}

.pos-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(330px, .9fr);
  align-items: start;
  gap: 18px;
  margin-top: 18px;
}

.optic-app-shell .pos-search,
.optic-app-shell .pos-cart {
  border: 1px solid var(--od-line) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #0b1b2e, #091827) !important;
  color: var(--od-text) !important;
  box-shadow: var(--od-shadow);
}

.optic-app-shell .pos-result-count {
  border-color: rgba(96, 165, 250, .28) !important;
  background: rgba(22, 119, 255, .12) !important;
  color: #75bdff !important;
}

.optic-app-shell .pos-result-item,
.optic-app-shell .pos-cart-item {
  border-color: rgba(148, 163, 184, .16) !important;
  background: rgba(11, 28, 47, .92) !important;
  color: #ffffff !important;
}

.optic-app-shell .pos-result-item:hover {
  border-color: rgba(96, 165, 250, .34) !important;
  background: #10263e !important;
}

.optic-app-shell :is(
  .pos-result-details span,
  .pos-result-details small,
  .pos-cart-item-details span,
  .pos-cart-item-details small
) {
  color: #9eb0c5 !important;
}

.optic-app-shell :is(
  .pos-result-details strong,
  .pos-cart-item-details strong,
  .pos-result-price,
  .pos-cart-item-price
) {
  color: #ffffff !important;
}

.optic-app-shell .pos-scanner {
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr) minmax(260px, auto);
  align-items: center;
  gap: 15px;
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid var(--od-line) !important;
  border-radius: 15px;
  background: linear-gradient(180deg, #0b1b2e, #091827) !important;
  color: var(--od-text) !important;
  box-shadow: var(--od-shadow);
}

.optic-app-shell .pos-scanner-heading span {
  color: var(--od-blue) !important;
}

.optic-app-shell .pos-scanner-heading strong {
  color: #ffffff !important;
}

.optic-app-shell .pos-scanner-icon {
  background: rgba(22, 119, 255, .13) !important;
  color: var(--od-blue) !important;
}

.optic-app-shell .pos-scanner-status {
  color: #a7b7ca !important;
}

.optic-app-shell .pos-scanner-success {
  border-color: rgba(59, 211, 127, .36) !important;
  background: rgba(13, 54, 42, .72) !important;
}

.optic-app-shell .pos-scanner-error {
  border-color: rgba(251, 113, 133, .35) !important;
  background: rgba(67, 26, 36, .72) !important;
}

.optic-app-shell .pos-checkout-summary,
.optic-app-shell .pos-payment-section {
  border-color: var(--od-line) !important;
}

.optic-app-shell .pos-payment-methods label {
  border-color: rgba(148, 163, 184, .20) !important;
  background: #091a2c !important;
  color: #b9c8d9 !important;
}

.optic-app-shell .pos-payment-methods label.selected {
  border-color: rgba(96, 165, 250, .45) !important;
  background: rgba(22, 119, 255, .14) !important;
  color: #ffffff !important;
}

/* ----------------------------------------------------------
   SCANNER / SMART INTAKE / AI CONVEYOR
   ---------------------------------------------------------- */

.optic-app-shell :is(
  .scanner-workstation,
  .scanner-workstation-card,
  .scanner-status-card,
  .scanner-upload-card,
  .scanner-results,
  .batch-label-center,
  .batch-label-card,
  .scanner-conveyor-card,
  .operator-review-card,
  .intake-queue-card,
  .ai-panel,
  .ai-assistant-card,
  .ai-timing-card,
  .ai-stats-card,
  .ai-workbench-card
) {
  border-color: var(--od-line) !important;
  background: linear-gradient(180deg, #0c1f34, #091827) !important;
  color: var(--od-text) !important;
}

.optic-app-shell :is(
  .scanner-workstation h1,
  .scanner-workstation h2,
  .scanner-workstation h3,
  .ai-workbench h1,
  .ai-workbench h2,
  .ai-workbench h3
) {
  color: #ffffff !important;
}

.optic-app-shell :is(
  .scanner-workstation p,
  .ai-workbench p,
  .ai-muted
) {
  color: var(--od-muted) !important;
}

/* ----------------------------------------------------------
   REPORTS / SETTINGS / USERS
   ---------------------------------------------------------- */

.optic-app-shell :is(
  .reports-page,
  .settings-page,
  .users-page
) {
  color: var(--od-text) !important;
}

.optic-app-shell :is(
  .reports-page .panel,
  .reports-page .cf-card,
  .report-card,
  .settings-page .panel,
  .settings-page .cf-card,
  .settings-card,
  .users-page .panel,
  .users-page .cf-card,
  .user-management-section
) {
  border-color: var(--od-line) !important;
  background: linear-gradient(180deg, #0c1f34, #091827) !important;
  color: var(--od-text) !important;
}

.optic-app-shell :is(
  .reports-page h2,
  .reports-page h3,
  .settings-page h2,
  .settings-page h3,
  .users-page h2,
  .users-page h3
) {
  color: #ffffff !important;
}

/* ----------------------------------------------------------
   MODALS / POPOVERS / DROPDOWNS
   ---------------------------------------------------------- */

.optic-app-shell :is(
  .modal,
  .modal-content,
  .dialog,
  .dialog-content,
  .popover,
  .dropdown-menu,
  .command-palette,
  .label-modal
) {
  border-color: var(--od-line) !important;
  background: #0b1b2e !important;
  color: var(--od-text) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .46) !important;
}

/* Camera preview/modal may intentionally need distinct contrast.
   Keep its controls dark, but do not darken the video itself. */
.optic-app-shell .pos-camera-scanner {
  border-color: var(--od-line) !important;
  background: #0b1b2e !important;
}

.optic-app-shell .pos-camera-scanner-header,
.optic-app-shell .pos-camera-scanner-status,
.optic-app-shell .pos-camera-scanner-help {
  background: #0b1b2e !important;
  color: var(--od-text-2) !important;
}

/* ----------------------------------------------------------
   STATUS CHIPS
   ---------------------------------------------------------- */

.optic-app-shell :is(
  .badge,
  .chip,
  .status-badge,
  .pill
) {
  border-color: var(--od-line) !important;
  background: #10243a !important;
  color: #c8d7e8 !important;
}

/* ----------------------------------------------------------
   SCROLLBARS
   ---------------------------------------------------------- */

.optic-app-shell * {
  scrollbar-color: #45617f transparent;
  scrollbar-width: thin;
}

.optic-app-shell *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.optic-app-shell *::-webkit-scrollbar-track {
  background: transparent;
}

.optic-app-shell *::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #36526f;
  background-clip: padding-box;
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1180px) {
  .optic-app-shell .topbar {
    grid-template-columns: 1fr auto;
  }

  .optic-topbar-page {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .pos-workspace-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pos-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .optic-app-shell .topbar {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 18px !important;
  }

  .optic-topbar-page {
    grid-column: auto;
    grid-row: auto;
  }

  .optic-app-shell .optic-topbar-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .optic-user-context {
    width: 100%;
  }

  .pos-page {
    padding: 16px;
  }

  .pos-page .dashboard-section-header {
    flex-direction: column;
  }

  .pos-workspace-stats {
    grid-template-columns: 1fr;
  }

  .pos-scanner {
    grid-template-columns: 1fr !important;
  }
}

/* ----------------------------------------------------------
   SAFETY EXCEPTIONS
   ---------------------------------------------------------- */

/* QR codes / print surfaces need white backgrounds. */
.optic-app-shell :is(
  .trading-card-qr-preview,
  #trading-card-print-qr,
  .qr-preview,
  .qr-code-surface,
  .print-label-preview
) {
  background: #ffffff !important;
}

/* Do not force images/canvas/video backgrounds. */
.optic-app-shell :is(img, canvas, video, svg) {
  color: inherit;
}

.optic-app-shell {
  --od-clean-bg: #06111f;
  --od-clean-panel: #0b1b2e;
  --od-clean-line: rgba(148,163,184,.18);
  --od-clean-text: #f5f8fc;
  --od-clean-muted: #9fb0c7;
  --od-clean-blue: #45a7ff;
  --od-clean-green: #48d98b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 15px;
  line-height: 1.45;
}

.optic-app-shell :is(h1,h2,h3,h4,strong,button,label,th) {
  letter-spacing: normal;
  text-rendering: optimizeLegibility;
}

/* final light-surface cleanup */
.optic-app-shell :is(
  .dashboard-hero,.dashboard-priority-card,.daily-briefing,.briefing-card,
  .executive-hero,.executive-priority,.executive-briefing,.executive-card,
  .dashboard-stat,.dashboard-stat-card,.dashboard-summary-card,
  .inventory-filter-group,.filter-group,.filter-card,
  .inventory-empty,.inventory-empty-state,
  .pos-empty-state,.pos-result-empty,.pos-search-empty,
  .user-stat,.user-stat-card,.user-summary-card,.staff-stat,
  .scanner-dropzone,.optic-conveyor-empty,.optic-conveyor-toolbar,.optic-batch-session
) {
  border-color: var(--od-clean-line) !important;
  background: linear-gradient(180deg,#0d2137,#091827) !important;
  color: var(--od-clean-text) !important;
}

.optic-app-shell :is(
  .dashboard-hero,.dashboard-priority-card,.daily-briefing,.briefing-card,
  .executive-hero,.executive-priority,.executive-briefing
) :is(h1,h2,h3,strong) { color:#fff !important; }

.optic-app-shell :is(
  .dashboard-hero,.dashboard-priority-card,.daily-briefing,.briefing-card,
  .executive-hero,.executive-priority,.executive-briefing
) :is(p,span,small) { color:var(--od-clean-muted) !important; }

.optic-app-shell :is(.dashboard-metric,.dashboard-metric-card,.briefing-stat,.briefing-metric,.priority-stat) {
  border-color:var(--od-clean-line) !important;
  background:#0c1d31 !important;
  color:var(--od-clean-text) !important;
}
.optic-app-shell :is(.dashboard-metric,.dashboard-metric-card,.briefing-stat,.briefing-metric,.priority-stat) strong {
  color:#fff !important;
}
.optic-app-shell :is(.dashboard-metric,.dashboard-metric-card,.briefing-stat,.briefing-metric,.priority-stat) :is(span,p,small) {
  color:var(--od-clean-muted) !important;
}

.optic-app-shell :is(.inventory-filter-group,.filter-group,.filter-card) {
  min-height:0 !important;
  border:1px solid var(--od-clean-line) !important;
  border-radius:14px !important;
  background:#0c1d31 !important;
}
.optic-app-shell :is(.inventory-filter-group,.filter-group,.filter-card) :is(label,legend,span,strong) {
  color:#dbe7f5 !important;
}
.optic-app-shell :is(.inventory-filter-option,.filter-option,.filter-chip) {
  border-color:rgba(148,163,184,.18) !important;
  background:#10253c !important;
  color:#d8e5f3 !important;
}
.optic-app-shell :is(.inventory-filter-option,.filter-option,.filter-chip):hover {
  border-color:rgba(69,167,255,.42) !important;
  background:#15314e !important;
}
.optic-app-shell :is(.inventory-filter-option,.filter-option,.filter-chip) input {
  accent-color:#2589ff;
}

.optic-app-shell :is(.pos-empty-state,.pos-result-empty,.pos-search-empty) {
  min-height:180px;
  border:1px dashed rgba(96,165,250,.26) !important;
  border-radius:14px !important;
  background:#091a2c !important;
}
.optic-app-shell :is(.pos-empty-state,.pos-result-empty,.pos-search-empty) :is(h3,strong) {
  color:#fff !important;
}
.optic-app-shell :is(.pos-empty-state,.pos-result-empty,.pos-search-empty) :is(p,span) {
  color:var(--od-clean-muted) !important;
}

.optic-app-shell :is(.user-stat,.user-stat-card,.user-summary-card,.staff-stat) {
  border:1px solid var(--od-clean-line) !important;
  background:#0d2137 !important;
}
.optic-app-shell :is(.user-stat,.user-stat-card,.user-summary-card,.staff-stat) :is(span,small) {
  color:var(--od-clean-muted) !important;
}
.optic-app-shell :is(.user-stat,.user-stat-card,.user-summary-card,.staff-stat) strong {
  color:#fff !important;
}

/* scanner mockup */
.scanner-page-v3 {
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:24px 26px 38px;
  box-sizing:border-box;
}
.scanner-hero-v3 {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  gap:22px 28px;
  padding:26px 28px 0 !important;
  overflow:hidden;
  border:1px solid var(--od-clean-line) !important;
  border-radius:18px !important;
  background:radial-gradient(circle at 96% 0%,rgba(42,92,190,.30),transparent 32rem),linear-gradient(180deg,#10223a 0%,#0c1d31 100%) !important;
}
.scanner-hero-v3 .eyebrow {
  margin:0 0 8px;
  font-size:11px !important;
  font-weight:800;
  letter-spacing:.12em;
}
.scanner-hero-v3 h1 {
  margin:0;
  font-size:clamp(30px,3vw,42px) !important;
  font-weight:780 !important;
  letter-spacing:-.035em !important;
  line-height:1.04;
}
.scanner-hero-v3 .scanner-subtitle {
  max-width:730px;
  margin:12px 0 0;
  color:#c7d4e5 !important;
  font-size:15px;
  line-height:1.65;
}
.scanner-ready-badge {
  align-self:start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 14px;
  border:1px solid rgba(72,217,139,.30);
  border-radius:999px;
  background:rgba(22,125,76,.18);
  color:#b6f7d1 !important;
  font-size:12px;
  font-weight:800;
}
.scanner-ready-badge>span {
  width:8px;height:8px;border-radius:999px;background:var(--od-clean-green);
  box-shadow:0 0 0 5px rgba(72,217,139,.09);
}
.scanner-health-strip {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:22px -28px 0;
  padding:17px 28px;
  border-top:1px solid var(--od-clean-line);
  background:rgba(5,17,31,.34);
}
.scanner-health-item {
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-width:0;
  padding:0 18px;
  border-right:1px solid var(--od-clean-line);
}
.scanner-health-item:first-child{padding-left:0}
.scanner-health-item:last-child{border-right:0}
.scanner-health-item>svg{color:var(--od-clean-blue)}
.scanner-health-item strong{display:block;color:#f7fbff !important;font-size:13px}
.scanner-health-item span{display:block;margin-top:2px;font-size:12px;font-weight:700}
.scanner-health-good{color:var(--od-clean-green) !important}
.scanner-health-blue{color:#63b5ff !important}

.scanner-command-grid {
  display:grid;
  grid-template-columns:minmax(0,1.34fr) minmax(420px,.92fr);
  gap:18px;
  margin-top:18px;
}
.scanner-command-main,.scanner-command-side{min-width:0}
.optic-app-shell .scanner-card {
  border:1px solid var(--od-clean-line) !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,rgba(13,33,55,.98),rgba(8,24,41,.98)) !important;
  color:var(--od-clean-text) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}
.scanner-conveyor-v3{padding:20px !important}
.scanner-title{display:flex;align-items:flex-start;gap:12px}
.scanner-title-icon {
  display:grid;flex:0 0 auto;width:38px;height:38px;place-items:center;
  border-radius:11px;background:rgba(69,167,255,.10);color:var(--od-clean-blue)
}
.scanner-title h2{margin:2px 0 4px;font-size:20px !important}
.scanner-title span{color:var(--od-clean-muted) !important;font-size:12px}

.scanner-page-v3 .optic-conveyor{margin-top:16px}
.scanner-page-v3 .optic-conveyor-toolbar {
  display:flex !important;align-items:center;justify-content:space-between;gap:14px;
  padding:12px !important;border:1px solid var(--od-clean-line) !important;
  border-radius:12px !important;background:#0a1b2e !important
}
.scanner-page-v3 .optic-conveyor-toolbar-actions{display:flex;flex-wrap:wrap;gap:9px}
.scanner-page-v3 :is(.optic-conveyor-primary,.optic-conveyor-secondary,.optic-conveyor-warning,.optic-conveyor-commit,.optic-conveyor-label-button,.optic-conveyor-finish) {
  min-height:38px;border-radius:9px !important;font-size:12px;font-weight:800
}
.scanner-page-v3 .optic-conveyor-primary {
  border:1px solid #2c7dff !important;background:linear-gradient(180deg,#347fff,#225bd1) !important;color:#fff !important
}
.scanner-page-v3 .optic-conveyor-secondary {
  border:1px solid var(--od-clean-line) !important;background:#10253c !important;color:#dce8f7 !important
}
.scanner-page-v3 .optic-conveyor-mode {
  display:inline-flex;align-items:center;gap:8px;color:#d8e5f4 !important;font-size:12px;font-weight:750;white-space:nowrap
}
.scanner-page-v3 .optic-conveyor-empty {
  min-height:240px;display:grid;align-content:center;justify-items:center;margin-top:12px;padding:30px;
  border:1px dashed rgba(96,165,250,.30) !important;border-radius:13px !important;background:#091a2c !important;text-align:center
}
.scanner-page-v3 .optic-conveyor-empty h3{margin:14px 0 6px;color:#fff !important}
.scanner-page-v3 .optic-conveyor-empty p{max-width:540px;color:#b3c3d6 !important}
.scanner-page-v3 .optic-conveyor-empty>span{color:#748aa5 !important}

.scanner-lower-grid {
  display:grid;grid-template-columns:1fr 1.05fr;gap:18px;margin-top:18px
}
.scanner-mini-panel{min-height:154px;padding:18px !important}
.scanner-mini-panel>.eyebrow,.scanner-universal-card>div>.eyebrow,.scanner-status-v3>.eyebrow,.scanner-tips-v3>.eyebrow {
  margin:0 0 14px;color:var(--od-clean-blue) !important;font-size:10px !important;font-weight:900;letter-spacing:.12em
}
.scanner-empty-message{display:flex;gap:10px;align-items:center;color:var(--od-clean-muted);font-size:12px}
.scanner-action-row {
  display:grid !important;width:100%;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:10px;
  margin-top:9px;padding:11px 12px !important;border:1px solid var(--od-clean-line) !important;
  border-radius:10px !important;background:#0f243b !important;color:#eaf3fd !important;text-align:left
}
.scanner-action-row:hover{border-color:rgba(69,167,255,.40) !important;background:#14304d !important}
.scanner-action-row>svg{color:var(--od-clean-blue)}
.scanner-action-row strong,.scanner-action-row small{display:block}
.scanner-action-row strong{font-size:12px}
.scanner-action-row small{margin-top:2px;color:var(--od-clean-muted) !important;font-size:10px}

.scanner-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.scanner-summary-card {
  min-width:0;min-height:150px;padding:17px;border:1px solid var(--od-clean-line);
  border-radius:14px;background:linear-gradient(180deg,#0d2137,#091827)
}
.scanner-summary-card>svg{color:var(--od-clean-blue)}
.scanner-summary-card span,.scanner-summary-card strong,.scanner-summary-card small{display:block}
.scanner-summary-card span{margin-top:14px;color:#9db0c7 !important;font-size:9px;font-weight:900;letter-spacing:.05em}
.scanner-summary-card strong{margin-top:7px;overflow:hidden;color:#fff !important;font-size:21px;text-overflow:ellipsis}
.scanner-summary-card small{margin-top:5px;color:#7e93ad !important;font-size:10px}

.scanner-universal-card{margin-top:18px;min-height:222px;padding:18px !important}
.scanner-universal-card h2{margin:0;font-size:18px !important}
.scanner-universal-card>div>p:last-child{margin:7px 0 16px;color:var(--od-clean-muted) !important;font-size:12px}

.scanner-side-bottom{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.scanner-status-v3,.scanner-tips-v3{min-height:218px;padding:18px !important}
.scanner-status-v3-row {
  display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 0;
  color:#d8e5f4;font-size:11px
}
.scanner-status-v3-row svg{color:#98abc1}
.scanner-status-v3-row strong{color:var(--od-clean-green) !important;font-size:11px}
.scanner-status-v3-row em{color:#8ba0ba;font-size:11px;font-style:normal}
.scanner-tips-v3 ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.scanner-tips-v3 li {
  display:grid;grid-template-columns:17px minmax(0,1fr);gap:7px;color:#aebed2 !important;font-size:10px
}

.scanner-advanced-tools {
  margin-top:18px;border:1px solid var(--od-clean-line);border-radius:14px;background:#091a2c
}
.scanner-advanced-tools>summary{padding:15px 18px;color:#cbd9e9;font-size:12px;font-weight:750;cursor:pointer}
.scanner-grid-v3{grid-template-columns:repeat(2,minmax(0,1fr)) !important;padding:0 16px 16px}

@media (max-width:1320px) {
  .scanner-command-grid{grid-template-columns:1fr}
  .scanner-summary-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px) {
  .scanner-health-strip,.scanner-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scanner-side-bottom,.scanner-lower-grid,.scanner-grid-v3{grid-template-columns:1fr !important}
}
@media (max-width:640px) {
  .scanner-page-v3{padding:16px}
  .scanner-hero-v3{grid-template-columns:1fr;padding:20px 20px 0 !important}
  .scanner-health-strip{margin:18px -20px 0;padding:16px 20px}
  .scanner-summary-grid{grid-template-columns:1fr 1fr}
}
/* ==========================================================
   OPTIC DATA — EXECUTIVE DASHBOARD DARK FIX
   Add AFTER IntelligenceDarkCleanup.css
   File: app/src/ExecutiveDashboardDarkFix.css
   ========================================================== */

.optic-app-shell .executive-dashboard {
  --exec-ink: #f8fafc !important;
  --exec-copy: #d8e4f2 !important;
  --exec-muted: #91a4bb !important;
  --exec-blue: #45a7ff !important;
  --exec-blue-dark: #2387e8 !important;
  --exec-blue-soft: rgba(69, 167, 255, 0.12) !important;
  --exec-border: rgba(148, 163, 184, 0.18) !important;
  --exec-border-strong: rgba(96, 165, 250, 0.30) !important;
  --exec-surface: #0b1b2e !important;
  --exec-shadow: 0 16px 38px rgba(0, 0, 0, 0.20) !important;
  --exec-shadow-hover: 0 20px 42px rgba(0, 0, 0, 0.26) !important;

  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 26px 34px;
  box-sizing: border-box;
  color: #f8fafc !important;
}

/* ---------- Header ---------- */

.optic-app-shell .executive-dashboard-header {
  min-height: 128px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 24px 28px !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(22, 119, 255, 0.16),
      transparent 30rem
    ),
    linear-gradient(135deg, #10233b, #0b1b2e) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.20) !important;
}

.optic-app-shell .executive-dashboard-heading {
  max-width: 760px !important;
  padding-right: 200px;
  text-align: left !important;
}

.optic-app-shell .executive-dashboard-header .eyebrow {
  margin: 0 0 7px !important;
  color: #45a7ff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.13em !important;
}

.optic-app-shell .executive-dashboard-header h1 {
  margin: 0 0 8px !important;
  color: #ffffff !important;
  font-size: clamp(30px, 3vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.04 !important;
}

.optic-app-shell .executive-dashboard-header .muted {
  margin: 0 !important;
  color: #a9bbcf !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.optic-app-shell .executive-dashboard-live-controls {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.optic-app-shell .executive-live-status {
  min-height: 34px !important;
  border: 1px solid rgba(72, 217, 139, 0.30) !important;
  background: rgba(22, 125, 76, 0.16) !important;
  color: #9af0bd !important;
}

.optic-app-shell .executive-refresh-btn {
  position: static !important;
  min-height: 36px;
  border: 1px solid rgba(96, 165, 250, 0.24) !important;
  background: #10253c !important;
  color: #ffffff !important;
}

/* ---------- Today's top priority ---------- */

.optic-app-shell .forge-priority-panel {
  gap: 24px !important;
  margin-bottom: 18px !important;
  padding: 22px 24px !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(69, 167, 255, 0.08),
      transparent 24rem
    ),
    linear-gradient(135deg, #0e2137, #0a1a2c) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16) !important;
}

.optic-app-shell .forge-priority-copy h2 {
  color: #ffffff !important;
}

.optic-app-shell .forge-priority-copy :is(p, span) {
  color: #9fb0c7 !important;
}

.optic-app-shell .forge-priority-label {
  background: rgba(69, 167, 255, 0.14) !important;
  color: #77c0ff !important;
}

.optic-app-shell .forge-priority-recommendation {
  color: #b3c3d6 !important;
}

.optic-app-shell .forge-priority-score span,
.optic-app-shell .forge-priority-values span {
  color: #8fa4bd !important;
}

.optic-app-shell .forge-priority-score strong {
  color: #ffffff !important;
}

.optic-app-shell .forge-priority-values {
  gap: 10px !important;
}

.optic-app-shell .forge-priority-values > div {
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 12px !important;
  background: #0d2239 !important;
}

.optic-app-shell .forge-priority-values strong {
  color: #ffffff !important;
}

/* Remove the old light urgency gradients */
.optic-app-shell .forge-priority-critical,
.optic-app-shell .forge-priority-high,
.optic-app-shell .forge-priority-medium {
  border-color: rgba(148, 163, 184, 0.18) !important;
  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(69, 167, 255, 0.08),
      transparent 24rem
    ),
    linear-gradient(135deg, #0e2137, #0a1a2c) !important;
}

.optic-app-shell
  :is(.forge-priority-critical, .forge-priority-high, .forge-priority-medium)
  .forge-priority-label {
  background: rgba(69, 167, 255, 0.14) !important;
  color: #77c0ff !important;
}

.optic-app-shell
  :is(.forge-priority-critical, .forge-priority-high, .forge-priority-medium)
  .forge-priority-score strong {
  color: #ffffff !important;
}

/* ---------- Daily briefing ---------- */

.optic-app-shell .morning-briefing {
  overflow: hidden !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #0d2137, #091827) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16) !important;
}

.optic-app-shell .morning-briefing-header {
  padding: 22px 24px !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
  background:
    radial-gradient(
      circle at top right,
      rgba(124, 58, 237, 0.13),
      transparent 34%
    ),
    linear-gradient(135deg, #10233b, #0c1d31) !important;
}

.optic-app-shell .morning-briefing-header h2 {
  color: #ffffff !important;
}

.optic-app-shell .morning-briefing-header .muted {
  color: #a9bbcf !important;
}

.optic-app-shell .morning-briefing-spark {
  background: rgba(167, 139, 250, 0.13) !important;
  color: #b7a1ff !important;
  box-shadow: none !important;
}

.optic-app-shell .morning-briefing-metrics {
  gap: 10px !important;
  padding: 16px 18px 18px !important;
  background: transparent !important;
}

.optic-app-shell .morning-briefing-metric {
  min-height: 90px;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 13px !important;
  background: #0c1d31 !important;
}

.optic-app-shell .morning-briefing-metric span {
  color: #9fb0c7 !important;
}

.optic-app-shell .morning-briefing-metric strong {
  color: #ffffff !important;
}

.optic-app-shell .morning-briefing-metric small {
  color: #7f95ae !important;
}

/* ---------- Metric cards ---------- */

.optic-app-shell .executive-metric-grid {
  grid-template-columns: repeat(4, minmax(190px, 1fr)) !important;
  gap: 12px !important;
}

.optic-app-shell .executive-metric {
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  background: linear-gradient(180deg, #0d2137, #091827) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16) !important;
}

.optic-app-shell .executive-metric:hover {
  border-color: rgba(96, 165, 250, 0.32) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22) !important;
}

.optic-app-shell .executive-metric-content span {
  color: #9fb0c7 !important;
}

.optic-app-shell .executive-metric-content strong {
  color: #ffffff !important;
}

.optic-app-shell .executive-metric-content small {
  color: #7f95ae !important;
}

/* ---------- All lower panels ---------- */

.optic-app-shell .executive-dashboard :is(
  .executive-panel,
  .dashboard-panel,
  .revenue-panel,
  .inventory-health-panel,
  .pricing-panel,
  .recent-sales-panel,
  .top-selling-panel,
  .slow-moving-panel,
  .market-intelligence-panel,
  .ai-insights-panel,
  .ai-executive-assistant,
  .ai-copilot,
  .forge-memory-panel
) {
  border-color: rgba(148, 163, 184, 0.18) !important;
  background: linear-gradient(180deg, #0d2137, #091827) !important;
  color: #f8fafc !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16) !important;
}

.optic-app-shell .executive-dashboard :is(
  .executive-panel-header,
  .dashboard-panel-header,
  .panel-header
) {
  border-bottom-color: rgba(148, 163, 184, 0.14) !important;
}

.optic-app-shell .executive-dashboard :is(
  .executive-panel-header h2,
  .executive-panel-header h3,
  .dashboard-panel-header h2,
  .dashboard-panel-header h3,
  .panel-header h2,
  .panel-header h3
) {
  color: #ffffff !important;
}

.optic-app-shell .executive-health-list > div,
.optic-app-shell .slow-moving-summary-card,
.optic-app-shell .pricing-summary-card,
.optic-app-shell .ai-executive-overview > div,
.optic-app-shell .ai-executive-recommendation,
.optic-app-shell .executive-action-row {
  border-color: rgba(148, 163, 184, 0.16) !important;
  background: #0c1d31 !important;
}

.optic-app-shell .executive-dashboard :is(
  .executive-health-list span,
  .slow-moving-summary-card small,
  .ai-executive-overview span,
  .ai-executive-recommendation small,
  .executive-action-copy small
) {
  color: #8fa4bd !important;
}

.optic-app-shell .executive-dashboard :is(
  .executive-health-list strong,
  .slow-moving-summary-card strong,
  .pricing-summary-card strong,
  .pricing-summary-card span,
  .ai-executive-overview strong,
  .ai-executive-recommendation strong,
  .executive-action-copy strong
) {
  color: #ffffff !important;
}

.optic-app-shell .ai-executive-header {
  border-bottom-color: rgba(148, 163, 184, 0.14) !important;
  background:
    radial-gradient(
      circle at top right,
      rgba(37, 99, 235, 0.13),
      transparent 38%
    ),
    linear-gradient(135deg, #10233b, #0c1d31) !important;
}

.optic-app-shell .ai-executive-header h2 {
  color: #ffffff !important;
}

.optic-app-shell .ai-executive-summary {
  border-color: rgba(96, 165, 250, 0.24) !important;
  background: rgba(22, 119, 255, 0.10) !important;
  color: #79c2ff !important;
}

.optic-app-shell .ai-executive-summary p {
  color: #b5c6d8 !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 1050px) {
  .optic-app-shell .executive-dashboard-heading {
    padding-right: 0;
  }

  .optic-app-shell .executive-dashboard-live-controls {
    position: static;
    margin-top: 16px;
  }

  .optic-app-shell .executive-dashboard-header {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
  }

  .optic-app-shell .executive-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 650px) {
  .optic-app-shell .executive-dashboard {
    padding: 14px;
  }

  .optic-app-shell .executive-metric-grid,
  .optic-app-shell .morning-briefing-metrics {
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   EXECUTIVE DASHBOARD EXACT FIX v2
   Built against the ACTUAL Portfolio Intelligence class names.
   Replace your existing ExecutiveDashboardMaster.css with this file.
   ========================================================= */

.executive-dashboard {
  --exec-bg: #06111f;
  --exec-surface: #0b1f34;
  --exec-surface-2: #0e2740;
  --exec-surface-3: #122f4c;
  --exec-border: #244662;
  --exec-border-hi: #3971a1;
  --exec-text: #f5f8ff;
  --exec-copy: #c7d5e7;
  --exec-muted: #8ca2bd;
  --exec-blue: #47a7ff;
  --exec-purple: #8b6cff;
}

/* =========================================================
   PORTFOLIO INTELLIGENCE — exact override
   The old portfolio-intelligence-final-polish.css explicitly
   forces white surfaces with !important. These selectors are
   intentionally MORE specific and come later.
   ========================================================= */

.executive-dashboard .portfolio-intelligence-section {
  --portfolio-blue: #47a7ff !important;
  --portfolio-blue-dark: #6cb9ff !important;
  --portfolio-ink: #f5f8ff !important;
  --portfolio-muted: #8ca2bd !important;
  --portfolio-border: #244662 !important;
  --portfolio-surface: #0b1f34 !important;
  color: var(--exec-text) !important;
}

/* KPI tiles shown at top of screenshot */
.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-metric-grid
  .executive-metric-card,
.executive-dashboard
  .portfolio-intelligence-section
  .executive-metric-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(71, 167, 255, 0.11), transparent 42%),
    linear-gradient(145deg, #102942 0%, #0a1c30 78%) !important;
  border: 1px solid var(--exec-border) !important;
  color: var(--exec-text) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.14) !important;
}

.executive-dashboard
  .portfolio-intelligence-section
  .executive-metric-card:hover {
  background:
    radial-gradient(circle at 100% 0%, rgba(71, 167, 255, 0.16), transparent 44%),
    linear-gradient(145deg, #14314f 0%, #0d2238 78%) !important;
  border-color: var(--exec-border-hi) !important;
}

.executive-dashboard
  .portfolio-intelligence-section
  .executive-metric-card span,
.executive-dashboard
  .portfolio-intelligence-section
  .executive-metric-card small {
  color: var(--exec-muted) !important;
}

.executive-dashboard
  .portfolio-intelligence-section
  .executive-metric-card strong {
  color: #ffffff !important;
}

.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-metric-grid
  .executive-metric-icon {
  background: rgba(58, 139, 255, .18) !important;
  color: #69b9ff !important;
  border: 1px solid rgba(105, 185, 255, .25) !important;
  box-shadow: none !important;
}

.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-metric-grid
  .executive-metric-icon svg {
  color: #69b9ff !important;
  stroke: #69b9ff !important;
}

/* Portfolio Action Queue shell */
.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-center {
  overflow: hidden;
  background:
    linear-gradient(180deg, #0d2238 0%, #091a2b 100%) !important;
  border: 1px solid var(--exec-border) !important;
  box-shadow: none !important;
}

/* Header is itself a button — force clean panel styling */
.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-header {
  width: 100% !important;
  padding: 20px 22px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--exec-border) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 95% 0%, rgba(71,167,255,.08), transparent 36%),
    #0d2238 !important;
  color: var(--exec-text) !important;
  box-shadow: none !important;
  text-align: left !important;
}

.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-header:hover {
  background:
    radial-gradient(circle at 95% 0%, rgba(71,167,255,.12), transparent 36%),
    #102943 !important;
}

.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-header h2 {
  color: #ffffff !important;
}

.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-header .muted {
  color: var(--exec-muted) !important;
}

.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-header-icons,
.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-header-icons svg {
  color: var(--exec-blue) !important;
  stroke: var(--exec-blue) !important;
}

/* THIS is the white row culprit */
.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-row {
  background:
    linear-gradient(135deg, #0c2238 0%, #091a2c 100%) !important;
  border-top-color: var(--exec-border) !important;
  border-right-color: var(--exec-border) !important;
  border-bottom-color: var(--exec-border) !important;
  border-radius: 13px !important;
  color: var(--exec-text) !important;
  box-shadow: none !important;
}

.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-row:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(135deg, #102b47 0%, #0d2238 100%) !important;
  border-top-color: var(--exec-border-hi) !important;
  border-right-color: var(--exec-border-hi) !important;
  border-bottom-color: var(--exec-border-hi) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.16) !important;
}

/* preserve action-colored left rail */
.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-grade {
  border-left: 4px solid #8b6cff !important;
}
.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-reprice {
  border-left: 4px solid #2ed29a !important;
}
.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-discount {
  border-left: 4px solid #f5b74b !important;
}
.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-hold {
  border-left: 4px solid #47a7ff !important;
}
.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-review {
  border-left: 4px solid #ff667d !important;
}

/* Row rank + action symbol */
.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-rank {
  background: #102942 !important;
  color: #9eb4cc !important;
  border: 1px solid #284a66 !important;
}

.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-symbol {
  background: rgba(71,167,255,.13) !important;
  color: #69b9ff !important;
  border: 1px solid rgba(105,185,255,.24) !important;
}

.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-symbol svg {
  color: #69b9ff !important;
  stroke: #69b9ff !important;
}

/* Exact row text */
.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-copy strong,
.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-decision strong {
  color: #f7faff !important;
}

.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-copy > span,
.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-copy p,
.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-action-decision span {
  color: #95abc5 !important;
}

/* Priority badges */
.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-priority-badge {
  border: 1px solid transparent !important;
  background: #122b45 !important;
  color: #b9cae0 !important;
}

.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-priority-critical {
  background: rgba(255, 102, 125, .13) !important;
  color: #ff8ca0 !important;
  border-color: rgba(255,102,125,.24) !important;
}

.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-priority-medium {
  background: rgba(71,167,255,.13) !important;
  color: #76bdff !important;
  border-color: rgba(71,167,255,.24) !important;
}

/* Command buttons — old polish file also forced pale backgrounds */
.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-command-button {
  min-height: 40px !important;
  border: 1px solid #31597d !important;
  background: #0d2944 !important;
  color: #edf5ff !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-command-button:hover {
  border-color: #4a8bc4 !important;
  background: #153a5d !important;
  color: #ffffff !important;
}

.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-command-primary {
  border-color: #2f6ba0 !important;
  background: linear-gradient(180deg, #16426b, #103353) !important;
  color: #ffffff !important;
}

.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-command-primary:hover {
  border-color: #57a6ee !important;
  background: linear-gradient(180deg, #1b527f, #143f66) !important;
}

.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-command-button svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

/* Status/message generated after actions */
.executive-dashboard
  .portfolio-intelligence-section
  .portfolio-command-message {
  margin: 14px 18px 0 !important;
  border: 1px solid #286450 !important;
  background: #0c3029 !important;
  color: #82e0bd !important;
  border-radius: 10px !important;
}

/* =========================================================
   MARKET INTELLIGENCE exact white removals
   ========================================================= */

.executive-dashboard .market-intelligence-summary > div {
  background: linear-gradient(145deg, #102942, #0a1c30) !important;
  border: 1px solid var(--exec-border) !important;
  box-shadow: none !important;
}

.executive-dashboard .market-intelligence-summary span {
  color: var(--exec-muted) !important;
}

.executive-dashboard .market-intelligence-summary strong {
  color: #ffffff !important;
}

.executive-dashboard .market-intelligence-provider-status {
  background: #081827 !important;
  border: 1px solid var(--exec-border) !important;
  color: var(--exec-muted) !important;
}

.executive-dashboard .market-intelligence-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(71,167,255,.07), transparent 40%),
    #0b1f34 !important;
  border: 1px solid var(--exec-border) !important;
  box-shadow: none !important;
}

.executive-dashboard .market-intelligence-card h3 {
  color: #ffffff !important;
}

.executive-dashboard .market-intelligence-card p {
  color: var(--exec-muted) !important;
}

.executive-dashboard .market-intelligence-prices div {
  background: #081827 !important;
  border: 1px solid #223f5a !important;
}

.executive-dashboard .market-intelligence-prices span {
  color: var(--exec-muted) !important;
}

.executive-dashboard .market-intelligence-prices strong {
  color: #f5f8ff !important;
}

.executive-dashboard .market-intelligence-recommendation {
  background: #081827 !important;
  border: 1px solid #223f5a !important;
  color: #c7d5e7 !important;
}

/* =========================================================
   ASK FORGE exact white/lavender removals
   ========================================================= */

.executive-dashboard .ai-copilot-header {
  background:
    radial-gradient(circle at 94% 0%, rgba(139,108,255,.14), transparent 34%),
    linear-gradient(135deg, #102943, #0b1d31) !important;
  border-bottom: 1px solid var(--exec-border) !important;
}

.executive-dashboard .ai-copilot-header h2 {
  color: #ffffff !important;
}

.executive-dashboard .ai-copilot-suggestions,
.executive-dashboard .ai-copilot-form {
  background: #081827 !important;
  border-color: var(--exec-border) !important;
}

.executive-dashboard .ai-copilot-suggestions button {
  background: #0d2944 !important;
  color: #dce8f7 !important;
  border: 1px solid #31597d !important;
}

.executive-dashboard .ai-copilot-messages {
  background: #091929 !important;
}

.executive-dashboard
  .ai-copilot-assistant
  .forge-message-content > p,
.executive-dashboard
  .ai-copilot-user
  .forge-message-content > p {
  background: #0d2944 !important;
  color: #d8e5f5 !important;
  border: 1px solid #294c69 !important;
}

.executive-dashboard .ai-copilot-form input {
  background: #061421 !important;
  color: #f5f8ff !important;
  border: 1px solid #315577 !important;
}

.executive-dashboard .ai-copilot-footer {
  background: #0a1b2d !important;
  border-top: 1px solid var(--exec-border) !important;
}

/* =========================================================
   Generic dashboard panels / tables
   ========================================================= */

.executive-dashboard .executive-panel,
.executive-dashboard .dashboard-panel,
.executive-dashboard .revenue-panel,
.executive-dashboard .inventory-health-panel,
.executive-dashboard .pricing-panel,
.executive-dashboard .recent-sales-panel,
.executive-dashboard .top-selling-panel,
.executive-dashboard .slow-moving-panel,
.executive-dashboard .market-intelligence-panel,
.executive-dashboard .ai-insights-panel,
.executive-dashboard .ai-executive-assistant,
.executive-dashboard .morning-briefing,
.executive-dashboard .ai-copilot,
.executive-dashboard .forge-memory-panel {
  border-color: var(--exec-border) !important;
  color: var(--exec-text) !important;
}

.executive-dashboard th {
  background: #0d243b !important;
  color: #aabbd0 !important;
}

.executive-dashboard td {
  color: #d3dfed !important;
}

.executive-dashboard tbody tr:hover td {
  background: #102943 !important;
}

/* toast readability */
body [class*="toast"][class*="success"],
body [class*="toast"][class*="success"] *,
body [class*="notification"][class*="success"],
body [class*="notification"][class*="success"] * {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* =========================================================
   EXECUTIVE DASHBOARD — FINAL WHITE HOLDOUTS
   ========================================================= */

/* Top Priority */
.executive-dashboard .forge-priority-panel,
.executive-dashboard .forge-priority-critical,
.executive-dashboard .forge-priority-high,
.executive-dashboard .forge-priority-medium,
.executive-dashboard .forge-priority-low {
  background:
    radial-gradient(circle at 92% 0%, rgba(71,167,255,.08), transparent 34%),
    linear-gradient(135deg, #0e2137, #091a2c) !important;
  border-color: var(--exec-border) !important;
  color: var(--exec-text) !important;
}

.executive-dashboard .forge-priority-panel button {
  background: #0d2944 !important;
  color: #f5f8ff !important;
  border-color: #31597d !important;
}

/* Portfolio metric selected/active state */
.executive-dashboard
.portfolio-intelligence-section
.executive-metric-card:is(.active, .selected, [aria-pressed="true"]) {
  background:
    radial-gradient(circle at 100% 0%, rgba(71,167,255,.16), transparent 42%),
    linear-gradient(145deg, #14314f, #0d2238) !important;
  color: #f5f8ff !important;
  border-color: var(--exec-border-hi) !important;
}

.executive-dashboard
.portfolio-intelligence-section
.executive-metric-card:is(.active, .selected, [aria-pressed="true"])
:is(span,strong,small) {
  color: #f5f8ff !important;
}

/* AI Insights message cards */
.executive-dashboard .ai-insights-panel article,
.executive-dashboard .ai-insights-panel [class*="insight"] {
  background: #0c1d31 !important;
  border-color: var(--exec-border) !important;
  color: #d8e4f2 !important;
}

.executive-dashboard .ai-insights-panel article p,
.executive-dashboard .ai-insights-panel [class*="insight"] p {
  color: #d8e4f2 !important;
}
/* FINAL EXECUTIVE INSIGHT WHITE CARD FIX */
.executive-dashboard .executive-insight {
  background: #0c1d31 !important;
  border-color: var(--exec-border) !important;
  color: #d8e4f2 !important;
}

.executive-dashboard .executive-insight p {
  color: #d8e4f2 !important;
}
/* LIVE PRODUCTION — MORNING BRIEFING WHITE FIX */
.executive-dashboard .morning-briefing-opportunity {
  background: #0c1d31 !important;
  border-color: var(--exec-border) !important;
  color: #f5f8ff !important;
}

.executive-dashboard .morning-briefing-opportunity
:is(p, h1, h2, h3, strong, span) {
  color: #d8e4f2 !important;
}

.executive-dashboard .morning-briefing-actions button {
  background: #0d2944 !important;
  border-color: #31597d !important;
  color: #f5f8ff !important;
}/* OPTIC DATA · Trading Cards · No-White Executive Override
   Import LAST in App.jsx.
*/

:root {
  --optic-dark-0: #06111f;
  --optic-dark-1: #081827;
  --optic-dark-2: #0b1d2f;
  --optic-dark-3: #0f263d;
  --optic-border: #244766;
  --optic-border-soft: #1c3a56;
  --optic-text: #f8fafc;
  --optic-text-soft: #cbd5e1;
  --optic-muted: #8fa8c2;
  --optic-blue: #4fb3ff;
  --optic-green: #42e2a4;
}

.tc-clean-content,
.tc-clean-content-ai,
.tc-clean-content-pricing {
  background: var(--optic-dark-0) !important;
  color: var(--optic-text) !important;
}

.tc-clean-content-ai :where(section, article) {
  background:
    radial-gradient(circle at top right, rgba(79,179,255,.08), transparent 35%),
    var(--optic-dark-2) !important;
  border-color: var(--optic-border) !important;
  color: var(--optic-text) !important;
  box-shadow: none !important;
}

.tc-clean-content-ai :where(
  .tc-command-center,
  .tc-command-hero,
  .tc-command-card,
  .tc-command-panel,
  .tc-command-section,
  .tc-command-workspace,
  .tc-command-assets,
  .tc-command-actions,
  .tc-asset-viewer,
  .tc-asset-panel,
  .tc-asset-card,
  .tc-workflow,
  .tc-workflow-panel,
  .tc-workflow-card,
  .tc-dashboard-card,
  .tc-ai-hero,
  .tc-ai-panel,
  .tc-ai-score-card,
  .mp-panel,
  .mp-preview-card,
  .mp-intelligence-card,
  .mp-optic-generator,
  .mp-summary-grid > article,
  .mp-specifics-panel
) {
  background:
    radial-gradient(circle at top right, rgba(79,179,255,.08), transparent 35%),
    var(--optic-dark-2) !important;
  border-color: var(--optic-border) !important;
  color: var(--optic-text) !important;
  box-shadow: none !important;
}

.tc-clean-content-ai :where(h1,h2,h3,h4,h5,h6,strong),
.tc-clean-content-pricing :where(h1,h2,h3,h4,h5,h6,strong) {
  color: var(--optic-text) !important;
}

.tc-clean-content-ai :where(p,span,small,label),
.tc-clean-content-pricing :where(p,span,small,label) {
  color: var(--optic-text-soft);
}

.tc-clean-content-ai :where(.eyebrow,.tc-ai-eyebrow,.tc-clean-code,[class*="eyebrow"],[class*="label"]) {
  color: var(--optic-muted) !important;
}

.tc-clean-content-ai img,
.tc-clean-content-pricing img {
  background: transparent !important;
}

.tc-clean-content-ai button,
.tc-clean-content-pricing button {
  border-color: var(--optic-border) !important;
}

.tc-clean-content-ai button:not(.primary-btn):not([class*="primary"]):not([class*="save"]):not([class*="generate"]),
.tc-clean-content-pricing button:not(.primary-btn):not([class*="primary"]):not([class*="save"]):not([class*="generate"]) {
  background: var(--optic-dark-3) !important;
  color: var(--optic-text) !important;
}

.tc-clean-content-ai :where(input,textarea,select),
.tc-clean-content-pricing :where(input,textarea,select) {
  background: var(--optic-dark-1) !important;
  border-color: var(--optic-border) !important;
  color: var(--optic-text) !important;
}

.tc-clean-content-ai :where(input,textarea)::placeholder,
.tc-clean-content-pricing :where(input,textarea)::placeholder {
  color: #718aa3 !important;
}

.tc-clean-content-ai :where([class*="row"],[class*="table"],[class*="summary"],[class*="metric"]) {
  border-color: var(--optic-border-soft) !important;
}

.tc-clean-content-ai hr,
.tc-clean-content-pricing hr {
  border-color: var(--optic-border-soft) !important;
}

.tc-clean-content-ai > section:first-child,
.tc-clean-content-ai .tc-ai-hero {
  background:
    radial-gradient(circle at 85% 0%, rgba(79,179,255,.12), transparent 38%),
    linear-gradient(135deg, #0b1d2f, #102b46) !important;
  border: 1px solid var(--optic-border) !important;
}

.tc-exec-header,
.tc-exec-metric {
  background:
    radial-gradient(circle at top right, rgba(79,179,255,.08), transparent 35%),
    var(--optic-dark-2) !important;
  border-color: var(--optic-border) !important;
}

.tc-exec-title-block h2,
.tc-exec-metric strong { color: var(--optic-text) !important; }

.tc-exec-metric-label,
.tc-clean-subtitle,
.tc-clean-code { color: var(--optic-muted) !important; }

.tc-exec-metric-icon {
  background: #123455 !important;
  color: var(--optic-blue) !important;
}

.tc-clean-content-ai [style*="background: white"],
.tc-clean-content-ai [style*="background:#fff"],
.tc-clean-content-ai [style*="background: #fff"],
.tc-clean-content-ai [style*="background-color: white"],
.tc-clean-content-ai [style*="background-color:#fff"],
.tc-clean-content-ai [style*="background-color: #fff"] {
  background: var(--optic-dark-2) !important;
  color: var(--optic-text) !important;
}
/* ==========================================================
   TRADING CARDS — DETAILS + BROWSER FINAL DARK PASS
   ========================================================== */

.tc-clean-content .tc-clean-detail-layout,
.tc-clean-content .tc-clean-card-slab,
.tc-clean-content .tc-clean-detail-grid,
.tc-clean-content .tc-clean-detail-grid > *,
.tc-clean-content [class*="detail-card"] {
  background: var(--optic-dark-2) !important;
  border-color: var(--optic-border) !important;
  color: var(--optic-text) !important;
  box-shadow: none !important;
}

.tc-clean-content .tc-clean-detail-grid :where(h1,h2,h3,h4,h5,h6,strong),
.tc-clean-content .tc-clean-card-slab :where(h1,h2,h3,h4,h5,h6,strong) {
  color: var(--optic-text) !important;
}

.tc-clean-content .tc-clean-detail-grid :where(p,span,small,label),
.tc-clean-content .tc-clean-card-slab :where(p,span,small,label) {
  color: var(--optic-text-soft) !important;
}

.tc-clean-browser [class*="card"] {
  background: var(--optic-dark-2) !important;
  border-color: var(--optic-border) !important;
  color: var(--optic-text) !important;
}

.tc-clean-browser [class*="card"] :where(h1,h2,h3,h4,h5,h6,strong) {
  color: var(--optic-text) !important;
}

.tc-clean-browser [class*="card"] :where(p,span,small) {
  color: var(--optic-text-soft) !important;
}/* ==========================================================
   OPTIC DATA · Trading Cards · LAST TWO WHITE KILL
   Targets only:
   1) Command Center
   2) Images / Card Studio

   Import LAST in App.jsx.
========================================================== */

:root {
  --cf0:#06111f;
  --cf1:#081827;
  --cf2:#0b1d2f;
  --cf3:#0f263d;
  --cf4:#123455;
  --cf-border:#244766;
  --cf-border-soft:#1c3a56;
  --cf-text:#f8fafc;
  --cf-soft:#cbd5e1;
  --cf-muted:#8fa8c2;
  --cf-blue:#4fb3ff;
}

/* ==========================================================
   COMMAND CENTER
   The remaining white is coming from nested DIV shells, not
   the section/article selectors we hit before. This deliberately
   strips light backgrounds from nested div shells and lets the
   dark parent show through.
========================================================== */

.tc-clean-content-ai {
  background: var(--cf0) !important;
  color: var(--cf-text) !important;
}

/* Kill remaining white/light DIV shells. */
.tc-clean-content-ai div {
  border-color: var(--cf-border-soft);
}

/* Direct workspace shells + nested module shells */
.tc-clean-content-ai > div,
.tc-clean-content-ai > div > div,
.tc-clean-content-ai > div > div > div,
.tc-clean-content-ai :where(section, article) {
  background-color: transparent !important;
  border-color: var(--cf-border) !important;
  color: var(--cf-text) !important;
  box-shadow: none !important;
}

/* Give the visible card/module boundaries a dark executive surface. */
.tc-clean-content-ai :where(
  [class*="panel"],
  [class*="card"],
  [class*="viewer"],
  [class*="workflow"],
  [class*="asset"],
  [class*="market"],
  [class*="intelligence"],
  [class*="lifecycle"],
  [class*="operation"]
) {
  background: var(--cf2) !important;
  border-color: var(--cf-border) !important;
  color: var(--cf-text) !important;
  box-shadow: none !important;
}

/* Preserve action buttons/rows as slightly lighter navy. */
.tc-clean-content-ai :where(
  button,
  [class*="action"],
  [class*="metric"],
  [class*="row"]
) {
  border-color: var(--cf-border-soft) !important;
}

.tc-clean-content-ai button {
  color: var(--cf-text) !important;
}

/* Force text readable after killing light surfaces. */
.tc-clean-content-ai :where(h1,h2,h3,h4,h5,h6,strong) {
  color: var(--cf-text) !important;
}

.tc-clean-content-ai :where(p,small,label) {
  color: var(--cf-soft) !important;
}

.tc-clean-content-ai :where(
  [class*="eyebrow"],
  [class*="label"],
  [class*="subtitle"]
) {
  color: var(--cf-muted) !important;
}

/* Do not paint over actual card photos. */
.tc-clean-content-ai img {
  background: transparent !important;
}

/* ==========================================================
   IMAGES / CARD STUDIO
   Exact active selectors found in the existing Trading Cards CSS:
   .tc-image-workspace-panel
   .tc-image-workspace-header
   .tc-image-workspace-frame
   .tc-image-view-btn
   .tc-image-upload-btn
========================================================== */

.tc-image-workspace,
.tc-image-workspace-panel {
  background: var(--cf0) !important;
  color: var(--cf-text) !important;
}

/* Each Front / Back card */
.tc-image-workspace-panel {
  overflow: hidden;
  border: 1px solid var(--cf-border) !important;
  border-radius: 14px !important;
  background: var(--cf2) !important;
  gap: 0 !important;
}

/* Front / Back header strip */
.tc-image-workspace-header {
  padding: 12px 14px !important;
  background: var(--cf3) !important;
  border-bottom: 1px solid var(--cf-border-soft) !important;
}

.tc-image-workspace-header span {
  color: var(--cf-blue) !important;
}

.tc-image-workspace-header h3 {
  color: var(--cf-text) !important;
}

/* Exact white image well */
.tc-image-workspace-frame,
.tc-image-workspace-frame.has-image {
  min-height: 390px;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--cf0) !important;
  box-shadow: none !important;
}

.tc-image-workspace-frame:hover,
.tc-image-workspace-frame.has-image:hover {
  border-color: var(--cf-border) !important;
  box-shadow: none !important;
}

.tc-image-workspace-frame img {
  background: var(--cf0) !important;
}

/* Buttons surrounding the image workspace */
.tc-image-view-btn,
.tc-image-upload-btn {
  border: 1px solid var(--cf-border) !important;
  background: var(--cf3) !important;
  color: var(--cf-text) !important;
}

.tc-image-view-btn:hover,
.tc-image-upload-btn:hover {
  background: var(--cf4) !important;
  color: #fff !important;
}

/* Empty-state copy */
.tc-image-empty-state {
  background: var(--cf0) !important;
  color: var(--cf-muted) !important;
}

.tc-image-empty-state strong {
  color: var(--cf-text) !important;
}

/* Card Studio outer hero/header: catch the remaining top white bar
   without needing its exact class name. */
.tc-clean-content:not(.tc-clean-content-ai) > div:first-child,
.tc-clean-content:not(.tc-clean-content-ai) > section:first-child {
  border-color: var(--cf-border) !important;
}

/* Image tab light utility surfaces */
.tc-clean-content .tc-image-workspace :where(
  header,
  footer,
  section,
  article,
  div
) {
  border-color: var(--cf-border-soft);
}

/* Catch hard-coded white inline styles inside only these two workspaces. */
.tc-clean-content-ai [style*="background: white"],
.tc-clean-content-ai [style*="background:#fff"],
.tc-clean-content-ai [style*="background: #fff"],
.tc-clean-content-ai [style*="background-color: white"],
.tc-clean-content-ai [style*="background-color:#fff"],
.tc-clean-content-ai [style*="background-color: #fff"],
.tc-image-workspace [style*="background: white"],
.tc-image-workspace [style*="background:#fff"],
.tc-image-workspace [style*="background: #fff"],
.tc-image-workspace [style*="background-color: white"],
.tc-image-workspace [style*="background-color:#fff"],
.tc-image-workspace [style*="background-color: #fff"] {
  background: var(--cf2) !important;
  color: var(--cf-text) !important;
}
.mobile-intake-shell {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at top,
      rgba(37, 99, 235, 0.18),
      transparent 36%
    ),
    #07111f;
  color: #f8fafc;
  padding: 18px;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.mobile-intake-header,
.mobile-intake-status,
.mobile-intake-counts,
.mobile-intake-capture,
.mobile-intake-actions,
.mobile-intake-batch,
.mobile-intake-center,
.mobile-intake-success {
  width: min(100%, 560px);
  margin-left: auto;
  margin-right: auto;
}

.mobile-intake-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.mobile-intake-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-intake-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.mobile-intake-brand div {
  display: flex;
  flex-direction: column;
}

.mobile-intake-brand strong {
  font-size: 16px;
  letter-spacing: 0.08em;
}

.mobile-intake-brand span {
  color: #93c5fd;
  font-size: 12px;
}

.mobile-intake-status {
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.88);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}

.mobile-intake-status h1 {
  margin: 4px 0 8px;
  font-size: 28px;
}

.mobile-intake-status p {
  margin: 0;
  color: #cbd5e1;
  line-height: 1.55;
}

.mobile-intake-eyebrow {
  color: #60a5fa !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.mobile-intake-counts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.mobile-intake-counts div {
  padding: 15px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.82);
}

.mobile-intake-counts span {
  display: block;
  margin-bottom: 4px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.mobile-intake-counts strong {
  font-size: 22px;
}

.mobile-intake-capture {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.mobile-intake-step {
  padding: 16px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.9);
}

.mobile-intake-step-heading {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.mobile-intake-step-heading > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2563eb;
  font-weight: 800;
}

.mobile-intake-step-heading div {
  display: flex;
  flex-direction: column;
}

.mobile-intake-step-heading strong {
  font-size: 16px;
}

.mobile-intake-step-heading small {
  margin-top: 2px;
  color: #94a3b8;
}

.mobile-intake-preview {
  width: 100%;
  max-height: 440px;
  margin-top: 14px;
  border-radius: 14px;
  object-fit: contain;
  background: #020617;
}

.mobile-intake-camera-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(96, 165, 250, 0.34);
  border-radius: 12px;
  background: #0f1f38;
  color: #e2e8f0;
  font-weight: 800;
  cursor: pointer;
}

.mobile-intake-camera-button input {
  display: none;
}

.mobile-intake-flow-arrow {
  justify-self: center;
  transform: rotate(90deg);
  color: #60a5fa;
}

.mobile-intake-error {
  width: min(100%, 560px);
  margin: 14px auto 0;
  padding: 12px 14px;
  border: 1px solid rgba(248, 113, 113, 0.32);
  border-radius: 12px;
  background: rgba(127, 29, 29, 0.3);
  color: #fecaca;
}

.mobile-intake-actions {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.mobile-intake-actions button,
.mobile-intake-send {
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
}

.mobile-intake-primary,
.mobile-intake-send {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: white;
}

.mobile-intake-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #172033;
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
}

.mobile-intake-actions button:disabled,
.mobile-intake-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mobile-intake-batch {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.9);
}

.mobile-intake-batch > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.mobile-intake-batch span {
  color: #94a3b8;
}

.mobile-intake-send {
  width: 100%;
  padding: 14px 16px;
}

.mobile-intake-center,
.mobile-intake-success {
  min-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mobile-intake-center p,
.mobile-intake-success p {
  max-width: 420px;
  color: #cbd5e1;
  line-height: 1.55;
}

.mobile-intake-success-icon {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(74, 222, 128, 0.34);
}

.mobile-intake-success strong {
  margin-top: 8px;
  color: #86efac;
}

.mobile-intake-spin {
  animation: mobile-intake-spin 0.9s linear infinite;
}

@keyframes mobile-intake-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 640px) {
  .mobile-intake-shell {
    padding: 14px;
  }

  .mobile-intake-status h1 {
    font-size: 24px;
  }

  .mobile-intake-counts {
    grid-template-columns: 1fr 1fr;
  }
}/*
 * Optic recognition editor layout.
 * Visual-only organization: no recognition or save behavior changes.
 */

.optic-recognition-editor {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 14px;
}

.optic-recognition-section {
  padding: 18px;
  border: 1px solid rgba(115, 150, 190, 0.22);
  border-radius: 12px;
  background: rgba(8, 27, 46, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.optic-recognition-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(115, 150, 190, 0.16);
}

.optic-recognition-section-header > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.optic-recognition-section-header strong {
  color: #f4f8fc;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.optic-recognition-section-header span {
  color: #8fa4b9;
  font-size: 12px;
  line-height: 1.45;
}

.editable-recognition-grid.optic-recognition-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: start;
}

.editable-recognition-grid.optic-recognition-grid > label,
.optic-recognition-notes {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  color: #b7c7d8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: none;
}

.editable-recognition-grid.optic-recognition-grid input,
.optic-recognition-notes textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid rgba(122, 156, 192, 0.33);
  border-radius: 8px;
  background: #0a1e32;
  color: #f3f7fb;
  outline: none;
  box-shadow: none;
}

.editable-recognition-grid.optic-recognition-grid input {
  min-height: 38px;
  padding: 8px 10px;
}

.optic-recognition-notes textarea {
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.45;
}

.editable-recognition-grid.optic-recognition-grid input:focus,
.optic-recognition-notes textarea:focus {
  border-color: rgba(56, 152, 255, 0.85);
  box-shadow: 0 0 0 2px rgba(56, 152, 255, 0.12);
}

.editable-recognition-grid.optic-recognition-grid label small {
  margin-top: -1px;
  color: #7890a7;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

.optic-recognition-span-2 {
  grid-column: span 2;
}

.editable-recognition-grid.optic-recognition-store-grid {
  grid-template-columns: 1.35fr 0.85fr 0.85fr;
}

.optic-recognition-notes-section {
  padding-bottom: 16px;
}

.optic-recognition-notes-section .optic-recognition-section-header {
  margin-bottom: 12px;
}

.optic-recognition-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}

@media (max-width: 1100px) {
  .editable-recognition-grid.optic-recognition-grid,
  .editable-recognition-grid.optic-recognition-store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .optic-recognition-span-2 {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .optic-recognition-section {
    padding: 14px;
  }

  .editable-recognition-grid.optic-recognition-grid,
  .editable-recognition-grid.optic-recognition-store-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .optic-recognition-span-2 {
    grid-column: auto;
  }

  .optic-recognition-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .optic-recognition-actions button {
    width: 100%;
    justify-content: center;
  }
}
.ai-workbench {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 4px 0 24px;
  color: #f8fafc;
}

.ai-workbench,
.ai-workbench * {
  box-sizing: border-box;
}

/* Header */

.ai-workbench-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 2px;
}

.ai-workbench-header h1 {
  margin: 0 0 5px;
  color: #f8fafc;
  font-size: clamp(1.55rem, 2vw, 2.15rem);
  line-height: 1.1;
}

.ai-workbench-header p {
  margin: 0;
  color: #94a3b8;
  font-size: 0.9rem;
}

.ai-workbench-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.ai-toolbar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid #26364d;
  border-radius: 9px;
  background: #111c2d;
  color: #e2e8f0;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    opacity 160ms ease;
}

.ai-toolbar-button:hover:not(:disabled) {
  border-color: #3b82f6;
  background: #17253a;
  transform: translateY(-1px);
}

.ai-toolbar-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.ai-toolbar-primary {
  border-color: #2563eb;
  background: linear-gradient(
    135deg,
    #2563eb,
    #1257d9
  );
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
}

.ai-toolbar-primary:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    #3b82f6,
    #1d4ed8
  );
}

/* Dashboard metrics */

.ai-dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ai-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid #223149;
  border-radius: 11px;
  background:
    linear-gradient(
      145deg,
      rgba(17, 29, 47, 0.98),
      rgba(13, 24, 40, 0.98)
    );
  box-shadow: 0 14px 28px rgba(2, 8, 23, 0.15);
}

.ai-stat-icon {
  display: grid;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 10px;
}

.ai-stat-card > div:last-child {
  min-width: 0;
}

.ai-stat-card span {
  display: block;
  color: #cbd5e1;
  font-size: 0.76rem;
  font-weight: 700;
}

.ai-stat-card strong {
  display: block;
  margin-top: 1px;
  color: #f8fafc;
  font-size: 1.55rem;
  line-height: 1.05;
}

.ai-stat-card small {
  display: block;
  margin-top: 5px;
  color: #94a3b8;
  font-size: 0.68rem;
}

.ai-stat-images .ai-stat-icon {
  background: rgba(124, 58, 237, 0.18);
  color: #8b5cf6;
}

.ai-stat-cards .ai-stat-icon {
  background: rgba(34, 197, 94, 0.16);
  color: #4ade80;
}

.ai-stat-recognized .ai-stat-icon {
  background: rgba(245, 158, 11, 0.16);
  color: #facc15;
}

.ai-stat-ready .ai-stat-icon {
  background: rgba(37, 99, 235, 0.18);
  color: #38bdf8;
}

/* Main workstation */

.ai-workspace {
  display: grid;
  grid-template-columns:
    minmax(290px, 0.88fr)
    minmax(500px, 1.65fr)
    minmax(310px, 0.95fr);
  gap: 12px;
  min-height: calc(100vh - 210px);
align-items: stretch;
}

.ai-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #223149;
  border-radius: 11px;
  background:
    linear-gradient(
      180deg,
      rgba(16, 28, 45, 0.98),
      rgba(11, 21, 35, 0.98)
    );
  box-shadow: 0 18px 38px rgba(2, 8, 23, 0.18);
}

.ai-panel-header {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid #223149;
  background: rgba(12, 22, 37, 0.72);
}

.ai-panel-header h2 {
  margin: 0;
  color: #f8fafc;
  font-size: 0.91rem;
  font-weight: 900;
}

/* Left card browser */

.ai-card-browser-panel {
  max-height: 660px;
}

.ai-card-list {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 9px;
}

.ai-card-list::-webkit-scrollbar,
.ai-assistant-content::-webkit-scrollbar,
.ai-recognition-content::-webkit-scrollbar {
  width: 8px;
}

.ai-card-list::-webkit-scrollbar-thumb,
.ai-assistant-content::-webkit-scrollbar-thumb,
.ai-recognition-content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #334155;
}

.ai-card-row {
  display: grid;
  grid-template-columns: 28px 118px minmax(0, 1fr);
  gap: 9px;
  width: 100%;
  min-height: 140px;
  padding: 8px;
  border: 1px solid #203048;
  border-radius: 9px;
  background: #101c2e;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}

.ai-card-row:hover {
  border-color: #31598d;
  background: #14233a;
  transform: translateY(-1px);
}

.ai-card-row.is-selected {
  border-color: #087cff;
  background:
    linear-gradient(
      135deg,
      rgba(10, 39, 74, 0.95),
      rgba(15, 31, 53, 0.95)
    );
  box-shadow:
    inset 0 0 0 1px rgba(59, 130, 246, 0.15),
    0 0 0 1px rgba(37, 99, 235, 0.1);
}

.ai-card-number {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  align-self: center;
  border-radius: 7px;
  background: #26374e;
  color: #dbeafe;
  font-size: 0.73rem;
  font-weight: 900;
}

.ai-card-row.is-selected .ai-card-number {
  background: #1265d8;
  color: #ffffff;
}

.ai-card-thumbnails {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}

.ai-card-thumbnails img,
.ai-missing-image {
  display: block;
  width: 100%;
  height: 122px;
  object-fit: contain;
  border: 1px solid #293a52;
  border-radius: 5px;
  background: #07111f;
}

.ai-missing-image {
  display: grid;
  place-items: center;
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 800;
}

.ai-card-summary {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.ai-card-summary strong {
  overflow: hidden;
  color: #f8fafc;
  font-size: 0.79rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-card-summary > span:not(.ai-card-status) {
  overflow: hidden;
  color: #94a3b8;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-card-status {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.61rem;
  font-weight: 900;
}

.ai-card-status-ready {
  background: rgba(34, 197, 94, 0.14);
  color: #4ade80;
}

.ai-card-status-processing {
  background: rgba(37, 99, 235, 0.16);
  color: #60a5fa;
}

.ai-card-status-complete {
  background: rgba(124, 58, 237, 0.18);
  color: #c084fc;
}

.ai-card-status-missing-back {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
}

.ai-card-status-error {
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
}

.ai-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 9px 12px;
  border-top: 1px solid #223149;
  background: rgba(8, 17, 30, 0.82);
}

.ai-status-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #94a3b8;
  font-size: 0.58rem;
}

.ai-status-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.ai-status-legend .is-ready {
  background: #22c55e;
}

.ai-status-legend .is-processing {
  background: #3b82f6;
}

.ai-status-legend .is-complete {
  background: #8b5cf6;
}

.ai-status-legend .is-review {
  background: #f59e0b;
}

/* Center recognition workspace */

.ai-card-browser-panel {
    min-height: calc(100vh - 210px);
}

.ai-card-navigation {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ai-card-navigation span {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
  font-size: 0.68rem;
  font-weight: 900;
}

.ai-card-navigation button {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid #26364d;
  border-radius: 7px;
  background: #101c2e;
  color: #cbd5e1;
  cursor: pointer;
}

.ai-card-navigation button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.ai-recognition-content {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
}

.ai-card-image-viewer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  padding: 12px 14px;
  border-bottom: 1px solid #223149;
}

.ai-image-view {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.ai-image-view > span {
  color: #e2e8f0;
  font-size: 0.7rem;
  font-weight: 900;
}

.ai-image-view img,
.ai-image-empty {
  display: block;
  width: 100%;
  height: 410;
  object-fit: contain;
  border: 1px solid #26384f;
  border-radius: 8px;
  background:
    radial-gradient(
      circle at center,
      #111f34,
      #07111f 70%
    );
}

.ai-image-empty {
  display: grid;
  place-items: center;
  color: #64748b;
  font-size: 0.75rem;
}

.ai-recognition-results {
  padding: 12px 14px;
}

.ai-recognition-results .editable-recognition-result {
  margin: 0;
}

.ai-recognition-results .editable-recognition-header {
  padding-bottom: 10px;
}

.ai-recognition-results .editable-recognition-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
}

.ai-recognition-results .editable-recognition-details p {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 8px 9px;
  border: 1px solid #24364e;
  border-radius: 7px;
  background: #0d192a;
}

.ai-recognition-results .editable-recognition-details span {
  color: #94a3b8;
  font-size: 0.68rem;
}

.ai-recognition-results .editable-recognition-details strong {
  overflow: hidden;
  color: #f8fafc;
  font-size: 0.7rem;
  text-overflow: ellipsis;
}

.ai-recognition-results .editable-recognition-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-recognition-results input,
.ai-recognition-results textarea {
  border-color: #2b3d56;
  background: #0b1626;
  color: #f8fafc;
}

.ai-recognition-actions {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr)
    minmax(0, 1.25fr);
  gap: 9px;
  margin-top: auto;
  padding: 12px 14px;
  border-top: 1px solid #223149;
}

.ai-primary-action,
.ai-secondary-action {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 900;
  cursor: pointer;
}

.ai-primary-action {
  border: 1px solid #2563eb;
  background: linear-gradient(
    135deg,
    #2563eb,
    #1459db
  );
  color: #ffffff;
}

.ai-secondary-action {
  border: 1px solid #2b3d56;
  background: #101c2e;
  color: #cbd5e1;
}

.ai-primary-action:disabled,
.ai-secondary-action:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.ai-empty-state {
  display: flex;
  min-height: 190px;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  color: #64748b;
  text-align: center;
}

.ai-empty-state strong {
  color: #e2e8f0;
}

.ai-empty-state p {
  max-width: 280px;
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.55;
}

.ai-error-state {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 9px;
  background: rgba(127, 29, 29, 0.16);
  color: #fca5a5;
}

.ai-error-state p {
  margin: 5px 0 0;
}

/* Right assistant and queue */

.ai-assistant-panel {
    min-height: calc(100vh - 210px);
}

.ai-assistant-content {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 11px;
  overflow-y: auto;
  padding: 12px;
}

.ai-assistant-card {
  padding: 12px;
  border: 1px solid #24364e;
  border-radius: 9px;
  background: #0d192a;
}

.ai-assistant-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 11px;
  color: #f8fafc;
  font-size: 0.78rem;
}

.ai-summary-list {
  display: grid;
  gap: 8px;
}

.ai-summary-list p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: #94a3b8;
  font-size: 0.7rem;
}

.ai-summary-list strong {
  color: #f8fafc;
}

.ai-muted {
  margin: 0;
  color: #94a3b8;
  font-size: 0.71rem;
  line-height: 1.55;
}

.ai-import-all-button,
.ai-export-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border-radius: 8px;
  font: inherit;
  font-size: 0.73rem;
  font-weight: 900;
  cursor: pointer;
}

.ai-import-all-button {
  margin-top: auto;
  border: 1px solid #299043;
  background: linear-gradient(
    135deg,
    #23843b,
    #1f7435
  );
  color: #ffffff;
}

.ai-export-button {
  border: 1px solid #2b3d56;
  background: #101c2e;
  color: #e2e8f0;
}

/* Bottom progress */

.ai-batch-progress {
  display: grid;
  grid-template-columns:
    minmax(260px, 1.3fr)
    auto
    minmax(220px, 1fr);
  gap: 24px;
  align-items: center;
  min-height: 72px;
  padding: 13px 16px;
  border: 1px solid #223149;
  border-radius: 11px;
  background:
    linear-gradient(
      145deg,
      rgba(16, 28, 45, 0.98),
      rgba(11, 21, 35, 0.98)
    );
}

.ai-batch-progress > div {
  display: grid;
  gap: 8px;
}

.ai-batch-progress span,
.ai-batch-progress strong {
  font-size: 0.7rem;
}

.ai-batch-progress strong {
  color: #e2e8f0;
}

.ai-batch-progress > span:last-child {
  justify-self: end;
  color: #94a3b8;
}

.ai-progress-track {
  position: relative;
  width: 100%;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #1b2a3f;
}

.ai-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #22c55e,
    #4ade80
  );
  transition: width 240ms ease;
}

/* Responsive */

@media (max-width: 1450px) {
  .ai-workspace {
    grid-template-columns:
      minmax(260px, 0.8fr)
      minmax(450px, 1.5fr)
      minmax(280px, 0.9fr);
  }

  .ai-card-row {
    grid-template-columns: 26px 100px minmax(0, 1fr);
  }

  .ai-card-thumbnails img,
  .ai-missing-image {
    height: 78px;
  }
}

@media (max-width: 1180px) {
  .ai-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-workspace {
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.5fr);
  }

  .ai-assistant-panel {
    grid-column: 1 / -1;
    max-height: none;
  }

  .ai-assistant-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-import-all-button,
  .ai-export-button {
    margin: 0;
  }
}

@media (max-width: 860px) {
  .ai-workbench-header {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-workbench-actions {
    justify-content: flex-start;
  }

  .ai-dashboard,
  .ai-workspace {
    grid-template-columns: 1fr;
  }

  .ai-card-browser-panel,
  .ai-recognition-panel,
  .ai-assistant-panel {
    max-height: none;
  }

  .ai-card-list {
    max-height: 480px;
  }

  .ai-card-image-viewer,
  .ai-recognition-results .editable-recognition-details,
  .ai-recognition-results .editable-recognition-grid,
  .ai-recognition-actions,
  .ai-assistant-content {
    grid-template-columns: 1fr;
  }

  .ai-batch-progress {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ai-batch-progress > span:last-child {
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .ai-dashboard {
    grid-template-columns: 1fr;
  }

  .ai-toolbar-button {
    width: 100%;
  }

  .ai-card-row {
    grid-template-columns: 25px 96px minmax(0, 1fr);
  }

  .ai-image-view img,
  .ai-image-empty {
    height: 280px;
  }
}
.ai-card-row.is-queued {
  border-color: rgba(34, 197, 94, 0.75);
  background:
    linear-gradient(
      135deg,
      rgba(13, 61, 38, 0.78),
      rgba(14, 35, 39, 0.92)
    );
  box-shadow:
    inset 0 0 0 1px rgba(34, 197, 94, 0.12),
    0 0 18px rgba(34, 197, 94, 0.08);
}

.ai-card-status-queued {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
}

.ai-import-queue-card {
  min-height: 120px;
}

.ai-import-queue-list {
  display: grid;
  gap: 7px;
}

.ai-import-queue-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  gap: 9px;
  align-items: center;
  width: 100%;
  padding: 9px;
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 7px;
  background: rgba(13, 61, 38, 0.24);
  color: #e2e8f0;
  text-align: left;
  cursor: pointer;
}

.ai-import-queue-item:hover {
  border-color: rgba(34, 197, 94, 0.65);
  background: rgba(13, 61, 38, 0.38);
}

.ai-import-queue-item > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.ai-import-queue-item strong,
.ai-import-queue-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-import-queue-item strong {
  font-size: 0.7rem;
}

.ai-import-queue-item small {
  color: #94a3b8;
  font-size: 0.61rem;
}

.ai-import-queue-item > svg {
  color: #4ade80;
}

.ai-import-queue-number {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 6px;
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  font-size: 0.68rem;
  font-weight: 900;
}
/* =========================================================
   OPTIC PHONE INTAKE
   ========================================================= */

.ai-phone-intake-button {
  border-color: rgba(96, 165, 250, 0.42);
  background:
    linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.18),
      rgba(59, 130, 246, 0.08)
    );
}

.ai-phone-intake-button:hover:not(:disabled) {
  border-color: rgba(96, 165, 250, 0.7);
  background:
    linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.28),
      rgba(59, 130, 246, 0.14)
    );
}

.ai-phone-intake-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;

  display: grid;
  place-items: center;

  padding: 24px;

  background:
    rgba(2, 6, 23, 0.82);

  backdrop-filter:
    blur(9px);
}

.ai-phone-intake-modal {
  position: relative;

  width:
    min(
      100%,
      470px
    );

  max-height:
    calc(
      100vh -
      40px
    );

  overflow-y: auto;

  padding:
    30px;

  border:
    1px solid
    rgba(
      96,
      165,
      250,
      0.28
    );

  border-radius:
    24px;

  background:
    linear-gradient(
      180deg,
      #111c31,
      #08111f
    );

  box-shadow:
    0 30px 90px
      rgba(
        0,
        0,
        0,
        0.5
      );
}

.ai-phone-intake-close {
  position: absolute;
  top: 15px;
  right: 15px;

  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border:
    1px solid
    rgba(
      148,
      163,
      184,
      0.18
    );

  border-radius:
    10px;

  background:
    rgba(
      15,
      23,
      42,
      0.7
    );

  color:
    #cbd5e1;

  cursor: pointer;
}

.ai-phone-intake-modal-header {
  text-align: center;
}

.ai-phone-intake-modal-header h2 {
  margin:
    7px 0;

  color:
    #f8fafc;

  font-size:
    27px;
}

.ai-phone-intake-modal-header > p:last-child {
  max-width:
    360px;

  margin:
    0 auto;

  color:
    #94a3b8;

  line-height:
    1.55;
}

.ai-phone-intake-icon {
  display: grid;
  place-items: center;

  width: 58px;
  height: 58px;

  margin:
    0 auto
    14px;

  border:
    1px solid
    rgba(
      96,
      165,
      250,
      0.34
    );

  border-radius:
    16px;

  background:
    rgba(
      37,
      99,
      235,
      0.14
    );

  color:
    #60a5fa;
}

.ai-phone-intake-qr {
  display: grid;
  place-items: center;

  width:
    min(
      100%,
      310px
    );

  min-height:
    280px;

  margin:
    24px auto;

  padding:
    18px;

  border-radius:
    20px;

  background:
    #ffffff;
}

.ai-phone-intake-qr img {
  display: block;

  width:
    100%;

  height:
    auto;
}

.ai-phone-intake-session-info {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;

  margin-bottom:
    14px;
}

.ai-phone-intake-session-info div {
  padding:
    13px;

  border:
    1px solid
    rgba(
      148,
      163,
      184,
      0.14
    );

  border-radius:
    12px;

  background:
    rgba(
      15,
      23,
      42,
      0.72
    );
}

.ai-phone-intake-session-info span {
  display: block;

  margin-bottom:
    4px;

  color:
    #64748b;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.ai-phone-intake-session-info strong {
  color:
    #86efac;

  font-size:
    13px;
}

.ai-phone-intake-copy {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  width: 100%;

  min-height:
    46px;

  border:
    1px solid
    rgba(
      96,
      165,
      250,
      0.32
    );

  border-radius:
    11px;

  background:
    rgba(
      37,
      99,
      235,
      0.13
    );

  color:
    #dbeafe;

  font-weight:
    800;

  cursor: pointer;
}

.ai-phone-intake-help {
  margin:
    15px 0 0;

  color:
    #94a3b8;

  font-size:
    12px;

  line-height:
    1.55;

  text-align:
    center;
}

.ai-phone-intake-error {
  margin:
    12px 0;

  padding:
    11px 13px;

  border:
    1px solid
    rgba(
      248,
      113,
      113,
      0.28
    );

  border-radius:
    10px;

  background:
    rgba(
      127,
      29,
      29,
      0.24
    );

  color:
    #fecaca;

  font-size:
    12px;
}

.ai-phone-intake-spinner {
  animation:
    ai-phone-intake-spin
    0.85s linear
    infinite;
}

@keyframes ai-phone-intake-spin {
  to {
    transform:
      rotate(
        360deg
      );
  }
}
/* =========================================================
   PHONE INTAKE BATCH QUEUE
   ========================================================= */

.ai-phone-batches-panel {
  margin: 14px 0;
  padding: 16px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.82);
}

.ai-phone-batches-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.ai-phone-batches-heading > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ai-phone-batches-heading strong {
  color: #f8fafc;
  font-size: 15px;
}

.ai-phone-batches-heading span,
.ai-phone-batch-item span,
.ai-phone-batches-empty {
  color: #94a3b8;
  font-size: 12px;
}

.ai-phone-batches-list {
  display: grid;
  gap: 9px;
  margin-top: 13px;
}

.ai-phone-batch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 13px;

  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;

  background: rgba(2, 6, 23, 0.32);
}

.ai-phone-batch-item > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-phone-batch-item strong {
  color: #e2e8f0;
}

.ai-phone-batches-empty {
  margin: 13px 0 0;
}

@media (max-width: 700px) {
  .ai-phone-batch-item {
    align-items: stretch;
    flex-direction: column;
  }
}/* ==========================================================
   OPTIC DATA · Optic Intelligence Dashboard
   Balanced executive layout
========================================================== */

.forge-memory-panel {
  width: 100%;
  box-sizing: border-box;
}

.forge-memory-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.forge-memory-header > div {
  min-width: 0;
}

.forge-memory-brain {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* Top intelligence metrics */

.forge-intelligence-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.forge-intelligence-metric {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  background: rgba(10, 29, 47, 0.72);
  box-sizing: border-box;
}

.forge-intelligence-metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.forge-intelligence-metric > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.forge-intelligence-metric span {
  font-size: 12px;
  line-height: 1.25;
}

.forge-intelligence-metric strong {
  display: block;
  font-size: 18px;
  line-height: 1.2;
}

.forge-intelligence-metric small {
  display: block;
  line-height: 1.35;
}

/* Balanced lower intelligence workspace */

.forge-memory-lower-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  margin-top: 18px;
}

.forge-memory-lower-column {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  min-width: 0;
}

.forge-memory-lower-grid .forge-top-priority,
.forge-memory-lower-panel {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.forge-memory-lower-grid .forge-top-priority {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  background: rgba(10, 29, 47, 0.72);
}

.forge-top-priority-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.forge-top-priority h3 {
  margin: 4px 0 6px;
}

.forge-top-priority p {
  margin-top: 0;
}

.forge-memory-lower-panel {
  height: 100%;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  background: rgba(10, 29, 47, 0.72);
}

.forge-memory-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.forge-memory-patterns {
  display: block;
}

.forge-memory-pattern {
  padding: 12px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.forge-memory-pattern:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.forge-memory-pattern:first-of-type {
  padding-top: 0;
}

.forge-memory-pattern p {
  margin: 5px 0 0;
  line-height: 1.45;
}

.forge-memory-changes {
  align-self: stretch;
}

.forge-change-list {
  display: grid;
  gap: 8px;
}

.forge-change-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 42px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.forge-change-row:last-child {
  border-bottom: 0;
}

.forge-change-row > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.forge-change-row > strong {
  flex: 0 0 auto;
  text-align: right;
}

.forge-memory-empty {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Responsive */

@media (max-width: 1180px) {
  .forge-intelligence-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .forge-memory-lower-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .forge-intelligence-metrics {
    grid-template-columns: 1fr;
  }

  .forge-memory-header {
    gap: 14px;
  }

  .forge-memory-lower-grid .forge-top-priority {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .forge-memory-lower-grid .forge-top-priority > strong {
    grid-column: 2;
  }
}
/* ==========================================================
   OPTIC DATA · Intelligence Platform Executive Dashboard
   Compact Investor Demo Layout
========================================================== */

.executive-dashboard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  min-width: 0;
  color: #0f172a;
}

/* ==========================================================
   Header
========================================================== */

.executive-dashboard-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 118px;
  padding: 22px 28px;
  overflow: hidden;
  border: 1px solid #e3e9f2;
  border-radius: 18px;
  background:
    radial-gradient(
      circle at top right,
      rgba(37, 99, 235, 0.1),
      transparent 34%
    ),
    linear-gradient(135deg, #ffffff, #fbfdff);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.executive-dashboard-heading {
  max-width: 760px;
  text-align: center;
}

.executive-dashboard-header .eyebrow {
  margin-bottom: 6px;
  color: #1677ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.executive-dashboard-header h1 {
  margin: 0 0 7px;
  color: #0f172a;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.executive-dashboard-header .muted {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.5;
}

.executive-refresh-btn {
  position: absolute;
  top: 16px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border: none;
  border-radius: 9px;
  background: #0f1d35;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.executive-refresh-btn:hover {
  background: #172b4d;
}

.executive-refresh-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.is-spinning {
  animation: executive-spin 0.8s linear infinite;
}

@keyframes executive-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================
   Metric Cards
========================================================== */

.executive-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 12px;
}

.executive-metric {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  min-height: 126px;
  padding: 16px 17px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 7px 20px rgba(15, 23, 42, 0.045);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.executive-metric::after {
  position: absolute;
  right: -35px;
  bottom: -48px;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  opacity: 0.05;
}

.executive-metric:hover {
  transform: translateY(-2px);
  border-color: #cbdaf0;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.075);
}

.executive-metric-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  background: currentColor;
}

.executive-metric-icon svg {
  color: #ffffff;
}

.executive-metric-content {
  min-width: 0;
  padding-top: 1px;
}

.executive-metric-content span {
  display: block;
  min-height: 28px;
  margin-bottom: 5px;
  color: #475569;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

.executive-metric-content strong {
  display: block;
  max-width: 100%;
  color: #0f172a;
  font-size: clamp(20px, 1.6vw, 25px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}



.executive-metric-content small {
  display: block;
  margin-top: 7px;
  color: #8190a5;
  font-size: 11px;
  line-height: 1.35;
}

.executive-metric-green {
  color: #16a34a;
}

.executive-metric-emerald {
  color: #059669;
}

.executive-metric-blue {
  color: #2563eb;
}

.executive-metric-violet {
  color: #7c3aed;
}

.executive-metric-orange {
  color: #ea580c;
}

.executive-metric-amber {
  color: #d97706;
}

.executive-metric-slate {
  color: #475569;
}

/* ==========================================================
   Main Command Grid
========================================================== */

.executive-command-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.65fr)
    minmax(240px, 0.72fr)
    minmax(250px, 0.78fr);
  gap: 12px;
  align-items: stretch;
}



.executive-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 7px 20px rgba(15, 23, 42, 0.045);
}

.executive-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.executive-panel-header .eyebrow {
  margin: 0 0 4px;
  color: #1677ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.executive-panel-header h2 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
}

.executive-panel-header > strong {
  color: #16a34a;
  font-size: 17px;
  font-weight: 750;
  white-space: nowrap;
}

.executive-chart-panel {
  min-height: 300px;
}

.executive-chart {
  display: block;
  width: 100%;
  height: 250px;
  min-width: 0;
  min-height: 250px;
  overflow: visible;
}

.executive-chart .recharts-responsive-container,
.executive-chart .recharts-wrapper,
.executive-chart svg {
  width: 100% !important;
  height: 100% !important;
}

.executive-chart text {
  font-size: 11px;
}

.executive-chart-empty {
  display: grid;
  width: 100%;
  height: 250px;
  place-items: center;
  color: #1e293b
  font-size: 13px;
}

/* ==========================================================
   Inventory Health
========================================================== */

.executive-health-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.executive-health-list > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 43px;
  padding: 9px 11px;
  border: 1px solid #e5ebf3;
  border-radius: 11px;
  background: #fafcff;
}

.executive-health-list svg {
  color: #2563eb;
}

.executive-health-list span {
  color: #64748b;
  font-size: 12px;
}

.executive-health-list strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
}

.executive-health-list .health-value {
  color: #16a34a;
}

/* ==========================================================
   AI Insights
========================================================== */

.executive-insight-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.executive-insight {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 55px;
  padding: 9px 10px;
  border: 1px solid #dce8fa;
  border-radius: 11px;
  background: #fbfdff;
}

.executive-insight-icon,
.executive-insight > div {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  background: #eaf3ff;
  color: #2563eb;
}

.executive-insight p {
  margin: 0;
  color: #334155;
  font-size: 12px;
  line-height: 1.4;
}

.executive-insight-warning {
  border-color: #f8dfaa;
  background: #fffdf8;
}

.executive-insight-warning .executive-insight-icon,
.executive-insight-warning > div {
  background: #fff4d9;
  color: #d97706;
}

/* ==========================================================
   Recent Sales Table
========================================================== */

.executive-sales-panel {
  padding: 16px 18px 10px;
}

.executive-sales-panel .executive-panel-header {
  margin-bottom: 7px;
}

.executive-sales-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.executive-sales-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.executive-sales-table th,
.executive-sales-table td {
  padding: 8px 9px;
  border-bottom: 1px solid #edf1f6;
  text-align: left;
  font-size: 11px;
}

.executive-sales-table th {
  color: #475569;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.executive-sales-table th:last-child,
.executive-sales-table td:last-child {
  text-align: right;
}

.executive-sales-table tbody tr:last-child td {
  border-bottom: none;
}

.executive-sales-table tbody tr:hover {
  background: #f8fbff;
}

.executive-sales-table .payment-method {
  color: #475569;
  font-weight: 650;
}

.executive-sales-table .sale-total {
  color: #16a34a;
  font-weight: 800;
  white-space: nowrap;
}

/* ==========================================================
   Loading and Error
========================================================== */

.executive-dashboard-loading,
.executive-dashboard-error {
  display: grid;
  min-height: 360px;
  place-items: center;
  padding: 40px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
  color: #64748b;
  text-align: center;
}

.executive-dashboard-error {
  align-content: center;
  gap: 12px;
}

.executive-dashboard-error svg {
  color: #dc2626;
}

.executive-dashboard-error h2,
.executive-dashboard-error p {
  margin: 0;
}

/* ==========================================================
   Responsive Layout
========================================================== */

@media (max-width: 1280px) {
  .executive-metric-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .executive-command-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.8fr);
  }

  .executive-command-grid > :last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .executive-command-grid {
    grid-template-columns: 1fr;
  }

  .executive-command-grid > :last-child {
    grid-column: auto;
  }

  .executive-dashboard-header {
    justify-content: flex-start;
  }

  .executive-dashboard-heading {
    padding-right: 110px;
    text-align: left;
  }
}

@media (max-width: 680px) {
  .executive-dashboard {
    gap: 12px;
  }

  .executive-dashboard-header {
    flex-direction: column;
    min-height: 0;
    padding: 20px;
  }

  .executive-dashboard-heading {
    padding-right: 0;
  }

  .executive-refresh-btn {
    position: static;
    width: 100%;
    margin-top: 14px;
  }

  .executive-metric-grid {
    grid-template-columns: 1fr;
  }

  .executive-metric {
    min-height: 112px;
  }

  .executive-panel {
    padding: 16px;
  }

  .executive-sales-table {
    min-width: 620px;
  }
}
.executive-revenue-svg {
  display: block;
  width: 100%;
  height: 250px;
  overflow: visible;
}

.executive-chart-grid-line {
  stroke: #e2e8f0;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.executive-chart-axis-label {
  fill: #64748b;
  font-size: 11px;
}

.executive-chart-line {
  fill: none;
  stroke: #2563eb;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.executive-chart-point {
  fill: #2563eb;
  stroke: #ffffff;
  stroke-width: 2;
}
/* ==========================================================
   Dashboard Skeleton
========================================================== */

.executive-dashboard-skeleton-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 118px;
  padding: 22px 28px;
  border: 1px solid #e3e9f2;
  border-radius: 18px;
  background: #ffffff;
}

.executive-dashboard-skeleton-header > div {
  display: flex;
  width: min(620px, 75%);
  flex-direction: column;
  gap: 10px;
}

.executive-skeleton-eyebrow {
  width: 145px;
  height: 11px;
}

.executive-skeleton-title {
  width: min(420px, 85%);
  height: 36px;
  border-radius: 12px;
}

.executive-skeleton-subtitle {
  width: min(560px, 100%);
  height: 14px;
}

.executive-skeleton-button {
  width: 105px;
  height: 38px;
  border-radius: 9px;
}

.executive-skeleton-chart {
  display: flex;
  min-height: 300px;
  flex-direction: column;
  gap: 11px;
}

.executive-skeleton-panel-label {
  width: 110px;
  height: 10px;
}

.executive-skeleton-panel-title {
  width: 185px;
  height: 19px;
}

.executive-skeleton-chart-area {
  width: 100%;
  height: 225px;
  margin-top: 8px;
  border-radius: 12px;
}

@media (max-width: 680px) {
  .executive-dashboard-skeleton-header {
    flex-direction: column;
    gap: 18px;
    padding: 20px;
  }

  .executive-dashboard-skeleton-header > div {
    width: 100%;
  }

  .executive-skeleton-button {
    width: 100%;
  }
}
/* ==========================================================
   Executive Action Center
========================================================== */

.executive-action-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.executive-action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
}

.executive-action-row:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #60a5fa;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}

.executive-action-row:disabled {
  opacity: 0.55;
  cursor: default;
}

.executive-action-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: #eef2ff;
  color: #2563eb;
  flex-shrink: 0;
}

.executive-action-warning .executive-action-icon {
  background: #fff7ed;
  color: #ea580c;
}

.executive-action-success .executive-action-icon {
  background: #dcfce7;
  color: #15803d;
}

.executive-action-copy {
  flex: 1;
}

.executive-action-copy strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
}

.executive-action-copy small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}

.executive-action-link {
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.executive-action-row:disabled .executive-action-link {
  color: #1e293b
}
/* ==========================================================
   Slow-Moving Inventory Summary
========================================================== */

.slow-moving-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 18px;
}

.slow-moving-summary-card {
  display: flex;
  min-width: 0;
  min-height: 92px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #f8fafc;
  text-align: center;
}

.slow-moving-summary-card span {
  color: #2563eb;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.slow-moving-summary-card strong {
  margin-top: 7px;
  color: #0f172a;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.slow-moving-summary-card small {
  margin-top: 5px;
  color: #64748b;
  font-size: 10px;
}

.slow-moving-empty {
  margin: 4px 0 8px;
}

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

@media (max-width: 520px) {
  .slow-moving-summary-grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================
   Pricing Intelligence Summary
========================================================== */

.pricing-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 18px;
}

.pricing-summary-card {
  display: flex;
  min-width: 0;
  min-height: 86px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 13px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #f8fafc;
}

.pricing-summary-card span {
  color: #0f172a;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

.pricing-summary-card strong {
  margin-top: 7px;
  color: #0f172a;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

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

@media (max-width: 520px) {
  .pricing-summary-grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================
   AI Executive Assistant
========================================================== */

.ai-executive-assistant {
  overflow: hidden;
  padding: 0;
}

.ai-executive-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border-bottom: 1px solid #dfe8f3;
  background:
    radial-gradient(
      circle at top right,
      rgba(37, 99, 235, 0.14),
      transparent 38%
    ),
    linear-gradient(135deg, #f8fbff, #ffffff);
}

.ai-executive-header h2 {
  margin: 3px 0 7px;
  color: #0f172a;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.ai-executive-header .muted {
  margin: 0;
  max-width: 620px;
  font-size: 12px;
  line-height: 1.5;
}

.ai-executive-brain {
  display: grid;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 14px;
  background: #e8f1ff;
  color: #2563eb;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}

.ai-executive-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 18px 4px;
}

.ai-executive-overview > div {
  display: flex;
  min-width: 0;
  min-height: 78px;
  flex-direction: column;
  justify-content: center;
  padding: 12px 13px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #f8fafc;
}

.ai-executive-overview span {
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ai-executive-overview strong {
  margin-top: 7px;
  color: #0f172a;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}

.ai-executive-overview .ai-executive-positive {
  color: #16a34a;
}

.ai-executive-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 18px 0;
  padding: 12px 14px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: #2563eb;
}

.ai-executive-summary p {
  margin: 0;
  color: #334155;
  font-size: 12px;
  line-height: 1.45;
}

.ai-executive-summary strong {
  color: #15803d;
}

.ai-executive-recommendations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 18px 18px;
}

.ai-executive-recommendation {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 82px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #ffffff;
}

.ai-executive-recommendation-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background: #eaf2ff;
  color: #2563eb;
}

.ai-executive-recommendation strong {
  display: block;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
}

.ai-executive-recommendation p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 10px;
  line-height: 1.45;
}

.ai-executive-warning {
  border-color: #fed7aa;
  background: #fffaf5;
}

.ai-executive-warning
  .ai-executive-recommendation-icon {
  background: #ffedd5;
  color: #ea580c;
}

.ai-executive-success {
  border-color: #bbf7d0;
  background: #f7fff9;
}

.ai-executive-success
  .ai-executive-recommendation-icon {
  background: #dcfce7;
  color: #15803d;
}

.ai-executive-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 18px;
  border-top: 1px solid #e5eaf1;
  background: #f8fafc;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
}

.ai-executive-footer span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 900px) {
  .ai-executive-overview,
  .ai-executive-recommendations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .ai-executive-header,
  .ai-executive-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-executive-overview,
  .ai-executive-recommendations {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================
   AI Copilot
========================================================== */

.ai-copilot {
  overflow: hidden;
  padding: 0;
}

.ai-copilot-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border-bottom: 1px solid #e2e8f0;
  background:
    radial-gradient(
      circle at top right,
      rgba(124, 58, 237, 0.12),
      transparent 38%
    ),
    linear-gradient(135deg, #faf8ff, #ffffff);
}

.ai-copilot-header h2 {
  margin: 3px 0 7px;
  color: #0f172a;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.ai-copilot-header .muted {
  margin: 0;
  max-width: 620px;
  font-size: 12px;
  line-height: 1.5;
}

.ai-copilot-icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 14px;
  background: #ede9fe;
  color: #7c3aed;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.12);
}

.ai-copilot-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px 4px;
}

.ai-copilot-suggestions button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #ddd6fe;
  border-radius: 999px;
  background: #faf5ff;
  color: #6d28d9;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.ai-copilot-suggestions button:hover {
  border-color: #a78bfa;
  background: #f3e8ff;
}

.ai-copilot-messages {
  display: flex;
  max-height: 320px;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 14px 18px;
}

.ai-copilot-message {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
}

.ai-copilot-message > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
}

.ai-copilot-message p {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.5;
}

.ai-copilot-assistant > span {
  background: #ede9fe;
  color: #7c3aed;
}

.ai-copilot-assistant p {
  border: 1px solid #e9d5ff;
  background: #faf5ff;
  color: #3f3f46;
}

.ai-copilot-user {
  grid-template-columns: minmax(0, 1fr) 30px;
}

.ai-copilot-user > span {
  grid-column: 2;
  background: #dbeafe;
  color: #2563eb;
}

.ai-copilot-user p {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  max-width: 78%;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
}

.ai-copilot-form {
  display: flex;
  gap: 10px;
  padding: 12px 18px 16px;
  border-top: 1px solid #e5e7eb;
}

.ai-copilot-form input {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  padding: 10px 13px;
  border: 1px solid #d8dee8;
  border-radius: 11px;
  background: #ffffff;
  color: #0f172a;
  font-size: 12px;
}

.ai-copilot-form input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

.ai-copilot-form button {
  display: inline-flex;
  min-width: 82px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none;
  border-radius: 11px;
  background: #7c3aed;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.ai-copilot-form button:hover:not(:disabled) {
  background: #6d28d9;
}

.ai-copilot-form button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ai-copilot-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 18px;
  border-top: 1px solid #e5e7eb;
  background: #f8fafc;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
}

.ai-copilot-footer span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 680px) {
  .ai-copilot-header,
  .ai-copilot-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-copilot-form {
    flex-direction: column;
  }

  .ai-copilot-form button {
    width: 100%;
  }

  .ai-copilot-user p {
    max-width: 88%;
  }
}
/* ==========================================================
   Forge Action Results
========================================================== */

.forge-message-content {
  min-width: 0;
}

.forge-message-content > p {
  margin: 0;
}

.forge-card-results {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.forge-card-result {
  display: grid;
  grid-template-columns:
    32px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #ddd6fe;
  border-radius: 10px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
}

.forge-card-result:hover {
  border-color: #8b5cf6;
  background: #faf5ff;
}

.forge-card-result > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: #ede9fe;
  color: #7c3aed;
}

.forge-card-result > div {
  min-width: 0;
}

.forge-card-result strong {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forge-card-result small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 8px;
}

.forge-card-prices {
  text-align: right;
}

.forge-card-prices strong {
  color: #16a34a;
}

.forge-card-result > svg {
  color: #7c3aed;
}

.forge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.forge-actions button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #c4b5fd;
  border-radius: 9px;
  background: #ffffff;
  color: #6d28d9;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.forge-actions button:hover {
  border-color: #8b5cf6;
  background: #f3e8ff;
}

.ai-copilot-assistant
  .forge-message-content {
  min-width: 0;
}

.ai-copilot-assistant
  .forge-message-content > p {
  padding: 10px 12px;
  border: 1px solid #e9d5ff;
  border-radius: 12px;
  background: #faf5ff;
  color: #3f3f46;
  font-size: 11px;
  line-height: 1.5;
}

.ai-copilot-user
  .forge-message-content {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  max-width: 78%;
}

.ai-copilot-user
  .forge-message-content > p {
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 11px;
  line-height: 1.5;
}
/* ==========================================================
   MARKET INTELLIGENCE
========================================================== */

.market-intelligence-panel {
  margin-top: 28px;
}

.market-intelligence-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 20px 0 24px;
}

.market-intelligence-summary > div {
  padding: 18px;
  border: 1px solid var(--cf-border);
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    #ffffff,
    #f8fbff
  );
}

.market-intelligence-summary span {
  display: block;
  margin-bottom: 8px;
  color: var(--cf-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.market-intelligence-summary strong {
  font-size: 28px;
  font-weight: 800;
  color: var(--cf-text);
}

.market-intelligence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
}

.market-intelligence-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid var(--cf-border);
  background: #ffffff;
  transition: .25s;
}

.market-intelligence-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 35px rgba(15,23,42,.08);
}

.market-intelligence-success {
  border-left: 5px solid #22c55e;
}

.market-intelligence-warning {
  border-left: 5px solid #f59e0b;
}

.market-intelligence-info {
  border-left: 5px solid #3b82f6;
}

.market-intelligence-card-header {
  display: flex;
  gap: 16px;
}

.market-intelligence-status-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eff6ff;
  color: #2563eb;
}

.market-intelligence-status-label {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #2563eb;
}

.market-intelligence-card h3 {
  margin: 0;
  font-size: 22px;
}

.market-intelligence-card p {
  margin-top: 4px;
  color: var(--cf-muted);
}

.market-intelligence-prices {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
}

.market-intelligence-prices div {
  padding: 12px;
  border-radius: 12px;
  background: #f8fafc;
}

.market-intelligence-prices span {
  display: block;
  color: var(--cf-muted);
  font-size: 11px;
  margin-bottom: 5px;
}

.market-intelligence-prices strong {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 17px;
}

.market-intelligence-positive {
  color: #16a34a;
}

.market-intelligence-negative {
  color: #dc2626;
}

.market-intelligence-recommendation {
  padding: 14px;
  border-radius: 12px;
  background: #f8fbff;
  color: #475569;
  line-height: 1.6;
}

.market-intelligence-open-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  border-radius: 12px;
  background: #1d4ed8;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.market-intelligence-open-btn:hover {
  background: #1e40af;
}

.market-intelligence-empty {
  padding: 28px;
  text-align: center;
}

@media (max-width:1100px){

  .market-intelligence-summary{
    grid-template-columns:repeat(2,1fr);
  }

  .market-intelligence-prices{
    grid-template-columns:repeat(2,1fr);
  }

}

@media (max-width:700px){

  .market-intelligence-summary{
    grid-template-columns:1fr;
  }

  .market-intelligence-prices{
    grid-template-columns:1fr;
  }

}
/* ==========================================================
   Market Intelligence Actions
========================================================== */

.market-intelligence-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.market-intelligence-apply-btn,
.market-intelligence-open-btn {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.market-intelligence-apply-btn {
  flex: 1;
  border: 1px solid #86efac;
  background: #dcfce7;
  color: #15803d;
}

.market-intelligence-apply-btn:hover:not(:disabled) {
  border-color: #22c55e;
  background: #bbf7d0;
}

.market-intelligence-apply-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.market-intelligence-open-btn {
  align-self: auto;
  border: none;
  background: #1d4ed8;
  color: #ffffff;
}

.market-intelligence-open-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.market-intelligence-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 9px;
}

.market-intelligence-source strong {
  color: #2563eb;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.market-intelligence-provider-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -8px 0 18px;
  padding: 10px 13px;
  border: 1px solid #dbeafe;
  border-radius: 11px;
  background: #f0f7ff;
  color: #64748b;
  font-size: 10px;
}

.market-intelligence-provider-status strong {
  color: #2563eb;
}

@media (max-width: 620px) {
  .market-intelligence-card-actions {
    flex-direction: column;
  }

  .market-intelligence-apply-btn,
  .market-intelligence-open-btn {
    width: 100%;
  }

  .market-intelligence-provider-status {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* ==========================================================
   Forge Daily Briefing
========================================================== */

.morning-briefing {
  overflow: hidden;
  padding: 0;
}

.morning-briefing-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid #e2e8f0;
  background:
    radial-gradient(
      circle at top right,
      rgba(124, 58, 237, 0.14),
      transparent 38%
    ),
    linear-gradient(135deg, #faf8ff, #ffffff);
}

.morning-briefing-header h2 {
  margin: 4px 0 7px;
  color: #0f172a;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.morning-briefing-header .muted {
  margin: 0;
  max-width: 680px;
  font-size: 12px;
  line-height: 1.5;
}

.morning-briefing-spark {
  display: grid;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 15px;
  background: #ede9fe;
  color: #7c3aed;
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.14);
}

.morning-briefing-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 18px;
}

.morning-briefing-metric {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 86px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #f8fafc;
}

.morning-briefing-metric-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background: #eaf2ff;
  color: #2563eb;
}

.morning-briefing-metric span {
  display: block;
  color: #334155
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.morning-briefing-metric strong {
  display: block;
  margin-top: 6px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.morning-briefing-metric small {
  display: block;
  margin-top: 5px;
  color: #334155
  font-size: 9px;
  line-height: 1.35;
}

.morning-briefing-green
  .morning-briefing-metric-icon {
  background: #dcfce7;
  color: #15803d;
}

.morning-briefing-violet
  .morning-briefing-metric-icon {
  background: #ede9fe;
  color: #7c3aed;
}

.morning-briefing-amber
  .morning-briefing-metric-icon {
  background: #fef3c7;
  color: #d97706;
}

.morning-briefing-orange
  .morning-briefing-metric-icon {
  background: #ffedd5;
  color: #ea580c;
}

.morning-briefing-red
  .morning-briefing-metric-icon {
  background: #fee2e2;
  color: #dc2626;
}

.morning-briefing-opportunity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  margin: 0 18px 16px;
  padding: 16px 18px;
  border: 1px solid #d8b4fe;
  border-radius: 14px;
  background:
    radial-gradient(
      circle at right center,
      rgba(124, 58, 237, 0.09),
      transparent 42%
    ),
    #faf5ff;
}

.morning-briefing-opportunity-copy h3 {
  margin: 3px 0 5px;
  color: #0f172a;
  font-size: 17px;
  font-weight: 800;
}

.morning-briefing-opportunity-copy p {
  margin: 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
}

.morning-briefing-opportunity-copy p strong {
  color: #0f172a;
}

.morning-briefing-gain {
  text-align: right;
}

.morning-briefing-gain span {
  display: block;
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.morning-briefing-gain strong {
  display: block;
  margin-top: 6px;
  color: #16a34a;
  font-size: 20px;
  font-weight: 850;
}

.morning-briefing-opportunity button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px;
  border: none;
  border-radius: 10px;
  background: #7c3aed;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.morning-briefing-opportunity button:hover {
  background: #6d28d9;
}

.morning-briefing-healthy {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 18px 16px;
  padding: 13px 15px;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  background: #f0fdf4;
  color: #15803d;
}

.morning-briefing-healthy p {
  margin: 0;
  color: #166534;
  font-size: 11px;
}

.morning-briefing-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  padding: 0 18px 18px;
}

.morning-briefing-actions button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #ddd6fe;
  border-radius: 11px;
  background: #ffffff;
  color: #6d28d9;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.morning-briefing-actions button:hover {
  border-color: #8b5cf6;
  background: #faf5ff;
}

@media (max-width: 1100px) {
  .morning-briefing-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .morning-briefing-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .morning-briefing-header {
    flex-direction: column;
  }

  .morning-briefing-metrics {
    grid-template-columns: 1fr;
  }

  .morning-briefing-opportunity {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .morning-briefing-gain {
    text-align: left;
  }

  .morning-briefing-opportunity button {
    width: 100%;
  }

  .morning-briefing-actions {
    grid-template-columns: 1fr;
  }
}
/* Improve pricing audit readability */

.pricing-intelligence-audit {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
}

.pricing-intelligence-audit span {
  color: #334155;
  font-weight: 800;
}

.pricing-intelligence-audit strong {
  color: #0f172a;
}
/* Pricing audit contrast override */

.pricing-intelligence-audit {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  opacity: 1 !important;
  filter: none !important;
}

.pricing-intelligence-audit > div {
  opacity: 1 !important;
}

.pricing-intelligence-audit span {
  color: #334155 !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}

.pricing-intelligence-audit strong {
  color: #0f172a !important;
  opacity: 1 !important;
}
/* Pricing comparison contrast override */

.pricing-intelligence-comparison {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  opacity: 1 !important;
  filter: none !important;
}

.pricing-intelligence-comparison > div {
  opacity: 1 !important;
}

.pricing-intelligence-comparison span {
  color: #334155 !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}

.pricing-intelligence-comparison strong {
  color: #0f172a !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}
/* ==========================================================
   Executive Dashboard Realtime Status
========================================================== */

.executive-dashboard-live-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.executive-live-status {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.executive-live-connected {
  border-color: #86efac;
  background: #f0fdf4;
  color: #15803d;
}

.executive-live-connecting {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #2563eb;
}

.executive-live-disconnected {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

@media (max-width: 680px) {
  .executive-dashboard-live-controls {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .executive-live-status {
    justify-content: center;
  }
}
/* ==========================================================
   Forge Intelligence — Today's Top Priority
========================================================== */

.forge-priority-panel {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto
    minmax(280px, 0.7fr);
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
  padding: 20px 22px;
  border: 1px solid #cbd5e1;
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f8fafc
    );
}

.forge-priority-copy h2 {
  margin: 4px 0;
  color: #0f172a;
  font-size: 23px;
}

.forge-priority-label {
  display: inline-flex;
  margin-top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.forge-priority-recommendation {
  max-width: 680px;
  margin: 10px 0 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.6;
}

.forge-priority-score {
  min-width: 135px;
  text-align: center;
}

.forge-priority-score span,
.forge-priority-values span {
  display: block;
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.forge-priority-score strong {
  display: block;
  margin-top: 4px;
  color: #2563eb;
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
}

.forge-priority-score small {
  margin-left: 3px;
  font-size: 12px;
}

.forge-priority-values {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.forge-priority-values > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #ffffff;
}

.forge-priority-values strong {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forge-priority-critical {
  border-color: #fca5a5;
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fef2f2
    );
}

.forge-priority-critical
  .forge-priority-score strong,
.forge-priority-critical
  .forge-priority-label {
  color: #b91c1c;
}

.forge-priority-critical
  .forge-priority-label {
  background: #fee2e2;
}

.forge-priority-high {
  border-color: #fdba74;
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fff7ed
    );
}

.forge-priority-high
  .forge-priority-score strong,
.forge-priority-high
  .forge-priority-label {
  color: #c2410c;
}

.forge-priority-high
  .forge-priority-label {
  background: #ffedd5;
}

.forge-priority-medium {
  border-color: #fde68a;
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fffbeb
    );
}

.forge-priority-medium
  .forge-priority-score strong,
.forge-priority-medium
  .forge-priority-label {
  color: #a16207;
}

.forge-priority-medium
  .forge-priority-label {
  background: #fef3c7;
}

@media (max-width: 1050px) {
  .forge-priority-panel {
    grid-template-columns:
      minmax(0, 1fr) auto;
  }

  .forge-priority-values {
    grid-column: 1 / -1;
  }
}

@media (max-width: 650px) {
  .forge-priority-panel {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .forge-priority-score {
    text-align: left;
  }

  .forge-priority-values {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   OPTIC DATA · Executive Dashboard Cohesive Design System
   Dashboard Polish Sprint
========================================================== */

.executive-dashboard {
  --exec-ink: #0f172a;
  --exec-copy: #334155;
  --exec-muted: #64748b;
  --exec-blue: #2563eb;
  --exec-blue-dark: #1d4ed8;
  --exec-blue-soft: #eff6ff;
  --exec-border: #dfe7f1;
  --exec-border-strong: #cbd7e6;
  --exec-surface: #ffffff;
  --exec-radius: 18px;
  --exec-shadow: 0 9px 28px rgba(15, 23, 42, 0.07);
  --exec-shadow-hover: 0 15px 34px rgba(15, 23, 42, 0.11);
  gap: 18px;
}

.executive-dashboard .executive-panel,
.executive-dashboard .dashboard-panel,
.executive-dashboard .revenue-panel,
.executive-dashboard .inventory-health-panel,
.executive-dashboard .pricing-panel,
.executive-dashboard .recent-sales-panel,
.executive-dashboard .top-selling-panel,
.executive-dashboard .slow-moving-panel,
.executive-dashboard .market-intelligence-panel,
.executive-dashboard .ai-insights-panel,
.executive-dashboard .ai-executive-assistant,
.executive-dashboard .morning-briefing,
.executive-dashboard .ai-copilot,
.executive-dashboard .forge-memory-panel {
  border: 1px solid var(--exec-border);
  border-radius: var(--exec-radius);
  background: var(--exec-surface);
  box-shadow: var(--exec-shadow);
}

.executive-dashboard .executive-panel-header,
.executive-dashboard .dashboard-panel-header,
.executive-dashboard .panel-header {
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #edf1f6;
}

.executive-dashboard .executive-panel-header h2,
.executive-dashboard .dashboard-panel-header h2,
.executive-dashboard .panel-header h2,
.executive-dashboard .executive-panel-header h3,
.executive-dashboard .dashboard-panel-header h3,
.executive-dashboard .panel-header h3 {
  margin: 0;
  color: var(--exec-ink);
  letter-spacing: -0.025em;
}

.executive-dashboard .eyebrow {
  color: var(--exec-blue);
  font-weight: 850;
  letter-spacing: 0.13em;
}

.executive-dashboard .muted {
  color: var(--exec-muted);
}

.executive-dashboard .executive-metric-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--exec-border);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.07), transparent 38%),
    var(--exec-surface);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.055);
}

.executive-dashboard .executive-metric-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--exec-blue), rgba(37, 99, 235, 0.15));
  opacity: 0;
  transition: opacity 160ms ease;
}

.executive-dashboard .executive-metric-card:hover::after,
.executive-dashboard .executive-metric-card.is-active::after {
  opacity: 1;
}

.executive-dashboard .executive-metric-card:hover {
  transform: translateY(-2px);
  border-color: #b9c9df;
  box-shadow: var(--exec-shadow-hover);
}

.executive-dashboard .executive-metric-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--exec-blue-soft);
  color: var(--exec-blue-dark);
}

.executive-dashboard .executive-metric-icon svg {
  color: currentColor;
  stroke: currentColor;
  opacity: 1;
}

.executive-dashboard strong {
  color: var(--exec-ink);
}

.executive-dashboard small {
  color: var(--exec-muted);
}

.executive-dashboard table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.executive-dashboard th {
  padding: 11px 12px;
  color: #475569;
  background: #f8fafc;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.executive-dashboard td {
  padding: 12px;
  border-top: 1px solid #edf1f6;
  color: var(--exec-copy);
}

.executive-dashboard tbody tr:hover td {
  background: #f8fbff;
}

.executive-dashboard .executive-button,
.executive-dashboard .dashboard-button,
.executive-dashboard .panel-action,
.executive-dashboard .action-button {
  border: 1px solid var(--exec-border-strong);
  border-radius: 10px;
  background: var(--exec-surface);
  color: var(--exec-copy);
  font-weight: 800;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease;
}

.executive-dashboard .executive-button:hover,
.executive-dashboard .dashboard-button:hover,
.executive-dashboard .panel-action:hover,
.executive-dashboard .action-button:hover {
  transform: translateY(-1px);
  border-color: #93b4e8;
  background: var(--exec-blue-soft);
  color: var(--exec-blue-dark);
  box-shadow: 0 7px 16px rgba(37, 99, 235, 0.12);
}

.executive-dashboard .ai-insights-panel,
.executive-dashboard .ai-executive-assistant,
.executive-dashboard .morning-briefing,
.executive-dashboard .ai-copilot,
.executive-dashboard .forge-memory-panel,
.executive-dashboard .market-intelligence-panel {
  position: relative;
  overflow: hidden;
}

.executive-dashboard .ai-insights-panel::before,
.executive-dashboard .ai-executive-assistant::before,
.executive-dashboard .morning-briefing::before,
.executive-dashboard .ai-copilot::before,
.executive-dashboard .forge-memory-panel::before,
.executive-dashboard .market-intelligence-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #2563eb, #7c3aed);
}

.executive-dashboard .recharts-cartesian-grid-horizontal line,
.executive-dashboard .recharts-cartesian-grid-vertical line {
  stroke: #e7edf5;
}

.executive-dashboard .recharts-text {
  fill: #64748b;
  font-size: 0.75rem;
}

.executive-dashboard .recharts-default-tooltip {
  border: 1px solid var(--exec-border) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: var(--exec-shadow) !important;
}

.executive-dashboard button:focus-visible,
.executive-dashboard a:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.3);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  .executive-dashboard {
    gap: 15px;
  }
}

@media (max-width: 720px) {
  .executive-dashboard {
    gap: 12px;
  }

  .executive-dashboard-header {
    padding: 20px;
  }

  .executive-dashboard .executive-panel,
  .executive-dashboard .dashboard-panel {
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .executive-dashboard *,
  .executive-dashboard *::before,
  .executive-dashboard *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* ==========================================================
   Portfolio Intelligence · Phase 1
========================================================== */

.portfolio-intelligence-section {
  display: grid;
  gap: 18px;
}

.portfolio-intelligence-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.portfolio-intelligence-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.portfolio-intelligence-heading h2 {
  margin: 4px 0 8px;
}

.portfolio-intelligence-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 14px;
  background: rgba(99, 102, 241, 0.12);
}

.portfolio-intelligence-total {
  min-width: 220px;
  text-align: right;
}

.portfolio-intelligence-total span,
.portfolio-intelligence-total small {
  display: block;
}

.portfolio-intelligence-total strong {
  display: block;
  margin: 4px 0;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.portfolio-metric-grid {
  margin-top: 0;
}

.portfolio-intelligence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.portfolio-opportunity-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.portfolio-opportunity-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--border-color, rgba(148, 163, 184, 0.18));
}

.portfolio-opportunity-row:first-child {
  border-top: 0;
}

.portfolio-opportunity-row strong,
.portfolio-opportunity-row span,
.portfolio-opportunity-row p {
  display: block;
}

.portfolio-opportunity-row span,
.portfolio-opportunity-row p {
  margin-top: 4px;
  color: var(--muted-text, #64748b);
  font-size: 0.82rem;
}

.portfolio-opportunity-row p {
  margin-bottom: 0;
}

.portfolio-opportunity-value {
  flex: 0 0 135px;
  text-align: right;
}

.portfolio-opportunity-value span {
  font-weight: 700;
}

.portfolio-intelligence-disclaimer {
  margin: 0;
  color: var(--muted-text, #64748b);
  font-size: 0.82rem;
}

@media (max-width: 900px) {
  .portfolio-intelligence-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .portfolio-intelligence-total {
    min-width: 0;
    text-align: left;
  }

  .portfolio-intelligence-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .portfolio-opportunity-row {
    flex-direction: column;
  }

  .portfolio-opportunity-value {
    flex-basis: auto;
    text-align: left;
  }
}


/* ==========================================================
   Portfolio Intelligence · Phase 2 Action Queue
========================================================== */

.portfolio-action-center {
  overflow: hidden;
}

.portfolio-action-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.portfolio-action-row {
  display: grid;
  grid-template-columns: 34px 38px minmax(0, 1fr) 150px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.18));
  border-radius: 14px;
}

.portfolio-action-rank,
.portfolio-action-symbol {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.12);
  font-weight: 800;
}

.portfolio-action-copy strong,
.portfolio-action-copy span,
.portfolio-action-copy p,
.portfolio-action-decision strong,
.portfolio-action-decision span {
  display: block;
}

.portfolio-action-copy span,
.portfolio-action-copy p,
.portfolio-action-decision span {
  margin-top: 4px;
  color: var(--muted-text, #64748b);
  font-size: 0.82rem;
}

.portfolio-action-copy p {
  margin-bottom: 0;
}

.portfolio-action-decision {
  text-align: right;
}

.portfolio-action-grade {
  border-left: 4px solid #8b5cf6;
}

.portfolio-action-reprice {
  border-left: 4px solid #22c55e;
}

.portfolio-action-discount {
  border-left: 4px solid #f59e0b;
}

.portfolio-action-hold {
  border-left: 4px solid #3b82f6;
}

.portfolio-action-review {
  border-left: 4px solid #ef4444;
}

@media (max-width: 720px) {
  .portfolio-action-row {
    grid-template-columns: 34px 38px minmax(0, 1fr);
  }

  .portfolio-action-decision {
    grid-column: 3;
    text-align: left;
  }
}

@media (max-width: 500px) {
  .portfolio-action-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .portfolio-action-symbol {
    display: none;
  }

  .portfolio-action-decision {
    grid-column: 2;
  }
}


/* ==========================================================
   Portfolio Intelligence · Phase 3 Command Actions
========================================================== */

.portfolio-action-row {
  grid-template-columns: 34px 38px minmax(0, 1fr) 140px minmax(180px, 230px);
}

.portfolio-command-message {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.08);
  font-size: 0.88rem;
}

.portfolio-command-buttons {
  display: grid;
  gap: 7px;
}

.portfolio-command-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.22));
  border-radius: 9px;
  background: rgba(148, 163, 184, 0.08);
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.portfolio-command-button:hover:not(:disabled) {
  background: rgba(148, 163, 184, 0.16);
  transform: translateY(-1px);
}

.portfolio-command-primary {
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.13);
}

.portfolio-command-button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.portfolio-command-spinner {
  animation: portfolio-command-spin 0.8s linear infinite;
}

@keyframes portfolio-command-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1100px) {
  .portfolio-action-row {
    grid-template-columns: 34px 38px minmax(0, 1fr) 130px;
  }

  .portfolio-command-buttons {
    grid-column: 3 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .portfolio-action-row {
    grid-template-columns: 34px 38px minmax(0, 1fr);
  }

  .portfolio-action-decision,
  .portfolio-command-buttons {
    grid-column: 3;
  }
}

@media (max-width: 500px) {
  .portfolio-action-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .portfolio-action-decision,
  .portfolio-command-buttons {
    grid-column: 2;
  }

  .portfolio-command-buttons {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   Portfolio Intelligence · Phase 4 Intelligence Polish
========================================================== */

.portfolio-reveal {
  animation: portfolio-reveal-in 420ms ease both;
}

@keyframes portfolio-reveal-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.portfolio-filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portfolio-filter-chip {
  padding: 8px 13px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.07);
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.portfolio-filter-chip:hover,
.portfolio-filter-chip.is-active {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.14);
}

.portfolio-filter-card {
  width: 100%;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.portfolio-filter-card:hover {
  transform: translateY(-2px);
}

.portfolio-filter-card.is-active {
  border-color: rgba(59, 130, 246, 0.55);
  background: #0d1320;
}

.portfolio-action-header,
.portfolio-section-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.portfolio-action-header-icons,
.portfolio-section-toggle-icons {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.portfolio-action-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.portfolio-priority-badge {
  display: inline-flex !important;
  width: fit-content;
  margin-top: 0 !important;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.67rem !important;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.portfolio-priority-critical {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444 !important;
}

.portfolio-priority-high {
  background: rgba(245, 158, 11, 0.14);
  color: #f59e0b !important;
}

.portfolio-priority-medium {
  background: rgba(59, 130, 246, 0.14);
  color: #3b82f6 !important;
}

.portfolio-priority-low {
  background: rgba(148, 163, 184, 0.14);
  color: var(--muted-text, #64748b) !important;
}

.portfolio-empty-state {
  margin: 18px 0 0;
  padding: 18px;
  border: 1px dashed var(--border-color, rgba(148, 163, 184, 0.2));
  border-radius: 12px;
  text-align: center;
}

.portfolio-collapsible-panel {
  align-self: start;
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-reveal,
  .portfolio-command-spinner {
    animation: none;
  }

  .portfolio-filter-card,
  .portfolio-command-button {
    transition: none;
  }
}

/* ==========================================================
   Phase 4 dashboard compatibility fix
========================================================== */

.portfolio-intelligence-section {
  color: #101828;
}

/* Filter buttons */

.portfolio-intelligence-section .portfolio-filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}

.portfolio-intelligence-section .portfolio-filter-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #0d1320;
color: #d8e4f2 !important;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.portfolio-intelligence-section .portfolio-filter-chip:hover {
  background: #eff6ff;
  border-color: #60a5fa;
  color: #1d4ed8 !important;
}

.portfolio-intelligence-section .portfolio-filter-chip.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff !important;
}

/* Metric card grid */

.portfolio-intelligence-section .portfolio-metric-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 16px;
}

.portfolio-intelligence-section .portfolio-metric-grid .executive-metric-card {
  appearance: none;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 110px !important;
  padding: 16px !important;
  text-align: left !important;
  border: 1px solid #d8e1ed !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #101828 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}

.portfolio-intelligence-section
  .portfolio-metric-grid
  button.executive-metric-card {
  cursor: pointer;
}

.portfolio-intelligence-section
  .portfolio-metric-grid
  .executive-metric-card
  > div:last-child {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.portfolio-intelligence-section
  .portfolio-metric-grid
  .executive-metric-card
  span {
  display: block !important;
  margin: 0 0 3px !important;
  color: #475467 !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.portfolio-intelligence-section
  .portfolio-metric-grid
  .executive-metric-card
  strong {
  display: block !important;
  margin: 0 0 4px !important;
  color: #101828 !important;
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.portfolio-intelligence-section
  .portfolio-metric-grid
  .executive-metric-card
  small {
  display: block !important;
  color: #667085 !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
}

.portfolio-intelligence-section
  .portfolio-metric-grid
  .executive-metric-icon {
  flex: 0 0 auto !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: #eef4ff !important;
  color: #2563eb !important;
}

.portfolio-intelligence-section
  .portfolio-metric-grid
  .portfolio-filter-card:hover {
  border-color: #60a5fa !important;
  background: #f8fbff !important;
  transform: translateY(-1px);
}

.portfolio-intelligence-section
  .portfolio-metric-grid
  .portfolio-filter-card.is-active {
  border-color: #2563eb !important;
  background: #0d1320 !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14) !important;
}

/* Action queue visibility */

.portfolio-intelligence-section .portfolio-action-center,
.portfolio-intelligence-section .portfolio-collapsible-panel {
  background: #ffffff !important;
  color: #101828 !important;
}

.portfolio-intelligence-section .portfolio-action-header,
.portfolio-intelligence-section .portfolio-section-toggle {
  color: #101828 !important;
}

.portfolio-intelligence-section .portfolio-action-header h2,
.portfolio-intelligence-section .portfolio-action-header p,
.portfolio-intelligence-section .portfolio-section-toggle h3,
.portfolio-intelligence-section .portfolio-section-toggle p {
  color: inherit;
}

@media (max-width: 1100px) {
  .portfolio-intelligence-section .portfolio-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .portfolio-intelligence-section .portfolio-metric-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Make portfolio icons readable */

.portfolio-intelligence-section .executive-metric-icon {
    background: #2563eb !important;
    color: #ffffff !important;
}

.portfolio-intelligence-section .executive-metric-icon svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    opacity: 1 !important;
}

/* ==========================================================
   Portfolio Intelligence · Final Polish
   Add this entire block to the BOTTOM of:
   src/dashboard/portfolio-intelligence.css
========================================================== */

/* Stronger spacing and visual hierarchy */
.portfolio-intelligence-section {
  --portfolio-blue: #2563eb;
  --portfolio-blue-dark: #1d4ed8;
  --portfolio-ink: #0f172a;
  --portfolio-muted: #64748b;
  --portfolio-border: #dbe4f0;
  --portfolio-surface: #ffffff;
}

.portfolio-intelligence-section .portfolio-metric-grid {
  gap: 20px !important;
}

/* Hero opportunity value */
.portfolio-intelligence-section .portfolio-intelligence-total strong {
  color: var(--portfolio-ink) !important;
  font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.045em !important;
}

/* Metric icons */
.portfolio-intelligence-section
  .portfolio-metric-grid
  .executive-metric-icon {
  background: var(--portfolio-blue) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22) !important;
}

.portfolio-intelligence-section
  .portfolio-metric-grid
  .executive-metric-icon
  svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  opacity: 1 !important;
  stroke-width: 2.25 !important;
}

/* Action queue icons */
.portfolio-intelligence-section .portfolio-action-symbol {
  background: #eaf1ff !important;
  color: var(--portfolio-blue-dark) !important;
  border: 1px solid #cfe0ff !important;
}

.portfolio-intelligence-section .portfolio-action-symbol svg,
.portfolio-intelligence-section .portfolio-action-rank svg,
.portfolio-intelligence-section .portfolio-action-header-icons svg,
.portfolio-intelligence-section .portfolio-section-toggle-icons svg {
  color: var(--portfolio-blue-dark) !important;
  stroke: var(--portfolio-blue-dark) !important;
  opacity: 1 !important;
}

/* Recommendation row clarity */
.portfolio-intelligence-section .portfolio-action-row {
  background: var(--portfolio-surface) !important;
  border-top-color: var(--portfolio-border) !important;
  border-right-color: var(--portfolio-border) !important;
  border-bottom-color: var(--portfolio-border) !important;
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.055) !important;
}

.portfolio-intelligence-section .portfolio-action-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.09) !important;
}

.portfolio-intelligence-section .portfolio-action-copy strong,
.portfolio-intelligence-section .portfolio-action-decision strong {
  color: var(--portfolio-ink) !important;
}

.portfolio-intelligence-section .portfolio-action-copy > span,
.portfolio-intelligence-section .portfolio-action-copy p,
.portfolio-intelligence-section .portfolio-action-decision span {
  color: var(--portfolio-muted) !important;
}

/* Command buttons */
.portfolio-intelligence-section .portfolio-command-button {
  min-height: 40px !important;
  border: 1px solid #d6deea !important;
  background: #f8fafc !important;
  color: #1e293b !important;
  font-weight: 800 !important;
}

.portfolio-intelligence-section .portfolio-command-button svg {
  color: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

.portfolio-intelligence-section .portfolio-command-button:hover {
  border-color: #94a3b8 !important;
  background: #f1f5f9 !important;
}

.portfolio-intelligence-section .portfolio-command-primary {
  border-color: #9fc0ff !important;
  background: #eaf1ff !important;
  color: var(--portfolio-blue-dark) !important;
}

.portfolio-intelligence-section .portfolio-command-primary:hover {
  border-color: var(--portfolio-blue) !important;
  background: #dce9ff !important;
}

/* Filter chip refinement */
.portfolio-intelligence-section .portfolio-filter-chip {
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
}

.portfolio-intelligence-section .portfolio-filter-chip.is-active {
  box-shadow: 0 7px 18px rgba(37, 99, 235, 0.24);
}

/* Hero and panels */
.portfolio-intelligence-section .portfolio-intelligence-hero,
.portfolio-intelligence-section .portfolio-action-center,
.portfolio-intelligence-section .portfolio-collapsible-panel {
  border: 1px solid var(--portfolio-border) !important;
  box-shadow: 0 9px 26px rgba(15, 23, 42, 0.07) !important;
}

/* Keep animation subtle and professional */
@media (prefers-reduced-motion: no-preference) {
  .portfolio-intelligence-section .portfolio-action-row,
  .portfolio-intelligence-section .portfolio-filter-chip,
  .portfolio-intelligence-section .portfolio-command-button,
  .portfolio-intelligence-section .executive-metric-card {
    transition:
      transform 160ms ease,
      box-shadow 160ms ease,
      border-color 160ms ease,
      background-color 160ms ease;
  }
}

@media (max-width: 1100px) {
  .portfolio-intelligence-section .portfolio-metric-grid {
    gap: 14px !important;
  }
}/* ==========================================================
   OPTIC DATA · Intake Conveyor
========================================================== */

.scanner-conveyor-card {
  margin-bottom: 20px;
}

.scanner-conveyor-title {
  align-items: flex-start;
}

.scanner-conveyor-title > div:last-child > span {
  display: block;
  max-width: 760px;
  margin-top: 5px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.optic-conveyor {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
  color: #0f172a;
}

.optic-conveyor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid #dbe4ef;
  border-radius: 14px;
  background: #f8fafc;
}

.optic-conveyor-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.optic-conveyor-primary,
.optic-conveyor-secondary,
.optic-conveyor-warning {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.optic-conveyor-primary {
  border: 1px solid #2563eb;
  background: #2563eb;
  color: #ffffff;
}

.optic-conveyor-secondary {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
}

.optic-conveyor-warning {
  border: 1px solid #f59e0b;
  background: #fffbeb;
  color: #92400e;
}

.optic-conveyor-primary.is-disabled,
.optic-conveyor-primary:disabled,
.optic-conveyor-secondary:disabled,
.optic-conveyor-warning:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.optic-conveyor-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  font-size: 12px;
  font-weight: 850;
}

.optic-conveyor-mode > span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.optic-conveyor-mode > span.is-ready {
  background: #22c55e;
}

.optic-conveyor-mode > span.is-running {
  background: #2563eb;
  box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.12);
}

.optic-conveyor-mode > span.is-paused {
  background: #f59e0b;
}

.optic-conveyor-empty {
  display: grid;
  min-height: 310px;
  place-items: center;
  align-content: center;
  padding: 34px;
  border: 2px dashed #cbd5e1;
  border-radius: 18px;
  background: #f8fafc;
  text-align: center;
}

.optic-conveyor-empty > div {
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  border-radius: 22px;
  background: #eaf2ff;
  color: #2563eb;
}

.optic-conveyor-empty h3 {
  margin: 16px 0 0;
  font-size: 22px;
}

.optic-conveyor-empty p {
  max-width: 620px;
  margin: 8px 0 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.6;
}

.optic-conveyor-empty > span {
  margin-top: 12px;
  color: #64748b;
  font-size: 12px;
}

.optic-conveyor-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.optic-conveyor-metrics article {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid #dce5f0;
  border-radius: 13px;
  background: #ffffff;
}

.optic-conveyor-metrics article > svg {
  flex: 0 0 auto;
  color: #2563eb;
}

.optic-conveyor-metrics span {
  display: block;
  color: #64748b;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.optic-conveyor-metrics strong {
  display: block;
  margin-top: 3px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 900;
}

.optic-conveyor-progress {
  padding: 14px 16px;
  border: 1px solid #dce5f0;
  border-radius: 14px;
  background: #ffffff;
}

.optic-conveyor-progress > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.optic-conveyor-progress span {
  color: #334155;
  font-size: 12px;
  font-weight: 850;
}

.optic-conveyor-progress strong {
  color: #2563eb;
  font-size: 19px;
}

.optic-conveyor-progress-track {
  height: 10px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.optic-conveyor-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #60a5fa, #2563eb);
  transition: width 0.25s ease;
}

.optic-conveyor-progress p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 11px;
}

.optic-conveyor-stage {
  overflow: hidden;
  padding: 16px;
  border: 1px solid #cdd8e6;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #14233b, #0b1729);
}

.optic-conveyor-belt {
  display: flex;
  gap: 11px;
  overflow-x: auto;
  padding: 6px 4px 13px;
}

.optic-belt-card {
  display: grid;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  place-items: center;
  border: 1px solid #52637a;
  border-radius: 13px;
  background: #182940;
  color: #dbeafe;
  cursor: pointer;
}

.optic-belt-card span {
  font-size: 11px;
  font-weight: 900;
}

.optic-belt-card.is-active {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18);
}

.optic-belt-card-complete {
  border-color: #22c55e;
  color: #86efac;
}

.optic-belt-card-error,
.optic-belt-card-missing-back {
  border-color: #ef4444;
  color: #fca5a5;
}

.optic-conveyor-workspace {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.optic-conveyor-queue,
.optic-conveyor-review,
.optic-conveyor-image-browser {
  overflow: hidden;
  border: 1px solid #dce5f0;
  border-radius: 16px;
  background: #ffffff;
}

.optic-conveyor-queue > header,
.optic-conveyor-review > header,
.optic-conveyor-image-browser > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 66px;
  padding: 13px 15px;
  border-bottom: 1px solid #e6edf5;
  background: #f8fafc;
}

.optic-conveyor-queue header span,
.optic-conveyor-review header span,
.optic-conveyor-image-browser header span {
  color: #2563eb;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.optic-conveyor-queue h3,
.optic-conveyor-review h3,
.optic-conveyor-image-browser h3 {
  margin: 3px 0 0;
  font-size: 17px;
}

.optic-conveyor-queue header small {
  color: #64748b;
  font-size: 10px;
}

.optic-conveyor-queue-list {
  max-height: 650px;
  overflow: auto;
  padding: 8px;
}

.optic-conveyor-queue-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 12px;
}

.optic-conveyor-queue-item + .optic-conveyor-queue-item {
  margin-top: 5px;
}

.optic-conveyor-queue-item.is-selected {
  border-color: #93b4f8;
  background: #eef5ff;
}

.optic-conveyor-select {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.optic-conveyor-number {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  background: #eaf2ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
}

.optic-conveyor-card-copy {
  min-width: 0;
}

.optic-conveyor-card-copy strong,
.optic-conveyor-card-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.optic-conveyor-card-copy strong {
  color: #0f172a;
  font-size: 12px;
}

.optic-conveyor-card-copy small {
  margin-top: 3px;
  color: #64748b;
  font-size: 9px;
}

.optic-conveyor-status {
  min-width: 68px;
  padding: 5px 7px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 8px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.optic-conveyor-status-complete {
  background: #dcfce7;
  color: #166534;
}

.optic-conveyor-status-error,
.optic-conveyor-status-missing-back {
  background: #fee2e2;
  color: #991b1b;
}

.optic-conveyor-status-processing {
  background: #dbeafe;
  color: #1d4ed8;
}

.optic-confidence {
  grid-column: 2 / 4;
  justify-self: end;
  margin-top: 4px;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.optic-confidence.is-ready {
  color: #15803d;
}

.optic-confidence.is-review {
  color: #b45309;
}

.optic-confidence.is-required {
  color: #b91c1c;
}

.optic-conveyor-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.optic-conveyor-item-actions button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #dbe3ed;
  border-radius: 8px;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
}

.optic-conveyor-item-actions button:hover:not(:disabled) {
  border-color: #93b4f8;
  color: #2563eb;
}

.optic-conveyor-review {
  min-height: 540px;
}

.optic-review-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #475569;
  font-size: 10px;
  font-weight: 850;
}

.optic-review-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.optic-review-images figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid #dce5f0;
  border-radius: 13px;
  background: #f8fafc;
}

.optic-review-images img,
.optic-review-missing {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: contain;
}

.optic-review-missing {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #b91c1c;
}

.optic-review-images figcaption {
  padding: 8px 10px;
  border-top: 1px solid #e6edf5;
  color: #475569;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.optic-review-empty,
.optic-review-error {
  display: grid;
  min-height: 350px;
  place-items: center;
  align-content: center;
  padding: 30px;
  text-align: center;
}

.optic-review-empty strong,
.optic-review-error strong {
  margin-top: 10px;
  font-size: 15px;
}

.optic-review-empty p,
.optic-review-error p {
  max-width: 480px;
  margin: 7px 0 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.55;
}

.optic-review-error {
  color: #b91c1c;
}

.optic-review-error button {
  margin-top: 13px;
}

.optic-conveyor-image-browser > header {
  justify-content: flex-start;
}

.optic-conveyor-image-browser > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  padding: 12px;
}

.optic-conveyor-image-browser figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid #dce5f0;
  border-radius: 11px;
  background: #ffffff;
}

.optic-conveyor-image-browser img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: contain;
  background: #eef2f7;
}

.optic-conveyor-image-browser figcaption {
  padding: 8px;
}

.optic-conveyor-image-browser figcaption strong,
.optic-conveyor-image-browser figcaption span {
  display: block;
}

.optic-conveyor-image-browser figcaption strong {
  font-size: 10px;
}

.optic-conveyor-image-browser figcaption span {
  margin-top: 3px;
  overflow: hidden;
  color: #64748b;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-spinning {
  animation: optic-conveyor-spin 0.85s linear infinite;
}

@keyframes optic-conveyor-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1250px) {
  .optic-conveyor-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .optic-conveyor-workspace {
    grid-template-columns: 310px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .optic-conveyor-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .optic-conveyor-workspace {
    grid-template-columns: 1fr;
  }

  .optic-conveyor-queue-list {
    max-height: 420px;
  }
}

@media (max-width: 680px) {
  .optic-conveyor-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .optic-review-images {
    grid-template-columns: 1fr;
  }

  .optic-conveyor-toolbar-actions > * {
    flex: 1;
  }
}


/* ==========================================================
   Conveyor Inventory Commit
========================================================== */

.optic-conveyor-commit {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid #16a34a;
  border-radius: 10px;
  background: #16a34a;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 7px 16px rgba(22, 163, 74, 0.18);
}

.optic-conveyor-commit:hover:not(:disabled) {
  background: #15803d;
}

.optic-conveyor-commit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.optic-conveyor-mode > span.is-saving {
  background: #16a34a;
  box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.13);
}

.optic-conveyor-commit-message {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 9px;
  padding: 12px 15px;
  border: 1px solid #a7e3bb;
  border-radius: 12px;
  background: #effcf3;
  color: #166534;
  font-size: 12px;
  font-weight: 800;
}

.optic-belt-save-saved {
  border-color: #22c55e !important;
  background: #123622 !important;
  color: #86efac !important;
}

.optic-belt-save-saving {
  border-color: #38bdf8 !important;
  color: #7dd3fc !important;
}

.optic-belt-save-error {
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}

.optic-conveyor-status-saved {
  background: #dcfce7;
  color: #166534;
}

.optic-conveyor-status-saving {
  background: #dbeafe;
  color: #1d4ed8;
}

.optic-conveyor-status-save-error {
  background: #fee2e2;
  color: #991b1b;
}

.optic-approval-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 14px 14px;
  padding: 13px 14px;
  border: 1px solid #dce5f0;
  border-radius: 12px;
  background: #f8fafc;
}

.optic-approval-bar span {
  display: block;
  color: #64748b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.optic-approval-bar strong {
  display: block;
  margin-top: 3px;
  color: #0f172a;
  font-size: 13px;
}

.optic-saved-result {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 14px 14px;
  padding: 18px;
  border: 1px solid #a7e3bb;
  border-radius: 13px;
  background: #effcf3;
  color: #166534;
}

.optic-saved-result strong {
  display: block;
  font-size: 15px;
}

.optic-saved-result p {
  margin: 5px 0 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 800;
}

.optic-save-error {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 14px;
  padding: 15px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fff5f5;
  color: #b91c1c;
}

.optic-save-error strong {
  display: block;
  font-size: 13px;
}

.optic-save-error p {
  margin: 5px 0 11px;
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 680px) {
  .optic-approval-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .optic-approval-bar button {
    width: 100%;
  }
}


/* ==========================================================
   Batch Label Center and Finish Workflow
========================================================== */

.optic-conveyor-label-button,
.optic-conveyor-finish {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.optic-conveyor-label-button {
  border: 1px solid #7c3aed;
  background: #7c3aed;
  color: #ffffff;
  box-shadow:
    0 7px 16px rgba(124, 58, 237, 0.17);
}

.optic-conveyor-label-button:hover:not(:disabled) {
  background: #6d28d9;
}

.optic-conveyor-label-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.optic-conveyor-finish {
  border: 1px solid #0f766e;
  background: #0f766e;
  color: #ffffff;
}

.optic-conveyor-finish:hover {
  background: #115e59;
}

.optic-label-center {
  overflow: hidden;
  border: 1px solid #d8c9fb;
  border-radius: 16px;
  background: #ffffff;
}

.optic-label-center > header {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid #e8e0fb;
  background:
    linear-gradient(
      90deg,
      #faf7ff,
      #f4efff
    );
}

.optic-label-center header span {
  display: block;
  color: #7c3aed;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.optic-label-center header h3 {
  margin: 3px 0 0;
  color: #0f172a;
  font-size: 17px;
}

.optic-label-center-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.optic-label-list {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 340px;
  overflow: auto;
  padding: 12px;
}

.optic-label-item {
  display: grid;
  grid-template-columns:
    auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #dce5f0;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
}

.optic-label-item.is-selected {
  border-color: #a78bfa;
  background: #faf7ff;
}

.optic-label-item > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.optic-label-check {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: #ede9fe;
  color: #7c3aed;
}

.optic-label-copy {
  min-width: 0;
}

.optic-label-copy strong,
.optic-label-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.optic-label-copy strong {
  color: #0f172a;
  font-size: 12px;
}

.optic-label-copy small {
  margin-top: 3px;
  color: #64748b;
  font-size: 9px;
}

.optic-label-ready {
  padding: 5px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.optic-queue-label-check {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #d8c9fb;
  border-radius: 8px;
  background: #faf7ff;
  color: #7c3aed;
  cursor: pointer;
}

.optic-queue-label-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .optic-label-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .optic-label-center > header {
    align-items: stretch;
    flex-direction: column;
  }

  .optic-label-center-actions > * {
    flex: 1;
  }
}


/* ==========================================================
   Intake Batch Session
========================================================== */

.optic-batch-session {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid #2f496b;
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      #14243a,
      #0d1b2e
    );
  color: #ffffff;
}

.optic-batch-session > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid
    rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background:
    rgba(255, 255, 255, 0.04);
}

.optic-batch-session span {
  display: block;
  color: #7db7ff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.optic-batch-session strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #ffffff;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.optic-batch-error {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid #fca5a5;
  border-radius: 12px;
  background: #fff1f2;
  color: #991b1b;
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .optic-batch-session {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .optic-batch-session {
    grid-template-columns: 1fr;
  }
}
.optic-conveyor-image-browser figure {
  background: #0b1d2f !important;
  border-color: #244766 !important;
}

.optic-conveyor-image-browser img {
  background: #06111f !important;
}

.optic-conveyor-image-browser figcaption {
  background: #0b1d2f !important;
}

.optic-conveyor-image-browser figcaption strong {
  color: #f8fafc !important;
}

.optic-conveyor-image-browser figcaption span {
  color: #8fa8c2 !important;
}
.pricing-intelligence {
  display: grid;
  gap: 20px;
}

.pricing-intelligence-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.pricing-intelligence-heading h3,
.pricing-intelligence-heading p {
  margin-top: 0;
}

.pricing-intelligence-heading h3 {
  margin-bottom: 6px;
}

.pricing-intelligence-engine-badge {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.1);
  color: #93c5fd;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
}

.pricing-intelligence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pricing-intelligence-metric {
  display: grid;
  gap: 6px;
  min-height: 118px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.62);
}

.pricing-intelligence-metric > span,
.pricing-intelligence-comparison span,
.pricing-intelligence-audit span,
.pricing-intelligence-recommendation span {
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pricing-intelligence-metric strong {
  color: #f8fafc;
  font-size: 1.45rem;
  line-height: 1.15;
}

.pricing-intelligence-metric small {
  align-self: end;
  color: #64748b;
  font-size: 0.75rem;
  line-height: 1.35;
}

.pricing-metric-market strong {
  color: #60a5fa;
}

.pricing-metric-adjusted strong {
  color: #a78bfa;
}

.pricing-metric-retail strong,
.pricing-metric-profit strong {
  color: #4ade80;
}

.pricing-metric-buy strong {
  color: #fb923c;
}

.pricing-metric-margin strong {
  color: #facc15;
}

.pricing-intelligence-comparison {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(30, 41, 59, 0.45);
}

.pricing-intelligence-comparison > div {
  display: grid;
  gap: 5px;
}

.pricing-intelligence-comparison strong {
  color: #e2e8f0;
  font-size: 1rem;
}

.pricing-intelligence-recommendation {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
}

.pricing-intelligence-recommendation > div {
  display: grid;
  gap: 5px;
}

.pricing-intelligence-recommendation strong {
  font-size: 1.05rem;
}

.pricing-intelligence-recommendation p {
  margin: 0;
  line-height: 1.55;
}

.pricing-intelligence-recommendation-success {
  border: 1px solid rgba(34, 197, 94, 0.32);
  background: rgba(34, 197, 94, 0.09);
}

.pricing-intelligence-recommendation-success strong {
  color: #4ade80;
}

.pricing-intelligence-recommendation-warning {
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.09);
}

.pricing-intelligence-recommendation-warning strong {
  color: #fbbf24;
}

.pricing-intelligence-audit {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.42);
}

.pricing-intelligence-audit > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pricing-intelligence-audit strong {
  color: #e2e8f0;
  font-size: 0.88rem;
  text-align: right;
}

.pricing-intelligence-empty {
  display: grid;
  gap: 8px;
  padding: 24px 18px;
  border: 1px dashed rgba(148, 163, 184, 0.3);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.36);
  text-align: center;
}

.pricing-intelligence-empty strong {
  color: #f8fafc;
}

.pricing-intelligence-empty p {
  margin: 0;
}

.pricing-intelligence-disclaimer {
  margin: 0;
  color: #64748b;
  font-size: 0.75rem;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .pricing-intelligence-heading {
    flex-direction: column;
  }

  .pricing-intelligence-grid {
    grid-template-columns: 1fr;
  }

  .pricing-intelligence-comparison {
    grid-template-columns: 1fr;
  }

  .pricing-intelligence-audit > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .pricing-intelligence-audit strong {
    text-align: left;
  }
}
/* ==========================================================
   OPTIC DATA · Inventory AI Identification
========================================================== */

.ai-identify-workspace {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ai-identify-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid #dbe5f0;
  border-radius: 14px;
  background:
    radial-gradient(
      circle at top right,
      rgba(37, 99, 235, 0.11),
      transparent 38%
    ),
    #ffffff;
}

.ai-identify-hero-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 13px;
  background: #eaf2ff;
  color: #2563eb;
}

.ai-identify-hero h3 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 850;
}

.ai-identify-hero p:not(.eyebrow) {
  max-width: 680px;
  margin: 5px 0 0;
  color: #64748b;
  font-size: 10px;
  line-height: 1.5;
}

.ai-identify-warning,
.ai-identify-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 11px;
}

.ai-identify-warning {
  border: 1px solid #f59e0b;
  background: #fffbeb;
  color: #92400e;
}

.ai-identify-warning strong {
  color: #78350f;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.4;
}

.ai-identify-warning p {
  margin: 4px 0 0;
  color: #78350f;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
}

.ai-identify-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ai-identify-images article {
  overflow: hidden;
  border: 1px solid #dfe6ef;
  border-radius: 13px;
  background: #ffffff;
}

.ai-identify-images header {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  border-bottom: 1px solid #edf1f6;
  background: #f8fafc;
}

.ai-identify-images header span {
  color: #64748b;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ai-identify-images header strong {
  color: #16a34a;
  font-size: 9px;
}

.ai-identify-images article > div {
  display: grid;
  height: 280px;
  place-items: center;
  overflow: hidden;
  background: #eef2f7;
  color: #94a3b8;
}

.ai-identify-images img {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: contain;
}

.ai-identify-message {
  align-items: center;
  font-size: 9px;
  font-weight: 750;
}

.ai-identify-message.is-success {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.ai-identify-message.is-error {
  border: 1px solid #fecaca;
  background: #fff5f5;
  color: #b91c1c;
}

.ai-identify-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ai-identify-run,
.ai-identify-apply {
  display: inline-flex;
  min-height: 39px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 9px;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}

.ai-identify-run {
  border: 1px solid #bfd3fc;
  background: #eaf2ff;
  color: #1d4ed8;
}

.ai-identify-apply {
  border: 1px solid #2563eb;
  background: #2563eb;
  color: #ffffff;
}

.ai-identify-run:hover:not(:disabled) {
  background: #dbeafe;
}

.ai-identify-apply:hover:not(:disabled) {
  background: #1d4ed8;
}

.ai-identify-run:disabled,
.ai-identify-apply:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ai-identify-results {
  overflow: hidden;
  border: 1px solid #dfe6ef;
  border-radius: 13px;
  background: #ffffff;
}

.ai-identify-results > header {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #edf1f6;
  background: #f8fafc;
}

.ai-identify-results > header span,
.ai-identify-notes > span {
  display: block;
  margin-bottom: 2px;
  color: #64748b;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ai-identify-results > header h3 {
  margin: 0;
  color: #0f172a;
  font-size: 11px;
  font-weight: 850;
}

.ai-identify-results > header > strong {
  color: #2563eb;
  font-size: 10px;
}

.ai-identify-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 4px 12px 8px;
}

.ai-identify-result-row {
  display: flex;
  min-width: 0;
  min-height: 39px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #edf1f6;
}

.ai-identify-result-row:nth-child(odd) {
  padding-right: 12px;
}

.ai-identify-result-row:nth-child(even) {
  padding-left: 12px;
  border-left: 1px solid #edf1f6;
}

.ai-identify-result-row span {
  color: #64748b;
  font-size: 8px;
}

.ai-identify-result-row strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 9px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-identify-scores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ai-identify-score {
  padding: 11px;
  border: 1px solid #dfe6ef;
  border-radius: 11px;
  background: #ffffff;
}

.ai-identify-score > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ai-identify-score span {
  color: #64748b;
  font-size: 8px;
  font-weight: 750;
}

.ai-identify-score strong {
  color: #0f172a;
  font-size: 13px;
}

.ai-identify-score-track {
  height: 6px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.ai-identify-score-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #60a5fa, #2563eb);
}

.ai-identify-notes {
  padding: 12px;
  border: 1px solid #dfe6ef;
  border-radius: 11px;
  background: #ffffff;
}

.ai-identify-notes p {
  margin: 5px 0 0;
  color: #475569;
  font-size: 9px;
  line-height: 1.55;
}

.ai-identify-disclaimer {
  margin: 0 !important;
  padding: 9px 12px !important;

  border: 1px solid #d97706 !important;
  border-radius: 10px !important;

  background: #fff7d6 !important;
  color: #000000 !important;

  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

.ai-identify-disclaimer * {
  color: #000000 !important;
}

@media (max-width: 760px) {
  .ai-identify-images,
  .ai-identify-result-grid,
  .ai-identify-scores {
    grid-template-columns: 1fr;
  }

  .ai-identify-result-row:nth-child(odd),
  .ai-identify-result-row:nth-child(even) {
    padding-right: 0;
    padding-left: 0;
    border-left: none;
  }

  .ai-identify-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-identify-run,
  .ai-identify-apply {
    width: 100%;
  }
}
/* ==========================================================
   OPTIC DATA · Universal Checkout Scanner v2
   Clean POS Command Bar + Camera Scanner
========================================================== */

.pos-scanner {
  display: grid;
  grid-template-columns:
    minmax(180px, 0.75fr)
    minmax(360px, 1.7fr)
    minmax(220px, auto);
  align-items: center;
  gap: 18px;

  margin-top: 18px;
  padding: 16px 18px;

  border: 1px solid #d7e0ec;
  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f8fbff 100%
    );

  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.07);

  color: #0f172a;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    background 0.18s ease;
}

.pos-scanner:hover {
  border-color: #bfdbfe;

  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.09);
}

/* ==========================================================
   Scanner States
========================================================== */

.pos-scanner-success {
  border-color: #86efac;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f0fdf4 100%
    );

  box-shadow:
    0 12px 30px rgba(22, 163, 74, 0.10);
}

.pos-scanner-error {
  border-color: #fca5a5;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #fff7f7 100%
    );

  box-shadow:
    0 12px 30px rgba(220, 38, 38, 0.08);
}

/* ==========================================================
   Scanner Identity
========================================================== */

.pos-scanner-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pos-scanner-icon {
  display: grid;

  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  place-items: center;

  border: 1px solid #bfdbfe;
  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      #eff6ff,
      #dbeafe
    );

  color: #2563eb;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.pos-scanner-heading > div:last-child {
  min-width: 0;
}

.pos-scanner-heading span {
  display: block;

  margin-bottom: 4px;

  color: #2563eb;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: 0.10em;

  text-transform: uppercase;
}

.pos-scanner-heading strong {
  display: block;

  overflow: hidden;

  color: #0f172a;

  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================
   Scanner Input
========================================================== */

.pos-scanner-form {
  position: relative;

  display: flex;
  align-items: center;

  min-width: 0;
}

.pos-scanner-form > svg {
  position: absolute;

  left: 15px;

  z-index: 2;

  color: #64748b;

  pointer-events: none;
}

.pos-scanner-form input {
  width: 100%;
  height: 48px;

  padding:
    0 86px
    0 44px;

  border: 1px solid #cbd5e1;
  border-radius: 13px;

  background: #ffffff;

  color: #0f172a;

  font-size: 14px;
  font-weight: 600;

  outline: none;

  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, 0.03);

  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.pos-scanner-form input::placeholder {
  color: #94a3b8;
  font-weight: 500;
}

.pos-scanner-form input:focus {
  border-color: #3b82f6;

  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.10);
}

.pos-scanner-form button {
  position: absolute;

  right: 6px;

  min-width: 68px;
  height: 36px;

  padding: 0 14px;

  border: 0;
  border-radius: 9px;

  background:
    linear-gradient(
      180deg,
      #3b82f6,
      #2563eb
    );

  color: #ffffff;

  font-size: 12px;
  font-weight: 850;

  cursor: pointer;

  box-shadow:
    0 4px 10px rgba(37, 99, 235, 0.20);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.pos-scanner-form button:hover {
  transform: translateY(-1px);

  background:
    linear-gradient(
      180deg,
      #2563eb,
      #1d4ed8
    );

  box-shadow:
    0 6px 14px rgba(37, 99, 235, 0.24);
}

.pos-scanner-form button:active {
  transform: translateY(0);
}

/* ==========================================================
   Scanner Actions
========================================================== */

.pos-scanner-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;

  min-width: 0;
}

.pos-camera-scan-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  height: 40px;

  padding: 0 14px;

  border: 1px solid #bfdbfe;
  border-radius: 11px;

  background: #eff6ff;

  color: #1d4ed8;

  font-size: 12px;
  font-weight: 850;

  cursor: pointer;

  white-space: nowrap;

  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.pos-camera-scan-button:hover {
  transform: translateY(-1px);

  border-color: #60a5fa;

  background: #dbeafe;

  box-shadow:
    0 5px 12px rgba(37, 99, 235, 0.12);
}

.pos-scanner-status {
  display: flex;
  align-items: center;

  gap: 7px;

  max-width: 190px;

  color: #64748b;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.35;
}

.pos-scanner-status span {
  overflow: hidden;

  text-overflow: ellipsis;
}

.pos-scanner-success
.pos-scanner-status {
  color: #15803d;
}

.pos-scanner-error
.pos-scanner-status {
  color: #b91c1c;
}

/* ==========================================================
   Camera Scanner Modal
========================================================== */

.pos-camera-scanner-backdrop {
  position: fixed;
  inset: 0;

  z-index: 12000;

  display: grid;
  place-items: center;

  padding: 24px;

  background:
    rgba(2, 6, 23, 0.82);

  backdrop-filter: blur(8px);
}

.pos-camera-scanner {
  width:
    min(760px, 96vw);

  overflow: hidden;

  border:
    1px solid rgba(148, 163, 184, 0.35);

  border-radius: 22px;

  background: #ffffff;

  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.48);
}

.pos-camera-scanner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding: 18px 20px;

  border-bottom:
    1px solid #e2e8f0;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f8fafc
    );
}

.pos-camera-scanner-header span {
  display: block;

  color: #2563eb;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: 0.10em;

  text-transform: uppercase;
}

.pos-camera-scanner-header h3 {
  margin: 5px 0 0;

  color: #0f172a;

  font-size: 20px;
  font-weight: 850;
}

.pos-camera-scanner-close {
  display: grid;

  width: 38px;
  height: 38px;

  place-items: center;

  border: 1px solid #dbe3ef;
  border-radius: 11px;

  background: #ffffff;

  color: #475569;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.pos-camera-scanner-close:hover {
  transform: rotate(3deg);

  background: #f1f5f9;

  color: #0f172a;
}

/* ==========================================================
   Live Camera
========================================================== */

.pos-camera-scanner-preview {
  position: relative;

  width: 100%;
  height: 440px;

  overflow: hidden;

  background: #020617;
}

.pos-camera-scanner-preview video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.pos-camera-scan-frame {
  position: absolute;

  top: 50%;
  left: 50%;

  width:
    min(72%, 500px);

  height:
    min(48%, 220px);

  transform:
    translate(-50%, -50%);

  border:
    2px solid rgba(255, 255, 255, 0.96);

  border-radius: 18px;

  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.32),
    0 0 28px rgba(59, 130, 246, 0.20);

  pointer-events: none;
}

.pos-camera-scan-frame::before,
.pos-camera-scan-frame::after {
  content: "";

  position: absolute;

  width: 36px;
  height: 36px;
}

.pos-camera-scan-frame::before {
  top: -3px;
  left: -3px;

  border-top: 4px solid #60a5fa;
  border-left: 4px solid #60a5fa;

  border-radius: 10px 0 0 0;
}

.pos-camera-scan-frame::after {
  right: -3px;
  bottom: -3px;

  border-right: 4px solid #60a5fa;
  border-bottom: 4px solid #60a5fa;

  border-radius: 0 0 10px 0;
}

.pos-camera-scan-frame span {
  position: absolute;

  top: 50%;
  left: 7%;
  right: 7%;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #22c55e,
      transparent
    );

  box-shadow:
    0 0 14px rgba(34, 197, 94, 0.95);
}

/* ==========================================================
   Camera Feedback
========================================================== */

.pos-camera-scanner-overlay-message {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;
  align-content: center;

  gap: 10px;

  background:
    rgba(2, 6, 23, 0.72);

  color: #ffffff;

  text-align: center;
}

.pos-camera-scanner-overlay-message strong {
  color: inherit;

  font-size: 15px;
}

.pos-camera-scanner-success {
  color: #86efac;
}

.pos-camera-scanner-error {
  color: #fca5a5;
}

/* ==========================================================
   Camera Footer
========================================================== */

.pos-camera-scanner-status {
  display: flex;
  align-items: center;

  gap: 8px;

  padding:
    15px 20px 6px;

  color: #334155;

  font-size: 13px;
  font-weight: 750;
}

.pos-camera-scanner-help {
  margin: 0;

  padding:
    4px 20px 18px;

  color: #64748b;

  font-size: 12px;
  line-height: 1.55;
}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width: 1100px) {
  .pos-scanner {
    grid-template-columns:
      minmax(170px, 0.8fr)
      minmax(300px, 1.6fr);
  }

  .pos-scanner-actions {
    grid-column: 1 / -1;

    justify-content:
      space-between;

    padding-top: 2px;
  }

  .pos-scanner-status {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .pos-scanner {
    grid-template-columns: 1fr;

    padding: 16px;
  }

  .pos-scanner-actions {
    grid-column: auto;

    justify-content:
      flex-start;

    flex-wrap: wrap;
  }

  .pos-scanner-status {
    width: 100%;
  }
}

@media (max-width: 650px) {
  .pos-camera-scanner-backdrop {
    padding: 0;
  }

  .pos-camera-scanner {
    width: 100vw;
    min-height: 100vh;

    border-radius: 0;
  }

  .pos-camera-scanner-preview {
    height: 62vh;
  }

  .pos-camera-scan-frame {
    width: 82%;
    height: 42%;
  }
}
.pos-scan-success-toast {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 13000;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: min(420px, calc(100vw - 40px));
  padding: 14px 16px;
  border: 1px solid #86efac;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
  animation: posScanSuccessIn 0.22s ease-out;
}

.pos-scan-success-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: #dcfce7;
  color: #15803d;
}

.pos-scan-success-toast span {
  display: block;
  color: #15803d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pos-scan-success-toast strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #0f172a;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-scan-success-price {
  margin: 0 !important;
  color: #15803d !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  white-space: nowrap;
}

@keyframes posScanSuccessIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 650px) {
  .pos-scan-success-toast {
    right: 14px;
    bottom: 14px;
    width: calc(100vw - 28px);
  }
}/* ==========================================================
   OPTIC DATA · Express Checkout Dark Theme
   Scoped to Express Checkout only.
========================================================== */

.express-checkout-shell {
  width: 100%;
  min-height: calc(100vh - 130px);
  padding: 18px;
  border: 1px solid #244766;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(11, 29, 47, 0.98), rgba(6, 17, 31, 0.98));
  color: #f8fafc;
  box-sizing: border-box;
}

.express-checkout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.express-checkout-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.express-checkout-bolt {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(79, 179, 255, 0.38);
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.28);
  color: #7dd3fc;
}

.express-checkout-brand span {
  display: block;
  margin-bottom: 4px;
  color: #4fb3ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.express-checkout-brand h1 {
  margin: 0;
  color: #f8fafc;
  font-size: 26px;
  line-height: 1.05;
}

.express-checkout-exit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #244766;
  border-radius: 10px;
  background: #102b46;
  color: #eaf2fb;
  font-weight: 800;
  cursor: pointer;
}

.express-checkout-exit:hover {
  border-color: #4fb3ff;
  background: #163957;
  color: #ffffff;
}

.express-checkout-scanner {
  margin-bottom: 16px;
}

.express-checkout-main {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.7fr);
  gap: 16px;
  align-items: start;
}

.express-cart-panel,
.express-total-panel {
  min-width: 0;
}

.express-cart-panel {
  min-height: 420px;
  padding: 16px;
  border: 1px solid #244766;
  border-radius: 16px;
  background: #0b1d2f;
}

.express-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(143, 168, 194, 0.18);
  color: #4fb3ff;
}

.express-section-heading span {
  display: block;
  color: #8fa8c2;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.express-section-heading h2 {
  margin: 4px 0 0;
  color: #f8fafc;
  font-size: 18px;
}

.express-cart-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.express-cart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid #244766;
  border-radius: 12px;
  background: #0f263d;
}

.express-cart-row:hover {
  background: #102b46;
  border-color: #3b6c94;
}

.express-cart-row-main {
  min-width: 0;
}

.express-cart-row-main strong {
  display: block;
  overflow: hidden;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.express-cart-row-main span {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #9fb2c6;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.express-cart-price {
  color: #42e2a4;
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}

.express-cart-remove {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(255, 102, 117, 0.35);
  border-radius: 9px;
  background: rgba(255, 77, 95, 0.14);
  color: #ff7a87;
  cursor: pointer;
}

.express-cart-remove:hover {
  background: rgba(255, 77, 95, 0.24);
  border-color: #ff6675;
}

.express-cart-empty {
  display: grid;
  min-height: 330px;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: #8fa8c2;
  text-align: center;
}

.express-cart-empty strong {
  color: #f8fafc;
  font-size: 16px;
}

.express-cart-empty span {
  max-width: 320px;
  color: #9fb2c6;
  font-size: 12px;
  line-height: 1.5;
}

.express-total-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.express-total-card {
  padding: 18px;
  border: 1px solid #244766;
  border-radius: 16px;
  background: #0f263d;
}

.express-total-label {
  display: block;
  color: #8fa8c2;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.express-total-value {
  display: block;
  margin-top: 4px;
  color: #f8fafc;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
}

.express-total-breakdown {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(143, 168, 194, 0.18);
}

.express-total-breakdown div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.express-total-breakdown span {
  color: #9fb2c6;
  font-size: 12px;
}

.express-total-breakdown strong {
  color: #eaf2fb;
  font-size: 12px;
}

.express-payment-grid {
  display: grid;
  gap: 10px;
}

.express-pay-button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 12px 14px;
  border: 1px solid #244766;
  border-radius: 12px;
  background: #0f263d;
  color: #eaf2fb;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.express-pay-button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: #4fb3ff;
  background: #163957;
  color: #ffffff;
}

.express-pay-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.express-pay-cash {
  color: #42e2a4;
}

.express-pay-card {
  color: #7dd3fc;
}

.express-pay-store {
  color: #c4b5fd;
}

.express-pay-button span {
  color: inherit;
}

.express-payment-note {
  margin: 2px 2px 0;
  color: #70869c;
  font-size: 10px;
  line-height: 1.45;
}

/* Keep scanner controls inside Express mode dark too. */
.express-checkout-scanner .pos-scanner,
.express-checkout-scanner .scanner-panel,
.express-checkout-scanner .panel,
.express-checkout-scanner .cf-card {
  background: #06111f !important;
  border-color: #244766 !important;
  color: #f8fafc !important;
}

.express-checkout-scanner input {
  background: #0b1d2f !important;
  border-color: #244766 !important;
  color: #f8fafc !important;
}

.express-checkout-scanner input::placeholder {
  color: #70869c !important;
}

@media (max-width: 980px) {
  .express-checkout-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .express-checkout-shell {
    padding: 12px;
  }

  .express-checkout-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .express-checkout-exit {
    width: 100%;
    justify-content: center;
  }

  .express-cart-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .express-cart-remove {
    grid-column: 2;
  }

  .express-total-value {
    font-size: 34px;
  }
}
.customers-page {
  display: grid;
  gap: 20px;
}

.customers-hero {
  display: grid;
  gap: 18px;
}

.customers-store-name {
  margin: 8px 0 4px;
  color: #cbd5e1;
}

.customers-primary-button,
.customers-secondary-button,
.customers-modal-close {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
}

.customers-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 16px;
  background: #1d4ed8;
  border-color: #3b82f6;
  color: #ffffff;
  font-weight: 800;
}

.customers-primary-button:hover {
  background: #2563eb;
}

.customers-primary-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.customers-secondary-button {
  min-height: 38px;
  padding: 9px 14px;
  background: #0b1b2b;
  border-color: #29445f;
  color: #dbeafe;
  font-weight: 700;
}

.customers-secondary-button:hover {
  background: #10263c;
  border-color: #3b82f6;
}

.customers-metrics {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.customers-metric {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #213b55;
  border-radius: 14px;
  background: #0a1a2a;
}

.customers-metric > svg {
  flex: 0 0 auto;
  color: #60a5fa;
}

.customers-metric div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.customers-metric span {
  color: #7f93aa;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.customers-metric strong {
  color: #f8fafc;
  font-size: 1.12rem;
}

.customers-workspace {
  display: grid;
  grid-template-columns:
    minmax(300px, 0.85fr)
    minmax(0, 1.6fr);
  gap: 20px;
  align-items: start;
}

.customers-directory,
.customers-detail {
  min-width: 0;
}

.customers-directory {
  display: grid;
  gap: 14px;
}

.customers-section-heading,
.customers-detail-header,
.customers-subheading,
.customers-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.customers-section-heading h3,
.customers-detail-header h3,
.customers-modal-header h3 {
  margin: 3px 0 0;
  color: #f8fafc;
}

.customers-count {
  padding: 6px 10px;
  border: 1px solid #29445f;
  border-radius: 999px;
  background: #0b1b2b;
  color: #9fb6ce;
  font-size: 0.75rem;
  font-weight: 800;
}

.customers-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid #29445f;
  border-radius: 12px;
  background: #071522;
}

.customers-search svg {
  color: #6f88a1;
}

.customers-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f8fafc;
  font: inherit;
}

.customers-search input::placeholder {
  color: #61788f;
}

.customers-list {
  display: grid;
  gap: 8px;
  max-height: 640px;
  overflow-y: auto;
  padding-right: 2px;
}

.customers-list-item {
  width: 100%;
  display: grid;
  grid-template-columns:
    auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 12px;
  border: 1px solid #1c344d;
  border-radius: 12px;
  background: #081827;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.customers-list-item:hover {
  border-color: #315d85;
  background: #0b1d30;
}

.customers-list-item.is-active {
  border-color: #3b82f6;
  background: #10243a;
  box-shadow:
    inset 3px 0 0 #3b82f6;
}

.customers-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #315d85;
  border-radius: 12px;
  background: #102b46;
  color: #93c5fd;
  font-size: 0.82rem;
  font-weight: 900;
}

.customers-list-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.customers-list-copy strong {
  overflow: hidden;
  color: #f8fafc;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customers-list-copy span {
  overflow: hidden;
  color: #8097ad;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customers-list-value {
  display: grid;
  gap: 3px;
  text-align: right;
}

.customers-list-value strong {
  color: #e2e8f0;
}

.customers-list-value span {
  color: #6f88a1;
  font-size: 0.74rem;
}

.customers-detail {
  display: grid;
  gap: 18px;
}

.customers-contact-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.customers-contact-card {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid #213b55;
  border-radius: 12px;
  background: #091827;
}

.customers-contact-card svg {
  flex: 0 0 auto;
  color: #60a5fa;
}

.customers-contact-card div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.customers-contact-card span,
.customers-profile-stats span {
  color: #738ba3;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.customers-contact-card strong {
  overflow: hidden;
  color: #e5edf5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customers-profile-stats {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.customers-profile-stats > div {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid #213b55;
  border-radius: 12px;
  background: #081827;
}

.customers-profile-stats strong {
  color: #f8fafc;
  font-size: 1.05rem;
}

.customers-notes,
.customers-history {
  display: grid;
  gap: 12px;
  padding-top: 4px;
}

.customers-subheading {
  padding-bottom: 9px;
  border-bottom: 1px solid #1c344d;
}

.customers-subheading h4 {
  margin: 0;
  color: #f8fafc;
}

.customers-subheading span {
  color: #7890a7;
  font-size: 0.78rem;
}

.customers-notes p {
  margin: 0;
  padding: 14px;
  border: 1px solid #1f3952;
  border-radius: 12px;
  background: #071522;
  color: #c7d4df;
  line-height: 1.6;
  white-space: pre-wrap;
}

.customers-history-list {
  display: grid;
  gap: 8px;
}

.customers-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #1d344c;
  border-radius: 11px;
  background: #081827;
}

.customers-history-row > div {
  display: grid;
  gap: 3px;
}

.customers-history-row > div:last-child {
  text-align: right;
}

.customers-history-row strong {
  color: #e6edf5;
}

.customers-history-row span {
  color: #70889f;
  font-size: 0.77rem;
}

.customers-empty,
.customers-no-selection {
  padding: 28px 16px;
  border: 1px dashed #29445f;
  border-radius: 12px;
  color: #7790a8;
  text-align: center;
}

.customers-no-selection {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 300px;
}

.customers-no-selection h3,
.customers-no-selection p {
  margin: 0;
}

.customers-no-selection svg {
  color: #4f7da8;
}

.customers-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(2, 8, 23, 0.78);
  backdrop-filter: blur(5px);
}

.customers-modal {
  width: min(680px, 100%);
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  padding: 22px;
  border: 1px solid #2a4a68;
  border-radius: 16px;
  background: #071522;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.45);
}

.customers-modal-header {
  margin-bottom: 18px;
}

.customers-modal-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: #0b1b2b;
  border-color: #29445f;
  color: #cbd5e1;
}

.customers-modal-close:hover {
  border-color: #3b82f6;
  color: #ffffff;
}

.customers-form {
  display: grid;
  gap: 16px;
}

.customers-form-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.customers-form label,
.customers-notes-field {
  display: grid;
  gap: 7px;
}

.customers-form label > span {
  color: #94a8bb;
  font-size: 0.78rem;
  font-weight: 800;
}

.customers-form input,
.customers-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #29445f;
  border-radius: 10px;
  outline: none;
  background: #081827;
  color: #f8fafc;
  font: inherit;
}

.customers-form input {
  min-height: 42px;
  padding: 9px 11px;
}

.customers-form textarea {
  min-height: 112px;
  resize: vertical;
  padding: 11px;
  line-height: 1.5;
}

.customers-form input:focus,
.customers-form textarea:focus {
  border-color: #3b82f6;
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.12);
}

.customers-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

@media (max-width: 1100px) {
  .customers-metrics {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .customers-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .customers-metrics,
  .customers-contact-grid,
  .customers-profile-stats,
  .customers-form-grid {
    grid-template-columns: 1fr;
  }

  .customers-section-heading,
  .customers-detail-header,
  .customers-modal-header {
    align-items: flex-start;
  }

  .customers-list-item {
    grid-template-columns:
      auto minmax(0, 1fr);
  }

  .customers-list-value {
    grid-column: 2;
    text-align: left;
  }

  .customers-history-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .customers-history-row > div:last-child {
    text-align: left;
  }

  .customers-form-actions {
    flex-direction: column-reverse;
  }

  .customers-form-actions button {
    width: 100%;
  }
}.payroll-page{padding:28px;display:flex;flex-direction:column;gap:20px;color:#eef4ff}.payroll-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:26px;border:1px solid rgba(148,163,184,.16);border-radius:18px;background:linear-gradient(135deg,rgba(14,20,31,.96),rgba(9,14,23,.92))}.payroll-hero h1{margin:4px 0 8px;font-size:30px}.payroll-hero p{margin:0;color:#9eacc0;max-width:760px}.payroll-hero-actions,.payroll-modal-actions{display:flex;gap:10px}.payroll-primary-btn,.payroll-secondary-btn,.payroll-icon-btn{border:0;border-radius:10px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}.payroll-primary-btn{padding:11px 16px;background:#20c997;color:#061510}.payroll-secondary-btn{padding:10px 14px;background:#151d2a;color:#dce7f6;border:1px solid rgba(148,163,184,.18)}.payroll-secondary-btn.compact{padding:8px 12px;margin-left:auto}.payroll-primary-btn:disabled,.payroll-secondary-btn:disabled{opacity:.55;cursor:not-allowed}.payroll-alert{padding:12px 15px;border-radius:10px;font-weight:650}.payroll-alert.error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#fecaca}.payroll-alert.success{background:rgba(32,201,151,.1);border:1px solid rgba(32,201,151,.3);color:#a7f3d0}.payroll-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.payroll-metrics article{padding:18px;border-radius:14px;background:#0e1520;border:1px solid rgba(148,163,184,.14);display:flex;flex-direction:column;gap:8px}.payroll-metrics article>span{display:flex;align-items:center;gap:8px;color:#91a1b8;font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.payroll-metrics strong{font-size:26px}.payroll-metrics small{color:#718096}.payroll-workspace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,.85fr);gap:18px}.payroll-directory,.payroll-detail,.payroll-next-panel{background:#0d141e;border:1px solid rgba(148,163,184,.14);border-radius:16px}.payroll-directory,.payroll-detail{min-height:560px;padding:20px}.payroll-section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px}.payroll-section-heading h2,.payroll-section-heading h3{margin:3px 0 0}.payroll-section-heading>span{color:#718096;font-size:12px}.eyebrow{font-size:10px!important;letter-spacing:.13em!important;text-transform:uppercase;color:#20c997!important;font-weight:900!important}.payroll-filters{display:grid;grid-template-columns:1fr 170px;gap:10px;margin-bottom:14px}.payroll-search{display:flex;align-items:center;gap:8px;padding:0 12px;background:#080e16;border:1px solid rgba(148,163,184,.16);border-radius:10px}.payroll-search input,.payroll-filters select,.payroll-form-grid input,.payroll-form-grid select,.payroll-form-grid textarea{width:100%;background:#080e16;color:#e5edf8;border:1px solid rgba(148,163,184,.18);border-radius:9px;padding:10px 11px;outline:none}.payroll-search input{border:0;background:transparent;padding:11px 0}.payroll-employee-list{display:flex;flex-direction:column;gap:8px;max-height:455px;overflow:auto}.payroll-employee-row{width:100%;display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;text-align:left;padding:12px;background:#0a111a;border:1px solid rgba(148,163,184,.12);border-radius:11px;color:#e8eef8;cursor:pointer}.payroll-employee-row:hover,.payroll-employee-row.selected{border-color:rgba(32,201,151,.5);background:#101b22}.payroll-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#182635;color:#7ee7c8;font-weight:900}.payroll-avatar.large{width:54px;height:54px;font-size:18px}.payroll-employee-copy,.payroll-row-pay{display:flex;flex-direction:column;gap:4px}.payroll-employee-copy span,.payroll-row-pay span,.payroll-detail-header span{color:#7f8da1;font-size:12px}.payroll-row-pay{text-align:right}.payroll-status{display:inline-block;text-transform:capitalize}.payroll-status.active{color:#6ee7b7}.payroll-status.terminated{color:#fca5a5}.payroll-status.leave{color:#fde68a}.payroll-detail-header{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid rgba(148,163,184,.12)}.payroll-detail-header h2{margin:2px 0 3px}.payroll-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.payroll-detail-grid>div{padding:12px;border-radius:10px;background:#09111a;border:1px solid rgba(148,163,184,.1);display:flex;flex-direction:column;gap:5px}.payroll-detail-grid .wide{grid-column:1/-1}.payroll-detail-grid span,.payroll-notes>span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#738197;font-weight:800}.payroll-history{margin-top:20px}.payroll-section-heading.small{margin-bottom:10px}.payroll-history-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid rgba(148,163,184,.1)}.payroll-history-row>div{display:flex;flex-direction:column;gap:4px}.payroll-history-row span{font-size:11px;color:#7f8da1;text-transform:capitalize}.payroll-notes{margin-top:18px;padding:13px;border-radius:10px;background:#09111a}.payroll-notes p{margin:6px 0 0;color:#a9b5c6}.payroll-empty{padding:28px;text-align:center;color:#78869a}.payroll-empty.compact{padding:16px}.payroll-empty-detail{height:460px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.payroll-next-panel{display:flex;align-items:center;gap:13px;padding:17px 20px}.payroll-next-panel>div{display:flex;flex-direction:column;gap:3px}.payroll-next-panel span{color:#7f8da1;font-size:12px}.payroll-coming{margin-left:auto!important;color:#20c997!important;font-weight:900;letter-spacing:.1em}.payroll-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}.payroll-modal{width:min(760px,96vw);max-height:92vh;overflow:auto;background:#0e1621;border:1px solid rgba(148,163,184,.2);border-radius:17px;padding:22px;box-shadow:0 25px 80px rgba(0,0,0,.45)}.payroll-modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.payroll-modal-header h2{margin:3px 0 0}.payroll-icon-btn{width:36px;height:36px;background:#17202c;color:#dbe6f4}.payroll-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.payroll-form-grid label{display:flex;flex-direction:column;gap:6px}.payroll-form-grid label>span{font-size:11px;color:#91a0b5;font-weight:750}.payroll-form-grid .wide{grid-column:1/-1}.payroll-form-grid textarea{resize:vertical}.payroll-modal-actions{justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid rgba(148,163,184,.12)}@media(max-width:1100px){.payroll-metrics{grid-template-columns:1fr 1fr}.payroll-workspace{grid-template-columns:1fr}}@media(max-width:700px){.payroll-page{padding:14px}.payroll-hero{flex-direction:column}.payroll-metrics{grid-template-columns:1fr}.payroll-filters,.payroll-form-grid{grid-template-columns:1fr}.payroll-form-grid .wide{grid-column:auto}.payroll-employee-row{grid-template-columns:40px 1fr}.payroll-row-pay{grid-column:2;text-align:left}.payroll-detail-grid{grid-template-columns:1fr}.payroll-detail-grid .wide{grid-column:auto}}


/* Payroll Level 1 completion: approval, paid state, print actions, YTD ledger */
.payroll-print-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.payroll-print-actions .payroll-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.payroll-ytd-panel {
  margin-top: 18px;
}
.payroll-ytd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}
.payroll-ytd-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px;
  border: 1px solid rgba(148, 163, 184, 0.11);
  border-radius: 9px;
  background: #09111a;
}
.payroll-ytd-grid span {
  color: #7f8da1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.payroll-ytd-grid strong {
  font-size: 16px;
}
.payroll-ledger-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media (max-width: 700px) {
  .payroll-ytd-grid {
    grid-template-columns: 1fr;
  }
}


/* Payroll Level 1.5 — Tax Ledger & Year-End Center */
.payroll-detail-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.payroll-level15-note {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.08);
  color: #fcd34d;
  font-size: 12px;
  line-height: 1.55;
}

.payroll-tax-modal {
  width: min(880px, 96vw);
}

.payroll-checkbox-label {
  min-height: 42px;
  flex-direction: row !important;
  align-items: center;
  gap: 9px !important;
}

.payroll-checkbox-label input {
  width: auto !important;
}

.payroll-year-end-modal {
  width: min(1180px, 97vw);
}

.payroll-year-end-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}

.payroll-year-end-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.payroll-year-end-toolbar label span {
  color: #91a0b5;
  font-size: 11px;
  font-weight: 750;
}

.payroll-year-end-toolbar input {
  width: 120px;
  padding: 10px 11px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 9px;
  background: #080e16;
  color: #e5edf8;
}

.payroll-w2-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: 62vh;
  overflow: auto;
}

.payroll-w2-card {
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  background: #09111a;
}

.payroll-w2-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.payroll-w2-card-head > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.payroll-w2-card-head span,
.payroll-w2-empty {
  color: #7f8da1;
  font-size: 12px;
}

.payroll-w2-status {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px !important;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.payroll-w2-status.draft {
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d;
}

.payroll-w2-status.final {
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
}

.payroll-w2-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.payroll-w2-grid > div {
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.09);
  border-radius: 8px;
  background: #0d1620;
}

.payroll-w2-grid span {
  display: block;
  margin-bottom: 3px;
  color: #718096;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.payroll-w2-grid strong {
  font-size: 12px;
}

.payroll-w2-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .payroll-w2-list {
    grid-template-columns: 1fr;
  }

  .payroll-w2-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payroll-detail-actions {
    flex-direction: column;
  }
}


/* Payroll Level 2.1 — Federal Tax Engine */
.payroll-level2-note {
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 1px solid rgba(32, 201, 151, 0.25);
  border-radius: 10px;
  background: rgba(32, 201, 151, 0.07);
  color: #a7f3d0;
  font-size: 12px;
  line-height: 1.5;
}

.payroll-run-table input:disabled {
  opacity: 0.72;
  cursor: not-allowed;
  background: #0f1924;
}


/* Payroll Level 2.2 — North Carolina State Tax Engine */
.payroll-level2-note::before {
  content: "FEDERAL + NC AUTO TAX · ";
  font-weight: 900;
  letter-spacing: .06em;
}


/* Payroll Level 2.3A — Tax Liability Ledger */
.payroll-liability-modal { width: min(1100px, 97vw); }
.payroll-liability-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}
.payroll-liability-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.payroll-liability-toolbar label span {
  color: #91a0b5;
  font-size: 11px;
  font-weight: 750;
}
.payroll-liability-toolbar input,
.payroll-liability-toolbar select {
  min-width: 120px;
  padding: 10px 11px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 9px;
  background: #080e16;
  color: #e5edf8;
}
.payroll-liability-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.payroll-liability-summary article {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  background: #09111a;
}
.payroll-liability-summary span {
  color: #7f8da1;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.payroll-liability-summary strong { font-size: 19px; }
.payroll-liability-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 55vh;
  overflow-y: auto;
}
.payroll-liability-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 13px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 9px;
  background: #0b131d;
}
.payroll-liability-row > div:first-child,
.payroll-liability-amount {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.payroll-liability-row > div:first-child strong {
  text-transform: capitalize;
}
.payroll-liability-row span {
  color: #7f8da1;
  font-size: 11px;
}
.payroll-liability-amount { align-items: flex-end; }
.payroll-liability-status {
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 9px !important;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.payroll-liability-status.open {
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d;
}
.payroll-liability-status.paid {
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
}
@media (max-width: 800px) {
  .payroll-liability-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .payroll-liability-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}


/* Payroll Level 2.3B — Tax Deposit Center */
.payroll-deposit-modal {
  width: min(1180px, 97vw);
}

.payroll-deposit-settings,
.payroll-deposit-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}

.payroll-deposit-settings label,
.payroll-deposit-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.payroll-deposit-settings label span,
.payroll-deposit-toolbar label span {
  color: #91a0b5;
  font-size: 11px;
  font-weight: 750;
}

.payroll-deposit-settings select,
.payroll-deposit-toolbar input {
  min-width: 155px;
  padding: 10px 11px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 9px;
  background: #080e16;
  color: #e5edf8;
}

.payroll-deposit-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 56vh;
  overflow-y: auto;
}

.payroll-deposit-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.11);
  border-radius: 11px;
  background: #0a121c;
}

.payroll-deposit-row.overdue {
  border-color: rgba(239, 68, 68, 0.35);
}

.payroll-deposit-row.due-soon {
  border-color: rgba(245, 158, 11, 0.35);
}

.payroll-deposit-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 5px;
}

.payroll-deposit-row > div:first-child > span,
.payroll-deposit-row small {
  display: block;
  color: #7f8da1;
  font-size: 11px;
  margin-top: 4px;
}

.payroll-deposit-badge {
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.payroll-deposit-badge.complete {
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
}

.payroll-deposit-badge.upcoming {
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fd;
}

.payroll-deposit-badge.due-soon {
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d;
}

.payroll-deposit-badge.overdue {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

.payroll-deposit-money {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 4px 12px;
  min-width: 230px;
  text-align: right;
}

.payroll-deposit-money span {
  color: #7f8da1;
  font-size: 10px;
  text-transform: uppercase;
}

.payroll-deposit-money .payroll-secondary-btn {
  grid-column: 1 / -1;
  margin-top: 5px;
}

.payroll-modal-backdrop-nested {
  z-index: 10010;
}

.payroll-deposit-payment-modal {
  width: min(680px, 96vw);
}

@media (max-width: 800px) {
  .payroll-deposit-settings,
  .payroll-deposit-toolbar,
  .payroll-deposit-row {
    align-items: stretch;
    flex-direction: column;
  }

  .payroll-deposit-money {
    min-width: 0;
  }
}


/* Payroll Level 2.3C — Quarterly Reporting */
.payroll-quarterly-modal {
  width: min(1360px, 98vw);
}

.payroll-quarterly-toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.payroll-quarterly-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.payroll-quarterly-toolbar label span {
  color: #91a0b5;
  font-size: 11px;
  font-weight: 750;
}

.payroll-quarterly-toolbar input,
.payroll-quarterly-toolbar select {
  min-width: 110px;
  padding: 10px 11px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 9px;
  background: #080e16;
  color: #e5edf8;
}

.payroll-quarterly-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 14px;
}

.payroll-quarterly-meta span {
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.6);
  color: #94a3b8;
  font-size: 11px;
}

.payroll-quarterly-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.payroll-quarterly-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 13px;
  background: #09111a;
}

.payroll-quarterly-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.payroll-quarterly-card-head h3 {
  margin: 3px 0 0;
}

.payroll-reconcile-badge {
  align-self: flex-start;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.payroll-reconcile-badge.balanced {
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
}

.payroll-reconcile-badge.review {
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d;
}

.payroll-report-lines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.payroll-report-lines > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px;
  border: 1px solid rgba(148, 163, 184, 0.09);
  border-radius: 8px;
  background: #0d1620;
}

.payroll-report-lines > div.emphasis {
  border-color: rgba(59, 130, 246, 0.28);
  background: rgba(59, 130, 246, 0.08);
}

.payroll-report-lines span {
  color: #7f8da1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.payroll-report-lines strong {
  font-size: 14px;
}

.payroll-report-lines .text-value {
  text-transform: capitalize;
}

.payroll-report-schedule {
  margin-top: 12px;
  padding: 11px;
  border: 1px solid rgba(148, 163, 184, 0.09);
  border-radius: 9px;
  background: #0a131c;
}

.payroll-report-schedule > span {
  display: block;
  margin-top: 4px;
  color: #7f8da1;
  font-size: 11px;
}

.payroll-month-breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}

.payroll-month-breakdown > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px;
  border-radius: 7px;
  background: #070d14;
}

.payroll-month-breakdown span {
  color: #718096;
  font-size: 10px;
}

.payroll-month-breakdown strong {
  font-size: 11px;
}

.payroll-report-warning {
  margin: 12px 0 0;
  color: #fcd34d;
  font-size: 10px;
  line-height: 1.5;
}

.payroll-quarterly-snapshots {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.payroll-snapshot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.payroll-snapshot-row > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.payroll-snapshot-row span {
  color: #7f8da1;
  font-size: 11px;
}

@media (max-width: 950px) {
  .payroll-quarterly-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .payroll-quarterly-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .payroll-report-lines,
  .payroll-month-breakdown {
    grid-template-columns: 1fr;
  }
}


/* Payroll Level 2.4A v2 — Audit Trail & Approval Snapshots */
.payroll-hardening-panel {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.payroll-hardening-lock,
.payroll-hardening-draft {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.5;
}

.payroll-hardening-lock {
  border: 1px solid rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.08);
  color: #a7f3d0;
}

.payroll-hardening-draft {
  border: 1px solid rgba(59, 130, 246, 0.22);
  background: rgba(59, 130, 246, 0.07);
  color: #bfdbfe;
}

.payroll-audit-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 220px;
  overflow-y: auto;
}

.payroll-audit-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, 0.09);
  border-radius: 8px;
  background: #09111a;
}

.payroll-audit-row > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.payroll-audit-row strong {
  text-transform: capitalize;
}

.payroll-audit-row span {
  color: #7f8da1;
  font-size: 10px;
}
.ebay-connection-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(69, 167, 255, 0.10),
      transparent 22rem
    ),
    linear-gradient(180deg, #0d2137, #091827);
  color: #f8fafc;
}

.ebay-connection-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 15px;
  background: rgba(69, 167, 255, 0.13);
}

.ebay-connection-icon span {
  color: #45a7ff;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.ebay-connection-copy {
  min-width: 0;
}

.ebay-connection-copy > p {
  margin: 0;
  color: #45a7ff !important;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.ebay-connection-copy h2 {
  margin: 4px 0 6px;
  color: #ffffff !important;
  font-size: 20px;
}

.ebay-connection-copy > span {
  display: block;
  max-width: 780px;
  color: #a9bbcf !important;
  font-size: 13px;
  line-height: 1.55;
}

.ebay-security-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  color: #91a6bf;
  font-size: 12px;
}

.ebay-security-note svg {
  flex: 0 0 auto;
  color: #65c6ff;
}

.ebay-connection-actions {
  display: flex;
  min-width: 160px;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}

.ebay-connection-actions button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid #2c7dff;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #347fff, #225bd1);
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.ebay-connection-actions button:disabled {
  opacity: 0.65;
  cursor: wait;
}

.ebay-connected-badge {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(72, 217, 139, 0.3);
  border-radius: 999px;
  background: rgba(22, 125, 76, 0.16);
  color: #9af0bd;
  font-size: 12px;
  font-weight: 850;
}

.ebay-connection-actions small {
  color: #788ea8;
  font-size: 10px;
}

.ebay-connection-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #a9bbcf;
  font-size: 12px;
}

.ebay-connection-message,
.ebay-connection-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
}

.ebay-connection-message {
  border: 1px solid rgba(72, 217, 139, 0.24);
  background: rgba(22, 125, 76, 0.12);
  color: #a5f3c3;
}

.ebay-connection-error {
  border: 1px solid rgba(251, 113, 133, 0.30);
  background: rgba(127, 29, 29, 0.18);
  color: #fecdd3;
}

@media (max-width: 760px) {
  .ebay-connection-panel {
    grid-template-columns: 1fr;
  }

  .ebay-connection-actions {
    align-items: flex-start;
  }
}
.settings-page {
  display: grid;
  gap: 20px;
}

.settings-hero h1 {
  margin: 4px 0 8px;
}

.inventory-repair-panel {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.7);
}

.inventory-repair-header,
.repair-results-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.inventory-repair-header h2,
.repair-results-header h3 {
  margin: 4px 0 8px;
}

.inventory-repair-header p {
  margin-bottom: 0;
}

.repair-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.repair-summary-grid article {
  display: grid;
  gap: 8px;
  min-height: 120px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  background: rgba(30, 41, 59, 0.46);
}

.repair-summary-grid article svg {
  color: #60a5fa;
}

.repair-summary-grid span {
  color: #94a3b8;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.repair-summary-grid strong {
  color: #f8fafc;
  font-size: 1.65rem;
}

.repair-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.08);
  color: #fca5a5;
}

.repair-loading {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: #94a3b8;
}

.repair-progress-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(59, 130, 246, 0.24);
  border-radius: 14px;
  background: rgba(59, 130, 246, 0.07);
}

.repair-progress-copy {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.repair-progress-copy span,
.repair-progress-card small {
  color: #94a3b8;
}

.repair-progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
}

.repair-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #3b82f6;
  transition: width 0.2s ease;
}

.repair-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.repair-actions .primary-btn,
.inventory-repair-header .secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.repair-clean-message {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4ade80;
}

.repair-results {
  display: grid;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.repair-results-header > strong {
  color: #4ade80;
  font-size: 1.2rem;
}

.repair-result-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.repair-result-stats span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.65);
  color: #94a3b8;
}

.repair-result-list {
  display: grid;
  max-height: 420px;
  overflow-y: auto;
}

.repair-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 13px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.repair-result-row > div {
  display: grid;
  gap: 3px;
}

.repair-result-row span,
.repair-result-row small {
  color: #94a3b8;
}

.repair-result-repaired {
  border-left: 3px solid #22c55e;
}

.repair-result-failed {
  border-left: 3px solid #ef4444;
}

.repair-result-manual-review {
  border-left: 3px solid #f59e0b;
}

.repair-spin {
  animation: repair-spin 0.8s linear infinite;
}

@keyframes repair-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 820px) {
  .repair-summary-grid {
    grid-template-columns: 1fr;
  }

  .inventory-repair-header,
  .repair-results-header,
  .repair-progress-copy {
    flex-direction: column;
  }
}
/* ==========================================================
   OPTIC DATA · Live Pricing Workspace
   Dark Trading Cards theme
========================================================== */

.live-pricing-workspace {
  display: grid;
  gap: 18px;
  width: 100%;
  color: #f8fafc;
}

.live-pricing-header,
.live-pricing-market-summary,
.live-pricing-section,
.live-pricing-panel,
.live-pricing-loading,
.live-pricing-empty {
  border: 1px solid #244766;
  background:
    radial-gradient(circle at top right, rgba(79, 179, 255, 0.05), transparent 34%),
    #0b1d2f;
  border-radius: 18px;
  color: #f8fafc;
  box-shadow: none;
}

.live-pricing-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px;
}

.live-pricing-eyebrow,
.live-pricing-section-heading span,
.live-pricing-panel-heading span,
.live-pricing-market-value > span,
.live-pricing-range span,
.live-pricing-metric-label {
  color: #4fb3ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.live-pricing-header h2,
.live-pricing-section h3,
.live-pricing-panel h3 {
  margin: 5px 0 0;
  color: #f8fafc;
}

.live-pricing-header p,
.live-pricing-muted,
.live-pricing-metric-helper,
.live-pricing-provider span,
.live-pricing-sale-details span {
  color: #8fa8c2;
}

.live-pricing-header p {
  max-width: 760px;
  margin: 10px 0 0;
  line-height: 1.55;
}

.live-pricing-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  border: 1px solid #2f5f86;
  border-radius: 12px;
  padding: 10px 14px;
  background: #102b46;
  color: #f8fafc;
  font-weight: 800;
  cursor: pointer;
}

.live-pricing-refresh:hover {
  background: #163858;
  border-color: #4fb3ff;
}

.live-pricing-refresh:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Market summary */

.live-pricing-market-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
  overflow: hidden;
}

.live-pricing-market-value {
  padding: 22px;
  border-right: 1px solid #244766;
}

.live-pricing-market-value > strong {
  display: block;
  margin-top: 8px;
  color: #f8fafc;
  font-size: 30px;
  line-height: 1;
}

.live-pricing-range {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.live-pricing-range > div {
  padding: 22px;
  border-right: 1px solid #244766;
}

.live-pricing-range > div:last-child {
  border-right: 0;
}

.live-pricing-range strong {
  display: block;
  margin-top: 8px;
  color: #f8fafc;
  font-size: 22px;
}

.live-pricing-confidence {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}

.live-pricing-confidence > span,
.live-pricing-confidence > strong {
  color: #cbd5e1;
  font-size: 12px;
}

.live-pricing-confidence-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #193550;
}

.live-pricing-confidence-fill {
  height: 100%;
  border-radius: inherit;
  background: #4fb3ff;
}

/* Store section + metrics */

.live-pricing-section {
  padding: 18px;
}

.live-pricing-section-heading {
  margin-bottom: 14px;
}

.live-pricing-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.live-pricing-metric {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
  padding: 15px;
  border: 1px solid #244766;
  border-radius: 14px;
  background: #0f263d;
  color: #f8fafc;
}

.live-pricing-metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #102b46;
  color: #cbd5e1;
}

.live-pricing-metric-primary .live-pricing-metric-icon {
  background: rgba(79, 179, 255, 0.14);
  color: #4fb3ff;
}

.live-pricing-metric-success .live-pricing-metric-icon {
  background: rgba(66, 226, 164, 0.14);
  color: #42e2a4;
}

.live-pricing-metric-value {
  display: block;
  margin-top: 4px;
  color: #f8fafc;
  font-size: 19px;
  line-height: 1.2;
}

.live-pricing-metric-helper {
  display: block;
  margin-top: 6px;
  line-height: 1.35;
}

/* Provider / comparable panels */

.live-pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.live-pricing-panel {
  min-width: 0;
  padding: 18px;
}

.live-pricing-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.live-pricing-panel-heading > strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid #244766;
  border-radius: 999px;
  background: #102b46;
  color: #f8fafc;
}

.live-pricing-provider-list,
.live-pricing-sales-list {
  display: grid;
  gap: 10px;
}

.live-pricing-provider,
.live-pricing-sale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 13px;
  border: 1px solid #244766;
  border-radius: 12px;
  background: #0f263d;
  color: #f8fafc;
}

.live-pricing-provider-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.live-pricing-provider-status > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.live-pricing-provider-status strong,
.live-pricing-provider-value,
.live-pricing-sale-details strong,
.live-pricing-sale-price strong {
  color: #f8fafc;
}

.live-pricing-provider-success {
  color: #42e2a4;
}

.live-pricing-provider-warning {
  color: #fbbf24;
}

.live-pricing-sale {
  justify-content: flex-start;
}

.live-pricing-sale-image {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 54px;
  overflow: hidden;
  border: 1px solid #244766;
  border-radius: 8px;
  background: #102b46;
  color: #8fa8c2;
}

.live-pricing-sale-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.live-pricing-sale-details {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.live-pricing-sale-details strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-pricing-sale-price {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.live-pricing-sale-price a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4fb3ff;
}

/* Loading / empty */

.live-pricing-loading,
.live-pricing-empty {
  padding: 18px;
}

.live-pricing-empty {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.live-pricing-empty strong {
  color: #f8fafc;
}

.live-pricing-empty p {
  margin: 5px 0 0;
  color: #8fa8c2;
}

/* Defensive overrides for legacy light rules */

.live-pricing-workspace :where(
  section,
  article,
  div
)[style*="background: white"],
.live-pricing-workspace :where(
  section,
  article,
  div
)[style*="background:#fff"],
.live-pricing-workspace :where(
  section,
  article,
  div
)[style*="background: #fff"],
.live-pricing-workspace :where(
  section,
  article,
  div
)[style*="background:#ffffff"],
.live-pricing-workspace :where(
  section,
  article,
  div
)[style*="background: #ffffff"] {
  background: #0f263d !important;
  color: #f8fafc !important;
}

/* Responsive */

@media (max-width: 1150px) {
  .live-pricing-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .live-pricing-market-summary,
  .live-pricing-grid {
    grid-template-columns: 1fr;
  }

  .live-pricing-market-value {
    border-right: 0;
    border-bottom: 1px solid #244766;
  }
}

@media (max-width: 680px) {
  .live-pricing-header {
    flex-direction: column;
  }

  .live-pricing-refresh {
    width: 100%;
  }

  .live-pricing-range,
  .live-pricing-metrics {
    grid-template-columns: 1fr;
  }

  .live-pricing-range > div {
    border-right: 0;
    border-bottom: 1px solid #244766;
  }

  .live-pricing-range > div:last-child {
    border-bottom: 0;
  }

  .live-pricing-provider,
  .live-pricing-sale {
    align-items: flex-start;
  }
}
/* ==========================================================
   OPTIC DATA · Card Command Center
========================================================== */

.cc-workspace {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cc-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #dbe5f0;
  border-radius: 15px;
  background:
    radial-gradient(
      circle at top right,
      rgba(37, 99, 235, 0.12),
      transparent 38%
    ),
    #ffffff;
}

.cc-hero-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 14px;
  background: #eaf2ff;
  color: #2563eb;
}

.cc-hero-copy {
  min-width: 0;
}

.cc-hero-copy p {
  margin: 0 0 4px;
  color: #2563eb;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cc-hero-copy h2 {
  margin: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 20px;
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-hero-copy span {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #64748b;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-hero-status {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 7px;
}

.cc-hero-status > strong {
  color: #475569;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  font-size: 9px;
}

.cc-status {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cc-status-available {
  background: #dcfce7;
  color: #166534;
}

.cc-status-sold {
  background: #fee2e2;
  color: #991b1b;
}

.cc-status-held,
.cc-status-grading,
.cc-status-consignment {
  background: #fef3c7;
  color: #92400e;
}

.cc-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.cc-metric-card {
  display: flex;
  min-width: 0;
  min-height: 76px;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid #dfe6ef;
  border-radius: 13px;
  background: #ffffff;
}

.cc-metric-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 10px;
  background: #eaf2ff;
  color: #2563eb;
}

.cc-metric-card > div:last-child {
  min-width: 0;
}

.cc-metric-card span {
  display: block;
  margin-bottom: 3px;
  color: #64748b;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cc-metric-card strong {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-metric-card small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #94a3b8;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-metric-card.is-positive strong {
  color: #16a34a;
}

.cc-primary-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.55fr)
    minmax(270px, 0.75fr);
  gap: 12px;
}

.cc-image-column,
.cc-actions-column {
  min-width: 0;
  padding: 13px;
  border: 1px solid #dfe6ef;
  border-radius: 14px;
  background: #ffffff;
}

.cc-section-heading {
  display: flex;
  min-height: 38px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.cc-section-heading span {
  display: block;
  margin-bottom: 3px;
  color: #2563eb;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.cc-section-heading h3 {
  margin: 0;
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
}

.cc-section-heading button,
.cc-intelligence-panel > header > button {
  min-height: 29px;
  padding: 5px 9px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f0f7ff;
  color: #1d4ed8;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.cc-section-heading button:hover,
.cc-intelligence-panel > header > button:hover {
  border-color: #93c5fd;
  background: #eaf2ff;
}

.cc-image-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.cc-image-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dfe6ef;
  border-radius: 12px;
  background: #f8fafc;
}

.cc-image-panel > header {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid #e7edf5;
  color: #2563eb;
}

.cc-image-panel > header span {
  display: block;
  margin-bottom: 2px;
  color: #64748b;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cc-image-panel > header strong {
  display: block;
  color: #0f172a;
  font-size: 9px;
}

.cc-image-frame {
  display: grid;
  width: 100%;
  height: 310px;
  padding: 0;
  place-items: center;
  overflow: hidden;
  border: none;
  background: #eef2f7;
  cursor: zoom-in;
}

.cc-image-frame:disabled {
  cursor: default;
}

.cc-image-frame img {
  display: block;
  width: 100%;
  height: 310px;
  object-fit: contain;
  background: #eef2f7;
}

.cc-image-empty {
  display: grid;
  max-width: 180px;
  place-items: center;
  gap: 7px;
  padding: 24px;
  color: #94a3b8;
  text-align: center;
}

.cc-image-empty strong {
  color: #475569;
  font-size: 10px;
}

.cc-image-empty span {
  font-size: 8px;
  line-height: 1.45;
}

.cc-action-stack {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cc-action-button {
  display: grid;
  width: 100%;
  min-height: 54px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #dfe6ef;
  border-radius: 10px;
  background: #ffffff;
  color: #64748b;
  text-align: left;
  cursor: pointer;
}

.cc-action-button:hover:not(:disabled) {
  border-color: #93b4f8;
  background: #f4f8ff;
  color: #2563eb;
}

.cc-action-button.is-accent {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.cc-action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cc-action-icon {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 9px;
  background: #eaf2ff;
  color: #2563eb;
}

.cc-action-copy {
  min-width: 0;
}

.cc-action-copy strong {
  display: block;
  color: #0f172a;
  font-size: 9px;
  font-weight: 850;
}

.cc-action-copy small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #64748b;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-intelligence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cc-intelligence-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dfe6ef;
  border-radius: 13px;
  background: #ffffff;
}

.cc-intelligence-panel > header {
  display: grid;
  min-height: 58px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-bottom: 1px solid #edf1f6;
  background: #f8fafc;
}

.cc-panel-icon {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 9px;
  background: #eaf2ff;
  color: #2563eb;
}

.cc-intelligence-panel > header span {
  display: block;
  margin-bottom: 2px;
  color: #64748b;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cc-intelligence-panel > header h3 {
  margin: 0;
  color: #0f172a;
  font-size: 10px;
  font-weight: 850;
}

.cc-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px 12px 7px;
}

.cc-fact-grid > div {
  display: flex;
  min-width: 0;
  min-height: 39px;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 6px 0;
  border-bottom: 1px solid #edf1f6;
}

.cc-fact-grid > div:nth-last-child(-n + 2) {
  border-bottom: none;
}

.cc-fact-grid > div:nth-child(odd) {
  padding-right: 10px;
}

.cc-fact-grid > div:nth-child(even) {
  padding-left: 10px;
  border-left: 1px solid #edf1f6;
}

.cc-fact-grid span {
  color: #64748b;
  font-size: 8px;
}

.cc-fact-grid strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 9px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-fact-grid strong.is-money {
  color: #16a34a;
}

.cc-history-links {
  display: flex;
  flex-direction: column;
  padding: 6px 11px 8px;
}

.cc-history-links > button {
  display: grid;
  min-height: 48px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border: none;
  border-bottom: 1px solid #edf1f6;
  background: transparent;
  color: #2563eb;
  text-align: left;
  cursor: pointer;
}

.cc-history-links > button:last-child {
  border-bottom: none;
}

.cc-history-links > button:hover strong {
  color: #2563eb;
}

.cc-history-links strong {
  display: block;
  color: #0f172a;
  font-size: 9px;
}

.cc-history-links small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 8px;
}

.cc-notes {
  min-height: 112px;
  padding: 13px;
}

.cc-notes p {
  margin: 0;
  color: #475569;
  font-size: 9px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.cc-label-summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-top: 1px solid #edf1f6;
  background: #f8fafc;
}

.cc-label-summary > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  color: #2563eb;
}

.cc-label-summary strong {
  display: block;
  color: #0f172a;
  font-size: 9px;
}

.cc-label-summary small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  font-size: 7px;
}

.cc-label-summary button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
  color: #1d4ed8;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.cc-label-summary button:hover {
  background: #eaf2ff;
}

@media (max-width: 1180px) {
  .cc-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc-primary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .cc-intelligence-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .cc-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cc-hero-status {
    grid-column: 1 / -1;
    align-items: flex-start;
  }

  .cc-metrics,
  .cc-image-grid {
    grid-template-columns: 1fr;
  }

  .cc-image-frame,
  .cc-image-frame img {
    height: 360px;
  }

  .cc-fact-grid {
    grid-template-columns: 1fr;
  }

  .cc-fact-grid > div:nth-child(odd),
  .cc-fact-grid > div:nth-child(even) {
    padding-right: 0;
    padding-left: 0;
    border-left: none;
  }

  .cc-fact-grid > div:nth-last-child(2) {
    border-bottom: 1px solid #edf1f6;
  }
}/* ==========================================================
   OPTIC DATA · Marketplace Listing Workspace
   Large-Type Executive Marketplace Layout
========================================================== */

.mp-workspace {
  --mp-navy: #071426;
  --mp-blue: #1463ff;
  --mp-blue-dark: #0d4fd8;
  --mp-blue-soft: #eef5ff;
  --mp-green: #159447;
  --mp-green-soft: #e9f8ef;
  --mp-purple: #7c3aed;
  --mp-purple-soft: #f4edff;
  --mp-orange: #f26a21;
  --mp-orange-soft: #fff1e8;
  --mp-text: #0b1220;
  --mp-text-soft: #334155;
  --mp-muted: #526176;
  --mp-border: #d8e2ef;
  --mp-border-strong: #c3d1e2;
  --mp-surface: #ffffff;
  --mp-surface-soft: #f7f9fc;
  --mp-shadow:
    0 10px 30px rgba(15, 23, 42, 0.07);

  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  min-width: 0;
  color: var(--mp-text);
  font-size: 16px;
  line-height: 1.5;
}

.mp-workspace *,
.mp-workspace *::before,
.mp-workspace *::after {
  box-sizing: border-box;
}

.mp-hero,
.mp-optic-generator,
.mp-summary-grid > article,
.mp-panel,
.mp-preview-card,
.mp-readiness-card,
.mp-footer-actions {
  border: 1px solid var(--mp-border);
  background: var(--mp-surface);
  box-shadow: var(--mp-shadow);
}

.mp-hero,
.mp-optic-generator,
.mp-panel,
.mp-preview-card,
.mp-readiness-card,
.mp-footer-actions {
  border-radius: 18px;
}

.mp-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background:
    radial-gradient(
      circle at top right,
      rgba(20, 99, 255, 0.13),
      transparent 38%
    ),
    #ffffff;
}

.mp-hero-icon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 16px;
  background: var(--mp-blue-soft);
  color: var(--mp-blue);
}

.mp-hero-copy {
  min-width: 0;
}

.mp-hero-copy p,
.mp-optic-generator > div:first-child > p {
  margin: 0 0 6px;
  color: var(--mp-blue);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.mp-hero-copy h2 {
  margin: 0;
  color: var(--mp-text);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.mp-hero-copy span {
  display: block;
  margin-top: 9px;
  color: var(--mp-text-soft);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.mp-listing-state {
  display: flex;
  min-width: 150px;
  align-items: flex-end;
  flex-direction: column;
  gap: 5px;
  text-align: right;
}

.mp-listing-state span {
  color: var(--mp-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mp-listing-state strong {
  color: #c56a00;
  font-size: 22px;
  font-weight: 900;
}

.mp-listing-state strong.is-ready {
  color: var(--mp-green);
}

.mp-listing-state small {
  color: var(--mp-muted);
  font-size: 13px;
  font-weight: 700;
}

.mp-message {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid #a9e6bf;
  border-radius: 13px;
  background: var(--mp-green-soft);
  color: #126a35;
  font-size: 15px;
  font-weight: 800;
}

.mp-optic-generator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 24px;
  border-color: #b8d2ff;
  background:
    linear-gradient(
      112deg,
      #f7fbff 0%,
      #e7f1ff 100%
    );
}

.mp-optic-generator > div:first-child {
  min-width: 0;
}

.mp-optic-generator h3 {
  margin: 0;
  color: var(--mp-text);
  font-size: 25px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.mp-optic-generator span {
  display: block;
  max-width: 850px;
  margin-top: 8px;
  color: var(--mp-text-soft);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
}

.mp-optic-generator-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
}

.mp-optic-copy,
.mp-optic-generate,
.mp-copy-button,
.mp-text-button,
.mp-manage-images,
.mp-reset-button,
.mp-save-button,
.mp-prepare-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 11px 17px;
  border-radius: 11px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.mp-copy-button,
.mp-text-button {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 13px;
}

.mp-optic-copy,
.mp-copy-button,
.mp-text-button,
.mp-manage-images,
.mp-reset-button,
.mp-save-button {
  border: 1px solid var(--mp-border-strong);
  background: #ffffff;
  color: #1e293b;
}

.mp-optic-generate,
.mp-prepare-button {
  border: 1px solid var(--mp-blue);
  background: var(--mp-blue);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(20, 99, 255, 0.22);
}

.mp-optic-copy:hover:not(:disabled),
.mp-copy-button:hover:not(:disabled),
.mp-text-button:hover:not(:disabled),
.mp-manage-images:hover:not(:disabled),
.mp-reset-button:hover:not(:disabled),
.mp-save-button:hover:not(:disabled) {
  border-color: #86afff;
  background: var(--mp-blue-soft);
  color: var(--mp-blue-dark);
  transform: translateY(-1px);
}

.mp-optic-generate:hover:not(:disabled),
.mp-prepare-button:hover:not(:disabled) {
  background: var(--mp-blue-dark);
  transform: translateY(-1px);
}

.mp-optic-copy:disabled,
.mp-optic-generate:disabled,
.mp-copy-button:disabled,
.mp-text-button:disabled,
.mp-manage-images:disabled,
.mp-reset-button:disabled,
.mp-save-button:disabled,
.mp-prepare-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.mp-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.mp-summary-grid > article {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 100px;
  padding: 17px 18px;
  border-radius: 16px;
}

.mp-summary-grid > article > svg {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  padding: 11px;
  border-radius: 13px;
  background: var(--mp-blue-soft);
  color: var(--mp-blue);
}

.mp-summary-grid > article:nth-child(2) > svg {
  background: var(--mp-green-soft);
  color: var(--mp-green);
}

.mp-summary-grid > article:nth-child(3) > svg {
  background: var(--mp-purple-soft);
  color: var(--mp-purple);
}

.mp-summary-grid > article:nth-child(4) > svg {
  background: var(--mp-orange-soft);
  color: var(--mp-orange);
}

.mp-summary-grid > article div {
  min-width: 0;
}

.mp-summary-grid span {
  display: block;
  margin-bottom: 5px;
  color: var(--mp-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.mp-summary-grid strong {
  display: block;
  overflow: hidden;
  color: var(--mp-text);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-main-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.52fr)
    minmax(390px, 0.82fr);
  gap: 18px;
  align-items: start;
}

.mp-editor-column,
.mp-preview-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
}

.mp-preview-column {
  position: sticky;
  top: 18px;
}

.mp-panel,
.mp-preview-card,
.mp-readiness-card {
  min-width: 0;
  overflow: hidden;
}

.mp-panel > header,
.mp-preview-card > header,
.mp-readiness-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 68px;
  padding: 15px 18px;
  border-bottom: 1px solid #e4ebf4;
  background: var(--mp-surface-soft);
}

.mp-panel > header span,
.mp-preview-card > header span,
.mp-readiness-card > header span {
  display: block;
  margin-bottom: 4px;
  color: var(--mp-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.mp-panel > header h3,
.mp-preview-card > header h3,
.mp-readiness-card > header h3 {
  margin: 0;
  color: var(--mp-text);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.2;
}

.mp-form-grid,
.mp-optic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
}

.mp-form-wide,
.mp-optic-wide {
  grid-column: 1 / -1;
}

.mp-form-grid label,
.mp-optic-grid label,
.mp-specifics-grid label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.mp-form-grid label > span,
.mp-optic-grid label > span,
.mp-specifics-grid label > span {
  color: #243247;
  font-size: 14px;
  font-weight: 850;
}

.mp-form-grid input,
.mp-form-grid select,
.mp-optic-grid input,
.mp-optic-grid textarea,
.mp-specifics-grid input,
.mp-title-editor input,
.mp-description-editor textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--mp-border-strong);
  border-radius: 11px;
  outline: none;
  background: #ffffff;
  color: var(--mp-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.mp-form-grid input,
.mp-form-grid select,
.mp-optic-grid input,
.mp-specifics-grid input,
.mp-title-editor input {
  min-height: 52px;
  padding: 11px 13px;
}

.mp-optic-grid textarea,
.mp-description-editor textarea {
  min-height: 145px;
  padding: 14px;
  resize: vertical;
  line-height: 1.62;
}

.mp-form-grid input:focus,
.mp-form-grid select:focus,
.mp-optic-grid input:focus,
.mp-optic-grid textarea:focus,
.mp-specifics-grid input:focus,
.mp-title-editor input:focus,
.mp-description-editor textarea:focus {
  border-color: #6fa2ff;
  box-shadow: 0 0 0 4px rgba(20, 99, 255, 0.11);
}

.mp-money-input {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--mp-border-strong);
  border-radius: 11px;
  background: #ffffff;
}

.mp-money-input > span {
  display: grid;
  min-width: 46px;
  height: 50px;
  place-items: center;
  border-right: 1px solid #dce5f0;
  background: var(--mp-surface-soft);
  color: var(--mp-text-soft);
  font-size: 17px;
  font-weight: 900;
}

.mp-money-input input {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.mp-title-editor,
.mp-description-editor {
  padding: 18px;
}

.mp-title-editor > div,
.mp-description-editor > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.mp-title-editor > div > span,
.mp-description-editor > div > span {
  color: var(--mp-muted);
  font-size: 13px;
  font-weight: 700;
}

.mp-title-editor > div > button,
.mp-description-editor > div > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--mp-blue);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.mp-optic-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mp-optic-grid textarea {
  min-height: 132px;
}

.mp-specifics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.mp-optic-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 24px;
  border: 1px dashed #aebdd0;
  border-radius: 12px;
  background: var(--mp-surface-soft);
  color: var(--mp-muted);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.mp-generation-notes {
  margin: 0 18px 18px;
  padding: 16px;
  border: 1px solid #bcd4ff;
  border-radius: 12px;
  background: var(--mp-blue-soft);
}

.mp-generation-notes span {
  display: block;
  margin-bottom: 7px;
  color: var(--mp-blue);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mp-generation-notes p {
  margin: 0;
  color: var(--mp-text-soft);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

.mp-preview-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 16px 0;
}

.mp-preview-images > div {
  display: grid;
  height: 320px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--mp-border);
  border-radius: 13px;
  background: #eef2f7;
  color: var(--mp-muted);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.mp-preview-images img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: contain;
  background: #f8fafc;
}

.mp-preview-content {
  padding: 18px;
}

.mp-preview-marketplace {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--mp-blue-soft);
  color: var(--mp-blue-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.mp-preview-content h4 {
  margin: 13px 0 8px;
  color: var(--mp-text);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.3;
}

.mp-preview-price {
  display: block;
  color: var(--mp-green);
  font-size: 34px;
  font-weight: 950;
  line-height: 1.1;
}

.mp-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.mp-preview-meta span {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #edf2f7;
  color: var(--mp-text-soft);
  font-size: 13px;
  font-weight: 800;
}

.mp-preview-shipping {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  padding: 13px;
  border-radius: 11px;
  background: var(--mp-surface-soft);
  color: var(--mp-text-soft);
  font-size: 14px;
  font-weight: 750;
}

.mp-preview-content > p {
  max-height: 300px;
  margin: 15px 0 0;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--mp-text-soft);
  font-size: 15px;
  font-weight: 550;
  line-height: 1.62;
}

.mp-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
  padding: 10px 18px 16px;
}

.mp-checklist > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  border-bottom: 1px solid #e6edf5;
  color: #718096;
  font-size: 14px;
  font-weight: 800;
}

.mp-checklist > div.is-complete {
  color: var(--mp-green);
}

.mp-checklist > div svg {
  flex-shrink: 0;
}

.mp-manage-images {
  width: calc(100% - 36px);
  margin: 0 18px 18px;
}

.mp-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 18px;
}

.mp-footer-actions > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mp-save-button,
.mp-prepare-button {
  min-width: 150px;
  min-height: 52px;
  font-size: 15px;
}

.spin {
  animation: mp-spin 0.9s linear infinite;
}

@keyframes mp-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1320px) {
  .mp-main-grid {
    grid-template-columns:
      minmax(0, 1.35fr)
      minmax(350px, 0.8fr);
  }

  .mp-specifics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .mp-main-grid {
    grid-template-columns: 1fr;
  }

  .mp-preview-column {
    position: static;
  }

  .mp-preview-images > div,
  .mp-preview-images img {
    height: 380px;
  }
}

@media (max-width: 760px) {
  .mp-workspace {
    gap: 15px;
    font-size: 15px;
  }

  .mp-hero {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 18px;
  }

  .mp-listing-state {
    grid-column: 1 / -1;
    align-items: flex-start;
    text-align: left;
  }

  .mp-optic-generator {
    align-items: stretch;
    flex-direction: column;
    padding: 18px;
  }

  .mp-optic-generator-actions {
    width: 100%;
  }

  .mp-optic-generator-actions button {
    flex: 1;
  }

  .mp-summary-grid,
  .mp-form-grid,
  .mp-optic-grid,
  .mp-specifics-grid,
  .mp-checklist {
    grid-template-columns: 1fr;
  }

  .mp-form-wide,
  .mp-optic-wide {
    grid-column: auto;
  }

  .mp-preview-images > div,
  .mp-preview-images img {
    height: 300px;
  }

  .mp-footer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .mp-footer-actions > div {
    width: 100%;
  }

  .mp-footer-actions button {
    flex: 1;
  }
}

@media (max-width: 520px) {
  .mp-hero {
    grid-template-columns: 1fr;
  }

  .mp-hero-icon {
    width: 48px;
    height: 48px;
  }

  .mp-hero-copy h2 {
    font-size: 29px;
  }

  .mp-optic-generator-actions,
  .mp-footer-actions > div {
    flex-direction: column;
  }

  .mp-optic-generator-actions button,
  .mp-footer-actions button {
    width: 100%;
  }

  .mp-preview-images {
    grid-template-columns: 1fr;
  }

  .mp-preview-images > div,
  .mp-preview-images img {
    height: 360px;
  }
}


/* ==========================================================
   Professional Marketplace Intelligence Dashboard
========================================================== */

.mp-intelligence-panel > header,
.mp-specifics-panel > header {
  background:
    linear-gradient(
      90deg,
      #f8fafc,
      #f2f7ff
    );
}

.mp-intelligence-dashboard {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
}

.mp-intelligence-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--mp-border);
  border-radius: 15px;
  background: #ffffff;
  box-shadow:
    0 5px 16px rgba(15, 23, 42, 0.045);
}

.mp-highlights-card,
.mp-seo-card {
  grid-column: 1 / -1;
}

.mp-intelligence-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid #e7edf5;
}

.mp-intelligence-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border-radius: 12px;
  background: var(--mp-blue-soft);
  color: var(--mp-blue);
}

.mp-intelligence-icon.is-green {
  background: var(--mp-green-soft);
  color: var(--mp-green);
}

.mp-intelligence-icon.is-purple {
  background: var(--mp-purple-soft);
  color: var(--mp-purple);
}

.mp-intelligence-icon.is-orange {
  background: var(--mp-orange-soft);
  color: var(--mp-orange);
}

.mp-intelligence-heading > div {
  min-width: 0;
}

.mp-intelligence-heading > div > span {
  display: block;
  margin-bottom: 3px;
  color: var(--mp-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.mp-intelligence-heading h4 {
  margin: 0;
  color: var(--mp-text);
  font-size: 18px;
  font-weight: 900;
}

.mp-highlight-list {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.mp-highlight-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  color: var(--mp-text-soft);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.5;
}

.mp-highlight-list li svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--mp-green);
}

.mp-price-dashboard {
  display: grid;
  gap: 10px;
  margin-top: 15px;
}

.mp-price-dashboard > div {
  display: grid;
  grid-template-columns:
    minmax(110px, 1fr)
    auto;
  gap: 3px 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e2e9f2;
  border-radius: 11px;
  background: var(--mp-surface-soft);
}

.mp-price-dashboard span {
  color: var(--mp-muted);
  font-size: 13px;
  font-weight: 850;
}

.mp-price-dashboard strong {
  color: var(--mp-green);
  font-size: 22px;
  font-weight: 950;
  text-align: right;
}

.mp-price-dashboard small {
  grid-column: 1 / -1;
  color: #728096;
  font-size: 12px;
  font-weight: 650;
}

.mp-guidance-block {
  margin-top: 15px;
  padding: 14px;
  border-radius: 11px;
  background: var(--mp-surface-soft);
}

.mp-guidance-block + .mp-guidance-block {
  margin-top: 10px;
}

.mp-guidance-block span {
  display: block;
  margin-bottom: 6px;
  color: var(--mp-purple);
  font-size: 13px;
  font-weight: 900;
}

.mp-guidance-block p {
  margin: 0;
  color: var(--mp-text-soft);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

.mp-category-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.mp-category-breadcrumb span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 7px 11px;
  border: 1px solid #c8d9f4;
  border-radius: 999px;
  background: var(--mp-blue-soft);
  color: var(--mp-blue-dark);
  font-size: 13px;
  font-weight: 850;
}

.mp-category-breadcrumb span:not(:last-child)::after {
  content: "›";
  margin-left: 10px;
  color: #7d94b2;
}

.mp-keyword-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.mp-keyword-cloud span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid #d5dfeb;
  border-radius: 999px;
  background: #f4f7fb;
  color: #26354a;
  font-size: 13px;
  font-weight: 800;
}

.mp-dashboard-empty {
  margin: 16px 0 0;
  color: var(--mp-muted);
  font-size: 14px;
  font-weight: 650;
}

.mp-specifics-table {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  padding: 8px 18px 18px;
}

.mp-specifics-row {
  display: grid;
  grid-template-columns:
    minmax(110px, 0.8fr)
    minmax(0, 1.2fr);
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 10px 12px;
  border-bottom: 1px solid #e5ebf3;
}

.mp-specifics-row:nth-child(odd) {
  border-right: 1px solid #e5ebf3;
}

.mp-specifics-row span {
  color: var(--mp-muted);
  font-size: 13px;
  font-weight: 850;
}

.mp-specifics-row strong {
  min-width: 0;
  color: var(--mp-text);
  font-size: 15px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.mp-specifics-row input {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--mp-border-strong);
  border-radius: 9px;
  color: var(--mp-text);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
}

.mp-insight-notes span {
  display: flex;
  align-items: center;
  gap: 7px;
}

@media (max-width: 940px) {
  .mp-intelligence-dashboard,
  .mp-specifics-table {
    grid-template-columns: 1fr;
  }

  .mp-highlights-card,
  .mp-seo-card {
    grid-column: auto;
  }

  .mp-highlight-list {
    grid-template-columns: 1fr;
  }

  .mp-specifics-row:nth-child(odd) {
    border-right: none;
  }
}

@media (max-width: 620px) {
  .mp-intelligence-dashboard {
    padding: 12px;
  }

  .mp-intelligence-card {
    padding: 14px;
  }

  .mp-specifics-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}


/* ==========================================================
   eBay Export Package
========================================================== */

.mp-ebay-export-panel {
  display: grid;
  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(210px, 0.65fr)
    auto;
  align-items: center;
  gap: 22px;
  padding: 20px 22px;
  border: 1px solid #b8d2ff;
  border-radius: 18px;
  background:
    radial-gradient(
      circle at top right,
      rgba(20, 99, 255, 0.13),
      transparent 36%
    ),
    #f7fbff;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.06);
}

.mp-ebay-export-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.mp-ebay-export-icon {
  display: grid;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  place-items: center;
  border-radius: 14px;
  background: var(--mp-blue);
  color: #ffffff;
  box-shadow:
    0 8px 18px rgba(20, 99, 255, 0.22);
}

.mp-ebay-export-copy p {
  margin: 0 0 4px;
  color: var(--mp-blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.mp-ebay-export-copy h3 {
  margin: 0;
  color: var(--mp-text);
  font-size: 21px;
  font-weight: 900;
}

.mp-ebay-export-copy div > span {
  display: block;
  margin-top: 5px;
  color: var(--mp-text-soft);
  font-size: 14px;
  font-weight: 600;
}

.mp-ebay-readiness-meter > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mp-ebay-readiness-meter span {
  color: var(--mp-muted);
  font-size: 13px;
  font-weight: 850;
}

.mp-ebay-readiness-meter strong {
  color: var(--mp-green);
  font-size: 22px;
  font-weight: 950;
}

.mp-ebay-readiness-track {
  height: 10px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce6f3;
}

.mp-ebay-readiness-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #22c55e,
      #15803d
    );
  transition: width 0.25s ease;
}

.mp-ebay-export-actions {
  display: grid;
  gap: 8px;
  min-width: 215px;
}

.mp-download-package-button,
.mp-ebay-publish-locked {
  display: inline-flex;
  min-height: 47px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 11px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 850;
}

.mp-download-package-button {
  border: 1px solid var(--mp-blue);
  background: var(--mp-blue);
  color: #ffffff;
  cursor: pointer;
  box-shadow:
    0 7px 16px rgba(20, 99, 255, 0.2);
}

.mp-download-package-button:hover:not(:disabled) {
  background: var(--mp-blue-dark);
}

.mp-download-package-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mp-ebay-publish-locked {
  border: 1px solid #d4dde8;
  background: #edf1f6;
  color: #718096;
  cursor: not-allowed;
}

.mp-ebay-export-actions small {
  color: #7a8798;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 1120px) {
  .mp-ebay-export-panel {
    grid-template-columns: 1fr 1fr;
  }

  .mp-ebay-export-copy {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .mp-ebay-export-panel {
    grid-template-columns: 1fr;
  }

  .mp-ebay-export-copy {
    grid-column: auto;
    align-items: flex-start;
  }

  .mp-ebay-export-actions {
    width: 100%;
  }
}  /* ==========================================================
   OPTIC DATA · Intelligence Platform Trading Cards Workspace
   Polished Workspace Layout
========================================================== */

.tc-clean-shell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.tc-clean-browser {
  position: sticky;
  top: 18px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dfe6ef;
  border-radius: 18px;
  background: #f8fafc;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.tc-clean-browser .tc-card-list {
  height: calc(100vh - 190px);
  padding: 12px;
  gap: 9px;
}

.tc-clean-browser .tc-card-list-item {
  gap: 11px;
  padding: 10px;
  border-radius: 13px;
  box-shadow: none;
}

.tc-clean-browser .tc-card-list-item:hover {
  transform: none;
  border-color: #93b4f8;
  background: #f4f8ff;
  box-shadow: none;
}

.tc-clean-browser .tc-card-list-item.selected {
  border-color: #2563eb;
  background: #eaf2ff;
  box-shadow: inset 3px 0 0 #2563eb;
}

.tc-clean-browser .tc-card-thumb {
  width: 60px;
  height: 84px;
  border-radius: 9px;
}

.tc-clean-browser .tc-card-name,
.tc-clean-browser .tc-card-list-item strong {
  margin: 0 0 3px;
  color: #111827;
  font-size: 14px;
  line-height: 1.2;
}

.tc-clean-browser .tc-card-subtitle,
.tc-clean-browser .tc-card-list-item span,
.tc-clean-browser .tc-card-list-item small {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.25;
}

.tc-clean-browser .tc-card-id {
  margin-top: 4px;
  font-size: 10px;
}

.tc-clean-browser .tc-card-footer {
  margin-top: 6px;
}

.tc-clean-browser .tc-card-price {
  font-size: 14px;
}

.tc-clean-inspector {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dfe6ef;
  border-radius: 20px;
  background: #ffffff !important;
  color: #0f172a;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07);
}

.tc-clean-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 104px;
  padding: 18px 22px;
  border-bottom: 1px solid #e7edf5;
  background:
    radial-gradient(
      circle at top right,
      rgba(37, 99, 235, 0.1),
      transparent 38%
    ),
    #ffffff !important;
  color: #0f172a !important;
}

.tc-clean-title-block {
  min-width: 0;
}

.tc-clean-code {
  margin: 0 0 5px;
  color: #2563eb !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tc-clean-title-block h2 {
  margin: 0;
  color: #111827 !important;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.tc-clean-subtitle {
  margin: 6px 0 0;
  color: #64748b !important;
  font-size: 13px;
}

.tc-clean-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.tc-clean-summary strong {
  color: #16a34a;
  font-size: 23px;
  font-weight: 850;
  line-height: 1;
}

.tc-clean-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tc-clean-status-available {
  background: #dcfce7;
  color: #166534;
}

.tc-clean-status-sold {
  background: #fee2e2;
  color: #991b1b;
}

.tc-clean-status-held,
.tc-clean-status-grading,
.tc-clean-status-consignment {
  background: #fef3c7;
  color: #92400e;
}

.tc-clean-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid #e7edf5;
  background: #f8fafc;
}

.tc-clean-toolbar-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tc-clean-toolbar .cf-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 11px;
}

.tc-clean-sold-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid #fecaca;
  border-radius: 9px;
  background: #fff5f5;
  color: #b91c1c;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.tc-clean-sold-btn:hover:not(:disabled) {
  border-color: #ef4444;
  background: #fee2e2;
}

.tc-clean-sold-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.tc-clean-toolbar .cf-tabs {
  display: flex;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 4px;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #dfe6ef;
  border-radius: 10px;
  background: #eef2f7;
  scrollbar-width: thin;
}

.tc-clean-toolbar .cf-tabs button {
  flex: 0 0 auto;
  min-width: max-content;
  min-height: 32px;
  padding: 6px 11px;
  border-radius: 7px;
  font-size: 10px;
  white-space: nowrap;
}

.tc-clean-content {
  min-height: 480px;
  padding: 16px 20px 22px;
  background: #ffffff;
}

.tc-clean-content .tc-detail-panel,
.tc-clean-content .tc-image-manager,
.tc-clean-content .tc-label-panel,
.tc-clean-content .tc-history-panel,
.tc-clean-content .tc-edit-form {
  margin-top: 0;
}

/* ==========================================================
   Details Workspace
========================================================== */

.tc-clean-detail-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.tc-clean-card-slab {
  position: sticky;
  top: 18px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dce4ee;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.tc-clean-card-slab-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 58px;
  padding: 10px 11px;
  border-bottom: 1px solid #e7edf5;
  background: #f8fafc;
}

.tc-clean-card-slab-label > div {
  min-width: 0;
}

.tc-clean-card-slab-label span {
  display: block;
  margin-bottom: 3px;
  color: #2563eb;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tc-clean-card-slab-label strong {
  display: block;
  overflow: hidden;
  color: #111827;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-clean-card-preview-frame {
  display: grid;
  width: 100%;
  height: 270px;
  place-items: center;
  overflow: hidden;
  background: #eef2f7;
}

.tc-clean-card-preview-frame.has-image {
  background: #ffffff;
}

.tc-clean-card-preview-frame img {
  display: block;
  width: 100%;
  height: 270px;
  object-fit: contain;
  background: #ffffff;
}

.tc-clean-card-preview-empty {
  display: grid;
  place-items: center;
  gap: 7px;
  padding: 20px;
  color: #94a3b8;
  text-align: center;
}

.tc-clean-card-preview-empty strong {
  color: #475569;
  font-size: 12px;
}

.tc-clean-card-preview-empty span {
  max-width: 145px;
  font-size: 10px;
  line-height: 1.4;
}

.tc-clean-card-slab-footer {
  padding: 5px 11px 8px;
  border-top: 1px solid #e7edf5;
}

.tc-clean-slab-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 33px;
  border-bottom: 1px solid #edf1f6;
}

.tc-clean-slab-row:last-child {
  border-bottom: none;
}

.tc-clean-slab-row span {
  color: #64748b;
  font-size: 9px;
  font-weight: 650;
}

.tc-clean-slab-row strong {
  min-width: 0;
  color: #0f172a;
  font-size: 9px;
  font-weight: 800;
  text-align: right;
  overflow-wrap: anywhere;
}

.tc-clean-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.tc-clean-detail-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #ffffff;
}

.tc-clean-detail-card-header {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  padding: 8px 12px;
  border-bottom: 1px solid #edf1f6;
  background: #f8fafc;
}

.tc-clean-detail-card-header h3 {
  margin: 0;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
}

.tc-clean-detail-card-icon {
  display: grid;
  width: 27px;
  height: 27px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 8px;
  background: #eaf2ff;
  color: #2563eb;
}

.tc-clean-detail-card-body {
  padding: 2px 12px 5px;
}

.tc-clean-detail-row {
  display: grid;
  grid-template-columns: minmax(88px, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 10px;
  min-height: 35px;
  padding: 6px 0;
  border-bottom: 1px solid #edf1f6;
}

.tc-clean-detail-row:last-child {
  border-bottom: none;
}

.tc-clean-detail-row > span {
  color: #64748b;
  font-size: 10px;
  font-weight: 600;
}

.tc-clean-detail-row > strong {
  min-width: 0;
  color: #0f172a;
  font-size: 11px;
  font-weight: 750;
  text-align: right;
  overflow-wrap: anywhere;
}

.tc-clean-detail-row .cf-badge {
  justify-self: end;
}

.tc-clean-value-positive {
  color: #16a34a !important;
}

.tc-clean-value-negative {
  color: #dc2626 !important;
}

/* ==========================================================
   Images and Forms
========================================================== */

.tc-clean-content .tc-image-workspace {
  gap: 14px;
  margin-top: 0;
}

.tc-clean-content .tc-image-workspace-frame {
  min-height: 320px;
}

.tc-clean-content .tc-image-workspace-frame img {
  height: 320px;
}

.tc-clean-content .tc-edit-form {
  max-width: 760px;
}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width: 1180px) {
  .tc-clean-shell {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .tc-clean-detail-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .tc-clean-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .tc-clean-shell {
    grid-template-columns: 1fr;
  }

  .tc-clean-browser {
    position: static;
  }

  .tc-clean-browser .tc-card-list {
    height: 320px;
  }
}

@media (max-width: 720px) {
  .tc-clean-header {
    align-items: flex-start;
    padding: 16px;
  }

  .tc-clean-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .tc-clean-toolbar-primary {
    width: 100%;
  }

  .tc-clean-toolbar-primary > * {
    flex: 1;
  }

  .tc-clean-toolbar .cf-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .tc-clean-toolbar .cf-tabs button {
    flex: 1;
    min-width: 82px;
  }

  .tc-clean-content {
    padding: 14px;
  }

  .tc-clean-detail-layout {
    grid-template-columns: 1fr;
  }

  .tc-clean-card-slab {
    position: static;
    max-width: 250px;
    margin: 0 auto;
  }

  .tc-clean-detail-grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================
   Card Studio
========================================================== */

.tc-studio {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tc-studio-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 18px;
  border: 1px solid #dfe6ef;
  border-radius: 15px;
  background:
    radial-gradient(
      circle at top right,
      rgba(37, 99, 235, 0.09),
      transparent 38%
    ),
    #f8fafc;
}

.tc-studio-header > div:first-child {
  min-width: 0;
}

.tc-studio-eyebrow {
  margin: 0 0 5px;
  color: #2563eb;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.tc-studio-header h2 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  font-weight: 800;
}

.tc-studio-header p:not(.tc-studio-eyebrow) {
  max-width: 620px;
  margin: 6px 0 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.5;
}

.tc-studio-header-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.tc-studio-count {
  min-width: 68px;
  padding: 8px 11px;
  border: 1px solid #dfe6ef;
  border-radius: 11px;
  background: #ffffff;
  text-align: center;
}

.tc-studio-count span {
  display: block;
  margin-bottom: 2px;
  color: #94a3b8;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tc-studio-count strong {
  color: #0f172a;
  font-size: 16px;
}

.tc-studio-layout-toggle {
  display: flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid #dfe6ef;
  border-radius: 10px;
  background: #eef2f7;
}

.tc-studio-layout-toggle button {
  display: grid;
  width: 32px;
  height: 30px;
  place-items: center;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
}

.tc-studio-layout-toggle button:hover {
  color: #2563eb;
}

.tc-studio-layout-toggle button.active {
  background: #ffffff;
  color: #2563eb;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.09);
}

.tc-studio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.tc-studio-grid.is-stacked {
  grid-template-columns: 1fr;
}

.tc-studio-panel {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid #dfe6ef;
  border-radius: 16px;
  background: #ffffff;
}

.tc-studio-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 62px;
  padding: 11px 14px;
  border-bottom: 1px solid #e7edf5;
  background: #f8fafc;
}

.tc-studio-side-label {
  display: block;
  margin-bottom: 3px;
  color: #2563eb;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tc-studio-panel-header h3 {
  margin: 0;
  color: #111827;
  font-size: 14px;
  font-weight: 800;
}

.tc-studio-image-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tc-studio-image-status.is-ready {
  background: #dcfce7;
  color: #166534;
}

.tc-studio-image-status.is-missing {
  background: #fef3c7;
  color: #92400e;
}

.tc-studio-frame {
  position: relative;
  display: grid;
  min-height: 410px;
  place-items: center;
  overflow: hidden;
  border: 2px dashed #cbd5e1;
  background:
    linear-gradient(45deg, #f8fafc 25%, transparent 25%),
    linear-gradient(-45deg, #f8fafc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f8fafc 75%),
    linear-gradient(-45deg, transparent 75%, #f8fafc 75%),
    #f1f5f9;
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.tc-studio-frame:hover {
  border-color: #60a5fa;
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.05);
}

.tc-studio-frame.has-image {
  border-color: transparent;
  border-style: solid;
  background: #eef2f7;
}

.tc-studio-frame img {
  display: block;
  width: 100%;
  height: 410px;
  object-fit: contain;
  background: #eef2f7;
  cursor: zoom-in;
}

.tc-studio-expand {
  position: absolute;
  right: 13px;
  bottom: 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 11px;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.tc-studio-frame:hover .tc-studio-expand {
  opacity: 1;
  transform: translateY(0);
}

.tc-studio-empty {
  display: grid;
  max-width: 220px;
  place-items: center;
  padding: 34px;
  text-align: center;
}

.tc-studio-empty-icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
  place-items: center;
  border-radius: 16px;
  background: #eaf2ff;
  color: #2563eb;
}

.tc-studio-empty strong {
  color: #334155;
  font-size: 13px;
}

.tc-studio-empty p {
  margin: 7px 0 0;
  color: #94a3b8;
  font-size: 10px;
  line-height: 1.5;
}

.tc-studio-panel-footer {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border-top: 1px solid #e7edf5;
  background: #ffffff;
}

.tc-studio-upload-btn,
.tc-studio-secondary-btn {
  display: inline-flex;
  min-height: 37px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.tc-studio-upload-btn {
  flex: 1;
  border: 1px solid #bfd3fc;
  background: #eaf2ff;
  color: #1d4ed8;
}

.tc-studio-upload-btn:hover {
  border-color: #60a5fa;
  background: #dfeaff;
}

.tc-studio-secondary-btn {
  border: 1px solid #dfe6ef;
  background: #ffffff;
  color: #475569;
}

.tc-studio-secondary-btn:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.tc-studio-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #f0f7ff;
  color: #2563eb;
}

.tc-studio-tip p {
  margin: 0;
  color: #475569;
  font-size: 10px;
  line-height: 1.45;
}

@media (max-width: 1080px) {
  .tc-studio-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .tc-studio-header {
    flex-direction: column;
  }

  .tc-studio-header-tools {
    width: 100%;
    justify-content: space-between;
  }

  .tc-studio-frame,
  .tc-studio-frame img {
    height: 360px;
    min-height: 360px;
  }
}
.workspace-selected-card {
  margin-top: 8px;
}

.workspace-selected-card h3 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.workspace-selected-card p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

/* ==========================================================
   Sprint 3.2 · Executive Workspace Header
========================================================== */

.tc-exec-header {
  padding: 16px 18px 14px;
  border-bottom: 1px solid #e7edf5;
  background:
    radial-gradient(
      circle at top right,
      rgba(37, 99, 235, 0.1),
      transparent 34%
    ),
    #ffffff;
}

.tc-exec-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.tc-exec-title-block {
  min-width: 0;
}

.tc-exec-title-block h2 {
  margin: 0;
  color: #111827;
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.tc-exec-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.tc-exec-metric {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.92);
}

.tc-exec-metric-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 10px;
  background: #eaf2ff;
  color: #2563eb;
}

.tc-exec-metric > div {
  min-width: 0;
}

.tc-exec-metric-label {
  display: block;
  margin-bottom: 3px;
  color: #64748b;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tc-exec-metric strong {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-exec-metric.is-market strong,
.tc-exec-metric.is-price strong {
  color: #16a34a;
}

/* ==========================================================
   Sprint 3.2 · AI Analysis Workspace
========================================================== */

.tc-clean-content-ai {
  background: #f8fafc;
}

.tc-ai-workspace {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tc-ai-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #dbe5f0;
  border-radius: 15px;
  background:
    radial-gradient(
      circle at top right,
      rgba(37, 99, 235, 0.1),
      transparent 38%
    ),
    #ffffff;
}

.tc-ai-hero-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: #eaf2ff;
  color: #2563eb;
}

.tc-ai-eyebrow {
  margin: 0 0 3px;
  color: #2563eb !important;
  font-size: 8px !important;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tc-ai-hero h2 {
  margin: 0;
  color: #0f172a;
  font-size: 19px;
  font-weight: 850;
}

.tc-ai-hero p:not(.tc-ai-eyebrow) {
  max-width: 650px;
  margin: 5px 0 0;
  color: #64748b;
  font-size: 10px;
  line-height: 1.5;
}

.tc-ai-grade {
  min-width: 170px;
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #f0f7ff;
  text-align: right;
}

.tc-ai-grade span {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tc-ai-grade strong {
  color: #1d4ed8;
  font-size: 15px;
}

.tc-ai-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.tc-ai-score-card {
  padding: 13px;
  border: 1px solid #dfe6ef;
  border-radius: 13px;
  background: #ffffff;
}

.tc-ai-score-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  color: #2563eb;
}

.tc-ai-score-heading span {
  display: block;
  margin-bottom: 3px;
  color: #64748b;
  font-size: 9px;
  font-weight: 750;
}

.tc-ai-score-heading strong {
  color: #0f172a;
  font-size: 17px;
  font-weight: 850;
}

.tc-ai-score-track {
  height: 7px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.tc-ai-score-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #60a5fa,
    #2563eb
  );
}

.tc-ai-score-card p {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 9px;
  line-height: 1.45;
}

.tc-ai-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tc-ai-panel {
  overflow: hidden;
  border: 1px solid #dfe6ef;
  border-radius: 13px;
  background: #ffffff;
}

.tc-ai-panel > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid #edf1f6;
  background: #f8fafc;
  color: #2563eb;
}

.tc-ai-panel > header span {
  display: block;
  margin-bottom: 2px;
  color: #64748b;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tc-ai-panel > header h3 {
  margin: 0;
  color: #0f172a;
  font-size: 12px;
  font-weight: 850;
}

.tc-ai-facts {
  padding: 3px 13px 7px;
}

.tc-ai-facts > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 39px;
  border-bottom: 1px solid #edf1f6;
}

.tc-ai-facts > div:last-child {
  border-bottom: none;
}

.tc-ai-facts span {
  color: #64748b;
  font-size: 9px;
}

.tc-ai-facts strong {
  color: #0f172a;
  font-size: 10px;
  text-align: right;
}

.tc-ai-notes {
  margin: 0;
  padding: 14px 18px 16px 30px;
  color: #475569;
  font-size: 10px;
  line-height: 1.6;
}

.tc-ai-empty {
  margin: 0;
  padding: 18px;
  color: #64748b;
  font-size: 10px;
  line-height: 1.55;
}

.tc-ai-disclaimer {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #fde68a;
  border-radius: 11px;
  background: #fffbeb;
  color: #92400e;
  font-size: 9px;
  line-height: 1.45;
}

@media (max-width: 1120px) {
  .tc-exec-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tc-ai-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .tc-exec-title-row,
  .tc-ai-hero {
    grid-template-columns: 1fr;
  }

  .tc-exec-title-row {
    align-items: flex-start;
  }

  .tc-exec-metrics,
  .tc-ai-summary-grid,
  .tc-ai-bottom-grid {
    grid-template-columns: 1fr;
  }

  .tc-ai-grade {
    width: 100%;
    text-align: left;
  }
}


/* OPTIC DATA · TRADING CARDS · DARK WORKSPACE FINAL OVERRIDE */

:root {
  --tc-dark-0: #07111f;
  --tc-dark-1: #0b1d2f;
  --tc-dark-2: #10263d;
  --tc-dark-3: #132f49;
  --tc-border: #244766;
  --tc-border-soft: #1c3a56;
  --tc-text: #f8fafc;
  --tc-text-soft: #cbd5e1;
  --tc-muted: #8fa8c2;
  --tc-blue: #63bdff;
  --tc-green: #39ff88;
}

/* Browser / card list */
.tc-clean-browser,
.tc-clean-browser .tc-card-list {
  background: var(--tc-dark-1) !important;
  border-color: var(--tc-border) !important;
  color: var(--tc-text) !important;
  box-shadow: none !important;
}

.tc-clean-browser .tc-card-list-item {
  background: var(--tc-dark-2) !important;
  border: 1px solid var(--tc-border-soft) !important;
  color: var(--tc-text) !important;
}

.tc-clean-browser .tc-card-list-item:hover {
  background: #173453 !important;
  border-color: #4fb3ff !important;
}

.tc-clean-browser .tc-card-list-item.selected {
  background: #18395b !important;
  border-color: #60a5fa !important;
  box-shadow: inset 3px 0 0 #60a5fa !important;
}

.tc-clean-browser .tc-card-name,
.tc-clean-browser .tc-card-list-item strong {
  color: #ffffff !important;
}

.tc-clean-browser .tc-card-subtitle,
.tc-clean-browser .tc-card-list-item span,
.tc-clean-browser .tc-card-list-item small {
  color: var(--tc-text-soft) !important;
}

.tc-clean-browser .tc-card-id {
  color: var(--tc-blue) !important;
}

.tc-clean-browser .tc-card-price {
  color: #ffffff !important;
  font-weight: 900 !important;
}

.tc-clean-browser .cf-badge-available {
  background: #16c963 !important;
  color: #04140b !important;
  border-color: #5dffa3 !important;
  font-weight: 900 !important;
  box-shadow: 0 0 11px rgba(57,255,136,.28) !important;
}

/* Main inspector */
.tc-clean-inspector {
  background: var(--tc-dark-0) !important;
  border-color: var(--tc-border) !important;
  color: var(--tc-text) !important;
  box-shadow: none !important;
}

.tc-clean-header,
.tc-exec-header {
  background:
    radial-gradient(
      circle at top right,
      rgba(79,179,255,.12),
      transparent 36%
    ),
    var(--tc-dark-1) !important;
  border-color: var(--tc-border) !important;
  color: var(--tc-text) !important;
}

.tc-clean-title-block h2,
.tc-exec-title-block h2 {
  color: #ffffff !important;
}

.tc-clean-subtitle,
.tc-exec-metric-label {
  color: var(--tc-text-soft) !important;
}

.tc-clean-code {
  color: var(--tc-blue) !important;
}

.tc-clean-status-available {
  background: #16c963 !important;
  color: #04140b !important;
  border: 1px solid #5dffa3 !important;
  box-shadow: 0 0 10px rgba(57,255,136,.24) !important;
}

.tc-clean-summary strong {
  color: var(--tc-green) !important;
}

/* Toolbar + tabs */
.tc-clean-toolbar {
  background: var(--tc-dark-1) !important;
  border-color: var(--tc-border) !important;
}

.tc-clean-toolbar .cf-tabs,
.tc-studio-layout-toggle {
  background: var(--tc-dark-2) !important;
  border-color: var(--tc-border) !important;
}

.tc-clean-toolbar .cf-tabs button,
.tc-studio-layout-toggle button {
  color: var(--tc-text-soft) !important;
}

.tc-clean-toolbar .cf-tabs button.active,
.tc-studio-layout-toggle button.active {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Content shell */
.tc-clean-content,
.tc-clean-content-ai {
  background: var(--tc-dark-0) !important;
  color: var(--tc-text) !important;
}

/* Details */
.tc-clean-card-slab,
.tc-clean-detail-card,
.tc-clean-detail-card-header,
.tc-clean-card-slab-label,
.tc-clean-card-slab-footer,
.tc-clean-detail-card-body {
  background: var(--tc-dark-1) !important;
  border-color: var(--tc-border) !important;
  color: var(--tc-text) !important;
}

.tc-clean-detail-card-header {
  background: var(--tc-dark-2) !important;
}

.tc-clean-card-slab-label strong,
.tc-clean-detail-card-header h3,
.tc-clean-detail-row > strong,
.tc-clean-slab-row strong {
  color: #ffffff !important;
}

.tc-clean-card-slab-label span,
.tc-clean-detail-row > span,
.tc-clean-slab-row span {
  color: var(--tc-text-soft) !important;
}

.tc-clean-detail-row,
.tc-clean-slab-row {
  border-color: var(--tc-border-soft) !important;
}

.tc-clean-detail-card-icon {
  background: #123455 !important;
  color: var(--tc-blue) !important;
}

/* Keep image canvas dark instead of white */
.tc-clean-card-preview-frame,
.tc-clean-card-preview-frame.has-image,
.tc-clean-card-preview-frame img {
  background: #081827 !important;
}

.tc-clean-card-preview-empty,
.tc-clean-card-preview-empty strong {
  color: var(--tc-text-soft) !important;
}

/* Card Studio */
.tc-studio-header,
.tc-studio-count,
.tc-studio-panel,
.tc-studio-panel-header,
.tc-studio-panel-footer,
.tc-studio-tip {
  background: var(--tc-dark-1) !important;
  border-color: var(--tc-border) !important;
  color: var(--tc-text) !important;
}

.tc-studio-panel-header {
  background: var(--tc-dark-2) !important;
}

.tc-studio-header h2,
.tc-studio-panel-header h3,
.tc-studio-count strong,
.tc-studio-empty strong {
  color: #ffffff !important;
}

.tc-studio-header p:not(.tc-studio-eyebrow),
.tc-studio-count span,
.tc-studio-empty p,
.tc-studio-tip p {
  color: var(--tc-text-soft) !important;
}

.tc-studio-frame,
.tc-studio-frame.has-image,
.tc-studio-frame img {
  background: #081827 !important;
  border-color: var(--tc-border) !important;
}

.tc-studio-upload-btn {
  background: #1d4ed8 !important;
  border-color: #4f83ff !important;
  color: #ffffff !important;
}

.tc-studio-secondary-btn {
  background: var(--tc-dark-2) !important;
  border-color: var(--tc-border) !important;
  color: #ffffff !important;
}

/* Executive metrics */
.tc-exec-metric {
  background: var(--tc-dark-2) !important;
  border-color: var(--tc-border) !important;
}

.tc-exec-metric strong {
  color: #ffffff !important;
}

.tc-exec-metric-icon {
  background: #123455 !important;
  color: var(--tc-blue) !important;
}

/* AI Analysis */
.tc-ai-hero,
.tc-ai-grade,
.tc-ai-score-card,
.tc-ai-panel,
.tc-ai-panel > header,
.tc-ai-disclaimer {
  background: var(--tc-dark-1) !important;
  border-color: var(--tc-border) !important;
  color: var(--tc-text) !important;
}

.tc-ai-panel > header {
  background: var(--tc-dark-2) !important;
}

.tc-ai-hero h2,
.tc-ai-score-heading strong,
.tc-ai-panel > header h3,
.tc-ai-facts strong {
  color: #ffffff !important;
}

.tc-ai-hero p:not(.tc-ai-eyebrow),
.tc-ai-grade span,
.tc-ai-score-heading span,
.tc-ai-score-card p,
.tc-ai-panel > header span,
.tc-ai-facts span,
.tc-ai-notes,
.tc-ai-empty {
  color: var(--tc-text-soft) !important;
}

.tc-ai-score-track {
  background: #193653 !important;
}

.tc-ai-disclaimer {
  color: #ffd166 !important;
}

/* Marketplace tab inside Trading Cards */
.tc-clean-content .mp-workspace,
.tc-clean-content .mp-panel,
.tc-clean-content .mp-preview-card,
.tc-clean-content .mp-readiness-card,
.tc-clean-content .mp-summary-grid > article,
.tc-clean-content .mp-intelligence-card,
.tc-clean-content .mp-optic-generator {
  background: var(--tc-dark-1) !important;
  border-color: var(--tc-border) !important;
  color: var(--tc-text) !important;
}

/* Global text safety within this workspace */
.tc-clean-shell :where(h1,h2,h3,h4,h5,h6,strong) {
  color: #ffffff;
}

.tc-clean-shell :where(p,span,small,label) {
  opacity: 1;
}

/* Mark Sold remains visibly destructive, not pale */
.tc-clean-sold-btn {
  background: #b91c1c !important;
  color: #ffffff !important;
  border-color: #ff6b6b !important;
}

.tc-clean-sold-btn:hover:not(:disabled) {
  background: #ef4444 !important;
}


.optic-market-page {
  display: grid;
  gap: 18px;
  min-width: 0;
  color: #e5edf7;
}

.optic-market-hero,
.optic-market-panel,
.optic-store-card,
.optic-market-card-group,
.optic-market-tabs {
  background: #081725 !important;
  border-color: #19324a !important;
  box-shadow: none !important;
}

.optic-market-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px;
  border: 1px solid #19324a;
  border-radius: 18px;
}

.optic-market-eyebrow,
.optic-market-panel-heading span,
.optic-store-card-heading > div > span,
.optic-market-card-title > div > span {
  color: #6fb6ff !important;
}

.optic-market-hero h1,
.optic-market-panel-heading h2,
.optic-store-card-heading h3,
.optic-market-card-title h3,
.optic-market-stock-row strong {
  color: #f8fbff !important;
}

.optic-market-subtitle,
.optic-market-card-title p,
.optic-market-stock-row span,
.optic-store-detail,
.optic-market-empty span {
  color: #9bb0c5 !important;
}

.optic-market-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid #1d5c47;
  border-radius: 999px;
  background: #0a251f !important;
  color: #6ee7b7 !important;
  font-size: 12px;
  font-weight: 850;
}

.optic-market-badge > span,
.optic-store-live > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
}

.optic-market-tabs {
  display: flex;
  gap: 8px;
  padding: 5px;
  width: fit-content;
  border: 1px solid #19324a;
  border-radius: 13px;
}

.optic-market-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 15px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #8ea4ba;
  font-weight: 800;
  cursor: pointer;
}

.optic-market-tabs button.active {
  background: #0d2235 !important;
  color: #6fb6ff !important;
  box-shadow: inset 0 0 0 1px #23496a !important;
}

.optic-market-panel {
  padding: 22px;
  border: 1px solid #19324a;
  border-radius: 18px;
}

.optic-market-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 16px;
}

.optic-market-panel-heading h2 {
  margin: 3px 0 0;
  font-size: 20px;
}

.optic-market-searchbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.optic-market-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.optic-market-input-wrap > svg {
  position: absolute;
  left: 15px;
  color: #6f89a3;
  pointer-events: none;
}

.optic-market-input-wrap input {
  width: 100%;
  min-height: 46px;
  padding: 10px 46px 10px 43px;
  border: 1px solid #24425d !important;
  border-radius: 12px;
  background: #061421 !important;
  color: #f8fbff !important;
  font-size: 14px;
  outline: none;
}

.optic-market-input-wrap input::placeholder {
  color: #6f8498 !important;
}

.optic-market-input-wrap input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14) !important;
}

.optic-market-clear {
  position: absolute;
  right: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #29445d;
  border-radius: 8px;
  background: #10283b !important;
  color: #b8c7d6 !important;
  cursor: pointer;
}

.optic-market-primary,
.optic-store-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 11px;
  font-weight: 850;
  cursor: pointer;
}

.optic-market-primary {
  min-height: 46px;
  padding: 0 17px;
  border: 1px solid #2f6ee5;
  background: #2563eb !important;
  color: #fff !important;
}

.optic-market-message {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid #7a5b16 !important;
  border-radius: 10px;
  background: #2a210b !important;
  color: #f6cc66 !important;
  font-size: 12px;
  font-weight: 700;
}

.optic-market-empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 54px 20px;
  color: #60768b;
  text-align: center;
}

.optic-market-empty strong {
  color: #c9d6e2 !important;
  font-size: 15px;
}

.optic-store-search-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.optic-store-card {
  display: flex;
  gap: 14px;
  padding: 17px;
  border: 1px solid #19324a;
  border-radius: 15px;
}

.optic-store-card-icon {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #234d73;
  border-radius: 12px;
  background: #0b2941 !important;
  color: #6fb6ff !important;
}

.optic-store-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6ee7b7 !important;
  font-size: 10px;
  font-weight: 850;
}

.optic-store-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}

.optic-store-secondary {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #2a4761 !important;
  background: #0c2133 !important;
  color: #c8d7e5 !important;
  font-size: 11px;
  text-decoration: none;
}

.optic-market-card-groups {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.optic-market-card-group {
  overflow: hidden;
  border: 1px solid #19324a;
  border-radius: 14px;
}

.optic-market-card-title {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 15px 16px;
  background: #0b1c2c !important;
}

.optic-market-store-count {
  align-self: flex-start;
  padding: 6px 9px;
  border: 1px solid #28527a;
  border-radius: 999px;
  background: #0b2941 !important;
  color: #78baff !important;
  font-size: 10px;
  font-weight: 850;
}

.optic-market-stock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid #173047;
}

.optic-market-stock-meta span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #10283b !important;
  color: #b8c7d6 !important;
  font-weight: 800;
}

.optic-market-stock-meta strong {
  color: #6ee7b7 !important;
}

.is-spinning {
  animation: optic-market-spin .8s linear infinite;
}

@keyframes optic-market-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 760px) {
  .optic-market-hero { flex-direction: column; }
  .optic-market-searchbar { grid-template-columns: 1fr; }
  .optic-market-tabs { width: 100%; }
  .optic-market-tabs button { flex: 1; }
  .optic-store-search-results { grid-template-columns: 1fr; }
}


/* ==========================================================
   OPTIC DATA · Looking For + Card Post Alerts
========================================================== */

.optic-alert-count {
  display: inline-grid;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff !important;
  font-size: 10px;
  font-weight: 900;
}

.optic-unread-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid #7c2d12;
  border-radius: 999px;
  background: #2a130b;
  color: #fdba74;
  font-size: 11px;
  font-weight: 850;
}

.optic-market-success {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid #166534;
  border-radius: 10px;
  background: #08271d;
  color: #86efac;
  font-size: 12px;
  font-weight: 750;
}

.optic-wants-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
  gap: 16px;
  margin-top: 18px;
}

.optic-wants-column {
  min-width: 0;
  padding: 15px;
  border: 1px solid #19324a;
  border-radius: 14px;
  background: #071522;
}

.optic-wants-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.optic-wants-section-title span {
  color: #6fb6ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.optic-wants-section-title h3 {
  margin: 3px 0 0;
  color: #f8fbff;
  font-size: 16px;
}

.optic-wants-section-title > strong {
  display: inline-grid;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  place-items: center;
  border: 1px solid #2a4761;
  border-radius: 999px;
  background: #0c2133;
  color: #bcd0e2;
  font-size: 11px;
}

.optic-mini-empty {
  padding: 24px 14px;
  border: 1px dashed #29445d;
  border-radius: 11px;
  color: #7f96ab;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.optic-want-list,
.optic-alert-list {
  display: grid;
  gap: 9px;
}

.optic-want-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #1a344d;
  border-radius: 11px;
  background: #0a1c2b;
}

.optic-want-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.optic-want-row strong {
  overflow: hidden;
  color: #f3f7fb;
  font-size: 12px;
  text-overflow: ellipsis;
}

.optic-want-row span {
  color: #73899f;
  font-size: 10px;
}

.optic-icon-danger {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #5c2a2a;
  border-radius: 9px;
  background: #251012;
  color: #fca5a5;
  cursor: pointer;
}

.optic-icon-danger:hover {
  border-color: #ef4444;
  color: #fecaca;
}

.optic-alert-row {
  display: flex;
  gap: 12px;
  padding: 13px;
  border: 1px solid #1a344d;
  border-radius: 12px;
  background: #0a1c2b;
}

.optic-alert-row.is-unread {
  border-color: #365f87;
  background: #0b2235;
  box-shadow: inset 3px 0 0 #3b82f6;
}

.optic-alert-row.is-read {
  opacity: 0.82;
}

.optic-alert-icon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #28527a;
  border-radius: 10px;
  background: #0b2941;
  color: #79baff;
}

.optic-alert-main {
  min-width: 0;
  flex: 1;
}

.optic-alert-main > span {
  color: #6fb6ff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.optic-alert-main > strong {
  display: block;
  margin-top: 3px;
  color: #f8fbff;
  font-size: 13px;
}

.optic-alert-main > p {
  margin: 5px 0 0;
  color: #91a7bb;
  font-size: 10px;
}

.optic-alert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

@media (max-width: 900px) {
  .optic-wants-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   OPTIC DATA · Quantity Alerts
========================================================== */
.optic-stock-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.2fr) minmax(320px, .8fr);
  gap: 16px;
  margin-top: 18px;
}

.optic-stock-item-list {
  display: grid;
  gap: 9px;
}

.optic-stock-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 82px auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #1a344d;
  border-radius: 11px;
  background: #0a1c2b;
}

.optic-stock-item-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.optic-stock-item-main strong {
  overflow: hidden;
  color: #f3f7fb;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.optic-stock-item-main span {
  color: #73899f;
  font-size: 10px;
}

.optic-stock-qty {
  color: #8ea4ba;
  font-size: 10px;
  white-space: nowrap;
}

.optic-stock-qty strong {
  color: #f8fbff;
  font-size: 13px;
}

.optic-threshold-input {
  width: 82px;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid #29445d !important;
  border-radius: 9px;
  background: #061421 !important;
  color: #f8fbff !important;
  font-size: 12px;
  outline: none;
}

.optic-threshold-input:focus {
  border-color: #3b82f6 !important;
}

@media (max-width: 980px) {
  .optic-stock-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .optic-stock-item {
    grid-template-columns: 1fr auto;
  }
}

.store-transfer-page {
  min-height: 100%;
  padding: 24px 28px 40px;
  background:
    radial-gradient(circle at top right, rgba(29, 78, 216, 0.08), transparent 30%),
    #06111c;
  color: #f8fbff;
}

.store-transfer-hero,
.store-transfer-panel {
  border: 1px solid #17314a;
  border-radius: 18px;
  background: linear-gradient(180deg, #0a1a29 0%, #081522 100%);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16);
}

.store-transfer-hero {
  padding: 28px 30px;
}

.store-transfer-panel {
  padding: 24px;
}

.store-transfer-hero p,
.store-transfer-heading span,
.store-transfer-selected span,
.store-request-eyebrow {
  margin: 0;
  color: #5eb2ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.store-transfer-hero h1 {
  margin: 8px 0 10px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.store-transfer-hero > div > span {
  display: block;
  color: #9db0c3;
  font-size: 13px;
  line-height: 1.6;
}

.store-transfer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}

.store-transfer-tabs button,
.store-transfer-search button,
.store-transfer-submit,
.store-request-refresh,
.store-request-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #2a465f;
  border-radius: 11px;
  background: #0a1a28;
  color: #cbd8e5;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.store-transfer-tabs button.active,
.store-transfer-search button,
.store-transfer-submit {
  border-color: #3b82f6;
  background: linear-gradient(180deg, #103859 0%, #0c2a43 100%);
  color: #fff;
}

.store-transfer-heading {
  margin-bottom: 16px;
}

.store-transfer-heading h2,
.store-transfer-heading h3 {
  margin: 5px 0 0;
  color: #f8fbff;
}

.store-transfer-heading h2 {
  font-size: 22px;
}

.store-transfer-heading h3 {
  font-size: 16px;
}

.store-security-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px 0 14px;
  padding: 11px 13px;
  border: 1px solid #29597d;
  border-radius: 11px;
  background: rgba(15, 58, 92, 0.35);
  color: #b9d9f7;
  font-size: 12px;
}

.store-transfer-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.store-transfer-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid #29465f;
  border-radius: 11px;
  background: #061421;
  color: #7f9ab4;
}

.store-transfer-input-wrap input,
.store-transfer-grid input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f8fbff;
  font: inherit;
}

.store-transfer-grid input {
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #29465f;
  border-radius: 10px;
  background: #061421;
}

.store-transfer-results,
.store-request-list {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.store-transfer-result {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px;
  border: 1px solid #19354d;
  border-radius: 12px;
  background: #0a1c2b;
  color: #f8fbff;
  text-align: left;
  cursor: pointer;
}

.store-transfer-result.selected {
  border-color: #3b82f6;
  background: #0b2235;
}

.store-transfer-result > div {
  display: grid;
  gap: 4px;
}

.store-transfer-result span {
  color: #7891a8;
  font-size: 11px;
}

.store-transfer-form {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #17314a;
}

.store-transfer-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  margin-bottom: 14px;
  border: 1px solid #1f4f3e;
  border-radius: 11px;
  background: rgba(7, 46, 35, 0.55);
  color: #86efac;
}

.store-transfer-selected > div {
  display: grid;
  gap: 3px;
}

.store-transfer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 12px;
}

.store-transfer-grid label {
  display: grid;
  gap: 6px;
}

.store-transfer-grid label > span {
  color: #91a6b9;
  font-size: 11px;
  font-weight: 800;
}

.store-transfer-notes {
  grid-column: 1 / -1;
}

.store-destination-block {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #19354d;
  border-radius: 13px;
  background: #071522;
}

.destination-selected {
  margin-top: 12px;
  margin-bottom: 0;
}

.store-transfer-submit {
  margin-top: 16px;
}

.store-transfer-error,
.store-transfer-success {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 750;
}

.store-transfer-error {
  border: 1px solid #7f1d1d;
  background: rgba(69, 10, 10, 0.68);
  color: #fecaca;
}

.store-transfer-success {
  border: 1px solid #166534;
  background: rgba(6, 78, 59, 0.46);
  color: #bbf7d0;
}

.store-request-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.store-request-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 12px;
}

.store-request-column-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c5d6e6;
  font-size: 12px;
  font-weight: 900;
}

.store-request-card {
  padding: 14px;
  border: 1px solid #19354d;
  border-radius: 12px;
  background: #091a28;
}

.store-request-card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.store-request-card-top > div {
  display: grid;
  gap: 4px;
}

.store-request-card-top strong {
  color: #f8fbff;
  font-size: 13px;
}

.store-request-card-top span:not(.store-request-status) {
  color: #7f96ab;
  font-size: 11px;
}

.store-request-status {
  height: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.status-pending {
  background: rgba(245, 158, 11, 0.14);
  color: #fcd34d;
}

.status-approved {
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
}

.status-rejected,
.status-cancelled {
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
}

.store-request-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 11px;
  color: #8ea4b8;
  font-size: 10px;
}

.store-request-notes {
  margin: 10px 0 0;
  color: #c1d0dd;
  font-size: 11px;
}

.store-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.store-request-actions button.approve {
  border-color: #23784c;
  background: #0b3828;
  color: #b7f7d0;
}

.store-request-actions button.reject {
  border-color: #743131;
  background: #321515;
  color: #fecaca;
}

.store-request-empty {
  padding: 18px;
  border: 1px dashed #29465f;
  border-radius: 12px;
  color: #70879c;
  text-align: center;
  font-size: 12px;
}

.store-request-refresh {
  min-height: 38px;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.is-spinning {
  animation: opticSpin 0.8s linear infinite;
}

@keyframes opticSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
  .store-transfer-page {
    padding: 18px;
  }

  .store-transfer-grid,
  .store-request-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .store-transfer-page {
    padding: 12px;
  }

  .store-transfer-search {
    grid-template-columns: 1fr;
  }

  .store-transfer-search button,
  .store-transfer-submit {
    width: 100%;
  }

  .store-transfer-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .store-transfer-tabs button {
    width: 100%;
  }
}

.optic-locator-page {
  min-height: 100%;
  padding: 24px 28px 40px;
  background:
    radial-gradient(circle at top right, rgba(29, 78, 216, .08), transparent 30%),
    #06111c;
  color: #f8fbff;
}

.optic-locator-hero,
.optic-locator-panel {
  border: 1px solid #17314a;
  border-radius: 18px;
  background: linear-gradient(180deg, #0a1a29 0%, #081522 100%);
  box-shadow: 0 18px 45px rgba(0,0,0,.16);
}

.optic-locator-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 30px;
}

.optic-locator-hero p {
  margin: 0;
  color: #5eb2ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
}

.optic-locator-hero h1 {
  margin: 8px 0 10px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -.03em;
}

.optic-locator-hero span {
  color: #9db0c3;
  font-size: 13px;
}

.optic-locator-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border: 1px solid #285378;
  border-radius: 16px;
  background: #0b2840;
  color: #69b8ff;
}

.optic-locator-panel {
  margin-top: 16px;
  padding: 22px;
}

.optic-locator-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.optic-locator-input {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #29465f;
  border-radius: 11px;
  background: #061421;
  color: #7894ad;
}

.optic-locator-input:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

.optic-locator-input input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f8fbff;
  font: inherit;
}

.optic-locator-input input::placeholder {
  color: #617a91;
}

.optic-locator-search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 17px;
  border: 1px solid #3b82f6;
  border-radius: 11px;
  background: linear-gradient(180deg, #103859 0%, #0c2a43 100%);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.optic-locator-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.optic-store-card {
  padding: 16px;
  border: 1px solid #19354d;
  border-radius: 13px;
  background: #091a28;
}

.optic-store-card-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.optic-store-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid #285378;
  border-radius: 11px;
  background: #0b2840;
  color: #69b8ff;
}

.optic-store-card-head > div:last-child {
  display: grid;
  gap: 4px;
}

.optic-store-card-head strong {
  font-size: 14px;
}

.optic-store-card-head span {
  color: #8098ad;
  font-size: 11px;
}

.optic-store-details {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid #17314a;
}

.optic-store-details > div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9bb0c3;
  font-size: 11px;
}

.optic-store-details a {
  color: #71baff;
  text-decoration: none;
}

.optic-locator-error,
.optic-locator-empty {
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  font-size: 12px;
}

.optic-locator-error {
  border: 1px solid #7f1d1d;
  background: rgba(69,10,10,.68);
  color: #fecaca;
}

.optic-locator-empty {
  grid-column: 1 / -1;
  border: 1px dashed #29465f;
  color: #7890a5;
  text-align: center;
}

.optic-spin {
  animation: opticLocatorSpin .8s linear infinite;
}

@keyframes opticLocatorSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
  .optic-locator-page {
    padding: 12px;
  }

  .optic-locator-hero,
  .optic-locator-panel {
    padding: 16px;
  }

  .optic-locator-search {
    grid-template-columns: 1fr;
  }

  .optic-locator-search button {
    width: 100%;
  }
}