/* Assinaturas e financeiro — paleta azul futurista, claro/escuro */
.subscription-shell{padding:10px 6px 40px;max-width:1350px;margin:0 auto;color:var(--text,#eaf4ff);font-family:inherit}
.subscription-head{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:18px}
.subscription-head h2{font-size:27px;margin:2px 0 6px;letter-spacing:-.5px;color:var(--text,#f3f9ff)}
.subscription-head p{font-size:12px;opacity:.68;margin:0}
.subscription-kicker{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:#58dadd;font-weight:850}
.subscription-card{background:linear-gradient(145deg,rgba(32,78,123,.24),rgba(9,24,43,.79));border:1px solid rgba(84,165,237,.29);border-radius:19px;padding:18px;margin:10px 0;box-shadow:0 8px 30px rgba(0,0,0,.12)}
.subscription-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.subscription-metric{padding:16px;border-radius:15px;background:rgba(27,89,148,.14);border:1px solid rgba(100,181,255,.19)}
.subscription-metric small{font-size:11px;display:block;margin-bottom:9px;opacity:.68}.subscription-metric strong{font-size:23px;color:#eef8ff}
.subscription-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.subscription-form-grid{display:grid;grid-template-columns:repeat(3,minmax(145px,1fr));gap:14px;margin-top:14px}
.subscription-shell label{font-size:12px;font-weight:750;display:block}
.subscription-shell input,.subscription-shell select,.subscription-shell textarea{width:100%;background:rgba(10,24,42,.8);border:1px solid rgba(103,173,243,.38);border-radius:10px;color:#f2f8ff;padding:12px;margin-top:6px;box-sizing:border-box}
.subscription-shell option{color:#151d30;background:#f9fcff}
.subscription-shell button{border:1px solid rgba(61,156,243,.53);background:linear-gradient(112deg,#1465b9,#1598e9);color:white;border-radius:11px;padding:10px 15px;font-size:12px;font-weight:850;cursor:pointer;transition:filter .2s,transform .2s}
.subscription-shell button:hover{filter:brightness(1.13);transform:translateY(-1px)}
.subscription-shell button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.subscription-shell button.subtle{background:rgba(22,67,111,.25);border-color:rgba(85,155,228,.35)}
.subscription-shell button.danger{border-color:#d57d8c;background:rgba(190,59,80,.17)}
.subscription-shell .subscription-price{font-size:25px;font-weight:950;color:#6af2d5;margin:8px 0}
.subscription-shell .subscription-note{font-size:12px;opacity:.73;margin-top:7px;line-height:1.5}
.subscription-shell .subscription-alert{border:1px solid #b58c39;border-radius:12px;padding:12px;background:rgba(160,112,28,.13);font-size:12px;line-height:1.5;margin:10px 0}
.subscription-shell .subscription-success{border-color:#2c9873;background:rgba(35,150,99,.1)}
.subscription-shell .subscription-badge{font-size:10px;background:rgba(23,119,199,.22);padding:6px 9px;border:1px solid rgba(67,156,225,.4);border-radius:99px;white-space:nowrap}
.subscription-shell .subscription-users{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:7px;margin:12px 0}
.subscription-shell .subscription-user{display:flex;gap:8px;align-items:center;background:rgba(14,52,89,.35);padding:9px;border-radius:10px}
.subscription-shell .subscription-user input{width:16px;min-width:16px;margin:0;accent-color:#36bdff}
.subscription-shell .subscription-user span{font-size:12px}
.subscription-shell .subscription-table{width:100%;border-collapse:collapse;font-size:12px}
.subscription-shell .subscription-table td,.subscription-shell .subscription-table th{padding:12px 10px;border-bottom:1px solid rgba(101,174,235,.15);text-align:left}
.subscription-shell .subscription-table th{font-size:10px;opacity:.68;text-transform:uppercase;letter-spacing:.5px}
.subscription-shell .subscription-scroll{overflow-x:auto;max-height:550px;overflow-y:auto}
.subscription-shell .subscription-empty{opacity:.65;font-size:13px;text-align:center;padding:30px}
.subscription-shell .subscription-error{background:rgba(218,67,88,.15);border:1px solid rgba(218,67,88,.45);padding:12px;border-radius:10px;margin:10px 0;font-size:12px}
.subscription-shell .subscription-qr{width:215px;height:215px;border-radius:14px;background:#fff;padding:10px;object-fit:contain;display:block;margin:10px auto}
.subscription-shell .subscription-code{word-break:break-all;line-height:1.6;font-size:11px;padding:12px;border-radius:9px;background:rgba(8,20,40,.65);border:1px solid rgba(95,166,230,.25)}
.subscription-shell .subscription-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px}
.subscription-shell .subscription-progress{border-top:1px solid rgba(125,193,247,.14);padding-top:14px;margin-top:16px}
@media(max-width:740px){.subscription-form-grid{grid-template-columns:1fr}.subscription-head{align-items:flex-start}.subscription-card{padding:13px}.subscription-metric strong{font-size:18px}}
html[data-app-theme="light"] .subscription-card{background:#fff;border-color:#c5d9eb}
html[data-app-theme="light"] .subscription-shell{color:#172a43}
html[data-app-theme="light"] .subscription-metric{background:#f1f7fc}
html[data-app-theme="light"] .subscription-metric strong{color:#20344c}
html[data-app-theme="light"] .subscription-shell input,html[data-app-theme="light"] .subscription-shell select{background:#fff;color:#172a43}
html[data-app-theme="light"] .subscription-shell .subscription-code{background:#f3f7ff;color:#1a2b42}


/* Situacao das cobrancas: sem ambiguidades entre os seis estados. */
.subscription-shell .subscription-badge--proof{color:#ffdc82;background:rgba(193,127,18,.18);border-color:rgba(245,179,52,.6)}
.subscription-shell .subscription-badge--review{color:#9bd9ff;background:rgba(19,118,214,.2);border-color:rgba(64,165,252,.65)}
.subscription-shell .subscription-badge--scheduled{color:#d9c0ff;background:rgba(128,74,212,.19);border-color:rgba(175,123,255,.6)}
.subscription-shell .subscription-badge--approved{color:#85f2c3;background:rgba(17,151,96,.18);border-color:rgba(46,205,140,.65)}
.subscription-shell .subscription-badge--rejected{color:#ffbb8c;background:rgba(211,91,34,.18);border-color:rgba(246,138,78,.67)}
.subscription-shell .subscription-badge--cancelled{color:#ff9eaa;background:rgba(207,49,74,.2);border-color:rgba(246,83,105,.7)}
.subscription-shell .subscription-badge--unknown{color:#dae6f7;background:rgba(113,134,165,.16);border-color:rgba(139,158,189,.4)}

/* Select customizado no mesmo visual azul futurista usado no CRM. */
.subscription-shell .subscription-form-field{display:block;min-width:0;font-size:12px;font-weight:750}
.subscription-shell .subscription-form-field > label{display:block;font-size:12px;font-weight:750}
.subscription-shell .subscription-form-field[hidden]{display:none!important}
.subscription-shell .subscription-form-field > input{
  margin-top:7px;min-height:46px;font-size:13px;font-weight:650;
  background:linear-gradient(140deg,rgba(13,45,75,.94),rgba(9,30,55,.96));
  border:1px solid rgba(94,169,238,.45);border-radius:11px;
  box-shadow:inset 0 1px 0 rgba(132,202,255,.08);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.subscription-shell .subscription-form-field > input:hover{border-color:rgba(85,188,255,.72)}
.subscription-shell .subscription-form-field > input:focus{
  outline:none;border-color:#55c5ff;box-shadow:0 0 0 3px rgba(49,151,238,.17);
}
.subscription-shell .subscription-select{position:relative;margin-top:7px;min-width:0}
.subscription-shell .subscription-select.is-open{z-index:30}
.subscription-shell .subscription-native-select{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:0!important;opacity:0!important;
  border:0!important;pointer-events:none!important;clip-path:inset(50%);
}
.subscription-shell .subscription-select-trigger{
  width:100%;min-height:46px;display:flex;align-items:center;justify-content:space-between;
  text-align:left;gap:12px;padding:11px 14px;
  background:linear-gradient(145deg,#102f53,#0d2543);
  color:#eef7ff;font-size:13px;font-weight:680;
  border:1px solid rgba(89,168,242,.48);border-radius:11px;
  box-shadow:inset 0 1px 0 rgba(148,211,255,.12),0 4px 16px rgba(0,0,0,.1);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.subscription-shell .subscription-select-trigger:hover{
  border-color:rgba(100,196,255,.8);
  box-shadow:inset 0 1px 0 rgba(148,211,255,.18),0 0 18px rgba(27,131,225,.15);
  filter:none;transform:none;
}
.subscription-shell .subscription-select-trigger:focus-visible,
.subscription-shell .subscription-select.is-open .subscription-select-trigger{
  outline:none;border-color:#55c5ff;
  box-shadow:0 0 0 3px rgba(51,146,233,.18),0 0 18px rgba(20,139,255,.12);
}
.subscription-shell .subscription-select-chevron{
  width:9px;height:9px;display:block;flex:none;
  border-right:2px solid #73ceff;border-bottom:2px solid #73ceff;
  transform:rotate(45deg) translateY(-2px);transition:transform .18s ease;
}
.subscription-shell .subscription-select.is-open .subscription-select-chevron{
  transform:rotate(225deg) translateY(-1px);
}
.subscription-shell .subscription-select-menu{
  position:absolute;z-index:50;left:0;right:0;top:calc(100% + 7px);
  display:flex;flex-direction:column;gap:3px;max-height:230px;overflow-y:auto;
  background:linear-gradient(155deg,#0e3158,#091d36);
  border:1px solid rgba(80,174,254,.6);border-radius:12px;padding:6px;
  box-shadow:0 18px 35px rgba(0,9,28,.43),0 0 15px rgba(31,139,240,.15);
}
.subscription-shell .subscription-select-menu[hidden]{display:none!important}
.subscription-shell .subscription-select-option{
  display:block;width:100%;padding:11px 12px;text-align:left;
  background:transparent;border:1px solid transparent;border-radius:8px;
  font-size:12px;font-weight:650;color:#e4f1ff;
  box-shadow:none;transition:background .15s,border-color .15s;
}
.subscription-shell .subscription-select-option:hover,
.subscription-shell .subscription-select-option:focus-visible{
  background:rgba(31,134,229,.24);border-color:rgba(77,172,255,.43);
  outline:none;filter:none;transform:none;
}
.subscription-shell .subscription-select-option.is-selected{
  background:rgba(31,134,229,.18);border-color:rgba(77,172,255,.25);
  color:#86dcff;
}
.subscription-shell .subscription-select-option.is-selected::after{
  content:"✓";float:right;color:#6cdaff;font-weight:900;
}

/* Modo claro: contraste suficiente sem reintroduzir os menus nativos brancos. */
html[data-app-theme="light"] .subscription-shell .subscription-form-field > input{
  background:linear-gradient(145deg,#fff,#f0f7ff);color:#19354e;
  border-color:#a9c9e6;
}
html[data-app-theme="light"] .subscription-shell .subscription-select-trigger{
  background:linear-gradient(145deg,#fff,#edf6ff);color:#19354e;
  border-color:#a9c9e6;box-shadow:inset 0 1px 0 #fff,0 3px 12px rgba(22,88,142,.08);
}
html[data-app-theme="light"] .subscription-shell .subscription-select-menu{
  background:linear-gradient(145deg,#fff,#eef6ff);
  border-color:#a9c9e6;box-shadow:0 16px 30px rgba(20,70,120,.18);
}
html[data-app-theme="light"] .subscription-shell .subscription-select-option{color:#183f60}
html[data-app-theme="light"] .subscription-shell .subscription-select-option:is(:hover,:focus-visible,.is-selected){
  background:#dfedfc;color:#06548c;border-color:#b4d8f8;
}
html[data-app-theme="light"] .subscription-shell .subscription-badge--proof{color:#805004;background:#fff2ce;border-color:#dab260}
html[data-app-theme="light"] .subscription-shell .subscription-badge--review{color:#075498;background:#e6f2ff;border-color:#83b6e8}
html[data-app-theme="light"] .subscription-shell .subscription-badge--scheduled{color:#7140af;background:#f2eaff;border-color:#bfa2e7}
html[data-app-theme="light"] .subscription-shell .subscription-badge--approved{color:#11694b;background:#e0f7eb;border-color:#84c7ab}
html[data-app-theme="light"] .subscription-shell .subscription-badge--rejected{color:#a54716;background:#ffecdf;border-color:#e9a780}
html[data-app-theme="light"] .subscription-shell .subscription-badge--cancelled{color:#ad263e;background:#ffe4e9;border-color:#eda1ae}
@media(max-width:740px){
  .subscription-shell .subscription-select-menu{max-height:190px}
}