:root{
--primary:#334155;--primary-dark:#1E293B;--primary-light:#E2E8F0;
--bg:#F7F7F8;--surface:#fff;--border:#D7D9DE;--text:#17191C;
--secondary:#5F6670;--muted:#9A9FA7;--success:#237A4B;
--warning:#A96800;--danger:#C23932;--pending:#6B7280;
}

/* Sprint F-03 production states layered on the approved engineering palette. */
body { min-height: 100vh; }
.state-page { min-height: 75vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.state-page .primary-btn { align-self: flex-start; }
.primary-btn { border: 0; border-radius: 12px; padding: 12px 18px; background: var(--primary, #1f4b7a); color: #fff; font-weight: 700; }
.text-btn { border: 0; background: transparent; padding: 8px 0; color: var(--primary, #1f4b7a); text-align: left; }
.form-card { display: grid; gap: 14px; margin-top: 18px; }
.form-card label { display: grid; gap: 6px; font-weight: 700; }
.form-card input, .chips select { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: #fff; color: var(--text); }
.skeleton, .empty-state, .error-text, .image-placeholder, .read-only-note { padding: 18px; border-radius: 12px; background: #f3f4f6; margin-top: 12px; }
.error-text { color: #991b1b; background: #fef2f2; }
.item-card { display: flex; gap: 10px; align-items: center; }
.item-copy { border: 0; background: transparent; color: inherit; text-align: left; display: grid; gap: 4px; flex: 1; }
.item-copy strong { font-size: 1rem; }
.badge.warning { background: #fff7ed; color: #9a3412; }
.detail-image, .image-placeholder { width: 100%; height: 240px; object-fit: contain; border: 1px solid var(--border); background: #f3f4f6; }
.image-placeholder { display: grid; place-items: center; }
.detail-grid { display: grid; grid-template-columns: minmax(90px, .4fr) 1fr; gap: 10px; margin: 20px 0; }
.detail-grid dt { color: var(--muted); }
.detail-grid dd { margin: 0; font-weight: 600; }
.bottom-nav button:disabled { opacity: .45; cursor: not-allowed; }
*{box-sizing:border-box}body{margin:0;background:#e5e7eb;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--text)}
.app-shell{max-width:480px;min-height:100vh;margin:auto;background:var(--bg);position:relative;padding-bottom:82px;box-shadow:0 0 40px rgba(15,23,42,.14)}
.page{display:none;padding:18px 16px 24px}.page.active{display:block}.center{min-height:calc(100vh - 82px);display:none;align-items:center}.center.active{display:flex}
h1{font-size:24px;line-height:1.15;margin:4px 0;font-weight:700}h2{font-size:18px;margin:0 0 12px}.eyebrow{font-size:12px;color:var(--primary);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:0}.muted{color:var(--secondary);margin:4px 0 0}.page-header,.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.topbar{justify-content:flex-start}.topbar button,.icon-btn{border:1px solid var(--border);background:var(--surface);border-radius:14px;width:44px;height:44px;font-size:18px}.search-box{height:52px;border:1px solid var(--border);border-radius:16px;background:#fff;display:flex;align-items:center;gap:8px;padding:0 14px;box-shadow:0 4px 12px rgba(15,23,42,.06)}.search-box input{border:0;outline:0;width:100%;font-size:15px;background:transparent}.section{margin-top:22px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chips button{height:34px;border:0;border-radius:999px;background:#EFF6FF;color:#1D4ED8;padding:0 14px;font-weight:700}.chips.small{margin:12px 0 16px}.list.compact{display:grid;gap:10px}.list button{height:44px;text-align:left;border:1px solid var(--border);background:#fff;border-radius:14px;padding:0 14px;color:var(--text)}.cards{display:grid;gap:12px}.item-card,.request-card,.form-card,.success-card,.mini-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 4px 12px rgba(15,23,42,.06)}.item-card{display:grid;grid-template-columns:82px 1fr;gap:14px;align-items:center}.thumb{width:82px;height:82px;border-radius:14px;background:linear-gradient(135deg,#DBEAFE,#F1F5F9);display:flex;align-items:center;justify-content:center;font-size:32px}.item-card h3{margin:0 0 4px;font-size:16px}.item-card p{margin:3px 0;color:var(--secondary);font-size:14px}.stock{font-weight:700;color:var(--success)}.low{color:var(--warning)}.out{color:var(--danger)}button{cursor:pointer}.primary,.secondary,.danger{width:100%;height:48px;border-radius:14px;font-size:15px;font-weight:700;margin-top:12px}.primary{background:var(--primary);border:0;color:#fff}.primary:active{background:var(--primary-dark)}.secondary{background:#fff;border:1px solid #CBD5E1;color:var(--text)}.danger{background:var(--danger);border:0;color:#fff}.detail-image{height:210px;border-radius:16px;background:linear-gradient(135deg,#DBEAFE,#F8FAFC);display:flex;align-items:center;justify-content:center;font-size:72px;margin-bottom:16px}.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.meta{background:#F8FAFC;border:1px solid var(--border);border-radius:14px;padding:12px}.meta span{display:block;color:var(--secondary);font-size:12px}.meta strong{font-size:16px}.qty-row{display:flex;align-items:center;justify-content:center;gap:18px;margin:18px 0}.qty-row button{width:44px;height:44px;border-radius:14px;border:1px solid var(--border);background:#fff;font-size:18px}.cart-line{display:flex;justify-content:space-between;gap:8px;align-items:center}.cart-controls{display:flex;align-items:center;gap:8px}.cart-controls button{width:36px;height:36px;border:1px solid var(--border);background:#fff;border-radius:12px}.form-card{display:grid;gap:14px}label{display:grid;gap:6px;font-weight:700;font-size:14px}input,select,textarea{width:100%;border:1px solid #CBD5E1;border-radius:14px;padding:12px 14px;font-size:15px;background:#fff}textarea{min-height:96px;resize:vertical}.summary,.timeline{background:#F8FAFC;border:1px solid var(--border);border-radius:14px;padding:14px;color:var(--secondary)}.success-card{text-align:center;width:100%}.success-icon{font-size:48px}.badge{display:inline-flex;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;margin:6px 0}.badge.pending{background:#F1F5F9;color:var(--pending)}.badge.success{background:#DCFCE7;color:var(--success)}.badge.info{background:#DBEAFE;color:var(--primary)}.tabs{display:flex;gap:8px;margin-bottom:14px}.tabs button{flex:1;height:38px;border-radius:999px;border:1px solid var(--border);background:#fff}.tabs .active{background:var(--primary);color:#fff;border-color:var(--primary)}.check{display:flex;grid-template-columns:auto 1fr;align-items:center;gap:10px;background:#F8FAFC;padding:12px;border-radius:14px}.check input{width:auto}.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);max-width:480px;width:100%;height:70px;background:#fff;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(5,1fr)}.bottom-nav button{border:0;background:#fff;font-size:20px;color:var(--secondary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.bottom-nav span{font-size:11px}.empty{text-align:center;color:var(--secondary);padding:28px 10px;background:#fff;border:1px dashed var(--border);border-radius:16px}

html{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI Variable","Segoe UI","Noto Sans Thai","Leelawadee UI",Tahoma,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body,button,input,select,textarea{font-family:inherit}
.chips button{background:#ECEFF3;color:#334155}
.thumb,.detail-image{background:#F3F4F6}
.item-card,.request-card,.form-card,.success-card,.mini-card,.search-box{box-shadow:0 2px 7px rgba(23,25,28,.05)}
.bottom-nav{background:rgba(255,255,255,.88);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.bottom-nav button{background:transparent}

/* Engineering Color Accent v1.2 */
:root{
  --accent-blue:#3B82F6;
  --accent-cyan:#0891B2;
  --accent-green:#16A34A;
  --accent-amber:#D97706;
  --accent-violet:#7C3AED;
  --accent-red:#DC2626;
  --accent-slate:#475569;
}
.page-header{
  padding:16px;
  margin:-2px -2px 18px;
  border-radius:18px;
  background:linear-gradient(135deg,#EEF3F8 0%,#F8FAFC 72%);
  border:1px solid #DCE3EA;
}
.eyebrow{color:var(--accent-blue)}
.search-box{border-color:#CBD5E1}
.search-box:focus-within{
  border-color:var(--accent-blue);
  box-shadow:0 0 0 3px rgba(59,130,246,.12);
}
.chips button:nth-child(1){background:#E8F0FE;color:#1D4ED8}
.chips button:nth-child(2){background:#E6F7FB;color:#0E7490}
.chips button:nth-child(3){background:#F1EAFE;color:#6D28D9}
.chips button:nth-child(4){background:#FFF2E0;color:#B45309}
.chips button:nth-child(5){background:#E9EEF5;color:#334155}
.chips button:nth-child(6){background:#E8F7EF;color:#15803D}
.item-card{position:relative;overflow:hidden}
.item-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--category-color,var(--accent-slate));
}
.item-card[data-category="Bearing"]{--category-color:var(--accent-blue)}
.item-card[data-category="Sensor"]{--category-color:var(--accent-cyan)}
.item-card[data-category="Relay"]{--category-color:var(--accent-violet)}
.item-card[data-category="Motor"]{--category-color:var(--accent-amber)}
.item-card[data-category="PLC"]{--category-color:var(--accent-slate)}
.item-card[data-category="Cable"]{--category-color:var(--accent-green)}
.item-card[data-category="Fuse"]{--category-color:var(--accent-red)}
.item-card[data-category="Bearing"] .thumb{color:var(--accent-blue);background:#EAF2FF!important}
.item-card[data-category="Sensor"] .thumb{color:var(--accent-cyan);background:#E7F7FA!important}
.item-card[data-category="Relay"] .thumb{color:var(--accent-violet);background:#F1EBFF!important}
.item-card[data-category="Motor"] .thumb{color:var(--accent-amber);background:#FFF3E5!important}
.item-card[data-category="PLC"] .thumb{color:var(--accent-slate);background:#EDF1F5!important}
.item-card[data-category="Cable"] .thumb{color:var(--accent-green);background:#EAF8EF!important}
.item-card[data-category="Fuse"] .thumb{color:var(--accent-red);background:#FDECEC!important}
.meta:nth-child(1){border-left:4px solid var(--success)}
.meta:nth-child(2){border-left:4px solid var(--accent-blue)}
.primary{
  background:linear-gradient(180deg,#3B82F6,#2563EB);
  box-shadow:0 6px 14px rgba(37,99,235,.18);
}
.primary:active{background:linear-gradient(180deg,#2563EB,#1D4ED8)}
.badge.pending{background:#FFF4DB;color:#A15C00}
.badge.success{background:#E8F7EF;color:#15803D}
.badge.info{background:#E8F0FE;color:#1D4ED8}
.tabs .active{background:#334155;color:#fff}
.bottom-nav button{color:#6B7280}
.bottom-nav button:hover{color:#334155}