:root {
  --bg: #f3f3f5;
  --panel: rgba(255,255,255,.82);
  --card: #fbfbfc;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --border: rgba(60,60,67,.14);
  --border-strong: rgba(60,60,67,.22);
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --danger: #d70015;
  --shadow: 0 12px 35px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { margin:0; min-width:320px; background: linear-gradient(180deg,#f7f7f8 0,#f1f1f3 460px,#f3f3f5 100%); color:var(--text); }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid rgba(0,113,227,.24); outline-offset:2px; }
[hidden] { display:none !important; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.app-shell { width:min(1180px, calc(100% - 40px)); margin:0 auto; padding:46px 0 38px; }
.topbar { display:flex; justify-content:space-between; gap:28px; align-items:flex-end; margin-bottom:30px; }
.eyebrow { color:var(--muted); font-size:13px; font-weight:650; letter-spacing:.02em; margin-bottom:5px; }
h1 { margin:0; font-size:clamp(38px,6vw,64px); line-height:.95; letter-spacing:-.045em; font-weight:730; }
.summary { margin:12px 0 0; color:var(--muted); font-size:15px; }
.header-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.button { min-height:44px; border-radius:999px; padding:0 18px; border:1px solid var(--border); background:#fff; color:var(--text); font-weight:620; transition:.16s ease; }
.button:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.07); }
.button.primary { color:#fff; background:var(--blue); border-color:var(--blue); }
.button.primary:hover { background:var(--blue-hover); }
.button.glass { background:rgba(255,255,255,.72); backdrop-filter: blur(20px); }
.button.secondary { background:#efeff1; }
.button.danger-text { color:var(--danger); background:transparent; border-color:transparent; }
.button.full { width:100%; margin-top:14px; }
.controls { padding:14px; background:rgba(255,255,255,.66); backdrop-filter:blur(24px); border:1px solid rgba(255,255,255,.7); box-shadow:0 1px 0 rgba(0,0,0,.03); border-radius:20px; display:flex; align-items:center; gap:12px; justify-content:space-between; }
.search-wrap { flex:1 1 360px; min-width:220px; height:46px; border:1px solid var(--border); background:#fff; border-radius:14px; display:flex; align-items:center; gap:10px; padding:0 14px; color:#8a8a8f; }
.search-wrap:focus-within { border-color:rgba(0,113,227,.35); box-shadow:0 0 0 4px rgba(0,113,227,.08); }
.search-wrap input { width:100%; border:0; outline:0; background:transparent; font-size:16px; color:var(--text); min-width:0; }
.search-wrap input::placeholder { color:#99999e; }
.filter-row { display:flex; gap:7px; overflow-x:auto; padding:1px; scrollbar-width:none; }
.filter-row::-webkit-scrollbar { display:none; }
.chip { border:0; background:transparent; min-height:38px; padding:0 13px; border-radius:10px; color:var(--muted); font-weight:600; white-space:nowrap; }
.chip:hover { background:#ececef; color:var(--text); }
.chip.active { background:#fff; color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.08); }
.results-line { min-height:45px; display:flex; align-items:center; justify-content:space-between; padding:0 4px; color:var(--muted); font-size:13px; }
.admin-status { color:#267c36; font-weight:650; }
.cord-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.cord-card { min-width:0; background:rgba(255,255,255,.87); border:1px solid rgba(255,255,255,.82); border-radius:24px; overflow:hidden; box-shadow:0 1px 0 rgba(0,0,0,.03); transition:transform .18s ease, box-shadow .18s ease; }
@media (hover:hover) and (pointer:fine) { .cord-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); } }
.preview-wrap { position:relative; aspect-ratio:640/220; margin:12px; overflow:hidden; border-radius:17px; background:linear-gradient(180deg,#f8f9fa 0%,#f0f2f4 100%); border:1px solid rgba(60,60,67,.06); }
.preview-wrap::after { content:""; position:absolute; inset:auto 0 0 0; height:48px; background:linear-gradient(180deg, rgba(240,242,244,0) 0%, rgba(240,242,244,.78) 48%, rgba(240,242,244,.98) 100%); pointer-events:none; z-index:1; }
.cord-visual { position:absolute; inset:0; overflow:hidden; }
.cable-bridge { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.cable-shadow { fill:none; stroke:#b8bdc4; stroke-width:10; stroke-linecap:round; opacity:.38; }
.cable-core { fill:none; stroke:#d9dde2; stroke-width:6; stroke-linecap:round; }
.connector-end { position:absolute; top:-12%; width:39%; height:92%; z-index:2; display:flex; align-items:center; justify-content:center; overflow:visible; }
.connector-end-left { left:0.5%; }
.connector-end-right { right:0.5%; }
.connector-render { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 8px rgba(0,0,0,.10)); pointer-events:none; user-select:none; }
.connector-render-left { transform:scale(1.02); transform-origin:center; }
.connector-render-right { transform:scaleX(-1) scale(1.02); transform-origin:center; }
.connector-missing { width:112px; padding:12px; border-radius:14px; background:#e5e7ea; color:#74777c; font-size:11px; font-weight:650; text-align:center; }
.preview-label { position:absolute; bottom:8px; z-index:3; max-width:42%; padding:5px 9px; border-radius:999px; background:rgba(255,255,255,.86); backdrop-filter:blur(10px); border:1px solid rgba(60,60,67,.10); color:#2f3338; font-size:10px; font-weight:700; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 4px 14px rgba(0,0,0,.05); }
.preview-label-left { left:10px; text-align:left; }
.preview-label-right { right:10px; text-align:right; }
.qty-badge { position:absolute; right:10px; top:10px; height:29px; min-width:29px; padding:0 8px; border-radius:999px; background:rgba(29,29,31,.82); color:white; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; backdrop-filter:blur(12px); }
.card-body { padding:3px 18px 17px; }
.card-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.card-title { margin:0; font-size:18px; line-height:1.2; letter-spacing:-.02em; }
.length-pill { flex:0 0 auto; font-size:11px; font-weight:700; color:#66686d; background:#eeeeF0; text-transform:uppercase; letter-spacing:.045em; padding:5px 8px; border-radius:999px; }
.connector-line { margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.4; }
.use-examples { margin:9px 0 0; color:#7a7c82; font-size:12px; line-height:1.42; }
.use-examples span { color:#55585e; font-weight:700; }
.card-notes { margin:10px 0 0; color:#8a8a8f; font-size:12px; line-height:1.45; }
.admin-controls { display:flex; gap:8px; margin-top:14px; padding-top:13px; border-top:1px solid var(--border); }
.qty-stepper { display:grid; grid-template-columns:38px minmax(36px,auto) 38px; align-items:center; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#f7f7f8; }
.qty-stepper button { height:36px; border:0; background:transparent; font-size:20px; color:#46474b; }
.qty-stepper button:hover { background:#ececef; }
.qty-stepper span { text-align:center; font-size:13px; font-weight:700; }
.remove-one { margin-left:auto; border:0; background:transparent; color:var(--danger); padding:0 6px; font-weight:600; }
.empty-state { text-align:center; padding:70px 20px; color:var(--muted); }
.empty-state h2 { margin:10px 0 5px; color:var(--text); font-size:20px; }
.empty-state p { margin:0; }
.empty-icon { width:54px; height:54px; margin:auto; border-radius:17px; display:grid; place-items:center; font-size:30px; background:#e6e6e9; color:#808085; }
footer { display:flex; justify-content:space-between; gap:16px; margin-top:32px; padding:18px 4px 0; border-top:1px solid var(--border); color:#8a8a8f; font-size:12px; }
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.22); backdrop-filter:blur(6px); z-index:20; }
.dialog { width:min(440px, calc(100% - 28px)); border:1px solid rgba(255,255,255,.75); border-radius:24px; padding:0; background:rgba(252,252,253,.96); box-shadow:0 28px 85px rgba(0,0,0,.24); z-index:21; color:var(--text); }
.dialog.wide { width:min(650px, calc(100% - 28px)); }
.dialog::backdrop { background:transparent; }
.dialog form { padding:24px; }
.dialog-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.dialog-kicker { color:var(--muted); font-size:12px; font-weight:650; margin-bottom:4px; }
.dialog h2 { margin:0; font-size:24px; letter-spacing:-.025em; }
.dialog-copy { margin:10px 0 18px; color:var(--muted); font-size:14px; line-height:1.5; }
.icon-btn { width:36px; height:36px; border-radius:50%; border:0; background:#e9e9ec; color:#55565a; font-size:24px; line-height:1; }
.field { display:block; margin-top:14px; }
.field span { display:block; margin-bottom:7px; color:#55565a; font-size:13px; font-weight:600; }
.field em { font-style:normal; font-weight:400; color:#9a9a9f; }
.field input,.field select,.field textarea { width:100%; border:1px solid var(--border-strong); background:#fff; color:var(--text); border-radius:12px; padding:11px 12px; min-height:44px; font-size:16px; resize:vertical; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.full-span { grid-column:1/-1; }
.form-error { color:var(--danger); font-size:13px; min-height:18px; margin-top:9px; }
.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:40; max-width:min(520px,calc(100% - 30px)); background:rgba(32,32,35,.92); color:#fff; padding:11px 15px; border-radius:999px; font-size:13px; font-weight:600; box-shadow:0 10px 28px rgba(0,0,0,.18); backdrop-filter:blur(14px); }
@media (max-width:900px) { .cord-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .controls { align-items:stretch; flex-direction:column; } .search-wrap { flex-basis:auto; } }
@media (max-width:620px) {
  .app-shell { width:min(100% - 24px,1180px); padding-top:26px; }
  .topbar { align-items:flex-start; margin-bottom:22px; }
  .header-actions { padding-top:2px; }
  .button { padding:0 14px; }
  .cord-grid { grid-template-columns:1fr; }
  .controls { padding:10px; border-radius:17px; }
  .preview-wrap { margin:10px; }
  footer { flex-direction:column; }
  .form-grid { grid-template-columns:1fr; }
  .full-span { grid-column:auto; }
}
@media (max-width:430px) {
  .topbar { display:block; }
  .header-actions { justify-content:flex-start; margin-top:18px; }
  .header-actions .button { flex:1; }
  h1 { font-size:48px; }
}