/* ═══════════════════════════════════════════════════════════
   portal.css — Consumer portal: auth, profile, 5-panel layout
   ═══════════════════════════════════════════════════════════ */

/* ── Portal panel container ── */
#e7_portal_panel {
  display:        none;
  flex-direction: column;
  flex:           1;
  overflow-x:     hidden;
  overflow-y:     auto;
  background:     #0a0f1e;
}

#e7_portal_panel.e7_visible {
  display: flex;
}

/* ── Login card ── */
#e7_login_card {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex:            1;
  padding:         2rem;
}

#e7_login_box {
  width:      100%;
  max-width:  400px;
  background: rgba(240,244,255,0.03);
  border:     1px solid rgba(0,200,150,0.15);
  padding:    2rem;
}

#e7_login_box h2 {
  font-family:  'Instrument Serif', serif;
  font-size:    1.4rem;
  color:        #f0f4ff;
  margin:       0 0 0.5rem;
  font-weight:  400;
}

.e7_subtitle {
  font-family:   'DM Mono', monospace;
  font-size:     0.72rem;
  color:         rgba(240,244,255,0.4);
  margin-bottom: 1.5rem;
  line-height:   1.5;
}

#e7_token_input {
  width:         100%;
  background:    rgba(255,255,255,0.04);
  border:        1px solid rgba(0,200,150,0.2);
  color:         #f0f4ff;
  font-family:   'DM Mono', monospace;
  font-size:     0.78rem;
  padding:       10px 12px;
  outline:       none;
  box-sizing:    border-box;
  margin-bottom: 12px;
  transition:    border-color 0.2s;
}

#e7_token_input:focus { border-color: #00c896; }

#e7_auth_btn {
  width:          100%;
  background:     #00c896;
  color:          #0a0f1e;
  border:         none;
  font-family:    'DM Mono', monospace;
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 1.5px;
  padding:        11px;
  cursor:         pointer;
  text-transform: uppercase;
  transition:     background 0.2s;
}

#e7_auth_btn:hover    { background: #00e6ad; }
#e7_auth_btn:disabled { opacity: 0.4; cursor: not-allowed; }

#e7_auth_error {
  font-family: 'DM Mono', monospace;
  font-size:   0.68rem;
  color:       #ff4444;
  margin-top:  10px;
  min-height:  1em;
}

/* ── Consumer dash ── */
#e7_consumer_dash {
  display:        none;
  flex-direction: column;
  flex:           1;
  overflow-x:     hidden;
  overflow-y:     auto;
}

#e7_consumer_dash.e7_visible {
  display: flex;
}

/* ── Profile strip ── */
#e7_profile_strip {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 20px;
  background:      rgba(240,244,255,0.02);
  border-bottom:   1px solid rgba(0,200,150,0.1);
  flex-shrink:     0;
  flex-wrap:       wrap;
  gap:             8px;
}

#e7_profile_left,
#e7_profile_right {
  display:   flex;
  gap:       20px;
  flex-wrap: wrap;
}

.e7_profile_item  { display: flex; flex-direction: column; gap: 2px; }

.e7_profile_label {
  font-size:      0.58rem;
  color:          rgba(240,244,255,0.3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family:    'DM Mono', monospace;
}

.e7_profile_value {
  font-size:   0.72rem;
  color:       #f0f4ff;
  font-family: 'DM Mono', monospace;
}

.e7_balance_value {
  font-size:   0.9rem;
  color:       #00c896;
  font-family: 'DM Mono', monospace;
  font-weight: 500;
}

.e7_state_active   { color: #00c896 !important; }
.e7_state_inactive { color: #ff4444 !important; }
.e7_state_grace    { color: #ffaa00 !important; }

.e7_stripe_badge {
  font-family:    'DM Mono', monospace;
  font-size:      0.6rem;
  letter-spacing: 1px;
  padding:        2px 6px;
  background:     rgba(240,244,255,0.06);
  color:          rgba(240,244,255,0.4);
}

.e7_stripe_badge.test { border: 1px solid #ffaa00; color: #ffaa00; }
.e7_stripe_badge.live { border: 1px solid #00c896; color: #00c896; }

/* ── Portal tab nav ── */
#e7_portal_tabs {
  display:       flex;
  gap:           0;
  background:    rgba(240,244,255,0.02);
  border-bottom: 1px solid rgba(0,200,150,0.12);
  flex-shrink:   0;
  overflow-x:    auto;
}

.e7_tab_btn {
  background:     transparent;
  border:         none;
  border-bottom:  2px solid transparent;
  color:          rgba(240,244,255,0.35);
  font-family:    'DM Mono', monospace;
  font-size:      0.68rem;
  font-weight:    500;
  letter-spacing: 1.5px;
  padding:        12px 22px;
  cursor:         pointer;
  text-transform: uppercase;
  transition:     color 0.2s, border-color 0.2s;
  white-space:    nowrap;
  flex-shrink:    0;
}

.e7_tab_btn:hover { color: rgba(240,244,255,0.7); }

.e7_tab_btn.active {
  color:               #00c896;
  border-bottom-color: #00c896;
}

/* ── Tab panels ── */
.e7_tab_panel {
  flex:       1;
  overflow-y: auto;
  background: #0a0f1e;
}

.e7_panel_inner {
  max-width: 900px;
  margin:    0 auto;
  padding:   24px 20px 40px;
}

.e7_panel_section {
  margin-bottom: 2rem;
}

.e7_section_heading {
  font-size:      0.62rem;
  color:          rgba(0,200,150,0.7);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom:  12px;
  padding-bottom: 6px;
  border-bottom:  1px solid rgba(0,200,150,0.1);
  font-family:    'DM Mono', monospace;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
}

/* ── Action buttons ── */
.e7_action_btn {
  background:     transparent;
  border:         1px solid rgba(0,200,150,0.3);
  color:          #00c896;
  font-family:    'DM Mono', monospace;
  font-size:      0.68rem;
  font-weight:    500;
  letter-spacing: 1.5px;
  padding:        9px 18px;
  cursor:         pointer;
  text-transform: uppercase;
  transition:     background 0.2s, color 0.2s, border-color 0.2s;
  margin-right:   8px;
  margin-bottom:  8px;
  display:        inline-block;
}

.e7_action_btn:hover {
  background:   rgba(0,200,150,0.1);
  border-color: #00c896;
}

/* ── Placeholder ── */
.e7_placeholder {
  font-size:   0.72rem;
  color:       rgba(240,244,255,0.25);
  font-family: 'DM Mono', monospace;
  padding:     12px 0;
}

/* ── Code block ── */
.e7_code_block {
  background:  rgba(240,244,255,0.03);
  border:      1px solid rgba(0,200,150,0.12);
  color:       #00c896;
  font-family: 'DM Mono', monospace;
  font-size:   0.72rem;
  padding:     14px 16px;
  overflow-x:  auto;
  line-height: 1.7;
  white-space: pre;
  margin:      0;
}

.e7_cbot_desc {
  font-family:   'DM Mono', monospace;
  font-size:     0.72rem;
  color:         rgba(240,244,255,0.45);
  line-height:   1.6;
  margin-bottom: 6px;
}

.e7_cbot_desc code {
  color:      #00c896;
  background: rgba(0,200,150,0.08);
  padding:    1px 5px;
}

/* ═══════════════════════════════════════════════════════════
   PANEL 1 — MY SEALS
   ═══════════════════════════════════════════════════════════ */

.e7_quick_verify_row {
  display:       flex;
  gap:           0;
  margin-bottom: 8px;
}

.e7_quick_verify_row input {
  flex:         1;
  background:   rgba(255,255,255,0.04);
  border:       1px solid rgba(0,200,150,0.2);
  border-right: none;
  color:        #f0f4ff;
  font-family:  'DM Mono', monospace;
  font-size:    0.75rem;
  padding:      9px 12px;
  outline:      none;
  min-width:    0;
  transition:   border-color 0.2s;
}

.e7_quick_verify_row input:focus { border-color: #00c896; }

.e7_quick_verify_row button {
  background:     transparent;
  border:         1px solid rgba(0,200,150,0.4);
  color:          #00c896;
  font-family:    'DM Mono', monospace;
  font-size:      0.65rem;
  font-weight:    500;
  letter-spacing: 1px;
  padding:        9px 16px;
  cursor:         pointer;
  text-transform: uppercase;
  white-space:    nowrap;
  transition:     background 0.2s;
}

.e7_quick_verify_row button:hover { background: rgba(0,200,150,0.1); }

.e7_verify_result {
  font-family: 'DM Mono', monospace;
  font-size:   0.7rem;
  min-height:  1.2em;
  padding:     4px 0;
}

.e7_verify_valid   { color: #00c896; }
.e7_verify_invalid { color: #ff4444; }
.e7_verify_amber   { color: #ffaa00; }

/* Bond rows */
.e7_bond_row {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       10px 0;
  border-bottom: 1px solid rgba(240,244,255,0.05);
  flex-wrap:     wrap;
}

.e7_bond_row:last-child { border-bottom: none; }

.e7_bond_hash {
  font-family: 'DM Mono', monospace;
  font-size:   0.72rem;
  color:       #00c896;
  flex-shrink: 0;
  min-width:   140px;
}

.e7_bond_meta {
  display:   flex;
  gap:       10px;
  flex:      1;
  flex-wrap: wrap;
}

.e7_bond_plane {
  font-size:      0.62rem;
  color:          #0a0f1e;
  background:     #00c896;
  padding:        1px 6px;
  font-family:    'DM Mono', monospace;
  letter-spacing: 1px;
}

.e7_bond_stencil {
  font-size:   0.65rem;
  color:       rgba(240,244,255,0.45);
  font-family: 'DM Mono', monospace;
}

.e7_bond_time {
  font-size:   0.65rem;
  color:       rgba(240,244,255,0.3);
  font-family: 'DM Mono', monospace;
}

.e7_bond_verify_link {
  font-size:       0.62rem;
  color:           #00c896;
  text-decoration: none;
  letter-spacing:  0.5px;
  flex-shrink:     0;
  transition:      color 0.2s;
}

.e7_bond_verify_link:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════
   PANEL 2 — MY FABRIC
   ═══════════════════════════════════════════════════════════ */

.e7_instrument_grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   10px;
  margin-bottom:         8px;
}

@media (max-width: 640px) {
  .e7_instrument_grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
  .e7_instrument_grid { grid-template-columns: 1fr; }
}

.e7_instrument_card {
  background: rgba(240,244,255,0.03);
  border:     1px solid rgba(0,200,150,0.12);
  padding:    14px;
  transition: border-color 0.3s, background 0.3s;
}

.e7_instrument_card.e7_icard_flash {
  animation: e7_icard_flash_anim 0.6s ease forwards;
}

@keyframes e7_icard_flash_anim {
  0%   { background: rgba(0,200,150,0.18); border-color: #00c896; }
  100% { background: rgba(240,244,255,0.03); border-color: rgba(0,200,150,0.12); }
}

.e7_icard_header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   6px;
}

.e7_icard_symbol {
  font-family:    'DM Mono', monospace;
  font-size:      0.78rem;
  color:          #f0f4ff;
  font-weight:    500;
  letter-spacing: 0.5px;
}

.e7_icard_signal {
  font-family:    'DM Mono', monospace;
  font-size:      0.6rem;
  letter-spacing: 1px;
  font-weight:    500;
}

.e7_icard_time {
  font-family:   'DM Mono', monospace;
  font-size:     0.6rem;
  color:         rgba(240,244,255,0.25);
  margin-bottom: 10px;
}

.e7_icard_rail_row {
  display:       flex;
  align-items:   center;
  gap:           6px;
  margin-bottom: 5px;
}

.e7_icard_rail_label {
  font-family: 'DM Mono', monospace;
  font-size:   0.58rem;
  color:       rgba(240,244,255,0.3);
  width:       10px;
  flex-shrink: 0;
}

.e7_icard_rail_track {
  flex:          1;
  height:        3px;
  background:    rgba(240,244,255,0.08);
  border-radius: 2px;
  overflow:      hidden;
}

.e7_icard_rail_fill {
  height:        100%;
  border-radius: 2px;
  transition:    width 0.4s ease;
}

.e7_icard_rail_val {
  font-family: 'DM Mono', monospace;
  font-size:   0.58rem;
  color:       rgba(240,244,255,0.4);
  width:       36px;
  text-align:  right;
  flex-shrink: 0;
}

/* Chain stats */
.e7_chain_stat_row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         8px 0;
  border-bottom:   1px solid rgba(240,244,255,0.05);
}

.e7_chain_stat_row:last-child { border-bottom: none; }

.e7_chain_stat_label {
  font-size:   0.65rem;
  color:       rgba(240,244,255,0.35);
  font-family: 'DM Mono', monospace;
}

.e7_chain_stat_value {
  font-size:   0.72rem;
  color:       #f0f4ff;
  font-family: 'DM Mono', monospace;
}

/* Epochs feed */
#e7_epochs_feed {
  max-height: 280px;
  overflow-y: auto;
}

/* Epoch rows — injected by signals.js _appendEpochRow() */
.e7_epoch_row {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       8px 0;
  border-bottom: 1px solid rgba(240,244,255,0.05);
  font-family:   'DM Mono', monospace;
  font-size:     0.68rem;
  animation:     e7_fadeIn 0.3s ease;
  flex-wrap:     wrap;
}

.e7_epoch_row:last-child { border-bottom: none; }

.e7_epoch_term {
  color:       #00c896;
  flex-shrink: 0;
  min-width:   60px;
}

.e7_epoch_hash {
  color:       rgba(240,244,255,0.5);
  font-size:   0.62rem;
  flex-shrink: 0;
}

.e7_epoch_ticks {
  color:   rgba(240,244,255,0.7);
  flex:    1;
}

.e7_epoch_time {
  color:       rgba(240,244,255,0.3);
  font-size:   0.62rem;
  flex-shrink: 0;
}

@keyframes e7_fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Signals / rail (kept for signals.js compat — hidden by default in new layout) */
.e7_rail_row {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     6px 0;
}

.e7_rail_label {
  font-family: 'DM Mono', monospace;
  font-size:   0.62rem;
  color:       rgba(240,244,255,0.3);
  width:       70px;
  flex-shrink: 0;
}

.e7_rail_track {
  flex:          1;
  height:        4px;
  background:    rgba(240,244,255,0.08);
  border-radius: 2px;
  overflow:      hidden;
}

.e7_rail_fill {
  height:        100%;
  border-radius: 2px;
  transition:    width 0.4s ease, background 0.4s ease;
}

.e7_rail_score {
  font-family: 'DM Mono', monospace;
  font-size:   0.65rem;
  width:       44px;
  text-align:  right;
  flex-shrink: 0;
}

/* Gate badge */
#e7_gate_badge {
  font-family:    'DM Mono', monospace;
  font-size:      0.65rem;
  letter-spacing: 1.5px;
  padding:        4px 10px;
  margin-bottom:  8px;
  display:        inline-block;
}

.e7_gate_accumulating { color: #555; }
.e7_gate_converging   { color: #ffaa00; }
.e7_gate_open         { color: #00c896; }
.e7_gate_abort        { color: #ff4444; }

/* ═══════════════════════════════════════════════════════════
   PANEL 3 — MY APPS
   ═══════════════════════════════════════════════════════════ */

.e7_apps_subtitle {
  font-family:   'DM Mono', monospace;
  font-size:     0.7rem;
  color:         rgba(240,244,255,0.35);
  margin-bottom: 16px;
  line-height:   1.6;
}

.e7_apps_grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   10px;
}

@media (max-width: 640px) {
  .e7_apps_grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
  .e7_apps_grid { grid-template-columns: 1fr; }
}

.e7_app_cat_card {
  background:  rgba(240,244,255,0.03);
  border:      1px solid rgba(0,200,150,0.12);
  padding:     16px;
  cursor:      pointer;
  transition:  border-color 0.2s, background 0.2s;
  position:    relative;
}

.e7_app_cat_card:hover {
  border-color: rgba(0,200,150,0.35);
  background:   rgba(0,200,150,0.04);
}

.e7_app_cat_card.e7_app_cat_open {
  border-color: #00c896;
  background:   rgba(0,200,150,0.06);
  grid-column:  span 3;
}

@media (max-width: 640px) {
  .e7_app_cat_card.e7_app_cat_open { grid-column: span 2; }
}

@media (max-width: 400px) {
  .e7_app_cat_card.e7_app_cat_open { grid-column: span 1; }
}

.e7_app_cat_icon {
  font-family:    'DM Mono', monospace;
  font-size:      0.65rem;
  color:          #00c896;
  background:     rgba(0,200,150,0.12);
  padding:        4px 8px;
  letter-spacing: 1px;
  display:        inline-block;
  margin-bottom:  10px;
}

.e7_app_cat_name {
  font-family:   'DM Mono', monospace;
  font-size:     0.8rem;
  color:         #f0f4ff;
  margin-bottom: 4px;
  font-weight:   500;
}

.e7_app_cat_count {
  font-family: 'DM Mono', monospace;
  font-size:   0.62rem;
  color:       rgba(240,244,255,0.3);
}

.e7_app_cat_expand {
  position:   absolute;
  top:        14px;
  right:      14px;
  font-size:  0.6rem;
  color:      rgba(0,200,150,0.5);
  transition: color 0.2s;
}

.e7_app_cat_card:hover .e7_app_cat_expand { color: #00c896; }

.e7_app_cat_list {
  margin-top:  14px;
  border-top:  1px solid rgba(0,200,150,0.12);
  padding-top: 14px;
}

.e7_app_item {
  padding:       10px 0;
  border-bottom: 1px solid rgba(240,244,255,0.05);
}

.e7_app_item:last-child { border-bottom: none; }

.e7_app_item_header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   8px;
  flex-wrap:       wrap;
  gap:             6px;
}

.e7_app_item_name {
  font-family: 'DM Mono', monospace;
  font-size:   0.75rem;
  color:       #f0f4ff;
}

.e7_app_free_badge {
  font-family:    'DM Mono', monospace;
  font-size:      0.58rem;
  color:          #0a0f1e;
  background:     #00c896;
  padding:        2px 7px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink:    0;
}

.e7_app_install_row {
  display:     flex;
  gap:         8px;
  align-items: center;
  flex-wrap:   wrap;
}

.e7_app_install_cmd {
  flex:        1;
  font-family: 'DM Mono', monospace;
  font-size:   0.65rem;
  color:       rgba(0,200,150,0.8);
  background:  rgba(0,200,150,0.06);
  border:      1px solid rgba(0,200,150,0.12);
  padding:     6px 10px;
  word-break:  break-all;
  min-width:   0;
  display:     block;
}

.e7_app_copy_btn {
  background:     transparent;
  border:         1px solid rgba(0,200,150,0.3);
  color:          #00c896;
  font-family:    'DM Mono', monospace;
  font-size:      0.6rem;
  letter-spacing: 1px;
  padding:        6px 12px;
  cursor:         pointer;
  text-transform: uppercase;
  white-space:    nowrap;
  flex-shrink:    0;
  transition:     background 0.2s;
}

.e7_app_copy_btn:hover { background: rgba(0,200,150,0.1); }

/* ═══════════════════════════════════════════════════════════
   PANEL 4 — MY STENCILS
   ═══════════════════════════════════════════════════════════ */

.e7_stencils_table {
  width:           100%;
  border-collapse: collapse;
  font-family:     'DM Mono', monospace;
  font-size:       0.7rem;
}

.e7_stencils_table th {
  text-align:     left;
  font-size:      0.58rem;
  color:          rgba(240,244,255,0.3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding:        8px 12px 8px 0;
  border-bottom:  1px solid rgba(0,200,150,0.12);
  font-weight:    400;
}

.e7_stencils_table td {
  padding:        10px 12px 10px 0;
  border-bottom:  1px solid rgba(240,244,255,0.05);
  color:          rgba(240,244,255,0.7);
  vertical-align: middle;
}

.e7_stencils_table tr:last-child td { border-bottom: none; }

.e7_stencil_id_cell {
  color:       #00c896 !important;
  font-weight: 500;
}

.e7_status_badge {
  font-size:      0.58rem;
  letter-spacing: 1px;
  padding:        2px 7px;
  text-transform: uppercase;
  font-family:    'DM Mono', monospace;
}

.e7_status_active   { background: rgba(0,200,150,0.15); color: #00c896; }
.e7_status_inactive { background: rgba(255,68,68,0.12);  color: #ff4444; }
.e7_status_pending  { background: rgba(255,170,0,0.12);  color: #ffaa00; }

.e7_stencil_library_scroll {
  max-height: 300px;
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════
   PANEL 5 — MY BILLING
   ═══════════════════════════════════════════════════════════ */

.e7_billing_balance_block {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            6px;
  padding:        20px;
  background:     rgba(0,200,150,0.04);
  border:         1px solid rgba(0,200,150,0.15);
  margin-bottom:  4px;
}

.e7_billing_balance_amount {
  font-family:    'DM Mono', monospace;
  font-size:      2.2rem;
  color:          #00c896;
  font-weight:    500;
  letter-spacing: 0.04em;
  line-height:    1;
}

.e7_billing_balance_label {
  font-family:    'DM Mono', monospace;
  font-size:      0.62rem;
  color:          rgba(240,244,255,0.3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.e7_topup_btn {
  margin-top: 8px;
}

/* Pricing table */
.e7_pricing_table {
  width:           100%;
  border-collapse: collapse;
  font-family:     'DM Mono', monospace;
  font-size:       0.72rem;
}

.e7_pricing_table th {
  text-align:     left;
  font-size:      0.58rem;
  color:          rgba(240,244,255,0.3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding:        8px 16px 8px 0;
  border-bottom:  1px solid rgba(0,200,150,0.12);
  font-weight:    400;
}

.e7_pricing_table td {
  padding:       9px 16px 9px 0;
  border-bottom: 1px solid rgba(240,244,255,0.05);
  color:         rgba(240,244,255,0.65);
}

.e7_pricing_table tr:last-child td { border-bottom: none; }

.e7_pricing_table td:first-child {
  color:       #00c896;
  font-weight: 500;
}

.e7_pricing_table td:last-child { color: #f0f4ff; }

/* Billing history table */
.e7_billing_hist_table {
  width:           100%;
  border-collapse: collapse;
  font-family:     'DM Mono', monospace;
  font-size:       0.68rem;
}

.e7_billing_hist_table th {
  text-align:     left;
  font-size:      0.58rem;
  color:          rgba(240,244,255,0.3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding:        8px 12px 8px 0;
  border-bottom:  1px solid rgba(0,200,150,0.12);
  font-weight:    400;
}

.e7_billing_hist_table td {
  padding:        9px 12px 9px 0;
  border-bottom:  1px solid rgba(240,244,255,0.05);
  color:          rgba(240,244,255,0.6);
  vertical-align: middle;
}

.e7_billing_hist_table tr:last-child td { border-bottom: none; }

.e7_txn_credit { color: #00c896 !important; }
.e7_txn_debit  { color: #ff4444 !important; }

/* ═══════════════════════════════════════════════════════════
   Legacy billing rows (billing.js compat — hidden div)
   ═══════════════════════════════════════════════════════════ */

.e7_billing_row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         8px 0;
  border-bottom:   1px solid rgba(240,244,255,0.05);
  font-family:     'DM Mono', monospace;
  font-size:       0.7rem;
}

.e7_billing_label { color: rgba(240,244,255,0.35); }
.e7_billing_value { color: #f0f4ff; }
.e7_billing_value.green { color: #00c896; }

/* ═══════════════════════════════════════════════════════════
   Chain builder modal styles (panels.css compat)
   ═══════════════════════════════════════════════════════════ */

.e7_chain_progress {
  height:        3px;
  background:    rgba(0,200,150,0.15);
  border-radius: 2px;
  margin-bottom: 20px;
  overflow:      hidden;
}

.e7_chain_progress_fill {
  height:        100%;
  background:    #00c896;
  border-radius: 2px;
  transition:    width 0.4s ease;
}

.e7_chain_header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   16px;
}

.e7_chain_step_num {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           22px;
  height:          22px;
  border-radius:   50%;
  background:      #00c896;
  color:           #0a0f1e;
  font-size:       0.7rem;
  font-weight:     700;
  margin-right:    8px;
  flex-shrink:     0;
}

.e7_chain_step_label {
  font-size:      0.65rem;
  color:          #555;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family:    'DM Mono', monospace;
}

.e7_chain_close_btn {
  background:  transparent;
  border:      none;
  color:       #555;
  font-size:   1rem;
  cursor:      pointer;
  padding:     4px 8px;
  line-height: 1;
  transition:  color 0.2s;
}

.e7_chain_close_btn:hover { color: #fff; }

.e7_chain_title {
  font-size:     1.1rem;
  color:         #f0f4ff;
  margin-bottom: 20px;
  font-family:   'Instrument Serif', serif;
}

.e7_chain_subtitle {
  font-size:     0.75rem;
  color:         #888;
  margin-bottom: 16px;
  font-family:   'DM Mono', monospace;
}

.e7_chain_options_grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   10px;
  margin-bottom:         24px;
}

.e7_chain_option {
  border:      1px solid rgba(0,200,150,0.15);
  background:  rgba(0,200,150,0.03);
  padding:     14px 10px;
  cursor:      pointer;
  text-align:  center;
  transition:  border-color 0.2s, background 0.2s;
  border-radius: 2px;
}

.e7_chain_option:hover {
  border-color: rgba(0,200,150,0.4);
  background:   rgba(0,200,150,0.07);
}

.e7_chain_option_selected {
  border-color: #00c896 !important;
  background:   rgba(0,200,150,0.12) !important;
}

.e7_chain_option_icon  { font-size: 1.4rem; margin-bottom: 6px; }

.e7_chain_option_label {
  font-size:      0.72rem;
  color:          #f0f4ff;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom:  4px;
  font-family:    'DM Mono', monospace;
}

.e7_chain_option_desc {
  font-size:   0.62rem;
  color:       #555;
  font-family: 'DM Mono', monospace;
}

.e7_chain_fields {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  margin-bottom:  24px;
}

.e7_chain_field_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     10px;
}

.e7_chain_field_group {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.e7_chain_label {
  font-size:      0.62rem;
  color:          #555;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family:    'DM Mono', monospace;
}

.e7_chain_input {
  background:  rgba(255,255,255,0.04);
  border:      1px solid rgba(0,200,150,0.2);
  color:       #f0f4ff;
  font-family: 'DM Mono', monospace;
  font-size:   0.72rem;
  padding:     8px 10px;
  outline:     none;
  width:       100%;
  box-sizing:  border-box;
  transition:  border-color 0.2s;
}

.e7_chain_input:focus { border-color: #00c896; }

.e7_chain_textarea {
  resize:     vertical;
  min-height: 72px;
}

select.e7_chain_input option {
  background: #0a0f1e;
  color:      #f0f4ff;
}

.e7_chain_bond_list {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-bottom:  20px;
}

.e7_chain_bond_card {
  display:      flex;
  align-items:  flex-start;
  gap:          12px;
  border:       1px solid rgba(0,200,150,0.15);
  background:   rgba(0,200,150,0.03);
  padding:      12px 14px;
  border-radius: 2px;
}

.e7_chain_bond_num {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           24px;
  height:          24px;
  border-radius:   50%;
  border:          1px solid rgba(0,200,150,0.4);
  color:           #00c896;
  font-size:       0.65rem;
  font-weight:     700;
  flex-shrink:     0;
  margin-top:      2px;
  font-family:     'DM Mono', monospace;
}

.e7_chain_bond_info  { flex: 1; min-width: 0; }

.e7_chain_bond_title {
  font-size:     0.78rem;
  color:         #f0f4ff;
  margin-bottom: 4px;
  font-family:   'DM Mono', monospace;
}

.e7_chain_bond_desc {
  font-size:   0.68rem;
  color:       #888;
  line-height: 1.4;
  font-family: 'DM Mono', monospace;
}

.e7_chain_bond_meta {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            4px;
  flex-shrink:    0;
}

.e7_chain_plane_badge {
  background:     rgba(0,200,150,0.15);
  color:          #00c896;
  font-size:      0.6rem;
  padding:        2px 6px;
  letter-spacing: 1px;
  border-radius:  2px;
  font-family:    'DM Mono', monospace;
}

.e7_chain_plane_label {
  font-size:   0.6rem;
  color:       #555;
  font-family: 'DM Mono', monospace;
}

.e7_chain_bond_cost {
  font-size:   0.7rem;
  color:       #f0f4ff;
  font-family: 'DM Mono', monospace;
}

.e7_chain_verify_url {
  font-size:            0.65rem;
  color:                #00c896;
  cursor:               pointer;
  word-break:           break-all;
  margin-top:           4px;
  text-decoration:      underline;
  text-underline-offset: 2px;
  font-family:          'DM Mono', monospace;
}

.e7_chain_verify_url:hover { color: #fff; }

.e7_chain_total {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  border-top:      1px solid rgba(0,200,150,0.15);
  padding-top:     12px;
  margin-bottom:   20px;
}

.e7_chain_total_label {
  font-size:      0.65rem;
  color:          #555;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family:    'DM Mono', monospace;
}

.e7_chain_total_value {
  font-size:   0.9rem;
  color:       #00c896;
  font-family: 'DM Mono', monospace;
}

.e7_chain_footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             10px;
  margin-top:      4px;
}

.e7_chain_btn_primary {
  background:     #00c896;
  color:          #0a0f1e;
  border:         none;
  font-family:    'DM Mono', monospace;
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 1.5px;
  padding:        10px 20px;
  cursor:         pointer;
  text-transform: uppercase;
  transition:     background 0.2s, opacity 0.2s;
}

.e7_chain_btn_primary:hover    { background: #00e6ad; }
.e7_chain_btn_primary:disabled { opacity: 0.35; cursor: not-allowed; }

.e7_chain_btn_secondary {
  background:     transparent;
  color:          #555;
  border:         1px solid rgba(0,200,150,0.2);
  font-family:    'DM Mono', monospace;
  font-size:      0.7rem;
  letter-spacing: 1.5px;
  padding:        10px 20px;
  cursor:         pointer;
  text-transform: uppercase;
  transition:     color 0.2s, border-color 0.2s;
}

.e7_chain_btn_secondary:hover {
  color:        #f0f4ff;
  border-color: rgba(0,200,150,0.5);
}

.e7_chain_loading {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            16px;
  padding:        32px 0;
}

.e7_chain_loading_text {
  font-size:      0.7rem;
  color:          #555;
  letter-spacing: 1px;
  font-family:    'DM Mono', monospace;
}

.e7_chain_spinner {
  width:        28px;
  height:       28px;
  border:       2px solid rgba(0,200,150,0.15);
  border-top-color: #00c896;
  border-radius: 50%;
  animation:    e7spin 0.8s linear infinite;
}

@keyframes e7spin {
  to { transform: rotate(360deg); }
}