:root{--fl-bg:var(--c-sky-bg);--fl-border:var(--c-sky-border);--fl-text:var(--c-sky-text);--fl-icon-bg:var(--c-sky-icon-bg);}
.app-hero{border-bottom:1px solid var(--color-border);padding:1.25rem 1.5rem 1.1rem;}
.app-hero--sky{background:var(--fl-bg);border-bottom-color:var(--fl-border);}
.app-hero__inner{margin:0 auto;}
.app-hero__title{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;color:var(--fl-text);letter-spacing:-.02em;margin:0 0 .5rem;line-height:1.2;}
.app-hero__desc{font-size:.9rem;color:var(--color-text-secondary);max-width:660px;line-height:1.6;margin:0 0 .85rem;}
.app-hero__chips{display:flex;flex-wrap:wrap;gap:.35rem;}
.hero-chip{display:inline-flex;align-items:center;padding:.22rem .65rem;font-size:.72rem;font-weight:700;background:var(--color-surface);border:1.5px solid var(--fl-border);border-radius:var(--radius-full);color:var(--fl-text);white-space:nowrap;}

.app-wrap{display:grid;grid-template-columns:340px 1fr;gap:1.25rem;align-items:start;margin-top:1.25rem;}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:1rem 1.1rem;margin-bottom:.75rem;}
.card:last-child{margin-bottom:0;}
.card-title{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);margin:0 0 .7rem;}
.card-title-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.3rem;}
.card-title-row .card-title{margin-bottom:0;}
.unit-note{font-weight:600;text-transform:none;letter-spacing:0;color:var(--color-text-muted);}

.field{margin-bottom:.55rem;}
.field:last-child{margin-bottom:0;}
.lbl{display:block;font-size:.75rem;font-weight:600;color:var(--color-text-secondary);margin-bottom:.22rem;}
.num-in{width:100%;padding:.35rem .5rem;font-size:.88rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text-primary);box-sizing:border-box;}
.sel{width:100%;padding:.35rem .4rem;font-size:.88rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text-primary);}

.add-item-btn{padding:.3rem .65rem;font-size:.74rem;font-weight:700;border:1.5px solid var(--fl-border);border-radius:var(--radius-md);background:var(--fl-bg);color:var(--fl-text);cursor:pointer;white-space:nowrap;}
.add-item-btn:hover{opacity:.8;}

.item-card{background:var(--color-bg);border:1.5px solid var(--color-border);border-radius:var(--radius-md);padding:.6rem .75rem;margin-bottom:.4rem;}
.item-card:last-child{margin-bottom:0;}
.item-hdr{display:flex;gap:.35rem;align-items:center;margin-bottom:.4rem;}
.item-hdr .sel{flex:2;font-size:.78rem;}
.item-hdr .item-qty{flex:1;font-size:.78rem;}
.item-remove{background:none;border:none;cursor:pointer;color:var(--color-text-muted);font-size:1.1rem;padding:0 .2rem;line-height:1;}
.item-remove:hover:not(:disabled){color:var(--color-danger);}
.item-remove:disabled{opacity:.3;cursor:not-allowed;}
.item-fields{display:flex;flex-direction:column;gap:.3rem;}
.item-fields .lbl{font-size:.7rem;}
.item-fields .num-in{font-size:.82rem;padding:.28rem .4rem;}

.pane-out{display:flex;flex-direction:column;gap:.75rem;}
.diagram-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:.75rem;min-height:180px;display:flex;align-items:center;justify-content:center;}
.stats-grid{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;}
.stat-cell{padding:.65rem .8rem;border-right:1px solid var(--color-border);}
.stat-cell:last-child{border-right:none;}
.stat-lbl{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:.2rem;}
.stat-val{font-size:1rem;font-weight:800;color:var(--color-text-primary);}
.stat-val.status-pass{color:var(--color-success);}
.stat-val.status-fail{color:var(--color-danger);}

.ratio-bar-track{position:relative;height:.85rem;border-radius:var(--radius-full);background:var(--color-bg);border:1px solid var(--color-border);overflow:visible;margin-bottom:1.1rem;}
.ratio-fill{position:absolute;left:0;top:0;bottom:0;border-radius:var(--radius-full);transition:width .15s;}
.ratio-fill--pass{background:var(--color-success);}
.ratio-fill--fail{background:var(--color-danger);}
.ratio-threshold{position:absolute;top:-2px;bottom:-2px;width:0;border-left:2px dashed var(--color-text-muted);}
.ratio-threshold span{position:absolute;top:1rem;left:0;transform:translateX(-50%);font-size:.7rem;font-weight:700;color:var(--color-text-muted);white-space:nowrap;}
.ratio-note{font-size:.8rem;color:var(--color-text-secondary);margin:0;}

.suggest-pass{font-size:.85rem;color:var(--color-success);margin:0;font-weight:600;}
.suggest-fail{font-size:.85rem;color:var(--color-text-primary);margin:0 0 .6rem;line-height:1.5;}
.suggest-fail strong{color:var(--fl-text);}
.apply-btn{padding:.35rem .75rem;font-size:.78rem;font-weight:700;border:1.5px solid var(--fl-border);border-radius:var(--radius-md);background:var(--fl-bg);color:var(--fl-text);cursor:pointer;}
.apply-btn:hover{opacity:.8;}

.std-box-table{width:100%;border-collapse:collapse;font-size:.82rem;}
.std-box-table th{text-align:left;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);padding:.3rem .4rem;border-bottom:1px solid var(--color-border);}
.std-box-table td{padding:.4rem;border-bottom:1px solid var(--color-border);}
.std-box-table tr:last-child td{border-bottom:none;}
.use-box-btn{padding:.22rem .55rem;font-size:.72rem;font-weight:700;border:1.5px solid var(--fl-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--fl-text);cursor:pointer;}
.use-box-btn:hover{background:var(--fl-bg);}

.badge{display:inline-flex;align-items:center;padding:.15rem .5rem;font-size:.7rem;font-weight:700;border-radius:var(--radius-full);}
.badge-pass{background:var(--color-success-subtle);color:var(--color-success);}
.badge-fail{background:var(--color-danger-subtle);color:var(--color-danger);}
.badge-warn{background:var(--color-warning-subtle);color:var(--color-warning);}
.use-box-btn:disabled{opacity:.4;cursor:not-allowed;}

.saved-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem .1rem;border-bottom:1px solid var(--color-border);font-size:.82rem;}
.saved-row:last-child{border-bottom:none;}
.saved-dims{flex:1;color:var(--color-text-primary);}
.saved-type{color:var(--color-text-muted);font-size:.72rem;}
.saved-remove{background:none;border:none;cursor:pointer;color:var(--color-text-muted);font-size:1.05rem;padding:0 .2rem;line-height:1;}
.saved-remove:hover{color:var(--color-danger);}
.empty-note{font-size:.82rem;color:var(--color-text-muted);margin:0;}

@media(max-width:820px){
  .app-wrap{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .stat-cell:nth-child(2){border-right:none;}
  .stat-cell:nth-child(3),.stat-cell:nth-child(4){border-top:1px solid var(--color-border);}
}