
:root {
    --orc-ink: #111418;
    --orc-slate: #2A2F38;
    --orc-ash: #8A9099;
    --orc-paper: #F4F4F2;
    --orc-line: #DEE0DF;
    --orc-signal: #2F6BFF;
    --orc-deep: #0029E7;
    --orc-mono: var(--tss-monospace-font-family, "Geist Mono", ui-monospace, monospace);
    --orc-gutter: clamp(20px, 5vw, 72px);
}

body.orc-app { background: var(--tss-default-background-color); }

.orc-host { height: 100vh; }
.orc-mono { font-family: var(--orc-mono); letter-spacing: 0; }
.orc-clickable { cursor: pointer; }
.orc-clickable:focus-visible { outline: 2px solid var(--orc-signal); outline-offset: 2px; }

.orc-eyebrow {
    font-family: var(--orc-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--orc-ash);
}

.orc-wordmark { font-size: 17px; letter-spacing: -0.01em; }


.orc-landing { background: var(--tss-default-background-color); }

.orc-hero {
    position: relative;
    overflow: hidden;
    background: var(--orc-ink);
    min-height: 440px;
    flex-shrink: 0;
}

.orc-hero-field { position: absolute !important; inset: 0; height: 100% !important; }

.orc-hero-content {
    position: relative;
    z-index: 1;
    pointer-events: none;
    padding: 0 var(--orc-gutter) 64px var(--orc-gutter);
    min-height: 440px;
}

.orc-hero-content button, .orc-hero-content a { pointer-events: auto; }

.orc-topbar { padding: 22px 0; color: var(--orc-paper); }
.orc-topbar .orc-wordmark { color: var(--orc-paper); }

.orc-hero-copy { margin-top: auto; max-width: 760px; gap: 14px; }

.orc-hero-title {
    color: var(--orc-paper);
    font-size: clamp(40px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 500;
}

.orc-hero-subtitle { color: var(--orc-ash); font-size: clamp(16px, 1.6vw, 20px); max-width: 560px; }

body .tss-btn.orc-on-ink-button,
body.tss-theme-curiosity .tss-btn.orc-on-ink-button {
    background: transparent;
    color: var(--orc-paper);
    border: 1px solid rgba(244, 244, 242, 0.32);
}

body .tss-btn.orc-on-ink-button:hover,
body.tss-theme-curiosity .tss-btn.orc-on-ink-button:hover { background: var(--orc-paper); color: var(--orc-ink); border-color: var(--orc-paper); }
body .tss-btn.orc-on-ink-button i, body .tss-btn.orc-on-ink-button span { color: inherit; }

.orc-section { padding: 56px var(--orc-gutter) 72px var(--orc-gutter); gap: 28px; flex-shrink: 0; }

.orc-section-head { border-bottom: 1px solid var(--tss-default-border-color); padding-bottom: 14px; }
.orc-section-title { font-size: 26px !important; letter-spacing: -0.02em; font-weight: 500; }
.orc-section-count { font-family: var(--orc-mono); color: var(--tss-secondary-foreground-color); }

.orc-card {
    background: var(--tss-default-background-color);
    border: 1px solid var(--tss-default-border-color);
    padding: 22px;
    gap: 14px;
    min-height: 250px;
    transition: border-color 160ms ease, transform 160ms ease;
}

.orc-card:hover { border-color: var(--tss-default-foreground-color); transform: translateY(-2px); }

.orc-card-title { font-size: 21px !important; letter-spacing: -0.015em; font-weight: 500; }

.orc-card-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.orc-card-foot { border-top: 1px solid var(--tss-default-border-color); padding-top: 14px; color: var(--tss-secondary-foreground-color); }

.orc-empty { padding: 72px 0; gap: 12px; }

.orc-footer { flex-shrink: 0; }
.orc-footer-row { padding: 20px var(--orc-gutter) 28px var(--orc-gutter); gap: 24px; }


.orc-state {
    padding: 3px 9px 3px 7px;
    border: 1px solid var(--tss-default-border-color);
    white-space: nowrap;
    font-family: var(--orc-mono);
}

.orc-state .tss-textblock { font-family: var(--orc-mono); letter-spacing: 0.02em; }

.orc-state-dot { width: 7px; height: 7px; flex-shrink: 0; background: var(--orc-ash); }

.orc-state-running .orc-state-dot { background: var(--orc-signal); }
.orc-state-busy .orc-state-dot { background: var(--orc-signal); animation: orc-blink 900ms steps(2, jump-none) infinite; }
.orc-state-error .orc-state-dot { background: var(--tss-danger-background-color, #C42B1C); }
.orc-state-error { border-color: var(--tss-danger-background-color, #C42B1C); }

@keyframes orc-blink { 0% { opacity: 1; } 100% { opacity: 0.15; } }


.orc-start {
    position: relative;
    overflow: hidden;
    background: var(--orc-ink);
    color: var(--orc-paper);
}

.orc-start-field { position: absolute !important; inset: 0; height: 100% !important; opacity: 0.55; }

.orc-start-top { position: relative; z-index: 2; padding: 22px var(--orc-gutter); }

.orc-start-panel {
    position: relative;
    z-index: 1;
    margin: auto;
    padding: 44px 48px 40px 48px;
    gap: 14px;
    width: min(560px, calc(100vw - 32px));
    background: rgba(17, 20, 24, 0.86);
    border: 1px solid rgba(244, 244, 242, 0.14);
    backdrop-filter: blur(6px);
    pointer-events: none;
}

.orc-start-panel button { pointer-events: auto; }

.orc-start-glyph { margin-bottom: 8px; }

.orc-start-name {
    color: var(--orc-paper);
    font-size: clamp(28px, 4vw, 40px);
    letter-spacing: -0.03em;
    font-weight: 500;
    text-align: center;
}

.orc-steps { width: 100%; gap: 6px; margin: 18px 0 8px 0; }
.orc-step { flex: 1 1 0; gap: 8px; }
.orc-step-bar { height: 4px; background: rgba(244, 244, 242, 0.14); }
.orc-step-label { font-family: var(--orc-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orc-ash); }
.orc-step-done .orc-step-bar { background: var(--orc-paper); }
.orc-step-done .orc-step-label { color: var(--orc-paper); }
.orc-step-active .orc-step-bar { background: linear-gradient(90deg, var(--orc-signal) 0 40%, rgba(244, 244, 242, 0.14) 40%); background-size: 250% 100%; animation: orc-sweep 1.4s linear infinite; }
.orc-step-active .orc-step-label { color: var(--orc-signal); }

@keyframes orc-sweep { 0% { background-position: 100% 0; } 100% { background-position: -150% 0; } }

.orc-start-pulse { width: 8px; height: 8px; background: var(--orc-signal); animation: orc-blink 900ms steps(2, jump-none) infinite; }
.orc-start-status { color: var(--orc-paper); font-family: var(--orc-mono); font-size: 13px; }
.orc-start-elapsed { color: var(--orc-ash); font-family: var(--orc-mono); font-size: 13px; }

.orc-start-failed .orc-start-pulse { background: #C42B1C; animation: none; }
.orc-start-failed .orc-step-active .orc-step-bar { animation: none; background: #C42B1C; }

.orc-start-error { gap: 14px; margin-top: 10px; width: 100%; align-items: center; }
.orc-start-error-text { color: var(--orc-paper); text-align: center; }

@media (prefers-reduced-motion: reduce) {
    .orc-state-busy .orc-state-dot, .orc-start-pulse, .orc-step-active .orc-step-bar { animation: none; }
}


.orc-login {
    background: var(--orc-ink);
    position: relative;
    overflow: hidden;
}

.orc-login-field { position: absolute !important; inset: 0; height: 100% !important; }

.orc-login-card {
    position: relative;
    z-index: 1;
    margin: auto;
    width: min(400px, calc(100vw - 32px));
    padding: 36px;
    gap: 16px;
    background: var(--tss-default-background-color);
    border: 1px solid var(--tss-default-border-color);
}

.orc-login-title { font-size: 28px; letter-spacing: -0.025em; font-weight: 500; }

.orc-page { padding: 32px clamp(16px, 3vw, 40px) 48px clamp(16px, 3vw, 40px); gap: 24px; }

.orc-page-head { gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--tss-default-border-color); padding-bottom: 18px; }
.orc-page-title { font-size: 30px !important; line-height: 1.15; letter-spacing: -0.025em; font-weight: 500; }

.orc-panel {
    border: 1px solid var(--tss-default-border-color);
    background: var(--tss-default-background-color);
    padding: 20px;
    gap: 14px;
}

.orc-panel-title { font-family: var(--orc-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tss-secondary-foreground-color); }

.orc-kv { display: grid; grid-template-columns: minmax(130px, 200px) 1fr; gap: 10px 18px; align-items: baseline; }
.orc-kv-key { color: var(--tss-secondary-foreground-color); font-size: 13px; }
.orc-kv-value { font-size: 13px; overflow-wrap: anywhere; }

.orc-table { width: 100%; border-collapse: collapse; }
.orc-row {
    display: grid;
    align-items: center;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--tss-default-border-color);
}
.orc-row-head { font-family: var(--orc-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tss-secondary-foreground-color); padding-top: 4px; }
.orc-row.orc-clickable:hover { background: var(--tss-default-background-hover-color); }

.orc-instances-row { grid-template-columns: 44px minmax(180px, 2fr) 140px 80px 100px minmax(140px, 1fr) 150px; }
.orc-images-row { grid-template-columns: minmax(200px, 2fr) 130px 100px 160px minmax(120px, 1fr); }
.orc-events-row { grid-template-columns: 210px 160px 130px 1fr 110px; }
.orc-settings-row { grid-template-columns: minmax(220px, 1fr) minmax(160px, 1fr) 150px minmax(200px, 2fr); }
.orc-certificates-row { grid-template-columns: minmax(240px, 2fr) 120px minmax(140px, 1fr) minmax(200px, 1fr); }
.orc-certificates-row .orc-state { justify-self: start; }
.orc-https { gap: 8px; margin-bottom: 40px; }
.orc-https-empty { padding: 12px 4px; }

body.tss-mobile .orc-instances-row { grid-template-columns: 44px 1fr auto; }
body.tss-mobile .orc-instances-row > :nth-child(n+4):not(:last-child) { display: none; }
body.tss-mobile .orc-events-row, body.tss-mobile .orc-settings-row, body.tss-mobile .orc-certificates-row, body.tss-mobile .orc-images-row { grid-template-columns: 1fr; gap: 4px; }

.orc-logs {
    font-family: var(--orc-mono);
    font-size: 12px;
    line-height: 1.55;
    background: var(--orc-ink);
    color: #D9DCE0;
    padding: 14px 16px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 420px;
    max-height: calc(100vh - 330px);
}

.orc-log-time { color: #6B7280; margin-right: 10px; user-select: none; }
.orc-log-error { color: #FF8A7A; }
.orc-log-warn { color: #F2C14E; }

.orc-op-log {
    font-family: var(--orc-mono);
    font-size: 12px;
    background: var(--orc-ink);
    color: #D9DCE0;
    padding: 12px 14px;
    white-space: pre-wrap;
    height: 320px;
    overflow: auto;
}

.orc-secret { font-family: var(--orc-mono); font-size: 14px; padding: 8px 10px; border: 1px solid var(--tss-default-border-color); background: var(--tss-secondary-background-color); }

.orc-sidebar-glyph { margin: 0 auto; }

.orc-metric { gap: 8px; }
.orc-metric-value { font-size: 30px !important; line-height: 1.15; letter-spacing: -0.025em; font-weight: 500; }
.orc-metric-icon { color: var(--tss-secondary-foreground-color); }

.orc-notice { padding: 12px 16px; }
.orc-notice-icon { color: var(--orc-signal); }
.orc-notice-danger { border-color: var(--tss-danger-background-color, #C42B1C); }
.orc-notice-danger .orc-notice-icon { color: var(--tss-danger-background-color, #C42B1C); }

.tss-btn.orc-back { align-self: flex-start; padding-left: 0; color: var(--tss-secondary-foreground-color); }

.orc-instances-row > :last-child { justify-content: flex-end; }

.orc-section-head { gap: 16px; flex-wrap: wrap; }


body.tss-mobile .orc-hero, body.tss-mobile .orc-hero-content { min-height: 360px; }
body.tss-mobile .orc-hero-content { padding-bottom: 40px; }
body.tss-mobile .orc-section { padding-top: 32px; }
body.tss-mobile .orc-landing-search { width: 100% !important; }
body.tss-mobile .orc-footer-row { flex-direction: column; align-items: flex-start; gap: 6px; }
body.tss-mobile .orc-start-panel { padding: 32px 20px 28px 20px; }
body.tss-mobile .orc-page-head > .tss-stack:last-child { width: 100%; }
body.tss-mobile .orc-kv { grid-template-columns: 1fr; gap: 2px 0; }
body.tss-mobile .orc-kv-value { margin-bottom: 8px; }
