.namesign {
    --ns-border: #e1e4e8;
    --ns-bg: #fafbfc;
    --ns-accent: #4a90d9;
}

.namesign__card {
    border: 1px solid var(--ns-border);
    border-radius: 10px;
    padding: 18px;
    background: var(--ns-bg);
}

.namesign__intro {
    font-size: 0.92em;
    color: #3a3f44;
    line-height: 1.5;
    margin: 0 0 14px;
}
.namesign__intro p { margin: 0 0 8px; }
.namesign__intro p:last-child { margin-bottom: 0; }

.namesign__hint {
    display: block;
    color: #6a6f75;
    font-size: 0.82em;
    margin-top: 4px;
}

.namesign__error {
    background: #fdecea;
    border: 1px solid #f5c6c2;
    color: #8a1f15;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 10px 0;
    font-size: 0.9em;
}

/* Stage: viewer + details */
.namesign__stage {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 18px;
    margin-top: 14px;
}
@media (max-width: 640px) {
    .namesign__stage { grid-template-columns: 1fr; }
}

.namesign__viewer {
    position: relative;
    width: 100%;
    min-height: 320px;
    height: 360px;
    border: 1px solid var(--ns-border);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.namesign__viewer canvas { display: block; }

.namesign__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #555;
    font-size: 0.9em;
    background: rgba(255, 255, 255, 0.7);
    z-index: 2;
}
.namesign__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #cfd4d9;
    border-top-color: var(--ns-accent);
    border-radius: 50%;
    animation: namesign-spin 0.8s linear infinite;
}
@keyframes namesign-spin { to { transform: rotate(360deg); } }

.namesign__details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.namesign__dims-line { margin: 0; font-size: 0.9em; color: #3a3f44; }

.namesign__color-line { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.namesign__color-group { display: flex; flex-direction: column; gap: 6px; }
.namesign__color-head { font-size: 0.9em; color: #3a3f44; }
.namesign__color-head strong { font-weight: 600; }
.namesign__swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.namesign__sw {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
    position: relative;
    transition: transform 0.12s ease;
    -webkit-appearance: none;
    appearance: none;
}
.namesign__sw:hover { transform: scale(1.1); }
.namesign__sw.is-active::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px solid var(--ns-accent);
    border-radius: 50%;
}

.namesign__pos-line { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.namesign__pos-line label { font-size: 0.9em; color: #3a3f44; }
.namesign__pos-line input[type="range"] { width: 100%; }
.namesign__pos-ends {
    display: flex;
    justify-content: space-between;
    color: #6a6f75;
    font-size: 0.72em;
}

.namesign__qty-line { margin: 0; display: flex; align-items: center; gap: 8px; }
.namesign__qty-line input { width: 80px; }

.namesign__add { width: 100%; }
.namesign__add:disabled { opacity: 0.5; cursor: not-allowed; }

.namesign__disclaimer {
    display: block;
    color: #6a6f75;
    font-size: 0.78em;
    line-height: 1.4;
}