:root{--bg:#071019;--p:#0d1824;--c:#132334;--l:#294057;--t:#edf6ff;--m:#8ea7bf;--a:#35d4ff;--g:#74f7c4;--w:#ffcc66;--b:#ff6b87}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 0,#142a40,#071019 45%,#050b11);color:var(--t);font-family:Arial,Helvetica,sans-serif}.app{display:grid;grid-template-columns:370px 1fr;min-height:100vh}aside{padding:16px;background:rgba(7,16,25,.9);border-right:1px solid #203347;overflow:auto;max-height:100vh}main{padding:16px}h1{margin:0;font-size:21px}.sub,.note{color:var(--m);font-size:12px;line-height:1.45}.logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--a),var(--g));box-shadow:0 0 28px #35d4ff55}.brand{display:flex;gap:12px;align-items:center;margin-bottom:14px}.sec{background:linear-gradient(180deg,#132334ee,#0b1622ee);border:1px solid #ffffff14;border-radius:18px;padding:14px;margin:12px 0;box-shadow:0 18px 50px #0006}.sec h2{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:#bfefff;margin:0 0 12px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin:10px 0}label{font-size:12px;color:var(--m)}input,select{width:100%;background:#08131f;color:var(--t);border:1px solid var(--l);border-radius:12px;padding:9px}.row input{padding:0}input[type=range]{accent-color:var(--a)}.btns{display:flex;flex-wrap:wrap;gap:8px}.btn{border:1px solid #ffffff18;background:#102338;color:var(--t);border-radius:13px;padding:10px 12px;font-weight:700;font-size:12px;cursor:pointer}.primary{background:linear-gradient(135deg,#1599ff,#24e0c4);color:#021018}.warn{background:#2a2312;color:#ffd98a}.bad{background:#301827;color:#ffb2c1}.file{border:1px dashed #40617d;border-radius:16px;padding:14px;text-align:center;background:#35d4ff0d;transition:.18s ease}.file.drag{border-color:#74f7c4;background:#74f7c41a;box-shadow:0 0 0 3px #74f7c422}.val{font-variant-numeric:tabular-nums;color:#d8fbff;font-size:12px;min-width:58px;text-align:right}.toolbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}.pill{border:1px solid #ffffff18;background:#ffffff0d;border-radius:999px;padding:8px 11px;color:var(--m);font-size:12px}.canvases{display:grid;grid-template-columns:minmax(300px,1fr) minmax(300px,1fr);gap:16px}.card{background:#0d1824b8;border:1px solid #ffffff14;border-radius:22px;padding:14px;box-shadow:0 18px 50px #0006}.card h3{margin:0 0 10px;color:#dff6ff;font-size:14px}.wrap{background:repeating-conic-gradient(from 45deg,#0b1722 0 25%,#0e1d2c 0 50%) 50%/24px 24px;border-radius:18px;display:grid;place-items:center;min-height:420px;overflow:hidden;border:1px solid #ffffff10}canvas{max-width:100%;height:auto;display:block}.status{margin-top:10px;padding:10px 12px;border-radius:14px;background:#74f7c414;border:1px solid #74f7c42e;color:#baf9e3;font-size:12px}.danger{color:#ff9bb0}.yellow{color:#ffd18a}@media(max-width:980px){.app{grid-template-columns:1fr}aside{max-height:none}.canvases{grid-template-columns:1fr}}


/* ===== V6 REAL 3D STUDIO — COATDOCTOR LUXURY LAYOUT ===== */
body{overflow:hidden}
.app{grid-template-columns:360px 1fr;background:radial-gradient(circle at 50% 0,#102233 0,#071019 48%,#02060a 100%)}
aside{background:linear-gradient(180deg,rgba(5,13,21,.96),rgba(8,18,28,.94));border-right:1px solid rgba(77,216,255,.16);box-shadow:18px 0 60px rgba(0,0,0,.35);scrollbar-width:thin}
main{height:100vh;overflow:auto;padding:18px 20px 24px;background:
 radial-gradient(circle at 58% 12%,rgba(53,212,255,.10),transparent 34%),
 radial-gradient(circle at 55% 80%,rgba(255,255,255,.09),transparent 28%),
 #071019}
.brand{padding:4px 0 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.logo{background:linear-gradient(135deg,#19a8ff,#7d5cff 45%,#74f7c4);box-shadow:0 0 34px rgba(53,212,255,.45)}
.sec{border-radius:16px;background:linear-gradient(180deg,rgba(14,28,42,.86),rgba(6,14,22,.94));border:1px solid rgba(118,218,255,.18);box-shadow:0 16px 45px rgba(0,0,0,.32)}
.sec h2{color:#5edfff;font-weight:900}
.btn{background:linear-gradient(180deg,#1b2c3d,#101b28);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.btn.primary{background:linear-gradient(135deg,#0e8bff,#163ad9);color:white}
input,select{background:#050d15;border-color:rgba(94,223,255,.18)}
.studioTop{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-bottom:12px}
.topTabs{display:flex;gap:0;background:linear-gradient(180deg,#213140,#111c29);border:1px solid rgba(255,255,255,.12);border-radius:999px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.topTab{padding:13px 28px;font-size:13px;font-weight:900;letter-spacing:.02em;color:#c6d5e3;border-right:1px solid rgba(255,255,255,.08);text-transform:uppercase}
.topTab.active{background:linear-gradient(135deg,rgba(53,212,255,.22),rgba(15,79,118,.34));color:#69e5ff}
.noticeBar{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid rgba(53,212,255,.19);background:linear-gradient(90deg,rgba(8,26,38,.96),rgba(5,14,22,.96));border-radius:12px;padding:12px 16px;margin-bottom:10px;color:#e7f7ff;font-size:13px}
.fullBtn{border:1px solid rgba(255,255,255,.15);border-radius:8px;background:linear-gradient(180deg,#263746,#162333);color:#fff;padding:9px 12px;font-weight:800;cursor:pointer}
.studioGrid{display:grid;grid-template-columns:minmax(640px,1fr) 248px;gap:18px;align-items:stretch}
.studioStage{position:relative;min-height:760px;border-radius:20px;background:
 radial-gradient(circle at 50% 74%,rgba(200,213,231,.28) 0,rgba(78,89,114,.16) 18%,transparent 44%),
 radial-gradient(circle at 50% 18%,rgba(53,212,255,.07),transparent 45%),
 #050b11;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 80px rgba(0,0,0,.35),0 25px 80px rgba(0,0,0,.38);overflow:hidden}
.viewControls{position:absolute;top:14px;left:14px;right:14px;z-index:9;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.ctrlBox{background:rgba(8,17,27,.76);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 12px;backdrop-filter:blur(12px)}
.ctrlTitle{font-size:11px;text-transform:uppercase;color:#cfefff;letter-spacing:.08em;margin-bottom:8px;font-weight:900}
.microBtns{display:flex;gap:6px;flex-wrap:wrap}.microBtn{font-size:12px;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,#263746,#162333);color:#fff;cursor:pointer}.microBtn.active{background:linear-gradient(135deg,#117ec1,#0e4a77);border-color:#35d4ff}
.bgSwatches{display:flex;gap:12px;align-items:center}.swatch{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.28);cursor:pointer;box-shadow:inset 0 0 12px rgba(0,0,0,.28)}.swatch.dark{background:#020509}.swatch.blue{background:#102942}.swatch.silver{background:#bfc7cf}.swatch.white{background:#f4f8ff}.swatch.grid{background:repeating-conic-gradient(#77818a 0 25%,#2a3440 0 50%) 50%/8px 8px}
#threeShell{position:absolute;inset:0!important;border:0!important;border-radius:20px!important;min-height:760px!important;background:transparent!important}
#threeShell canvas{height:760px!important}
.threeHud,.threeHelp{display:none!important}
.orbitLegend{position:absolute;left:18px;bottom:20px;z-index:10;display:flex;gap:18px;align-items:center;background:rgba(6,13,22,.78);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:12px 18px;color:#eaf8ff;font-size:13px;backdrop-filter:blur(10px)}
.orbitItem{display:flex;align-items:center;gap:8px}.mouseIcon{width:18px;height:28px;border:1px solid rgba(255,255,255,.55);border-radius:10px;position:relative}.mouseIcon:before{content:"";position:absolute;left:7px;top:3px;width:2px;height:6px;background:#74f7c4;border-radius:2px}
.sidePanel{display:flex;flex-direction:column;gap:12px}.sideCard{background:rgba(8,17,27,.78);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:14px;box-shadow:0 14px 45px rgba(0,0,0,.28);backdrop-filter:blur(12px)}.sideCard h4{margin:0 0 12px;color:#5edfff;font-size:13px;text-transform:uppercase}.matGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.matBall{height:58px;border-radius:10px;border:1px solid rgba(255,255,255,.13);cursor:pointer;background:radial-gradient(circle at 35% 25%,#fff,#9ba8b4 38%,#313a42 100%)}.matBall.black{background:radial-gradient(circle at 35% 22%,#9ba4a8,#17201e 38%,#020403 100%)}.matBall.gold{background:radial-gradient(circle at 35% 22%,#fff1b6,#d1a33b 38%,#4e3211 100%)}.matBall.active{outline:2px solid #35d4ff}.lightPreview{height:100px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:radial-gradient(circle at 25% 18%,rgba(255,255,255,.85),transparent 11%),radial-gradient(circle at 74% 18%,rgba(255,255,255,.78),transparent 11%),radial-gradient(circle at 50% 86%,rgba(210,225,255,.40),transparent 40%),linear-gradient(160deg,#17202b,#060a0f);margin-bottom:12px}.sliderLine{display:grid;grid-template-columns:1fr 44px;gap:8px;align-items:center;margin:8px 0}.sliderLine span{font-size:12px;color:#d7e8f5;text-align:right}.exportsRow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.miniCard{min-height:330px}
.miniCard .wrap{min-height:300px}
@media(max-width:1180px){.studioGrid{grid-template-columns:1fr}.sidePanel{display:grid;grid-template-columns:repeat(3,1fr)}.studioStage,#threeShell,#threeShell canvas{min-height:620px!important;height:620px!important}.viewControls{grid-template-columns:1fr}.exportsRow{grid-template-columns:1fr}}
@media(max-width:980px){body{overflow:auto}.app{grid-template-columns:1fr}.studioGrid{grid-template-columns:1fr}.sidePanel{grid-template-columns:1fr}.topTabs{overflow:auto}.topTab{white-space:nowrap;padding:11px 18px}.studioStage,#threeShell,#threeShell canvas{min-height:520px!important;height:520px!important}}



/* ===== V7.5 HYBRID RASTER + TRUE VECTOR PANEL ===== */
.vectorHealth{margin-top:10px;padding:10px 12px;border-radius:14px;background:rgba(53,212,255,.07);border:1px solid rgba(53,212,255,.18);font-size:12px;line-height:1.45;color:#bfefff}
.vectorHealth b{color:#74f7c4}.vectorHealth.bad b{color:#ffcc66}.vectorHealth.danger b{color:#ff8ea3}
.modeBadge{display:inline-block;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:4px 8px;margin:2px 4px 2px 0;background:#071019;color:#dff6ff;font-size:11px}
.vectorPreviewBox{margin-top:10px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:#071019;padding:10px;color:#8ea7bf;font-size:12px}


<![CDATA[
      .trim{fill:none;stroke:#00cfff;stroke-width:0.12;vector-effect:non-scaling-stroke}
      .seam{stroke:#ffcc66;stroke-width:0.12;stroke-dasharray:1 0.7;vector-effect:non-scaling-stroke}
      .reg{stroke:#111827;stroke-width:0.10;vector-effect:non-scaling-stroke}
      .txt{fill:#111827;font-family:Arial,Helvetica,sans-serif;font-size:1.8px}
    ]]>