.um310-layout { display:grid; grid-template-columns:minmax(0, 1fr) minmax(300px, .9fr); gap:var(--space-5); align-items:start; }
.um310-panel { min-width:0; }
.um310-field-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-4); }
.um310-field-grid--three { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.um310-field { min-width:0; }
.um310-field .um-label { display:block; margin-bottom:var(--space-2); }
.um310-field .um-input, .um310-field .um-select { width:100%; min-width:0; }
.um310-choice { display:flex; align-items:center; gap:var(--space-2); min-height:48px; color:var(--color-text-sub); font-size:var(--fs-sm); }
.um310-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-5); }
.um310-actions .um-btn { min-height:44px; }
.um310-result { min-width:0; }
.um310-result[hidden] { display:none; }
.um310-result-title { margin:0; font-size:var(--fs-xl); letter-spacing:var(--tracking-title); }
.um310-subtitle { margin:var(--space-5) 0 var(--space-3); font-size:var(--fs-md); }
.um310-result-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-3); margin-top:var(--space-4); }
.um310-result-line { min-width:0; padding:var(--space-3); border-radius:var(--radius-md); background:var(--color-surface-2); }
.um310-result-line span { display:block; color:var(--color-text-sub); font-size:var(--fs-sm); overflow-wrap:anywhere; }
.um310-result-line strong { display:block; margin-top:var(--space-1); font-size:var(--fs-lg); color:var(--color-text); overflow-wrap:anywhere; }
.um310-result-line.is-emphasis { background:var(--color-primary-weak); }
.um310-result-line.is-emphasis strong { color:var(--color-primary); }
.um310-note, .um310-example { margin:var(--space-4) 0 0; color:var(--color-text-sub); font-size:var(--fs-sm); line-height:var(--lh-normal); overflow-wrap:anywhere; }
.um310-example { padding:var(--space-3); border-radius:var(--radius-sm); background:var(--color-surface-2); color:var(--color-text); }
.um310-total { margin:var(--space-4) 0 0; padding:var(--space-4); border-radius:var(--radius-md); background:var(--color-primary-weak); color:var(--color-primary); font-size:var(--fs-lg); font-weight:var(--fw-bold); overflow-wrap:anywhere; }
.um310-table-wrap { max-width:100%; overflow-x:auto; border:1px solid var(--color-border); border-radius:var(--radius-md); }
.um310-table { min-width:720px; margin:0; }
.um310-table th, .um310-table td { vertical-align:top; white-space:normal; }
.um310-source-list { display:grid; gap:var(--space-2); margin:var(--space-4) 0 0; padding:0; list-style:none; }
.um310-source-list a { color:var(--color-primary); font-size:var(--fs-sm); }
.um310-error { margin:var(--space-3) 0 0; padding:var(--space-3); border:1px solid var(--color-danger); border-radius:var(--radius-sm); color:var(--color-danger); background:color-mix(in srgb, var(--color-danger) 10%, var(--color-surface)); font-size:var(--fs-sm); line-height:var(--lh-normal); }
.um310-error[hidden] { display:none; }
.um310-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0; }
@media (max-width:700px) { .um310-layout { grid-template-columns:1fr; } }
@media (max-width:520px) {
    .um310-field-grid, .um310-field-grid--three, .um310-result-grid { grid-template-columns:1fr; }
    .um310-actions .um-btn { flex:1 1 100%; width:100%; }
    .um310-panel { padding:var(--space-4); }
}