:root {
    color-scheme: dark;
    --ms-bg: #09131f;
    --ms-surface: #0d1a28;
    --ms-surface-raised: #122233;
    --ms-surface-input: #0f1d2b;
    --ms-surface-hover: #162a3c;
    --ms-border: #294158;
    --ms-border-strong: #35526b;
    --ms-text: #d7e2ea;
    --ms-text-strong: #e6edf3;
    --ms-muted: #8fa1b2;
    --ms-muted-soft: #718497;
    --ms-link: #7daec5;
    --ms-accent: #579f98;
    --ms-accent-hover: #67ada6;
    --ms-on-accent: #071719;
    --ms-success: #78b79a;
    --ms-success-bg: #173128;
    --ms-warning: #c6a66e;
    --ms-warning-bg: #352d20;
    --ms-danger: #c98b90;
    --ms-danger-bg: #392327;
    --ms-disabled: #63778a;
    --ms-focus-ring: rgba(87, 159, 152, .28);
    --ms-shadow: rgba(0, 0, 0, .18);
}

* { box-sizing: border-box; }
html { background: var(--ms-bg); }
body {
    margin: 0;
    background: var(--ms-bg);
    color: var(--ms-text);
    font-family: Tahoma, Arial, sans-serif;
    line-height: 1.75;
}
a { color: var(--ms-link); text-decoration: none; }
a:hover { color: var(--ms-text-strong); }
button, input, select, textarea { font: inherit; }
input, select, textarea {
    width: 100%;
    border: 1px solid var(--ms-border);
    border-radius: 9px;
    padding: 10px 12px;
    background: var(--ms-surface-input);
    color: var(--ms-text);
    outline: none;
    accent-color: var(--ms-accent);
}
input::placeholder, textarea::placeholder { color: var(--ms-muted-soft); opacity: 1; }
input:focus, select:focus, textarea:focus {
    border-color: var(--ms-accent);
    box-shadow: 0 0 0 3px var(--ms-focus-ring);
}
input:disabled, select:disabled, textarea:disabled {
    background: var(--ms-surface);
    color: var(--ms-muted-soft);
    cursor: not-allowed;
    opacity: .82;
}
select option { background: var(--ms-surface-input); color: var(--ms-text); }
textarea { min-height: 96px; resize: vertical; }
label { display: block; margin: 11px 0 6px; color: var(--ms-text); }
button, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid var(--ms-border);
    border-radius: 8px;
    background: var(--ms-surface-raised);
    color: var(--ms-text);
    cursor: pointer;
    font-weight: 700;
}
button:hover, .button:hover { background: var(--ms-surface-hover); border-color: var(--ms-border-strong); }
button:focus-visible, .button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ms-focus-ring); }
button.primary, .button-primary { background: var(--ms-accent); border-color: var(--ms-accent); color: var(--ms-on-accent); }
button.primary:hover, .button-primary:hover { background: var(--ms-accent-hover); border-color: var(--ms-accent-hover); }
button.ghost { background: var(--ms-surface-raised); color: var(--ms-text); }
button.success { background: var(--ms-success-bg); border-color: var(--ms-success); color: var(--ms-success); }
button.warn { background: var(--ms-warning-bg); border-color: var(--ms-warning); color: var(--ms-warning); }
button.danger { background: var(--ms-danger-bg); border-color: var(--ms-danger); color: var(--ms-danger); }

.shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.side { background: var(--ms-surface); border-left: 1px solid var(--ms-border); padding: 18px; }
.brand { font-size: 20px; font-weight: 800; color: var(--ms-text-strong); }
.sub { font-size: 12px; color: var(--ms-muted); margin: 5px 0 18px; }
.nav a, .nav .disabled { display: block; padding: 10px 12px; border-radius: 9px; margin: 3px 0; }
.nav a { color: var(--ms-text); }
.nav a:hover { background: var(--ms-surface-hover); color: var(--ms-text-strong); }
.nav .disabled { color: var(--ms-disabled); cursor: not-allowed; }
.nav .section { font-size: 11px; color: var(--ms-muted-soft); margin: 14px 8px 5px; }
.main { padding: 24px; min-width: 0; }
.top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.spacer { flex: 1; }
.card, .metric {
    background: var(--ms-surface);
    border: 1px solid var(--ms-border);
    border-radius: 14px;
    padding: 16px;
    margin: 14px 0;
    box-shadow: 0 10px 26px var(--ms-shadow);
}
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.metric b { font-size: 22px; display: block; margin-top: 8px; color: var(--ms-text-strong); }
.muted { color: var(--ms-muted); }
.small { font-size: 12px; }
.ltr { direction: ltr; unicode-bidi: embed; text-align: left; }
.field { margin: 12px 0; }
.field-control { width: 100%; }
.field-textarea { min-height: 90px; }
.ok, .err { padding: 10px 12px; border-radius: 9px; margin: 12px 0; border: 1px solid transparent; }
.ok { background: var(--ms-success-bg); border-color: var(--ms-success); color: var(--ms-success); }
.err { background: var(--ms-danger-bg); border-color: var(--ms-danger); color: var(--ms-danger); }
.chip {
    display: inline-block;
    padding: 5px 9px;
    border: 1px solid var(--ms-border);
    border-radius: 999px;
    font-size: 12px;
    background: var(--ms-surface-raised);
    color: var(--ms-muted);
    margin: 3px;
}
.chip.on, .chip.active, .chip.approved { background: var(--ms-success-bg); border-color: var(--ms-success); color: var(--ms-success); }
.chip.off, .chip.revoked, .chip.rejected { background: var(--ms-danger-bg); border-color: var(--ms-danger); color: var(--ms-danger); }
.chip.pending, .chip.suspended { background: var(--ms-warning-bg); border-color: var(--ms-warning); color: var(--ms-warning); }
.chip.none { color: var(--ms-muted-soft); }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: min(94vw, 460px); }
.login-card h1 { color: var(--ms-text-strong); margin-top: 0; }
.login-card button { width: 100%; margin-top: 12px; }
.tenant-choice { border: 1px solid var(--ms-border); border-radius: 12px; padding: 12px; margin: 10px 0; background: var(--ms-surface-input); }
.tenant-choice label { margin: 0; display: flex; gap: 10px; align-items: center; }
.tenant-choice input { width: auto; }

.table-wrap { overflow: auto; border: 1px solid var(--ms-border); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--ms-surface); }
th, td { padding: 10px; border-bottom: 1px solid var(--ms-border); text-align: right; vertical-align: top; }
th { color: var(--ms-muted); background: var(--ms-surface-raised); }
tr:last-child td { border-bottom: 0; }
pre { overflow: auto; padding: 12px; border: 1px solid var(--ms-border); border-radius: 9px; background: var(--ms-surface-input); color: var(--ms-text); }
hr, .hr { border: 0; border-top: 1px solid var(--ms-border); margin: 14px 0; }
.empty { padding: 14px; color: var(--ms-muted); border: 1px dashed var(--ms-border); border-radius: 10px; background: var(--ms-surface); }
.stack { display: grid; gap: 8px; }
.inline { display: inline-flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.danger-zone { border-color: var(--ms-danger); }

@media (max-width: 850px) {
    .shell { grid-template-columns: 1fr; }
    .side { border-left: 0; border-bottom: 1px solid var(--ms-border); }
    .nav { display: flex; gap: 4px; flex-wrap: wrap; }
    .nav .section { width: 100%; }
    .main { padding: 16px; }
}

/* M3-G operational directory */
.section-heading { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.section-heading h2 { margin: 0; }
.subcard { border: 1px solid var(--ms-border); border-radius: 12px; background: var(--ms-surface-raised); padding: 14px; }
.compact-card { margin: 0; box-shadow: none; }
.split-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.choice-card { margin: 0; display: flex; gap: 9px; align-items: center; border: 1px solid var(--ms-border); border-radius: 10px; padding: 9px 11px; background: var(--ms-surface-input); cursor: pointer; }
.choice-card:hover { border-color: var(--ms-border-strong); background: var(--ms-surface-hover); }
.choice-card input { width: auto; margin: 0; }
.choice-card span { display: grid; gap: 1px; }
.choice-card small { display: block; }
.compact-choices { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); margin-top: 10px; }
.role-line, .membership-line, .member-list { margin-top: 10px; }
.membership-line { display: flex; gap: 8px; flex-wrap: wrap; }
.member-list { padding-top: 12px; border-top: 1px solid var(--ms-border); }

/* MANASERVICE Web — catalog surfaces */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.brand-card { margin: 0; min-width: 0; }
.brand-card-head { display: flex; gap: 14px; align-items: center; }
.brand-card-title { min-width: 0; flex: 1; }
.brand-logo-box {
    width: 88px;
    height: 72px;
    flex: 0 0 88px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--ms-border);
    border-radius: 12px;
    background: var(--ms-surface-input);
}
.brand-logo-box img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }
.brand-logo-placeholder { font-size: 28px; font-weight: 800; color: var(--ms-muted); }
.brand-description { white-space: pre-line; }
.edit-panel { margin-top: 14px; border-top: 1px solid var(--ms-border); padding-top: 12px; }
.edit-panel summary { cursor: pointer; color: var(--ms-link); font-weight: 700; }
.edit-panel[open] summary { margin-bottom: 12px; }
.brand-remove-logo { margin-top: 10px; max-width: 240px; }



/* MANASERVICE 76 — product catalog */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.product-card { margin: 0; min-width: 0; }
.catalog-card-head { display: flex; gap: 14px; align-items: center; }
.catalog-card-title { min-width: 0; flex: 1; }
.catalog-description { white-space: pre-line; }