/* =========================================================================
   ORBE — Portal do cliente / admin (Fase 2)
   Reaproveita tokens de styles.css (--ink, --paper, --muted, --line,
   --font-head, --font-body). Layout próprio: shell com sidebar fixa +
   conteúdo, no mesmo idioma visual preto-e-branco do site institucional.
   ========================================================================= */

body.portal-page {
  margin: 0; background: #f4f4f4; color: var(--ink); font-family: var(--font-body);
  min-height: 100vh;
}

/* ---------- Tela de login ---------- */
.portal-auth-shell {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: var(--ink); color: var(--paper);
}
.portal-auth-card {
  width: min(420px, 100%); background: #101010; border: 1px solid #2a2a2a; border-radius: 24px;
  padding: 36px 30px; box-shadow: 0 60px 140px rgba(0,0,0,.5);
}
.portal-auth-card .brand-logo { background: transparent; margin-bottom: 26px; }
.portal-auth-card h1 { font: 600 26px var(--font-head); letter-spacing: -.02em; margin: 0 0 8px; }
.portal-auth-card > p { font-size: 13px; color: #a8a8a8; margin: 0 0 26px; }
.portal-member-chip { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px; border: 1px solid #383838; border-radius: 999px; padding: 8px 10px; color: #bcbcbc; font: 650 7px var(--font-body); letter-spacing: .12em; }
.portal-member-chip i { width: 6px; height: 6px; background: #f0f0f0; border-radius: 50%; box-shadow: 0 0 12px rgba(255,255,255,.55); }
.portal-auth-perks { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; color: #6f6f6f; font: 600 7px var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.portal-auth-perks i { width: 2px; height: 2px; background: #555; border-radius: 50%; }
.portal-field { display: block; margin-bottom: 16px; }
.portal-field span { display: block; font: 600 9px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #9a9a9a; margin-bottom: 8px; }
.portal-field input {
  width: 100%; height: 50px; border: 1px solid #333; border-radius: 12px; background: #191919;
  color: #fff; padding: 0 15px; font: 14px var(--font-body); outline: 0; transition: .2s;
}
.portal-field input:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.portal-auth-card .button { width: 100%; justify-content: center; margin-top: 6px; }
.portal-auth-links { display: flex; justify-content: space-between; margin-top: 18px; font-size: 11px; }
.portal-auth-links a, .portal-auth-links button { background: none; border: 0; color: #b0b0b0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font: inherit; padding: 0; }
.portal-message { display: none; margin-top: 16px; padding: 11px 13px; border-radius: 10px; font-size: 12px; }
.portal-message.show { display: block; }
.portal-message.is-error { background: #3a1e1a; color: #f0b3a8; }
.portal-message.is-ok { background: #16241b; color: #b7e0c4; }

/* ---------- Shell autenticado (sidebar + conteúdo) ---------- */
.portal-shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.portal-sidebar { background: var(--ink); color: var(--paper); padding: 26px 18px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.portal-sidebar .brand-logo { background: transparent; margin-bottom: 30px; }
.portal-sidebar-identity { margin-bottom: 24px; }
.portal-sidebar-identity strong { display: block; font: 600 13px var(--font-head); }
.portal-sidebar-identity span { display: block; font-size: 10px; color: #9a9a9a; margin-top: 3px; text-transform: uppercase; letter-spacing: .06em; }
.portal-sidebar-identity em { display: inline-flex; align-items: center; gap: 6px; margin-top: 13px; padding: 7px 9px; border: 1px solid #343434; border-radius: 999px; color: #cfcfcf; font: 600 7px var(--font-body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.portal-sidebar-identity em i { width: 6px; height: 6px; border-radius: 50%; background: #f0f0f0; box-shadow: 0 0 12px rgba(255,255,255,.5); }
.portal-nav { display: grid; gap: 4px; }
.portal-nav button {
  display: flex; align-items: center; gap: 11px; width: 100%; border: 0; border-radius: 10px;
  background: transparent; color: #c9c9c9; padding: 12px 12px; font: 600 12px var(--font-body);
  cursor: pointer; text-align: left; transition: .2s;
}
.portal-nav button:hover { background: #1c1c1c; color: #fff; }
.portal-nav button.active { background: #fff; color: var(--ink); }
.portal-nav .badge { margin-left: auto; background: #2a2a2a; color: #fff; border-radius: 999px; font: 600 9px var(--font-body); padding: 3px 7px; }
.portal-nav button.active .badge { background: #ececec; color: var(--ink); }
.portal-sidebar-footer { margin-top: auto; display: grid; gap: 6px; }
.portal-sidebar-footer a, .portal-sidebar-footer button {
  border: 0; background: none; color: #9a9a9a; font: 500 11px var(--font-body); text-align: left;
  cursor: pointer; padding: 8px 4px; text-decoration: none;
}
.portal-sidebar-footer button:hover, .portal-sidebar-footer a:hover { color: #fff; }

.portal-main { padding: 34px clamp(20px, 3vw, 46px) 60px; min-width: 0; }
.portal-view { display: none; }
.portal-view.active { display: block; }
.portal-view-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.portal-view-head h2 { font: 600 26px var(--font-head); letter-spacing: -.02em; margin: 0 0 4px; }
.portal-view-head p { font-size: 12px; color: var(--muted); margin: 0; }
.portal-kicker { display: block; color: #888; font: 650 8px var(--font-body); letter-spacing: .14em; margin-bottom: 9px; }

/* ---------- Visão geral exclusiva ---------- */
.portal-welcome { display: flex; align-items: start; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.portal-welcome > div > span { color: #858585; font: 650 8px var(--font-body); letter-spacing: .16em; }
.portal-welcome h1 { font: 650 clamp(32px, 4vw, 54px)/1 var(--font-head); letter-spacing: -.05em; margin: 13px 0 9px; }
.portal-welcome h1 i { font-style: normal; color: #787878; }
.portal-welcome p { color: var(--muted); font-size: 13px; margin: 0; }
.member-status { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #d5d5d5; background: #fff; border-radius: 999px; padding: 10px 13px; font: 650 8px var(--font-body); letter-spacing: .08em; white-space: nowrap; }
.member-status i { width: 7px; height: 7px; border-radius: 50%; background: #1f1f1f; }
.overview-grid { display: grid; grid-template-columns: minmax(300px, 1.4fr) repeat(2, minmax(160px, .5fr)); gap: 13px; }
.overview-grid > article { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 21px; }
.overview-plan-card { position: relative; overflow: hidden; background: #1f1f1f !important; color: #f0f0f0; display: flex; align-items: end; justify-content: space-between; gap: 24px; min-height: 170px; }
.overview-plan-card:after { content: ""; position: absolute; width: 230px; height: 230px; right: -130px; top: -145px; border: 1px solid #414141; border-radius: 50%; box-shadow: 0 0 0 36px rgba(255,255,255,.025), 0 0 0 72px rgba(255,255,255,.018); }
.overview-plan-card span, .overview-stat > span, .journey-card header span, .quick-actions-card > span { display: block; color: #888; font: 650 7px var(--font-body); letter-spacing: .14em; }
.overview-plan-card div > strong { display: block; font: 650 24px var(--font-head); margin: 11px 0 6px; }
.overview-plan-card p { color: #aaa; font-size: 10px; margin: 0; }
.overview-plan-card > div:last-child { text-align: right; position: relative; z-index: 1; }
.overview-plan-card > div:last-child b { display: block; font: 650 24px var(--font-head); white-space: nowrap; }
.overview-plan-card > div:last-child small { color: #888; font-size: 8px; }
.overview-stat { min-height: 170px; display: flex; flex-direction: column; justify-content: end; }
.overview-stat strong { font: 650 clamp(25px, 2.6vw, 37px) var(--font-head); letter-spacing: -.04em; margin: auto 0 5px; }
.overview-stat small { color: #8b8b8b; font-size: 9px; }
.overview-lower { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .5fr); gap: 13px; margin-top: 13px; }
.journey-card, .quick-actions-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 23px; }
.journey-card header { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.journey-card header strong { display: block; font: 650 17px var(--font-head); margin-top: 8px; }
.journey-card header button, .project-portal-note button { border: 0; background: transparent; color: #777; font: 600 9px var(--font-body); cursor: pointer; }
.journey-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 36px; position: relative; }
.journey-steps:before { content: ""; position: absolute; left: 14px; right: 14px; top: 13px; height: 1px; background: #dedede; }
.journey-steps > span { position: relative; z-index: 1; }
.journey-steps i { width: 28px; height: 28px; background: #fff; border: 1px solid #d2d2d2; border-radius: 50%; display: grid; place-items: center; color: #8a8a8a; font: 650 8px var(--font-body); font-style: normal; }
.journey-steps .done i, .journey-steps .current i { background: #1f1f1f; border-color: #1f1f1f; color: #fff; }
.journey-steps b { display: block; max-width: 110px; font: 600 9px/1.4 var(--font-body); margin-top: 10px; }
.quick-actions-card { display: grid; gap: 9px; }
.quick-actions-card > span { margin-bottom: 8px; }
.quick-actions-card button { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; text-align: left; border: 1px solid #e1e1e1; border-radius: 12px; background: #fafafa; padding: 12px; cursor: pointer; transition: .2s; }
.quick-actions-card button:hover { transform: translateY(-2px); border-color: #aaa; }
.quick-actions-card button i { grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center; background: #1f1f1f; color: #fff; border-radius: 9px; font-style: normal; }
.quick-actions-card button b { font: 650 10px var(--font-body); }
.quick-actions-card button em { color: #888; font: 500 8px var(--font-body); font-style: normal; }

/* ---------- Projeto do assinante ---------- */
.project-portal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.project-stage-card { min-height: 285px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; opacity: .62; }
.project-stage-card.active { opacity: 1; }
.project-stage-card > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #d4d4d4; border-radius: 50%; font: 650 10px var(--font-body); }
.project-stage-card.active > span { background: #1f1f1f; color: #fff; border-color: #1f1f1f; }
.project-stage-card > i { color: #8a8a8a; font: 650 7px var(--font-body); font-style: normal; letter-spacing: .12em; margin-top: auto; }
.project-stage-card h3 { font: 650 17px/1.2 var(--font-head); margin: 12px 0 8px; }
.project-stage-card p { color: #7f7f7f; font-size: 10px; line-height: 1.55; margin: 0; }
.project-portal-note { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 15px; margin-top: 13px; background: #1f1f1f; color: #f0f0f0; border-radius: 17px; padding: 19px 22px; }
.project-portal-note > i { width: 38px; height: 38px; border: 1px solid #444; border-radius: 50%; display: grid; place-items: center; font-style: normal; }
.project-portal-note strong { font: 650 13px var(--font-head); }
.project-portal-note p { color: #999; font-size: 9px; margin: 4px 0 0; }
.project-portal-note button { color: #f0f0f0; border-bottom: 1px solid #777; padding: 7px 0; }

/* ---------- Chamados / chat ---------- */
.tickets-layout { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
.ticket-list { display: grid; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px; max-height: 74vh; overflow-y: auto; }
.ticket-list-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 12px; padding: 13px 12px; cursor: pointer; transition: .2s; }
.ticket-list-item:hover { background: #f2f2f2; }
.ticket-list-item.active { background: var(--ink); }
.ticket-list-item.active * { color: #fff !important; }
.ticket-list-item b { display: block; font: 600 13px var(--font-head); margin-bottom: 4px; }
.ticket-list-item span { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); gap: 8px; }
.ticket-status-pill { display: inline-block; font: 600 8px var(--font-body); text-transform: uppercase; letter-spacing: .06em; padding: 3px 7px; border-radius: 999px; background: #ececec; color: #555; }
.ticket-status-pill[data-status="open"] { background: #101010; color: #fff; }
.ticket-status-pill[data-status="in_progress"] { background: #e6e6e6; color: #222; }
.ticket-status-pill[data-status="resolved"], .ticket-status-pill[data-status="closed"] { background: #f0f0f0; color: #888; }

.ticket-panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; min-height: 74vh; display: flex; flex-direction: column; }
.ticket-panel-empty { flex: 1; display: grid; place-items: center; color: var(--muted); font-size: 13px; text-align: center; padding: 40px; }
.ticket-panel-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.ticket-panel-head h3 { font: 600 18px var(--font-head); margin: 0 0 6px; }
.ticket-panel-head small { color: var(--muted); font-size: 11px; }
.ticket-panel-head select { border: 1px solid var(--line); border-radius: 8px; height: 34px; font: 600 11px var(--font-body); padding: 0 8px; background: #fafafa; }
.ticket-thread { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.ticket-msg { max-width: 78%; padding: 11px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5; }
.ticket-msg.mine { align-self: flex-end; background: var(--ink); color: #fff; border-radius: 14px 4px 14px 14px; }
.ticket-msg.theirs { align-self: flex-start; background: #f0f0f0; border-radius: 4px 14px 14px 14px; }
.ticket-msg time { display: block; font-size: 9px; opacity: .6; margin-top: 6px; }
.ticket-composer { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); }
.ticket-composer textarea { flex: 1; resize: none; height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font: 13px var(--font-body); outline: 0; }
.ticket-composer textarea:focus { border-color: var(--ink); }
.ticket-composer button { border: 0; border-radius: 12px; background: var(--ink); color: #fff; padding: 0 20px; font: 600 12px var(--font-body); cursor: pointer; }

.new-ticket-form { display: grid; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin-bottom: 18px; }
.new-ticket-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.new-ticket-form label { display: block; }
.new-ticket-form label span { display: block; font: 600 9px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.new-ticket-form input, .new-ticket-form select, .new-ticket-form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: 13px var(--font-body); outline: 0; background: #fafafa;
}
.new-ticket-form textarea { min-height: 70px; resize: vertical; }
.new-ticket-form button { justify-self: start; }

/* ---------- Pagamentos ---------- */
.invoice-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.invoice-table th { text-align: left; font: 600 9px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 14px 16px; border-bottom: 1px solid var(--line); background: #fafafa; }
.invoice-table td { padding: 14px 16px; border-bottom: 1px solid #eee; font-size: 13px; vertical-align: middle; }
.invoice-table tr:last-child td { border-bottom: 0; }
.invoice-status { font: 600 9px var(--font-body); text-transform: uppercase; letter-spacing: .06em; padding: 4px 9px; border-radius: 999px; }
.invoice-status[data-status="paid"] { background: #e7f4ea; color: #2c6b3f; }
.invoice-status[data-status="scheduled"] { background: #e8eef8; color: #385b8a; }
.invoice-status[data-status="pending"] { background: #eee; color: #555; }
.invoice-status[data-status="overdue"] { background: #fbe4df; color: #a8473d; }
.invoice-status[data-status="cancelled"] { background: #f0f0f0; color: #999; }
.invoice-table select.invoice-status-select { font: 600 10px var(--font-body); border-radius: 8px; border: 1px solid var(--line); padding: 5px 7px; background: #fff; }
.invoice-action { color: #1f1f1f; font: 600 10px var(--font-body); white-space: nowrap; text-underline-offset: 3px; }
.invoice-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.invoice-summary article { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.invoice-summary strong { display: block; font: 700 22px var(--font-head); margin-bottom: 4px; }
.invoice-summary span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.new-invoice-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 18px; align-items: end; }
.new-invoice-form label { display: block; grid-column: span 1; }
.new-invoice-form label span { display: block; font: 600 9px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.new-invoice-form input, .new-invoice-form select { width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 10px; padding: 0 11px; font: 12px var(--font-body); background: #fafafa; }
.new-invoice-form button { grid-column: span 1; height: 42px; }

/* ---------- Clientes (admin) ---------- */
.client-grid { display: grid; gap: 10px; }
.client-card { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.client-card b { display: block; font: 600 15px var(--font-head); }
.client-card span { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.invite-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 18px; }
.invite-form input { height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font: 13px var(--font-body); background: #fafafa; }

@media (max-width: 980px) {
  .portal-shell { grid-template-columns: 1fr; }
  .portal-sidebar { position: relative; height: auto; flex-direction: row; align-items: center; padding: 14px 16px; }
  .portal-sidebar-identity, .portal-sidebar-footer { display: none; }
  .portal-nav { display: flex; gap: 4px; margin-left: auto; }
  .portal-nav button span:last-child { display: none; }
  .tickets-layout { grid-template-columns: 1fr; }
  .new-ticket-form .row, .new-invoice-form { grid-template-columns: 1fr; }
  .invoice-summary { grid-template-columns: 1fr; }
  .invite-form { grid-template-columns: 1fr; }
  .overview-grid { grid-template-columns: 1fr 1fr; }
  .overview-plan-card { grid-column: span 2; }
  .overview-lower { grid-template-columns: 1fr; }
  .project-portal-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .portal-main { padding: 25px 14px 45px; }
  .portal-sidebar { overflow-x: auto; }
  .portal-sidebar .brand-logo { flex: 0 0 auto; margin-right: 8px; }
  .portal-nav { flex: 0 0 auto; }
  .portal-nav button { padding: 10px; }
  .portal-welcome { display: block; }
  .member-status { margin-top: 18px; }
  .overview-grid { grid-template-columns: 1fr; }
  .overview-plan-card { grid-column: auto; flex-direction: column; align-items: start; }
  .overview-plan-card > div:last-child { text-align: left; }
  .journey-steps { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .journey-steps:before { display: none; }
  .project-portal-grid { grid-template-columns: 1fr; }
  .project-stage-card { min-height: 220px; }
  .project-portal-note { grid-template-columns: 38px 1fr; }
  .project-portal-note button { grid-column: 1 / -1; justify-self: start; }
  .new-ticket-form .row { grid-template-columns: 1fr; }
}

/* Responsive hardening shared by login, client portal and admin. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body.portal-page{min-height:100dvh;overflow-x:hidden}body.portal-page img,body.portal-page svg{max-width:100%}.portal-page .brand-logo img{max-width:none}body.portal-page a,body.portal-page button,body.portal-page input,body.portal-page select,body.portal-page textarea{touch-action:manipulation}body.portal-page a:focus-visible,body.portal-page button:focus-visible,body.portal-page input:focus-visible,body.portal-page select:focus-visible,body.portal-page textarea:focus-visible{outline:2px solid currentColor;outline-offset:3px}.portal-page [hidden]{display:none!important}.portal-auth-shell,.portal-shell{min-height:100dvh}.portal-main{width:100%;max-width:1600px;margin-inline:auto}.portal-page .button,.portal-nav button,.portal-sidebar-footer a,.portal-sidebar-footer button,.portal-auth-links a,.portal-auth-links button,.ticket-composer button,.new-ticket-form button,.new-invoice-form button,.invite-form button{min-height:44px}.portal-field input,.new-ticket-form input,.new-ticket-form select,.new-ticket-form textarea,.new-invoice-form input,.new-invoice-form select,.invite-form input,.ticket-composer textarea{max-width:100%}.invoice-table{min-width:680px}.portal-view>div[style*="overflow-x"]{overscroll-behavior-inline:contain;scrollbar-width:thin;border-radius:16px}.ticket-msg{overflow-wrap:anywhere}.client-card,.overview-grid>article,.journey-card,.quick-actions-card,.ticket-panel,.ticket-list{min-width:0}
@supports(padding:max(0px)){.portal-auth-shell{padding-top:max(24px,env(safe-area-inset-top));padding-right:max(24px,env(safe-area-inset-right));padding-bottom:max(24px,env(safe-area-inset-bottom));padding-left:max(24px,env(safe-area-inset-left))}.portal-sidebar{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}.portal-main{padding-right:max(clamp(20px,3vw,46px),env(safe-area-inset-right));padding-left:max(clamp(20px,3vw,46px),env(safe-area-inset-left));padding-bottom:max(60px,env(safe-area-inset-bottom))}}
@media(max-width:980px){.portal-sidebar{position:sticky;top:0;z-index:80;min-height:72px;box-shadow:0 8px 30px rgba(0,0,0,.12)}.portal-sidebar .brand-logo{margin-bottom:0}.portal-nav button{min-width:44px;min-height:44px;justify-content:center}.portal-nav button>span:first-child{width:18px;text-align:center}.tickets-layout{gap:12px}.ticket-list{max-height:340px}.ticket-panel{min-height:520px}.invoice-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.portal-view-head{align-items:flex-start}.new-invoice-form button,.invite-form button{width:100%}}
@media(min-width:621px) and (max-width:980px){.portal-nav button span:last-child{display:inline}.portal-nav button{width:auto;padding-inline:13px}.portal-sidebar{gap:14px}.portal-nav{gap:6px}.new-invoice-form{grid-template-columns:1fr 1fr}.new-invoice-form label[style]{grid-column:1/-1!important}.new-invoice-form button{grid-column:1/-1}}
@media(max-width:620px){.portal-sidebar{min-height:66px;padding-top:max(11px,env(safe-area-inset-top));padding-bottom:11px;scrollbar-width:none}.portal-sidebar::-webkit-scrollbar{display:none}.portal-sidebar .brand-logo{width:94px}.portal-nav{gap:3px}.portal-nav button{padding:9px}.portal-main{padding-top:24px;padding-right:max(14px,env(safe-area-inset-right));padding-left:max(14px,env(safe-area-inset-left));padding-bottom:max(50px,env(safe-area-inset-bottom))}.portal-welcome h1{font-size:clamp(34px,10vw,44px)}.portal-view-head{margin-bottom:20px}.portal-view-head h2{font-size:24px}.portal-view-head p{font-size:13px;line-height:1.5}.overview-grid>article,.journey-card,.quick-actions-card{padding:18px}.overview-stat{min-height:140px}.overview-plan-card{min-height:190px}.journey-card header{display:block}.journey-card header button{margin-top:14px;min-height:40px}.project-stage-card{padding:19px}.tickets-layout{gap:12px}.ticket-list{max-height:300px}.ticket-panel{min-height:500px}.ticket-panel-head{padding:17px 16px;flex-wrap:wrap}.ticket-thread{padding:16px 14px}.ticket-msg{max-width:90%;font-size:14px}.ticket-composer{padding:12px;position:sticky;bottom:0;background:#fff}.ticket-composer textarea{font-size:16px}.new-ticket-form,.new-invoice-form,.invite-form{padding:14px}.new-invoice-form{grid-template-columns:1fr}.new-invoice-form label,.new-invoice-form label[style],.new-invoice-form button{grid-column:1/-1!important}.new-ticket-form input,.new-ticket-form select,.new-ticket-form textarea,.new-invoice-form input,.new-invoice-form select,.invite-form input{font-size:16px}.new-invoice-form input,.new-invoice-form select{height:48px}.invoice-summary{grid-template-columns:1fr;gap:9px}.invoice-table{min-width:620px}.invoice-table th,.invoice-table td{padding:12px}.client-card{grid-template-columns:1fr;align-items:start}.client-card .button,.client-card button{width:100%}.portal-auth-shell{place-items:start center}.portal-auth-card{margin-block:auto}.portal-field input{height:54px;font-size:16px}.portal-auth-card .button{min-height:52px}.portal-auth-links{gap:16px;align-items:center}}
@media(max-width:420px){.portal-sidebar{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}.portal-sidebar .brand-logo{width:92px;margin-right:4px}.portal-nav{gap:2px}.portal-nav button{min-width:42px;width:42px;padding:8px}.portal-main{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}.portal-welcome{margin-bottom:24px}.member-status{white-space:normal;line-height:1.35}.overview-plan-card>div:last-child b{font-size:22px}.journey-steps{gap:12px}.project-portal-note{padding:17px}.ticket-panel{min-height:460px}.ticket-panel-head select{width:100%;height:44px}.ticket-composer{display:grid;grid-template-columns:1fr}.ticket-composer button{min-height:46px}.portal-auth-shell{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.portal-auth-card{padding:30px 20px;border-radius:20px}.portal-auth-card h1{font-size:clamp(25px,8vw,30px)}.portal-auth-links{align-items:flex-start;flex-direction:column}.portal-auth-perks{flex-wrap:wrap;line-height:1.5}}
@media(max-height:520px) and (max-width:980px) and (orientation:landscape){.portal-sidebar{position:relative}.portal-auth-shell{place-items:start center}.portal-auth-card{margin-block:0}.ticket-panel{min-height:420px}}