@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');:root {  --q-primary-light: #C9992A;  --q-accent:        #F0C040;  --q-accent-dark:   #C9992A;  --q-bg:            #080611;  --q-surface:       #0D0B1A;  --q-border:        rgba(240,192,64,.12);  --q-text:          #F1EEF9;  --q-text-muted:    #8A8399;  --q-radius:        12px;  --q-shadow:        0 4px 24px rgba(0,0,0,.45);  --q-font:          'Sora', sans-serif;  --q-mono:          'IBM Plex Mono', monospace;}*, *::before, *::after { box-sizing: border-box; }body {  font-family: var(--q-font);  background: var(--q-bg);  color: var(--q-text);  font-size: 15px;  line-height: 1.6;  margin: 0;}a { color: var(--q-accent); text-decoration: none; }a:hover { color: var(--q-accent-dark); }h5 { font-weight: 600; margin: 0 0 4px; }/* ── Navbar ── */.q-navbar {  background: rgba(8,6,17,.85);  backdrop-filter: blur(20px);  -webkit-backdrop-filter: blur(20px);  border-bottom: 1px solid rgba(240,192,64,.1);  height: 60px;  display: flex;  align-items: center;  padding: 0 24px;  position: fixed;  top: 0; left: 0; right: 0;  z-index: 1000;  box-shadow: 0 1px 0 rgba(240,192,64,.06);}.q-logo { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -.5px; }.q-logo span { color: var(--q-accent); }/* ── Buttons ── */.btn-q-primary {  display: inline-flex;  align-items: center;  justify-content: center;  gap: 6px;  background: linear-gradient(135deg, #F0C040 0%, #D4A017 100%);  color: #08060E;  border: none;  padding: 10px 20px;  border-radius: var(--q-radius);  font-family: var(--q-font);  font-size: 14px;  font-weight: 600;  cursor: pointer;  transition: all .2s;  box-shadow: 0 4px 16px rgba(240,192,64,.25);}.btn-q-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(240,192,64,.4); color: #08060E; }.btn-q-outline {  display: inline-flex;  align-items: center;  justify-content: center;  gap: 6px;  background: rgba(255,255,255,.04);  color: var(--q-text);  border: 1.5px solid rgba(255,255,255,.12);  padding: 9px 20px;  border-radius: var(--q-radius);  font-family: var(--q-font);  font-size: 14px;  font-weight: 500;  cursor: pointer;  transition: all .2s;}.btn-q-outline:hover { border-color: var(--q-accent); color: var(--q-accent); background: rgba(240,192,64,.05); }.mt-3 { margin-top: 1rem; }/* ── Card ── */.q-card {  background: var(--q-surface);  border: 1px solid rgba(240,192,64,.1);  border-radius: var(--q-radius);  padding: 24px;  box-shadow: var(--q-shadow);}/* ── Method grid ── */.q-method-grid {  display: grid;  grid-template-columns: repeat(5, 1fr);  gap: 8px;  margin-bottom: 24px;}.method-card {  cursor: pointer;  border: 1.5px solid rgba(255,255,255,.1);  border-radius: var(--q-radius);  padding: 16px 12px;  text-align: center;  transition: all .2s;  background: rgba(255,255,255,.03);}.method-card:hover  { border-color: rgba(240,192,64,.4); background: rgba(240,192,64,.07); }.method-card.active { border-color: var(--q-accent); background: rgba(240,192,64,.1); box-shadow: 0 0 0 1px rgba(240,192,64,.15); }.method-icon  { font-size: 28px; margin-bottom: 8px; }.method-label { font-size: 13px; font-weight: 500; color: var(--q-text); }/* ── Verify panels ── */.verify-panel        { display: none; }.verify-panel.active { display: block; }/* ── Page layout ── */.verify-container {  margin-top: 60px;  padding: 40px 24px;  max-width: 780px;  margin-left: auto;  margin-right: auto;  position: relative;}.verify-container::before {  content: '';  position: fixed;  inset: 0;  background:    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(124,58,237,.1) 0%, transparent 60%),    radial-gradient(ellipse 40% 30% at 90% 70%, rgba(240,192,64,.06) 0%, transparent 55%);  pointer-events: none;  z-index: -1;}.verify-header { text-align: center; margin-bottom: 36px; }.verify-header h1 {  font-size: 28px;  font-weight: 700;  color: var(--q-text);  margin: 0 0 10px;  letter-spacing: -.4px;}.verify-header p  { color: var(--q-text-muted); font-size: 15px; margin: 0; }.result-area { margin-bottom: 28px; }/* ── Panel text ── */.verify-panel h5 { color: var(--q-text); margin: 0 0 4px; }.panel-subtitle  { color: var(--q-text-muted); font-size: 14px; margin-bottom: 20px; }/* ── QR camera ── */.verify-camera-wrap     { text-align: center; }.verify-camera-controls { margin-top: 16px; }#stop-cam-btn           { display: none; margin-left: 8px; }.verify-hint            { font-size: 12px; color: var(--q-text-muted); margin-top: 12px; }/* ── Forms ── */.q-form-group { margin-bottom: 18px; }.q-label {  display: block;  font-size: 13px;  font-weight: 500;  color: var(--q-text);  margin-bottom: 6px;}.q-input {  width: 100%;  padding: 11px 14px;  border: 1.5px solid rgba(255,255,255,.1);  border-radius: var(--q-radius);  font-family: var(--q-font);  font-size: 14px;  color: var(--q-text);  background: rgba(255,255,255,.04);  transition: border-color .15s, box-shadow .15s;  outline: none;}.q-input:focus { border-color: var(--q-accent); box-shadow: 0 0 0 3px rgba(240,192,64,.1); background: rgba(255,255,255,.06); }.q-input::placeholder { color: rgba(138,131,153,.6); }.q-input-mono { font-family: var(--q-mono); }/* ── Upload zone ── */.q-upload-zone {  border: 2px dashed rgba(240,192,64,.2);  border-radius: var(--q-radius);  padding: 40px 24px;  text-align: center;  cursor: pointer;  transition: all .2s;  background: rgba(255,255,255,.02);}.q-upload-zone:hover { border-color: var(--q-accent); background: rgba(240,192,64,.05); box-shadow: 0 0 0 1px rgba(240,192,64,.1); }.q-upload-zone p { color: var(--q-text-muted); font-size: 14px; margin: 8px 0 0; }.upload-icon { font-size: 28px; }.upload-hint { font-size: 12px; }.upload-filename { font-size: 13px; color: var(--q-text-muted); margin-top: 8px; }.upload-preview  { max-width: 300px; border-radius: var(--q-radius); margin-top: 12px; display: none; }/* Hidden file inputs and initially-hidden buttons */#qr-canvas             { display: none; }#sig-file, #ocr-file, #wm-file { display: none; }#sig-btn, #ocr-btn, #wm-btn    { display: none; }/* ── Camera feed ── */#camera-feed { width: 100%; max-width: 400px; border-radius: var(--q-radius); }/* ── Result cards ── */.q-result-authentic {  background: rgba(52,211,153,.07);  border: 1.5px solid rgba(52,211,153,.3);  border-radius: var(--q-radius);  padding: 24px;}.q-result-not-authentic {  background: rgba(248,113,113,.07);  border: 1.5px solid rgba(248,113,113,.3);  border-radius: var(--q-radius);  padding: 24px;}.q-result-unverifiable {  background: rgba(255,255,255,.03);  border: 1.5px solid var(--q-border);  border-radius: var(--q-radius);  padding: 24px;}.q-result-title { font-size: 18px; font-weight: 600; margin-bottom: 4px; }.q-result-authentic     .q-result-title { color: #34D399; }.q-result-not-authentic .q-result-title { color: #F87171; }.q-result-unverifiable  .q-result-title { color: var(--q-text-muted); }/* ── JS-generated result layout ── */.verifying-card    { text-align: center; padding: 32px; }.verifying-spinner { margin: 0 auto 12px; }.verifying-text    { color: var(--q-text-muted); font-size: 14px; }.result-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }.result-icon {  width: 44px; height: 44px;  border-radius: 50%;  display: flex; align-items: center; justify-content: center;  font-size: 20px; color: #fff; font-weight: 600;  flex-shrink: 0;}.result-icon--authentic     { background: #4ADE80; }.result-icon--not-authentic { background: #991B1B; }.result-icon--unverifiable  { background: #6B7A90; }.result-verified-label { font-size: 13px; color: #065F46; }.result-message { font-size: 14px; color: var(--q-text-muted); margin-top: 4px; }.result-details {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  gap: 12px;  margin-bottom: 16px;}.result-detail-label { font-size: 11px; color: #065F46; font-weight: 500; margin-bottom: 2px; }.result-detail-value { font-size: 14px; }.result-blockchain       { margin-bottom: 12px; }.result-blockchain-label { font-size: 11px; color: #065F46; font-weight: 500; margin-bottom: 4px; }.result-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }.btn-report {  background: none;  border: none;  font-size: 13px;  color: #065F46;  cursor: pointer;  padding: 0;  text-decoration: underline;}/* ── Hash & blockchain badge ── */.q-hash {  font-family: var(--q-mono);  font-size: 12px;  background: rgba(255,255,255,.04);  border: 1px solid var(--q-border);  border-radius: 6px;  padding: 8px 12px;  word-break: break-all;  color: var(--q-accent);}.q-blockchain-badge {  display: inline-flex;  align-items: center;  gap: 6px;  background: rgba(52,211,153,.1);  border: 1px solid rgba(52,211,153,.25);  border-radius: 20px;  padding: 4px 12px;  font-size: 12px;  color: #34D399;  font-weight: 500;}/* ── Spinner ── */.q-spinner {  display: inline-block;  width: 20px; height: 20px;  border: 2px solid var(--q-border);  border-top-color: var(--q-accent);  border-radius: 50%;  animation: spin .7s linear infinite;}@keyframes spin { to { transform: rotate(360deg); } }/* ── Step visibility ── */#step-verify { display: none; }/* ── Step 0: Category grid ── */.category-grid {  display: grid;  grid-template-columns: repeat(4, 1fr);  gap: 16px;  margin-bottom: 32px;}.category-card {  background: var(--q-surface);  border: 1.5px solid rgba(255,255,255,.08);  border-radius: 18px;  padding: 32px 20px 26px;  cursor: pointer;  text-align: center;  transition: all .25s ease;  position: relative;  overflow: hidden;}.category-card::after {  content: '';  position: absolute;  inset: 0;  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(240,192,64,.07) 0%, transparent 70%);  opacity: 0;  transition: opacity .25s;  pointer-events: none;}.category-card:hover {  border-color: rgba(240,192,64,.55);  background: rgba(240,192,64,.03);  box-shadow: 0 10px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(240,192,64,.12);  transform: translateY(-3px);}.category-card:hover::after { opacity: 1; }.category-icon {  width: 64px; height: 64px;  margin: 0 auto 18px;  border-radius: 16px;  display: flex;  align-items: center;  justify-content: center;  transition: all .25s;}.category-icon svg {  width: 30px; height: 30px;}.category-card:hover .category-icon {  box-shadow: 0 0 24px rgba(240,192,64,.2);}/* Per-category icon colour accents */.cat-icon-pharma  { background: rgba( 52,211,153,.12); border: 1px solid rgba( 52,211,153,.22); }.cat-icon-pharma  svg { stroke: #34D399; }.cat-icon-cert    { background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.22); }.cat-icon-cert    svg { stroke: #A78BFA; }.cat-icon-doc     { background: rgba( 96,165,250,.12); border: 1px solid rgba( 96,165,250,.22); }.cat-icon-doc     svg { stroke: #60A5FA; }.cat-icon-money   { background: rgba(240,192, 64,.12); border: 1px solid rgba(240,192, 64,.22); }.cat-icon-money   svg { stroke: #F0C040; }.category-card:hover .cat-icon-pharma { background: rgba( 52,211,153,.2); border-color: rgba( 52,211,153,.4); }.category-card:hover .cat-icon-cert   { background: rgba(167,139,250,.2); border-color: rgba(167,139,250,.4); }.category-card:hover .cat-icon-doc    { background: rgba( 96,165,250,.2); border-color: rgba( 96,165,250,.4); }.category-card:hover .cat-icon-money  { background: rgba(240,192, 64,.2); border-color: rgba(240,192, 64,.4); }.category-name {  font-size: 15px;  font-weight: 700;  color: var(--q-text);  margin-bottom: 6px;  letter-spacing: -.2px;}.category-desc {  font-size: 12px;  color: var(--q-text-muted);  line-height: 1.45;  margin-bottom: 18px;}.category-cta {  font-size: 12px;  color: var(--q-accent);  font-weight: 600;  opacity: 0;  transform: translateY(4px);  transition: opacity .2s, transform .2s;}.category-card:hover .category-cta { opacity: 1; transform: translateY(0); }/* ── Step 2: Selected item banner ── */.selected-item-banner {  display: flex;  align-items: center;  justify-content: space-between;  gap: 16px;  background: rgba(240,192,64,.07);  border: 1px solid rgba(240,192,64,.22);  border-radius: var(--q-radius);  padding: 16px 20px;  margin-bottom: 24px;  box-shadow: 0 0 0 1px rgba(240,192,64,.08), inset 0 1px 0 rgba(255,255,255,.04);}.selected-item-name { font-weight: 600; font-size: 15px; margin-bottom: 3px; }.selected-item-meta { font-size: 13px; color: var(--q-text-muted); }/* ── Responsive ── */@media (max-width: 700px) {  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }}@media (max-width: 600px) {  .q-method-grid { grid-template-columns: repeat(3, 1fr); }  .selected-item-banner { flex-direction: column; align-items: flex-start; }  .category-grid { grid-template-columns: repeat(2, 1fr); }  .category-card { padding: 24px 14px 20px; }}@media (max-width: 400px) {  .q-method-grid { grid-template-columns: repeat(2, 1fr); }  .category-grid { grid-template-columns: 1fr; }}