#page-product-detail { --detail-line: rgba(220,210,181,.16); --detail-muted: #aaa9a4; max-width:1600px; width:100%; margin:0 auto; }
#page-product-detail [hidden] { display: none !important; }
.detail-header,.detail-result-header { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.detail-header p,.detail-muted,.detail-upload span,.detail-upload small { color:var(--detail-muted); }
.detail-workspace { display:grid; grid-template-columns:minmax(0,1fr); gap:32px; align-items:start; }
.detail-input-panel { min-width:0; }
.detail-workspace fieldset { border:0; padding:0; margin:0; min-width:0; }
.detail-workspace label:not(.detail-upload) { display:block; margin:18px 0 8px; font-size:14px; font-weight:600; }
.detail-workspace textarea,.detail-workspace select,.detail-card input,.detail-link-row input { width:100%; box-sizing:border-box; border:1px solid var(--detail-line); background:rgba(0,0,0,.22); color:inherit; border-radius:9px; padding:12px; font:inherit; line-height:1.5; }
.detail-link-row { display:flex; gap:12px; flex-wrap:wrap; }
.detail-link-row input { flex:1 1 260px; min-width:0; }
.detail-link-row button { flex-shrink:0; }
.detail-workspace textarea { resize:vertical; }
.detail-workspace :is(textarea,select,input):focus-visible { outline:2px solid var(--accent,#c7ad63); outline-offset:2px; }
.detail-workspace :disabled { opacity:.65; }
.detail-two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.detail-upload { min-height:280px; padding:20px; border:1px dashed rgba(193,165,221,.3); border-radius:14px; background:rgba(0,0,0,.16); transition:border-color .15s,background .15s; }
.detail-upload.drag-over { border-color:#b99ad7; background:rgba(170,130,210,.1); }
.detail-upload-header { display:flex; justify-content:space-between; gap:16px; align-items:center; }
.detail-upload-header>div { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.detail-upload-header span { font-size:13px; }
.detail-add { border:0; border-radius:8px; padding:10px 14px; color:#d1b6e6; background:rgba(175,134,208,.16); font:inherit; font-size:13px; cursor:pointer; }
.detail-upload-empty { display:flex; min-height:220px; align-items:center; justify-content:center; flex-direction:column; gap:16px; text-align:center; }
.detail-upload-empty p { margin:0; color:var(--detail-muted); font-size:14px; }
.detail-upload-icon { display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(193,165,221,.3); border-radius:50%; color:#bb9ccc; }
.detail-upload-icon svg { width:22px; height:22px; }
.detail-upload-hint { color:var(--detail-muted); font-size:13px; line-height:1.8; margin:10px 0 22px; }
.detail-sources { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.detail-upload.has-files .detail-sources { margin-top:20px; }
.detail-source { position:relative; min-width:0; border:1px solid var(--detail-line); border-radius:10px; overflow:hidden; }
.detail-source img { display:block; width:100%; height:200px; object-fit:contain; background:rgba(0,0,0,.2); }
.detail-source span { display:block; padding:10px 56px 10px 10px; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.detail-source button { position:absolute; right:5px; bottom:5px; color:#d7c2e7; background:none; border:0; cursor:pointer; font-size:12px; padding:6px; }
.detail-start { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-top:24px; }
.detail-price>span,.detail-price small { display:block; font-size:12px; color:var(--detail-muted); }
.detail-price>div { display:flex; gap:24px; flex-wrap:wrap; margin:8px 0; }
.detail-price strong { font-size:18px; color:var(--accent,#c7ad63); }
#detail-prepare { min-width:200px; padding:14px 24px; }
.detail-history { margin-top:0; border-top:1px solid var(--detail-line); padding-top:18px; }
.detail-history summary,.detail-missing summary,.detail-card summary { cursor:pointer; padding:8px 0; }
.detail-history-row { display:flex; align-items:center; gap:20px; border-bottom:1px solid var(--detail-line); }
.detail-history-item { display:flex; flex:1; min-width:0; flex-direction:column; gap:5px; text-align:left; color:inherit; background:none; border:0; padding:16px 0; cursor:pointer; }
.detail-history-actions { display:flex; flex-shrink:0; gap:10px; }
.detail-history-actions .btn { white-space:nowrap; }
.detail-history-delete { color:#edaca2; }
.detail-history-actions :disabled { cursor:not-allowed; }
.detail-history-item strong { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.detail-history-item span { color:var(--detail-muted); font-size:12px; }
.detail-empty { padding:32px 24px; text-align:center; border:1px solid var(--detail-line); border-radius:14px; color:var(--detail-muted); }
.detail-empty svg { width:40px; height:40px; margin-bottom:16px; }
.detail-empty h2 { color:var(--text-primary,#eee); font-size:22px; }
.detail-empty p { margin-top:12px; line-height:1.8; }
.detail-result-header h2 { margin:0 0 8px; font-size:21px; }
.detail-status-heading { display:flex; align-items:baseline; gap:10px; }
.detail-status-spinner { width:16px; height:16px; flex:0 0 16px; border:2px solid rgba(220,179,70,.2); border-top-color:#dcb346; border-right-color:#dcb346; border-radius:50%; animation:detail-status-spin .9s linear infinite; }
.detail-planning-progress { height:5px; margin:20px 0; overflow:hidden; border-radius:999px; background:rgba(220,179,70,.12); }
.detail-planning-progress>span { display:block; width:32%; height:100%; border-radius:inherit; background:linear-gradient(90deg,rgba(220,179,70,.25),#dcb346); animation:detail-planning-slide 1.8s ease-in-out infinite; }
@keyframes detail-status-spin { to { transform:rotate(360deg); } }
@keyframes detail-planning-slide { from { transform:translateX(-100%); } to { transform:translateX(350%); } }
@media(prefers-reduced-motion:reduce) { .detail-status-spinner,.detail-planning-progress>span { animation:none; } .detail-planning-progress>span { transform:none; } }
#detail-summary { line-height:1.8; margin:22px 0; }
.detail-pages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:24px; }
.detail-card { padding:16px; border:1px solid var(--detail-line); border-radius:12px; min-width:0; background:rgba(255,255,255,.015); }
.detail-card-heading { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.detail-number { font-size:20px; font-weight:600; color:var(--accent,#c7ad63); }
.detail-card input { background:transparent; padding:6px; font-weight:600; border-color:transparent; }
.detail-card input:enabled:hover { border-color:var(--detail-line); }
.detail-card img { display:block; width:100%; height:auto; border-radius:6px; margin:12px 0; }
.detail-card textarea { font-size:13px; }
.detail-card details { margin-top:8px; color:var(--detail-muted); font-size:13px; }
.detail-download { color:var(--accent,#c7ad63); font-size:13px; }
.detail-footer { padding:22px 0; margin-top:20px; border-top:1px solid var(--detail-line); }
.detail-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
#detail-cost { display:block; margin-top:12px; font-size:19px; }
.detail-error { color:#ffafa2; background:rgba(180,53,38,.08); border-radius:8px; padding:12px 16px; line-height:1.65; }
.detail-missing { margin:16px 0; color:#c9b783; font-size:13px; line-height:1.8; }
#detail-progress-wrap { display:flex; align-items:center; gap:14px; font-size:13px; color:var(--detail-muted); }
#detail-progress { flex:1; height:9px; accent-color:var(--accent,#c7ad63); }
@media(max-width:1100px) { .detail-pages { grid-template-columns:repeat(2,minmax(0,1fr)); } .detail-source img { height:150px; } }
@media(max-width:760px) { .detail-pages { grid-template-columns:1fr; } .detail-header { align-items:flex-start; } .detail-header .btn { white-space:nowrap; } .detail-upload { padding:16px; } .detail-sources { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .detail-upload-header strong { font-size:14px; } .detail-start { align-items:stretch; flex-direction:column; } .detail-empty { padding:30px 16px; } }
@media(max-width:520px) { .detail-history-row { flex-wrap:wrap; gap:0; padding-bottom:14px; } .detail-history-item { flex-basis:100%; } .detail-history-actions { width:100%; justify-content:flex-end; } }