.hidden { display:none!important; }
.ico-drop { border:2px dashed var(--zh-border); border-radius:var(--zh-radius-lg); padding:var(--zh-space-6); text-align:center; cursor:pointer; }
.ico-drop.active { border-color:var(--zh-color-primary); background:var(--zh-bg-subtle); }
.ico-drop:focus-visible,.icon-box:focus-visible,.gender-option:focus-visible { outline:2px solid var(--zh-color-primary); outline-offset:3px; }
.ico-preview { margin-top:var(--zh-space-5); }
.ico-preview img { max-width:100%; max-height:14rem; object-fit:contain; }
.ico-sizes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--zh-space-2); margin:var(--zh-space-3) 0 var(--zh-space-5); }
.icon-box.selected,.tab.active,.gender-option.active { background:var(--zh-bg-subtle); border-color:var(--zh-color-primary); color:var(--zh-color-primary-text); }
.ico-format { margin:var(--zh-space-4) 0; padding:var(--zh-space-3); border:1px solid var(--zh-border); border-radius:var(--zh-radius-md); }
.ico-format label { display:block; margin:var(--zh-space-2) 0; }
#ico-status:not([hidden]),.error-message,.limit-message { margin:var(--zh-space-4) 0; padding:var(--zh-space-4); border:1px solid var(--zh-border); border-radius:var(--zh-radius-md); color:var(--zh-text-danger); }
.tabs,.gender-group,.button-group { display:flex; flex-wrap:wrap; gap:var(--zh-space-3); margin:var(--zh-space-4) 0; }
.tab-content { display:none; }
.tab-content.active { display:block; }
.calculator-container { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--zh-space-5); }
.input-section,.result-section,.history-container { padding:var(--zh-space-5); border:1px solid var(--zh-border); border-radius:var(--zh-radius-lg); background:var(--zh-bg-elevated); min-width:0; margin-bottom:var(--zh-space-5); }
.input-group { margin:var(--zh-space-4) 0; }
.input-group label { display:block; font-weight:600; margin-bottom:var(--zh-space-2); }
.input-container { display:flex; align-items:center; gap:var(--zh-space-2); }
.ic { display:inline-flex; width:1.25em; height:1.25em; vertical-align:middle; flex-shrink:0; }
.ic svg { width:100%; height:100%; }
.result-value { font-size:3rem; font-weight:700; font-variant-numeric:tabular-nums; margin:var(--zh-space-5) 0; }
.result-category { font-weight:600; color:var(--zh-color-primary-text); margin-bottom:var(--zh-space-5); }
.advice-content,.calculation-status { color:var(--zh-text-secondary); line-height:1.7; }
.gender-option { border:1px solid var(--zh-border); padding:var(--zh-space-3) var(--zh-space-5); border-radius:var(--zh-radius-md); cursor:pointer; }
.history-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--zh-space-4); }
.history-card { padding:var(--zh-space-4); border:1px solid var(--zh-border); border-radius:var(--zh-radius-md); overflow-wrap:anywhere; }
.history-row-number { display:block; font-variant-numeric:tabular-nums; font-weight:700; color:var(--zh-text-secondary); margin-bottom:var(--zh-space-2); }
.history-header { display:grid; grid-template-rows:auto 1.5rem; gap:var(--zh-space-2); margin-bottom:var(--zh-space-3); }
.history-date { font-size:.875rem; color:var(--zh-text-secondary); }
.history-category { font-weight:600; margin:var(--zh-space-3) 0; }
.history-advice { color:var(--zh-text-secondary); line-height:1.6; }
.value-number { font-size:1.5rem; font-variant-numeric:tabular-nums; }
@media(max-width:48rem) { .calculator-container,.history-grid { grid-template-columns:minmax(0,1fr); } .input-section,.result-section,.history-container { padding:var(--zh-space-4); } }