:root { color-scheme: dark; --ink:#f9f7ff; --muted:#b7adca; --purple:#a24de1; --purple-dark:#6e2ea7; --lavender:rgba(196,104,242,.14); --surface:rgba(31,12,59,.82); --surface-2:#2b1047; --line:rgba(216,122,255,.19); --success:#6ef2b2; --danger:#ff6f9d; --warning:#ffd166; --shadow:0 18px 48px rgba(0,0,0,.24); }
body { color:var(--ink); background:radial-gradient(circle at 92% 0,rgba(162,77,225,.4),transparent 25rem),radial-gradient(circle at -8% 42%,rgba(110,46,167,.25),transparent 28rem),linear-gradient(180deg,#16062b 0%,#09031d 68%); }
body::before { position:fixed; inset:-4vh -3vw; z-index:0; overflow:hidden; color:rgba(255,255,255,.035); background:none; content:"?      ?          !\A        ?          ?\A   !           ?       ?\A         ?    !"; white-space:pre-wrap; font-family:Furore,"Russo One",sans-serif; font-size:clamp(70px,15vw,150px); line-height:1.5; letter-spacing:.08em; transform:rotate(-7deg); mask-image:linear-gradient(to bottom,black,transparent 88%); }
.problem-shell { position:relative; z-index:1; width:min(100%,940px); margin:0 auto; padding:max(18px,env(safe-area-inset-top)) 16px 34px; }
.problem-header { display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; }
.problem-title h1 { margin:0; font-family:Furore,"Russo One",sans-serif; font-size:clamp(30px,8vw,48px); font-weight:400; line-height:1; letter-spacing:.025em; text-shadow:0 0 30px rgba(216,122,255,.48); }
.problem-title .eyebrow,.problem-intro .eyebrow { color:#d7a4f2; }
.back-link { display:inline-block; margin-bottom:8px; color:#d7a4f2; font-size:9px; font-weight:750; text-decoration:none; }
.primary-button { justify-self: end; min-height: 38px; padding: 0 13px; border: 0; border-radius: 13px; color: white; background: linear-gradient(145deg, var(--purple), var(--purple-dark)); font-size: 9px; font-weight: 800; cursor: pointer; }
.primary-button.wide { width: 100%; min-height: 46px; margin-top: 8px; font-size: 11px; }
.header-actions { display: flex; justify-content: flex-end; gap: 6px; }
.secondary-button { min-height:38px; padding:0 10px; border:1px solid var(--line); border-radius:13px; color:#e0b5f5; background:rgba(31,12,59,.78); font-size:8px; font-weight:800; cursor:pointer; backdrop-filter:blur(14px); }
.hidden { display: none !important; }
.problem-intro { margin:22px 0 18px; }
.problem-intro > p:last-child { max-width: 620px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.problem-tabs { display:flex; gap:5px; padding:5px; overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:rgba(31,12,59,.76); box-shadow:var(--shadow); backdrop-filter:blur(16px); }
.problem-tabs button { min-height: 37px; padding: 0 11px; border: 0; border-radius: 11px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 750; white-space: nowrap; cursor: pointer; }
.problem-tabs button.active { color: white; background: var(--purple); }
.problem-tabs b { display: inline-grid; min-width: 18px; height: 18px; margin-left: 3px; place-items: center; border-radius: 999px; background: rgba(255,255,255,.15); }
.problem-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 12px 0; }
.problem-filters select, .problem-dialog input, .problem-dialog select, .problem-dialog textarea { width:100%; border:1px solid var(--line); border-radius:13px; color:var(--ink); outline:none; background:rgba(43,16,71,.88); }
.problem-filters select { min-height: 41px; padding: 0 10px; font-size: 9px; }
.problem-list { display: grid; gap: 9px; }
.problem-card { width: 100%; padding: 15px; border: 1px solid var(--line); border-radius: 19px; color: var(--ink); text-align: left; background: var(--surface); box-shadow: var(--shadow); cursor: pointer; }
.problem-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.problem-card h3 { margin: 0; font-size: 13px; }
.problem-card p { margin: 7px 0 0; color: var(--muted); font-size: 9px; }
.type-badge { flex: none; padding: 4px 7px; border-radius: 999px; color: var(--purple); background: var(--lavender); font-size: 7px; font-weight: 750; }
.photo-mark { margin-left: 4px; }
.problem-dialog { width:min(calc(100% - 24px),570px); max-height:calc(100vh - 30px); padding:18px; overflow:auto; border:1px solid var(--line); border-radius:24px; color:var(--ink); background:#16072c; box-shadow:0 25px 80px rgba(0,0,0,.5); }
.problem-dialog::backdrop { background:rgba(5,2,18,.76); backdrop-filter:blur(6px); }
.small-dialog { width: min(calc(100% - 24px), 440px); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dialog-head h2 { margin: 4px 0 0; font-size: 20px; }
.close-dialog { width: 34px; height: 34px; border: 0; border-radius: 12px; color: var(--muted); background: var(--lavender); font-size: 20px; cursor: pointer; }
.problem-dialog label { display: block; margin-bottom: 11px; }
.problem-dialog label > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 8px; font-weight: 700; }
.problem-dialog input, .problem-dialog select { min-height: 44px; padding: 0 11px; font-size: 10px; }
.problem-dialog textarea { padding: 11px; resize: vertical; font-size: 10px; line-height: 1.5; }
.photo-field input { padding: 10px; }
.repair-fields { margin:3px 0 13px; padding:13px; border:1px solid var(--line); border-radius:17px; background:rgba(162,77,225,.09); }
.repair-fields fieldset { min-width: 0; margin: 0 0 11px; padding: 0; border: 0; }
.repair-fields legend, .generated-title span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 8px; font-weight: 700; }
.location-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.location-option { margin: 0 !important; }
.location-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.location-option span { display:grid !important; min-height:38px; margin:0 !important; padding:7px; place-items:center; border:1px solid var(--line); border-radius:11px; color:var(--ink) !important; text-align:center; background:var(--surface-2); font-size:8px !important; cursor:pointer; }
.location-option input:checked + span { border-color: var(--purple); color: var(--purple) !important; background: var(--lavender); box-shadow: inset 0 0 0 1px var(--purple); }
.generated-title { padding:10px; border-radius:12px; background:var(--surface-2); }
.generated-title strong { display: block; font-size: 9px; line-height: 1.45; }
.repair-identity { display: grid; gap: 4px; padding: 14px; border-radius: 16px; color: white; background: linear-gradient(145deg, var(--purple), var(--purple-dark)); }
.repair-identity span { font-size: 7px; font-weight: 700; opacity: .72; }
.repair-identity strong { font-size: 13px; }
.repair-identity small { font-size: 8px; opacity: .86; }
.repair-history { margin-top: 14px; }
.history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; color: var(--muted); font-size: 8px; font-weight: 700; }
.history-head b { display: grid; min-width: 22px; height: 22px; place-items: center; border-radius: 999px; color: var(--purple); background: var(--lavender); }
.history-entry { width:100%; margin-bottom:6px; padding:11px; border:1px solid var(--line); border-radius:13px; color:var(--ink); text-align:left; background:var(--surface-2); cursor:pointer; }
.history-entry > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.history-entry strong { font-size: 9px; }
.history-entry span, .history-entry small { color: var(--muted); font-size: 7px; line-height: 1.55; }
.history-entry p { margin: 5px 0; font-size: 9px; }
.catalog-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.catalog-section h3 { margin: 0 0 9px; font-size: 12px; }
.catalog-section > select { width:100%; min-height:42px; margin-bottom:7px; padding:0 10px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:var(--surface-2); font-size:9px; }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-bottom: 8px; }
.inline-form input { min-width: 0; }
.inline-form button { padding: 0 11px; border: 0; border-radius: 11px; color: white; background: var(--purple); font-size: 8px; font-weight: 750; }
.stack-form > select { width:100%; min-height:42px; margin-bottom:6px; padding:0 10px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:var(--surface-2); font-size:9px; }
.catalog-list { display: grid; gap: 5px; max-height: 250px; overflow: auto; }
.catalog-entry { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:11px; color:var(--ink); text-align:left; background:var(--surface-2); cursor:pointer; }
.catalog-entry span { font-size: 8px; }
.catalog-entry b { color: var(--success); font-size: 7px; }
.catalog-entry.inactive { opacity: .58; }
.catalog-entry.inactive b { color: var(--muted); }
.catalog-group { display: grid; gap: 4px; }
.catalog-detail { width:calc(100% - 14px); margin-left:14px; padding-block:7px; background:rgba(43,16,71,.68); }
.migration-section p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.migration-list { margin-top: 8px; }
.migration-entry span { line-height: 1.45; }
.migration-entry span b { color: var(--muted); font-size: 7px; }
.migration-entry strong { flex: none; color: var(--purple); font-size: 7px; }
.mapping-description { margin:-5px 0 14px; padding:10px; border-radius:12px; color:var(--muted); background:var(--surface-2); font-size:8px; line-height:1.5; }
#mappingForm fieldset { min-width: 0; margin: 0 0 11px; padding: 0; border: 0; }
#mappingForm legend { margin-bottom: 7px; color: var(--muted); font-size: 8px; font-weight: 700; }
.detail-description, .detail-feedback { margin-top:12px; padding:13px; border-radius:15px; background:var(--surface-2); }
.detail-description span, .detail-feedback span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 8px; font-weight: 700; }
.detail-description p, .detail-feedback p { margin: 0; font-size: 10px; line-height: 1.55; white-space: pre-wrap; }
.detail-photo { display:block; width:100%; max-height:420px; margin-top:12px; object-fit:contain; border-radius:16px; background:#210c39; }
.detail-actions { display: grid; gap: 7px; margin-top: 14px; }
.action-button { min-height: 43px; border: 0; border-radius: 13px; color: white; background: var(--purple); font-size: 10px; font-weight: 750; cursor: pointer; }
.action-button.return { color: var(--danger); background: rgba(214,75,113,.09); }
.action-button.confirm { background: var(--success); }
.problem-toast { position:fixed; left:50%; bottom:22px; z-index:10; max-width:calc(100% - 32px); padding:11px 14px; border-radius:13px; color:white; background:#2b1047; font-size:10px; opacity:0; pointer-events:none; transform:translate(-50%,10px); transition:.2s; }
.problem-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.problem-toast.error { background: var(--danger); }

@media (max-width: 600px) {
  .problem-header { grid-template-columns:1fr; }
  .header-actions { justify-content:flex-start; }
  .problem-title h1 { font-size:clamp(28px,10vw,40px); }
}