:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #050c14; color: #eef5fc; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% -20%, #123d6b 0, #07111c 42%, #050c14 75%); }
.shell { width: min(1180px, calc(100% - 36px)); margin: auto; padding: 28px 0 60px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid #1e344a; }
.topbar-actions { display: flex; align-items: center; gap: 6px; }
.workspace-tools { display: flex; align-items: center; gap: 6px; }
.workspace-tools > button, .workspace-tools > a, .info-link { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid #25425c; border-radius: 9px; color: #b9cad9; background: #07111c; font: inherit; font-size: 12px; font-weight: 750; text-decoration: none; cursor: pointer; }
.workspace-tools > button:hover, .workspace-tools > a:hover, .info-link:hover { color: #eef5fc; border-color: #326ca5; }
.workspace-tools > button.active, .info-link[aria-pressed="true"] { color: #eef5fc; border-color: #326ca5; background: #123d6b; }
.storymaster-ai-button { position: fixed; right: 24px; bottom: 24px; z-index: 60; min-width: 58px; min-height: 46px; padding: 0 16px; border: 1px solid #d69e13; border-radius: 999px; color: #251500; background: #f6c445; box-shadow: 0 12px 35px rgba(146, 94, 8, .32); font: 800 14px/1 system-ui; cursor: pointer; }
.storymaster-ai-button:hover, .storymaster-ai-button:focus-visible { border-color: #f8d66d; background: #ffd76a; outline: 2px solid #d69e13; outline-offset: 2px; }
#workspace-search { display: grid; grid-template-columns: minmax(0, 1fr) 30px; width: clamp(170px, 19vw, 250px); padding: 3px; border: 1px solid #25425c; border-radius: 9px; background: #07111c; }
#workspace-search input, #workspace-search button { min-height: 28px; border: 0; color: inherit; background: transparent; font: inherit; }
#workspace-search input { min-width: 0; padding: 3px 8px; outline: 0; font-size: 12px; }
#workspace-search button { padding: 0; border-radius: 50%; color: #8fc5fa; cursor: pointer; font-size: 17px; }
#workspace-search button:hover { background: #123d6b; }
.info-link { color: #8da2b7; }
.page-tabs { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid #25425c; border-radius: 10px; background: #07111c; }
.page-tabs button { padding: 7px 11px; border: 0; border-radius: 7px; color: #8da2b7; background: transparent; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.page-tabs button.active { color: #eef5fc; background: #123d6b; box-shadow: inset 0 0 0 1px #326ca5; }
.user-label { color: #9eb0c3; font-size: 13px; }
.brand { display: flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 54px; height: 44px; border-radius: 12px; background: #123d6b; font-weight: 900; letter-spacing: -.5px; box-shadow: 0 0 0 1px #28649f; }
.brand small, .brand strong { display: block; }
.brand small, .intro small { color: #88a5c2; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.brand strong { margin-top: 3px; font-size: 20px; }
.improvement { padding: 10px 15px; border: 1px solid #326ca5; border-radius: 10px; color: #e8f3ff; background: #123d6b; font-weight: 750; text-decoration: none; }
.intro { margin-top: 18px; padding: 28px; border: 1px solid #1e344a; border-radius: 16px; background: rgba(10, 23, 36, .88); box-shadow: 0 16px 40px #0003; }
.intro h1 { margin: 7px 0 8px; font-size: clamp(26px, 4vw, 42px); }
.intro p { margin: 0; color: #9eb0c3; }
.docs-panel { margin-top: 28px; }
.docs-panel h1 { margin: 5px 0 0; font-size: clamp(26px, 4vw, 38px); }
.docs-lead { margin: 9px 0 0; color: #9eb0c3; }
.docs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.doc-card { --accent: #0c66e4; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px; border: 1px solid color-mix(in srgb, var(--accent) 42%, #1b2b3d); border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, #07111c); }
.doc-card > b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: #fff; background: var(--accent); }
.doc-card h2 { margin: 0; font-size: 16px; }
.doc-card p { margin: 6px 0 0; color: #9eb0c3; font-size: 13px; line-height: 1.45; }
.ccc-panel { margin-top: 18px; padding: 24px; border: 1px solid #1e344a; border-radius: 18px; background: rgba(10, 23, 36, .9); }
.section-heading, .instance-heading, .dashboard-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.section-heading small { color: #6ea8df; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.section-heading h2 { margin: 4px 0 0; font-size: 22px; }
.text-link { color: #8fc5fa; font-size: 13px; font-weight: 750; text-decoration: none; }
.loading-state { padding: 28px 0 8px; color: #9eb0c3; }
.ccc-tab-panel { padding-top: 18px; }
.info-actions { display: flex; justify-content: flex-end; }
.login-form { display: grid; grid-template-columns: minmax(190px, 1.4fr) repeat(2, minmax(170px, 1fr)) auto; align-items: end; gap: 14px; margin-top: 20px; padding: 18px; border: 1px solid #254664; border-radius: 14px; background: #081521; }
.login-copy strong, .login-copy small, .login-form label { display: block; }
.login-copy small { margin-top: 5px; color: #8da2b7; line-height: 1.4; }
.login-form label { color: #b9cad9; font-size: 12px; font-weight: 750; }
.login-form input[type="email"], .login-form input[type="password"] { width: 100%; margin-top: 7px; padding: 11px 12px; border: 1px solid #34516c; border-radius: 9px; color: #eef5fc; background: #050c14; font: inherit; }
.login-form input:focus { border-color: #4b9be6; outline: 2px solid #28649f55; }
.remember-option { grid-column: 2 / 4; display: flex !important; align-items: center; gap: 8px; }
.login-form button, .quiet-button { padding: 10px 14px; border: 1px solid #3274b2; border-radius: 9px; color: #fff; background: #1665ad; font: inherit; font-weight: 750; cursor: pointer; }
.login-form button:disabled { cursor: wait; opacity: .6; }
.form-links { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: -2px; }
.form-error { grid-column: 1 / -1; margin: 0; color: #fca5a5; font-size: 13px; }
.form-message { grid-column: 1 / -1; margin: 0; color: #86efac; font-size: 13px; }
.form-message.error { color: #fca5a5; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.summary-card { padding: 15px; border: 1px solid #203a52; border-radius: 12px; background: #07111c; }
.summary-card strong, .summary-card small { display: block; }
.summary-card strong { font-size: 26px; }
.summary-card small { margin-top: 2px; color: #8da2b7; }
.summary-card.alert { border-color: #723939; }
.instance-heading { margin-top: 24px; }
.instance-heading h3 { margin: 0; font-size: 16px; }
.quiet-button { padding: 7px 10px; border-color: #34516c; background: transparent; color: #b9cad9; font-size: 12px; }
.table-wrap { margin-top: 10px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 11px 9px; border-bottom: 1px solid #1a3044; text-align: left; white-space: nowrap; }
th { color: #7f9bb6; font-size: 11px; text-transform: uppercase; }
td a { color: #a9d3fa; text-decoration: none; }
.status-pill { display: inline-block; padding: 3px 7px; border-radius: 999px; color: #c8d7e6; background: #25384a; font-size: 11px; }
.status-pill.good { color: #bbf7d0; background: #14532d; }
.status-pill.warn { color: #fde68a; background: #713f12; }
.status-pill.bad { color: #fecaca; background: #7f1d1d; }
.dashboard-actions { margin-top: 14px; color: #71879c; font-size: 11px; }
.password-panel { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(0, 2.2fr); gap: 24px; margin-top: 26px; padding: 20px; border: 1px solid #203a52; border-radius: 14px; background: #07111c; }
.password-copy h3 { margin: 0; font-size: 16px; }
.password-copy p { margin: 7px 0 0; color: #8da2b7; font-size: 12px; line-height: 1.5; }
.password-form { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)) auto; align-items: end; gap: 12px; }
.password-form label { color: #b9cad9; font-size: 12px; font-weight: 750; }
.password-form input { width: 100%; margin-top: 7px; padding: 10px 11px; border: 1px solid #34516c; border-radius: 9px; color: #eef5fc; background: #050c14; font: inherit; }
.password-form input:focus { border-color: #4b9be6; outline: 2px solid #28649f55; }
.password-form button { padding: 10px 13px; border: 1px solid #3274b2; border-radius: 9px; color: #fff; background: #1665ad; font: inherit; font-weight: 750; cursor: pointer; white-space: nowrap; }
.password-form button:disabled { cursor: wait; opacity: .6; }
.service-status { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.status-grid { display: flex; align-items: center; justify-content: flex-end; gap: 15px; }
.status-card { display: inline-flex; align-items: center; gap: 7px; padding: 2px 0; color: #aebfd0; text-decoration: none; }
.status-card:hover, .status-card:focus-visible { color: #eef5fc; outline: none; }
.status-card strong { font-size: 11px; font-weight: 700; }
.status-led { width: 15px; height: 9px; border: 1px solid #718096; border-radius: 3px; background: #64748b; box-shadow: inset 0 1px #ffffff20; transition: background .16s ease, box-shadow .16s ease; }
.status-card.green .status-led { border-color: #4ade80; background: #22c55e; box-shadow: 0 0 7px #22c55e88, inset 0 1px #ffffff50; }
.status-card.red .status-led { border-color: #f87171; background: #ef4444; box-shadow: 0 0 7px #ef444488; }
.status-message, .status-latency { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.tool-search-empty { margin: 22px 0 0; padding: 18px; border: 1px dashed #31516b; border-radius: 14px; color: #8da2b7; text-align: center; }
.tool-card { --accent: #0c66e4; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; min-height: 112px; padding: 20px; border: 1px solid color-mix(in srgb, var(--accent) 45%, #1b2b3d); border-radius: 16px; color: inherit; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, #07111c), #07111c 60%); box-shadow: inset 5px 0 var(--accent); text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.tool-card:hover { transform: translateY(-3px); box-shadow: inset 5px 0 var(--accent), 0 14px 30px #0007; }
.tool-card b { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--accent); }
.tool-card strong, .tool-card small { display: block; }
.tool-card small { margin-top: 5px; color: #9eb0c3; }
.tool-card i { font-size: 24px; font-style: normal; }
.purple { --accent: #7355d9; } .blue { --accent: #0c66e4; } .green { --accent: #0b7d68; } .red { --accent: #e34935; } .orange { --accent: #e06c00; }
.skill-red { --accent: #9f4650; } .skin { --accent: #f2c6a0; } .sudo-green { --accent: #166534; } .story-blue { --accent: #1e3a8a; }
.gmbh-orange { --accent: #d97706; }
.zammad-blue { --accent: #2563eb; }
.skin > b { color: #4b2f23; }
.docs-panel { margin-top: 34px; }
.info-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); align-items: center; min-height: 350px; padding: clamp(30px, 5vw, 56px); overflow: hidden; border: 1px solid #284760; border-radius: 26px; background: radial-gradient(circle at 78% 35%, #1767a433 0, transparent 34%), linear-gradient(135deg, #0b2135 0%, #071521 52%, #0b1927 100%); box-shadow: 0 24px 70px #0006, inset 0 1px #ffffff0d; }
.info-hero::before { position: absolute; inset: 0; background-image: linear-gradient(#ffffff05 1px, transparent 1px), linear-gradient(90deg, #ffffff05 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(90deg, #000 0, transparent 72%); content: ""; pointer-events: none; }
.info-hero-copy { position: relative; z-index: 2; max-width: 660px; }
.eyebrow { color: #67b6f3; font-size: 11px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.info-hero h1 { margin: 12px 0 16px; font-size: clamp(36px, 5vw, 60px); line-height: 1.02; letter-spacing: -.045em; }
.info-hero h1 em { color: #91cfff; font-style: normal; font-weight: 650; }
.info-hero-copy > p { max-width: 610px; margin: 0; color: #a8bbcc; font-size: 16px; line-height: 1.65; }
.info-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.info-facts span { padding: 9px 12px; border: 1px solid #31516b; border-radius: 999px; color: #8fa8bc; background: #071521aa; font-size: 12px; }
.info-facts strong { margin-right: 4px; color: #f0f7ff; font-size: 14px; }
.info-visual { position: relative; z-index: 1; width: 280px; height: 280px; justify-self: end; }
.visual-core { position: absolute; z-index: 3; inset: 50% auto auto 50%; display: grid; place-items: center; width: 92px; height: 92px; translate: -50% -50%; border: 1px solid #77c5ff; border-radius: 28px; color: #fff; background: linear-gradient(145deg, #217ac0, #103f68); box-shadow: 0 0 50px #1f8ee66b, inset 0 1px #ffffff55; font-size: 24px; font-weight: 900; letter-spacing: -.04em; }
.orbit { position: absolute; inset: 50% auto auto 50%; border: 1px solid #4b7da755; border-radius: 50%; translate: -50% -50%; }
.orbit-one { width: 190px; height: 190px; }
.orbit-two { width: 270px; height: 270px; border-style: dashed; }
.satellite { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #4e7b9e; border-radius: 15px; color: #c9e5fb; background: #0b263a; box-shadow: 0 8px 24px #0007; font-size: 10px; letter-spacing: .08em; }
.satellite-one { top: 20px; left: 115px; } .satellite-two { right: 12px; bottom: 70px; } .satellite-three { bottom: 28px; left: 40px; }
.catalog-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-top: 42px; }
.catalog-heading h2 { margin: 7px 0 0; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.025em; }
.catalog-heading > p { max-width: 390px; margin: 0; color: #849bae; font-size: 13px; text-align: right; }
.doc-card { position: relative; overflow: hidden; min-height: 126px; transition: translate .18s ease, border-color .18s ease, box-shadow .18s ease; }
.doc-card::after { position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent 72%); content: ""; }
.doc-card:hover { border-color: color-mix(in srgb, var(--accent) 68%, #33485d); box-shadow: 0 16px 34px #0004; translate: 0 -3px; }
.doc-card > b { box-shadow: 0 9px 22px color-mix(in srgb, var(--accent) 25%, transparent); }
.ccc-panel { position: relative; margin-top: 26px; overflow: hidden; border-color: #284760; border-radius: 24px; background: linear-gradient(150deg, #0b1b2a 0%, #08131e 62%, #091824 100%); box-shadow: 0 22px 60px #0005, inset 0 1px #ffffff0a; }
.ccc-panel::before { position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #38bdf8, #6366f1 58%, transparent); content: ""; }
.ccc-heading { position: relative; padding-bottom: 20px; border-bottom: 1px solid #203a50; }
.ccc-heading p { margin: 7px 0 0; color: #8199ad; font-size: 13px; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 10px #38bdf8; }
.connection-state { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid #35516a; border-radius: 999px; color: #a7bac9; background: #07131d; font-size: 11px; font-weight: 800; }
.connection-state::before { width: 7px; height: 7px; border-radius: 50%; background: #64748b; content: ""; }
.connection-state.connected { border-color: #23633c; color: #a7f3c0; background: #0a2718; } .connection-state.connected::before { background: #34d665; box-shadow: 0 0 8px #34d665; }
.connection-state.locked { color: #f7d794; } .connection-state.locked::before { background: #eab84d; }
.connection-state.error { color: #fecaca; } .connection-state.error::before { background: #ef6464; }
.login-form { position: relative; padding: 22px; border-color: #315570; border-radius: 16px; background: linear-gradient(130deg, #0a2031, #08141f); box-shadow: inset 0 1px #ffffff0b; }
.login-copy { position: relative; padding-left: 48px; }
.login-symbol { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #39749f; border-radius: 11px; color: #9bd5ff; background: #103a59; font-size: 20px; }
.info-actions .text-link { padding: 9px 13px; border: 1px solid #315d7e; border-radius: 9px; color: #c6e7ff; background: #0d2a40; }
.summary-grid { gap: 14px; }
.summary-card { --card-accent: #64748b; position: relative; min-height: 126px; padding: 18px; overflow: hidden; border-color: color-mix(in srgb, var(--card-accent) 38%, #203a52); border-radius: 15px; background: linear-gradient(145deg, color-mix(in srgb, var(--card-accent) 12%, #07111c), #07111c 72%); box-shadow: inset 0 1px #ffffff0b; }
.summary-card::after { position: absolute; right: -24px; bottom: -34px; width: 105px; height: 105px; border-radius: 50%; background: color-mix(in srgb, var(--card-accent) 13%, transparent); content: ""; }
.summary-card.violet { --card-accent: #8b5cf6; } .summary-card.cyan { --card-accent: #06b6d4; } .summary-card.blue { --card-accent: #3b82f6; } .summary-card.amber { --card-accent: #f59e0b; }
.summary-icon { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 13px; border: 1px solid color-mix(in srgb, var(--card-accent) 65%, #fff0); border-radius: 9px; color: color-mix(in srgb, var(--card-accent) 62%, #fff); background: color-mix(in srgb, var(--card-accent) 16%, transparent); font-size: 9px; font-weight: 900; letter-spacing: .05em; }
.summary-card strong { position: relative; z-index: 1; font-size: 28px; letter-spacing: -.04em; }
.instance-heading { margin-top: 30px; }
.instance-heading h3 { margin: 0; font-size: 18px; } .instance-heading p { margin: 5px 0 0; color: #7890a4; font-size: 12px; }
.table-wrap { border: 1px solid #203a50; border-radius: 14px; background: #06111a99; }
th { padding-top: 13px; padding-bottom: 13px; background: #0b1c2a; letter-spacing: .06em; }
tbody tr { transition: background .14s ease; } tbody tr:hover { background: #102538; }
th:first-child { border-radius: 13px 0 0; } th:last-child { border-radius: 0 13px 0 0; }
.domain-cell { min-width: 210px; }
.domain-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border: 1px solid #2f6288; border-radius: 8px; color: #a9d9fa; background: #102f47; font-size: 11px; font-weight: 900; vertical-align: middle; }
.password-panel { padding: 24px; border-color: #29465d; border-radius: 16px; background: linear-gradient(135deg, #0a1b29, #07111c); }
.password-copy { position: relative; padding-left: 50px; }
.password-symbol { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #5a4b85; border-radius: 11px; color: #c6b7fa; background: #282044; font-size: 11px; letter-spacing: .08em; }
.dashboard-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid #1f3447; }

.site-footer {
  margin-top: 22px;
  padding: 12px 0 0;
  border-top: 1px solid #1e344a;
  color: #8da2b7;
  text-align: center;
  font-size: 12px;
}

.site-footer a {
  color: #8fc5fa;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: #bfe0ff;
  text-decoration: underline;
}
@media (max-width: 900px) { .login-form { grid-template-columns: 1fr 1fr; } .login-copy { grid-column: 1 / -1; } .remember-option { grid-column: 1; } .summary-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1000px) { .password-panel { grid-template-columns: 1fr; } .password-form { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .topbar { align-items: flex-start; }.topbar-actions { align-items: flex-end; flex-direction: column; }.workspace-tools { flex-wrap: wrap; justify-content: flex-end; } }
@media (max-width: 720px) { .tool-grid, .docs-grid { grid-template-columns: 1fr; } .brand strong { font-size: 16px; } #workspace-search { width: 100%; }.workspace-tools { width: min(100%, 360px); }.section-heading { align-items: flex-start; flex-direction: column; } }
@media (max-width: 480px) { .service-status, .status-grid { justify-content: flex-start; } .status-grid { gap: 11px; } }
@media (max-width: 640px) { .storymaster-ai-button { right: 16px; bottom: 16px; } }
@media (max-width: 560px) { .login-form, .summary-grid, .password-form { grid-template-columns: 1fr; } .remember-option { grid-column: 1; } .ccc-panel { padding: 18px; } }
@media (max-width: 760px) { .info-hero { grid-template-columns: 1fr; min-height: auto; } .info-visual { display: none; } .catalog-heading { align-items: flex-start; flex-direction: column; } .catalog-heading > p { text-align: left; } .ccc-heading { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .doc-card { transition: none; } }