/* Dashboard layout inspired by the component patterns in the 21st.dev catalog.
   Original CSS for this application; no marketplace component code or preview assets. */
:root{
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
  color:#e8f0f2;
  background:#0a1117;
  --surface:#121d25;
  --surface-raised:#182833;
  --line:#30434e;
  --muted:#a5bac3;
  --accent:#eeb274;
  --teal:#75c9c7;
}
html{scroll-behavior:smooth}
#previewPanel,#galleryPanel,#passPanel,#configPanel{scroll-margin-top:90px}
body{
  min-width:320px;
  background:radial-gradient(ellipse 950px 520px at 77% -18%,#193b46 0,transparent 75%),
    radial-gradient(ellipse 720px 510px at 0 38%,#1a2931 0,transparent 75%),#0a1117;
}
button,select,input{font-family:inherit}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--teal);outline-offset:3px;
}
header{
  position:sticky;top:0;z-index:20;min-height:74px;
  padding:12px clamp(18px,3.5vw,52px);
  background:rgba(11,20,27,.94);border-bottom:1px solid #39515c;
  box-shadow:0 12px 36px #050b1090;
  backdrop-filter:blur(18px);
}
.brand{gap:15px;min-width:0}
.logo{
  width:45px;height:45px;border-radius:12px;
  background:linear-gradient(145deg,#f8cc90 0,#d89951 72%);
  box-shadow:0 0 0 1px #ffd49e55,0 9px 23px #bb754435;
  color:#152430;font-size:18px;font-weight:800;letter-spacing:-2px;
}
.logo-mark{font-weight:400;font-size:13px;margin-inline-start:2px;color:#7c4b22}
header h1{font-size:1.11rem;line-height:1.28;letter-spacing:.01em}
header .sub{font-family:Arial,sans-serif;letter-spacing:.13em;color:#8fabba;font-size:.68rem;white-space:nowrap}
header .sub span{color:var(--accent)}
.top-nav,.header-actions{display:flex;align-items:center;gap:17px}
.top-nav{margin-inline:auto;padding-inline:30px}
.top-nav a{color:#acbfc7;text-decoration:none;font-size:.85rem;padding:10px 4px;border-bottom:2px solid transparent;white-space:nowrap}
.top-nav a:hover{color:#f3c991;border-color:var(--accent)}
.header-actions{gap:10px}
.badge{background:#202b2f;border:1px solid #72634e;color:#f0c99a;font-weight:600;letter-spacing:.015em}
.header-tool{background:#1b3039;border:1px solid #516772;color:#e8f0f2;border-radius:9px;padding:8px 12px;font-size:.85rem;white-space:nowrap}
.header-tool:hover{border-color:#8ecacb}
.header-tool span{color:var(--teal);margin-inline-start:7px}
main{max-width:1780px;padding:25px clamp(16px,2.4vw,42px) 58px}
.workspace{grid-template-columns:minmax(335px,370px) minmax(0,1fr);gap:20px;align-items:start}
.panel{
  background:linear-gradient(150deg,#172630 0%,#121f27 76%);
  border-color:#354953;border-radius:14px;
  box-shadow:0 15px 42px #050b1240;
}
.panel-head{padding:18px 21px;border-color:#344953;min-height:74px}
.panel h2{font-size:1.03rem;line-height:1.35}
.eyebrow{font:700 .68rem Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#90c6ca;margin-bottom:7px}
.panel-index{color:#a7bcc4;border:1px solid #3a535d;background:#18303a;border-radius:8px;padding:6px 9px;font:700 .69rem Arial;white-space:nowrap}
.config-panel{position:sticky;top:95px;max-height:calc(100vh - 110px);overflow:auto;scrollbar-color:#41616a transparent;scrollbar-width:thin}
.config-panel .panel-head{position:sticky;top:0;z-index:5;background:#172630}
.formbody{gap:17px;padding:20px}
.formbody label{font-size:.86rem;color:#cddce0;margin-bottom:8px}
.formbody input,.formbody select,.cell-input{
  background:#0d1a22;border:1px solid #47616c;border-radius:9px;
  min-height:44px;padding:9px 11px;
}
.formbody input:hover,.formbody select:hover{border-color:#8ca6aa}
.formbody input:focus,.formbody select:focus,.cell-input:focus{border-color:#86c7c8;box-shadow:0 0 0 3px #70bfc522}
.hint{font-size:.82rem;line-height:1.66;color:#a8bdc3}
.section-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.section-tabs button{border:1px solid #3e5660;background:#142530;color:#bdd0d4;border-radius:9px;padding:7px 5px;display:grid;place-items:center;gap:3px;min-height:68px;font-size:.78rem;line-height:1.2}
.section-tabs button:hover{border-color:#b5d6d5}
.section-tabs button.active{border-color:#e9b985;color:#ffdbad;background:linear-gradient(140deg,#3e332c,#243039);box-shadow:inset 0 0 0 1px #e5b77b40}
.section-glyph{font:700 1.28rem Arial,sans-serif;line-height:1}
.divider{border-color:#3d535d}
.actions{display:grid;grid-template-columns:minmax(0,1fr) auto}
.actions button{white-space:nowrap}
.primary{background:linear-gradient(135deg,#f1c184,#e7a35f);border-color:#ebb577;color:#1c2830;border-radius:9px;box-shadow:0 7px 22px #c77b3934}
.primary:hover{background:#f8cf97}
.secondary{background:#243943;border-color:#526a75;border-radius:9px}
.secondary:hover{background:#2d4550}
.results{gap:16px}
.results-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;min-width:0;padding:2px 1px 4px}
.results-intro h2{margin:0;font-size:clamp(1.16rem,2vw,1.55rem);font-weight:700;line-height:1.35}
.results-intro h2 span{font:700 .74rem Arial,sans-serif;letter-spacing:.04em;border:1px solid #557a80;color:#b3e5e0;border-radius:6px;background:#18343d;padding:5px 7px;vertical-align:middle;white-space:nowrap;display:inline-block;margin-inline-start:6px}
.results-intro p{margin:7px 0 0;color:var(--muted);font-size:.86rem;line-height:1.5}
.intro-export{padding:9px 12px;white-space:nowrap;font-weight:600;font-size:.84rem}
.intro-export span{color:var(--teal)}
.intro-actions,.export-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.export-actions button{font-size:.81rem;padding:9px 11px}
button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.metrics{gap:11px}
.metric{min-height:111px;border-color:#36505a;border-radius:11px;padding:15px 16px;background:linear-gradient(155deg,#1d333d,#162630)}
.metric small{font-size:.79rem;color:#aec5cb;margin-bottom:8px}
.metric strong{font-size:1.34rem;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:.005em}
.metric-primary{background:linear-gradient(142deg,#32403b,#283035 62%,#1d3036);border-color:#ac7850}
.metric-primary strong{color:#ffca89}
.metric-desc{display:block;font-size:.71rem;color:#97acb4;margin-top:10px;line-height:1.35}
.metric-trend{position:relative;overflow:hidden}
#areaTrend{display:block;width:100%;height:28px;margin-top:4px}
.preview-panel{border-color:#536a70}
.preview-panel .panel-head{min-height:93px}
.stage-note{display:block;line-height:1.5;margin-top:5px;color:#aec3c9;font-size:.77rem}
.toolbar{flex-wrap:wrap;justify-content:flex-end}
.toolbar select{border-color:#536b77;background:#11232d;min-height:37px}
.view-switch{border-color:#4c6771;background:#11232c}
.view-switch button{font-size:.82rem;min-height:34px}
.view-switch button.active{background:#48646e}
.drawing{margin:13px;border-color:#3d616a;border-radius:9px;background:#0c1a22;box-shadow:inset 0 0 26px #020b1248}
.drawing svg{max-height:500px}
.drawing-meta{border-top:1px solid #2d4550;padding:12px 16px;align-items:center;font-size:.8rem;line-height:1.5}
.schematic-label{color:#93c7c7;font:700 .7rem Arial,sans-serif;letter-spacing:.05em;white-space:nowrap}
.viewer-caption{color:#a6bdc2;font-size:.8rem;line-height:1.6;padding:0 16px 14px}
.gallery{display:flex;gap:10px;max-height:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-color:#46606a transparent;scrollbar-width:thin;padding:15px 17px 17px}
.stand-card{flex:0 0 188px;min-height:224px;scroll-snap-align:start;border-color:#3d5660;background:#11232c;border-radius:10px;padding:12px}
.stand-card:hover{background:#1a333d;transform:translateY(-2px)}
.stand-card.active{border-color:#f0b579;background:#29343a;box-shadow:0 0 0 1px #f0b57955,0 10px 25px #0006}
.stand-card svg{height:118px;background:linear-gradient(150deg,#0c1b23,#162a33);border:1px solid #304a56;margin-top:9px}
.stand-card .card-head{font-size:.85rem}
.stand-card .card-head span:first-child{color:#f9c995;font-variant-numeric:tabular-nums}
.stand-card .card-meta{font-size:.74rem;margin-top:9px}
.table-wrap{max-height:540px;scrollbar-color:#455f69 transparent}
table{font-variant-numeric:tabular-nums}
th{background:#1a303a;color:#bdd5d8;border-color:#3b535c;font-size:.76rem;padding:11px 8px}
td{border-color:#30444e;padding:9px 8px;font-size:.82rem}
tr.active{background:#3b3936;box-shadow:inset -3px 0 #efb477}
tr:hover{background:#273c45}
td:first-child,th:first-child{position:sticky;right:0;z-index:2;background:#1a3039;min-width:65px;text-align:center}
tr.active td:first-child{background:#3b3936;color:#ffcd92;font-weight:bold}
th:first-child{z-index:4}
.shape-select{background:#11222a;border-color:#4c646c;min-height:35px;border-radius:7px}
.cell-input{width:78px;min-height:35px;padding:6px 7px}
td button{border-color:#53727c;background:#23414b;border-radius:7px;padding:7px 11px}
.diagnostics{background:#192c30;color:#bde0d8;border-color:#355b5a;padding:14px 20px}
.diagnostics.warn{background:#382b22;color:#ffd4a1}
.analysis-grid{gap:10px}
.analysis-item{border-color:#38545b;background:#11272e;padding:14px}
.analysis-item small{font-size:.74rem;min-height:28px;color:#a8c0c6}
.analysis-item strong{font-size:1.1rem;font-variant-numeric:tabular-nums}
.analysis-item span{font-size:.78rem;margin-top:5px}
.notice{border-color:#806245;background:#302b27;border-right:3px solid #e4ac71;border-radius:9px;color:#e2d6c8}
.notice strong{color:#f3c594}
.source-details summary{padding:15px 20px;cursor:pointer;color:#d0e2e1;font-weight:600;list-style:none}
.source-details summary::before{content:"⌄";display:inline-block;transform:rotate(90deg);margin-left:10px;color:#d7ab77}
.source-details[open] summary::before{transform:rotate(0)}
.source-details[open] summary{border-bottom:1px solid #344e58}
.sources{font-size:.84rem}
.foot{margin:17px 2px 0;color:#9eb6be}
.foot a{color:#c5dbd8;text-underline-offset:3px}
.config-collapsed .workspace{grid-template-columns:1fr}
.config-collapsed .config-panel{display:none}
.config-collapsed #toggleConfig{border-color:#9ebfc0;color:#bce2df}
@media(max-width:1230px){
  .top-nav{display:none}
  .workspace{grid-template-columns:minmax(300px,330px) minmax(0,1fr)}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .formbody{grid-template-columns:1fr}
  .formbody>.row2,.formbody>.section-tabs{grid-column:1/-1}
}
@media(max-width:990px){
  header{min-height:69px}
  .workspace,.config-collapsed .workspace{display:grid;grid-template-columns:1fr}
  .config-panel{position:static;max-height:none;overflow:visible}
  .config-panel .panel-head{position:static}
  .formbody{grid-template-columns:repeat(2,minmax(0,1fr))}
  .formbody>.row2,.formbody>.hint,.formbody>.section-tabs,.formbody>.actions,.formbody>.divider,.formbody>.error{grid-column:1/-1}
  .formbody>.row2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .badge{display:none}
}
@media(max-width:670px){
  header{padding:11px 15px;min-height:65px}
  .brand{gap:9px}
  .logo{width:39px;height:39px;font-size:16px}
  header h1{font-size:.94rem}
  header .sub{font-size:.58rem;letter-spacing:.055em}
  .header-tool{font-size:.73rem;padding:8px 9px}
  .header-tool span{display:none}
  main{padding:16px 12px 40px}
  .workspace,.results{gap:12px}
  .formbody{grid-template-columns:1fr;padding:15px}
  .formbody>.row2{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .formbody>.row2 label{min-height:34px}
  .panel-head{padding:15px;min-height:auto}
  .panel h2{font-size:1.0rem}
  .results-intro{align-items:start}
  .results-intro p{font-size:.77rem}
  .intro-export{display:none}
  .export-actions{width:100%}
  .export-actions button{flex:1 1 135px;white-space:normal}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .metric{min-height:93px;padding:11px}
  .metric strong{font-size:1.07rem}
  .metric small{font-size:.71rem}
  .metric-desc{font-size:.68rem;margin-top:6px}
  .preview-panel .panel-head{align-items:stretch}
  .toolbar{justify-content:space-between;gap:7px}
  .toolbar .stage-note{display:none}
  .toolbar select{min-width:105px;max-width:115px}
  .view-switch button{padding:6px 8px;font-size:.76rem}
  .drawing{margin:8px}
  .drawing svg{min-height:190px}
  .drawing-meta{padding:9px 11px}
  .schematic-label{display:none}
  .stand-card{flex-basis:162px;min-height:206px}
  .stand-card svg{height:106px}
  .gallery{padding:12px}
  .analysis-grid{grid-template-columns:1fr;padding:12px}
  .analysis-item small{min-height:0}
  .source-details summary{padding:13px 15px}
}
@media(max-width:375px){
  .formbody>.row2{grid-template-columns:1fr}
  .formbody>.row2 label{min-height:0}
  .header-tool{padding:7px}
  header .sub{max-width:165px;overflow:hidden;text-overflow:ellipsis}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stand-card:hover{transform:none}
}
/* Roll drawings and measured-data tools */
#toolingPanel{scroll-margin-top:90px}
.tool-intro,.engineering-body{padding:18px 21px;font-size:.9rem;line-height:1.8;color:#c1d1d6}
.tool-fields{padding:0 21px 20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tool-fields label,.engineering-body label{display:block;color:#c5d8df;font-size:.85rem;margin-bottom:7px}
.tool-fields input,.tool-fields select,.engineering-body input,.engineering-body textarea,#toolPass{width:100%;padding:9px 10px;border:1px solid #4b6877;border-radius:8px;background:#0d1b24;color:#e9f2f4;font:inherit;min-height:42px}
#toolPass{max-width:210px}.tool-fields small{display:block;font-size:.76rem;color:#a8bbc4;line-height:1.65;margin-top:5px}
.tool-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 21px 12px}.tool-toolbar>.stage-note{flex:1}
.tool-drawing svg{min-height:300px;max-height:650px}
.tool-drawing{margin-bottom:0}.research-link{color:#f0bd86;text-underline-offset:5px;white-space:nowrap;font-size:.88rem}
.engineering-body>p{margin-top:0}.engineering-body textarea{font-family:monospace;font-size:.85rem;resize:vertical;margin-bottom:12px}.engineering-body input{margin-bottom:14px}
.engineering-body .hint{padding:12px 0}.engineering-body details{margin-top:16px;border-top:1px solid #385462;padding-top:16px}.engineering-body summary{cursor:pointer;color:#e5c49f;font-weight:bold}.engineering-body details p{font-size:.86rem;line-height:1.7}
@media(max-width:1200px){.tool-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.intro-actions{justify-content:flex-end}.results-intro{align-items:start}}
@media(max-width:670px){.tool-fields{padding:0 14px 16px;gap:10px}.tool-fields label{min-height:36px}.tool-intro,.engineering-body{padding:15px}.tool-toolbar{padding:0 14px 10px}.tool-toolbar .primary{width:100%}.tool-drawing svg{min-height:210px}#toolPass{max-width:none}.research-link{white-space:normal}.engineering-panel .panel-head{align-items:stretch}}
@media(max-width:390px){.tool-fields{grid-template-columns:1fr}.tool-fields label{min-height:0}}
/* Drawing controls extend the existing working surface. */
.drawing-controls{border-top:1px solid #344c58;border-bottom:1px solid #344c58;padding-top:18px;margin-bottom:14px}
.drawing-controls select{width:100%;padding:9px 10px;min-height:42px;border:1px solid #4b6877;border-radius:8px;background:#0d1b24;color:#e9f2f4;font:inherit}
.drawing-controls .row2{margin-bottom:12px}.drawing-controls .actions{display:flex;flex-wrap:wrap;gap:10px;margin:15px 0}
.drawing-controls .actions button{font-size:.84rem}.tool-drawing svg{max-height:none}.drawing-controls summary{font-size:.95rem}
.roughing-panel[hidden],#roughConfig[hidden]{display:none}
#roughConfig{display:grid;gap:10px}
.rough-controls{padding:18px 20px 12px}.rough-current{font-weight:700;font-size:1rem;color:#ffd2a4;margin:15px 0 8px}.rough-controls .hint{margin:0 0 12px;font-size:.875rem}
.rough-passes{display:flex;gap:7px;flex-wrap:wrap;direction:ltr}.rough-pass{min-height:40px;background:#1b303d;border:1px solid #4a6572;color:#d7e7ee;border-radius:6px;padding:7px 12px;font:600 .875rem Arial,sans-serif}.rough-pass.active{background:#674626;color:#fff0dc;border-color:#fac087}.rough-pass:focus-visible{outline:2px solid #9cd8d0;outline-offset:3px}
.rough-visual{overflow:auto;background:#101f28}.rough-visual svg{width:100%;min-width:690px;display:block}.rough-details{border-top:1px solid #344b58;padding:17px 20px}.rough-details summary{cursor:pointer;font-size:1rem;font-weight:600;color:#dcebf0}.rough-details p{font-size:.875rem;line-height:1.8;color:#b7cbd4}.rough-details .table-wrap{margin:16px -20px 0}.rough-details th,.rough-details td{font-size:.875rem}.rough-details select{background:#132733;border:1px solid #547382;color:#f0f5f7;border-radius:6px;min-height:40px;padding:6px 10px;font:inherit}.rough-details label{display:block;margin:15px 0 8px;font-size:.875rem}.rough-details .warn{color:#ffbd9c}.roughing-panel button:disabled{opacity:.45;cursor:default}
.rough-billet.forward{--rough-shift:100px}.rough-billet.reverse{--rough-shift:-100px}.playing .rough-billet{animation:roughMotion 1.65s ease-in-out infinite}
@keyframes roughMotion{from{transform:translateX(calc(-1 * var(--rough-shift)))}to{transform:translateX(var(--rough-shift))}}
@media(prefers-reduced-motion:reduce){.playing .rough-billet{animation:none}}
@media(max-width:710px){.rough-controls,.rough-details{padding:14px}.rough-details .table-wrap{margin-left:-14px;margin-right:-14px}.roughing-panel .panel-head{align-items:flex-start;flex-wrap:wrap}}
.line-choice{padding:14px;border:1px solid #688a91;border-radius:9px;background:#19313b}.line-choice label:not(:first-child){margin-top:14px}.line-choice select{font-weight:700}.line-panel{scroll-margin-top:90px}.line-panel .engineering-body{padding-bottom:12px}.line-table{max-height:320px;margin-top:15px}.line-table input{min-width:80px;max-width:130px}.line-table th,.line-table td{font-size:.875rem}.line-panel #lineStand{font:inherit;font-size:.875rem;min-height:42px;background:#132733;color:#e4f0f3;border:1px solid #547382;border-radius:6px;padding:6px 10px}.lane-readout{padding:15px 20px;font-size:.95rem;color:#ffd0a0;border-top:1px solid #344b58}.line-panel .engineering-body details{margin-top:0}.line-panel[hidden],#roughFirstField[hidden]{display:none}

@media(max-width:710px){.line-panel .panel-head{align-items:flex-start;flex-wrap:wrap}.line-panel #lineStand{width:100%}}