:root {
  font-family: "DM Sans", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f0f5fa;
  background: #071b33;
  font-synthesis: none;
  --navy: #071b33;
  --navy-dark: #041224;
  --navy-card: #0d233e;
  --navy-hover: #122f54;
  --navy-input: #06182c;
  --line: #183860;
  --line-light: #224b7e;
  --lime: #b9ef55;
  --lime-hover: #a3dc3d;
  --cyan: #56d8ef;
  --muted: #8fa6be;
  --white: #ffffff;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--navy); color: #f0f5fa; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
[hidden] { display: none !important; }

.brand { display: flex; align-items: center; gap: 12px; font-size: 35px; font-weight: 750; letter-spacing: -1.8px; color: var(--lime); text-decoration: none; }
.brand-dot { color: var(--lime); }
.brand > span { color: #ffffff; }
.brand img { display: block; width: 174px; max-width: 100%; height: auto; }
.login-story .brand img { width: 230px; }

aside { width: 248px; position: fixed; inset: 0 auto 0 0; background: var(--navy-dark); border-right: 1px solid var(--line); padding: 35px 22px; display: flex; flex-direction: column; z-index: 30; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.workspace { display: flex; align-items: center; gap: 10px; padding: 16px 0; margin: 26px 0 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 650; color: #ffffff; }
.workspace > span:last-child { margin-left: auto; color: var(--muted); }
.avatar { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 9px; background: #0c2647; color: var(--lime); font-weight: 700; flex-shrink: 0; border: 1px solid var(--line); }
small { display: block; font-size: 11px; line-height: 1.7; }
.workspace small, .profile small { color: var(--muted); font-weight: 400; }
.nav-label, .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.9px; color: var(--cyan); text-transform: uppercase; font-family: Manrope, sans-serif; }
.nav-label { padding: 0 13px; margin-bottom: 12px; }
nav { display: grid; gap: 7px; }
nav button { display: flex; gap: 13px; text-align: left; align-items: center; border: 0; background: none; padding: 13px; border-radius: 7px; color: var(--muted); font-size: 15px; transition: background .15s, color .15s; }
nav button span { font-size: 13px; font-family: "DM Sans", sans-serif; }
nav button:hover { color: #ffffff; background: #0c2647; }
nav button.active { color: var(--navy); background: var(--lime); font-weight: 700; }
nav button.active .badge { background: rgba(15, 23, 42, 0.25) !important; color: var(--navy) !important; border-color: transparent !important; }
.aside-note { margin-top: auto; padding: 18px 14px; font-size: 11px; font-weight: 600; background: #081d36; border: 1px solid var(--line); border-radius: 8px; color: #d8e6f5; }
.aside-note p { font-weight: 400; color: var(--muted); line-height: 1.8; margin: 6px 0 0; }
.status-dot { display: inline-block; width: 6px; height: 6px; background: var(--lime); border-radius: 50%; margin-right: 6px; }

main { margin-left: 248px; background: var(--navy); min-height: 100vh; }
header { height: 79px; border-bottom: 1px solid var(--line); padding: 0 45px; display: flex; justify-content: space-between; align-items: center; background: #071b33e6; backdrop-filter: blur(10px); font-size: 11px; color: var(--muted); position: sticky; top: 0; z-index: 25; gap: 16px; }
header b { color: #ffffff; font-weight: 600; }
header .muted { margin: 0 15px; color: var(--muted); }
.header-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.host-tag { border: 1px solid var(--line); padding: 8px 12px; border-radius: 7px; color: var(--cyan); background: #0c2340; font-family: Manrope, sans-serif; font-weight: 600; white-space: nowrap; }
.header-user { display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 8px; background: rgba(12, 35, 64, 0.75); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); }
.header-user .avatar { width: 31px; height: 31px; border-radius: 8px; font-size: 12px; background: #081a30; color: var(--lime); border: 1px solid rgba(185, 239, 85, 0.28); }
.header-user-info { display: flex; flex-direction: column; justify-content: center; line-height: 1.25; padding-right: 4px; }
.header-user-info strong { display: block; max-width: 175px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: #ffffff; font-family: Manrope, sans-serif; }
.header-user-info small { font-size: 10px; color: var(--muted); line-height: 1.25; white-space: nowrap; }
.logout-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 7px; border: 1px solid rgba(248, 113, 113, 0.28); background: rgba(239, 68, 68, 0.12); color: #fca5a5; font-family: Manrope, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.2px; cursor: pointer; transition: all 0.18s ease; white-space: nowrap; }
.logout-btn svg { flex-shrink: 0; transition: transform 0.18s ease; }
.logout-btn:hover { background: rgba(239, 68, 68, 0.24); border-color: #f87171; color: #ffffff; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.22); transform: translateY(-1px); }
.logout-btn:hover svg { transform: translateX(2px); }
.content { max-width: 1450px; margin: auto; padding: 42px 45px; }

.page-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.page-heading { margin-bottom: 28px; }
h1 { font-family: Manrope, sans-serif; font-size: 32px; letter-spacing: -1.1px; font-weight: 700; margin: 10px 0; color: #ffffff; }
h2 { font-family: Manrope, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -.35px; margin: 0 0 8px; color: #ffffff; }
h3 { font-family: Manrope, sans-serif; font-size: 15px; font-weight: 600; color: #ffffff; margin: 0 0 6px; }
.muted { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0; }

.primary { background: var(--lime); color: var(--navy); border: 1px solid var(--lime); border-radius: 7px; padding: 12px 19px; font-size: 12px; font-weight: 700; box-shadow: 0 2px 4px #00000030; transition: all .15s; font-family: Manrope, sans-serif; }
.primary:hover { background: var(--lime-hover); border-color: var(--lime-hover); transform: translateY(-1px); }
.secondary { border: 1px solid var(--line); background: var(--navy-card); color: #d2e4f5; padding: 11px 16px; border-radius: 6px; font-size: 12px; transition: all .15s; font-family: Manrope, sans-serif; }
.secondary:hover { background: var(--navy-hover); color: #ffffff; border-color: var(--cyan); }
.danger { background: #dc2626; color: white; border: 1px solid #dc2626; border-radius: 7px; padding: 12px 19px; font-size: 12px; font-weight: 700; transition: all .15s; font-family: Manrope, sans-serif; }
.danger:hover { background: #b91c1c; }

.notice { padding: 14px 18px; background: #0f2b48; border: 1px solid #1a4572; color: #9ec5ee; font-size: 12px; line-height: 1.7; border-radius: 8px; margin-bottom: 24px; }
.notice.ready { background: #0c352a; color: var(--lime); border-color: #185946; }
.notice.warning { background: #38240a; border-color: #7c4f12; color: #fed7aa; }
.notice.warning strong { color: #fef08a; }
.notice.warning a { color: var(--cyan); text-decoration: underline; font-weight: 700; }
.notice.warning a:hover { color: #ffffff; }
.error-notice { background: #381616; border-color: #662525; color: #fca5a5; }
#checkout-alert { margin: 16px 0; }

.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.resource-card { background: var(--navy-card); border: 1px solid var(--line); border-radius: 10px; padding: 23px; box-shadow: 0 8px 24px #00000028; }
.card-label { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; font-family: Manrope, sans-serif; font-weight: 600; }
.card-icon { background: #102e52; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: var(--lime); font-size: 18px; }
.resource-value { font-family: Manrope, sans-serif; font-size: 30px; font-weight: 700; margin: 17px 0 14px; letter-spacing: -1px; color: #ffffff; }
.resource-value small { display: inline; font-size: 13px; letter-spacing: 0; color: var(--muted); font-weight: 400; }
.track { height: 6px; border-radius: 5px; background: #06172a; overflow: hidden; }
.track > div { height: 100%; background: var(--lime); border-radius: 5px; }
.resource-foot { display: flex; justify-content: space-between; margin-top: 12px; font-size: 11px; color: var(--muted); }
.resource-foot b { color: var(--cyan); font-weight: 600; }
.section-heading { margin-bottom: 20px; }
.count { font-size: 10px; vertical-align: middle; padding: 3px 8px; background: #102e52; color: var(--cyan); border-radius: 5px; margin-left: 5px; font-weight: 700; }
.search { max-width: 215px !important; margin: 0 !important; background: var(--navy-input) !important; border-color: var(--line) !important; color: #ffffff !important; }

.table-wrap { border: 1px solid var(--line); border-radius: 10px; background: var(--navy-card); overflow-x: auto; box-shadow: 0 8px 24px #00000020; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
th { font-family: Manrope, sans-serif; font-size: 10px; letter-spacing: 1.2px; color: var(--muted); background: #081a30; font-weight: 700; padding: 17px 20px; border-bottom: 1px solid var(--line); text-transform: uppercase; }
td { font-size: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); color: #dce7f2; }
td strong { font-size: 13px; color: #ffffff; font-family: Manrope, sans-serif; }
td small { color: var(--muted); margin-top: 4px; }
.badge { color: var(--lime); background: #0d382c; border: 1px solid #17604b; border-radius: 20px; padding: 5px 10px; font-size: 10px; font-weight: 600; display: inline-block; }
.badge.stopped { color: #fde047; background: #382c14; border: 1px solid #634d21; }
.actions { display: flex; gap: 6px; }
.actions button, .action-btn { font-size: 11px; padding: 7px 11px; background: #081a30; border: 1px solid var(--line); border-radius: 5px; color: #c4d7eb; transition: all .15s; font-family: "DM Sans", sans-serif; cursor: pointer; }
.actions button:hover, .action-btn:hover { background: var(--navy-hover); border-color: var(--cyan); color: #ffffff; }
.actions button:last-child { color: #f87171; border-color: #5c2626; }
.actions button:last-child:hover { background: #3e1515; }
.actions .terminal-action { color: var(--cyan); border-color: #1a4b75; }
.actions .terminal-action:hover { border-color: var(--cyan); background: #0e3357; }

.empty { text-align: center; padding: 46px 16px; }
.empty > div { font-size: 30px; color: var(--cyan); margin-bottom: 15px; }
.empty p { font-size: 12px; color: var(--muted); margin-bottom: 23px; }
.bottom-note { font-size: 11px; color: var(--muted); margin-top: 17px; line-height: 1.6; }
footer { margin-top: 65px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; letter-spacing: 1.4px; }
footer span { letter-spacing: 0; }

.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hub-search-box { background: var(--navy-card); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; margin-bottom: 24px; box-shadow: 0 4px 16px #00000020; }
.hub-search-input-wrap { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hub-search-input-wrap input { margin: 0; flex: 1; min-width: 240px; }
.badge.badge-official { color: #38bdf8; background: #0c2d48; border: 1px solid #1d4ed8; }
.badge.badge-stars { color: #fde047; background: #2d2611; border: 1px solid #854d0e; }
.image-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.image-card { background: var(--navy-card); border: 1px solid var(--line); padding: 28px; border-radius: 10px; color: #ffffff; box-shadow: 0 8px 24px #00000020; display: flex; flex-direction: column; justify-content: space-between; }
.image-logo { width: 46px; height: 46px; border-radius: 12px; background: #07192f; color: var(--lime); display: grid; place-items: center; font-size: 24px; font-weight: 700; margin-bottom: 24px; border: 1px solid var(--line); }
.image-card p { min-height: 35px; color: var(--muted); }
.image-card code { display: block; color: var(--cyan); background: #06182c; border: 1px solid var(--line); border-radius: 5px; padding: 8px 10px; font-size: 11px; margin: 20px 0; }
.settings-card { background: var(--navy-card); border: 1px solid var(--line); border-radius: 12px; padding: 32px; max-width: 100%; width: 100%; box-sizing: border-box; color: #ffffff; box-shadow: 0 8px 24px #00000028; }
.settings-card h2 { margin-top: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
label { display: block; font-size: 12px; color: #cddcee; font-weight: 600; font-family: Manrope, sans-serif; }
input, select, textarea { display: block; width: 100%; border: 1px solid var(--line); background: var(--navy-input); padding: 12px; border-radius: 6px; color: #ffffff; margin: 9px 0 20px; font-size: 13px; transition: border-color .15s, outline .15s; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cyan); border-color: var(--cyan); }
.hint { font-size: 11px; line-height: 1.8; color: var(--muted); }
.toggle { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: #ffffff; }
.toggle input { width: 16px; margin: 0; accent-color: var(--lime); }
#image-toggles { margin-bottom: 24px; }

.input-password-wrapper { position: relative; display: flex; align-items: center; width: 100%; }
.input-password-wrapper input { margin: 9px 0 20px; padding-right: 44px; font-family: monospace, sans-serif; font-size: 12.5px; }
.input-password-wrapper .btn-toggle-password { position: absolute; right: 10px; top: calc(50% - 5px); transform: translateY(-50%); background: none; border: none; font-size: 16px; cursor: pointer; padding: 4px 6px; line-height: 1; border-radius: 4px; color: var(--muted); display: flex; align-items: center; justify-content: center; opacity: .8; transition: opacity .15s, transform .1s; }
.input-password-wrapper .btn-toggle-password:hover { opacity: 1; transform: translateY(-50%) scale(1.15); }

dialog { border: 1px solid var(--line-light); border-radius: 14px; padding: 30px; width: 530px; max-width: 94vw; color: #ffffff; background: #0a213c; box-shadow: 0 30px 100px #000000b0; }
dialog::backdrop { background: #030d1acc; backdrop-filter: blur(6px); }
dialog h2 { margin-top: 10px; color: #ffffff; }
.icon-button { border: 0; background: none; font-size: 26px; color: var(--muted); cursor: pointer; }
.icon-button:hover { color: #ffffff; }
.wide { width: 100%; }

.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--navy); }
.login-story { background: var(--navy-dark); border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; padding: 48px 10%; position: relative; overflow: hidden; color: #ffffff; }
.login-story h1 { font-family: Manrope, sans-serif; font-size: clamp(36px, 4vw, 62px); line-height: 1.12; margin: 24px 0; color: #ffffff; }
.login-story h1 span { color: var(--lime); }
.login-story p { max-width: 400px; font-size: 14px; color: var(--muted); line-height: 1.8; }
.login-story small { letter-spacing: 2px; color: var(--cyan); font-weight: 700; font-family: Manrope, sans-serif; }
.orb { font-size: 170px; color: #0c2b50; line-height: 1.5; text-shadow: 25px 20px 0 #071b33; text-align: right; margin-right: 40px; }
.login-story .orb { color: #0f3562; text-shadow: 25px 20px 0 #071b33; }
.login-form { width: 100%; max-width: 430px; padding: 80px 25px; margin: auto; color: #ffffff; }
.login-form h2 { font-family: Manrope, sans-serif; font-size: 32px; line-height: 1.25; margin: 20px 0 15px; color: #ffffff; }
.google { display: flex; align-items: center; gap: 16px; text-decoration: none; color: #ffffff; border: 1px solid var(--line); background: var(--navy-card); border-radius: 7px; padding: 14px; font-size: 12px; margin: 30px 0; transition: all .15s; font-weight: 600; }
.google:hover { background: var(--navy-hover); border-color: var(--cyan); }
.google b { color: #4285f4; font-size: 18px; }
.google span { margin-left: auto; color: var(--muted); }
.divider { display: flex; align-items: center; gap: 13px; color: var(--muted); font-size: 10px; margin-bottom: 25px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; }
.divider:before, .divider:after { content: ""; height: 1px; background: var(--line); flex: 1; }
.login-form > small { margin-top: 25px; font-size: 11px; color: var(--muted); }

#toast { position: fixed; right: 25px; top: 20px; z-index: 2147483647; background: #0c352a; border: 1px solid var(--lime); color: #ffffff; padding: 15px 22px; border-radius: 8px; box-shadow: 0 10px 30px #00000080; font-size: 13px; max-width: 500px; display: none; pointer-events: auto; }
#toast.visible { display: block; }

.button-group { display: flex; gap: 10px; flex-wrap: wrap; }
.image-fields { grid-template-columns: 2fr 1fr; }
.image-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.image-card .image-status { font-size: 11px; color: var(--lime); font-weight: 600; }
.image-card .image-status.off { color: #fde047; }
.access-button { border: 0; background: none; color: var(--cyan); padding: 6px 0; text-align: left; font-size: 12px; font-weight: 600; cursor: pointer; transition: color .15s; text-decoration: none; display: inline-block; }
.access-button:hover { color: var(--lime); text-decoration: underline; }
.connection-list { margin: 0; display: grid; gap: 18px; }
.connection-list dt { font-size: 11px; color: var(--muted); margin-bottom: 6px; font-family: Manrope, sans-serif; font-weight: 600; }
.connection-list dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; color: #ffffff; }
.endpoint { padding: 12px; background: #06182c; border: 1px solid var(--line); border-radius: 6px; margin: 8px 0; color: #d6e6f5; }
.endpoint code { display: block; margin-bottom: 5px; font-size: 13px; color: var(--cyan); }
.command { display: block; white-space: pre-wrap; overflow-wrap: anywhere; background: #06182c; border: 1px solid var(--line); border-radius: 7px; padding: 12px; font-size: 12px; color: #d6e6f5; }
.image-card.disabled { opacity: .75; }
#image-form .toggle { margin-bottom: 20px; }
#images > .section-heading { align-items: flex-start; }
.refresh-button { margin-left: 8px; }

.wide-dialog { width: 850px; }
.monitor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.metric { background: #07192f; border: 1px solid var(--line); border-radius: 9px; padding: 18px; color: #ffffff; }
.metric strong { font-family: Manrope, sans-serif; font-size: 24px; display: block; margin: 8px 0; color: #ffffff; }
.metric small { color: var(--muted); }
#cpu-chart { width: 100%; max-width: 100%; height: 180px; display: block; box-sizing: border-box; background: #051426; border: 1px solid var(--line); border-radius: 8px; }
.terminal-dialog { width: 1000px; }
.terminal-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; font-size: 12px; }
.terminal-toolbar span { margin-right: auto; color: var(--muted); }
#terminal-screen { height: 430px; color: #f1f5f9; background: #040e1b; border: 1px solid var(--line); padding: 12px; border-radius: 8px; overflow: hidden; }
#terminal-screen .xterm { height: 100%; }
.terminal-pane { height: 100%; }
.terminal-tabs { display: flex; gap: 8px; margin-bottom: 15px; }
.terminal-tabs button[aria-pressed="true"] { background: var(--lime); color: var(--navy); border-color: var(--lime); font-weight: 700; }
.logs-viewer { height: 420px; overflow-y: auto; background: #040e1b; color: #a5f3fc; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; line-height: 1.5; padding: 14px; border-radius: 8px; border: 1px solid var(--line); white-space: pre-wrap; word-break: break-all; margin: 0; }

#client-context { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
#clients .table-wrap { overflow-x: auto; }
#clients td { vertical-align: top; }
#clients .access-button { white-space: nowrap; }

#business-metrics { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 12px; }
#business-metrics .resource-value { font-size: clamp(24px, 2.2vw, 34px); }
.billing-actions { margin: 16px 0; flex-wrap: wrap; }
#pagbank-webhook { display: block; overflow-wrap: anywhere; white-space: normal; background: #06182c; border: 1px solid var(--line); border-radius: 6px; padding: 10px; color: var(--cyan); }
#cancel-dialog { max-width: 540px; }

.overview-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 36px; }
.overview-summary .resource-value { font-size: 26px; margin: 12px 0 8px; }
.overview-actions { margin: 28px 0 8px; flex-wrap: wrap; }
.overview-empty { border: 1px solid var(--line); border-radius: 10px; background: var(--navy-card); }

.stack-editor, .stack-card { background: var(--navy-card); border: 1px solid var(--line); border-radius: 14px; padding: 26px; margin: 20px 0; color: #ffffff; box-shadow: 0 8px 24px #00000028; }
.stack-editor textarea { display: block; width: 100%; box-sizing: border-box; font: 13.5px/1.65 'JetBrains Mono', Consolas, monospace; padding: 16px; border: 1px solid var(--line); background: #040d1a; color: #a5f3fc; border-radius: 8px; resize: vertical; tab-size: 2; }
.stack-editor details { margin: 18px 0; }
.stack-editor summary { cursor: pointer; color: var(--cyan); font-weight: 600; }
.stack-editor .button-group { flex-wrap: wrap; }
.stack-card .actions { flex-wrap: wrap; }

/* Stacks & Compose Enhanced UI */
.stack-empty-card {
  border: 1px dashed var(--line);
  background: rgba(15, 23, 42, 0.4);
  border-radius: 12px;
  padding: 36px 20px;
  text-align: center;
  margin-bottom: 24px;
}

.stack-card {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.8) 0%, rgba(8, 20, 38, 0.95) 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s, border-color 0.2s;
}

.stack-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
}

.stack-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.stack-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stack-icon {
  font-size: 22px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 7px 9px;
  border-radius: 10px;
  line-height: 1;
}

.stack-name {
  margin: 0 0 2px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #f1f5f9;
}

.stack-resources-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}

.stack-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.stack-pill.cpu { color: #93c5fa; border-color: rgba(147, 197, 253, 0.25); }
.stack-pill.memory { color: #a7f3d0; border-color: rgba(167, 243, 208, 0.25); }
.stack-pill.disk { color: #fde047; border-color: rgba(253, 224, 71, 0.25); }

.stack-services-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 0.85rem;
  color: #94a3b8;
}

.stack-service-tag {
  background: #091829;
  border: 1px solid rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 0.78rem;
  font-family: monospace;
}

.stack-actions-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.stack-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.stack-editor-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stack-editor-icon {
  font-size: 26px;
  line-height: 1;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 10px;
  border-radius: 12px;
}

.stack-editor-title-wrap h3 {
  margin: 0 0 4px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
}

.stack-name-group {
  margin-bottom: 22px;
}

.input-with-prefix {
  display: flex;
  align-items: stretch;
  margin-top: 8px;
}

.input-prefix {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: #091c33;
  border: 1px solid var(--line);
  border-right: none;
  border-radius: 6px 0 0 6px;
  color: #64748b;
  font-family: monospace;
  font-size: 13px;
  font-weight: 600;
  user-select: none;
}

.input-with-prefix input {
  margin: 0;
  border-radius: 0 6px 6px 0;
}

.stack-defaults-box {
  background: rgba(8, 20, 36, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 24px;
}

.stack-defaults-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.stack-defaults-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #e2e8f0;
}

.stack-defaults-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .stack-defaults-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .stack-defaults-grid {
    grid-template-columns: 1fr;
  }
}

.default-lbl-title {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 6px;
}

.stack-default-item input {
  margin: 0;
}

.input-unit-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-unit-wrap input {
  padding-right: 48px;
}

.input-unit {
  position: absolute;
  right: 12px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  pointer-events: none;
}

.compose-editor-frame {
  background: #040d1a;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 10px;
  overflow: hidden;
  margin: 8px 0 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.compose-editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #061527;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.compose-file-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: #38bdf8;
}

.compose-topbar-actions {
  display: flex;
  gap: 8px;
}

.compose-small-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.compose-small-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.compose-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.65;
  padding: 16px;
  border: none !important;
  background: transparent !important;
  color: #a5f3fc;
  border-radius: 0;
  margin: 0 !important;
  resize: vertical;
  tab-size: 2;
  outline: none !important;
}

.stack-docs-collapsible {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 20px 0;
  transition: border-color 0.2s;
}

.stack-docs-collapsible[open] {
  border-color: rgba(56, 189, 248, 0.3);
  background: rgba(15, 23, 42, 0.75);
}

.stack-docs-collapsible summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  color: #38bdf8;
  user-select: none;
}

.stack-docs-content {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.6;
}

.stack-docs-content p {
  margin: 0 0 10px;
}

.stack-docs-keys {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}

.stack-key-badge {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #7dd3fc;
  font-family: monospace;
  font-size: 11.5px;
  padding: 2px 7px;
  border-radius: 4px;
}

@media (min-width: 1500px) {
  .content { padding-top: 55px; }
}
@media (max-width: 1100px) {
  .overview-summary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  aside { width: 205px; padding: 25px 15px; }
  main { margin-left: 205px; }
  .content { padding: 30px 23px; }
  header { padding: 0 23px; }
  .resource-grid, .catalog-grid { gap: 12px; }
  .resource-card { padding: 16px; }
  .resource-value { font-size: 25px; }
  .login-story { padding: 35px 8%; }
}
@media (max-width: 720px) {
  aside { position: static; width: auto; padding: 16px; display: block; border-bottom: 1px solid var(--line); }
  aside .brand { font-size: 25px; }
  .brand img { width: 150px; }
  .workspace, .nav-label, .aside-note { display: none; }
  nav { display: flex; overflow-x: auto; margin-top: 16px; gap: 3px; }
  nav button { flex-shrink: 0; padding: 9px; font-size: 12px; }
  nav button span { font-size: 11px; }
  .header-user-info, .host-tag { display: none; }
  .header-user { padding: 4px; background: transparent; border: 0; box-shadow: none; }
  .header-user .avatar { display: none; }
  main { margin: 0; }
  header { height: 58px; padding: 0 16px; }
  .content { padding: 25px 16px; }
  .page-heading { align-items: flex-start; }
  h1 { font-size: 27px; }
  .page-heading > .primary { padding: 10px; font-size: 11px; white-space: nowrap; margin-top: 22px; }
  .resource-grid { grid-template-columns: 1fr; }
  .resource-card { padding: 18px; }
  .resource-value { margin: 8px 0; }
  .catalog-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: flex-start; }
  .search { max-width: 145px !important; }
  .form-grid { gap: 10px; }
  .settings-card { padding: 22px; }
  .login { grid-template-columns: 1fr; }
  .login-story { padding: 25px; }
  .login-story > div, .login-story > small { display: none; }
  .login-form { padding: 40px 25px; }
  .login-form h2 { font-size: 29px; }
  footer { margin-top: 35px; }
  footer span { display: none; }
  .button-group { gap: 6px; margin-top: 16px; }
  #images > .section-heading { display: block; }
}
@media (max-width: 600px) {
  .monitor-grid { grid-template-columns: 1fr 1fr; }
  .metric { padding: 12px; }
  .metric strong { font-size: 20px; }
  .terminal-toolbar { flex-wrap: wrap; }
  #terminal-screen { height: 380px; }
  .overview-summary { grid-template-columns: 1fr; }
}

body.modal-open { overflow: hidden !important; }

/* Checkout Modal Moderno & Responsivo */
.checkout-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.checkout-modal-overlay[hidden] {
  display: none !important;
}
.checkout-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 10, 22, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1;
  animation: checkoutFadeIn 0.2s ease-out;
}
.checkout-modal-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 980px;
  background: #09203a;
  border: 1px solid var(--line-light);
  border-radius: 16px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: #f0f5fa;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  animation: checkoutSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.checkout-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  border-bottom: 1px solid var(--line);
  background: #05162a;
  flex-shrink: 0;
}
.checkout-modal-header h2 {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}
.checkout-modal-body {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}
.checkout-layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  width: 100%;
}
.checkout-plan-summary {
  position: static !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.checkout-form-container {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  min-height: auto !important;
}

/* Cartão Virtual Interativo */
.virtual-card {
  background: linear-gradient(135deg, #10345d 0%, #091f38 60%, #041122 100%);
  border: 1px solid rgba(86, 216, 239, 0.35);
  border-radius: 14px;
  padding: 20px;
  color: #ffffff;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  position: relative;
  margin-bottom: 18px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.virtual-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -5px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.virtual-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.virtual-card-chip {
  width: 38px;
  height: 28px;
  background: linear-gradient(135deg, #d4af37 0%, #f3e08a 50%, #aa820a 100%);
  border-radius: 6px;
  border: 1px solid #7c5e00;
  position: relative;
}
.virtual-card-chip::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 3px;
}
.virtual-card-brand {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--lime);
  background: rgba(185, 239, 85, 0.12);
  border: 1px solid rgba(185, 239, 85, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
.virtual-card-number {
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffffff;
  margin-bottom: 18px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.virtual-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.virtual-card-holder small,
.virtual-card-expiry small {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--muted);
  display: block;
  margin-bottom: 2px;
}
.virtual-card-val {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Resumo do Plano */
.plan-summary-card {
  background: #06182c;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
.plan-summary-card h4 {
  margin: 0 0 10px;
  font-size: 13px;
  font-family: Manrope, sans-serif;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.plan-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 0;
  font-size: 12px;
  color: #cddcee;
  border-bottom: 1px dashed #14355a;
}
.plan-summary-row span {
  flex-shrink: 0;
}
.plan-summary-row strong {
  color: #ffffff;
  font-family: Manrope, sans-serif;
  font-size: 12px;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.plan-summary-row.total {
  padding-top: 12px;
  border-bottom: 0;
}
.plan-summary-row.total span {
  font-weight: 700;
  font-size: 13px;
  color: #ffffff;
}
.plan-summary-row.total strong {
  color: var(--lime);
  font-size: 18px;
}
.plan-summary-divider {
  height: 1px;
  background: var(--line);
  margin: 10px 0;
}
.plan-summary-hint {
  font-size: 11px;
  color: var(--muted);
  margin: 10px 0 0;
  line-height: 1.5;
}
.checkout-security-box {
  margin-top: 14px;
  padding: 12px;
  background: #041224;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.security-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 4px;
}

/* Formulário do Checkout */
.checkout-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
.checkout-section-title .step-num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: var(--cyan);
  color: var(--navy-dark);
  font-weight: 800;
  font-size: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.checkout-section-title h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  font-family: Manrope, sans-serif;
  letter-spacing: 0.3px;
}
.checkout-form-group {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.checkout-form-group label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #cddcee;
  margin-bottom: 6px;
  font-family: Manrope, sans-serif;
}

/* Reset essencial das margens globais de input/select no modal (exceto checkbox e radio) */
.checkout-modal-card input:not([type="checkbox"]):not([type="radio"]),
.checkout-modal-card select {
  margin: 0 !important;
  width: 100% !important;
  height: 42px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  background: var(--navy-input) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
}
.checkout-modal-card input:not([type="checkbox"]):not([type="radio"]):focus,
.checkout-modal-card select:focus {
  border-color: var(--cyan) !important;
  outline: 2px solid var(--cyan) !important;
}

.checkout-consent-label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 1.25rem !important;
  margin-bottom: 0.5rem !important;
  cursor: pointer !important;
  color: #ffffff !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  user-select: none !important;
}
.checkout-modal-card input[type="checkbox"],
.checkout-consent-label input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  accent-color: var(--lime) !important;
  flex-shrink: 0 !important;
}
.checkout-form-row {
  display: grid;
  gap: 12px;
  margin-bottom: 0;
  width: 100%;
}
.checkout-form-row.two-cols {
  grid-template-columns: 1fr 1fr;
}
.checkout-form-row.address-row {
  grid-template-columns: 3fr 1fr;
}
.checkout-form-row.three-cols {
  grid-template-columns: 1.5fr 2fr 0.8fr;
}
.card-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.card-input-wrapper input {
  padding-right: 80px !important;
}
.card-brand-badge {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  background: #102e52;
  color: var(--lime);
  letter-spacing: 0.5px;
  pointer-events: none;
  border: 1px solid #1f4a7c;
  line-height: 1.2;
}
.checkout-modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.btn-large {
  padding: 12px 24px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.success-icon {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  background: rgba(185, 239, 85, 0.15);
  border: 2px solid var(--lime);
  color: var(--lime);
  font-size: 38px;
  font-weight: 900;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
}

@keyframes checkoutSlideUp {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes checkoutFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 840px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }
  .checkout-form-row.two-cols,
  .checkout-form-row.address-row,
  .checkout-form-row.three-cols {
    grid-template-columns: 1fr;
  }
  .checkout-modal-card {
    max-height: 96vh;
  }
  .checkout-modal-body {
    padding: 18px 16px;
  }
}

/* Access & Create Full-Workspace Dialogs (Topo e Menu Visíveis) */
#create-dialog,
#access-dialog,
dialog.workspace-dialog {
  position: fixed;
  top: calc(79px + 14px);
  left: calc(248px + 18px);
  right: 18px;
  bottom: 14px;
  width: calc(100vw - 248px - 36px);
  max-width: none;
  height: calc(100vh - 79px - 28px);
  max-height: calc(100vh - 79px - 28px);
  margin: 0;
  padding: 24px 30px;
  z-index: 20;
  overflow-y: auto;
  box-sizing: border-box;
  background: #081d35;
  border: 1px solid var(--line-light);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 0 100vmax rgba(3, 13, 26, 0.78);
}

#create-dialog::backdrop,
#access-dialog::backdrop,
dialog.workspace-dialog::backdrop {
  top: 79px;
  left: 248px;
  right: 0;
  bottom: 0;
  background: rgba(3, 13, 26, 0.78);
  backdrop-filter: blur(4px);
}

@media (max-width: 1000px) {
  #create-dialog,
  #access-dialog,
  dialog.workspace-dialog {
    left: calc(205px + 14px);
    right: 14px;
    width: calc(100vw - 205px - 28px);
    padding: 20px 22px;
  }
  #create-dialog::backdrop,
  #access-dialog::backdrop,
  dialog.workspace-dialog::backdrop {
    left: 205px;
  }
}

@media (max-width: 720px) {
  #create-dialog,
  #access-dialog,
  dialog.workspace-dialog {
    top: calc(55px + 10px);
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
    height: calc(100vh - 55px - 20px);
    max-height: calc(100vh - 55px - 20px);
    padding: 16px;
  }
  #create-dialog::backdrop,
  #access-dialog::backdrop,
  dialog.workspace-dialog::backdrop {
    top: 55px;
    left: 0;
  }
}

.workspace-dialog-header {
  position: sticky;
  top: -24px;
  margin: -24px -30px 20px -30px;
  padding: 18px 30px;
  background: rgba(6, 22, 42, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  z-index: 5;
}

@media (max-width: 1000px) {
  .workspace-dialog-header {
    top: -20px;
    margin: -20px -22px 18px -22px;
    padding: 16px 22px;
  }
}

@media (max-width: 720px) {
  .workspace-dialog-header {
    top: -16px;
    margin: -16px -16px 16px -16px;
    padding: 14px 16px;
  }
}

.workspace-dialog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

@media (max-width: 1120px) {
  .workspace-dialog-grid {
    grid-template-columns: 1fr;
  }
}

.workspace-dialog-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.workspace-panel-card {
  background: rgba(11, 32, 58, 0.78);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.workspace-panel-title {
  font-family: Manrope, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.workspace-dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Environment Variables Editor */
.env-editor-card {
  display: flex;
  flex-direction: column;
}

.env-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.env-editor-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.env-btn-sm {
  padding: 6px 12px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  white-space: nowrap;
}

.env-btn-add {
  border-color: rgba(86, 216, 239, 0.4) !important;
  color: var(--cyan) !important;
  background: rgba(86, 216, 239, 0.08) !important;
}

.env-btn-add:hover {
  background: rgba(86, 216, 239, 0.18) !important;
  color: #ffffff !important;
}

.env-bulk-box {
  background: #041020;
  border: 1px solid rgba(86, 216, 239, 0.35);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.env-bulk-box textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  margin: 8px 0 10px 0;
  background: #06182c;
  color: #a5f3fc;
}

.env-rows-header {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.3fr) 36px;
  gap: 10px;
  padding: 0 4px 6px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
  font-family: Manrope, sans-serif;
}

.env-rows-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 2px;
}

.env-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.3fr) 36px;
  gap: 10px;
  align-items: center;
  background: rgba(6, 24, 44, 0.75);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  transition: border-color 0.15s ease;
}

.env-row:focus-within {
  border-color: var(--cyan);
}

.env-row input {
  margin: 0 !important;
  padding: 8px 10px !important;
  font-size: 12.5px !important;
  border-radius: 6px !important;
  background: #041122 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.env-row input.env-key-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
  color: var(--cyan);
}

.env-row input.env-val-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #f1f5f9;
  padding-right: 32px !important;
}

.env-val-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.env-val-mask-btn {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
  border-radius: 4px;
}

.env-val-mask-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}

.env-row-remove-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.08);
  color: #f87171;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.env-row-remove-btn:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: #ef4444;
  color: #ffffff;
}

.env-empty-state {
  text-align: center;
  padding: 20px 14px;
  background: rgba(4, 16, 32, 0.45);
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
}

.env-restart-banner {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, rgba(217, 119, 6, 0.08) 100%);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fde68a;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-restart-container {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border: 1px solid #fbbf24 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  padding: 9px 16px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.btn-restart-container:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
}

.access-section {
  margin-bottom: 20px;
}

.access-section:last-child {
  margin-bottom: 0;
}

.access-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: Manrope, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px;
}

.access-card {
  background: rgba(8, 28, 51, 0.7);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.access-card:hover {
  border-color: var(--line-light);
}

.access-card-subdomain {
  background: rgba(56, 189, 248, 0.05);
  border-color: rgba(56, 189, 248, 0.22);
}

.access-card-custom {
  background: rgba(185, 239, 85, 0.05);
  border-color: rgba(185, 239, 85, 0.25);
}

.access-card-ssh {
  background: rgba(14, 165, 233, 0.05);
  border-color: rgba(14, 165, 233, 0.22);
}

.access-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.access-card-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-family: Manrope, sans-serif;
}

.access-url-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.access-url-link {
  font-size: 14px;
  font-weight: 600;
  color: #38bdf8;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.access-url-link:hover {
  text-decoration: underline;
  color: var(--lime);
}

.access-copy-btn {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  background: var(--navy-input);
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.access-copy-btn:hover {
  background: var(--navy-hover);
  border-color: var(--cyan);
  color: #ffffff;
}

.access-ssh-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #030d1a;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
}

.access-ssh-box code {
  flex: 1;
  font-size: 12px;
  color: var(--cyan);
  user-select: all;
  overflow-x: auto;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.access-domain-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.access-domain-form input {
  margin: 0;
  flex: 1;
  padding: 10px 14px;
  font-size: 13px;
  background: var(--navy-input);
}

.access-domain-form button {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.access-btn-remove {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}

.access-btn-remove:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

/* Hybrid Plans & Launch Promo Showcase */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: 20px 0 28px;
}

.plan-card {
  background: var(--navy-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: all 0.2s ease;
}

.plan-card:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.plan-card.featured {
  border-color: var(--lime);
  background: linear-gradient(180deg, rgba(185, 239, 85, 0.08) 0%, var(--navy-card) 100%);
  box-shadow: 0 8px 24px rgba(185, 239, 85, 0.15);
}

.plan-featured-badge {
  position: absolute;
  top: -10px;
  right: 18px;
  background: var(--lime);
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: Manrope, sans-serif;
}

.plan-card-header h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #ffffff;
}

.plan-card-desc {
  font-size: 11.5px;
  color: var(--muted);
  min-height: 32px;
  margin-bottom: 14px;
  line-height: 1.4;
}

.plan-price-box {
  margin: 12px 0 18px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.plan-price-old {
  font-size: 12px;
  color: var(--muted);
  text-decoration: line-through;
  display: block;
}

.plan-price-main {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  font-family: Manrope, sans-serif;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.plan-price-main small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}

.plan-specs-list,
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  gap: 8px;
  font-size: 12px;
  color: #dce7f2;
}

.plan-specs-list li,
.plan-features li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.plan-specs-list li span.check,
.plan-features li span.check {
  color: var(--lime);
  font-weight: bold;
}

.plan-specs-list li strong,
.plan-features li strong {
  color: #ffffff;
}

.promo-banner {
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.15) 0%, rgba(249, 115, 22, 0.15) 100%);
  border: 1px solid rgba(234, 179, 8, 0.35);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: #fef08a;
}

/* Container Firewall Dialog Redesign */
#firewall-dialog {
  width: 890px;
  max-width: 96vw;
  padding: 24px 26px;
}

.fw-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 8px;
  vertical-align: middle;
}

.fw-status-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(8, 28, 51, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  gap: 14px;
  flex-wrap: wrap;
}

.fw-status-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fw-status-icon {
  font-size: 24px;
  line-height: 1;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.2);
  padding: 8px;
  border-radius: 8px;
}

.fw-status-text h4 {
  margin: 0 0 3px 0;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  font-family: Manrope, sans-serif;
}

.fw-status-text p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.fw-status-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fw-toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.fw-table-container {
  background: rgba(6, 24, 44, 0.6);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
}

.fw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  text-align: left;
}

.fw-table th {
  background: rgba(4, 14, 27, 0.8);
  color: var(--muted);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.fw-table td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

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

.fw-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.fw-port-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.fw-port-pill strong {
  font-size: 13px;
  color: var(--cyan);
  font-weight: 700;
}

.fw-port-pill small {
  font-size: 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
}

.fw-cidr-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.25);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.fw-badge-allow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.fw-badge-block {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.fw-badge-inbound {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}

.fw-badge-outbound {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #c084fc;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}

.fw-filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.fw-tab-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.fw-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.fw-tab-btn.active {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: var(--cyan);
}

.fw-btn-action-toggle {
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 5px;
  font-weight: 600;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.fw-btn-action-delete {
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 5px;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  background: transparent !important;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.fw-btn-action-delete:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

.fw-add-card {
  background: rgba(7, 25, 47, 0.7);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
}

.fw-add-card-header {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fw-add-grid {
  display: grid;
  grid-template-columns: 145px 95px 105px 145px 1fr auto;
  gap: 10px;
  align-items: flex-end;
}

@media (max-width: 860px) {
  .fw-add-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.fw-add-grid label {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.fw-add-grid input,
.fw-add-grid select {
  margin: 0;
  padding: 8px 10px;
  font-size: 12.5px;
  background: #040e1b;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #ffffff;
}

.fw-add-grid input:focus,
.fw-add-grid select:focus {
  border-color: var(--cyan);
}

.fw-add-grid button[type="submit"] {
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  height: 38px;
}

@media (max-width: 768px) {
  .fw-add-grid {
    grid-template-columns: 1fr 1fr;
  }
  .fw-add-grid button[type="submit"] {
    grid-column: 1 / -1;
  }
}

/* Free Trial & VIP Countdown Banner */
.trial-active-card {
  position: relative;
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.35) 0%, rgba(8, 28, 51, 0.9) 60%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(52, 211, 153, 0.45);
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px -10px rgba(5, 150, 105, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.trial-card-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.trial-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: #34d399;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #34d399;
  border-radius: 50%;
  box-shadow: 0 0 8px #34d399;
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.trial-card-main {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.trial-card-icon {
  font-size: 38px;
  line-height: 1;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.25);
  padding: 12px;
  border-radius: 12px;
}

.trial-card-details {
  flex: 1;
}

.trial-card-details h3 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  font-family: Manrope, sans-serif;
}

.trial-card-details h3 strong {
  color: #34d399;
}

.trial-card-details p {
  margin: 0 0 16px;
  font-size: 0.9rem;
  color: #cbd5e1;
  line-height: 1.5;
}

.trial-countdown-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 16px;
}

.trial-countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 54px;
}

.countdown-val {
  font-family: Manrope, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #34d399;
  line-height: 1.1;
}

.countdown-lbl {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.8px;
}

.countdown-sep {
  font-size: 1.3rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.2);
  margin-bottom: 8px;
}

.trial-countdown-summary {
  margin-left: auto;
  font-size: 0.85rem;
  color: #e2e8f0;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.plan-card.active-trial {
  border: 2px solid #34d399 !important;
  box-shadow: 0 0 25px rgba(52, 211, 153, 0.2) !important;
}

.plan-trial-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

/* ==========================================================================
   Manutenção de Containers do Host
   ========================================================================== */
.maint-table-container {
  width: 100%;
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--navy-card);
  box-shadow: 0 8px 24px #00000020;
}

.maint-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.maint-table th {
  font-family: Manrope, sans-serif;
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--muted);
  background: #081a30;
  font-weight: 700;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
  white-space: nowrap;
}

.maint-table td {
  font-size: 12.5px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: #dce7f2;
  vertical-align: middle;
}

.maint-table tr:hover td {
  background: rgba(16, 46, 82, 0.25);
}

.maint-name-cell {
  min-width: 200px;
}

.maint-name-title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  font-family: Manrope, sans-serif;
}

.maint-name-sub {
  font-size: 11px;
  margin-top: 4px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  word-break: break-all;
}

.maint-docker-code {
  background: #06182c;
  color: var(--cyan);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.maint-owner-cell {
  min-width: 150px;
  word-break: break-word;
}

.maint-status-cell {
  min-width: 130px;
  white-space: nowrap;
}

.maint-domain-cell {
  min-width: 180px;
  max-width: 280px;
  word-break: break-all;
}

.maint-created-cell {
  min-width: 120px;
  white-space: nowrap;
  font-size: 11.5px;
  color: #94a3b8;
}

.maint-actions-cell {
  min-width: 160px;
  white-space: nowrap;
  text-align: right;
}

.maint-actions-wrap {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.btn-maint-act {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 5px;
  font-family: "DM Sans", sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  border: 1px solid transparent;
}

.btn-maint-act.start {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.3);
}
.btn-maint-act.start:hover {
  background: rgba(34, 197, 94, 0.25);
  border-color: #4ade80;
  color: #ffffff;
}

.btn-maint-act.stop {
  background: rgba(234, 179, 8, 0.12);
  color: #fde047;
  border-color: rgba(234, 179, 8, 0.3);
}
.btn-maint-act.stop:hover {
  background: rgba(234, 179, 8, 0.25);
  border-color: #fde047;
  color: #ffffff;
}

.btn-maint-act.delete {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.3);
}
.btn-maint-act.delete:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #f87171;
  color: #ffffff;
}

.port-badge {
  display: inline-block;
  background: #091c33;
  border: 1px solid var(--line);
  color: #cbd5e1;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-family: monospace;
  margin: 2px 2px 2px 0;
}

/* ==========================================================================
   Docker Hub Modal Search & Tag Filtering
   ========================================================================== */
.tab-pill {
  background: #081a30;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 5px;
  cursor: pointer;
  transition: all .15s ease;
  font-family: Manrope, sans-serif;
  font-weight: 600;
}
.tab-pill:hover {
  color: #ffffff;
  border-color: var(--cyan);
}
.tab-pill.active {
  background: #102e52;
  color: var(--cyan);
  border-color: var(--cyan);
}

.modal-hub-list {
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #040e1b;
  margin-top: 6px;
}

.modal-hub-item {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 0.15s;
}
.modal-hub-item:last-child {
  border-bottom: none;
}
.modal-hub-item:hover {
  background: #0a213c;
}
.modal-hub-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.modal-hub-item strong {
  color: #ffffff;
  font-size: 12.5px;
}
.modal-hub-item p {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-hub-chosen-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 6px;
  margin-top: 6px;
}

/* Billing Profile Card Redesign */
.billing-profile-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px 30px;
  margin-top: 24px;
  margin-bottom: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.billing-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.secure-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--lime);
  background: rgba(185, 239, 85, 0.08);
  border: 1px solid rgba(185, 239, 85, 0.25);
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.cep-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cep-input-wrapper input {
  width: 100%;
}

.cep-spinner {
  position: absolute;
  right: 10px;
  font-size: 13px;
  pointer-events: none;
}

.cep-status-hint {
  float: right;
  font-weight: 500;
  transition: all 0.2s ease;
}

.cep-status-hint.success {
  color: var(--lime) !important;
}

.cep-status-hint.error {
  color: #f87171 !important;
}

.cep-status-hint.loading {
  color: var(--cyan) !important;
}

.billing-profile-card .optional-hint {
  display: inline;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 5px;
}

.billing-profile-card .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.billing-profile-card .form-grid.number-comp-grid {
  grid-template-columns: 160px 1fr !important;
}

.billing-profile-card .form-grid.city-uf-grid {
  grid-template-columns: 1fr 110px !important;
}

@media (max-width: 680px) {
  .billing-profile-card .form-grid,
  .billing-profile-card .form-grid.number-comp-grid,
  .billing-profile-card .form-grid.city-uf-grid {
    grid-template-columns: 1fr !important;
  }
}

.billing-card-footer {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.billing-card-footer button.primary {
  padding: 10px 22px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 8px;
  min-width: 220px;
}

/* Advanced Container Configuration & Quick Actions */
.adv-collapsible {
  background: rgba(6, 24, 44, 0.65);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  transition: border-color 0.15s ease;
}
.adv-collapsible[open] {
  border-color: rgba(86, 216, 239, 0.35);
  background: rgba(6, 24, 44, 0.9);
}
.adv-collapsible summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--cyan);
  user-select: none;
  font-family: Manrope, sans-serif;
}
.adv-collapsible-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.adv-subcard {
  background: rgba(6, 20, 38, 0.65);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px 14px;
}

.compact-rows-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.compact-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.compact-row input,
.compact-row select {
  margin: 0 !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
}

.access-quick-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: rgba(8, 25, 48, 0.85);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.access-quick-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.access-quick-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.access-quick-actions button {
  padding: 6px 11px;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 6px;
}
.health-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  border: 1px solid transparent;
}
.health-badge.healthy {
  background: rgba(34, 197, 94, 0.14);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.35);
}
.health-badge.unhealthy {
  background: rgba(239, 68, 68, 0.16);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
}
.health-badge.starting {
  background: rgba(234, 179, 8, 0.14);
  color: #fde047;
  border-color: rgba(234, 179, 8, 0.35);
}