@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@300;400;500&display=swap');

:root {
  --ink:    #0B0D14;
  --ink2:   #10131C;
  --ink3:   #161A26;
  --ink4:   #1D2232;
  --rim:    #252B3E;
  --rim2:   #2E364E;

  --lime:   #C8FF57;
  --lime-a: rgba(200,255,87,.12);
  --lime-b: rgba(200,255,87,.06);
  --lime-c: rgba(200,255,87,.03);

  --sky:    #57C8FF;
  --sky-a:  rgba(87,200,255,.12);

  --rose:   #FF6B8A;
  --rose-a: rgba(255,107,138,.1);

  --amber:  #FFB347;
  --amber-a:rgba(255,179,71,.1);

  --violet: #A78BFA;
  --violet-a:rgba(167,139,250,.1);

  --tx:  #E4E8F5;
  --tx2: #7B88A8;
  --tx3: #404B66;
  --tx4: #252E45;

  --r-card: 18px;
  --r-sm:   10px;
  --r-xs:   7px;

  --shadow: 0 4px 32px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 60px rgba(0,0,0,.6);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--ink);
  color:var(--tx);
  min-height:100vh;
  overflow-x:hidden;
}

body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at -5% 0%,  rgba(200,255,87,.055) 0%,transparent 55%),
    radial-gradient(ellipse 60% 70% at 105% 100%,rgba(87,200,255,.04) 0%,transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(167,139,250,.018) 0%,transparent 60%);
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(37,43,62,.25) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,43,62,.25) 1px,transparent 1px);
  background-size:56px 56px;
}

.makerjp-locale-bar{
  position:relative;z-index:201;
  display:flex;justify-content:flex-end;align-items:center;gap:10px;
  padding:10px 36px 0;
}
.makerjp-locale-bar label{
  display:flex;align-items:center;gap:7px;
  font-family:'DM Mono',monospace;
  font-size:9px;letter-spacing:1px;text-transform:uppercase;
  color:var(--tx2);
}
.makerjp-locale-bar select{
  background:var(--ink4);color:var(--tx);
  border:1px solid var(--rim2);border-radius:7px;
  padding:7px 10px;font-family:'DM Sans',sans-serif;font-size:12px;
  outline:none;
}
.makerjp-locale-bar select:focus{
  border-color:var(--lime);
  box-shadow:0 0 0 3px var(--lime-a);
}

header{
  position:sticky;top:0;z-index:200;
  height:58px;padding:0 36px;
  background:rgba(11,13,20,.82);
  backdrop-filter:blur(24px) saturate(1.4);
  border-bottom:1px solid var(--rim);
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;cursor:pointer;user-select:none;text-decoration:none}
.logo img{
  height:250px;
  width:auto;
  border-radius:6px;
  transition:filter .2s, transform .2s;
}
.logo:hover img{
  filter:brightness(1.15);
  transform:scale(1.03);
}
.h-right{display:flex;align-items:center;gap:8px}
.h-chip{
  font-family:'DM Mono',monospace;
  font-size:10px;letter-spacing:1.2px;text-transform:uppercase;
  padding:4px 11px;border-radius:20px;
  border:1px solid var(--rim2);color:var(--tx3);
  background:var(--ink3);
}
.h-chip.on{
  border-color:rgba(200,255,87,.3);
  color:var(--lime);background:var(--lime-a);
}
.h-chip.on::before{content:'● ';animation:pulse-dot 1.6s ease infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}

.h-help{
  width:28px;height:28px;border-radius:50%;
  background:var(--ink4);border:1px solid var(--rim2);
  color:var(--tx3);font-family:'DM Sans',sans-serif;
  font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;
}
.h-help:hover{border-color:var(--lime);color:var(--lime);background:var(--lime-a)}

.help-modal{
  display:none;position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
  z-index:1000;align-items:center;justify-content:center;padding:20px;
}
.help-modal.show{display:flex}
.help-modal-content{
  background:var(--ink3);border:1px solid var(--rim);
  border-radius:var(--r-card);max-width:500px;width:100%;
  max-height:80vh;overflow-y:auto;
  box-shadow:var(--shadow-lg);animation:rise .3s ease;
}
.help-modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--rim);
}
.help-title{font-family:'DM Mono',monospace;font-size:14px;font-weight:600;color:var(--lime);letter-spacing:-.2px}
.help-close{background:none;border:none;color:var(--tx3);font-size:16px;cursor:pointer;padding:5px;border-radius:5px;transition:all .2s}
.help-close:hover{color:var(--rose);background:var(--rose-a)}
.help-modal-body{padding:20px 22px 28px;color:var(--tx2);font-size:13px;line-height:1.7}
.help-modal-body h3{color:var(--tx);font-size:15px;font-weight:600;margin:22px 0 8px;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}
.help-modal-body h3:first-of-type{margin-top:0}
.help-modal-body p{margin:6px 0 6px 18px;position:relative}
.help-modal-body p::before{content:'•';color:var(--lime);font-weight:700;position:absolute;left:-12px}

.nav-bar{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:2px;
  padding:20px 36px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.nav-bar::-webkit-scrollbar{display:none}
.nav-tab{
  display:flex;align-items:center;gap:7px;
  padding:9px 18px;
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  font-size:13px;font-weight:600;
  cursor:pointer;color:var(--tx3);
  transition:all .2s;border:none;
  background:transparent;font-family:'DM Sans',sans-serif;
  border:1px solid transparent;border-bottom:none;
  position:relative;bottom:-1px;
}
.nav-tab .n-ico{font-size:15px;opacity:.6;transition:opacity .2s}
.nav-tab:hover{color:var(--tx2)}
.nav-tab:hover .n-ico{opacity:1}
.nav-tab.active{
  background:var(--ink2);
  color:var(--tx);
  border-color:var(--rim);
}
.nav-tab.active .n-ico{opacity:1}
.nav-badge{
  font-family:'DM Mono',monospace;font-size:9px;
  background:var(--lime-a);border:1px solid rgba(200,255,87,.25);
  color:var(--lime);padding:1px 6px;border-radius:10px;
  display:none;
}
.tab-divider{flex:1;border-bottom:1px solid var(--rim)}

main{
  position:relative;z-index:1;
  background:var(--ink2);
  border-top:1px solid var(--rim);
  min-height:calc(100vh - 58px - 46px);
}
.panel{display:none}
.panel.active{display:block}
.panel-inner{
  max-width:1500px;margin:0 auto;
  padding:32px 36px 72px;
}

.hero{
  margin-bottom:32px;
  animation:rise .55s cubic-bezier(.22,1,.36,1) both;
}
.hero-eyebrow{
  font-family:'DM Mono',monospace;
  font-size:10px;letter-spacing:3px;text-transform:uppercase;
  color:var(--lime);margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
}
.hero-eyebrow::before{content:'';width:18px;height:1px;background:var(--lime)}
.hero h1{
  font-size:clamp(30px,4vw,54px);
  font-weight:700;letter-spacing:-2px;line-height:1.04;
  margin-bottom:10px;
}
.hero h1 .gr{
  background:linear-gradient(120deg,var(--lime) 0%,var(--sky) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero p{color:var(--tx2);font-size:15px;line-height:1.65;letter-spacing:-.1px}

.app-grid{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:18px;
  align-items:start;
}
.left-col{display:flex;flex-direction:column;gap:14px}
.right-col{display:flex;flex-direction:column;gap:14px}

.card{
  background:var(--ink3);
  border:1px solid var(--rim);
  border-radius:var(--r-card);
  padding:22px;
  position:relative;overflow:hidden;
  animation:rise .55s cubic-bezier(.22,1,.36,1) both;
}
.card[data-accent]::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  border-radius:var(--r-card) var(--r-card) 0 0;
}
.card[data-accent="lime"]::before{background:linear-gradient(90deg,var(--lime),transparent 70%)}
.card[data-accent="sky"]::before{background:linear-gradient(90deg,var(--sky),transparent 70%)}
.card[data-accent="rose"]::before{background:linear-gradient(90deg,var(--rose),transparent 70%)}
.card[data-accent="violet"]::before{background:linear-gradient(90deg,var(--violet),transparent 70%)}
.card[data-accent="amber"]::before{background:linear-gradient(90deg,var(--amber),transparent 70%)}

.card-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;
}
.card-label{
  font-family:'DM Mono',monospace;
  font-size:9.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--tx2);
  display:flex;align-items:center;gap:7px;
}
.cl-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field-full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:5px}
.field-label{
  font-family:'DM Mono',monospace;font-size:9px;
  letter-spacing:1.8px;text-transform:uppercase;color:var(--tx2);
}
.field-input{
  background:var(--ink4);border:1px solid var(--rim);
  border-radius:var(--r-xs);
  color:var(--tx);font-family:'DM Sans',sans-serif;
  font-size:13px;padding:9px 12px;
  outline:none;transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;
}
.field-input:focus{
  border-color:var(--lime);
  box-shadow:0 0 0 3px var(--lime-a);
}
.field-input::placeholder{color:var(--tx4)}

.drop-zone{
  border:1.5px dashed var(--rim2);
  border-radius:14px;padding:36px 20px;
  text-align:center;cursor:pointer;
  transition:all .25s;
  background:var(--ink4);
  position:relative;overflow:hidden;
}
.drop-zone::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,var(--lime-b) 0%,transparent 65%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.drop-zone:hover,.drop-zone.over{border-color:var(--lime);background:var(--ink3)}
.drop-zone:hover::before,.drop-zone.over::before{opacity:1}
.dz-ico{width:52px;height:52px;margin:0 auto 14px;animation:bob 4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.dz-title{font-size:15px;font-weight:600;margin-bottom:5px;letter-spacing:-.2px}
.dz-sub{color:var(--tx2);font-size:12px;margin-bottom:16px;line-height:1.5}
.btn-choose{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--lime);color:var(--ink);
  font-family:'DM Sans',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.3px;
  padding:10px 20px;border-radius:8px;
  border:none;cursor:pointer;transition:all .2s;
  box-shadow:0 4px 16px rgba(200,255,87,.25);
}
.btn-choose:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(200,255,87,.35);filter:brightness(1.05)}
.ext-pills{display:flex;gap:5px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.ext-pill{
  font-family:'DM Mono',monospace;font-size:9px;
  background:var(--ink3);border:1px solid var(--rim);
  color:var(--tx3);padding:2px 8px;border-radius:4px;
}

.file-loaded{
  display:none;align-items:center;gap:12px;
  padding:11px 14px;
  background:var(--lime-a);border:1px solid rgba(200,255,87,.2);
  border-radius:10px;margin-bottom:12px;
}
.file-loaded.show{display:flex}
.fl-icon{
  width:36px;height:36px;background:var(--lime-a);
  border-radius:8px;display:grid;place-items:center;
  font-size:16px;flex-shrink:0;
}
.fl-info{flex:1;min-width:0}
.fl-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-meta{font-family:'DM Mono',monospace;font-size:10px;color:var(--tx2);margin-top:2px}
.fl-remove{
  background:none;border:none;color:var(--tx3);cursor:pointer;
  font-size:15px;padding:4px;border-radius:5px;transition:all .2s;line-height:1;
}
.fl-remove:hover{color:var(--rose);background:var(--rose-a)}

.progress{margin-top:12px;display:none}
.progress.show{display:block}
.progress-row{
  display:flex;justify-content:space-between;
  font-family:'DM Mono',monospace;font-size:10px;
  color:var(--tx2);margin-bottom:5px;
}
.progress-track{height:3px;background:var(--rim);border-radius:2px;overflow:hidden}
.progress-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--lime),var(--sky));
  border-radius:2px;transition:width .25s ease;
}

.section-title{
  font-family:'DM Mono',monospace;font-size:9px;
  letter-spacing:2px;text-transform:uppercase;
  color:var(--tx2);margin-bottom:10px;padding-bottom:7px;
  border-bottom:1px solid var(--rim);
}
.params-sect{margin-bottom:16px}

.mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mat-chip{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 5px;background:var(--ink4);
  border:1.5px solid var(--rim);border-radius:10px;
  cursor:pointer;transition:all .2s;
  position:relative;overflow:hidden;
}
.mat-chip::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:2px;background:var(--mc,var(--lime));
  transform:scaleX(0);transition:transform .2s;
  transform-origin:left;
}
.mat-chip:hover{background:var(--ink3);border-color:var(--rim2)}
.mat-chip.sel{border-color:var(--mc,var(--lime));background:var(--ink3)}
.mat-chip.sel::after{transform:scaleX(1)}
.mat-dot{width:11px;height:11px;border-radius:50%;background:var(--mc,var(--lime))}
.mat-name{font-size:11px;font-weight:700;letter-spacing:.2px}
.mat-price{
  font-family:'DM Mono',monospace;font-size:9px;color:var(--tx2);
  display:flex;align-items:center;gap:3px;
  border-radius:4px;padding:1px 5px;transition:background .2s,color .2s;
  cursor:text;
}
.mat-price:hover{background:var(--lime-a);color:var(--lime)}
.mat-price .ep{font-size:8px;opacity:0;transition:opacity .15s;line-height:1}
.mat-price:hover .ep{opacity:.6}
.mat-price-inp{
  font-family:'DM Mono',monospace;font-size:11px;font-weight:600;
  width:54px;background:var(--ink);
  border:1.5px solid var(--lime);border-radius:5px;
  color:var(--lime);text-align:center;
  padding:2px 4px;outline:none;
  box-shadow:0 0 0 3px var(--lime-a);
  -webkit-appearance:none;
}
.mat-price-inp::-webkit-inner-spin-button,
.mat-price-inp::-webkit-outer-spin-button{-webkit-appearance:none}
.mat-chip .edit-badge{
  position:absolute;top:4px;right:5px;
  font-size:7px;opacity:0;transition:opacity .2s;
  color:var(--tx4);pointer-events:none;font-family:'DM Mono',monospace;
}
.mat-chip:hover .edit-badge{opacity:1}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group label{
  font-family:'DM Mono',monospace;font-size:9px;
  letter-spacing:1.8px;text-transform:uppercase;color:var(--tx2);
}
.inp{
  background:var(--ink4);border:1px solid var(--rim);
  border-radius:var(--r-xs);color:var(--tx);
  font-family:'DM Mono',monospace;font-size:13px;font-weight:500;
  padding:9px 11px;outline:none;
  transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;width:100%;
}
.inp:focus{border-color:var(--lime);box-shadow:0 0 0 3px var(--lime-a)}
.inp option{background:var(--ink4)}
select.inp{cursor:pointer}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}

.slider-group{margin-bottom:12px}
.slider-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.slider-label{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.8px;text-transform:uppercase;color:var(--tx2)}
.slider-val{
  font-family:'DM Mono',monospace;font-size:12px;font-weight:500;
  color:var(--lime);background:var(--lime-a);
  padding:2px 8px;border-radius:5px;
}
input[type=range]{
  -webkit-appearance:none;width:100%;height:4px;
  background:var(--rim);border-radius:2px;outline:none;
  cursor:pointer;border:none;padding:0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;
  border-radius:50%;background:var(--lime);
  border:2px solid var(--ink);cursor:pointer;
  box-shadow:0 0 8px rgba(200,255,87,.4);
  transition:transform .15s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.3)}

/* ═══════════════════════════════════════
   SMART DEBOUNCE INDICATOR — NEW
═══════════════════════════════════════ */
.calc-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .5px;
  border: 1px solid transparent;
  transition: all .3s ease;
  min-height: 34px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
.calc-status-bar.visible {
  opacity: 1;
  transform: translateY(0);
}
.calc-status-bar.idle {
  background: var(--lime-a);
  border-color: rgba(200,255,87,.2);
  color: var(--lime);
}
.calc-status-bar.pending {
  background: var(--amber-a);
  border-color: rgba(255,179,71,.2);
  color: var(--amber);
}
.calc-status-bar.calculating {
  background: var(--sky-a);
  border-color: rgba(87,200,255,.2);
  color: var(--sky);
}
.calc-status-bar.error {
  background: var(--rose-a);
  border-color: rgba(255,107,138,.2);
  color: var(--rose);
}
.csb-left { display: flex; align-items: center; gap: 7px; }
.csb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.calc-status-bar.pending .csb-dot {
  animation: dot-pulse 0.8s ease-in-out infinite;
}
.calc-status-bar.calculating .csb-dot {
  animation: dot-spin-pulse 0.6s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.6); }
}
@keyframes dot-spin-pulse {
  0%, 100% { opacity: 1; transform: scale(1.2); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* Countdown bar under the status */
.csb-countdown {
  width: 48px; height: 2px;
  background: var(--rim);
  border-radius: 1px;
  overflow: hidden;
  flex-shrink: 0;
}
.csb-countdown-fill {
  height: 100%;
  background: currentColor;
  border-radius: 1px;
  width: 100%;
  transition: width linear;
  opacity: .7;
}

/* Changed field highlight */
.inp.changed, .field-input.changed {
  border-color: rgba(255,179,71,.5) !important;
  box-shadow: 0 0 0 2px rgba(255,179,71,.1) !important;
  animation: field-flash .4s ease both;
}
@keyframes field-flash {
  0%   { background: rgba(255,179,71,.15); }
  100% { background: var(--ink4); }
}
input[type=range].changed {
  outline: 2px solid rgba(255,179,71,.35);
  outline-offset: 3px;
  border-radius: 3px;
  animation: field-flash .4s ease both;
}

/* Results shimmer during recalc */
.kpi.recalc .kpi-val {
  opacity: .35;
  animation: shimmer 0.8s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { opacity: .35; }
  50% { opacity: .6; }
}

.btn-calc{
  width:100%;padding:13px;margin-top:6px;
  background:var(--ink4);border:1px solid var(--rim2);
  border-radius:10px;color:var(--tx3);
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.2px;cursor:pointer;
  transition:all .25s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-calc.ready{
  background:linear-gradient(135deg,var(--lime-a),rgba(87,200,255,.06));
  border-color:rgba(200,255,87,.4);color:var(--lime);
}
.btn-calc.ready:hover{
  background:var(--lime);color:var(--ink);
  border-color:transparent;
  box-shadow:0 6px 28px rgba(200,255,87,.25);
  transform:translateY(-1px);
}
.btn-calc.calculating-state {
  border-color: rgba(87,200,255,.4);
  color: var(--sky);
  background: var(--sky-a);
  cursor: not-allowed;
  animation: calc-pulse 1s ease-in-out infinite;
}
@keyframes calc-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(87,200,255,0); }
  50% { box-shadow: 0 0 0 4px rgba(87,200,255,.12); }
}

#cv-wrap{
  width:100%;height:360px;
  background:
    radial-gradient(ellipse at 35% 40%,rgba(200,255,87,.02) 0%,transparent 55%),
    radial-gradient(ellipse at 70% 70%,rgba(87,200,255,.02) 0%,transparent 55%),
    var(--ink4);
  border-radius:12px;
  position:relative;overflow:hidden;
}
#cv-wrap canvas{width:100%!important;height:100%!important;border-radius:12px}
.v-empty{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;pointer-events:none;
}
.v-empty-ico{font-size:44px;opacity:.06;animation:bob 5s ease-in-out infinite}
.v-empty p{font-size:12px;color:var(--tx3)}
.v-empty small{font-family:'DM Mono',monospace;font-size:10px;color:var(--tx4)}
.v-ctrl{
  position:absolute;top:10px;right:10px;
  display:none;flex-direction:column;gap:5px;z-index:5;
}
.v-btn{
  width:28px;height:28px;
  background:rgba(11,13,20,.8);backdrop-filter:blur(8px);
  border:1px solid var(--rim2);border-radius:6px;
  color:var(--tx3);font-size:12px;cursor:pointer;
  display:grid;place-items:center;transition:all .2s;
}
.v-btn:hover{border-color:var(--lime);color:var(--lime)}
.v-stats{
  position:absolute;bottom:10px;left:10px;
  font-family:'DM Mono',monospace;font-size:9.5px;
  color:var(--tx1);background:transparent;
  backdrop-filter:blur(8px);
  padding:5px 10px;border-radius:6px;
  border:1px solid var(--rim);
  display:none;gap:12px;
}
.v-hint{
  font-family:'DM Mono',monospace;font-size:9.5px;
  color:var(--tx4);text-align:center;margin-top:8px;
  letter-spacing:.3px;display:none;
}

.res-wrapper{display:none}
.res-wrapper.show{display:block}

.kpi-strip{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:10px;margin-bottom:18px;
}
.kpi{
  background:var(--ink4);border:1px solid var(--rim);
  border-radius:14px;padding:14px 13px;
  position:relative;overflow:hidden;
  transition:transform .2s,border-color .2s;cursor:default;
}
.kpi::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:2px;background:var(--kc,var(--lime));
}
.kpi:hover{transform:translateY(-2px);border-color:var(--kc,var(--lime))}
.kpi-label{
  font-family:'DM Mono',monospace;font-size:8.5px;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--tx3);margin-bottom:8px;
}
.kpi-val{
  font-family:'DM Mono',monospace;
  font-size:21px;font-weight:500;line-height:1;
  color:var(--kc,var(--lime));
  margin-bottom:3px;
  animation:pop .4s ease both;
}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.kpi-sub{font-family:'DM Mono',monospace;font-size:9px;color:var(--tx4)}

.res-bottom{display:grid;grid-template-columns:1fr 360px;gap:14px}

.breakdown{
  background:var(--ink4);border:1px solid var(--rim);
  border-radius:12px;overflow:hidden;
}
.brow{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 15px;font-size:13px;
  transition:background .15s;
}
.brow:hover{background:rgba(255,255,255,.018)}
.brow+.brow{border-top:1px solid var(--rim)}
.brow-left{display:flex;align-items:center;gap:9px;color:var(--tx2)}
.brow-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.brow-val{font-family:'DM Mono',monospace;font-weight:500;font-size:13px}
.brow-total{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 15px;
  background:rgba(200,255,87,.05);
  border-top:1px solid rgba(200,255,87,.15);
}
.brow-total-label{font-size:13px;font-weight:600}
.brow-total-val{font-family:'DM Mono',monospace;font-size:19px;font-weight:500;color:var(--lime)}

.quote-panel{
  background:var(--ink4);border:1px solid var(--rim);
  border-radius:12px;padding:18px;
  display:flex;flex-direction:column;gap:14px;
}
.qp-title{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}

.sell-disp{
  background:var(--ink);border:1px solid var(--rim);
  border-radius:10px;padding:16px;text-align:center;
}
.sell-label{
  font-family:'DM Mono',monospace;font-size:9px;
  letter-spacing:2px;text-transform:uppercase;
  color:var(--tx3);margin-bottom:7px;
}
.sell-price{
  font-family:'DM Mono',monospace;font-size:36px;
  font-weight:500;letter-spacing:-1px;
  color:var(--sky);transition:all .3s;
  line-height:1;
}
.sell-info{
  font-family:'DM Mono',monospace;font-size:10px;
  color:var(--tx3);margin-top:5px;
}

.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn-action{
  padding:11px;border-radius:9px;
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;
  cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid transparent;
}
.btn-pdf{
  background:linear-gradient(135deg,var(--lime),#a8e832);
  color:var(--ink);box-shadow:0 4px 16px rgba(200,255,87,.2);
}
.btn-pdf:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(200,255,87,.3)}
.btn-copy{
  background:var(--ink3);border-color:var(--rim2);color:var(--tx2);
}
.btn-copy:hover{border-color:var(--sky);color:var(--sky)}
.btn-save{
  grid-column:1/-1;
  background:var(--ink3);border-color:var(--rim2);color:var(--tx2);
  padding:10px;
}
.btn-save:hover{border-color:var(--violet);color:var(--violet)}

.monthly-box{
  background:rgba(167,139,250,.05);
  border:1px solid rgba(167,139,250,.18);
  border-radius:10px;padding:14px;
  margin-top:14px;
}
.monthly-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.mon-kpi{background:var(--ink);border:1px solid var(--rim);border-radius:8px;padding:10px 12px}
.mon-kpi .mk-label{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--tx3);margin-bottom:6px}
.mon-kpi .mk-val{font-family:'DM Mono',monospace;font-size:16px;font-weight:500}
.mon-time{font-family:'DM Mono',monospace;font-size:10px;color:var(--tx3);text-align:center;margin-top:8px}

.hist-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.hist-empty{
  text-align:center;padding:56px 20px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.hist-empty-ico{font-size:40px;opacity:.15}
.hist-empty-text{color:var(--tx3);font-size:14px;font-weight:500}
.hist-empty-sub{color:var(--tx4);font-size:12px}
.hist-grid{display:flex;flex-direction:column;gap:8px}
.hist-card{
  background:var(--ink3);border:1px solid var(--rim);
  border-radius:12px;padding:14px 16px;
  display:flex;align-items:center;gap:14px;
  cursor:pointer;transition:all .2s;
}
.hist-card:hover{border-color:var(--rim2);background:var(--ink4)}
.hist-icon{
  width:40px;height:40px;background:var(--ink4);
  border-radius:9px;display:grid;place-items:center;
  font-size:18px;flex-shrink:0;
}
.hist-info{flex:1;min-width:0}
.hist-name{font-weight:600;font-size:13px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-meta{font-family:'DM Mono',monospace;font-size:10px;color:var(--tx2)}
.hist-amounts{text-align:right;flex-shrink:0}
.hist-cost{font-family:'DM Mono',monospace;font-size:15px;font-weight:500;color:var(--lime)}
.hist-sell{font-family:'DM Mono',monospace;font-size:10px;color:var(--sky);margin-top:2px}
.hist-del{
  background:none;border:none;color:var(--tx4);
  cursor:pointer;font-size:13px;padding:5px;
  border-radius:5px;transition:all .2s;flex-shrink:0;
}
.hist-del:hover{color:var(--rose);background:var(--rose-a)}
.btn-sm{
  padding:7px 13px;background:var(--ink4);border:1px solid var(--rim);
  border-radius:7px;color:var(--tx3);
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;
  cursor:pointer;transition:all .2s;
}
.btn-sm:hover{border-color:var(--rim2);color:var(--tx)}
.btn-sm.danger:hover{border-color:var(--rose);color:var(--rose)}

.toast{
  position:fixed;bottom:22px;right:22px;z-index:9999;
  background:var(--ink3);border:1px solid var(--rim2);
  border-radius:12px;padding:12px 16px;
  font-size:13px;font-weight:500;
  display:flex;align-items:center;gap:9px;
  transform:translateY(80px);opacity:0;
  transition:all .32s cubic-bezier(.22,1,.36,1);
  box-shadow:var(--shadow);max-width:300px;
}
.toast.show{transform:translateY(0);opacity:1}
.toast.ok{border-color:rgba(200,255,87,.3)}
.toast.err{border-color:rgba(255,107,138,.3)}
.toast.info{border-color:rgba(87,200,255,.3)}
.toast-ico{font-size:16px}

@keyframes rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:1200px){
  .app-grid{grid-template-columns:350px 1fr}
  .kpi-strip{grid-template-columns:repeat(3,1fr)}
  .res-bottom{grid-template-columns:1fr}
}

/* ── TABLET ── */
@media(max-width:900px){
  .app-grid{grid-template-columns:1fr}
  .panel-inner{padding:20px 16px 64px}
  header{padding:0 16px}
  .nav-bar{padding:12px 16px 0;gap:2px;overflow-x:auto;flex-wrap:nowrap}
  .nav-tab{padding:8px 13px;font-size:12px;white-space:nowrap}
  .kpi-strip{grid-template-columns:1fr 1fr}
  .mat-grid{grid-template-columns:repeat(3,1fr)}
  .res-bottom{grid-template-columns:1fr}
  #cv-wrap{height:280px}
  .hero h1{font-size:28px;letter-spacing:-1px}
  .hero p{font-size:14px}
}

/* ── MOBILE ── */
@media(max-width:600px){
  header{height:50px;padding:0 14px}
  .h-chip{display:none}
  .h-chip.on{display:inline-flex}

  .nav-bar{padding:10px 10px 0;gap:1px}
  .nav-tab{padding:7px 10px;font-size:11px}
  .n-ico{font-size:13px !important}

  .panel-inner{padding:16px 12px 72px}
  .card{padding:16px}
  .hero{margin-bottom:20px}
  .hero h1{font-size:24px;letter-spacing:-.5px}
  .hero-eyebrow{font-size:9px}

  /* Grids: 1 coluna */
  .field-grid{grid-template-columns:1fr}
  .field-full{grid-column:1}
  .form-row{grid-template-columns:1fr}
  .kpi-strip{grid-template-columns:1fr 1fr}
  .kpi-val{font-size:17px}
  .mat-grid{grid-template-columns:repeat(2,1fr)}
  .action-grid{grid-template-columns:1fr}
  .monthly-row{grid-template-columns:1fr 1fr}

  /* 3D viewer menor */
  #cv-wrap{height:220px}
  .v-hint{font-size:8.5px}

  /* KPI strip: 2 cols no mobile */
  .kpi{padding:11px 10px}

  /* Breakdown */
  .brow{flex-wrap:wrap;gap:4px}
  .brow-val{font-size:12px}

  /* Sell price */
  .sell-price{font-size:28px}

  /* History */
  .hist-card{padding:11px 12px;gap:10px}
  .hist-icon{width:34px;height:34px;font-size:15px}
  .hist-amounts{display:none}

  /* Toast */
  .toast{bottom:12px;right:12px;left:12px;max-width:none}

  /* Feedback cat tiles: 3 cols */
  #cat-row{grid-template-columns:repeat(3,1fr) !important}
  .cat-tile{padding:12px 6px 10px}
  .ct-ico{font-size:20px}
  .ct-lbl{font-size:9.5px}

  /* Orçamento & Configurações grids */
  .orc-radio{font-size:10px;padding:8px 5px}
}

/* ── EXTRA SMALL ── */
@media(max-width:380px){
  .nav-tab{padding:6px 8px;font-size:10px}
  .hero h1{font-size:21px}
  .kpi-strip{grid-template-columns:1fr 1fr}
  .mat-grid{grid-template-columns:repeat(2,1fr)}
  #cat-row{grid-template-columns:repeat(2,1fr) !important}
}
/* ═══════════════════════════════════════
   FEEDBACK — CATEGORY TILES
═══════════════════════════════════════ */

/* Grid of 5 category tiles */
.cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px 12px;
  background: var(--ink4);
  border: 1.5px solid var(--rim);
  border-radius: 14px;
  cursor: pointer;
  transition: all .22s cubic-bezier(.22,1,.36,1);
  position: relative;
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;
}
/* Top accent line — hidden by default */
.cat-tile::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--ct-accent, var(--lime));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
/* Glow bg on select */
.cat-tile::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--ct-glow, rgba(200,255,87,.08)) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.cat-tile:hover {
  background: var(--ink3);
  border-color: var(--rim2);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.cat-tile.cat-tile-sel {
  background: var(--ink3);
  border-color: var(--ct-accent, var(--lime));
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.cat-tile.cat-tile-sel::before { transform: scaleX(1); }
.cat-tile.cat-tile-sel::after  { opacity: 1; }

.ct-ico {
  font-size: 24px;
  line-height: 1;
  transition: transform .2s;
}
.cat-tile:hover .ct-ico,
.cat-tile.cat-tile-sel .ct-ico { transform: scale(1.18); }

.ct-lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2px;
  text-align: center;
  color: var(--tx3);
  transition: color .2s;
  line-height: 1.2;
}
.cat-tile:hover .ct-lbl { color: var(--tx2); }
.cat-tile.cat-tile-sel .ct-lbl { color: var(--ct-accent, var(--lime)); }

/* ── SEND BUTTON ── */
.fb-send-btn {
  width: 100%;
  padding: 14px 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: all .25s;
  /* default: not-ready state */
  background: var(--ink4);
  border: 1.5px solid var(--rim2);
  color: var(--tx3);
  position: relative;
  overflow: hidden;
}
.fb-send-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--lime-a), rgba(87,200,255,.06));
  opacity: 0;
  transition: opacity .25s;
}
/* ready state — filled when form is valid */
.fb-send-btn.fb-send-ready {
  border-color: rgba(200,255,87,.45);
  color: var(--lime);
  box-shadow: 0 4px 20px rgba(200,255,87,.12);
}
.fb-send-btn.fb-send-ready::before { opacity: 1; }
.fb-send-btn.fb-send-ready:hover {
  background: var(--lime);
  color: var(--ink);
  border-color: transparent;
  box-shadow: 0 6px 28px rgba(200,255,87,.3);
  transform: translateY(-1px);
}
.fb-send-btn.fb-send-ready:hover::before { opacity: 0; }

.fsb-ico   { font-size: 16px; position: relative; z-index: 1; }
.fsb-text  { position: relative; z-index: 1; }
.fsb-arrow {
  margin-left: auto;
  font-size: 16px;
  position: relative; z-index: 1;
  opacity: 0;
  transform: translateX(-6px);
  transition: all .2s;
}
.fb-send-btn.fb-send-ready:hover .fsb-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ── HISTORY ITEMS ── */
.fb-hist-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; border-radius: 9px;
  background: var(--ink4); border: 1px solid var(--rim);
  margin-bottom: 7px; transition: border-color .18s, background .18s;
}
.fb-hist-item:hover { border-color: var(--rim2); background: var(--ink3); }
.fb-cat-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; margin-top: 5px;
}

@media(max-width:1100px){
  #panel-feedback .panel-inner > div[style*="grid-template-columns:1fr 380px"],
  #panel-orcamento .panel-inner > div[style*="grid-template-columns:1fr 380px"],
  #panel-config .panel-inner > div[style*="grid-template-columns:1fr 380px"]{
    grid-template-columns: 1fr !important;
  }
}
@media(max-width:700px){
  #cat-row { grid-template-columns: repeat(3,1fr) !important; }
  /* Orçamento inline grids */
  #panel-orcamento div[style*="grid-template-columns:1fr 1fr 1fr"],
  #panel-orcamento div[style*="grid-template-columns:1fr 1fr"],
  #panel-config div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}
/* ═══════════════════════════════════════
   TOOLTIPS
═══════════════════════════════════════ */
.tip-wrap{position:relative;display:inline-flex;align-items:center;gap:5px}
.tip-icon{
  width:14px;height:14px;border-radius:50%;
  background:var(--ink4);border:1px solid var(--rim2);
  color:var(--tx3);font-size:9px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:help;flex-shrink:0;transition:all .2s;
  font-family:'DM Sans',sans-serif;line-height:1;
}
.tip-icon:hover{border-color:var(--lime);color:var(--lime);background:var(--lime-a)}
.tip-box{
  position:absolute;bottom:calc(100% + 8px);left:0;
  width:220px;
  background:var(--ink2);border:1px solid var(--rim2);
  border-radius:8px;padding:9px 12px;
  font-family:'DM Sans',sans-serif;font-size:11px;
  color:var(--tx2);line-height:1.55;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  pointer-events:none;
  opacity:0;transform:translateY(4px);
  transition:opacity .18s,transform .18s;
  z-index:999;white-space:normal;
  font-weight:400;letter-spacing:0;text-transform:none;
}
.tip-box::after{
  content:'';position:absolute;top:100%;left:14px;
  border:5px solid transparent;
  border-top-color:var(--rim2);
}
.tip-icon:hover + .tip-box,
.tip-wrap:focus-within .tip-box{
  opacity:1;transform:translateY(0);
}


═══════════════════════════════════════ */
.cmp-sort-btn{
  font-family:'DM Mono',monospace;
  font-size:10px;letter-spacing:1.2px;text-transform:uppercase;
  padding:4px 11px;border-radius:20px;
  border:1px solid var(--rim2);
  color:var(--tx2);
  background:var(--ink3);
  cursor:pointer;transition:all .2s;
  display:inline-flex;align-items:center;
  user-select:none;
}
.cmp-sort-btn:hover{color:var(--tx);border-color:var(--rim2)}
.cmp-sort-btn.active{
  border-color:rgba(200,255,87,.3);
  color:var(--lime);
  background:var(--lime-a);
}

.mat-card{
  background:var(--ink3);border:1px solid var(--rim);
  border-radius:var(--r-card);padding:20px;
  position:relative;overflow:hidden;
  transition:transform .2s,border-color .2s;
  cursor:default;
}
.mat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--mc);
}
.mat-card:hover{transform:translateY(-3px);border-color:var(--mc-dim)}

.mat-card-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.mat-badge{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;font-family:'DM Mono',monospace;
  flex-shrink:0;
}
.mat-card-name{font-size:16px;font-weight:700;letter-spacing:-.3px}
.mat-card-full{font-size:11px;color:var(--tx2);margin-top:2px}

.mat-bar-group{margin-bottom:12px}
.mat-bar-label{
  display:flex;justify-content:space-between;
  font-family:'DM Mono',monospace;font-size:9px;
  letter-spacing:1px;text-transform:uppercase;
  color:var(--tx2);margin-bottom:5px;
}
.mat-bar-track{height:6px;background:var(--rim);border-radius:3px;overflow:hidden}
.mat-bar-fill{
  height:100%;border-radius:3px;
  background:var(--mc);
  transition:width .8s cubic-bezier(.4,0,.2,1);
}

.mat-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px}
.mat-tag{
  font-family:'DM Mono',monospace;font-size:9px;
  padding:3px 8px;border-radius:4px;
  background:var(--ink4);border:1px solid var(--rim);
  color:var(--tx2);
}

/* Tabela */
.cmp-th{
  font-family:'DM Mono',monospace;font-size:9px;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--tx2);padding:10px 12px;
  border-bottom:1px solid var(--rim);
  text-align:left;white-space:nowrap;
}
.cmp-td{
  padding:10px 12px;
  border-bottom:1px solid rgba(37,43,62,.5);
  font-size:12px;vertical-align:middle;
}
tr:last-child .cmp-td{border-bottom:none}
tr:hover .cmp-td{background:rgba(255,255,255,.015)}
.cmp-dot{
  display:inline-block;width:8px;height:8px;
  border-radius:50%;margin-right:7px;vertical-align:middle;
}
.cmp-bar-inline{
  display:inline-flex;align-items:center;gap:8px;width:100%;
}
.cmp-bar-sm{
  flex:1;height:4px;background:var(--rim);border-radius:2px;overflow:hidden;
  max-width:80px;
}
.cmp-bar-sm-fill{height:100%;border-radius:2px;transition:width .6s}

.orc-radio {
  padding: 9px 8px;
  background: var(--ink4);
  border: 1.5px solid var(--rim);
  border-radius: 9px;
  color: var(--tx3);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
  line-height: 1.4;
}
.orc-radio:hover { border-color: var(--rim2); color: var(--tx2); background: var(--ink3); }
.orc-radio.sel {
  border-color: var(--lime);
  background: var(--lime-a);
  color: var(--lime);
}

.orc-send-btn {
  width: 100%;
  padding: 14px 20px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: all .25s;
  border: 1.5px solid rgba(37,211,102,.4);
  background: rgba(37,211,102,.08);
  color: #25D366;
  position: relative; overflow: hidden;
}
.orc-send-btn:hover {
  background: #25D366;
  color: #0a1a0a;
  border-color: transparent;
  box-shadow: 0 6px 28px rgba(37,211,102,.3);
  transform: translateY(-1px);
}
.orc-send-btn:disabled {
  opacity: .5; cursor: not-allowed; transform: none;
}

/* ═══════════════════════════════════════
   IMPRESSORAS
═══════════════════════════════════════ */
.printer-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px;
  margin-top:4px;
}
.printer-card {
  background:var(--ink3);border:1px solid var(--rim);
  border-radius:var(--r-card);padding:20px;
  position:relative;overflow:hidden;
  transition:transform .2s,border-color .2s;
  cursor:default;
}
.printer-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--lime),var(--sky));
}
.printer-card:hover { transform:translateY(-2px);border-color:var(--rim2); }
.printer-card.active-printer {
  border-color:rgba(200,255,87,.4);
  background:var(--ink4);
}
.printer-card.active-printer::before {
  background:linear-gradient(90deg,var(--lime),var(--lime));
}
.pc-head {
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:14px;gap:10px;
}
.pc-icon {
  width:42px;height:42px;border-radius:10px;
  background:var(--lime-a);border:1px solid rgba(200,255,87,.2);
  display:grid;place-items:center;font-size:20px;flex-shrink:0;
}
.pc-info { flex:1;min-width:0; }
.pc-name {
  font-size:15px;font-weight:700;letter-spacing:-.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pc-model {
  font-family:'DM Mono',monospace;font-size:9px;
  color:var(--tx3);letter-spacing:.5px;margin-top:2px;
}
.pc-active-badge {
  font-family:'DM Mono',monospace;font-size:8px;
  letter-spacing:1px;text-transform:uppercase;
  background:var(--lime-a);border:1px solid rgba(200,255,87,.3);
  color:var(--lime);padding:2px 8px;border-radius:10px;
  white-space:nowrap;display:none;
}
.printer-card.active-printer .pc-active-badge { display:inline; }

.pc-kpis {
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:7px;margin-bottom:14px;
}
.pc-kpi {
  background:var(--ink4);border:1px solid var(--rim);
  border-radius:8px;padding:8px 10px;text-align:center;
}
.pc-kpi-val {
  font-family:'DM Mono',monospace;font-size:14px;font-weight:500;
  color:var(--kc,var(--lime));line-height:1;margin-bottom:3px;
}
.pc-kpi-label {
  font-family:'DM Mono',monospace;font-size:7.5px;
  letter-spacing:1px;text-transform:uppercase;color:var(--tx4);
}
.pc-actions {
  display:flex;gap:7px;
}
.pc-btn {
  flex:1;padding:8px;border-radius:7px;
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;
  cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:5px;
  border:1px solid var(--rim2);background:var(--ink4);color:var(--tx3);
}
.pc-btn:hover { border-color:var(--rim);color:var(--tx2); }
.pc-btn.pc-use {
  background:var(--lime-a);border-color:rgba(200,255,87,.3);color:var(--lime);
}
.pc-btn.pc-use:hover {
  background:var(--lime);color:var(--ink);border-color:transparent;
}
.printer-card.active-printer .pc-btn.pc-use {
  background:var(--lime);color:var(--ink);border-color:transparent;
}
.pc-btn.pc-del:hover { border-color:var(--rose);color:var(--rose);background:var(--rose-a); }

/* Modal de cadastro */
.printer-modal {
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.75);backdrop-filter:blur(6px);
  z-index:800;align-items:center;justify-content:center;padding:20px;
}
.printer-modal.show { display:flex; }
.pm-box {
  background:var(--ink3);border:1px solid var(--rim);
  border-radius:var(--r-card);width:100%;max-width:540px;
  max-height:90vh;overflow-y:auto;
  box-shadow:var(--shadow-lg);animation:rise .3s ease;
}
.pm-head {
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--rim);position:sticky;top:0;
  background:var(--ink3);z-index:1;
}
.pm-title {
  font-family:'DM Mono',monospace;font-size:13px;font-weight:600;
  color:var(--lime);letter-spacing:-.2px;
}
.pm-close {
  background:none;border:none;color:var(--tx3);
  font-size:16px;cursor:pointer;padding:5px;
  border-radius:5px;transition:all .2s;
}
.pm-close:hover { color:var(--rose);background:var(--rose-a); }
.pm-body { padding:20px 22px 28px; }
.pm-section {
  font-family:'DM Mono',monospace;font-size:8.5px;
  letter-spacing:2px;text-transform:uppercase;
  color:var(--tx3);margin:18px 0 10px;
  padding-bottom:6px;border-bottom:1px solid var(--rim);
}
.pm-section:first-of-type { margin-top:0; }
.pm-row { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px; }
.pm-row.full { grid-template-columns:1fr; }
.pm-group { display:flex;flex-direction:column;gap:5px; }
.pm-label {
  font-family:'DM Mono',monospace;font-size:9px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--tx2);
}
.pm-hint {
  font-family:'DM Mono',monospace;font-size:8px;
  color:var(--tx4);margin-top:2px;
}
.pm-result {
  margin-top:16px;padding:14px;
  background:var(--ink4);border:1px solid var(--rim);
  border-radius:10px;
}
.pm-result-title {
  font-family:'DM Mono',monospace;font-size:8.5px;
  letter-spacing:2px;text-transform:uppercase;
  color:var(--tx3);margin-bottom:10px;
}
.pm-result-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.pm-res-item {
  background:var(--ink);border:1px solid var(--rim);
  border-radius:7px;padding:8px 10px;text-align:center;
}
.pm-res-val {
  font-family:'DM Mono',monospace;font-size:15px;font-weight:500;
  color:var(--lime);line-height:1;margin-bottom:3px;
}
.pm-res-label {
  font-family:'DM Mono',monospace;font-size:7px;
  letter-spacing:1px;text-transform:uppercase;color:var(--tx4);
}
.pm-save-btn {
  width:100%;margin-top:16px;padding:13px;
  background:var(--lime);color:var(--ink);
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:14px;
  border:none;border-radius:10px;cursor:pointer;
  transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.pm-save-btn:hover {
  filter:brightness(1.08);transform:translateY(-1px);
  box-shadow:0 6px 24px rgba(200,255,87,.3);
}

/* Empty state */
.printer-empty {
  text-align:center;padding:60px 20px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.printer-empty-ico { font-size:48px;opacity:.1;animation:bob 5s ease-in-out infinite; }
.printer-empty-txt { font-size:14px;font-weight:600;color:var(--tx3); }
.printer-empty-sub { font-size:12px;color:var(--tx4); }

@media(max-width:600px){
  .printer-grid { grid-template-columns:1fr; }
  .pm-row { grid-template-columns:1fr; }
  .pc-kpis { grid-template-columns:repeat(3,1fr); }
}

/* 3DMakerJP reskin: tema NEON DARK com fundo escuro e cores neon vibrantes.
   Mantem toda a estrutura e funcionalidades originais intactas.

   Paleta Neon:
   - Cyan  #4deeea (77,238,234)
   - Green #74ee15 (116,238,21)
   - Yellow #ffe700 (255,231,0)
   - Magenta #f000ff (240,0,255)
   - Blue  #001eff (0,30,255)
*/
:root{
  --ink:    #0a0a0f;
  --ink2:   #0e0e16;
  --ink3:   #13131f;
  --ink4:   #181829;
  --rim:    #242440;
  --rim2:   #2e2e55;

  --lime:   #4deeea;
  --lime-a: rgba(77,238,234,.12);
  --lime-b: rgba(77,238,234,.06);
  --lime-c: rgba(77,238,234,.03);

  --sky:    #001eff;
  --sky-a:  rgba(0,30,255,.12);

  --rose:   #f000ff;
  --rose-a: rgba(240,0,255,.10);

  --amber:  #ffe700;
  --amber-a:rgba(255,231,0,.12);

  --violet: #74ee15;
  --violet-a:rgba(116,238,21,.10);

  --tx:  #e8e8f0;
  --tx2: #8888aa;
  --tx3: #555577;
  --tx4: #3a3a55;

  --shadow: 0 4px 32px rgba(0,0,0,.55);
  --shadow-lg: 0 12px 60px rgba(0,0,0,.7);
}

body{
  font-family:'DM Sans',sans-serif;
  background:var(--ink);
  color:var(--tx);
}
body::before{
  background:
    radial-gradient(ellipse 80% 60% at -5% 0%,  rgba(77,238,234,.055) 0%,transparent 55%),
    radial-gradient(ellipse 60% 70% at 105% 100%,rgba(0,30,255,.04) 0%,transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(240,0,255,.018) 0%,transparent 60%);
}
body::after{
  background-image:
    linear-gradient(rgba(36,36,64,.35) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,36,64,.35) 1px,transparent 1px);
  background-size:56px 56px;
}
header{
  background:rgba(10,10,15,.82);
  backdrop-filter:blur(24px) saturate(1.4);
  border-bottom:1px solid var(--rim);
  box-shadow:none;
}
.logo img{
  height:250px;
  width:auto;
  border-radius:6px;
  transition:filter .2s, transform .2s;
}
.logo:hover img{
  filter:brightness(1.15);
  transform:scale(1.03);
}
.h-chip{background:var(--ink3);color:var(--tx3);border-color:var(--rim2)}
.h-chip.on{color:var(--lime);background:var(--lime-a);border-color:rgba(77,238,234,.3)}
.nav-bar{background:transparent;padding-bottom:0}
.nav-tab{color:var(--tx3);border-radius:var(--r-sm) var(--r-sm) 0 0}
.nav-tab.active{background:var(--ink2);color:var(--tx);border-color:var(--rim);box-shadow:none}
main{background:var(--ink2);border-top:1px solid var(--rim)}
.card{background:var(--ink3);border-color:var(--rim);box-shadow:var(--shadow)}
.field-input,.inp,.makerjp-locale-bar select{background:var(--ink4);color:var(--tx);border-color:var(--rim)}
.field-input:focus,.inp:focus,.makerjp-locale-bar select:focus{border-color:var(--lime);box-shadow:0 0 0 3px var(--lime-a)}
.btn-calc,.btn-choose,.pm-save-btn,.orc-send-btn,.fb-send-btn{background:var(--lime);color:var(--ink);box-shadow:0 4px 16px rgba(77,238,234,.25)}
.btn-action,.btn-sm,.v-btn,.pc-btn{border-color:var(--rim2);background:var(--ink3);color:var(--tx2)}
.drop-zone,.file-loaded,.mat-chip,.kpi,.brow,.quick-panel,.printer-card{background:var(--ink4);border-color:var(--rim)}
.hero h1 .gr{background:linear-gradient(120deg,var(--lime) 0%,var(--sky) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

#panel-calc .hero{display:block}
.makerjp-locale-bar{
  max-width:1500px;
  margin:22px auto 0;
  padding:14px 18px;
  background:rgba(19,19,31,.9);
  border:1px solid var(--rim);
  border-radius:8px;
  box-shadow:var(--shadow);
}
.makerjp-locale-bar label{
  font-size:11px;
  color:var(--tx2);
  gap:10px;
}
.makerjp-locale-bar span{
  min-width:56px;
  font-weight:700;
}
.makerjp-locale-bar select{
  min-width:160px;
  min-height:38px;
  border-radius:8px;
  font-weight:700;
}
#panel-calc .panel-inner{padding-top:22px}
#panel-calc .app-grid{
  grid-template-columns:1fr;
  grid-template-areas:
    "viewer"
    "model"
    "params"
    "client";
  align-items:start;
  gap:14px;
}
#panel-calc .right-col{grid-area:viewer}
#panel-calc .left-col{display:contents}
#panel-calc .left-col > .card:nth-child(1){grid-area:client}
#panel-calc .left-col > .card:nth-child(2){grid-area:model}
#panel-calc .left-col > .card:nth-child(3){grid-area:params}
#panel-calc .viewer{
  min-height:520px;
  background:
    radial-gradient(ellipse at 35% 40%,rgba(77,238,234,.04) 0%,transparent 55%),
    radial-gradient(ellipse at 70% 70%,rgba(0,30,255,.04) 0%,transparent 55%),
    var(--ink4);
}
#panel-calc #v-canvas{
  min-height:430px;
  background:
    radial-gradient(ellipse at 35% 40%,rgba(77,238,234,.03) 0%,transparent 55%),
    radial-gradient(ellipse at 70% 70%,rgba(0,30,255,.03) 0%,transparent 55%),
    var(--ink4);
  border-color:var(--rim);
}
.v-placeholder{color:var(--tx3)}
.mat-grid{grid-template-columns:repeat(2,1fr)}
.card[data-accent]::before{height:3px}
.card[data-accent="lime"]::before{background:linear-gradient(90deg,var(--lime),transparent 70%)}
.card[data-accent="sky"]::before{background:linear-gradient(90deg,var(--sky),transparent 70%)}
.card[data-accent="rose"]::before{background:linear-gradient(90deg,var(--rose),transparent 70%)}
.card[data-accent="violet"]::before{background:linear-gradient(90deg,var(--violet),transparent 70%)}
.card[data-accent="amber"]::before{background:linear-gradient(90deg,var(--amber),transparent 70%)}
@media(max-width:1100px){
  #panel-calc .app-grid{grid-template-columns:1fr;grid-template-areas:"viewer" "model" "params" "client"}
}