:root{--font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--font-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--color-background: #121212;--color-surface: #1e1e1e;--color-surface-alt: #2c2c2c;--color-text-primary: #e0e0e0;--color-text-secondary: #a0a0a0;--color-text-placeholder: #666666;--color-primary: #007aff;--color-primary-hover: #0056b3;--color-primary-disabled: #4a5568;--color-secondary: #4a5568;--color-secondary-hover: #5a6268;--color-accent-success: #38a169;--color-accent-warning: #dd6b20;--color-accent-error: #e53e3e;--color-accent-info: #3182ce;--color-border: #333333;--color-border-focus: var(--color-primary);--border-radius-small: 4px;--border-radius-medium: 8px;--box-shadow-soft: 0 4px 12px rgba(0, 0, 0, .3);--box-shadow-interactive: 0 0 0 3px rgba(0, 122, 255, .35);--spacing-unit: 8px;--animation-duration: .3s;--animation-timing-function: ease-out}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-primary);background-color:var(--color-background);color:var(--color-text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--animation-duration) ease,color var(--animation-duration) ease}.app-container{max-width:760px;margin:0 auto;padding:calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 1.5)}.app-header{text-align:center;margin-bottom:calc(var(--spacing-unit) * 3);padding:calc(var(--spacing-unit) * 2) 0}.app-header h1{font-size:2rem;font-weight:600;color:var(--color-text-primary);margin-bottom:calc(var(--spacing-unit) * .75)}.app-header p{font-size:1rem;color:var(--color-text-secondary)}.app-main{background-color:var(--color-surface);padding:calc(var(--spacing-unit) * 2.5);border-radius:var(--border-radius-medium);box-shadow:var(--box-shadow-soft)}.input-zone{margin-bottom:calc(var(--spacing-unit) * 3)}.textarea-wrapper textarea{width:100%;padding:calc(var(--spacing-unit) * 1.25);font-family:var(--font-monospace);font-size:.9rem;border:1px solid var(--color-border);border-radius:var(--border-radius-medium);resize:vertical;min-height:160px;background-color:var(--color-surface-alt);color:var(--color-text-primary);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.textarea-wrapper textarea:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--box-shadow-interactive)}.textarea-wrapper textarea::placeholder{color:var(--color-text-placeholder)}.textarea-wrapper textarea:disabled{background-color:#252525;color:var(--color-text-placeholder);cursor:not-allowed}.textarea-wrapper.dragging-over{border:2px dashed var(--color-primary);background-color:#007aff0d}.textarea-wrapper.dragging-over textarea{pointer-events:none}.actions-bar{display:flex;justify-content:flex-end;gap:calc(var(--spacing-unit) * 1.5);margin-top:calc(var(--spacing-unit) * 1.5)}.action-button{display:inline-flex;align-items:center;gap:var(--spacing-unit);padding:calc(var(--spacing-unit) * 1.15) calc(var(--spacing-unit) * 2);font-family:var(--font-primary);font-size:.95rem;font-weight:500;border:none;border-radius:var(--border-radius-medium);cursor:pointer;transition:background-color .2s ease-in-out,transform .1s ease,box-shadow .2s ease;text-decoration:none;white-space:nowrap}.action-button svg{vertical-align:middle;fill:currentColor}.action-button.primary-button{background-color:var(--color-primary);color:#fff;box-shadow:0 2px 4px #007aff33}.action-button.primary-button:hover:not(:disabled){background-color:var(--color-primary-hover);box-shadow:0 4px 8px #007aff4d}.action-button.secondary-button{background-color:var(--color-surface-alt);color:var(--color-text-secondary);border:1px solid var(--color-border)}.action-button.secondary-button:hover:not(:disabled){background-color:#383838;border-color:#555;color:var(--color-text-primary)}.action-button:disabled{background-color:var(--color-primary-disabled);color:#777;cursor:not-allowed;opacity:.6;box-shadow:none}.action-button.secondary-button:disabled{background-color:#252525;border-color:var(--color-border)}.action-button:active:not(:disabled){transform:translateY(1px);box-shadow:none}.action-button:focus-visible{outline:none;box-shadow:var(--box-shadow-interactive)}.message-area{padding:calc(var(--spacing-unit) * 1.25);margin:calc(var(--spacing-unit) * 2) 0;border-radius:var(--border-radius-medium);border-width:1px;border-style:solid;display:flex;align-items:center;gap:var(--spacing-unit);font-size:.9rem}.message-area p,.message-area h3,.message-area ul{margin:0}.message-area ul{list-style-position:inside;padding-left:var(--spacing-unit)}.message-area li{margin-bottom:calc(var(--spacing-unit) / 2)}.error-message{background-color:#e53e3e1a;border-color:var(--color-accent-error);color:var(--color-accent-error)}.warning-message{background-color:#dd6b201a;border-color:var(--color-accent-warning);color:var(--color-accent-warning)}.warning-message h3{color:var(--color-accent-warning);font-size:1.05rem;margin-bottom:var(--spacing-unit)}.info-message{background-color:#3182ce1a;border-color:var(--color-accent-info);color:var(--color-accent-info)}.loading-indicator{text-align:center;color:var(--color-text-secondary);flex-direction:column;background-color:transparent;border:none}.spinner{width:28px;height:28px;border:3px solid rgba(255,255,255,.2);border-left-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:var(--spacing-unit);margin-left:auto;margin-right:auto}@keyframes spin{to{transform:rotate(360deg)}}.animate-fadeIn{animation:fadeIn var(--animation-duration) var(--animation-timing-function) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.results-zone{margin-top:calc(var(--spacing-unit) * 3);display:grid;gap:calc(var(--spacing-unit) * 2);opacity:0;transform:translateY(15px);transition:opacity calc(var(--animation-duration) * 1.5) var(--animation-timing-function),transform calc(var(--animation-duration) * 1.5) var(--animation-timing-function)}.results-zone.visible{opacity:1;transform:translateY(0)}.result-card,.message-area.result-card-animated{background-color:var(--color-surface);padding:calc(var(--spacing-unit) * 2);border:1px solid var(--color-border);border-radius:var(--border-radius-medium);box-shadow:var(--box-shadow-soft);opacity:0;transform:translateY(15px)}.results-zone.visible .result-card-animated{animation:cardFadeInUp var(--animation-duration) var(--animation-timing-function) forwards}.results-zone.visible .result-card-animated:nth-child(1){animation-delay:0s}.results-zone.visible .result-card-animated:nth-child(2){animation-delay:.1s}.results-zone.visible .result-card-animated:nth-child(3){animation-delay:.2s}.results-zone.visible .result-card-animated:nth-child(4){animation-delay:.3s}.results-zone.visible .result-card-animated:nth-child(5){animation-delay:.4s}.results-zone.visible .result-card-animated:nth-child(6){animation-delay:.5s}@keyframes cardFadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.result-card h3{font-size:1.15rem;font-weight:500;color:var(--color-text-primary);margin-bottom:calc(var(--spacing-unit) * 1.25)}.result-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:calc(var(--spacing-unit) * 1.25)}.result-card-header h3{margin-bottom:0}.result-card pre{background-color:var(--color-surface-alt);padding:calc(var(--spacing-unit) * 1.25);border-radius:var(--border-radius-small);overflow-x:auto;font-family:var(--font-monospace);font-size:.85rem;line-height:1.6;color:#cdd5df;white-space:pre-wrap;word-wrap:break-word;border:1px solid #2a2a2a}.result-card code{font-family:var(--font-monospace)}.copy-button{background:transparent;border:1px solid var(--color-border);color:var(--color-text-secondary);padding:calc(var(--spacing-unit) * .65) calc(var(--spacing-unit) * .9);border-radius:var(--border-radius-small);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s;font-size:.75rem;display:inline-flex;align-items:center;gap:calc(var(--spacing-unit) / 2)}.copy-button svg{width:12px;height:12px;fill:currentColor}.copy-button:hover{background-color:var(--color-surface-alt);border-color:#555;color:var(--color-text-primary)}.copy-button:focus-visible{outline:none;box-shadow:var(--box-shadow-interactive)}.dependencies-list{list-style:none;padding:0}.dependencies-list li{padding:calc(var(--spacing-unit) * .9) 0;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-unit);font-size:.9rem}.dependencies-list li:last-child{border-bottom:none}.dependencies-list li code{background-color:#007aff26;color:var(--color-primary);padding:calc(var(--spacing-unit) * .25) calc(var(--spacing-unit) * .75);border-radius:var(--border-radius-small);font-size:.9em}.package-info{font-size:.9em;color:var(--color-text-secondary)}.package-info a{color:var(--color-primary);text-decoration:none;font-weight:500}.package-info a:hover{text-decoration:underline}.module-notes{font-size:.85em;color:var(--color-text-secondary);margin-left:var(--spacing-unit)}.app-footer{text-align:center;margin-top:calc(var(--spacing-unit) * 4);padding:calc(var(--spacing-unit) * 2) 0;font-size:.85rem;color:var(--color-text-secondary);border-top:1px solid var(--color-border)}@media (max-width: 768px){.app-container{padding:var(--spacing-unit) calc(var(--spacing-unit) * .75)}.app-main{padding:calc(var(--spacing-unit) * 1.5)}.app-header h1{font-size:1.7rem}.app-header p{font-size:.9rem}.actions-bar{flex-direction:column;gap:var(--spacing-unit)}.action-button{width:100%;justify-content:center}.result-card h3{font-size:1.05rem}.dependencies-list li{flex-direction:column;align-items:flex-start}}.message-area.syntax-error-highlight{border-left-width:4px;border-left-color:var(--color-accent-error)}.message-area.syntax-error-highlight small{display:block;font-size:.8em;opacity:.8;margin-top:calc(var(--spacing-unit) / 2)}.unresolved-intro{font-size:.85rem;color:var(--color-text-secondary);margin-bottom:calc(var(--spacing-unit) * 1.5);padding:calc(var(--spacing-unit) * .5) calc(var(--spacing-unit) * 1);background-color:#4a55681a;border-left:3px solid var(--color-secondary);border-radius:var(--border-radius-small)}