.screen-size-page{min-height:100vh}.hero-container{padding-top:var(--spacing-3xl);padding-bottom:var(--spacing-xl);position:relative;z-index:1}.page-header{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.page-title{margin:0;text-align:center;font-family:var(--font-sans);font-size:40px;font-weight:600;letter-spacing:-1.6px;color:var(--theme-ink)}.page-subtitle{margin:0;max-width:680px;text-align:center;font-family:var(--font-sans);font-size:16px;color:var(--theme-body);line-height:24px}.workspace-section{padding-bottom:var(--spacing-xl)}.workspace-grid{display:grid;grid-template-columns:1fr 380px;gap:var(--spacing-2xl);align-items:start}.calculator-card{display:flex;flex-direction:column;gap:var(--spacing-lg);position:sticky;top:calc(var(--header-height) + var(--spacing-lg));min-width:0}.mode-tabs{display:flex;background:var(--theme-canvas-soft-2);border-radius:var(--radius-sm);padding:2px;border:1px solid var(--theme-hairline);gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;max-width:100%;box-sizing:border-box}.mode-tab{display:inline-flex;align-items:center;gap:6px;flex:1;padding:8px 14px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--theme-body);font-family:var(--font-sans);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);white-space:nowrap;justify-content:center}.mode-tab:hover:not(.is-active){color:var(--theme-ink);background:var(--theme-canvas-soft)}.mode-tab.is-active{background:var(--theme-canvas);color:var(--theme-ink);box-shadow:var(--shadow-level-2)}.mode-panel{display:none;flex-direction:column;gap:var(--spacing-md);animation:fade-in .2s cubic-bezier(.16,1,.3,1)}.mode-panel.is-active{display:flex}.info-banner{display:flex;align-items:flex-start;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-link-bg-soft);border-radius:var(--radius-sm);font-size:13px;line-height:18px;color:var(--color-link-deep);border:1px solid rgba(0,112,243,.1)}.info-banner svg,.info-banner i{flex-shrink:0;margin-top:1px}.input-label{font-size:11px;font-weight:600;color:var(--theme-mute);text-transform:uppercase;letter-spacing:.8px}.input-row,.input-group{display:flex;flex-direction:column;gap:6px}.input-wrap{position:relative;width:100%}.input-wrap .form-input{width:100%;height:48px;padding:0 var(--spacing-md);border:1px solid var(--theme-hairline);border-radius:var(--radius-sm);background:var(--theme-canvas);color:var(--theme-ink);font-family:var(--font-sans);font-size:16px;font-weight:500;outline:none;transition:all .2s cubic-bezier(.16,1,.3,1);-moz-appearance:textfield;box-shadow:var(--shadow-level-1)}.input-wrap .form-input::-webkit-outer-spin-button,.input-wrap .form-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-wrap .form-input:focus{border-color:var(--theme-ink);box-shadow:0 0 0 1px var(--theme-ink),var(--shadow-level-2)}.input-unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:500;color:var(--theme-mute);pointer-events:none}.unit-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;background:var(--theme-canvas-soft-2);border-radius:var(--radius-sm);border:1px solid var(--theme-hairline);padding:2px;gap:2px}.unit-btn{padding:4px 10px;border:none;border-radius:var(--radius-xs);background:transparent;color:var(--theme-body);font-family:var(--font-mono);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s ease;line-height:16px}.unit-btn.is-active{background:var(--theme-canvas);color:var(--theme-ink);box-shadow:var(--shadow-level-2)}.unit-btn:hover:not(.is-active){color:var(--theme-ink)}.quick-sizes{display:flex;flex-direction:column;gap:var(--spacing-xs)}.qs-label{font-size:10px;font-weight:500;color:var(--theme-mute);text-transform:uppercase;letter-spacing:.5px}.qs-grid{display:flex;flex-wrap:wrap;gap:6px}.qs-btn{padding:6px 14px;border:1px solid var(--theme-hairline);border-radius:var(--radius-pill-sm);background:var(--theme-canvas);color:var(--theme-body);font-family:var(--font-mono);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-level-1)}.qs-btn:hover{border-color:var(--theme-hairline-strong);background:var(--theme-canvas-soft-2);color:var(--theme-ink)}.qs-btn.is-active{border-color:var(--theme-ink);background:var(--theme-ink);color:var(--theme-canvas);box-shadow:var(--shadow-level-2)}.preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.preset-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px;border:1px solid var(--theme-hairline);border-radius:var(--radius-sm);background:var(--theme-canvas);color:var(--theme-body);font-family:var(--font-sans);cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-level-1)}.preset-btn:hover{border-color:var(--theme-hairline-strong);background:var(--theme-canvas-soft-2);color:var(--theme-ink)}.preset-btn.is-active{border-color:var(--theme-ink);background:var(--theme-canvas-soft-2);color:var(--theme-ink);box-shadow:0 0 0 1px var(--theme-ink) inset,var(--shadow-level-2)}.preset-value{font-size:14px;font-weight:600;line-height:18px}.preset-label{font-size:10px;font-weight:400;opacity:.7;line-height:14px}.custom-ratio-row{display:flex;align-items:center;gap:8px}.custom-ratio-row .input-wrap{flex:1}.custom-ratio-row .form-input{height:40px;font-size:15px;padding-right:var(--spacing-sm)}.ratio-colon{font-size:20px;font-weight:600;color:var(--theme-mute);flex-shrink:0}.apply-btn{flex-shrink:0;height:40px;padding:0 16px}.distance-visual{margin:var(--spacing-md) 0;padding-top:var(--spacing-md)}.distance-bar-container{position:relative;height:12px;background:var(--theme-canvas-soft-2);border-radius:var(--radius-pill);border:1px solid var(--theme-hairline);margin-bottom:var(--spacing-xl);overflow:visible;box-shadow:var(--shadow-level-1) inset}.distance-bar-track{position:relative;width:100%;height:100%}.distance-bar-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#10b981,#3b82f6,#8b5cf6);border-radius:var(--radius-pill);transition:width .3s cubic-bezier(.16,1,.3,1)}.distance-marker{position:absolute;top:-30px;transform:translate(-50%);font-size:10px;font-weight:600;color:var(--theme-mute);white-space:nowrap;text-align:center;transition:left .3s cubic-bezier(.16,1,.3,1)}.dist-marker-label{background:var(--theme-canvas);color:var(--theme-body);padding:2px 8px;border-radius:var(--radius-sm);border:1px solid var(--theme-hairline);font-family:var(--font-mono);font-size:9px;box-shadow:var(--shadow-level-2)}.distance-marker:after{content:"";display:block;width:1px;height:16px;background:var(--theme-hairline-strong);margin:2px auto 0}.distance-values{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--spacing-md)}.dist-row{display:flex;justify-content:space-between;align-items:center;padding:8px var(--spacing-sm);background:var(--theme-canvas);border-radius:var(--radius-sm);border:1px solid var(--theme-hairline);box-shadow:var(--shadow-level-1)}.dist-row-label{font-size:13px;color:var(--theme-body);font-weight:500}.dist-row-value{font-size:14px;font-weight:600;color:var(--theme-ink);font-family:var(--font-mono)}.dist-val-close{color:#10b981}.dist-val-mid{color:#3b82f6}.dist-val-far{color:#8b5cf6}.distance-result{margin-top:var(--spacing-sm)}.dist-verdict{display:flex;align-items:flex-start;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);font-size:14px;line-height:20px;border:1px solid}.dist-verdict svg,.dist-verdict i{flex-shrink:0;margin-top:2px}.dist-verdict.optimal{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}[data-theme=dark] .dist-verdict.optimal{background:#10b9810f;border-color:#10b98140;color:#6ee7b7}.dist-verdict.too-close,.dist-verdict.too-far,.dist-verdict.close-ok{background:#fffbeb;border-color:#fde68a;color:#92400e}[data-theme=dark] .dist-verdict.too-close,[data-theme=dark] .dist-verdict.too-far,[data-theme=dark] .dist-verdict.close-ok{background:#f59e0b0f;border-color:#f59e0b40;color:#fbbf24}.compare-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.compare-item{display:flex;flex-direction:column;gap:var(--spacing-xs);padding:var(--spacing-sm);background:var(--theme-canvas-soft-2);border-radius:var(--radius-sm);border:1px solid var(--theme-hairline)}.compare-header{display:flex;align-items:center;gap:var(--spacing-xs)}.compare-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--theme-ink);color:var(--theme-canvas);font-size:11px;font-weight:700;flex-shrink:0}.compare-badge-sm{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--theme-ink);color:var(--theme-canvas);font-size:10px;font-weight:700;flex-shrink:0}.compare-item-label{font-size:13px;font-weight:600;color:var(--theme-ink);flex:1}.compare-remove{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--theme-hairline);border-radius:50%;background:var(--theme-canvas);color:var(--theme-mute);cursor:pointer;transition:all .2s ease}.compare-remove:hover{color:var(--color-error);border-color:var(--color-error)}.compare-inputs{display:flex;gap:var(--spacing-xs)}.compare-inputs .input-wrap{flex:1}.compare-inputs .form-input{height:38px;font-size:14px;padding-right:36px}.compare-ar-wrap .form-input{font-family:var(--font-mono);font-size:13px}.compare-visual{min-height:160px;background:var(--theme-canvas-soft-2);border-radius:var(--radius-md);border:1px solid var(--theme-hairline);padding:var(--spacing-lg);overflow-x:auto;width:100%;max-width:100%;box-sizing:border-box}.compare-screens-row{display:flex;align-items:flex-end;gap:16px;margin-inline:auto;width:max-content}.compare-screen-wrap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.compare-screen-inner{width:100%;height:100%;background:linear-gradient(135deg,#18181b,#09090b)!important;border:4px solid #18181b!important;border-radius:var(--radius-xs);position:relative;box-shadow:var(--shadow-level-2),inset 0 0 1px #fff3;box-sizing:border-box!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#fff;transition:all .3s cubic-bezier(.16,1,.3,1)}.compare-screen-inner:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#ffffff0f,#fff0 50%);pointer-events:none;z-index:1;border-radius:inherit}.compare-screen-label{font-family:var(--font-sans);font-size:14px;font-weight:700;color:#fff;background:#ffffff1a;padding:2px 8px;border-radius:var(--radius-pill);margin-bottom:2px;border:1px solid rgba(255,255,255,.15);z-index:2}.compare-screen-size{font-family:var(--font-mono);font-size:12px;font-weight:500;color:#ffffffb3;z-index:2}[data-theme=dark] .compare-screen-inner{border-color:#27272a!important;background:linear-gradient(135deg,#27272a,#09090b)!important}.compare-empty{color:var(--theme-mute);font-size:13px;padding:40px 20px;text-align:center;font-family:var(--font-sans)}.compare-table-inner{display:flex;flex-direction:column;font-size:12px;border:1px solid var(--theme-hairline);border-radius:var(--radius-sm);overflow:hidden;width:100%;min-width:460px}.ct-header,.ct-row{display:grid;grid-template-columns:90px 1fr 1fr 1fr 1.2fr;gap:var(--spacing-sm);padding:10px var(--spacing-md)}.ct-header{background:var(--theme-canvas-soft-2);font-weight:600;color:var(--theme-body);border-bottom:1px solid var(--theme-hairline)}.ct-row{border-bottom:1px solid var(--theme-hairline);background:var(--theme-canvas)}.ct-row:last-child{border-bottom:none}.ct-cell{color:var(--theme-body)}.ct-cell-label{color:var(--theme-ink);font-weight:600;display:flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:11px}.ct-cell-val{font-family:var(--font-mono);font-size:11px;font-weight:600;text-align:right}.compare-diag-val{font-family:inherit;font-size:inherit;color:var(--theme-body);margin-left:2px}.ct-diff-pos{color:#10b981;font-weight:600}.ct-diff-neg{color:#ef4444;font-weight:600}.ct-diff-na{color:var(--theme-mute)}.preset-intro{color:var(--theme-mute);margin:0;font-size:13px}.device-search{position:relative}.device-search .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--theme-mute);pointer-events:none;z-index:1}.device-search .form-input{padding-left:38px;height:44px;font-size:15px}.dc-tabs{display:flex;gap:6px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:8px;margin-bottom:12px;scrollbar-width:none;-ms-overflow-style:none;mask-image:linear-gradient(to right,black 82%,transparent 98%);-webkit-mask-image:linear-gradient(to right,black 82%,transparent 98%)}.dc-tabs::-webkit-scrollbar{display:none}.dc-tab{padding:6px 14px;border:1px solid var(--theme-hairline);border-radius:var(--radius-pill-sm);background:var(--theme-canvas);color:var(--theme-body);font-family:var(--font-sans);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap;flex-shrink:0;box-shadow:var(--shadow-level-1)}.dc-tab:hover{border-color:var(--theme-hairline-strong);color:var(--theme-ink)}.dc-tab.is-active{border-color:var(--theme-ink);background:var(--theme-ink);color:var(--theme-canvas);box-shadow:var(--shadow-level-2)}.dc-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:280px;overflow-y:auto;padding-right:4px}.dc-list::-webkit-scrollbar{width:6px}.dc-list::-webkit-scrollbar-track{background:transparent}.dc-list::-webkit-scrollbar-thumb{background:var(--theme-hairline-strong);border-radius:var(--radius-sm)}.dc-item{display:flex;flex-direction:column;gap:1px;padding:8px var(--spacing-sm);border:1px solid var(--theme-hairline);border-radius:var(--radius-sm);background:var(--theme-canvas);color:var(--theme-body);cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);text-align:left;font-family:var(--font-sans);box-shadow:var(--shadow-level-1)}.dc-item:hover{border-color:var(--theme-ink);box-shadow:var(--shadow-level-2)}.dc-item-name{font-size:13px;font-weight:600;color:var(--theme-ink)}.dc-item-meta{font-size:11px;color:var(--theme-mute)}.results-card{margin-top:var(--spacing-sm);padding:var(--spacing-lg);background:var(--theme-canvas-soft-2);border-radius:var(--radius-md);border:1px solid var(--theme-hairline)}.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md)}.copy-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border:1px solid var(--theme-hairline);border-radius:var(--radius-pill-sm);background:var(--theme-canvas);color:var(--theme-body);font-family:var(--font-sans);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-level-1)}.copy-btn:hover{border-color:var(--theme-hairline-strong);color:var(--theme-ink)}.copy-btn.is-copied{border-color:var(--color-success);color:var(--color-success)}.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.result-item{display:flex;flex-direction:column;gap:2px;padding:var(--spacing-sm);background:var(--theme-canvas);border-radius:var(--radius-sm);border:1px solid var(--theme-hairline);box-shadow:var(--shadow-level-1)}.result-item-primary{padding:var(--spacing-md)}.result-item-label{font-size:10px;font-weight:600;color:var(--theme-mute);text-transform:uppercase;letter-spacing:.5px}.result-item-value-lg{font-size:24px;font-weight:700;color:var(--theme-ink);font-family:var(--font-mono);letter-spacing:-.8px}.result-item-value{font-size:16px;font-weight:600;color:var(--theme-ink);font-family:var(--font-mono)}.result-item-unit{font-size:13px;color:var(--theme-mute);font-weight:500}.result-item-unit-small{font-size:11px;color:var(--theme-mute)}.preview-card{display:flex;flex-direction:column;gap:var(--spacing-md);min-width:0}.compare-preview-card{display:none;flex-direction:column;gap:var(--spacing-md);min-width:0;margin-top:var(--spacing-2xl)}.preview-header{text-align:left}.preview-container{display:flex;align-items:center;justify-content:center;min-height:340px;background-color:var(--theme-canvas-soft-2);background-image:radial-gradient(var(--theme-hairline-strong) 1px,transparent 1px);background-size:16px 16px;border-radius:var(--radius-md);border:1px solid var(--theme-hairline);padding:var(--spacing-xl);position:relative}[data-theme=dark] .preview-container{background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px)}.preview-box{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.preview-box-inner{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#18181b,#09090b)!important;border:6px solid #18181b!important;border-radius:var(--radius-sm);transition:all .3s cubic-bezier(.16,1,.3,1);position:relative;box-shadow:0 10px 30px -10px #00000080,inset 0 0 1px #fff3!important;box-sizing:border-box!important}[data-theme=dark] .preview-box-inner{border-color:#27272a!important;box-shadow:0 10px 30px -10px #000c,inset 0 0 1px #ffffff1a!important}.preview-box-inner:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.01) 40%,transparent 40%);pointer-events:none;z-index:2;border-radius:inherit}.preview-dimensions{display:flex;align-items:center;gap:8px;color:#e4e4e7;font-family:var(--font-mono);font-size:14px;font-weight:500;pointer-events:none;z-index:3}.preview-dimensions i{opacity:.6}.dimension-line-h{position:absolute;bottom:calc(100% + 24px);left:0;width:100%;height:1px;background:var(--color-link);opacity:.85}.dimension-line-h:before,.dimension-line-h:after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--color-link)}.dimension-line-h:before{left:0}.dimension-line-h:after{right:0}.dimension-line-h .line-label{position:absolute;left:50%;transform:translate(-50%,-50%);background:var(--theme-canvas-soft-2);padding-inline:6px;font-family:var(--font-mono);font-size:11px;color:var(--color-link);font-weight:600;white-space:nowrap;border-radius:var(--radius-xs);border:1px solid var(--theme-hairline);box-shadow:var(--shadow-level-1)}.dimension-line-v{position:absolute;right:calc(100% + 24px);top:0;height:100%;width:1px;background:var(--color-link);opacity:.85}.dimension-line-v:before,.dimension-line-v:after{content:"";position:absolute;left:-3px;width:7px;height:7px;border-radius:50%;background:var(--color-link)}.dimension-line-v:before{top:0}.dimension-line-v:after{bottom:0}.dimension-line-v .line-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);background:var(--theme-canvas-soft-2);padding-inline:6px;font-family:var(--font-mono);font-size:11px;color:var(--color-link);font-weight:600;white-space:nowrap;border-radius:var(--radius-xs);border:1px solid var(--theme-hairline);box-shadow:var(--shadow-level-1)}.preview-badge{display:inline-flex;align-self:center;background:var(--theme-canvas);border:1px solid var(--theme-hairline);padding:6px var(--spacing-md);border-radius:var(--radius-pill);box-shadow:var(--shadow-level-2);align-items:center;justify-content:center;pointer-events:none;margin-top:var(--spacing-md)}.preview-badge span{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--theme-body)}.quick-ref-section{padding-block:var(--spacing-xl)}.quick-ref-inner{max-width:800px;margin:0 auto}.quick-ref-title{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-md)}.ref-table{display:flex;flex-direction:column;gap:var(--spacing-xl);margin-top:var(--spacing-lg)}.ref-table-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.ref-table-title{margin:0;font-size:16px;font-weight:600;color:var(--theme-ink)}.ref-table-inner{display:flex;flex-direction:column;border:1px solid var(--theme-hairline);border-radius:var(--radius-sm);overflow:hidden;font-size:14px}.rt-header,.rt-row{display:grid;grid-template-columns:80px 1fr 1fr 1fr;gap:var(--spacing-sm);padding:10px var(--spacing-md)}.rt-header{background:var(--theme-canvas-soft-2);font-weight:600;color:var(--theme-body);border-bottom:1px solid var(--theme-hairline)}.rt-row{border-bottom:1px solid var(--theme-hairline);background:var(--theme-canvas)}.rt-row:last-child{border-bottom:none}.rt-diag{font-weight:600;color:var(--theme-ink)}.article-section{background:var(--theme-canvas);border-top:1px solid var(--theme-hairline);padding-block:var(--spacing-3xl)}.article-inner{max-width:800px}.article-main-title{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.article-lead{font-weight:400}.prose h3{margin-top:var(--spacing-2xl);margin-bottom:var(--spacing-sm)}.guide-list{display:flex;flex-direction:column;gap:var(--spacing-sm);padding-left:20px}.guide-list li strong{color:var(--theme-ink)}.faq-mini-list{display:flex;flex-direction:column;margin-top:var(--spacing-lg)}.faq-mini-item{border-bottom:1px solid var(--theme-hairline);overflow:hidden}.faq-mini-q{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) 0;cursor:pointer;font-size:15px;font-weight:500;line-height:22px;color:var(--theme-ink);list-style:none;user-select:none;transition:color .15s ease}.faq-mini-q::-webkit-details-marker{display:none}.faq-mini-q:hover{color:var(--color-link)}.faq-chevron{flex-shrink:0;transition:transform .25s ease;color:var(--theme-mute)}.faq-mini-item[open] .faq-chevron{transform:rotate(180deg)}.faq-mini-a{padding-bottom:var(--spacing-md);animation:fade-in .3s ease}.hidden{display:none!important}.compare-table-wrap{margin-top:var(--spacing-sm);overflow-x:auto}@media(max-width:960px){.workspace-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}.calculator-card{position:static}.preview-container{min-height:280px}.dc-list{grid-template-columns:1fr}}@media(max-width:600px){.compare-preview-card{margin-top:var(--spacing-md)}.mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:2px;overflow-x:visible}.mode-tab{font-size:14px;padding:8px 6px;min-width:0;width:100%;min-height:40px;justify-content:center;text-align:center}.mode-tab i{font-size:16px!important}.result-item-value-lg{font-size:20px}.preset-grid{grid-template-columns:1fr 1fr}.preset-btn{padding:8px 6px;min-height:44px}.custom-ratio-row{flex-wrap:wrap}.custom-ratio-row .form-input{height:44px}#panel-diagonal .qs-grid{display:grid;grid-template-columns:repeat(4,1fr)}#panel-distance .qs-grid{display:grid;grid-template-columns:repeat(3,1fr)}.qs-grid{gap:6px;width:100%}.qs-btn{width:100%;text-align:center;padding:6px 4px;font-size:12px;min-height:34px}.dc-list{grid-template-columns:1fr;max-height:210px}.dc-item{padding:8px 10px;min-height:44px}.compare-screens-row{gap:8px}.ct-header,.ct-row{grid-template-columns:85px 1fr 1fr 1fr 1.1fr;font-size:11px;gap:4px;padding:8px 6px}.ct-cell-label,.ct-cell-val{font-size:11px}.preview-dimensions{font-size:12px}.rt-header,.rt-row{grid-template-columns:60px 1fr 1fr 1fr;font-size:12px}.card-lg{padding:var(--spacing-md)}.workspace-section{padding-bottom:var(--spacing-md)}.hero-container{padding-top:var(--spacing-xl);padding-bottom:var(--spacing-md)}.page-header{gap:6px}.quick-ref-section{padding-block:var(--spacing-md)}.results-card{padding:var(--spacing-md)}.ref-table{gap:var(--spacing-md)}.preview-container{min-height:240px;padding:var(--spacing-md)}.dimension-line-h .line-label,.dimension-line-v .line-label{font-size:9px;padding-inline:4px}.preview-badge{padding:2px 10px}.preview-badge span{font-size:9px}.dc-tabs{gap:4px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}.dc-tab{white-space:nowrap;flex-shrink:0}.input-wrap .form-input{height:44px;font-size:15px}.distance-marker{top:-24px}.dist-marker-label{font-size:8px;padding:1px 4px}.compare-inputs{flex-direction:column;gap:4px}.compare-inputs .form-input,.apply-btn{height:44px}}@media(max-width:480px){.results-grid{grid-template-columns:1fr}.result-item-primary{padding:var(--spacing-sm)}.result-item-value-lg{font-size:18px}.preset-grid{grid-template-columns:1fr 1fr}.preset-btn{padding:6px 4px;min-height:40px}.qs-grid{gap:3px}.qs-btn{padding:5px 6px;font-size:11px;min-height:30px}.preview-container{min-height:240px}.preview-box-inner{border-radius:var(--radius-xs)}.quick-ref-title{font-size:20px;line-height:26px}.rt-header,.rt-row{grid-template-columns:50px 1fr 1fr 1fr;font-size:11px;padding:8px var(--spacing-sm);gap:4px}.ct-header,.ct-row{grid-template-columns:80px 1fr 1fr 1fr 1.1fr;font-size:10px;gap:3px;padding:6px 4px}.ct-cell-label,.ct-cell-val{font-size:10px}.page-subtitle{font-size:14px;line-height:20px}.mode-tab{font-size:13px;padding:6px 4px}.mode-tab i{font-size:15px!important}.custom-ratio-row{gap:4px}.custom-ratio-row .form-input{height:40px;font-size:14px}.info-banner{font-size:12px;padding:8px 10px}.distance-marker{top:-20px}.dist-marker-label{font-size:7px;padding:1px 3px}.device-search .form-input{height:40px;font-size:14px}}@media(max-width:400px){.preset-grid{grid-template-columns:1fr 1fr}.mode-tab{font-size:12px;padding:6px 2px;gap:2px}.mode-tab i{font-size:14px!important}.qs-btn{padding:4px 6px;font-size:10px;min-height:28px}.preset-btn{padding:4px 2px;font-size:11px}.preset-value{font-size:11px}.preset-label{font-size:8px}.ct-header,.ct-row{grid-template-columns:75px 1fr 1fr 1fr 1.1fr;font-size:9px;gap:2px;padding:4px 2px}.ct-cell-label,.ct-cell-val{font-size:9px}.dc-item-name{font-size:12px}.dc-item-meta{font-size:10px}.rt-header,.rt-row{grid-template-columns:40px 1fr 1fr 1fr;font-size:10px;padding:6px var(--spacing-sm)}.preview-container{min-height:220px;padding:var(--spacing-md)}.preview-badge{padding:2px 8px}}