:root{--text-main: #0b1220;--text-muted: #64748b;--surface: #ffffff;--surface-elevated: #f1f5f9;--border: rgba(15, 23, 42, 0.1);--primary: #4f46e5;--primary-dark: #4338ca;--primary-soft: rgba(79, 70, 229, 0.14);--accent: #06b6d4;--shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.06);--gradient: linear-gradient(135deg, #4f46e5, #06b6d4);--xgen-radius: 18px;--xgen-radius-sm: 12px;--xgen-chip-minh: 48px;--xgen-editor-bg: #0d1117;--xgen-editor-border: rgba(255, 255, 255, 0.08);--xgen-dock-bg: rgba(255, 255, 255, 0.92);--xgen-dock-blur: blur(16px);--xgen-shadow: 0 24px 48px rgba(15, 23, 42, 0.1);}
.tool-hero{display: flex;flex-wrap: wrap;gap: 32px;align-items: flex-start;margin-bottom: clamp(1.25rem, 4vw, 2rem);}
.hero-text{flex: 1;min-width: 260px;}
.hero-text h1{font-size: clamp(1.85rem, 5vw, 2.5rem);font-weight: 800;line-height: 1.15;margin-bottom: 0.5rem;letter-spacing: -0.02em;color: #1e1b4b;}
.hero-subtitle{font-size: clamp(1rem, 2.8vw, 1.125rem);color: var(--text-muted);max-width: 640px;margin-bottom: 0;margin-top: 0;line-height: 1.55;}
@media (max-width: 767px){.hero-text h1{font-size: clamp(1.65rem, 6vw, 2.1rem);}.hero-subtitle{font-size: clamp(0.95rem, 3.2vw, 1.05rem);}}
.xgen-deck{display: flex;flex-direction: column;gap: clamp(1rem, 3vw, 1.35rem);margin-bottom: clamp(1.5rem, 5vw, 2.5rem);padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));}
@media (min-width: 992px){.xgen-deck{display: grid;grid-template-columns: minmax(0, 1fr) minmax(272px, 300px);grid-template-rows: minmax(min(520px, 72vh), auto);gap: 1.25rem 1.5rem;align-items: stretch;padding-bottom: 0;}.xgen-output-zone{grid-column: 1;grid-row: 1;}.xgen-rail{grid-column: 2;grid-row: 1;display: flex;flex-direction: column;gap: 1rem;min-height: 0;}.xgen-drawer{display: flex;flex-direction: column;flex: 1 1 auto;min-height: 0;}.xgen-drawer-body{flex: 1 1 auto;min-height: 0;overflow-y: auto;}}
.xgen-output-zone{display: flex;flex-direction: column;gap: 0;border-radius: var(--xgen-radius);overflow: hidden;border: 1px solid var(--border);box-shadow: var(--xgen-shadow);background: var(--surface);order: 1;}
@media (min-width: 992px){.xgen-output-zone{order: 0;min-height: min(70vh, 560px);}}
.xgen-output-head{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 0.5rem 1rem;padding: 0.65rem 1rem;background: var(--surface-elevated);border-bottom: 1px solid var(--border);}
.xgen-output-head-main{display: flex;align-items: center;gap: 0.5rem;}
.xgen-output-badge{display: inline-flex;align-items: center;}
.xgen-output-badge::before{content: "";display: block;width: 8px;height: 8px;border-radius: 50%;background: #22c55e;box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);animation: xgen-pulse 2.2s ease infinite;}
@keyframes xgen-pulse{0%, 100%{box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);}55%{box-shadow: 0 0 0 7px rgba(34, 197, 94, 0);}}
@media (prefers-reduced-motion: reduce){.xgen-output-badge::before{animation: none;}}
.xgen-output-label{font-size: 0.8125rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.06em;color: var(--text-muted);}
.xgen-output-meta{font-size: 0.75rem;font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;color: var(--text-main);text-align: right;flex: 1 1 auto;min-width: 0;word-break: break-word;margin: 0;}
.xgen-editor-shell{flex: 1;background: var(--xgen-editor-bg);min-height: min(52vh, 380px);}
@media (min-width: 768px){.xgen-editor-shell{min-height: 420px;}}
.xgen-editor-shell .editor{width: 100%;height: min(52vh, 380px);}
@media (min-width: 768px){.xgen-editor-shell .editor{height: 440px;}}
@media (min-width: 992px){.xgen-editor-shell .editor{height: min(62vh, 520px);min-height: 440px;}}
.xgen-editor-shell .ace_editor{font-size: 13px !important;}
.xgen-editor-shell .ace-tomorrow-night{background-color: var(--xgen-editor-bg) !important;}
.xgen-editor-shell .ace-tomorrow-night .ace_gutter{background: rgba(0, 0, 0, 0.35) !important;color: rgba(255, 255, 255, 0.35) !important;border-right: 1px solid var(--xgen-editor-border) !important;}
.xgen-editor-shell .ace-tomorrow-night .ace_gutter-active-line{background: rgba(79, 70, 229, 0.12) !important;}
.xgen-editor-shell .ace-tomorrow-night .ace_marker-layer .ace_active-line{background: rgba(79, 70, 229, 0.06) !important;}
.xgen-editor-shell .ace-tomorrow-night .ace_cursor{border-left: 2px solid var(--accent) !important;}
.xgen-rail{display: flex;flex-direction: column;gap: 0.85rem;order: 2;}
.xgen-livebar{display: flex;flex-direction: column;gap: 0.5rem;padding: 0.75rem 1rem;background: var(--surface);border-radius: var(--xgen-radius-sm);border: 1px solid var(--border);font-size: 0.8125rem;color: var(--text-muted);box-shadow: var(--shadow-soft);}
@media (min-width: 992px){.xgen-livebar{gap: 0.45rem;}}
.xgen-livebar-seg{display: flex;flex-wrap: wrap;align-items: baseline;gap: 0.35rem 0.5rem;}
.xgen-livebar-seg--grow{flex: 1;}
.xgen-livebar-k{font-size: 0.6875rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.05em;color: var(--text-muted);min-width: 3.25rem;}
.xgen-livebar strong{color: var(--text-main);font-weight: 700;}
.xgen-livebar kbd{font-size: 0.75rem;padding: 0.2rem 0.45rem;border-radius: 6px;background: var(--surface-elevated);border: 1px solid var(--border);color: var(--text-main);font-family: ui-monospace, monospace;}
.xgen-drawer{border: 0;border-radius: var(--xgen-radius-sm);background: transparent;}
.xgen-drawer-sum{list-style: none;cursor: pointer;display: flex;flex-direction: column;align-items: flex-start;gap: 0.15rem;padding: 0.85rem 1rem;background: var(--surface);border-radius: var(--xgen-radius-sm);border: 1px solid var(--border);transition: border-color 0.15s ease, box-shadow 0.15s ease;}
.xgen-drawer-sum::-webkit-details-marker{display: none;}
.xgen-drawer-sum::marker{display: none;}
.xgen-drawer-sum:hover{border-color: rgba(79, 70, 229, 0.35);}
.xgen-drawer[open] > .xgen-drawer-sum{box-shadow: 0 0 0 1px var(--primary-soft);}
.xgen-drawer-sum-text{font-size: 0.9375rem;font-weight: 700;color: var(--text-main);}
.xgen-drawer-sum-hint{font-size: 0.75rem;color: var(--text-muted);}
.xgen-drawer-body{padding: 0.85rem 0 0;}
@media (min-width: 992px){.xgen-drawer-sum{display: none;}.xgen-drawer-body{padding: 0;}.xgen-drawer-lead{display: none;}}
.xgen-drawer-lead{font-size: 0.8125rem;color: var(--text-muted);margin: 0 0 0.75rem;line-height: 1.45;}
.xgen-tpl-track{display: flex;flex-direction: row;gap: 0.5rem;overflow-x: auto;padding-bottom: 0.35rem;margin: 0 0 1rem -0.15rem;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;scrollbar-width: thin;}
.xgen-tpl-track::-webkit-scrollbar{height: 4px;}
.xgen-tpl-track::-webkit-scrollbar-thumb{background: var(--border);border-radius: 4px;}
@media (min-width: 992px){.xgen-tpl-track{flex-direction: column;overflow-x: visible;padding-bottom: 0;margin: 0 0 1rem 0;scroll-snap-type: none;max-height: none;}}
.xgen-tpl-chip{flex: 0 0 auto;scroll-snap-align: start;min-height: var(--xgen-chip-minh);padding: 0.5rem 1rem;border-radius: var(--xgen-radius-sm);border: 1px solid var(--border);background: var(--surface);color: var(--text-main);font-size: 0.875rem;font-weight: 600;cursor: pointer;transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;text-align: left;}
@media (min-width: 992px){.xgen-tpl-chip{width: 100%;white-space: normal;}}
.xgen-tpl-chip:hover{border-color: var(--primary);background: var(--surface-elevated);}
.xgen-tpl-chip:focus-visible{outline: 2px solid var(--primary);outline-offset: 2px;}
.xgen-tpl-chip.is-active{border-color: var(--primary);background: var(--primary-soft);box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.25);}
.xgen-tpl-chip .xgen-tpl-label{display: block;}
.xgen-tpl-chip .xgen-tpl-meta{display: block;font-size: 0.6875rem;font-weight: 500;color: var(--text-muted);margin-top: 0.2rem;line-height: 1.25;max-width: 160px;}
@media (min-width: 992px){.xgen-tpl-chip .xgen-tpl-meta{max-width: none;}}
.xgen-spec-grid{display: grid;grid-template-columns: 1fr;gap: 0.85rem;}
@media (min-width: 576px){.xgen-spec-grid{grid-template-columns: repeat(2, 1fr);}}
@media (min-width: 992px){.xgen-spec-grid{grid-template-columns: 1fr;}}
.xgen-field{display: flex;flex-direction: column;gap: 0.35rem;}
.xgen-field label{font-size: 0.6875rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.06em;color: var(--text-muted);}
.xgen-field input[type="number"], .xgen-field input[type="text"]{width: 100%;padding: 0.65rem 0.85rem;border-radius: var(--xgen-radius-sm);border: 1px solid var(--border);background: var(--surface);color: var(--text-main);font-size: 1rem;}
.xgen-field input:focus{outline: none;border-color: var(--primary);box-shadow: 0 0 0 3px var(--primary-soft);}
.xgen-toggles{display: flex;flex-direction: column;gap: 0.6rem;padding: 0.25rem 0;grid-column: 1 / -1;}
@media (min-width: 576px){.xgen-toggles{grid-column: 1 / -1;}}
.xgen-toggle{display: flex;align-items: flex-start;gap: 0.55rem;cursor: pointer;font-size: 0.875rem;color: var(--text-main);line-height: 1.4;}
.xgen-toggle input{width: 1.15rem;height: 1.15rem;margin-top: 0.15rem;accent-color: var(--primary);flex-shrink: 0;}
.xgen-actions{display: flex;flex-wrap: wrap;align-items: center;gap: 0.5rem;position: fixed;left: 0;right: 0;bottom: 0;z-index: 1040;padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px)) 1rem;background: var(--xgen-dock-bg);backdrop-filter: var(--xgen-dock-blur);-webkit-backdrop-filter: var(--xgen-dock-blur);border-top: 1px solid var(--border);box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.06);}
@media (min-width: 992px){.xgen-actions{position: static;padding: 0;background: transparent;backdrop-filter: none;-webkit-backdrop-filter: none;border: 0;box-shadow: none;margin-top: auto;}}
.xgen-actions .btn{border-radius: var(--xgen-radius-sm);font-weight: 600;padding: 0.5rem 0.85rem;font-size: 0.875rem;}
.xgen-btn-primary{flex: 1 1 8rem;min-height: 44px;}
@media (min-width: 992px){.xgen-btn-primary{flex: 1 1 auto;min-height: unset;}}
.xgen-actions .btn-primary{background: var(--primary);border-color: var(--primary);}
.xgen-actions .btn-primary:hover{background: var(--primary-dark);border-color: var(--primary-dark);}
.xgen-toast{position: fixed;bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));left: 50%;transform: translateX(-50%) translateY(140%);padding: 0.6rem 1.2rem;background: var(--text-main);color: var(--surface);border-radius: 999px;font-size: 0.8125rem;font-weight: 600;z-index: 1080;opacity: 0;transition: transform 0.25s ease, opacity 0.25s ease;pointer-events: none;box-shadow: var(--xgen-shadow);max-width: calc(100vw - 2rem);text-align: center;}
@media (min-width: 992px){.xgen-toast{bottom: 1.5rem;}}
.xgen-toast.is-on{transform: translateX(-50%) translateY(0);opacity: 1;}
.xgen-prose{margin-top: clamp(2rem, 6vw, 3.5rem);padding-top: 2rem;border-top: 1px solid var(--border);}
.xgen-prose h2{font-size: clamp(1.2rem, 3vw, 1.55rem);font-weight: 800;margin-bottom: 0.65rem;color: var(--text-main);letter-spacing: -0.02em;}
.xgen-prose h3{font-size: 1.02rem;font-weight: 700;margin: 1.5rem 0 0.5rem;color: var(--text-main);}
.xgen-prose p, .xgen-prose li{color: var(--text-muted);line-height: 1.65;}
.xgen-prose p{margin-bottom: 1rem;}
.xgen-callout{border-left: 4px solid var(--primary);padding: 1rem 1.25rem;background: var(--surface-elevated);border-radius: 0 var(--xgen-radius-sm) var(--xgen-radius-sm) 0;margin: 0 0 1.75rem;}
.xgen-dl dt{font-weight: 700;color: var(--text-main);margin-top: 1rem;}
.xgen-dl dt:first-child{margin-top: 0;}
.xgen-dl dd{margin: 0 0 0.5rem 0;color: var(--text-muted);line-height: 1.6;}
.xgen-table-wrap{overflow-x: auto;margin: 1.25rem 0;border-radius: var(--xgen-radius-sm);border: 1px solid var(--border);}
.xgen-table{width: 100%;border-collapse: collapse;font-size: 0.875rem;}
.xgen-table th, .xgen-table td{padding: 0.65rem 0.85rem;text-align: left;border-bottom: 1px solid var(--border);}
.xgen-table th{background: var(--surface-elevated);color: var(--text-main);font-weight: 700;}
.xgen-aside{font-size: 0.9rem;color: var(--text-muted);padding: 1rem 1.25rem;border-radius: var(--xgen-radius-sm);background: var(--surface-elevated);border: 1px dashed var(--border);margin: 1.5rem 0;}
.xgen-list-plain{list-style: none;padding: 0;margin: 0 0 1rem 0;}
.xgen-list-plain li{position: relative;padding-left: 1.25rem;margin-bottom: 0.5rem;color: var(--text-muted);}
.xgen-list-plain li::before{content: "";position: absolute;left: 0;top: 0.55rem;width: 6px;height: 6px;border-radius: 50%;background: var(--primary);}