.templates-page { background:radial-gradient(circle at 80% 4%,rgba(255,122,26,.12),transparent 28%),var(--bg); }
.template-hero { min-height:540px; display:grid; grid-template-columns:minmax(0,1fr) 430px; gap:70px; align-items:center; }
.template-hero h1 { max-width:11ch; font-size:clamp(54px,6.3vw,84px); }
.template-hero > div > p { max-width:660px; margin:0 0 30px; color:#b2bac1; font-size:18px; }
.builder-steps { padding:0; margin:0; list-style:none; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #343c43; background:rgba(18,22,26,.84); }
.builder-steps li { min-height:142px; padding:20px 16px; display:flex; flex-direction:column; justify-content:space-between; border-left:1px solid #30373e; }
.builder-steps li:first-child { border-left:0; }
.builder-steps b { color:var(--accent); font-family:var(--display); font-size:28px; }
.builder-steps span { color:#afb7be; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; writing-mode:vertical-rl; transform:rotate(180deg); }

.template-library { padding-top:44px; }
.ai-internal-library { display:none; }
.template-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.template-card { min-height:172px; padding:18px; display:grid; grid-template-columns:64px 1fr; grid-template-rows:auto auto 1fr; gap:2px 14px; border:1px solid #343c43; border-radius:var(--radius-sm); background:#13171b; color:#eef1f3; text-align:left; cursor:pointer; transition:border-color .16s ease,transform .16s ease,background .16s ease; }
.template-card:hover { transform:translateY(-2px); border-color:#4c5660; }
.template-card.selected { border-color:var(--accent); background:linear-gradient(135deg,rgba(255,122,26,.08),#13171b 54%); box-shadow:inset 0 0 0 1px rgba(255,122,26,.15); }
.template-card b { align-self:end; font-family:var(--display); font-size:17px; }
.template-card small { color:#808b95; font-size:10px; }
.template-card em { align-self:end; color:#68737d; font-size:8px; font-style:normal; font-weight:900; letter-spacing:.08em; }
.template-glyph { grid-row:1 / -1; width:62px; height:62px; align-self:center; position:relative; display:grid; place-items:center; color:var(--accent); border:1px solid #3a424a; background:#0d1013; }
.glyph-washer::before { content:""; width:37px; height:37px; border:7px solid var(--accent); border-radius:50%; }
.glyph-plate::before { content:""; width:42px; height:30px; border:3px solid var(--accent); box-shadow:inset 7px 7px 0 -5px var(--accent),inset -7px -7px 0 -5px var(--accent); }
.glyph-l::before { content:""; width:40px; height:40px; border-left:9px solid var(--accent); border-bottom:9px solid var(--accent); }
.glyph-u::before { content:""; width:38px; height:35px; border:8px solid var(--accent); border-top:0; }
.glyph-gusset::before { content:""; width:0; height:0; border-left:23px solid transparent; border-right:23px solid transparent; border-bottom:40px solid var(--accent); transform:rotate(-45deg); }
.glyph-gear { font-size:46px; line-height:1; }
.glyph-reducer::before { content:""; width:44px; height:36px; background:var(--accent); clip-path:polygon(0 7%,100% 32%,100% 68%,0 93%); }
.glyph-reducer::after { content:""; position:absolute; inset:20px 8px; border:2px solid #0d1013; border-radius:50%; }
.glyph-shelf::before { content:""; width:40px; height:39px; border-left:7px solid var(--accent); border-top:7px solid var(--accent); }
.glyph-shelf::after { content:""; width:42px; height:7px; position:absolute; left:11px; top:34px; background:var(--accent); transform:rotate(-43deg); transform-origin:left center; }

.template-workbench { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(330px,.55fr); border:1px solid #343c43; background:#101418; }
.template-preview-card { min-width:0; position:relative; border-right:1px solid #343c43; }
.template-preview-toolbar,.ai-result-heading { min-height:66px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #30373e; background:#151a1f; }
.template-preview-toolbar span,.ai-result-heading span { display:block; color:#747f89; font-size:8px; font-weight:900; letter-spacing:.12em; }
.template-preview-toolbar strong,.ai-result-heading strong { display:block; margin-top:4px; font-size:13px; }
.view-toggle { display:flex; border:1px solid #353d45; }
.view-toggle button { min-width:46px; padding:7px 10px; border:0; background:#111519; color:#808b95; cursor:pointer; font-size:10px; font-weight:850; }
.view-toggle button + button { border-left:1px solid #353d45; }
.view-toggle button.selected { background:var(--accent); color:#171717; }
#templateCanvas,#aiCanvas { display:block; width:100%; height:480px; background:#e9e6df; touch-action:none; }
.template-preview-help { position:absolute; left:16px; top:84px; z-index:2; padding:5px 8px; background:rgba(239,236,229,.88); color:#6b747c; border:1px solid rgba(50,58,64,.15); font-size:9px; }
.template-metrics { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #30373e; }
.template-metrics > div { padding:12px 14px; }
.template-metrics > div + div { border-left:1px solid #30373e; }
.template-metrics span,.template-metrics b { display:block; }
.template-metrics span { color:#74808a; font-size:8px; text-transform:uppercase; letter-spacing:.06em; }
.template-metrics b { margin-top:4px; font-size:12px; }
.template-config-card { padding:24px; display:flex; flex-direction:column; gap:18px; }
.template-config-card h2 { margin:0; font-size:29px; letter-spacing:-.035em; }
.template-config-card > div > p { margin:7px 0 0; color:#838e98; font-size:12px; }
.feature-control-heading { padding:12px 13px; border:1px solid #343c43; border-left:3px solid var(--accent); background:linear-gradient(110deg,rgba(255,122,26,.07),#11161a); }
.feature-control-heading span,.feature-control-heading strong,.feature-control-heading small { display:block; }
.feature-control-heading span { color:var(--accent); font-size:8px; font-weight:900; letter-spacing:.12em; }
.feature-control-heading strong { margin-top:4px; font-size:13px; }
.feature-control-heading small { margin-top:3px; color:#77828b; font-size:9px; line-height:1.45; }
.template-features { display:flex; flex-wrap:wrap; gap:7px; }
.template-feature { padding:7px 9px; border:1px solid #3a434b; border-radius:99px; background:#11161a; color:#89949d; cursor:pointer; font-size:9px; font-weight:800; }
.template-feature:hover,.template-feature:focus-visible { border-color:#606b75; color:#fff; }
.template-feature.selected { border-color:var(--accent); background:rgba(255,122,26,.11); color:var(--accent2); box-shadow:inset 0 0 0 1px rgba(255,122,26,.13); }
.template-controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.template-controls.filtered { grid-template-columns:1fr; }
.template-controls.compact { padding:14px; border-top:1px solid #30373e; background:#101418; }
.template-control { display:block; }
.template-control span { display:block; margin-bottom:5px; color:#858f98; font-size:9px; }
.template-control .input-unit { display:flex; }
.template-control input { width:100%; min-width:0; padding:10px; border:1px solid #343c43; border-radius:6px 0 0 6px; background:#0d1114; color:#edf0f2; }
.template-control b { min-width:42px; display:grid; place-items:center; border:1px solid #343c43; border-left:0; border-radius:0 6px 6px 0; color:#737e88; background:#171c21; font-size:9px; }
.template-eligibility { min-height:58px; padding:12px; border:1px solid #354049; border-left:2px solid var(--green); background:#12181a; color:#aab3ba; font-size:10px; }
.template-eligibility.warn { border-left-color:var(--yellow); }
.template-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.template-actions button { min-width:0; }
.download-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.download-actions button { padding:9px; border:1px solid #343c43; border-radius:4px; background:#13181c; color:#8e99a2; cursor:pointer; font-size:10px; }
.download-actions button:hover { color:#fff; border-color:#505a63; }

.prompt-builder { padding-top:50px; }
.prompt-example-heading { margin:0 0 14px; display:flex; align-items:end; justify-content:space-between; gap:28px; }
.prompt-example-heading span { color:var(--accent); font-size:8px; font-weight:900; letter-spacing:.12em; }
.prompt-example-heading h3 { margin:4px 0 0; font-size:24px; }
.prompt-example-heading p { max-width:510px; margin:0; color:#7e8992; font-size:10px; line-height:1.55; }
.prompt-example-grid { margin-bottom:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.prompt-example-card { min-width:0; min-height:248px; padding:0 15px 15px; display:flex; flex-direction:column; align-items:stretch; border:1px solid #343c43; border-radius:10px; overflow:hidden; background:#13171b; color:#edf0f2; text-align:left; cursor:pointer; transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.prompt-example-card:hover,.prompt-example-card.selected { transform:translateY(-2px); border-color:var(--accent); background:linear-gradient(145deg,rgba(255,122,26,.08),#13171b 55%); }
.prompt-example-visual { height:112px; margin:0 -15px 14px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,#ebe9e3,#cbc9c2); border-bottom:1px solid #343c43; }
.example-model { display:block; position:relative; color:#8d9499; filter:drop-shadow(8px 10px 7px rgba(32,36,39,.22)); }
.model-washer { width:62px; height:62px; border:14px solid currentColor; border-radius:50%; transform:rotate(-18deg) skewY(8deg); box-shadow:inset 0 0 0 1px #646a6e,0 0 0 1px #646a6e; }
.model-u-bracket { width:104px; height:68px; background:radial-gradient(ellipse at 12px 18px,#d8d7d1 0 4px,#656b70 4.5px 6px,transparent 6.5px),radial-gradient(ellipse at 92px 18px,#d8d7d1 0 4px,#656b70 4.5px 6px,transparent 6.5px),linear-gradient(145deg,#a6adb1,#7b8388); clip-path:polygon(0 0,24px 0,24px 44px,80px 44px,80px 0,100% 0,100% 100%,0 100%); transform:perspective(220px) rotateX(18deg) rotateZ(-5deg); box-shadow:inset 0 0 0 1px #62686c; }
.model-u-bracket::before { content:""; position:absolute; inset:5px 5px 0; border-left:1px solid rgba(255,255,255,.35); border-bottom:3px solid rgba(65,70,74,.34); pointer-events:none; }
.model-plate { width:96px; height:64px; border:3px solid #666c70; transform:perspective(190px) rotateX(50deg) rotateZ(-8deg); background:radial-gradient(circle at 10px 10px,#e8e7e1 0 3px,#6c7276 4px 6px,transparent 7px),radial-gradient(circle at calc(100% - 10px) 10px,#e8e7e1 0 3px,#6c7276 4px 6px,transparent 7px),radial-gradient(circle at 10px calc(100% - 10px),#e8e7e1 0 3px,#6c7276 4px 6px,transparent 7px),radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#e8e7e1 0 3px,#6c7276 4px 6px,transparent 7px),#969da1; box-shadow:6px 7px 0 #70767a; }
.model-reducer { width:112px; height:68px; clip-path:polygon(0 5%,22% 5%,22% 14%,78% 29%,78% 23%,100% 23%,100% 77%,78% 77%,78% 71%,22% 86%,22% 95%,0 95%); background:linear-gradient(180deg,#a9afb3 0%,#92999d 46%,#70777c 100%); transform:rotate(-4deg); box-shadow:inset 0 0 0 1px #646b6f; }
.model-reducer::before,.model-reducer::after { content:""; position:absolute; top:4px; bottom:4px; width:2px; background:rgba(76,82,86,.48); }
.model-reducer::before { left:23px; }
.model-reducer::after { right:23px; }
.model-shelf { width:104px; height:76px; background:linear-gradient(145deg,#a6adb1,#7d858a); clip-path:polygon(0 0,100% 0,100% 14px,16px 14px,16px 100%,0 100%); transform:rotate(-5deg); box-shadow:inset 0 0 0 1px #646b70; }
.model-shelf::before { content:""; position:absolute; left:16px; top:14px; width:73px; height:53px; background:linear-gradient(155deg,#8e969b,#737b80); clip-path:polygon(0 0,100% 0,0 100%); box-shadow:inset 0 0 0 1px rgba(73,79,83,.55); }
.model-shelf::after { content:""; position:absolute; left:4px; top:4px; width:92px; height:3px; background:rgba(255,255,255,.28); }
.prompt-example-type { color:var(--accent); font-size:7px; font-weight:900; letter-spacing:.11em; }
.prompt-example-card strong { margin-top:6px; font-family:var(--display); font-size:15px; }
.prompt-example-card small { margin-top:5px; color:#818c95; font-size:9px; line-height:1.35; }
.try-prompt { margin-top:auto; padding-top:14px; color:#d2d7da; font-size:10px; }
.try-prompt b { margin-left:4px; color:var(--accent); }
.prompt-shell { display:grid; grid-template-columns:minmax(330px,.72fr) minmax(0,1.28fr); gap:16px; }
.prompt-entry-card,.ai-result-card { border:1px solid #343c43; background:#111519; }
.prompt-entry-card { padding:24px; align-self:start; }
.prompt-entry-card > label { display:block; margin-bottom:13px; font-family:var(--display); font-size:26px; font-weight:750; }
.prompt-guidance { margin:-4px 0 13px; color:#7d8891; font-size:10px; line-height:1.5; }
.prompt-entry-card textarea { width:100%; resize:vertical; min-height:150px; padding:16px; border:1px solid #3a434b; border-radius:8px; background:#0d1114; color:#eff2f4; line-height:1.5; }
.prompt-entry-card textarea:focus { border-color:var(--accent); }
.prompt-detail-cues { margin:10px 0 18px; display:grid; grid-template-columns:repeat(3,1fr); border:1px solid #313941; background:#0f1317; }
.prompt-detail-cues > div { padding:8px; display:flex; align-items:center; gap:6px; }
.prompt-detail-cues > div + div { border-left:1px solid #313941; }
.prompt-detail-cues b { color:var(--accent); font-size:8px; }
.prompt-detail-cues span { color:#77828b; font-size:8px; }
.optional-sketch-heading { margin:0 0 10px; padding-top:15px; border-top:1px solid #30373e; }
.optional-sketch-heading span { color:#9ba5ad; font-size:8px; font-weight:900; letter-spacing:.1em; }
.optional-sketch-heading p { margin:4px 0 0; color:#707b84; font-size:9px; line-height:1.45; }
.sketch-input { margin-bottom:10px; }
.sketch-dropzone { min-height:112px; padding:16px; display:grid; grid-template-columns:44px 1fr; align-content:center; gap:2px 12px; border:1px dashed #48525b; border-radius:8px; background:linear-gradient(135deg,rgba(255,122,26,.06),#0d1114 55%); cursor:pointer; }
.sketch-dropzone:hover,.sketch-dropzone.dragging { border-color:var(--accent); }
.sketch-dropzone strong,.sketch-dropzone small { grid-column:2; }
.sketch-dropzone strong { align-self:end; font-size:12px; }
.sketch-dropzone small { color:#75808a; font-size:9px; }
.sketch-camera { grid-row:1 / 3; width:42px; height:32px; align-self:center; position:relative; border:2px solid var(--accent); border-radius:5px; }
.sketch-camera::before { content:""; position:absolute; width:13px; height:13px; left:12px; top:7px; border:2px solid var(--accent); border-radius:50%; }
.sketch-camera::after { content:""; position:absolute; width:14px; height:5px; left:4px; top:-7px; border:2px solid var(--accent); border-bottom:0; border-radius:3px 3px 0 0; }
.sketch-scale-note { margin:8px 0 13px; color:#707b84; font-size:9px; line-height:1.45; }
.sketch-workspace { overflow:hidden; border:1px solid #384149; border-radius:8px; background:#e9e6df; }
#sketchCanvas { display:block; width:100%; height:230px; background:#e9e6df; }
.sketch-toolbar { min-height:46px; padding:8px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid #384149; background:#14191d; }
.sketch-toolbar > span { min-width:0; overflow:hidden; color:#9ca6ae; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.sketch-toolbar > div { display:flex; gap:6px; }
.sketch-toolbar button { padding:6px 8px; border:1px solid #3b444c; border-radius:4px; background:#0e1215; color:#9ba5ae; cursor:pointer; font-size:8px; }
.sketch-analysis { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #384149; background:#11161a; }
.sketch-analysis > div { padding:8px 9px; }
.sketch-analysis > div + div { border-left:1px solid #30373e; }
.sketch-analysis span,.sketch-analysis b { display:block; }
.sketch-analysis span { color:#66717a; font-size:7px; letter-spacing:.08em; }
.sketch-analysis b { margin-top:3px; color:#c3c9ce; font-size:9px; }
.prompt-boundary { margin:13px 0 0; color:#65707a; font-size:9px; }
.ai-result-card { min-width:0; }
.ai-status { padding:5px 8px; border:1px solid rgba(121,217,156,.35); color:var(--green) !important; background:rgba(121,217,156,.06); }
.ai-view-actions { display:flex; align-items:center; gap:8px; }
.ai-view-actions button { padding:6px 8px; border:1px solid #3a434b; border-radius:4px; background:#101419; color:#919ca5; cursor:pointer; font-size:8px; font-weight:850; }
.ai-view-actions button:hover { border-color:#5d6872; color:#fff; }
.ai-preview-stage { position:relative; }
.ai-preview-help { position:absolute; left:14px; top:14px; z-index:2; padding:5px 8px; border:1px solid rgba(50,58,64,.15); background:rgba(239,236,229,.9); color:#68727a; pointer-events:none; font-size:9px; }
#aiCanvas { height:390px; }
.dimension-notice { padding:11px 14px; border-top:1px solid #30373e; border-left:2px solid var(--accent); background:rgba(255,122,26,.055); }
.dimension-notice span { color:var(--accent); font-size:8px; font-weight:900; letter-spacing:.1em; }
.dimension-notice p { margin:4px 0 0; color:#87919a; font-size:9px; }
.ai-download-actions { padding:0 14px 14px; background:#101418; }
.download-actions button:disabled { opacity:.35; cursor:not-allowed; }
.approval-row { min-height:74px; padding:12px 14px; display:flex; align-items:center; gap:12px; border-top:1px solid #30373e; }
.approval-row button { flex:0 0 auto; padding:9px 12px; border:1px solid #3c454d; border-radius:4px; background:#151a1e; color:#a8b1b9; cursor:pointer; font-size:10px; font-weight:850; }
.approval-row button[aria-pressed="true"] { border-color:var(--green); color:var(--green); background:rgba(121,217,156,.08); }
.approval-row button:disabled { opacity:.35; cursor:not-allowed; }
.approval-row p { margin:0; color:#7d8790; font-size:10px; }
.ai-result-card > .template-actions { padding:0 14px 14px; }

.custom-route { margin-bottom:76px; padding:28px 30px; display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid #3a424a; border-left:3px solid var(--accent); background:linear-gradient(90deg,rgba(255,122,26,.08),#12161a 45%); }
.custom-route span { color:var(--accent); font-size:9px; font-weight:900; letter-spacing:.12em; }
.custom-route h2 { margin:5px 0 5px; font-size:30px; }
.custom-route p { margin:0; color:#89939c; font-size:12px; }

@media (max-width:1000px) {
  .template-hero { grid-template-columns:1fr; gap:28px; }
  .builder-steps { max-width:620px; }
  .template-card-grid { grid-template-columns:1fr 1fr; }
  .prompt-example-grid { grid-template-columns:1fr 1fr; }
  .template-workbench,.prompt-shell { grid-template-columns:1fr; }
  .template-preview-card { border-right:0; border-bottom:1px solid #343c43; }
}
@media (max-width:620px) {
  .template-hero { min-height:auto; padding-top:58px; }
  .template-hero h1 { font-size:52px; }
  .builder-steps li { min-height:110px; padding:14px 10px; }
  .builder-steps b { font-size:22px; }
  .template-card-grid { grid-template-columns:1fr; }
  .prompt-example-heading { align-items:flex-start; flex-direction:column; gap:8px; }
  .prompt-example-grid { grid-template-columns:1fr; }
  .prompt-example-card { min-height:220px; }
  .template-card { min-height:142px; }
  #templateCanvas { height:360px; }
  #aiCanvas { height:320px; }
  .template-controls,.template-actions,.download-actions { grid-template-columns:1fr; }
  .template-metrics { grid-template-columns:1fr 1fr; }
  .template-metrics > div:nth-child(3) { border-left:0; border-top:1px solid #30373e; }
  .template-metrics > div:nth-child(4) { border-top:1px solid #30373e; }
  .custom-route { align-items:flex-start; flex-direction:column; }
}