@import url("./fds-base.css");
.fds-page { min-height: 100vh; background: var(--fds-bg-page); }
.fds-panel { background: var(--fds-bg-panel); border: 1px solid var(--fds-border); }
.fds-card { background: var(--fds-bg-panel); border: 1px solid var(--fds-border); border-radius: var(--fds-radius-lg); overflow: hidden; }
.fds-card-head, .fds-card-body, .fds-card-foot { padding: var(--fds-space-4) var(--fds-space-5); }
.fds-card-head { border-bottom: 1px solid var(--fds-border); }
.fds-card-foot { border-top: 1px solid var(--fds-border); }
.fds-btn { height: 40px; border: 1px solid transparent; border-radius: var(--fds-radius-md); padding: 0 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 550; font-size: .875rem; cursor: pointer; transition: background var(--fds-fast), border var(--fds-fast), transform var(--fds-fast); }
.fds-btn:active { transform: translateY(1px); }
.fds-btn-primary { background: var(--fds-action-primary); color: #fff; }
.fds-btn-primary:hover { background: var(--fds-action-primary-hover); }
.fds-btn-secondary { background: #fff; border-color: var(--fds-border-strong); }
.fds-btn-secondary:hover { background: var(--fds-bg-muted); }
.fds-btn-ghost { background: transparent; color: var(--fds-text-secondary); }
.fds-btn-ghost:hover { background: var(--fds-bg-muted); color: var(--fds-text-primary); }
.fds-btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.fds-input, .fds-select { width: 100%; height: 40px; padding: 0 .75rem; border: 1px solid var(--fds-border-strong); border-radius: var(--fds-radius-md); color: var(--fds-text-primary); background: #fff; }
.fds-choice { min-height: 42px; border: 1px solid var(--fds-border-strong); background: #fff; border-radius: var(--fds-radius-md); padding: .65rem .85rem; cursor: pointer; text-align: left; transition: border var(--fds-fast), box-shadow var(--fds-fast); }
.fds-choice:hover { border-color: var(--fds-gray-600); }
.fds-choice.is-selected { border-color: #111; box-shadow: inset 0 0 0 1px #111; }
.fds-choice:disabled, .fds-choice.is-unavailable { opacity: .42; cursor: not-allowed; }
.fds-choice strong, .fds-choice small { display: block; }
.fds-choice small { color: var(--fds-text-muted); margin-top: .15rem; }
.fds-segmented { display: grid; grid-auto-flow: column; border: 1px solid var(--fds-border-strong); border-radius: var(--fds-radius-md); overflow: hidden; }
.fds-segmented button { min-height: 40px; border: 0; border-right: 1px solid var(--fds-border-strong); background: #fff; }
.fds-segmented button:last-child { border: 0; }
.fds-segmented .is-selected { background: #111; color: #fff; }
.fds-badge { min-height: 26px; padding: .22rem .6rem; border-radius: var(--fds-radius-pill); display: inline-flex; align-items: center; font-size: .75rem; font-weight: 550; }
.fds-status-neutral { background: var(--fds-gray-100); color: var(--fds-gray-700); }
.fds-status-info { background: var(--fds-blue-50); color: var(--fds-blue-600); }
.fds-status-success { background: var(--fds-green-50); color: var(--fds-green-700); }
.fds-status-warning { background: var(--fds-amber-50); color: var(--fds-amber-700); }
.fds-status-danger { background: var(--fds-red-50); color: var(--fds-red-700); }
.fds-tabs { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--fds-border); overflow-x: auto; }
.fds-tab { border: 0; background: transparent; padding: 0 0 .75rem; color: var(--fds-text-muted); font-size: .875rem; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.fds-tab.is-active { color: var(--fds-text-primary); border-bottom-color: #111; }
.fds-empty, .fds-unavailable, .fds-error-state { padding: var(--fds-space-5); border: 1px dashed var(--fds-border-strong); border-radius: var(--fds-radius-lg); background: var(--fds-gray-25); color: var(--fds-text-secondary); text-align: center; }
.fds-skeleton { height: 16px; border-radius: var(--fds-radius-xs); background: linear-gradient(90deg, var(--fds-gray-100), var(--fds-gray-200), var(--fds-gray-100)); background-size: 200% 100%; animation: fds-loading 1.4s infinite; }
.fds-layer { position: fixed; inset: 0; z-index: 100; }
.fds-backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, .46); }
.fds-drawer { position: absolute; z-index: 1; inset: 0 auto 0 0; width: min(680px, 92vw); overflow: auto; background: #fff; box-shadow: var(--fds-shadow-3); }
.fds-modal { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(960px, calc(100vw - 3rem)); max-height: calc(100vh - 3rem); overflow: auto; background: #fff; border-radius: var(--fds-radius-xl); box-shadow: var(--fds-shadow-3); }
.fds-product-card, .fds-material-card { border: 1px solid var(--fds-border); border-radius: var(--fds-radius-lg); background: #fff; }
.fds-product-card.is-selected, .fds-material-card.is-selected { border-color: #111; box-shadow: inset 0 0 0 1px #111; }
.fds-configurator-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(360px, .8fr); background: #fff; }
.fds-visual-stage { background: #e9eaec; }
.fds-config-rail { min-width: 0; background: #fff; }
.fds-summary { background: rgba(255, 255, 255, .94); border-top: 1px solid var(--fds-border); backdrop-filter: blur(12px); box-shadow: 0 -8px 24px rgba(17, 24, 39, .06); }
@media (max-width: 768px) { .fds-configurator-shell { display: block; } .fds-modal { inset: auto 0 0; transform: none; width: 100%; max-height: 88vh; border-radius: var(--fds-radius-xl) var(--fds-radius-xl) 0 0; } }
@keyframes fds-loading { to { background-position: -200% 0; } }