.helixid-content--front {
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 980px);
    margin: 0 auto;
    color: #e8f0fc;
}
.helixid-content--front .helixid-content__header {
    display: grid;
    gap: 9px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(143, 193, 255, .2);
}
.helixid-content--front .helixid-content__header h2 {
    margin: 0;
    color: #9fc7ff;
    font-size: clamp(1.9rem, 4vw, 3.2rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
}
.helixid-content--front .helixid-content__header p,
.helixid-content--front > p {
    margin: 0;
    color: #b8c7da;
    line-height: 1.65;
}
.helixid-content--front .helixid-content__notice,
.helixid-content--front .helixid-content__error {
    padding: 14px 16px;
    border: 1px solid rgba(114, 230, 203, .28);
    border-radius: 13px;
    background: rgba(53, 155, 133, .12);
    color: #dffbf4;
}
.helixid-content--front .helixid-content__error {
    border-color: rgba(255, 133, 151, .3);
    background: rgba(151, 43, 62, .16);
    color: #ffdce2;
}
.helixid-content--front .helixid-content__form {
    display: grid;
    grid-template-columns: minmax(150px, .42fr) minmax(0, 1fr);
    gap: 12px 18px;
    align-items: center;
    max-width: 820px;
    padding: 20px;
    border: 1px solid rgba(143, 193, 255, .18);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(20, 32, 54, .86), rgba(8, 16, 30, .82));
}
.helixid-content--front .helixid-content__form + .helixid-content__form {
    margin-top: 14px;
}
.helixid-content--front .helixid-content__form label {
    color: #d7e4f5;
    font-size: .82rem;
    font-weight: 700;
}
.helixid-content--front .helixid-content__form input,
.helixid-content--front .helixid-content__form select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(143, 193, 255, .3);
    border-radius: 11px;
    background: #07101f;
    color: #fff;
    font: inherit;
}
.helixid-content--front .helixid-content__form input:focus,
.helixid-content--front .helixid-content__form select:focus {
    outline: 3px solid rgba(87, 157, 234, .24);
    outline-offset: 2px;
    border-color: #8fc1ff;
}
.helixid-content--front .helixid-content__form button {
    grid-column: 2;
    width: fit-content;
    min-height: 43px;
    padding: 10px 18px;
    border: 1px solid rgba(143, 193, 255, .36);
    border-radius: 11px;
    background: linear-gradient(135deg, #2d65a9, #1b416f);
    color: #fff;
    font: 700 .95rem/1.2 "Trebuchet MS", sans-serif;
    cursor: pointer;
}
.helixid-content--front a { color: #9fc7ff; }
.helixid-content--front .helixid-content__sessions,
.helixid-content--front .helixid-content__audit { display: grid; gap: 13px; }
.helixid-content--front .helixid-content__session,
.helixid-content--front .helixid-content__audit-event {
    padding: 18px;
    border: 1px solid rgba(143, 193, 255, .18);
    border-radius: 15px;
    background: rgba(12, 23, 41, .74);
}
.helixid-content--front .helixid-content__session h3,
.helixid-content--front .helixid-content__audit-event h3 { margin: 0 0 8px; color: #fff; }
.helixid-content--front .helixid-content__session p,
.helixid-content--front .helixid-content__audit-event p { color: #b8c7da; }
@media (max-width: 640px) {
    .helixid-content--front .helixid-content__form { grid-template-columns: 1fr; padding: 16px; }
    .helixid-content--front .helixid-content__form button { grid-column: 1; width: 100%; }
}

/* Append to each pack's assets/css/sapphire_helixid.css: permission table of the personal-token form. */
.helixid-token-center__scopes {
    grid-column: 1 / -1;
    border: 1px solid rgba(127, 150, 180, 0.35);
    border-radius: 12px;
    padding: 12px 14px;
}

.helixid-token-center__scopes legend {
    padding: 0 6px;
    font-weight: 700;
}

.helixid-token-center__scope-wrap {
    max-height: 360px;
    overflow: auto;
}

.helixid-token-center__scope-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.helixid-token-center__scope-table th,
.helixid-token-center__scope-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(127, 150, 180, 0.25);
    text-align: left;
    vertical-align: top;
}

.helixid-token-center__scope {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    cursor: pointer;
}

.helixid-token-center__scope span {
    font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow-wrap: anywhere;
}

.helixid-token-center__scope--write span {
    color: #b8742a;
}

.sapphire-content-host > .helixid-content--front ~ .helixid-widget--front { display: none; }

/* Profile photo (HelixID 1.1.52): the preview, then the upload and remove actions. */
.helixid-content--front .helixid-avatar {
    max-width: 820px;
    padding: 20px;
    border: 1px solid rgba(143, 193, 255, .18);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(20, 32, 54, .86), rgba(8, 16, 30, .82));
}
.helixid-content--front .helixid-avatar h3 { margin: 0 0 14px; color: #fff; font-size: 1.05rem; }
.helixid-content--front .helixid-avatar__body { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.helixid-content--front .helixid-avatar__preview {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border: 2px solid rgba(143, 193, 255, .45);
    border-radius: 50%;
    object-fit: cover;
    background: #07101f;
}
.helixid-content--front .helixid-avatar__preview--empty { display: inline-grid; place-items: center; color: #8ea6c4; font-size: 2.4rem; border-style: dashed; }
.helixid-content--front .helixid-avatar__controls { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1 1 280px; gap: 12px; min-width: 0; }
.helixid-content--front .helixid-avatar__form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; max-width: none; padding: 0; border: 0; background: none; }
.helixid-content--front .helixid-avatar__controls .helixid-avatar__form { margin-top: 0; }
.helixid-content--front .helixid-avatar__form > label { flex: 1 0 100%; }
.helixid-content--front .helixid-avatar__form input[type="file"] { flex: 1 1 260px; width: auto; min-width: 0; max-width: 100%; padding: 8px; color: #b8c7da; }
.helixid-content--front .helixid-avatar__form button { grid-column: auto; }
.helixid-content--front .helixid-avatar__hint { flex: 1 0 100%; order: 3; color: #8ea6c4; font-size: .8rem; line-height: 1.5; }
.helixid-content--front .helixid-avatar__form--remove button { border-color: rgba(255, 133, 151, .4); background: rgba(151, 43, 62, .2); color: #ffdce2; }
@media (max-width: 640px) {
    .helixid-content--front .helixid-avatar { padding: 16px; }
    .helixid-content--front .helixid-avatar__body { flex-direction: column; align-items: center; }
    .helixid-content--front .helixid-avatar__controls { width: 100%; }
}

/* sapphire-project.pro Demo skin: the page itself is light, while the header, forms and lists stay dark cards.
   Text placed straight on the page (notices, errors, intro paragraphs and their links) uses the demo palette. */
body.demo-front .helixid-content--front > p { color: var(--demo-muted, #66716e); }
body.demo-front .helixid-content--front > p a { color: var(--demo-blue, #356fce); }
body.demo-front .helixid-content--front .helixid-content__notice {
    border-color: #b9e3cd;
    background: #e5f8ee;
    color: #11623d;
}
body.demo-front .helixid-content--front .helixid-content__error {
    border-color: #f2c5bc;
    background: #fff0ed;
    color: #9f3024;
}
body.demo-front .helixid-content--front .helixid-avatar,
body.demo-front .helixid-content--front .helixid-content__form { max-width: none; }
/* AI agents page (HelixID/ai_agents.mirage): the intro sits on the light page, each agent is a dark card like the
   forms, and the «New agent» button on the page uses the demo palette. */
body.demo-front .helixid-content--front .helixid-agents__intro { color: var(--demo-muted, #66716e); }
body.demo-front .helixid-content--front .helixid-agents__item {
    padding: 18px;
    border-color: rgba(143, 193, 255, .18);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(20, 32, 54, .86), rgba(8, 16, 30, .82));
}
body.demo-front .helixid-content--front .helixid-agents__item--onboard { border-color: rgba(54, 163, 255, .6); }
body.demo-front .helixid-content--front .helixid-agents__new > summary {
    border-color: var(--demo-blue, #356fce);
    background: var(--demo-white, #fbfaf7);
    color: var(--demo-blue, #356fce);
}