:root {
  color-scheme: dark;
  --bg: #07111f;
  --panel: rgba(13, 27, 46, .86);
  --panel-strong: #0f2036;
  --line: rgba(148, 163, 184, .18);
  --text: #f8fafc;
  --muted: #94a3b8;
  --primary: #22c55e;
  --primary-dark: #16a34a;
  --blue: #38bdf8;
  font-family: Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); overflow-x: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.ambient { position: fixed; width: 34rem; height: 34rem; border-radius: 50%; filter: blur(95px); opacity: .18; pointer-events: none; }
.ambient-one { background: #22c55e; left: -13rem; top: -12rem; }
.ambient-two { background: #2563eb; right: -15rem; bottom: -13rem; }

.web-shell { position: relative; min-height: 100vh; display: grid; grid-template-columns: minmax(320px, .8fr) minmax(480px, 1.2fr); }
.brand-panel { padding: clamp(3rem, 7vw, 7rem); display: flex; flex-direction: column; justify-content: center; background: linear-gradient(145deg, rgba(15, 32, 54, .78), rgba(7, 17, 31, .42)); border-right: 1px solid var(--line); }
.brand-mark, .mobile-logo span { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 1.1rem; background: linear-gradient(145deg, #22c55e, #0ea5e9); color: #03120a; font-weight: 900; box-shadow: 0 18px 50px rgba(34, 197, 94, .22); }
.eyebrow { display: block; margin-top: 2rem; color: #86efac; font-size: .72rem; letter-spacing: .19em; font-weight: 800; }
.brand-panel h1 { max-width: 650px; margin: 1rem 0; font-size: clamp(2.6rem, 5vw, 5.4rem); line-height: .98; letter-spacing: -.055em; }
.brand-panel p { max-width: 560px; color: var(--muted); font-size: 1.1rem; line-height: 1.7; }
.brand-points { display: flex; flex-wrap: wrap; gap: .75rem 1.35rem; margin-top: 2rem; color: #cbd5e1; font-size: .85rem; }
.brand-points span::first-letter { color: var(--primary); }

.portal-panel { padding: clamp(1.2rem, 4vw, 4rem); display: flex; align-items: center; justify-content: center; }
.auth-card { width: min(100%, 460px); padding: 2rem; border: 1px solid var(--line); border-radius: 1.7rem; background: var(--panel); backdrop-filter: blur(20px); box-shadow: 0 30px 80px rgba(0, 0, 0, .28); }
.mobile-logo { display: none; align-items: center; gap: .8rem; font-weight: 800; }
.mobile-logo span { display: inline-grid; width: 2.5rem; height: 2.5rem; border-radius: .8rem; }
.auth-card h2 { margin: .65rem 0 .3rem; font-size: 1.8rem; }
.auth-card p, .modal-card p { margin: 0 0 1.5rem; color: var(--muted); line-height: 1.55; }
form { display: grid; gap: 1rem; }
label { display: grid; gap: .45rem; color: #cbd5e1; font-size: .83rem; font-weight: 600; }
input { width: 100%; border: 1px solid var(--line); border-radius: .85rem; background: rgba(2, 6, 23, .46); color: var(--text); padding: .9rem 1rem; outline: none; }
input:focus { border-color: rgba(56, 189, 248, .75); box-shadow: 0 0 0 3px rgba(56, 189, 248, .1); }
.primary-button, .ghost-button, .app-button, .gateway-button { border: 0; cursor: pointer; border-radius: .85rem; font-weight: 750; transition: .2s ease; }
.primary-button { min-height: 3rem; padding: .8rem 1rem; color: #03120a; background: linear-gradient(135deg, var(--primary), #4ade80); box-shadow: 0 14px 35px rgba(34, 197, 94, .18); }
.primary-button:hover { transform: translateY(-1px); background: linear-gradient(135deg, #4ade80, #86efac); }
.link-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; margin-top: 1rem; }
.message { min-height: 1.3rem; margin-top: 1rem; color: #fda4af; font-size: .85rem; line-height: 1.45; }
.message.success { color: #86efac; }

.dashboard-view { width: min(100%, 1180px); align-self: stretch; }
.dashboard-header, .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dashboard-header { margin-bottom: 1.4rem; }
.dashboard-header .eyebrow { margin: 0; }
.dashboard-header h2 { margin: .35rem 0 0; font-size: 2rem; }
.ghost-button { padding: .72rem 1rem; border: 1px solid var(--line); background: rgba(15, 23, 42, .5); color: #cbd5e1; }
.toolbar { padding: .8rem; border-radius: 1rem; border: 1px solid var(--line); background: rgba(15, 23, 42, .5); margin-bottom: 1rem; }
.toolbar input { max-width: 380px; border: 0; background: transparent; padding: .55rem; }
.toolbar span { color: var(--muted); font-size: .78rem; }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; padding-bottom: 3rem; }
.app-card { min-height: 260px; display: flex; flex-direction: column; padding: 1.2rem; border: 1px solid var(--line); border-radius: 1.25rem; background: linear-gradient(145deg, rgba(15, 32, 54, .9), rgba(10, 22, 38, .78)); box-shadow: 0 20px 55px rgba(0, 0, 0, .14); }
.app-top { display: flex; justify-content: space-between; gap: .8rem; }
.app-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .95rem; background: color-mix(in srgb, var(--app-color) 22%, transparent); color: var(--app-color); font-weight: 900; font-size: 1.05rem; }
.app-status { height: fit-content; padding: .36rem .58rem; border-radius: 99px; background: rgba(148, 163, 184, .1); color: #cbd5e1; font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.app-status.active { color: #86efac; background: rgba(34, 197, 94, .12); }
.app-status.blocked { color: #fda4af; background: rgba(244, 63, 94, .12); }
.app-card h3 { margin: 1rem 0 .45rem; font-size: 1.08rem; }
.app-card p { margin: 0; color: var(--muted); line-height: 1.55; font-size: .86rem; }
.app-meta { margin: auto 0 .85rem; padding-top: 1rem; color: #cbd5e1; font-size: .75rem; }
.app-button { width: 100%; padding: .78rem 1rem; background: rgba(56, 189, 248, .12); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, .2); }
.app-button.primary { background: linear-gradient(135deg, var(--primary), #4ade80); color: #03120a; border: 0; }
.app-button.warning { color: #fde68a; background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .2); }

.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 1rem; background: rgba(2, 6, 23, .78); backdrop-filter: blur(8px); }
.modal-card { position: relative; width: min(100%, 460px); padding: 2rem; border-radius: 1.4rem; border: 1px solid var(--line); background: #0f2036; box-shadow: 0 30px 90px rgba(0, 0, 0, .45); }
.modal-card h3 { margin: .6rem 0; font-size: 1.45rem; }
.modal-close { position: absolute; right: 1rem; top: .8rem; border: 0; background: transparent; color: var(--muted); font-size: 1.8rem; cursor: pointer; }
.gateway-buttons { display: grid; gap: .7rem; }
.gateway-button { padding: .9rem; color: var(--text); background: rgba(148, 163, 184, .09); border: 1px solid var(--line); text-align: left; }
.gateway-button:hover { border-color: rgba(56, 189, 248, .55); transform: translateY(-1px); }
.result-page { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.result-card { width: min(100%, 520px); padding: 2.4rem; text-align: center; border: 1px solid var(--line); border-radius: 1.5rem; background: var(--panel); }
.result-icon { display: grid; place-items: center; margin: auto; width: 4rem; height: 4rem; border-radius: 50%; color: #03120a; background: var(--primary); font-size: 1.7rem; font-weight: 900; }
.result-card p, .result-card small { color: var(--muted); }
.result-card small { display: block; margin: 1rem 0; }

@media (max-width: 920px) {
  .web-shell { grid-template-columns: 1fr; }
  .brand-panel { display: none; }
  .portal-panel { min-height: 100vh; padding: 1rem; align-items: flex-start; }
  .auth-card { margin-top: 7vh; }
  .mobile-logo { display: flex; }
  .dashboard-view { padding-top: 1rem; }
}

@media (max-width: 560px) {
  .auth-card { padding: 1.35rem; }
  .dashboard-header h2 { font-size: 1.45rem; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar input { max-width: none; }
  .apps-grid { grid-template-columns: 1fr; }
}

.brand-mark img,.mobile-logo img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
.web-campaigns{display:grid;gap:.65rem;margin-bottom:1rem}
.web-campaign{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.85rem;border:1px solid rgba(56,189,248,.25);border-radius:1rem;background:rgba(56,189,248,.07)}
.web-campaign.promotion{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.08)}
.web-campaign.warning{border-color:rgba(251,191,36,.32);background:rgba(251,191,36,.08)}
.web-campaign>img{width:82px;height:62px;object-fit:cover;border-radius:.7rem}.web-campaign div>span{display:block;color:#86efac;font-size:.58rem;font-weight:850;letter-spacing:.12em}.web-campaign strong{display:block;margin:.2rem 0;font-size:.86rem}.web-campaign p{margin:0;color:var(--muted);font-size:.7rem;line-height:1.45}.web-campaign a{display:inline-block;margin-top:.4rem;color:#7dd3fc;font-size:.7rem;font-weight:800}.web-campaign>button{align-self:start;border:0;color:var(--muted);background:transparent;font-size:1.1rem}
@media(max-width:600px){.web-campaign{grid-template-columns:1fr}.web-campaign>img{width:100%;height:130px}.web-campaign>button{position:absolute;top:.35rem;right:.35rem}}

/* ===== Portal do cliente 0.9.0 ===== */
body.dashboard-mode{background:linear-gradient(180deg,#07111f,#081624 55%,#06101d)}
body.dashboard-mode .web-shell{display:block;min-height:100vh}
body.dashboard-mode .brand-panel{display:none}
body.dashboard-mode .portal-panel{display:block;min-height:100vh;padding:0}
body.dashboard-mode .dashboard-view{width:100%;max-width:none;padding-bottom:3rem}
body.dashboard-mode .dashboard-header{position:sticky;top:0;z-index:10;min-height:78px;margin:0;padding:1rem clamp(1rem,4vw,3rem);border-bottom:1px solid var(--line);background:rgba(7,17,31,.92);backdrop-filter:blur(14px)}
body.dashboard-mode .web-campaigns,body.dashboard-mode .catalog-hero,body.dashboard-mode .toolbar,body.dashboard-mode .filter-chips,body.dashboard-mode .apps-grid{width:min(1500px,calc(100% - 2rem));margin-left:auto;margin-right:auto}
body.dashboard-mode .web-campaigns{margin-top:1.2rem}
.catalog-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:1.4rem;margin-top:1.2rem;margin-bottom:1rem;padding:1.25rem 1.35rem;border:1px solid var(--line);border-radius:1.25rem;background:linear-gradient(135deg,rgba(15,32,54,.96),rgba(12,27,47,.86))}
.catalog-hero .eyebrow{margin:0}.catalog-hero h3{margin:.45rem 0 .3rem;font-size:1.35rem}.catalog-hero p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.55}.catalog-stats{display:grid;grid-template-columns:auto auto;gap:.1rem .55rem;min-width:150px;align-items:baseline}.catalog-stats strong{font-size:1.45rem;color:#f8fafc}.catalog-stats span{color:#7f93aa;font-size:.67rem}.toolbar{padding:.68rem .75rem}.search-box{display:flex;align-items:center;gap:.45rem;flex:1;max-width:620px;padding:0 .65rem;border:1px solid var(--line);border-radius:.8rem;background:rgba(2,6,23,.25)}.search-box>span{color:#71869d;font-size:1.1rem}.toolbar .search-box input{max-width:none;width:100%}.filter-chips{display:flex;gap:.45rem;overflow:auto;padding:.1rem 0 .9rem;scrollbar-width:thin}.filter-chip{white-space:nowrap;padding:.5rem .72rem;border:1px solid var(--line);border-radius:99px;color:#9eb0c4;background:rgba(15,32,54,.62);font-size:.7rem;font-weight:750;cursor:pointer}.filter-chip:hover,.filter-chip.active{color:#dff7ff;border-color:rgba(56,189,248,.28);background:rgba(56,189,248,.11)}
.apps-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:.85rem}.app-card{min-height:290px;padding:1.1rem;border-radius:1.15rem;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.app-card:hover{transform:translateY(-2px);border-color:rgba(56,189,248,.25);box-shadow:0 22px 55px rgba(0,0,0,.20)}.app-card.featured{border-color:color-mix(in srgb,var(--app-color) 32%,var(--line))}.app-icon{width:2.8rem;height:2.8rem}.app-icon svg{width:1.5rem;height:1.5rem}.app-category{margin-top:.9rem;color:var(--app-color);font-size:.62rem;font-weight:850;text-transform:uppercase;letter-spacing:.11em}.app-card h3{margin:.38rem 0 .42rem}.app-card p{display:-webkit-box;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical}.app-meta{font-size:.72rem}.empty-state{grid-column:1/-1;display:grid;place-items:center;gap:.3rem;min-height:220px;border:1px dashed var(--line);border-radius:1.2rem;color:#dbeafe}.empty-state span{color:var(--muted);font-size:.78rem}.gateway-empty{display:grid;gap:.35rem;padding:1rem;border:1px dashed var(--line);border-radius:.85rem}.gateway-empty span{color:var(--muted);font-size:.76rem}
@media(max-width:700px){.catalog-hero{align-items:flex-start;flex-direction:column}.catalog-stats{grid-template-columns:auto auto}.apps-grid{grid-template-columns:1fr}body.dashboard-mode .web-campaigns,body.dashboard-mode .catalog-hero,body.dashboard-mode .toolbar,body.dashboard-mode .filter-chips,body.dashboard-mode .apps-grid{width:calc(100% - 1rem)}}
