/* ==========================================================================
   Steam'n'Steel Charakter-Manager – Styles
   Brand-Design: Dark Space + Steampunk Brass
   ========================================================================== */

/* --- Basis ---------------------------------------------------------------- */
.sns-wrap {
    font-family: 'Open Sans', Arial, sans-serif;
    color: #ffffff;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px;
}

.sns-title {
    font-size: 26px;
    font-weight: 500;
    color: #ffffff;
    margin: 0 0 4px 0;
}

/* --- Buttons -------------------------------------------------------------- */
.sns-btn {
    display: inline-block;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    line-height: 1.4;
}

.sns-btn--primary {
    background: #E09900;
    color: #000000;
}
.sns-btn--primary:hover {
    background: #C07800;
    color: #000000;
    text-decoration: none;
}

.sns-btn--ghost {
    background: transparent;
    color: #E09900;
    border: 1px solid #E09900;
}
.sns-btn--ghost:hover {
    background: rgba(224, 153, 0, 0.12);
    color: #E09900;
    text-decoration: none;
}

.sns-btn--danger {
    background: transparent;
    color: #CC3300;
    border: 1px solid #CC3300;
}
.sns-btn--danger:hover {
    background: rgba(204, 51, 0, 0.12);
}

.sns-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Cards ---------------------------------------------------------------- */
.sns-card {
    background: rgba(6, 6, 16, 0.88);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 30px;
    padding: 24px 28px;
    color: #ffffff;
}

/* --- Overview Header ------------------------------------------------------ */
.sns-overview-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    background: rgba(4, 4, 14, 0.88);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-left: 4px solid #D4AF37;
    border-radius: 3px;
    padding: 12px 20px;
    position: relative;
    overflow: hidden;
}
.sns-overview-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.010) 0px,
        rgba(255, 255, 255, 0.010) 1px,
        transparent 1px,
        transparent 4px
    );
    pointer-events: none;
}

.sns-char-count {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #9E9882;
    background: rgba(6, 6, 16, 0.88);
    border: 1px solid rgba(212, 175, 55, 0.20);
    border-radius: 4px;
    padding: 3px 10px;
}

/* --- Char Grid ------------------------------------------------------------ */
.sns-char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

/* --- Char Card ------------------------------------------------------------ */
.sns-char-card {
    background: rgba(6, 6, 16, 0.88);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.sns-char-card:hover {
    border-color: rgba(212, 175, 55, 0.58);
    transform: translateY(-2px);
}

.sns-char-image {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: rgba(4, 4, 14, 0.88);
}
.sns-char-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sns-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}
.sns-badge--draft {
    background: rgba(224, 153, 0, 0.85);
    color: #000;
}

.sns-char-info {
    padding: 14px 16px 8px;
    flex: 1;
}
.sns-char-name {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 6px 0;
}
.sns-char-meta {
    font-size: 13px;
    color: #9E9882;
    margin: 0;
}
.sns-meta-sep {
    margin: 0 4px;
}

.sns-char-actions {
    padding: 12px 16px 16px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.sns-char-actions .sns-btn--primary {
    flex: 1;
    text-align: center;
    font-size: 13px;
    padding: 8px 12px;
}
.sns-btn--archive {
    padding: 7px 10px;
    font-size: 13px;
    flex-shrink: 0;
}

/* --- Neue Char Card ------------------------------------------------------- */
.sns-char-card--new {
    border-style: dashed;
    border-color: rgba(224, 153, 0, 0.4);
    background: rgba(6, 6, 16, 0.45);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.sns-char-card--new:hover {
    border-color: rgba(224, 153, 0, 0.8);
    background: rgba(0, 0, 25, 0.65);
}

.sns-new-char-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    color: #E09900;
}
.sns-new-char-icon {
    font-size: 40px;
    line-height: 1;
    opacity: 0.8;
    display: block;
}
.sns-new-char-label {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #E09900;
}

/* --- Locked Card ---------------------------------------------------------- */
.sns-char-card--locked {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.sns-locked-msg {
    text-align: center;
    color: #9E9882;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
.sns-locked-msg strong {
    color: #E09900;
}

/* --- Notice --------------------------------------------------------------- */
.sns-notice {
    margin-top: 16px;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 14px;
}
.sns-notice--success {
    background: rgba(46, 125, 79, 0.25);
    border: 1px solid rgba(46, 125, 79, 0.6);
    color: #6ee09a;
}
.sns-notice--error {
    background: rgba(204, 51, 0, 0.2);
    border: 1px solid rgba(204, 51, 0, 0.5);
    color: #ff8866;
}

/* --- Inputs --------------------------------------------------------------- */
.sns-input,
.sns-textarea,
.sns-select {
    background: rgba(4, 4, 12, 0.90);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 8px;
    color: #ffffff;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    padding: 9px 14px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sns-input:focus,
.sns-textarea:focus,
.sns-select:focus {
    border-color: #E09900;
    outline: none;
    box-shadow: 0 0 0 2px rgba(224, 153, 0, 0.25);
}
.sns-input::placeholder,
.sns-textarea::placeholder {
    color: #555566;
}
.sns-textarea {
    resize: vertical;
    min-height: 80px;
}
.sns-select option {
    background: #050510;
    color: #ffffff;
}

/* --- Labels --------------------------------------------------------------- */
.sns-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #9E9882;
    margin-bottom: 6px;
}

/* --- Generator Progress --------------------------------------------------- */
.sns-gen-progress {
    display: flex;
    gap: 0;
    margin-bottom: 28px;
    overflow-x: auto;
}

.sns-gen-step-dot {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    position: relative;
    cursor: default;
}
.sns-gen-step-dot::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(212, 175, 55, 0.22);
    z-index: 0;
}
.sns-gen-step-dot:first-child::before { left: 50%; }
.sns-gen-step-dot:last-child::before  { right: 50%; }

.sns-gen-dot-num {
    width: 28px;
    height: 28px;
    border-radius: 3px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    background: rgba(4, 4, 12, 0.90);
    color: #6A6050;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: all 0.2s ease;
}
.sns-gen-dot-label {
    font-size: 11px;
    color: #6A6050;
    text-align: center;
    transition: color 0.2s ease;
}

.sns-gen-step-dot.active .sns-gen-dot-num {
    border-color: #E09900;
    background: rgba(224, 153, 0, 0.15);
    color: #E09900;
}
.sns-gen-step-dot.active .sns-gen-dot-label { color: #E09900; }

.sns-gen-step-dot.done .sns-gen-dot-num {
    border-color: rgba(46, 125, 79, 0.8);
    background: rgba(46, 125, 79, 0.2);
    color: #6ee09a;
}
.sns-gen-step-dot.done .sns-gen-dot-label { color: #6ee09a; }

/* --- Generator Layout ----------------------------------------------------- */
.sns-gen-step-title {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 20px 0;
}

.sns-gen-section {
    margin-bottom: 28px;
}

.sns-gen-section-title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #D4AF37;
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
    display: flex;
    align-items: center;
    gap: 7px;
}
.sns-gen-section-title::before {
    content: '◆';
    font-size: 6px;
    opacity: 0.65;
}

.sns-gen-hint {
    font-size: 13px;
    color: #9E9882;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.sns-gen-hintergrund .sns-label {
    margin-top: 14px;
}
.sns-gen-hintergrund .sns-label:first-of-type {
    margin-top: 0;
}

/* --- Pool bar ------------------------------------------------------------- */
.sns-gen-pool-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(4, 4, 14, 0.65);
    border: 1px solid rgba(212, 175, 55, 0.20);
    border-left: 3px solid rgba(212, 175, 55, 0.55);
    border-radius: 3px;
    padding: 8px 14px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    font-weight: 600;
    color: #E4DCC4;
    margin-bottom: 16px;
    letter-spacing: 0.03em;
}
.sns-pool-remaining {
    color: #6ee09a;
    margin-left: 4px;
}
.sns-pool-remaining.sns-pool-danger {
    color: #ff8866;
}

/* --- Path grid ------------------------------------------------------------ */
.sns-path-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.sns-path-card {
    background: rgba(6, 6, 16, 0.72);
    border: 1px solid rgba(212, 175, 55, 0.20);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sns-path-card:hover {
    border-color: rgba(224, 153, 0, 0.5);
}
.sns-path-card.selected {
    border-color: #E09900;
    background: rgba(224, 153, 0, 0.1);
}
.sns-path-type {
    font-size: 11px;
    color: #9E9882;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sns-path-name {
    font-size: 15px;
    color: #ffffff;
}
.sns-path-desc {
    font-size: 12px;
    color: #9E9882;
    margin: 0;
    line-height: 1.4;
}

/* --- Lebensstil grid ------------------------------------------------------ */
.sns-lebensstil-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.sns-ls-card {
    background: rgba(6, 6, 16, 0.72);
    border: 1px solid rgba(212, 175, 55, 0.20);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.sns-ls-card:hover   { border-color: rgba(224, 153, 0, 0.5); }
.sns-ls-card.selected {
    border-color: #E09900;
    background: rgba(224, 153, 0, 0.1);
}
.sns-ls-name    { font-size: 15px; font-weight: 600; color: #ffffff; }
.sns-ls-cost    { font-size: 13px; color: #E09900; font-weight: 600; }
.sns-ls-money   { font-size: 12px; color: #9E9882; }
.sns-ls-monthly { font-size: 12px; color: #9E9882; }

/* --- Planet / Geburtsort grid --------------------------------------------- */
.sns-planet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.sns-planet-card {
    background: rgba(6, 6, 16, 0.72);
    border: 1px solid rgba(212, 175, 55, 0.20);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.sns-planet-card:hover    { border-color: rgba(224, 153, 0, 0.5); }
.sns-planet-card.selected {
    border-color: #E09900;
    background: rgba(224, 153, 0, 0.1);
}
.sns-planet-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
.sns-planet-name { font-size: 15px; font-weight: 600; color: #ffffff; }
.sns-planet-desc { font-size: 12px; color: #9E9882; margin: 0; line-height: 1.4; }

/* --- Variante grid --------------------------------------------------------- */
.sns-variante-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}
.sns-variante-card {
    background: rgba(6, 6, 16, 0.72);
    border: 1px solid rgba(212, 175, 55, 0.20);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.sns-variante-card:hover    { border-color: rgba(224, 153, 0, 0.5); }
.sns-variante-card.selected {
    border-color: #E09900;
    background: rgba(224, 153, 0, 0.1);
}
.sns-variante-name { font-size: 15px; font-weight: 600; color: #ffffff; }
.sns-variante-mods { font-size: 12px; color: #E09900; font-weight: 600; }
.sns-variante-desc { font-size: 12px; color: #9E9882; margin: 0; line-height: 1.4; }

/* --- Derived values ------------------------------------------------------- */
.sns-derived-values {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: 14px;
    color: #9E9882;
}
.sns-derived-values strong { color: #ffffff; }

/* --- Attribute table ------------------------------------------------------ */
.sns-attr-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sns-attr-row {
    padding: 8px 10px;
    background: rgba(6, 6, 16, 0.45);
    border-radius: 6px;
}
.sns-attr-label {
    font-size: 14px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.sns-attr-cost {
    font-size: 12px;
    color: #9E9882;
    text-align: right;
}

/* --- Stepper -------------------------------------------------------------- */
.sns-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.sns-stepper-btn {
    padding: 4px 9px;
    font-size: 15px;
    line-height: 1;
    min-width: 28px;
    flex-shrink: 0;
}
.sns-stepper-val {
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    font-weight: 700;
    color: #E4DCC4;
    min-width: 22px;
    text-align: center;
}

/* --- Skill table ---------------------------------------------------------- */
.sns-skill-group {
    margin-bottom: 18px;
}
.sns-skill-group-title {
    font-size: 13px;
    font-weight: 700;
    color: #9E9882;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.13);
}

.sns-skill-row {
    padding: 5px 10px;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.sns-skill-row:hover { background: rgba(6, 6, 16, 0.45); }
.sns-skill-fixed     { opacity: 0.65; }

.sns-skill-label {
    font-size: 14px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.sns-skill-attr {
    font-size: 12px;
    color: #9E9882;
}
.sns-skill-cost {
    font-size: 12px;
    color: #9E9882;
    text-align: right;
}

/* --- Skill & Attr indicators (Schritt 3 + 4) -------------------------------- */

/* Shared grid for skill table — header + data rows use IDENTICAL columns */
.sns-skill-header-row,
.sns-skill-row {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) 108px 42px 116px 72px;
    gap: 6px;
    align-items: center;
}
.sns-skill-header-row {
    padding: 4px 10px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    font-weight: 700;
    color: #6A6050;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    border-bottom: 1px solid rgba(212, 175, 55, 0.13);
    margin-bottom: 4px;
}
.sns-skill-header-row span:nth-child(3),
.sns-skill-header-row span:nth-child(4) { text-align: center; }
.sns-skill-header-row span:last-child    { text-align: right; }

/* Shared grid for attr table — header + data rows IDENTICAL columns */
.sns-attr-header-row,
.sns-attr-row {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) 42px 116px 72px;
    gap: 6px;
    align-items: center;
}
.sns-attr-header-row {
    padding: 4px 10px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    font-weight: 700;
    color: #6A6050;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    border-bottom: 1px solid rgba(212, 175, 55, 0.13);
    margin-bottom: 4px;
}
.sns-attr-header-row span:nth-child(2),
.sns-attr-header-row span:nth-child(3) { text-align: center; }
.sns-attr-header-row span:last-child    { text-align: right; }

.sns-skill-ability-count,
.sns-attr-skill-indicator {
    font-size: 13px;
    font-weight: 700;
    color: #E09900;
    text-align: center;
}

/* --- Path ability table --------------------------------------------------- */
.sns-path-ability-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(6, 6, 16, 0.45);
    border-radius: 8px;
    margin-bottom: 6px;
}
.sns-path-ability-label {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    flex: 1;
    min-width: 160px;
}
.sns-path-ability-desc {
    font-size: 12px;
    color: #9E9882;
    flex: 1;
}
.sns-path-ability-cost {
    font-size: 12px;
    color: #9E9882;
    min-width: 56px;
    text-align: right;
}

/* --- Path ability groups (Schritt 2 – alle Pfade) ------------------------- */
.sns-path-ability-group {
    margin-bottom: 14px;
    border: 1px solid rgba(212, 175, 55, 0.13);
    border-radius: 10px;
    padding: 10px 14px;
}
.sns-path-ability-group--own {
    border-color: rgba(224, 153, 0, 0.55);
    background: rgba(224, 153, 0, 0.04);
}
.sns-path-ability-group-title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sns-own-path-badge {
    background: #E09900;
    color: #000000;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    letter-spacing: 0.02em;
}

/* --- Portrait grid -------------------------------------------------------- */
.sns-portrait-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
}

.sns-portrait-thumb {
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s ease, transform 0.2s ease;
    background: rgba(4, 4, 14, 0.65);
}
.sns-portrait-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sns-portrait-thumb:hover   { border-color: rgba(224, 153, 0, 0.5); transform: scale(1.04); }
.sns-portrait-thumb.selected{ border-color: #E09900; }

/* --- Unfaire Vorteile grid ------------------------------------------------- */
.sns-vorteil-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.sns-vorteil-card {
    background: rgba(6, 6, 16, 0.65);
    border: 2px solid rgba(212, 175, 55, 0.28);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
    user-select: none;
}
.sns-vorteil-card:hover {
    border-color: rgba(224, 153, 0, 0.6);
    transform: translateY(-2px);
}
.sns-vorteil-card.selected {
    border-color: #E09900;
    background: rgba(224, 153, 0, 0.08);
}
.sns-vorteil-card.sns-vorteil-unavailable {
    opacity: 0.4;
    cursor: not-allowed;
}

.sns-vorteil-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.sns-vorteil-name {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
}
.sns-vorteil-cost-badge {
    font-size: 11px;
    font-weight: 700;
    color: #E09900;
    background: rgba(224, 153, 0, 0.12);
    border: 1px solid rgba(224, 153, 0, 0.3);
    border-radius: 12px;
    padding: 2px 8px;
    white-space: nowrap;
}
.sns-vorteil-desc {
    font-size: 13px;
    color: #9E9882;
    margin: 0;
    line-height: 1.4;
}

/* --- Summary -------------------------------------------------------------- */
.sns-summary-box {
    background: rgba(6, 6, 16, 0.60);
    border: 1px solid rgba(212, 175, 55, 0.20);
    border-radius: 12px;
    padding: 16px 18px;
    max-height: 360px;
    overflow-y: auto;
}
.sns-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.sns-summary-table th {
    color: #E09900;
    font-weight: 700;
    text-align: left;
    padding: 8px 0 4px;
    border-bottom: 1px solid rgba(224, 153, 0, 0.2);
}
.sns-summary-table td {
    padding: 4px 0;
    color: #ffffff;
    vertical-align: top;
}
.sns-summary-table td:first-child {
    color: #9E9882;
    width: 55%;
}

/* --- Modal overlay -------------------------------------------------------- */
.sns-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.sns-modal-box {
    background: rgba(0, 0, 25, 0.98);
    border: 1px solid rgba(224, 153, 0, 0.45);
    border-radius: 18px;
    padding: 28px 30px 24px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.75);
}
.sns-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 12px;
}
.sns-modal-text {
    font-size: 14px;
    color: #9E9882;
    margin: 0 0 16px;
    line-height: 1.55;
}
.sns-modal-text strong { color: #ffffff; }
.sns-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}

/* --- Info button ---------------------------------------------------------- */
.sns-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(170, 170, 204, 0.5);
    background: transparent;
    color: #9E9882;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    vertical-align: middle;
    margin-left: 5px;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}
.sns-info-btn:hover {
    border-color: #E09900;
    color: #E09900;
    background: rgba(224, 153, 0, 0.1);
}
.sns-info-btn.sns-info-loading {
    opacity: 0.5;
    cursor: wait;
}

/* --- Tooltip box ---------------------------------------------------------- */
.sns-tooltip-box {
    position: fixed;
    z-index: 99999;
    width: 300px;
    max-height: 360px;
    overflow-y: auto;
    background: rgba(0, 0, 30, 0.97);
    border: 1px solid rgba(224, 153, 0, 0.45);
    border-radius: 12px;
    padding: 16px 18px 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    pointer-events: auto;
}

.sns-tooltip-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: #9E9882;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}
.sns-tooltip-close:hover { color: #ffffff; }

.sns-tooltip-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #E09900;
    margin-bottom: 8px;
    padding-right: 20px;
}

.sns-tooltip-excerpt {
    font-size: 13px;
    color: #CCCCDD;
    line-height: 1.55;
    margin: 0 0 10px 0;
}

.sns-tooltip-link {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #E09900;
    text-decoration: none;
}
.sns-tooltip-link:hover {
    text-decoration: underline;
    color: #E09900;
}

/* ℹ button positioning within card headers */
.sns-path-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.sns-ls-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

/* --- Generator Nav -------------------------------------------------------- */
.sns-gen-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    margin-bottom: 16px;
}
.sns-gen-nav--top {
    margin-top: 0;
    margin-bottom: 24px;
}

/* ==========================================================================
   CharSheet – Steampunk Dossier
   ========================================================================== */

/* --- CSS Custom Properties (scoped) --------------------------------------- */
.sns-cs-dossier {
    --cs-brass:      #D4AF37;
    --cs-brass-hi:   #F2CC44;
    --cs-brass-lo:   #8B6914;
    --cs-brass-glow: rgba(212, 175, 55, 0.22);
    --cs-copper:     #C87941;
    --cs-iron-deep:  rgba(4, 4, 14, 0.97);
    --cs-iron:       rgba(8, 8, 22, 0.93);
    --cs-text-hi:    #E4DCC4;
    --cs-text-mid:   #9E8A6A;
    --cs-text-lo:    #5A4E3A;
    --cs-border:     rgba(212, 175, 55, 0.28);
    --cs-border-hi:  rgba(212, 175, 55, 0.62);
    --cs-divider:    rgba(212, 175, 55, 0.09);
    --cs-cut:        18px;

    font-family: 'Open Sans', Arial, sans-serif;
    color: var(--cs-text-hi);
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px;
}

/* --- Reusable Panel (cut-corner + rivets) ---------------------------------- */
.sns-cs-panel {
    background: var(--cs-iron);
    border: 1px solid var(--cs-border);
    clip-path: polygon(
        var(--cs-cut) 0%,
        100% 0%,
        100% calc(100% - var(--cs-cut)),
        calc(100% - var(--cs-cut)) 100%,
        0% 100%,
        0% var(--cs-cut)
    );
    background-image:
        radial-gradient(circle at calc(100% - 10px) 10px,  rgba(212,175,55,0.4) 2.5px, transparent 2.5px),
        radial-gradient(circle at 10px calc(100% - 10px),  rgba(212,175,55,0.4) 2.5px, transparent 2.5px);
    padding: 18px 22px;
    position: relative;
}

/* --- Section heading ------------------------------------------------------- */
.sns-cs-sec-head {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--cs-brass);
    text-transform: uppercase;
    margin: 0 0 13px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--cs-border);
    display: flex;
    align-items: center;
    gap: 7px;
}
.sns-cs-sec-head::before {
    content: '◆';
    font-size: 7px;
    opacity: 0.65;
    flex-shrink: 0;
}

/* --- Masthead -------------------------------------------------------------- */
.sns-cs-masthead {
    background: var(--cs-iron-deep);
    border: 1px solid var(--cs-border-hi);
    border-left: 4px solid var(--cs-brass);
    border-radius: 3px 3px 0 0;
    padding: 13px 22px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}
.sns-cs-masthead::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.011) 0px,
        rgba(255, 255, 255, 0.011) 1px,
        transparent 1px,
        transparent 4px
    );
    pointer-events: none;
}

.sns-cs-back-link {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    color: var(--cs-text-mid);
    text-decoration: none;
    letter-spacing: 0.06em;
    white-space: nowrap;
    transition: color 0.2s ease;
    flex-shrink: 0;
}
.sns-cs-back-link:hover {
    color: var(--cs-brass);
    text-decoration: none;
}

.sns-cs-masthead-center {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 16px;
    min-width: 0;
}

.sns-cs-serial {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    color: var(--cs-text-lo);
    letter-spacing: 0.1em;
    white-space: nowrap;
    flex-shrink: 0;
}

.sns-cs-charname-masthead {
    font-size: 21px;
    font-weight: 600;
    color: var(--cs-text-hi);
    margin: 0;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Header Row: Portrait | Identity | Instruments ------------------------ */
.sns-cs-header-row {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 12px;
    margin-bottom: 12px;
    align-items: stretch;
}

/* Portrait */
.sns-cs-portrait-wrap {
    padding: 0;
    overflow: hidden;
}
.sns-cs-portrait {
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
    display: block;
    filter: sepia(0.12) contrast(1.04);
}

/* Identity */
.sns-cs-identity-panel {
    display: flex;
    flex-direction: column;
}
.sns-cs-meta-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}
.sns-cs-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sns-cs-meta-key {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--cs-text-lo);
    text-transform: uppercase;
    letter-spacing: 0.09em;
}
.sns-cs-meta-val {
    font-size: 14px;
    font-weight: 600;
    color: var(--cs-text-hi);
    line-height: 1.25;
}
.sns-cs-meta-val small {
    font-size: 11px;
    color: var(--cs-text-mid);
    font-weight: 400;
}

/* Instruments */
.sns-cs-instruments {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
    min-width: 276px;
}

.sns-cs-instrument {
    background: var(--cs-iron-deep);
    border: 1px solid var(--cs-border);
    clip-path: polygon(
        12px 0%, 100% 0%,
        100% calc(100% - 12px), calc(100% - 12px) 100%,
        0% 100%, 0% 12px
    );
    padding: 12px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}
.sns-cs-instrument::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-top: 1px solid var(--cs-divider);
    border-bottom: 1px solid var(--cs-divider);
    pointer-events: none;
}

.sns-cs-instrument-num {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}
.sns-cs-instrument-val {
    font-family: 'Courier New', Courier, monospace;
    font-size: 24px;
    font-weight: 700;
    color: var(--cs-brass);
    line-height: 1;
    text-shadow: 0 0 14px var(--cs-brass-glow);
}
.sns-cs-instrument-currency {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    color: var(--cs-copper);
    line-height: 1;
}
.sns-cs-instrument-label {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    color: var(--cs-text-mid);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 5px;
    line-height: 1.2;
    text-align: center;
    display: block;
}
.sns-cs-instrument-sublabel {
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    color: var(--cs-brass);
    letter-spacing: 0.04em;
    margin-top: 2px;
    line-height: 1;
    text-align: center;
    display: block;
    opacity: 0.75;
}

/* --- Initiative-Trigger (Reflexe-Instrument) ------------------------------ */
.sns-cs-initiative-trigger {
    cursor: pointer;
    transition: background 0.18s ease;
    user-select: none;
    pointer-events: auto;
}
.sns-cs-initiative-trigger * {
    cursor: pointer;
    pointer-events: none; /* Klicks fallen durch zu Parent */
}
.sns-cs-initiative-trigger:hover {
    background: rgba(212, 175, 55, 0.09);
}
.sns-cs-initiative-trigger:active {
    background: rgba(212, 175, 55, 0.15);
}
.sns-cs-init-hint {
    font-size: 9px;
    opacity: 0.45;
    margin-left: 2px;
    vertical-align: middle;
    transition: opacity 0.15s ease;
}
.sns-cs-initiative-trigger:hover .sns-cs-init-hint {
    opacity: 0.85;
}

/* --- Heldenmoment-Trigger -------------------------------------------------- */
.sns-cs-helden-trigger {
    cursor: pointer;
    transition: background 0.18s ease, opacity 0.2s ease;
    user-select: none;
    pointer-events: auto;
}
.sns-cs-helden-trigger * {
    cursor: pointer;
    pointer-events: none;
}
.sns-cs-helden-trigger:not(.sns-cs-helden-empty):hover {
    background: rgba(212, 175, 55, 0.09);
}
.sns-cs-helden-trigger:not(.sns-cs-helden-empty):active {
    background: rgba(212, 175, 55, 0.15);
}
.sns-cs-helden-trigger.sns-cs-helden-empty {
    cursor: default;
    opacity: 0.38;
}
.sns-cs-helden-trigger.sns-cs-helden-empty .sns-cs-helden-hint {
    display: none;
}
.sns-cs-helden-hint {
    font-size: 9px;
    opacity: 0.45;
    margin-left: 2px;
    vertical-align: middle;
    transition: opacity 0.15s ease;
}
.sns-cs-helden-trigger:not(.sns-cs-helden-empty):hover .sns-cs-helden-hint {
    opacity: 0.85;
}
.sns-cs-helden-busy {
    pointer-events: none;
    opacity: 0.6;
}

/* Initiative-Popup */
.sns-cs-initiative-popup {
    position: fixed;
    z-index: 99992;
    background: var(--cs-iron-deep, rgba(4, 4, 14, 0.97));
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 10px;
    padding: 12px 18px 14px;
    min-width: 150px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
    animation: snsInitPop 0.20s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}
@keyframes snsInitPop {
    from { opacity: 0; transform: scale(0.82) translateY(6px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.sns-cs-init-label {
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cs-text-lo, #5A4E3A);
    margin-bottom: 8px;
    text-align: center;
}

.sns-cs-init-formula {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.sns-cs-init-die {
    width: 26px;
    height: 26px;
    border: 1px solid rgba(212, 175, 55, 0.50);
    border-radius: 5px;
    background: rgba(212, 175, 55, 0.10);
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--cs-brass, #D4AF37);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 7px rgba(212, 175, 55, 0.15);
}

.sns-cs-init-op {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    color: var(--cs-text-lo, #5A4E3A);
    white-space: nowrap;
}

.sns-cs-init-total {
    font-family: 'Courier New', Courier, monospace;
    font-size: 30px;
    font-weight: 700;
    color: var(--cs-brass-hi, #F2CC44);
    text-shadow: 0 0 18px rgba(212, 175, 55, 0.40);
    line-height: 1;
}

/* --- Tracker-Instrument (Gesundheit / Konzentration) ----------------------- */
.sns-cs-tracker-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.sns-cs-tracker-input {
    font-family: 'Courier New', Courier, monospace;
    font-size: 22px;
    font-weight: 700;
    color: var(--cs-brass);
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(212, 175, 55, 0.28);
    text-align: right;
    width: 2.4ch;
    padding: 0 0 1px;
    line-height: 1;
    text-shadow: 0 0 14px var(--cs-brass-glow);
    -moz-appearance: textfield;
    transition: border-color 0.18s ease, text-shadow 0.18s ease;
    cursor: text;
}
.sns-cs-tracker-input::-webkit-outer-spin-button,
.sns-cs-tracker-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sns-cs-tracker-input:focus {
    outline: none;
    border-bottom-color: var(--cs-brass);
    text-shadow: 0 0 18px rgba(212, 175, 55, 0.5);
}

.sns-cs-tracker-sep {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    color: var(--cs-text-lo);
    line-height: 1;
    user-select: none;
}

.sns-cs-tracker-max {
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--cs-text-mid);
    line-height: 1;
    user-select: none;
}

/* --- Main 3-column grid ---------------------------------------------------- */
.sns-cs-grid {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: 12px;
    margin-bottom: 12px;
    align-items: start;
}

/* --- Attribute rows -------------------------------------------------------- */
.sns-cs-attr-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 7px;
    padding: 5px 0 4px;
    border-bottom: 1px solid var(--cs-divider);
}
.sns-cs-attr-row:last-child { border-bottom: none; }

/* Name + i-Button immer auf eigener Zeile */
.sns-cs-attr-name {
    flex: 0 0 100%;
    font-size: 12px;
    color: var(--cs-text-hi);
    display: flex;
    align-items: center;
}

.sns-cs-pips {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}
.sns-cs-pip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.28);
    background: transparent;
    flex-shrink: 0;
}
.sns-cs-pip.filled {
    background: radial-gradient(circle at 32% 32%, #F2CC44, #C88C12);
    border-color: var(--cs-brass);
    box-shadow: 0 0 4px rgba(212, 175, 55, 0.3);
}
.sns-cs-pips--sm .sns-cs-pip {
    width: 7px;
    height: 7px;
}

.sns-cs-attr-val {
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--cs-brass);
    min-width: 16px;
    text-align: right;
    line-height: 1;
}

/* --- Skill rows ------------------------------------------------------------ */
.sns-cs-skill-header {
    display: grid;
    grid-template-columns: 1fr 22px 10px 20px 28px;
    gap: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--cs-text-lo);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0 0 5px;
    border-bottom: 1px solid var(--cs-divider);
    margin-bottom: 6px;
}
.sns-cs-skill-header span:not(:first-child) { text-align: center; }

.sns-cs-skill-cat {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--cs-text-lo);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 11px 0 3px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--cs-divider);
}
.sns-cs-skill-cat:first-of-type { margin-top: 0; }

.sns-cs-skill-row {
    display: grid;
    grid-template-columns: 1fr 22px 10px 20px 28px;
    gap: 3px;
    align-items: center;
    padding: 3px 0;
    border-bottom: 1px solid var(--cs-divider);
    transition: background 0.15s ease;
}
.sns-cs-skill-row:last-child { border-bottom: none; }
.sns-cs-skill-row:hover { background: rgba(212, 175, 55, 0.04); }

.sns-cs-skill-name {
    font-size: 12px;
    color: var(--cs-text-hi);
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.sns-cs-skill-fixed-tag {
    font-size: 10px;
    color: var(--cs-text-lo);
    background: rgba(212, 175, 55, 0.07);
    border: 1px solid var(--cs-divider);
    border-radius: 2px;
    padding: 1px 3px;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}
.sns-cs-skill-attr-val,
.sns-cs-skill-sep,
.sns-cs-skill-val {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    color: var(--cs-text-mid);
    text-align: center;
    line-height: 1;
}
.sns-cs-skill-sep { color: var(--cs-text-lo); font-size: 12px; }

.sns-cs-skill-total {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--cs-text-mid);
    text-align: center;
    line-height: 1;
    border: 1px solid var(--cs-divider);
    border-radius: 2px;
    padding: 1px 2px;
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.sns-cs-skill-total--hi {
    color: var(--cs-brass-hi);
    border-color: rgba(212, 175, 55, 0.48);
    box-shadow: 0 0 7px rgba(212, 175, 55, 0.14), inset 0 0 4px rgba(212, 175, 55, 0.05);
}

/* --- Path ability rows ----------------------------------------------------- */
.sns-cs-pa-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 6px 6px;
    border-bottom: 1px solid var(--cs-divider);
    border-left: 2px solid transparent;
    transition: border-left-color 0.2s ease, background 0.15s ease;
}
.sns-cs-pa-row:last-of-type { border-bottom: none; }
.sns-cs-pa-row:hover {
    border-left-color: var(--cs-brass-lo);
    background: rgba(212, 175, 55, 0.03);
}
.sns-cs-pa-name {
    flex: 1;
    font-size: 12px;
    color: var(--cs-text-hi);
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.sns-cs-pa-origin {
    font-size: 11px;
    color: var(--cs-text-lo);
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.04em;
    flex: 0 0 100%;
    margin-top: 1px;
}
.sns-cs-pa-level {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--cs-brass);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 14px;
    text-align: right;
}

/* Vorteile */
.sns-cs-vorteil-row {
    padding: 5px 0 5px 6px;
    border-bottom: 1px solid var(--cs-divider);
}
.sns-cs-vorteil-row:last-child { border-bottom: none; }
.sns-cs-vorteil-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--cs-text-hi);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}
.sns-cs-vorteil-desc {
    font-size: 12px;
    color: var(--cs-text-mid);
    line-height: 1.4;
}

/* Empty hint */
.sns-cs-empty-hint {
    font-size: 12px;
    color: var(--cs-text-lo);
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.04em;
}

/* Save error message */
.sns-cs-hist-error {
    background: rgba(180, 40, 40, 0.25);
    border: 1px solid rgba(200, 60, 60, 0.6);
    border-radius: 6px;
    color: #ff9999;
    font-size: 12px;
    padding: 7px 12px;
    margin-bottom: 10px;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.03em;
}

/* --- Dossier panel (Hintergrund) ------------------------------------------ */
.sns-cs-dossier-panel {
    margin-top: 20px;
    background: var(--cs-iron);
    border: 1px solid var(--cs-border);
    clip-path: polygon(
        var(--cs-cut) 0%,
        100% 0%,
        100% calc(100% - var(--cs-cut)),
        calc(100% - var(--cs-cut)) 100%,
        0% 100%,
        0% var(--cs-cut)
    );
    background-image:
        radial-gradient(circle at calc(100% - 10px) 10px,  rgba(212,175,55,0.4) 2.5px, transparent 2.5px),
        radial-gradient(circle at 10px calc(100% - 10px),  rgba(212,175,55,0.4) 2.5px, transparent 2.5px);
    padding: 18px 22px;
}

.sns-cs-dossier-btn {
    background: none;
    border: none;
    color: var(--cs-brass);
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    transition: color 0.2s ease;
}
.sns-cs-dossier-btn:hover { color: var(--cs-brass-hi); }

.sns-cs-gear-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    transition: transform 0.32s ease;
    stroke: currentColor;
}
.sns-cs-dossier-btn.open .sns-cs-gear-icon {
    transform: rotate(90deg);
}

.sns-cs-chevron {
    font-size: 10px;
    transition: transform 0.22s ease;
    display: inline-block;
    margin-left: auto;
    opacity: 0.55;
}
.sns-cs-dossier-btn.open .sns-cs-chevron {
    transform: rotate(180deg);
}

/* Hintergrund-Inhalt */
.sns-cs-bg-content {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.sns-cs-bg-group-title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--cs-brass);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--cs-border);
}
.sns-cs-bg-field { margin-bottom: 12px; }
.sns-cs-bg-field:last-child { margin-bottom: 0; }
.sns-cs-bg-field-label {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--cs-text-lo);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 3px;
}
.sns-cs-bg-field-value {
    font-size: 12px;
    color: var(--cs-text-hi);
    line-height: 1.58;
}

/* --- History Panel (Feldtagebuch) ----------------------------------------- */
.sns-cs-history-panel {
    margin-top: 20px;
}

/* Kopfzeile: Titel links, Filter rechts */
.sns-cs-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

/* Inline-Variante von sec-head (kein margin, kein border-bottom) */
.sns-cs-sec-head--inline {
    margin: 0;
    padding: 0;
    border: none;
}

/* Filter-Tabs */
.sns-cs-hist-filters {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.sns-hist-filter {
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cs-text-lo);
    background: transparent;
    border: 1px solid var(--cs-divider);
    border-radius: 2px;
    padding: 3px 8px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.sns-hist-filter:hover {
    color: var(--cs-text-mid);
    border-color: var(--cs-border);
}

.sns-hist-filter.active {
    color: var(--cs-brass);
    border-color: rgba(212, 175, 55, 0.45);
    background: rgba(212, 175, 55, 0.06);
}

/* Eingabeformular */
.sns-cs-hist-form {
    background: rgba(4, 4, 14, 0.45);
    border: 1px solid var(--cs-divider);
    border-radius: 4px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.sns-cs-hist-label {
    display: block;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--cs-text-lo);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 5px;
}

.sns-cs-hist-textarea {
    width: 100%;
    background: rgba(4, 4, 14, 0.6);
    border: 1px solid var(--cs-border);
    border-radius: 4px;
    color: var(--cs-text-hi);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    padding: 8px 10px;
    resize: vertical;
    min-height: 72px;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.sns-cs-hist-textarea:focus {
    outline: none;
    border-color: rgba(212, 175, 55, 0.55);
}

.sns-cs-hist-textarea::placeholder {
    color: var(--cs-text-lo);
    opacity: 1;
}

.sns-cs-hist-form-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.sns-cs-hist-field {
    display: flex;
    flex-direction: column;
}

.sns-cs-hist-field--full {
    width: 100%;
}

.sns-cs-hist-number {
    width: 82px;
    background: rgba(4, 4, 14, 0.6);
    border: 1px solid var(--cs-border);
    border-radius: 4px;
    color: var(--cs-text-hi);
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    font-weight: 700;
    padding: 6px 8px;
    text-align: center;
    transition: border-color 0.15s ease;
    -moz-appearance: textfield;
}

.sns-cs-hist-number::-webkit-outer-spin-button,
.sns-cs-hist-number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sns-cs-hist-number:focus {
    outline: none;
    border-color: rgba(212, 175, 55, 0.55);
}

.sns-cs-hist-submit {
    margin-left: auto;
    background: rgba(212, 175, 55, 0.10);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 4px;
    color: var(--cs-brass);
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 6px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.sns-cs-hist-submit:hover {
    background: rgba(212, 175, 55, 0.18);
    border-color: rgba(212, 175, 55, 0.60);
}

.sns-cs-hist-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Eintragliste */
.sns-cs-hist-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 440px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.3) transparent;
}

.sns-cs-hist-list::-webkit-scrollbar        { width: 4px; }
.sns-cs-hist-list::-webkit-scrollbar-track  { background: transparent; }
.sns-cs-hist-list::-webkit-scrollbar-thumb  { background: rgba(212, 175, 55, 0.30); border-radius: 2px; }
.sns-cs-hist-list::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.55); }

.sns-cs-hist-entry {
    padding: 10px 4px;
    border-bottom: 1px solid var(--cs-divider);
    transition: background 0.12s ease;
}

.sns-cs-hist-entry:last-child { border-bottom: none; }

.sns-cs-hist-entry:hover {
    background: rgba(212, 175, 55, 0.03);
}

.sns-cs-hist-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.sns-cs-hist-date {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    color: var(--cs-text-lo);
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.sns-cs-hist-badge {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    border-radius: 2px;
    padding: 1px 6px;
    white-space: nowrap;
}

.sns-cs-hist-badge--ep {
    color: #7EC8A0;
    background: rgba(126, 200, 160, 0.10);
    border: 1px solid rgba(126, 200, 160, 0.22);
}

.sns-cs-hist-badge--money {
    color: var(--cs-copper);
    background: rgba(200, 121, 65, 0.10);
    border: 1px solid rgba(200, 121, 65, 0.22);
}

.sns-cs-hist-badge--error {
    color: #ff8888;
    background: rgba(200, 50, 50, 0.12);
    border: 1px solid rgba(200, 50, 50, 0.30);
    letter-spacing: 0.07em;
}

.sns-cs-hist-badge--dice {
    color: #8BB8E0;
    background: rgba(100, 160, 220, 0.08);
    border: 1px solid rgba(100, 160, 220, 0.22);
    letter-spacing: 0.04em;
}

.sns-cs-hist-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--cs-text-hi);
    margin-bottom: 3px;
}

.sns-cs-hist-content {
    font-size: 13px;
    color: var(--cs-text-mid);
    line-height: 1.58;
}

/* Error entries (admin only) */
.sns-cs-hist-entry--error {
    border-left: 2px solid rgba(200, 50, 50, 0.55);
    padding-left: 10px;
    background: rgba(160, 30, 30, 0.07);
}

.sns-cs-hist-entry--error:hover {
    background: rgba(160, 30, 30, 0.12);
}

.sns-cs-hist-entry--error .sns-cs-hist-title {
    color: #ff9999;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sns-cs-hist-entry--error .sns-cs-hist-content {
    color: rgba(255, 180, 180, 0.75);
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    line-height: 1.65;
    word-break: break-all;
}

/* FEHLER filter tab */
.sns-hist-filter--error {
    color: rgba(255, 120, 120, 0.65);
    border-color: rgba(200, 50, 50, 0.35);
}

.sns-hist-filter--error:hover {
    color: #ff9999;
    border-color: rgba(200, 50, 50, 0.65);
    background: rgba(160, 30, 30, 0.12);
}

.sns-hist-filter--error.active {
    color: #ff9999;
    border-color: rgba(200, 50, 50, 0.65);
    background: rgba(160, 30, 30, 0.18);
}

/* ==========================================================================
   Stat-Panel – Würfeln & Steigern
   ========================================================================== */

/* --- Stat-Wrap (gemeinsames Wrapper-Element) ------------------------------- */
.sns-cs-stat-wrap {
    border-bottom: 1px solid var(--cs-divider);
}
.sns-cs-stat-wrap:last-child {
    border-bottom: none;
}

/* Individuelle Zeilentrennlinien abschalten — Wrap übernimmt */
.sns-cs-stat-wrap .sns-cs-attr-row  { border-bottom: none; }
.sns-cs-stat-wrap .sns-cs-skill-row { border-bottom: none; }
.sns-cs-stat-wrap .sns-cs-pa-row    { border-bottom: none; }

/* Letztes Element der PA-Sektion ohne doppelte Linie */
.sns-cs-pa-row:last-of-type { border-bottom: none; }

/* --- Hover-Highlight auf Stat-Wrap ---------------------------------------- */
.sns-cs-stat-wrap:hover .sns-cs-attr-row,
.sns-cs-stat-wrap:hover .sns-cs-skill-row,
.sns-cs-stat-wrap:hover .sns-cs-pa-row {
    background: rgba(212, 175, 55, 0.05);
    cursor: default;
}

/* --- Stat-Panel ------------------------------------------------------------ */
.sns-cs-stat-panel {
    display: none;
    background: rgba(2, 2, 12, 0.55);
    border-top: 1px solid var(--cs-divider);
    padding: 9px 10px 11px 14px;
}

/* --- Würfelergebnis-Bereich ------------------------------------------------ */
.sns-cs-roll-result {
    margin-bottom: 8px;
    min-height: 0;
}

/* Würfelpool */
.sns-cs-dice-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.sns-cs-die {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(212, 175, 55, 0.20);
    border-radius: 4px;
    background: rgba(4, 4, 16, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--cs-text-lo);
    animation: snsRollIn 0.22s ease both;
    flex-shrink: 0;
}

.sns-cs-die--success {
    background: rgba(212, 175, 55, 0.13);
    border-color: var(--cs-brass);
    color: var(--cs-brass-hi);
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.18);
}

@keyframes snsRollIn {
    from { opacity: 0; transform: scale(0.55) rotate(-20deg); }
    to   { opacity: 1; transform: scale(1)    rotate(0); }
}

/* Zusammenfassung */
.sns-cs-roll-summary {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    color: var(--cs-text-mid);
    letter-spacing: 0.03em;
    line-height: 1.4;
    margin: 0;
}
.sns-roll-succ {
    font-weight: 700;
    color: var(--cs-brass);
    font-size: 13px;
}

/* Feier-Animation bei 5+ Erfolgen */
.sns-cs-roll-celebrate {
    animation: snsCelebrate 0.55s ease both;
}
@keyframes snsCelebrate {
    0%   { transform: scale(0.92); }
    45%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}
.sns-cs-roll-celebrate .sns-cs-die--success {
    border-color: var(--cs-brass-hi);
    box-shadow: 0 0 9px rgba(242, 204, 68, 0.35);
}

/* --- Aktionszeile ---------------------------------------------------------- */
.sns-cs-stat-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.sns-cs-roll-btn {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(212, 175, 55, 0.07);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 3px;
    color: var(--cs-text-mid);
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sns-cs-roll-btn:hover {
    background: rgba(212, 175, 55, 0.14);
    border-color: rgba(212, 175, 55, 0.48);
    color: var(--cs-brass);
}
.sns-cs-roll-btn:active {
    transform: scale(0.97);
}

.sns-cs-mod-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    color: var(--cs-text-lo);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: default;
    flex-shrink: 0;
}

.sns-cs-mod-input {
    width: 40px;
    background: rgba(4, 4, 16, 0.80);
    border: 1px solid var(--cs-divider);
    border-radius: 3px;
    color: var(--cs-text-hi);
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    padding: 3px 4px;
    transition: border-color 0.15s ease;
    -moz-appearance: textfield;
}
.sns-cs-mod-input::-webkit-outer-spin-button,
.sns-cs-mod-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sns-cs-mod-input:focus { outline: none; border-color: rgba(212, 175, 55, 0.45); }

.sns-cs-upgrade-btn {
    margin-left: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(126, 200, 160, 0.07);
    border: 1px solid rgba(126, 200, 160, 0.28);
    border-radius: 3px;
    color: #7EC8A0;
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.sns-cs-upgrade-btn:hover {
    background: rgba(126, 200, 160, 0.14);
    border-color: rgba(126, 200, 160, 0.52);
}
.sns-cs-upgrade-btn:active { transform: scale(0.97); }
.sns-cs-upgrade-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Lernen-Button (Erstlernen, statt Steigern) */
.sns-cs-upgrade-btn--learn {
    border-color: rgba(100, 160, 220, 0.35);
    color: #8BB8E0;
}
.sns-cs-upgrade-btn--learn:hover {
    background: rgba(100, 160, 220, 0.10);
    border-color: rgba(100, 160, 220, 0.55);
}

/* --- Nicht-gelernt Toggle -------------------------------------------------- */
.sns-cs-learn-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px 6px 4px;
    margin-top: 10px;
    cursor: pointer;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--cs-text-lo);
    border-top: 1px solid var(--cs-divider);
    user-select: none;
    transition: color 0.15s ease;
}
.sns-cs-learn-toggle:hover { color: var(--cs-text-mid); }
.sns-cs-learn-toggle.open  { color: var(--cs-brass); }

.sns-cs-learn-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 5px;
    font-size: 9px;
    background: rgba(212, 175, 55, 0.10);
    border: 1px solid var(--cs-divider);
    border-radius: 8px;
    color: var(--cs-text-mid);
    vertical-align: middle;
}

.sns-cs-learn-chevron {
    font-size: 9px;
    opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.15s ease;
    display: inline-block;
}
.sns-cs-learn-toggle.open .sns-cs-learn-chevron {
    transform: rotate(90deg);
    opacity: 0.85;
}

/* Ungelernter Skill/PA: etwas gedimmt */
.sns-cs-skill-row--unlearned .sns-cs-skill-name,
.sns-cs-skill-row--unlearned .sns-cs-skill-val,
.sns-cs-skill-row--unlearned .sns-cs-skill-total,
.sns-cs-pa-row--unlearned .sns-cs-pa-name,
.sns-cs-pa-row--unlearned .sns-cs-pa-level {
    opacity: 0.6;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
    .sns-cs-header-row {
        grid-template-columns: 120px 1fr;
        grid-template-rows: auto auto;
    }
    .sns-cs-instruments {
        grid-column: 1 / -1;
        min-width: 0;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
    .sns-cs-grid {
        grid-template-columns: 1fr 1.4fr;
    }
    .sns-cs-grid > :last-child {
        grid-column: 1 / -1;
    }
    .sns-cs-col3-wrap {
        grid-column: 1 / -1;
    }
    .sns-cs-bg-content { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .sns-char-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
    .sns-char-card--new { min-height: 200px; }
    .sns-cs-header-row  { grid-template-columns: 1fr; }
    .sns-cs-portrait-wrap { max-width: 140px; }
    .sns-cs-instruments {
        grid-column: auto;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
    .sns-cs-grid        { grid-template-columns: 1fr; }
    .sns-cs-grid > :last-child { grid-column: auto; }
    .sns-cs-col3-wrap          { grid-column: auto; }
    .sns-cs-bg-content  { grid-template-columns: 1fr; }
    .sns-cs-hist-form-row { flex-wrap: wrap; }
    .sns-cs-hist-submit  { width: 100%; justify-content: center; }
}

@media (max-width: 380px) {
    .sns-char-grid { grid-template-columns: 1fr; }
    .sns-cs-instruments { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
}

/* ==========================================================================
   Lebensstile-Sektion (Charsheet)
   ========================================================================== */

.sns-cs-col3-wrap {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: start;
}

.sns-cs-ls-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.sns-cs-ls-zahlen-btn {
    font-size: 11px;
    padding: 5px 14px;
    flex-shrink: 0;
}

/* Einzelner Lebensstil-Eintrag */
.sns-cs-ls-item {
    padding: 12px 0 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.sns-cs-ls-item:last-child {
    border-bottom: none;
}

.sns-cs-ls-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.sns-cs-ls-stufe {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--cs-brass);
    text-transform: uppercase;
}

.sns-cs-ls-monatl {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    margin-right: auto;
}

.sns-cs-ls-cancel-btn {
    font-size: 10px;
    padding: 3px 10px;
    flex-shrink: 0;
}

.sns-cs-ls-desc {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    line-height: 1.5;
    padding: 6px 9px;
    resize: vertical;
    transition: border-color 0.15s;
}
.sns-cs-ls-desc:focus {
    outline: none;
    border-color: rgba(224, 153, 0, 0.4);
}
.sns-cs-ls-desc::placeholder {
    color: rgba(255, 255, 255, 0.2);
    font-style: italic;
}

/* Booking-Zeile */
.sns-cs-ls-booking {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

.sns-cs-ls-select {
    flex: 1;
    min-width: 160px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    padding: 6px 9px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.sns-cs-ls-select:focus {
    outline: none;
    border-color: rgba(224, 153, 0, 0.45);
}
.sns-cs-ls-select option {
    background: #1a1a1a;
    color: rgba(255, 255, 255, 0.85);
}

.sns-cs-ls-book-btn {
    font-size: 11px;
    padding: 5px 16px;
    flex-shrink: 0;
}

/* ==========================================================================
   Ausrüstungs-Sektion (Charsheet)
   ========================================================================== */

.sns-cs-equip-panel {
    margin-top: 20px;
}

.sns-cs-equip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.sns-cs-equip-shop-btn {
    font-size: 11px;
    padding: 5px 14px;
    flex-shrink: 0;
}

.sns-cs-equip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: start;
}

.sns-cs-equip-col-head {
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--cs-brass);
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(224, 153, 0, 0.2);
}

.sns-cs-equip-empty {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.28);
    font-style: italic;
    padding: 4px 0;
}

/* Inventory-Item ------------------------------------------------------------ */
.sns-cs-inv-item {
    padding: 10px 0 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.1s ease;
}
.sns-cs-inv-item:last-child { border-bottom: none; }
.sns-cs-inv-item--equipped { background: rgba(40, 160, 80, 0.04); border-radius: 5px; padding-left: 6px; }

.sns-cs-inv-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.4;
}

.sns-cs-inv-desc {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.38);
    margin-top: 2px;
    line-height: 1.4;
}

.sns-cs-inv-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}

.sns-cs-inv-stat-tag {
    font-size: 10px;
    font-weight: 600;
    font-family: 'Courier New', Courier, monospace;
    background: rgba(224, 153, 0, 0.10);
    color: rgba(224, 153, 0, 0.75);
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid rgba(224, 153, 0, 0.18);
    white-space: nowrap;
}

.sns-cs-inv-equipped-tag {
    background: rgba(40, 160, 80, 0.12);
    color: rgba(80, 200, 120, 0.90);
    border-color: rgba(40, 160, 80, 0.25);
}

/* Item-Aktionszeile -------------------------------------------------------- */
.sns-cs-inv-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
}

.sns-cs-inv-btn {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    line-height: 1.5;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sns-cs-inv-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.28);
}
.sns-cs-inv-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.sns-cs-inv-btn--equip {
    border-color: rgba(224, 153, 0, 0.28);
    color: rgba(224, 153, 0, 0.80);
}
.sns-cs-inv-btn--equip:hover {
    background: rgba(224, 153, 0, 0.10);
    border-color: rgba(224, 153, 0, 0.50);
    color: var(--cs-brass);
}
.sns-cs-inv-btn--equipped {
    background: rgba(40, 160, 80, 0.10);
    border-color: rgba(40, 160, 80, 0.30);
    color: rgba(80, 200, 120, 0.90);
}
.sns-cs-inv-btn--equipped:hover {
    background: rgba(40, 160, 80, 0.18);
}

.sns-cs-inv-btn--edit {
    color: rgba(140, 180, 224, 0.65);
    border-color: rgba(140, 180, 224, 0.18);
}
.sns-cs-inv-btn--edit:hover {
    background: rgba(140, 180, 224, 0.08);
    color: rgba(140, 180, 224, 0.90);
    border-color: rgba(140, 180, 224, 0.35);
}

.sns-cs-inv-btn--delete {
    color: rgba(204, 60, 40, 0.65);
    border-color: rgba(204, 60, 40, 0.18);
}
.sns-cs-inv-btn--delete:hover {
    background: rgba(204, 60, 40, 0.10);
    color: rgba(220, 80, 60, 0.90);
    border-color: rgba(204, 60, 40, 0.38);
}

/* Löschen-Bestätigung ------------------------------------------------------ */
.sns-cs-inv-del-confirm {
    display: none;
    font-size: 11px;
    color: rgba(220, 80, 60, 0.85);
    margin-top: 6px;
    padding: 5px 8px;
    background: rgba(204, 60, 40, 0.07);
    border: 1px solid rgba(204, 60, 40, 0.18);
    border-radius: 5px;
}
.sns-cs-inv-del-confirm .sns-cs-inv-del-yes,
.sns-cs-inv-del-confirm .sns-cs-inv-del-no {
    margin-left: 6px;
}

/* Inline Edit-Form --------------------------------------------------------- */
.sns-cs-inv-edit-form {
    display: none;
    margin-top: 7px;
}
.sns-cs-inv-edit-form input[type="text"],
.sns-cs-inv-edit-form textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: rgba(4, 4, 16, 0.70);
    border: 1px solid rgba(224, 153, 0, 0.28);
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.85);
    padding: 5px 8px;
    font-size: 12px;
    font-family: 'Open Sans', Arial, sans-serif;
    margin-bottom: 5px;
    resize: vertical;
    transition: border-color 0.15s ease;
}
.sns-cs-inv-edit-form input[type="text"]:focus,
.sns-cs-inv-edit-form textarea:focus {
    outline: none;
    border-color: rgba(224, 153, 0, 0.55);
}
.sns-cs-inv-edit-btns {
    display: flex;
    gap: 5px;
    margin-top: 3px;
}
.sns-cs-inv-btn--save {
    border-color: rgba(126, 200, 160, 0.30);
    color: rgba(126, 200, 160, 0.85);
}
.sns-cs-inv-btn--save:hover {
    background: rgba(126, 200, 160, 0.10);
    border-color: rgba(126, 200, 160, 0.55);
}

@media (max-width: 767px) {
    .sns-cs-equip-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ==========================================================================
   Shop-View
   ========================================================================== */

.sns-shop-masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

.sns-shop-masthead-center {
    text-align: center;
    flex: 1;
}
.sns-shop-charname {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 3px;
}

.sns-shop-balance {
    display: flex;
    align-items: baseline;
    gap: 5px;
    background: rgba(224, 153, 0, 0.08);
    border: 1px solid rgba(224, 153, 0, 0.22);
    border-radius: 8px;
    padding: 6px 14px;
    white-space: nowrap;
}
.sns-shop-balance-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--cs-brass);
    font-family: 'Courier New', Courier, monospace;
}
.sns-shop-balance-cur {
    font-size: 11px;
    color: rgba(224, 153, 0, 0.65);
    letter-spacing: 0.04em;
}

/* Tabs --------------------------------------------------------------------- */
.sns-shop-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    padding-bottom: 0;
}
.sns-shop-tab {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 18px;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    transition: color 0.15s ease, background 0.15s ease;
    margin-bottom: -1px;
}
.sns-shop-tab:hover { color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.04); }
.sns-shop-tab.active {
    color: var(--cs-brass);
    background: rgba(224, 153, 0, 0.06);
    border-color: rgba(212, 175, 55, 0.22);
    border-bottom-color: transparent;
}

/* Artikel-Grid ------------------------------------------------------------- */
.sns-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.sns-shop-card {
    background: rgba(6, 6, 20, 0.75);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.sns-shop-card:hover {
    border-color: rgba(212, 175, 55, 0.38);
    background: rgba(6, 6, 20, 0.88);
}

.sns-shop-card-type {
    font-family: 'Courier New', Courier, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(224, 153, 0, 0.55);
}
.sns-shop-card-name {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.90);
    line-height: 1.3;
}
.sns-shop-card-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.5;
    flex: 1;
}
.sns-shop-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.sns-shop-stat-tag {
    font-size: 10px;
    font-weight: 600;
    font-family: 'Courier New', Courier, monospace;
    background: rgba(224, 153, 0, 0.09);
    color: rgba(224, 153, 0, 0.72);
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid rgba(224, 153, 0, 0.18);
}
.sns-shop-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.sns-shop-card-price {
    font-size: 16px;
    font-weight: 700;
    font-family: 'Courier New', Courier, monospace;
    color: var(--cs-brass);
}

/* Kauf-Modal --------------------------------------------------------------- */
.sns-shop-modal {
    max-width: 440px;
}
.sns-shop-modal-price-row {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 14px;
}
.sns-shop-modal-price-row strong {
    color: var(--cs-brass);
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
}
.sns-shop-modal-field {
    margin-bottom: 12px;
}
.sns-shop-modal-input,
.sns-shop-modal-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: rgba(4, 4, 16, 0.70);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    padding: 7px 10px;
    font-size: 13px;
    font-family: 'Open Sans', Arial, sans-serif;
    margin-top: 5px;
    resize: vertical;
    transition: border-color 0.15s ease;
}
.sns-shop-modal-input:focus,
.sns-shop-modal-textarea:focus {
    outline: none;
    border-color: rgba(224, 153, 0, 0.55);
}
.sns-shop-modal-error {
    font-size: 12px;
    color: #cc4030;
    padding: 6px 8px;
    border: 1px solid rgba(204, 64, 48, 0.28);
    border-radius: 5px;
    background: rgba(204, 64, 48, 0.07);
    margin-bottom: 10px;
}

/* Kauf-Flash-Notification -------------------------------------------------- */
.sns-shop-flash-success {
    position: fixed;
    bottom: 28px;
    right: 24px;
    z-index: 9999;
    background: rgba(40, 160, 80, 0.92);
    color: #fff;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

/* Filter-Bar (Allgemein-Tab) ------------------------------------------------ */
.sns-shop-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
}
.sns-shop-search-input {
    flex: 0 0 220px;
    padding: 6px 12px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.3);
    color: #e8e0cc;
    font-size: 13px;
    outline: none;
}
.sns-shop-search-input:focus {
    border-color: rgba(232,160,64,0.5);
}
.sns-shop-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sns-shop-filter-chip {
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.15);
    background: transparent;
    color: #9E9882;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s ease;
}
.sns-shop-filter-chip:hover {
    border-color: rgba(232,160,64,0.4);
    color: #e8d0a0;
}
.sns-shop-filter-chip.active {
    background: rgba(232,160,64,0.15);
    border-color: rgba(232,160,64,0.5);
    color: #e8c060;
}
.sns-shop-no-results {
    text-align: center;
    color: #666;
    font-size: 13px;
    padding: 40px 0;
}

/* Karte ausgegraut (Stärke zu gering) -------------------------------------- */
.sns-shop-card--disabled {
    opacity: 0.55;
}
.sns-shop-card--disabled .sns-shop-buy-btn {
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.6);
}

/* Stat-Tag Warnung --------------------------------------------------------- */
.sns-stat-tag--warn,
.sns-shop-card .sns-stat-tag--warn {
    background: rgba(204, 100, 30, 0.12);
    color: #c0561a;
    border-color: rgba(204, 100, 30, 0.3);
}

/* Entfernungs-Rechner auf Fernkampfkarten ---------------------------------- */
.sns-shop-dist-calc {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 4px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    font-size: 12px;
    color: #aaa;
}
.sns-shop-dist-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #bbb;
}
.sns-shop-dist-input {
    width: 60px;
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.3);
    color: #e8e0cc;
    font-size: 12px;
}
.sns-shop-dist-result {
    color: #aaa;
    font-size: 12px;
}
.sns-shop-dist-malus {
    color: #e8a040;
    font-weight: 700;
}

/* Modal Stat-Gruppen ------------------------------------------------------- */
.sns-shop-modal-stats-group {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
}
.sns-shop-modal-stats-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9E9882;
    margin-bottom: 8px;
}
.sns-shop-modal-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
@media (max-width: 480px) {
    .sns-shop-modal-stats-grid { grid-template-columns: 1fr; }
}

/* Inventar-Fernkampf Entfernungsrechner im Charbogen ----------------------- */
.sns-cs-inv-dist-calc {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 2px;
    font-size: 11px;
    color: #9E9882;
}
.sns-cs-inv-dist-input {
    width: 52px;
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.25);
    color: #e8e0cc;
    font-size: 11px;
}
.sns-cs-inv-dist-malus {
    color: #e8a040;
    font-weight: 700;
}

@media (max-width: 600px) {
    .sns-shop-masthead { flex-direction: column; align-items: flex-start; }
    .sns-shop-masthead-center { text-align: left; }
    .sns-shop-grid { grid-template-columns: 1fr; }
}

/* --- Modul-Shortcuts (Werkstatt / Labor) ----------------------------------- */
.sns-cs-module-shortcuts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
}

.sns-cs-module-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 10px;
    color: #D4AF37;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 10px 16px;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.sns-cs-module-btn:hover {
    background: rgba(212, 175, 55, 0.18);
    border-color: rgba(212, 175, 55, 0.6);
    color: #ffffff;
    text-decoration: none;
}

/* ==========================================================================
   MagoMechanik-Werkstatt
   ========================================================================== */

/* --- Subtitle unter Seitentitel ------------------------------------------ */
.sns-subtitle {
    font-size: 12px;
    color: #9E9882;
    margin: 4px 0 0 0;
    letter-spacing: 0.03em;
}

/* --- Tab-Navigation ------------------------------------------------------- */
.sns-mm-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.22);
    padding-bottom: 0;
}

.sns-mm-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #9E9882;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px 12px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    position: relative;
    top: 1px;
}
.sns-mm-tab-btn:hover   { color: #D4AF37; }
.sns-mm-tab-btn.is-active {
    color: #D4AF37;
    border-bottom-color: #D4AF37;
}

.sns-mm-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.22);
    color: #D4AF37;
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    margin-left: 6px;
    vertical-align: middle;
}

/* --- Tab Panels ----------------------------------------------------------- */
.sns-mm-tab-panel        { display: none; }
.sns-mm-tab-panel.is-active { display: block; }

/* --- Globale Notice ------------------------------------------------------- */
.sns-mm-notice {
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}
.sns-mm-notice.is-success { background: rgba(76,175,90,0.18); border: 1px solid rgba(76,175,90,0.4); color: #6fcf82; }
.sns-mm-notice.is-error   { background: rgba(204,51,0,0.18);  border: 1px solid rgba(204,51,0,0.4);  color: #f07060; }
.sns-mm-notice.is-info    { background: rgba(212,175,55,0.12);border: 1px solid rgba(212,175,55,0.28);color: #D4AF37; }

/* --- Section-Titel -------------------------------------------------------- */
.sns-mm-section-title {
    font-size: 17px;
    font-weight: 600;
    color: #D4AF37;
    margin: 0 0 18px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

/* --- Formulare ------------------------------------------------------------ */
.sns-mm-create-card { margin-bottom: 12px; }

.sns-mm-form { display: flex; flex-direction: column; gap: 14px; }

.sns-mm-form-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sns-mm-form-row label {
    font-size: 13px;
    font-weight: 600;
    color: #9E9882;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sns-mm-input,
.sns-mm-select,
.sns-mm-textarea {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 8px;
    color: #ffffff;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    padding: 9px 14px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.sns-mm-input:focus,
.sns-mm-select:focus,
.sns-mm-textarea:focus { border-color: #D4AF37; outline: none; }
.sns-mm-select { cursor: pointer; }
.sns-mm-textarea { resize: vertical; min-height: 60px; }

.sns-mm-req       { color: #E09900; margin-left: 2px; }
.sns-mm-hint-text { color: #9E9882; font-weight: 400; }

/* --- Leerer Zustand ------------------------------------------------------- */
.sns-mm-empty-state {
    background: rgba(6, 6, 16, 0.6);
    border: 1px dashed rgba(212, 175, 55, 0.22);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    color: #9E9882;
    font-size: 14px;
}

/* --- Blueprint-Karte ------------------------------------------------------ */
.sns-mm-blueprint {
    background: rgba(6, 6, 16, 0.88);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}
.sns-mm-blueprint::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #D4AF37 0%, rgba(212,175,55,0.2) 100%);
}

.sns-mm-bp-header    { margin-bottom: 18px; }
.sns-mm-bp-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.sns-mm-bp-name      { font-size: 17px; font-weight: 700; color: #ffffff; margin: 0; }
.sns-mm-bp-desc      { font-size: 13px; color: #9E9882; margin: 6px 0 0 0; }

/* --- Stufe-Pill ----------------------------------------------------------- */
.sns-mm-stufe-pill {
    font-size: 11px;
    font-weight: 700;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #D4AF37;
    border-radius: 20px;
    padding: 2px 10px;
    white-space: nowrap;
    letter-spacing: 0.04em;
}

/* --- Status-Badge --------------------------------------------------------- */
.sns-mm-status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.sns-mm-status-badge--entwurf      { background: rgba(100,149,237,0.18); border: 1px solid rgba(100,149,237,0.4); color: #8ab4f8; }
.sns-mm-status-badge--teile_fehlen { background: rgba(224,153,0,0.18);   border: 1px solid rgba(224,153,0,0.4);   color: #E09900; }
.sns-mm-status-badge--bereit       { background: rgba(76,175,90,0.18);   border: 1px solid rgba(76,175,90,0.4);   color: #6fcf82; }
.sns-mm-status-badge--gebaut       { background: rgba(212,175,55,0.18);  border: 1px solid rgba(212,175,55,0.4);  color: #D4AF37; }
.sns-mm-status-badge--improvisiert { background: rgba(180,100,220,0.18); border: 1px solid rgba(180,100,220,0.4); color: #c07fe0; }

/* --- Phasen-Indikator ----------------------------------------------------- */
.sns-mm-phase {
    border-left: 2px solid rgba(212, 175, 55, 0.12);
    margin: 14px 0;
    padding: 14px 0 14px 18px;
    opacity: 0.45;
    transition: opacity 0.3s;
}
.sns-mm-phase.is-active { opacity: 1; border-left-color: #D4AF37; }
.sns-mm-phase.is-done   { opacity: 0.65; border-left-color: #6fcf82; }

.sns-mm-phase-label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 700;
    color: #9E9882;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}
.sns-mm-phase.is-active .sns-mm-phase-label { color: #D4AF37; }
.sns-mm-phase.is-done   .sns-mm-phase-label { color: #6fcf82; }

.sns-mm-phase-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 11px;
    flex-shrink: 0;
}

.sns-mm-check {
    color: #6fcf82;
    font-size: 15px;
    margin-left: auto;
}

/* --- Fortschrittsbalken --------------------------------------------------- */
.sns-mm-progress-bar-wrap {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}
.sns-mm-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #D4AF37, #E09900);
    border-radius: 4px;
    transition: width 0.5s ease;
    min-width: 4px;
}

.sns-mm-progress-text { font-size: 13px; color: #ffffff; margin: 0 0 6px; }
.sns-mm-pool-info     { font-size: 12px; color: #9E9882; margin: 0 0 6px; }
.sns-mm-time-note     { font-size: 12px; color: rgba(212,175,55,0.7); font-style: italic; margin: 0 0 14px; }
.sns-mm-done-note     { font-size: 13px; color: #9E9882; margin: 0 0 12px; }
.sns-mm-meta          { color: #9E9882; font-size: 11px; }

/* --- Würfelprotokoll ------------------------------------------------------ */
.sns-mm-roll-log { margin: 12px 0; }

.sns-mm-log-toggle {
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 6px;
    color: #9E9882;
    font-size: 12px;
    font-family: 'Open Sans', Arial, sans-serif;
    padding: 4px 12px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.sns-mm-log-toggle:hover,
.sns-mm-log-toggle.is-open { border-color: #D4AF37; color: #D4AF37; }

.sns-mm-log-entries {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
}

.sns-mm-roll-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    font-size: 12px;
}

.sns-mm-roll-num    { color: #9E9882; font-family: 'Courier New', monospace; min-width: 24px; }
.sns-mm-dice-row    { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; }
.sns-mm-roll-result { color: #D4AF37; font-weight: 700; white-space: nowrap; }

/* --- Würfelchips ---------------------------------------------------------- */
.sns-mm-die {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #9E9882;
}
.sns-mm-die--hit {
    background: rgba(212, 175, 55, 0.18);
    border-color: #D4AF37;
    color: #E09900;
}
.sns-mm-die--w6 {
    width: 30px;
    height: 30px;
    font-size: 14px;
    border-radius: 8px;
}

/* --- Haltbarkeit-Investition ---------------------------------------------- */
.sns-mm-invest-row {
    background: rgba(212, 175, 55, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 12px 0;
}
.sns-mm-invest-row label {
    display: block;
    font-size: 12px;
    color: #9E9882;
    margin-bottom: 8px;
}
.sns-mm-invest-ctrl {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sns-mm-invest-dec,
.sns-mm-invest-inc {
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    color: #D4AF37;
    cursor: pointer;
    font-size: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    font-family: monospace;
    line-height: 1;
}
.sns-mm-invest-dec:hover,
.sns-mm-invest-inc:hover { background: rgba(212, 175, 55, 0.22); }
.sns-mm-invest-dec:disabled,
.sns-mm-invest-inc:disabled { opacity: 0.4; cursor: not-allowed; }

.sns-mm-invest-val  { font-size: 18px; font-weight: 700; color: #ffffff; min-width: 24px; text-align: center; }
.sns-mm-invest-max  { font-size: 12px; color: #9E9882; }

/* --- Teile-Bereich -------------------------------------------------------- */
.sns-mm-teile-ok  { font-size: 13px; color: #6fcf82; margin: 0 0 12px; }
.sns-mm-teile-nok { font-size: 13px; color: #f07060; margin: 0 0 8px; }
.sns-mm-hint      { font-size: 12px; color: #9E9882; font-style: italic; margin: 0 0 12px; }

/* --- Fertigstellen-Sektion ------------------------------------------------ */
.sns-mm-fertig-section {
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 0 0;
}
.sns-mm-halt-final { font-size: 13px; color: #ffffff; margin: 0 0 12px; }

/* --- Blueprint Footer (Aufgeben) ------------------------------------------ */
.sns-mm-bp-footer {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
    text-align: right;
}

/* --- Roll-Flash (temporäre Einblendung nach Wurf) ------------------------- */
.sns-mm-roll-flash {
    background: rgba(4, 4, 14, 0.96);
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    text-align: center;
    animation: sns-mm-flash-in 0.25s ease;
    transition: opacity 0.6s ease;
}
.sns-mm-roll-flash.is-fading { opacity: 0; }

@keyframes sns-mm-flash-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sns-mm-flash-label  { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #9E9882; margin-bottom: 10px; }
.sns-mm-flash-dice   { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: 10px; }
.sns-mm-flash-result { font-size: 14px; color: #ffffff; margin: 0; }

/* --- Apparaturen-Karte ---------------------------------------------------- */
.sns-mm-apparatur {
    background: rgba(6, 6, 16, 0.88);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s;
}
.sns-mm-apparatur.is-defekt {
    border-color: rgba(204, 51, 0, 0.5);
}
.sns-mm-apparatur.is-defekt::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #CC3300;
}

.sns-mm-app-header    { margin-bottom: 16px; }
.sns-mm-app-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.sns-mm-app-name      { font-size: 17px; font-weight: 700; color: #ffffff; margin: 0; }
.sns-mm-app-desc      { font-size: 13px; color: #9E9882; margin: 6px 0 0 0; }

.sns-mm-improvis-badge {
    font-size: 11px;
    font-weight: 700;
    background: rgba(180,100,220,0.18);
    border: 1px solid rgba(180,100,220,0.4);
    color: #c07fe0;
    border-radius: 20px;
    padding: 2px 10px;
}

/* --- Haltbarkeit-Anzeige -------------------------------------------------- */
.sns-mm-halt-display {
    margin: 0 0 16px;
}
.sns-mm-halt-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9E9882;
    margin-bottom: 6px;
}
.sns-mm-defekt-badge {
    font-size: 11px;
    background: rgba(204,51,0,0.25);
    border: 1px solid rgba(204,51,0,0.5);
    color: #f07060;
    border-radius: 4px;
    padding: 1px 8px;
}
.sns-mm-halt-bar-wrap {
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 6px;
}
.sns-mm-halt-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease, background 0.4s ease;
    min-width: 4px;
}
.sns-mm-halt-val-row {
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-family: 'Courier New', monospace;
}
.sns-mm-halt-current { font-size: 22px; font-weight: 700; color: #ffffff; }
.sns-mm-halt-sep     { font-size: 14px; color: #9E9882; }
.sns-mm-halt-max     { font-size: 14px; color: #9E9882; }

/* --- Wirkungen ------------------------------------------------------------ */
.sns-mm-effects     { margin: 0 0 14px; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sns-mm-effect-tag  {
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    color: #D4AF37;
    font-size: 12px;
    padding: 2px 10px;
}

/* --- Apparatur-Aktionen --------------------------------------------------- */
.sns-mm-app-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* --- Benutzungs-Würfelergebnis -------------------------------------------- */
.sns-mm-use-result {
    margin-top: 14px;
    padding: 12px 16px;
    background: rgba(4, 4, 14, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 10px;
    text-align: center;
}
.sns-mm-use-dice { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.sns-mm-use-result p { font-size: 14px; margin: 0; color: #ffffff; }

/* --- Ergebnis-Box Improvisieren ------------------------------------------- */
.sns-mm-roll-result-box {
    margin-top: 16px;
    padding: 14px 18px;
    background: rgba(4, 4, 14, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 10px;
    text-align: center;
}

/* --- Input klein (Zahlenfelder in Stat-Grids) ------------------------------ */
.sns-mm-input--sm {
    width: 80px;
    min-width: 60px;
    padding: 9px 10px;
    text-align: center;
}

/* --- Stat-Grid (Typ-spezifische Felder beim Bauplan anlegen) --------------- */
.sns-mm-stat-group { margin: 4px 0 0; }

.sns-mm-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.sns-mm-form-row--full { grid-column: 1 / -1; }

/* --- Stats-Vorschau in Blueprint- und Apparatur-Karten -------------------- */
.sns-mm-bp-stats-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}
.sns-mm-stat-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    font-size: 12px;
    color: #c8c0a8;
    padding: 3px 10px;
    white-space: nowrap;
}
.sns-mm-stat-chip em {
    font-style: normal;
    color: #9E9882;
    margin-right: 3px;
}

/* --- Typ-Pill ------------------------------------------------------------- */
.sns-mm-type-pill {
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    padding: 2px 10px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border: 1px solid;
}
.sns-mm-type-pill--ausruestung {
    background: rgba(160, 160, 180, 0.12);
    border-color: rgba(160, 160, 180, 0.4);
    color: #a0a0c0;
}
.sns-mm-type-pill--nahkampf {
    background: rgba(204, 80, 60, 0.14);
    border-color: rgba(204, 80, 60, 0.45);
    color: #e08070;
}
.sns-mm-type-pill--fernkampf {
    background: rgba(100, 149, 237, 0.14);
    border-color: rgba(100, 149, 237, 0.4);
    color: #8ab4f8;
}
.sns-mm-type-pill--ruestung {
    background: rgba(74, 158, 126, 0.14);
    border-color: rgba(74, 158, 126, 0.4);
    color: #6fcfaa;
}

/* --- Einmalig-Badge (Stufe 5) ---------------------------------------------- */
.sns-mm-einweg-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    background: rgba(204, 80, 60, 0.18);
    border: 1px solid rgba(204, 80, 60, 0.5);
    color: #e08070;
    border-radius: 20px;
    padding: 2px 10px;
    letter-spacing: 0.04em;
}

/* --- Template-Badge (Bauplan wiederverwendbar) ----------------------------- */
.sns-mm-template-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.5);
    color: #D4AF37;
    border-radius: 20px;
    padding: 2px 10px;
    letter-spacing: 0.04em;
}

/* --- Blueprint Template-Modus (is-template) -------------------------------- */
.sns-mm-blueprint.is-template {
    border-color: rgba(212, 175, 55, 0.45);
}
.sns-mm-blueprint.is-template::before {
    background: linear-gradient(90deg, #D4AF37 0%, #E09900 50%, rgba(212,175,55,0.2) 100%);
}

/* --- Builds-Info ----------------------------------------------------------- */
.sns-mm-builds-info {
    font-size: 12px;
    color: #9E9882;
    margin: 0 0 6px;
}
.sns-mm-builds-info strong { color: #D4AF37; }

/* --- Teile-Quelle Radio-Gruppe -------------------------------------------- */
.sns-mm-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0;
}
.sns-mm-radio-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #c8c0a8;
    cursor: pointer;
    padding: 8px 12px;
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 8px;
    transition: border-color 0.2s, background 0.2s;
}
.sns-mm-radio-label:hover {
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.05);
}
.sns-mm-radio-label input[type="radio"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #D4AF37;
}
.sns-mm-radio-label.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.sns-mm-radio-label.is-disabled input[type="radio"] {
    pointer-events: none;
}
.sns-mm-radio-label-text strong {
    display: block;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 2px;
}
.sns-mm-radio-label-text small {
    font-size: 11px;
    color: #9E9882;
    display: block;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 600px) {
    .sns-mm-tabs          { gap: 0; overflow-x: auto; }
    .sns-mm-tab-btn       { padding: 8px 12px 10px; font-size: 13px; white-space: nowrap; }
    .sns-mm-blueprint,
    .sns-mm-apparatur     { padding: 16px 16px; }
    .sns-mm-app-actions   { flex-direction: column; }
    .sns-mm-stat-grid     { grid-template-columns: 1fr 1fr; }
    .sns-mm-input--sm     { width: 100%; }
}


/* ============================================================================
   ALLCHEMIE-LABOR
   Accent: Teal/Emerald  #4A9E7E / rgba(74,158,126,...)
   ============================================================================ */

/* --- Stärke-Pill ------------------------------------------------------------ */
.sns-ac-staerke-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-radius: 20px;
    padding: 2px 10px;
    background: rgba(74,158,126,0.15);
    border: 1px solid rgba(74,158,126,0.4);
    color: #4A9E7E;
}

/* --- Ziel-Wirkung Label ----------------------------------------------------- */
.sns-ac-ziel-label {
    display: inline-block;
    font-size: 11px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    padding: 2px 8px;
    color: #c8c0a8;
}

/* --- Rezept-Karte ----------------------------------------------------------- */
.sns-ac-rezept {
    background: rgba(4,4,14,0.6);
    border: 1px solid rgba(74,158,126,0.2);
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 18px;
    position: relative;
}
.sns-ac-rezept-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.sns-ac-rezept-name {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    flex: 1 1 auto;
}
.sns-ac-rezept-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 12px;
    color: #9E9882;
}
.sns-ac-status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-radius: 4px;
    padding: 2px 8px;
    background: rgba(74,158,126,0.15);
    border: 1px solid rgba(74,158,126,0.35);
    color: #4A9E7E;
}

/* --- Fortschrittsbalken ---------------------------------------------------- */
.sns-ac-progress-wrap   { margin: 10px 0 12px; }
.sns-ac-progress-label  {
    font-size: 12px;
    color: #9E9882;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
}
.sns-ac-progress-bar-bg {
    background: rgba(255,255,255,0.07);
    border-radius: 6px;
    height: 8px;
    overflow: hidden;
}
.sns-ac-progress-bar {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #3a8a6e, #4A9E7E);
    transition: width 0.5s ease;
    min-width: 4px;
}

/* --- Wuerfelprotokoll ------------------------------------------------------- */
.sns-ac-log             { margin-bottom: 12px; }
.sns-ac-log-toggle {
    font-size: 11px;
    cursor: pointer;
    color: #9E9882;
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sns-ac-log-toggle:hover { color: #4A9E7E; }
.sns-ac-log-entries {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sns-ac-log-entry {
    font-size: 12px;
    color: #9E9882;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* --- W6 Wuerfel-Chips ------------------------------------------------------- */
.sns-ac-die {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #c8c0a8;
}
.sns-ac-die--hit {
    background: rgba(74,158,126,0.25);
    border-color: rgba(74,158,126,0.6);
    color: #4A9E7E;
}

/* --- Kraeuter-Liste -------------------------------------------------------- */
.sns-ac-krauter-count {
    font-size: 13px;
    color: #9E9882;
    margin-bottom: 8px;
}
.sns-ac-krauter-count strong { color: #ffffff; font-family: 'Courier New', monospace; }
.sns-ac-krauter-count.is-done strong { color: #4A9E7E; }

.sns-ac-krauter-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sns-ac-herb {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}
.sns-ac-herb--match    { border-color: rgba(74,158,126,0.35); background: rgba(74,158,126,0.07); }
.sns-ac-herb--nomatch  { border-color: rgba(255,255,255,0.07); opacity: 0.7; }
.sns-ac-herb--pansched { border-color: rgba(212,175,55,0.35); background: rgba(212,175,55,0.06); }

.sns-ac-herb-pos { font-weight: 600; color: #4A9E7E; margin-right: 4px; }
.sns-ac-herb-neg { color: #f07060; font-size: 12px; }
.sns-ac-herb-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-radius: 3px;
    padding: 1px 6px;
    background: rgba(212,175,55,0.18);
    border: 1px solid rgba(212,175,55,0.4);
    color: #D4AF37;
    vertical-align: middle;
}

/* --- Flux-Kondensat -------------------------------------------------------- */
.sns-ac-flux-row { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.sns-ac-flux-label {
    font-size: 13px;
    color: #c8c0a8;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sns-ac-flux-label input[type=checkbox] {
    accent-color: #4A9E7E;
    width: 15px;
    height: 15px;
}

/* --- Zutaten-Aktionen ------------------------------------------------------ */
.sns-ac-zutaten-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* --- Brauen: verwendete Kraeuter ------------------------------------------ */
.sns-ac-brauen-herbs       { margin-bottom: 14px; }
.sns-ac-brauen-herbs-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9E9882;
    margin-bottom: 8px;
}

/* --- Negativeffekt-Reduktionen -------------------------------------------- */
.sns-ac-reductions        { margin: 12px 0; }
.sns-ac-reductions-title  {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9E9882;
    margin-bottom: 8px;
}
.sns-ac-reduction-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #c8c0a8;
    cursor: pointer;
    margin-bottom: 5px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03);
    transition: border-color 0.2s, background 0.2s;
}
.sns-ac-reduction-label:has(input:checked) {
    border-color: rgba(74,158,126,0.4);
    background: rgba(74,158,126,0.07);
}
.sns-ac-reduction-label input[type=checkbox] {
    accent-color: #4A9E7E;
    flex-shrink: 0;
    margin-top: 2px;
}
.sns-ac-reduction-pansched {
    color: #D4AF37;
    font-size: 11px;
    margin-left: 4px;
}

/* --- Malus-Zeile ----------------------------------------------------------- */
.sns-ac-malus-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #9E9882;
}
.sns-ac-malus-input {
    width: 64px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 4px 8px;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
}

/* --- Rezept-Aktionen ------------------------------------------------------- */
.sns-ac-rezept-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    align-items: center;
}

/* --- Primary-Button Teal --------------------------------------------------- */
.sns-ac-primary-btn.sns-btn--primary {
    background: linear-gradient(135deg, #3a8a6e, #4A9E7E);
    border-color: #4A9E7E;
    color: #ffffff;
}
.sns-ac-primary-btn.sns-btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #4A9E7E, #5aae8e);
    border-color: #5aae8e;
}
.sns-ac-primary-btn.sns-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Vorrats-Karte --------------------------------------------------------- */
.sns-ac-vorrat {
    background: rgba(4,4,14,0.6);
    border: 1px solid rgba(74,158,126,0.22);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 16px;
}
.sns-ac-vorrat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.sns-ac-vorrat-name { font-size: 15px; font-weight: 700; color: #ffffff; margin: 0; }
.sns-ac-vorrat-qty  {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-family: 'Courier New', monospace;
    flex-shrink: 0;
}
.sns-ac-qty-label {
    font-size: 11px;
    color: #9E9882;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.sns-ac-qty-val { font-size: 20px; font-weight: 700; color: #4A9E7E; }

/* --- Wirkungen der Vorrats-Karte ------------------------------------------ */
.sns-ac-vorrat-effects {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sns-ac-effect {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
}
.sns-ac-effect--pos     { background: rgba(74,158,126,0.08); border: 1px solid rgba(74,158,126,0.28); }
.sns-ac-effect--neg     { background: rgba(204,51,0,0.06);   border: 1px solid rgba(204,51,0,0.25); }
.sns-ac-effect--pansched{ border-color: rgba(212,175,55,0.35); background: rgba(212,175,55,0.06); }

.sns-ac-effect-icon { font-size: 15px; font-weight: 700; flex-shrink: 0; margin-top: 1px; line-height: 1; }
.sns-ac-effect--pos .sns-ac-effect-icon { color: #4A9E7E; }
.sns-ac-effect--neg .sns-ac-effect-icon { color: #f07060; }
.sns-ac-effect-staerke {
    font-size: 11px;
    font-weight: 700;
    color: #9E9882;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.sns-ac-effect-desc  { display: block; font-size: 12px; color: #9E9882; margin-top: 2px; }
.sns-ac-no-negs      { font-size: 12px; color: #9E9882; font-style: italic; margin: 4px 0 0; }

/* --- Vorrats-Footer -------------------------------------------------------- */
.sns-ac-vorrat-footer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* --- Analyse-Ergebnis ------------------------------------------------------- */
.sns-ac-analyse-result-inner { font-size: 14px; color: #c8c0a8; }

/* --- Responsive ------------------------------------------------------------- */
@media (max-width: 600px) {
    .sns-ac-rezept          { padding: 14px 14px; }
    .sns-ac-vorrat          { padding: 14px 14px; }
    .sns-ac-zutaten-actions { flex-direction: column; }
    .sns-ac-rezept-actions  { flex-direction: column; }
    .sns-ac-vorrat-footer   { flex-direction: column; }
}

/* ==========================================================================
   AllChemie – überarbeitetes System (Zutaten / Rezept / Brauen / Vorrat)
   ========================================================================== */

/* Zutaten-Vorrat */
.sns-ac-zutaten-box { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-bottom: 20px; }
/* Generell etwas Luft zwischen den Labor-Karten */
.sns-ac-wrap .sns-card { margin-bottom: 20px; }
.sns-ac-zutaten-info { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 200px; }
.sns-ac-zutaten-label { color: #c8c0a8; }
.sns-ac-zutaten-count { font-size: 30px; font-weight: 700; color: #E09900; line-height: 1; }
.sns-ac-zutaten-hint  { font-size: 13px; color: #9a937e; font-style: italic; }
.sns-ac-zutaten-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sns-ac-flux-status { flex-basis: 100%; font-size: 13px; margin: 4px 0 0; }
.sns-ac-flux-status.is-ok   { color: #2E7D4F; }
.sns-ac-flux-status.is-warn { color: #cc7722; }

/* Rezept-Karte */
.sns-ac-rezept-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sns-ac-rezept-status { font-size: 12px; color: #9a937e; border: 1px solid rgba(224,153,0,.4); border-radius: 10px; padding: 1px 9px; }
.sns-ac-rezept-wirkung { margin: 6px 0; }
.sns-ac-rezept-wirkung strong { color: #E09900; }
.sns-ac-rezept-basis { color: #c8c0a8; font-size: 13px; margin-left: 6px; }
.sns-ac-rezept-desc { color: #b6ad95; font-size: 14px; font-style: italic; margin: 4px 0; }
.sns-ac-rezept-laborzeit { font-size: 13px; color: #c8c0a8; margin: 6px 0; }
.sns-ac-rezept-warn { color: #cc7722; font-size: 13px; margin: 6px 0 0; }
.sns-ac-rezept-foot { margin-top: 12px; }

.sns-ac-step { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(224,153,0,.15); }
.sns-ac-roll-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.sns-ac-roll-row label { font-size: 13px; color: #c8c0a8; display: flex; flex-direction: column; gap: 4px; }
.sns-ac-brau-buttons { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* Offener Brau-Vorgang */
.sns-ac-brau-offen { border-color: rgba(224,153,0,.6) !important; }
.sns-ac-brau-budget { color: #c8c0a8; }
.sns-ac-brau-budget strong { color: #E09900; }
.sns-ac-brau-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* AllChemikum-Karte */
.sns-ac-vorrat--pansch { border-color: rgba(204,51,0,.6) !important; }
.sns-ac-vorrat-qty { font-size: 18px; font-weight: 700; color: #E09900; }
.sns-ac-vorrat-halt { font-size: 13px; color: #c8c0a8; margin: 6px 0; }
.sns-ac-verst-liste { list-style: none; margin: 6px 0; padding: 0; }
.sns-ac-verst-liste li { display: flex; justify-content: space-between; font-size: 14px; border-bottom: 1px dotted rgba(200,192,168,.2); padding: 2px 0; }
.sns-ac-verst-key { color: #c8c0a8; }
.sns-ac-verst-val { color: #fff; }
.sns-ac-nebenwirkungen { background: rgba(204,51,0,.1); border: 1px solid rgba(204,51,0,.4); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.sns-ac-neben-title { color: #e0795a; font-weight: 600; font-size: 13px; }
.sns-ac-nebenwirkungen ul { margin: 4px 0 0; padding-left: 18px; }
.sns-ac-nebenwirkungen li { font-size: 13px; color: #d8cfb8; }
.sns-ac-nebenwirkungen small { color: #9a937e; display: block; }
.sns-ac-verfall-notiz-wrap { margin: 10px 0; }
.sns-ac-notiz-saved { display: none; font-size: 12px; color: #2E7D4F; margin-left: 8px; }
.sns-ac-vorrat-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Verteilungs-Dialog */
.sns-ac-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sns-ac-modal-box { background: rgba(0,0,25,.92); border: 1px solid #E09900; border-radius: 18px; padding: 24px 26px; max-width: 520px; width: 100%; position: relative; max-height: 88vh; overflow-y: auto; }
.sns-ac-modal-title { color: #fff; font-size: 20px; margin: 0 0 12px; }
.sns-ac-modal-x { position: absolute; top: 12px; right: 16px; background: none; border: none; color: #9a937e; font-size: 26px; line-height: 1; cursor: pointer; }
.sns-ac-modal-x:hover { color: #E09900; }
.sns-ac-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.sns-ac-verteil-info { color: #c8c0a8; font-size: 14px; }
.sns-ac-verteil-info strong { color: #E09900; }
.sns-ac-verteil-grund { color: #c8c0a8; font-size: 14px; margin: 4px 0 12px; }
.sns-ac-verteil-grund strong { color: #fff; }
.sns-ac-verteil-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px dotted rgba(200,192,168,.18); }
.sns-ac-verteil-plabel { flex: 1; color: #fff; font-size: 14px; }
.sns-ac-vt-stufe { min-width: 22px; text-align: center; font-weight: 700; color: #E09900; }
.sns-ac-vt-effekt { flex-basis: 130px; text-align: right; font-size: 12px; color: #9a937e; }
.sns-ac-verteil-pansch { background: rgba(204,51,0,.12); border: 1px solid rgba(204,51,0,.4); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #e0795a; margin: 8px 0; }

/* ==========================================================================
   Globale Design-Angleichung an den Charbogen-„Dossier"-Stil
   (gilt für Labor, Werkstatt, Shop, Generator und Übersicht)
   ========================================================================== */

/* Dossier-Variablen global verfügbar machen (der Charbogen scopt eigene). */
:root {
    --cs-brass:     #D4AF37;
    --cs-iron:      rgba(8, 8, 22, 0.93);
    --cs-iron-deep: rgba(4, 4, 14, 0.97);
    --cs-border:    rgba(212, 175, 55, 0.28);
    --cs-border-hi: rgba(212, 175, 55, 0.62);
    --cs-text-hi:   #E4DCC4;
    --cs-cut:       18px;
}

/* Karten als eckige Dossier-Panels (abgeschnittene Ecke) statt runder Ecken. */
.sns-card,
.sns-char-card {
    background: var(--cs-iron) !important;
    border: 1px solid var(--cs-border) !important;
    border-radius: 0 !important;
    clip-path: polygon(
        var(--cs-cut) 0%, 100% 0%,
        100% calc(100% - var(--cs-cut)),
        calc(100% - var(--cs-cut)) 100%,
        0% 100%, 0% var(--cs-cut)
    );
}

/* „Neuer Charakter"-Kachel ebenfalls eckig (gestrichelter Platzhalter). */
.sns-char-card--new,
.sns-char-card--locked {
    clip-path: polygon(
        var(--cs-cut) 0%, 100% 0%,
        100% calc(100% - var(--cs-cut)),
        calc(100% - var(--cs-cut)) 100%,
        0% 100%, 0% var(--cs-cut)
    );
}

/* Section-Überschriften im technischen Dossier-Look (Messing, Monospace, ◆). */
.sns-mm-section-title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--cs-brass);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sns-mm-section-title::before {
    content: '◆';
    font-size: 8px;
    opacity: 0.65;
    flex-shrink: 0;
}