.fastener-workspace{--tools-width:282px;--properties-width:310px;grid-template-columns:minmax(250px,var(--tools-width)) minmax(400px,1fr) minmax(290px,var(--properties-width))}
.fastener-workspace .tools-panel,.fastener-workspace .properties-panel{min-width:0;padding:13px 11px;gap:10px;background:rgba(15,15,18,.96)}
.fastener-workspace .panel-intro{padding:2px 3px 5px}.fastener-workspace .panel-intro strong{font-size:1.08rem}.fastener-workspace .panel-intro small{font-size:.65rem;line-height:1.4}
.fastener-section{border:1px solid var(--border);border-radius:10px;padding:10px;background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008));display:flex;flex-direction:column;gap:6px}
.fastener-section-title{margin:0 0 3px;display:flex;align-items:center;justify-content:space-between;color:#e8e8eb;font:700 .72rem var(--font-outfit);letter-spacing:.025em}
.section-tag{font:600 .56rem var(--font-mono);color:#f1a387;background:rgba(244,132,95,.1);border:1px solid rgba(244,132,95,.2);padding:3px 5px;border-radius:5px;white-space:nowrap}
.control-label{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#c8c8ce;font-size:.65rem;font-weight:600;line-height:1.3;margin-top:2px}
.control-label output{color:var(--primary);font:700 .64rem var(--font-mono);white-space:nowrap}
.fastener-select,.number-unit input{width:100%;min-width:0;height:32px;padding:0 9px;border:1px solid var(--border);border-radius:7px;background:#191a1f;color:#f4f4f5;font:500 .68rem var(--font-inter);outline:none}
.socket-settings{padding:8px 8px 6px;border:1px solid rgba(244,132,95,.2);border-radius:8px;background:rgba(244,132,95,.035)}.socket-settings[hidden]{display:none}.socket-settings-title{margin-bottom:4px;color:#f1a387;font:700 .6rem var(--font-inter)}
.fastener-select:focus,.number-unit input:focus{border-color:var(--primary)}.fastener-select option{background:#17171a;color:#fff}.compact-select{height:31px;font-size:.63rem;padding:0 5px}
.control-grid{display:grid;gap:8px}.two-cols{grid-template-columns:1fr 1fr}.number-unit{display:flex;align-items:center;gap:6px}.number-unit input{font-family:var(--font-mono);text-align:center;padding:0 5px}.number-unit span{font:600 .59rem var(--font-mono);color:var(--text-muted);white-space:nowrap}
.range-control{width:100%;height:4px;margin:4px 0 2px;accent-color:var(--primary)}.helper-text{font-size:.58rem;color:var(--text-muted);line-height:1.35}
.segmented-control{display:flex;gap:5px}.segment-btn{flex:1;min-height:29px;padding:5px 6px;border:1px solid var(--border);border-radius:7px;background:#17171b;color:#a1a1aa;font:600 .61rem var(--font-inter);cursor:pointer;transition:all .16s}.segment-btn:hover{border-color:var(--border-strong);color:#fff}.segment-btn.active{color:#ffd5c8;border-color:rgba(244,132,95,.55);background:rgba(244,132,95,.12);box-shadow:inset 0 0 0 1px rgba(244,132,95,.1)}
.note-box{margin:3px 0 0;padding:8px;border-left:2px solid var(--primary);border-radius:0 6px 6px 0;background:rgba(244,132,95,.07);color:#c7b9b4;font-size:.59rem;line-height:1.45}
.toolbar-left{display:flex;align-items:center;gap:9px;min-width:0;color:#dfdfe2;font-size:.7rem;white-space:nowrap}.toolbar-left strong{font:700 .68rem var(--font-mono);letter-spacing:.03em}.toolbar-divider{height:16px;border-left:1px solid var(--border);flex:none}.toolbar-subtitle{overflow:hidden;text-overflow:ellipsis;color:var(--text-muted);font-size:.64rem}.view-tools{display:flex;align-items:center;gap:6px;flex:none}.cam-btn.fastener-view-btn{min-height:30px;padding:6px 10px;border:1px solid rgba(255,255,255,.11);border-radius:8px;background:linear-gradient(180deg,#242429,#19191e);color:#c9c9ce;font:600 .63rem var(--font-inter);box-shadow:0 2px 7px #0005;cursor:pointer;transition:all .16s}.cam-btn.fastener-view-btn:hover{border-color:rgba(244,132,95,.65);background:#292326;color:#fff;transform:translateY(-1px)}.cam-btn.fastener-view-btn.active{border-color:var(--primary);background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#17120f;box-shadow:0 3px 12px var(--primary-glow)}.selection-toggle{display:flex;align-items:center;gap:6px;min-height:30px;padding:4px 9px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.035);color:#c9c9ce;font:600 .61rem var(--font-inter);white-space:nowrap;cursor:pointer;transition:border-color .16s,background .16s}.selection-toggle:hover{border-color:rgba(244,132,95,.45);background:rgba(244,132,95,.06)}.selection-toggle input{width:14px;height:14px;margin:0;accent-color:var(--primary);cursor:pointer}.selection-toggle strong{color:#f3a68c;font:700 .58rem var(--font-mono)}
.fastener-viewport{grid-area:two;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border-right:1px solid var(--border);background:radial-gradient(ellipse at 52% 42%,rgba(244,132,95,.055),transparent 53%),#0a0a0d}
.viewer-hud{height:40px;position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 13px;background:linear-gradient(180deg,rgba(10,10,13,.9),rgba(10,10,13,.35));pointer-events:none}.viewer-title{color:#c9c9ce;font:700 .61rem var(--font-mono);letter-spacing:.04em}.viewer-title i{color:var(--primary);margin-right:4px}.plate-size-badge{padding:4px 7px;border:1px solid rgba(244,132,95,.28);border-radius:6px;background:rgba(244,132,95,.08);color:#f4a68b;font:700 .59rem var(--font-mono)}
.fastener-canvas-wrap{position:relative;flex:1;min-height:0;background-image:radial-gradient(rgba(255,255,255,.055) .7px,transparent .7px);background-size:22px 22px}.fastener-canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none;cursor:crosshair}
.plate-readout{position:absolute;left:12px;bottom:42px;z-index:4;display:flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid var(--border);border-radius:7px;background:rgba(14,14,17,.88);color:#d0d0d4;font-size:.59rem;backdrop-filter:blur(8px)}.plate-dot{width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 8px var(--primary-glow)}.readout-separator{color:#55555e}.camera-toolbar.fastener-camera-tools{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:rgba(16,16,19,.86);color:#93939d;font-size:.58rem;white-space:nowrap;backdrop-filter:blur(8px)}
.plate-readout{bottom:92px}.rotation-controls{position:absolute;left:50%;bottom:10px;z-index:5;transform:translateX(-50%);width:min(520px,calc(100% - 24px));display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:9px 12px;border:1px solid var(--border);border-radius:9px;background:rgba(16,16,19,.94);box-shadow:0 8px 26px #0007;backdrop-filter:blur(8px)}.rotation-slider{display:grid;grid-template-columns:auto minmax(50px,1fr) 32px;align-items:center;gap:8px;color:#a5a5ae;font-size:.59rem;white-space:nowrap}.rotation-slider input{width:100%;height:4px;margin:0;accent-color:var(--primary)}.rotation-slider output{color:#f3b09a;text-align:right;font:700 .59rem var(--font-mono)}
.plate-panel{gap:9px}.copy-section{gap:7px}.copy-title-row{display:flex;align-items:center;justify-content:space-between;gap:6px}.copy-title-row .control-label{margin:0}.copy-stepper{height:45px;display:grid;grid-template-columns:40px 1fr 40px;gap:5px}.copy-stepper button{border:1px solid var(--border);border-radius:7px;background:#1b1b20;color:#fff;font-size:1.15rem;cursor:pointer}.copy-stepper button:hover{border-color:var(--primary);color:var(--primary)}.copy-stepper input{width:100%;min-width:0;border:1px solid rgba(244,132,95,.35);border-radius:7px;background:#19191e;color:#fff;text-align:center;font:700 1.1rem var(--font-mono);outline:none}.copy-stepper input:focus{border-color:var(--primary)}.copy-quick-row{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.copy-quick{height:24px;border:1px solid var(--border);border-radius:6px;background:#17171b;color:#a1a1aa;font:600 .6rem var(--font-mono);cursor:pointer}.copy-quick:hover,.copy-quick.active{border-color:rgba(244,132,95,.45);color:#ffc1ad;background:rgba(244,132,95,.1)}
.btn-secondary,.btn-action-primary,.btn-action-secondary{min-height:35px;border-radius:7px;font:700 .64rem var(--font-inter);cursor:pointer;transition:all .16s}.btn-secondary{background:#1d1d22;color:#e8e8eb;border:1px solid var(--border)}.btn-secondary:hover,.btn-action-secondary:hover{border-color:var(--primary);background:rgba(244,132,95,.08)}.full-width{width:100%}.plate-stats-card{border:1px solid var(--border);border-radius:10px;padding:10px;background:rgba(255,255,255,.018)}.stats-heading{margin-bottom:7px;color:#f0a68c;font:700 .59rem var(--font-mono);letter-spacing:.07em}.stat-line{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-top:1px solid rgba(255,255,255,.045);color:#9c9ca5;font-size:.63rem}.stat-line strong{color:#eee;font:700 .65rem var(--font-mono)}.plate-capacity{margin-top:6px;padding:7px;border-radius:6px;background:#19191e;color:#b8b8c0;font-size:.59rem;line-height:1.4}.plate-capacity.warning{border:1px solid rgba(239,120,93,.38);color:#ffc0aa;background:rgba(244,132,95,.08)}
.plate-actions{margin-top:auto;position:sticky;bottom:-13px;padding:10px 0 2px;background:linear-gradient(180deg,transparent,#101013 14%)}.plate-actions .btn-action-primary{min-height:39px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border:0;color:#17120f;box-shadow:0 5px 16px rgba(244,132,95,.16)}.plate-actions .btn-action-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}.plate-actions .btn-action-secondary{margin-top:6px;min-height:32px;background:#1a1a1f;border:1px solid var(--border);color:#d1d1d5}.plate-actions small{display:block;margin-top:5px;text-align:center;color:#777780;font-size:.53rem;line-height:1.3}
.toast-region{position:fixed;left:50%;bottom:18px;z-index:200;transform:translateX(-50%);display:grid;gap:7px;pointer-events:none}.toast{padding:10px 14px;border:1px solid rgba(244,132,95,.35);border-radius:9px;background:#1a1717;color:#f3ddd5;box-shadow:0 10px 32px #0009;font-size:.74rem;animation:toast-in .18s ease-out}.toast.error{border-color:#ad4a37;color:#ffc1b2}@keyframes toast-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1150px){.fastener-workspace{--tools-width:260px;--properties-width:282px;grid-template-columns:minmax(240px,var(--tools-width)) minmax(320px,1fr) minmax(270px,var(--properties-width))}.toolbar-subtitle{display:none}}
@media(max-width:900px){html,body{height:auto;min-height:100%;overflow:auto}.app-header{position:sticky;top:0}.fastener-workspace{height:auto;min-height:calc(100vh - 62px);grid-template-columns:1fr;grid-template-rows:auto minmax(62vh,680px) auto auto;grid-template-areas:"toolbar" "two" "left" "right";overflow:visible}.fastener-workspace .workspace-toolbar{position:sticky;top:62px;z-index:20;grid-area:toolbar}.fastener-viewport{grid-area:two;min-height:62vh}.fastener-workspace .tools-panel{grid-area:left;border-right:0;border-bottom:1px solid var(--border)}.fastener-workspace .properties-panel{grid-area:right;border-left:0;border-bottom:1px solid var(--border)}.plate-actions{position:static}}
@media(max-width:620px){.app-header{padding:0 9px;gap:5px}.header-left,.header-right,.header-user-area{gap:5px}.header-titles h1{font-size:.8rem}.logo-badge{display:none}.header-user-area .quota-badge{display:none}.btn-back-studio{font-size:0;padding:6px}.btn-back-studio i{font-size:.9rem}.fastener-workspace .workspace-toolbar{padding:7px 9px;gap:6px}.toolbar-left{font-size:.6rem}.view-tools{gap:3px}.cam-btn.fastener-view-btn{min-height:28px;padding:5px 6px;font-size:.56rem}.selection-toggle{min-height:28px;gap:4px;padding:4px 6px;font-size:.56rem}.selection-toggle strong{font-size:.53rem}.fastener-workspace .tools-panel,.fastener-workspace .properties-panel{padding:12px}.fastener-viewport{min-height:56vh}.plate-readout{left:7px;bottom:86px;font-size:.52rem}.rotation-controls{gap:7px;padding:8px 7px}.rotation-slider{grid-template-columns:1fr 1.2fr 27px;gap:5px;font-size:.53rem}.rotation-slider output{font-size:.53rem}}