:root {
  --c2p-ink: #172033;
  --c2p-muted: #6c778b;
  --c2p-sidebar: #10222a;
  --c2p-sidebar-deep: #09161b;
  --c2p-accent: #087f8c;
  --c2p-accent-dark: #066773;
  --c2p-accent-soft: #e6f6f7;
  --c2p-gold: #d7a13a;
  --c2p-bg: #f4f7f8;
  --c2p-border: #dfe7e9;
}
html, body { min-height: 100%; }
body { margin: 0; background: var(--c2p-bg); color: var(--c2p-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.btn-primary { --bs-btn-bg: var(--c2p-accent); --bs-btn-border-color: var(--c2p-accent); --bs-btn-hover-bg: var(--c2p-accent-dark); --bs-btn-hover-border-color: var(--c2p-accent-dark); }
.btn-outline-primary { --bs-btn-color: var(--c2p-accent); --bs-btn-border-color: #8ec8cd; --bs-btn-hover-bg: var(--c2p-accent); --bs-btn-hover-border-color: var(--c2p-accent); }
.login-view { min-height: 100vh; padding: 2rem 1rem; display: grid; place-items: center; background: radial-gradient(circle at 14% 18%, rgba(8,127,140,.18), transparent 31%), radial-gradient(circle at 88% 82%, rgba(215,161,58,.15), transparent 30%), linear-gradient(145deg, #f8fbfb, #edf5f5); }
.login-shell { width: min(100%, 470px); }
.login-card { border-radius: 1.35rem; }
.eyebrow { color: var(--c2p-accent); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.brand-lockup { display: flex; align-items: center; }
.brand-mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: white; background: linear-gradient(135deg, #0b9aaa, #075f69); font-weight: 850; letter-spacing: -.05em; box-shadow: 0 10px 28px rgba(8,127,140,.25); flex: 0 0 auto; }
.brand-mark-lg { width: 64px; height: 64px; border-radius: 20px; font-size: 1.1rem; }
.disabled-link { color: #9aa4ae; text-decoration: none; cursor: not-allowed; pointer-events: none; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 270px; z-index: 1030; flex-direction: column; background: linear-gradient(180deg, var(--c2p-sidebar), var(--c2p-sidebar-deep)); color: white; }
.sidebar-brand { display: flex; align-items: center; gap: .85rem; padding: 1.35rem 1.25rem; }
.sidebar-nav { padding: .75rem; overflow-y: auto; }
.nav-section { padding: 1.25rem .8rem .5rem; color: rgba(255,255,255,.4); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: .8rem; padding: .75rem .85rem; color: rgba(255,255,255,.72); text-decoration: none; border-radius: .75rem; margin-bottom: .2rem; font-weight: 600; transition: .16s ease; }
.nav-item:hover { color: white; background: rgba(255,255,255,.07); }
.nav-item.active { color: white; background: rgba(8,127,140,.34); }
.nav-symbol { width: 1.35rem; text-align: center; font-size: 1.05rem; }
.sidebar-footer { margin-top: auto; padding: 1.25rem; border-top: 1px solid rgba(255,255,255,.08); }
.mobile-menu { --bs-offcanvas-width: 285px; background: var(--c2p-sidebar); color: white; }
.main-area { min-height: 100vh; }
@media (min-width: 992px) { .main-area { margin-left: 270px; } }
.topbar { height: 70px; padding: 0 1.25rem; display: flex; align-items: center; background: rgba(255,255,255,.93); border-bottom: 1px solid var(--c2p-border); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 1020; }
.page-content { padding: 1.25rem; }
@media (min-width: 768px) { .page-content { padding: 2rem; } }
.page-header { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1.25rem; }
.page-title { margin: 0; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 760; letter-spacing: -.03em; }
.page-subtitle { color: var(--c2p-muted); margin: .35rem 0 0; }
.metric-card, .panel-card { border: 1px solid var(--c2p-border); border-radius: 1rem; box-shadow: 0 8px 30px rgba(15,23,42,.045); }
.metric-card .card-body { padding: 1.25rem; }
.metric-label { color: var(--c2p-muted); font-size: .78rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.metric-date { font-size: 1rem; font-weight: 700; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.empty-inline { min-height: 160px; display: flex; align-items: center; gap: 1rem; padding-top: 1rem; }
.empty-icon { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--c2p-accent-soft); color: var(--c2p-accent); font-size: 1.25rem; }
.empty-state { min-height: 330px; padding: 3rem 1.5rem; text-align: center; display: grid; place-content: center; color: var(--c2p-muted); }
.empty-orb { width: 66px; height: 66px; border-radius: 22px; margin: 0 auto; display: grid; place-items: center; color: var(--c2p-accent); background: var(--c2p-accent-soft); font-size: 1.5rem; }
.loading-state { min-height: 240px; display: grid; place-items: center; }
.status-notice { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; margin-bottom: 1.25rem; border: 1px solid #bfe0e3; border-left: 4px solid var(--c2p-accent); border-radius: .85rem; background: #f5fbfb; }
.status-notice-badge { flex: 0 0 auto; }
.status-notice-title { font-weight: 700; margin-bottom: .1rem; }
.status-notice-copy { color: #59647a; font-size: .9rem; }
.status-pill, .account-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .58rem; border-radius: 999px; font-size: .73rem; font-weight: 750; text-transform: capitalize; }
.status-Production, .account-active, .account-verified { color: #065f46; background: #d1fae5; }
.status-Built { color: #1e40af; background: #dbeafe; }
.status-Demo { color: #92400e; background: #fef3c7; }
.status-Planned, .account-not_started, .account-pending, .account-unknown { color: #475569; background: #e2e8f0; }
.detail-label { color: var(--c2p-muted); font-size: .7rem; font-weight: 800; letter-spacing: .07em; margin-bottom: .3rem; text-transform: uppercase; }
@media (max-width: 767.98px) { .page-header, .section-heading { flex-direction: column; } .section-heading .btn { width: 100%; } .empty-inline { min-height: 140px; } }

.form-hint { color: var(--c2p-muted); font-size: .8rem; }
.session-list { display: grid; gap: .75rem; }
.session-row { display: flex; align-items: center; gap: .85rem; padding: .9rem 0; border-top: 1px solid var(--c2p-border); }
.session-row:first-child { border-top: 0; }
.session-icon { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center; color: var(--c2p-accent); background: var(--c2p-accent-soft); }
.session-main { min-width: 0; flex: 1 1 auto; }
.empty-state.compact { min-height: auto; padding: 1.5rem .5rem; }
.account-disabled, .account-rejected { color: #991b1b; background: #fee2e2; }
.code-text { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }
.table thead th { color: var(--c2p-muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

@media (max-width: 767.98px) {
  .session-row { align-items: flex-start; flex-wrap: wrap; }
  .session-row .btn { width: 100%; margin-left: 42px; }
  .mobile-card-table thead { display: none; }
  .mobile-card-table tbody, .mobile-card-table tr, .mobile-card-table td { display: block; width: 100%; }
  .mobile-card-table tr { padding: .8rem 0; border-bottom: 1px solid var(--c2p-border); }
  .mobile-card-table td { padding: .2rem 0; border: 0; }
  .mobile-card-table td::before { content: attr(data-label); display: block; color: var(--c2p-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
}

.wallet-mini-list, .activity-mini-list { display: grid; }
.wallet-mini-row, .activity-mini-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--c2p-border); }
.wallet-mini-row:first-child, .activity-mini-row:first-child { border-top: 0; }
.asset-code { display: inline-grid; place-items: center; min-width: 48px; height: 32px; padding: 0 .7rem; margin-bottom: .65rem; border-radius: 999px; color: var(--c2p-accent); background: var(--c2p-accent-soft); font-size: .8rem; font-weight: 850; letter-spacing: .04em; }
.wallet-total { padding: 1rem; border-radius: .9rem; background: linear-gradient(135deg, #f3fbfb, #edf7f8); border: 1px solid #d8ebed; }
.wallet-total-value { font-size: clamp(1.2rem, 3vw, 1.7rem); font-weight: 800; word-break: break-all; }
.balance-tile { height: 100%; padding: .8rem; border: 1px solid var(--c2p-border); border-radius: .8rem; background: #fbfcfc; }
.address-panel { min-height: 78px; padding: .9rem; border: 1px dashed #bacbce; border-radius: .8rem; background: #fbfdfd; }
@media (max-width: 575.98px) { .wallet-mini-row, .activity-mini-row { align-items: flex-start; } .wallet-mini-row > :last-child, .activity-mini-row > :last-child { max-width: 48%; } }

.environment-pill { display: inline-flex; padding: .32rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.environment-production { color: #065f46; background: #d1fae5; }
.environment-sandbox { color: #4a3200; background: #fde9a9; }
.sandbox-banner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid #e1b83f; border-left: 5px solid #d89d00; border-radius: .9rem; color: #4a3200; background: linear-gradient(135deg, #fff9e7, #fff2bd); }
.sandbox-badge { flex: 0 0 auto; padding: .28rem .58rem; border-radius: 999px; background: #4a3200; color: #fff5cf; font-size: .7rem; font-weight: 850; letter-spacing: .08em; }
@media (max-width: 575.98px) {
  .sandbox-banner { align-items: flex-start; }
}


.secret-box { background: #111827; color: #e5e7eb; padding: 1rem; border-radius: .8rem; word-break: break-all; }
.developer-app-list { display: grid; }
.developer-app-row { background: #fbfdfd; border-color: var(--c2p-border) !important; }
.min-w-0 { min-width: 0; }
.brand-runtime-logo { display:block; max-width:100%; max-height:100%; object-fit:contain; }

.required-marker { color: var(--bs-danger); font-weight: 800; }
.identity-form .form-label { margin-bottom: .3rem; }
.identity-form .form-text { margin-top: .25rem; }
@media (max-width: 575.98px) {
  .identity-form { --bs-gutter-y: .7rem; }
  .identity-form .form-label { font-size: .86rem; }
}