/* === SECTIONS === */ .section { padding: 10px 0; border-bottom: 1px solid var(--border); } .section:last-child { border-bottom: none; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .section h2 { margin: 0; color: var(--text); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .section-note { color: var(--text-3); font-size: 13px; } /* === DROPZONE === */ .dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 70px; padding: 12px; border: 1px dashed var(--border-hover); border-radius: var(--radius-sm); background: var(--bg-input); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .dropzone:hover, .dropzone.is-dragging { border-color: var(--accent); background: var(--bg-hover); } .dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .dropzone > span { display: flex; flex-direction: column; align-items: center; gap: 4px; } .drop-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-lo); color: #fff; font-size: 16px; } .drop-title { color: var(--text); font-size: 14px; font-weight: 600; } .drop-hint { color: var(--text-3); font-size: 13px; } /* === FAN VARIANTS === */ .fan-variants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .fan-variant { display: block; padding: 7px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s; } .fan-variant:hover { border-color: var(--border-hover); background: var(--bg-hover); } .fan-variant.active { border-color: var(--accent); background: rgba(0, 180, 216, 0.08); box-shadow: 0 0 8px var(--accent-glow); } .fan-variant strong, .fan-variant small { display: block; } .fan-variant strong { color: var(--text); font-family: "STKaiti", "KaiTi", serif; font-size: 15px; } .fan-variant small { color: var(--text-3); font-size: 12px; } .fan-variant.active strong { color: var(--accent); } /* === BLADE COUNT === */ .blade-count-control { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } .blade-count-control[hidden] { display: none; } .blade-count-head { display: flex; justify-content: space-between; color: var(--text-2); font-size: 13px; } .blade-count-head strong { color: var(--text); font-size: 13px; } .blade-count-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 5px; } .blade-count-option { padding: 5px 3px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-elevated); cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s; } .blade-count-option:hover { border-color: var(--border-hover); background: var(--bg-hover); } .blade-count-option.active { border-color: var(--accent); background: rgba(0, 180, 216, 0.1); box-shadow: 0 0 6px var(--accent-glow); } .blade-count-option strong, .blade-count-option small { display: block; } .blade-count-option strong { color: var(--text); font-size: 14px; } .blade-count-option small { color: var(--text-3); font-size: 11px; } .blade-count-option.active strong { color: var(--accent); } .blade-count-help { margin: 5px 0 0; color: var(--text-3); font-size: 12px; line-height: 1.4; } /* === BLADE PANEL === */ .blade-panel { margin-bottom: 8px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); } .blade-panel[hidden] { display: none; } .blade-panel-head { display: flex; justify-content: space-between; color: var(--text-2); font-size: 13px; } .blade-panel-head strong { color: var(--text); font-size: 13px; } .blade-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin-top: 5px; } .blade-button { height: 28px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-elevated); color: var(--text-2); font-family: "Cascadia Code", monospace; font-size: 13px; cursor: pointer; position: relative; transition: border-color 0.15s, background 0.15s; } .blade-button:hover { border-color: var(--border-hover); background: var(--bg-hover); } .blade-button.assigned::after { content: ''; position: absolute; top: 3px; right: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .blade-button.active { border-color: var(--accent-lo); background: var(--accent-lo); color: #fff; } .blade-button.active::after { background: #fff; } .blade-help { margin: 5px 0 0; color: var(--text-3); font-size: 12px; } /* === FILE CHIP === */ .file-chip { display: none; margin-top: 6px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-input); color: var(--accent); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-chip.show { display: block; }