.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:var(--surface);border-bottom:1px solid var(--border);padding:1rem 2rem;position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.header-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}.logo{display:flex;align-items:center;gap:.85rem;cursor:default;-webkit-user-select:none;user-select:none}.logo-icon{font-size:2.2rem;line-height:1}.logo h1{font-size:1.35rem;font-weight:700;color:var(--primary);margin:0;cursor:default}.logo p{font-size:.78rem;color:var(--text-muted);margin:0}.header-right{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.header-badges{display:flex;gap:.4rem;flex-wrap:wrap}.badge{padding:.2rem .65rem;border-radius:999px;font-size:.72rem;font-weight:600;background:var(--surface2);border:1px solid var(--border);color:var(--text-muted);letter-spacing:.02em;white-space:nowrap}.badge-green{border-color:var(--success);color:var(--success)}.badge-purple{border-color:#9b59b6;color:#9b59b6}.badge-orange{border-color:var(--warning);color:var(--warning)}.badge-red{border-color:var(--danger);color:var(--danger)}.app-main{max-width:1400px;margin:0 auto;padding:1.75rem 2rem;display:flex;flex-direction:column;gap:1.5rem;width:100%;flex:1}.config-zone{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;grid-template-areas:"domain  options" "extras  options";gap:1.5rem;align-items:start}.cz-domain{grid-area:domain;display:flex;flex-direction:column;gap:0}.cz-options{grid-area:options;display:flex;flex-direction:column;gap:0}.cz-extras{grid-area:extras;display:flex;flex-direction:column;gap:0}.input-col,.options-col{display:flex;flex-direction:column;gap:0}.output-zone{display:flex;flex-direction:column;gap:0;animation:fadeIn .3s ease}.left-panel{display:flex;flex-direction:column;gap:0}.right-panel{display:flex;flex-direction:column;gap:0;animation:fadeIn .3s ease}.info-panel{display:grid;grid-template-columns:1fr auto 1fr;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1.2rem;gap:0;animation:fadeIn .35s ease}.info-panel-col{display:flex;flex-direction:column;gap:.55rem;padding:0 1.1rem}.info-panel-col:first-child{padding-left:0}.info-panel-col:last-child{padding-right:0}.info-panel-divider{width:1px;background:var(--border);margin:0 .25rem;align-self:stretch}.ip-section-label{display:flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:.1rem}.ip-section-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.ip-section-dot--blue{background:var(--primary)}.ip-section-dot--orange{background:var(--warning)}.ip-count{margin-left:auto;font-size:.65rem;font-weight:700;background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:0 .4rem;color:var(--text-muted);line-height:1.6}.ip-steps-grid{display:grid;grid-template-columns:1fr 1fr;gap:.3rem .75rem}.ip-step{display:flex;align-items:flex-start;gap:.4rem}.ip-step-num{width:17px;height:17px;border-radius:50%;background:var(--primary);color:#fff;font-size:.62rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}.ip-step-label{font-size:.78rem;font-weight:600;color:var(--text);line-height:1.3}.ip-step-hint{font-size:.69rem;color:var(--text-muted);line-height:1.35;margin-top:1px}.ip-limits{display:flex;flex-direction:column;gap:.22rem}.ip-limit-row{display:flex;align-items:baseline;gap:.35rem;padding:.18rem .35rem;border-radius:4px;border-left:2px solid var(--warning);background:color-mix(in srgb,var(--warning) 5%,transparent)}.ip-limit-icon{font-size:.75rem;flex-shrink:0;line-height:1}.ip-limit-short{font-size:.74rem;font-weight:600;color:var(--text);white-space:nowrap;margin-right:.25rem}.ip-limit-detail{font-size:.69rem;color:var(--text-muted);line-height:1.35}.card,.options-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.25rem;margin-bottom:1rem;transition:border-color var(--transition)}.card:hover,.options-card:hover{border-color:color-mix(in srgb,var(--primary) 30%,var(--border))}.card h3,.options-card h3{font-size:.78rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem}.option-row{margin-bottom:.65rem;display:flex;flex-direction:column;gap:.3rem}.option-row>label{font-size:.82rem;color:var(--text-muted);font-weight:500}.text-input{background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:.42rem .75rem;border-radius:var(--radius-sm);font-size:.88rem;width:100%;transition:border-color var(--transition),box-shadow var(--transition)}.text-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}.accordion-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;-webkit-user-select:none;user-select:none;padding:.1rem 0 .65rem;border-bottom:1px solid transparent;transition:border-color var(--transition)}.accordion-header:hover{border-bottom-color:var(--border)}.accordion-header h3{margin-bottom:0}.accordion-chevron{font-size:.75rem;color:var(--text-muted);transition:transform .25s ease;line-height:1}.accordion-chevron.open{transform:rotate(180deg)}.accordion-body{overflow:hidden;transition:max-height .3s ease,opacity .25s ease}.accordion-body.collapsed{max-height:0!important;opacity:0;pointer-events:none}.accordion-body.expanded{opacity:1}.btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem 1.1rem;border-radius:var(--radius-sm);border:none;font-size:.88rem;font-weight:600;cursor:pointer;transition:background var(--transition),opacity var(--transition),transform .1s,box-shadow var(--transition);white-space:nowrap}.btn:active{transform:scale(.97)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark);box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 40%,transparent)}.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--primary);color:var(--primary)}.btn-success{background:var(--success);color:#fff}.btn-danger{background:var(--danger);color:#fff}.btn-sm{padding:.32rem .75rem;font-size:.78rem}.btn-icon{padding:.4rem;border-radius:var(--radius-sm)}.btn-copied{background:var(--success)!important;color:#fff!important;animation:copyPop .3s ease}.toggle-group{display:flex;gap:.35rem;flex-wrap:wrap}.toggle-btn{padding:.28rem .85rem;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text-muted);font-size:.78rem;font-weight:500;cursor:pointer;transition:all var(--transition)}.toggle-btn:hover{border-color:var(--primary);color:var(--primary)}.toggle-btn.active{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700}.checkbox-label{display:flex;align-items:flex-start;gap:.5rem;font-size:.84rem;color:var(--text);cursor:pointer;line-height:1.4}.checkbox-label input[type=checkbox]{margin-top:2px;accent-color:var(--primary);width:15px;height:15px;flex-shrink:0;cursor:pointer}.checkbox-hint{font-size:.72rem;color:var(--text-muted);margin-top:2px;line-height:1.4}.layer7-option{margin-top:.4rem;padding:.55rem .75rem;border-radius:var(--radius-sm);border:1px solid var(--border);transition:all var(--transition)}.layer7-option.active{background:#e0525212;border-color:var(--danger)}.progress-bar-wrap{height:3px;background:var(--surface2);border-radius:2px;overflow:hidden;margin-bottom:1rem}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--success),var(--primary));background-size:400px 100%;animation:shimmer 1.4s linear infinite;border-radius:2px}.skeleton{background:var(--surface2);border-radius:var(--radius-sm);animation:skeleton-pulse 1.6s ease-in-out infinite}.skeleton-line{height:12px;margin-bottom:10px;border-radius:4px}.skeleton-line:last-child{width:65%}.skeleton-block{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);padding:1.25rem;margin-bottom:1rem}.resolved-summary{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.25rem;margin-bottom:1rem;animation:fadeIn .3s ease}.resolved-summary h3{font-size:.78rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.65rem}.domain-chips{display:flex;flex-direction:column;gap:.45rem}.domain-chip{background:var(--surface2);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .75rem;font-size:.8rem;display:flex;flex-direction:column;gap:.2rem;transition:border-color var(--transition),background var(--transition)}.domain-chip:hover{background:var(--surface)}.chip-ok{border-left-color:var(--success)}.chip-error{border-left-color:var(--danger)}.chip-header{display:flex;justify-content:space-between;align-items:center}.chip-domain{font-weight:600;font-size:.82rem}.chip-method{font-size:.66rem;padding:.1rem .4rem;border-radius:4px;font-weight:700;letter-spacing:.02em}.chip-method-asn{background:#5b8def24;color:var(--primary)}.chip-method-dns{background:#4caf7d24;color:var(--success)}.chip-detail{color:var(--text-muted);font-family:var(--mono);font-size:.73rem;word-break:break-all}.chip-detail.error{color:var(--danger)}.method-badge{font-size:.66rem;padding:.1rem .4rem;border-radius:4px;font-weight:700}.tab-bar{display:flex;gap:.4rem;margin-bottom:.85rem}.tab-btn{padding:.45rem 1.1rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text-muted);font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--transition)}.tab-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:700}.tab-btn:hover:not(.active){border-color:var(--primary);color:var(--primary)}.error-banner{display:flex;align-items:center;gap:.5rem;background:#e052521a;border:1px solid var(--danger);border-radius:var(--radius-sm);padding:.65rem 1rem;color:var(--danger);font-size:.88rem;margin-bottom:1rem;animation:fadeIn .3s ease}.warning-stack{display:flex;flex-direction:column;gap:.45rem;margin-bottom:.85rem;animation:fadeIn .3s ease}.warning-item{padding:.6rem .85rem;border-radius:var(--radius-sm);font-size:.79rem;line-height:1.55;color:var(--text);display:flex;gap:.5rem;align-items:flex-start}.warning-icon{font-size:.95rem;margin-top:1px;flex-shrink:0}.kbd{display:inline-block;padding:.1rem .35rem;font-size:.68rem;font-family:var(--mono);background:var(--surface2);border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;color:var(--text-muted);line-height:1.4}.script-toolbar{display:flex;gap:.45rem;margin-bottom:.75rem;flex-wrap:wrap;align-items:center}.script-pre{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;font-family:var(--mono);font-size:.77rem;color:var(--text);overflow-x:auto;white-space:pre;max-height:65vh;overflow-y:auto;line-height:1.65;animation:fadeIn .3s ease}.script-line-comment{color:var(--text-muted)}.script-line-cmd{color:var(--text)}.script-line-add{color:var(--success)}.script-line-remove{color:var(--danger)}@media (max-width: 1100px){.config-zone{grid-template-columns:1fr 1fr;gap:1rem}.info-panel{grid-template-columns:1fr auto 1fr}}@media (max-width: 900px){.app-main{padding:1rem;gap:1rem}.config-zone{grid-template-columns:1fr;grid-template-areas:"domain" "options" "extras";gap:.75rem}.info-panel{grid-template-columns:1fr}.info-panel-divider{width:100%;height:1px;margin:.65rem 0}.info-panel-col{padding:0}.ip-steps-grid{grid-template-columns:1fr}.app-header{padding:.75rem 1rem}.header-inner{flex-direction:column;align-items:flex-start;gap:.5rem}.header-badges{gap:.3rem}}@media (max-width: 600px){.app-main{padding:.75rem;gap:.75rem}.logo h1{font-size:1.1rem}.tab-bar{gap:.3rem}.tab-btn{padding:.4rem .7rem;font-size:.78rem}.script-toolbar{gap:.3rem}.btn-sm{padding:.28rem .6rem;font-size:.74rem}.header-badges{display:none}}:root,[data-theme=dark]{--bg: #0f1117;--surface: #1a1d2e;--surface2: #252840;--border: #2e3150;--text: #e8eaf6;--text-muted: #8b90b8;--primary: #5b8def;--primary-dark: #4a7de8;--success: #4caf7d;--warning: #f0a500;--danger: #e05252;--mono: "Fira Code", "Cascadia Code", monospace;--radius: 12px;--radius-sm: 8px;--shadow: 0 4px 24px rgba(0,0,0,.35);--transition: .2s ease}[data-theme=light]{--bg: #f4f6fb;--surface: #ffffff;--surface2: #eef0f8;--border: #d0d5e8;--text: #1a1d2e;--text-muted: #5a6080;--primary: #3a6fd8;--primary-dark: #2a5fc8;--success: #2e8c5a;--warning: #c07a00;--danger: #c03030;--mono: "Fira Code", "Cascadia Code", monospace;--radius: 12px;--radius-sm: 8px;--shadow: 0 4px 24px rgba(0,0,0,.1);--transition: .2s ease}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;transition:background var(--transition),color var(--transition)}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}code,pre{font-family:var(--mono);font-size:.85em}:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--surface2);border-radius:3px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.45}}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}@keyframes copyPop{0%{transform:scale(1)}50%{transform:scale(1.18)}to{transform:scale(1)}}