:root {
  color-scheme: light;
  --portal-ink: #171625;
  --portal-muted: #69687a;
  --portal-soft: #f5f4fa;
  --portal-paper: #ffffff;
  --portal-line: #e5e2ee;
  --portal-primary: #4834e8;
  --portal-primary-dark: #3423c9;
  --portal-violet: #8638e8;
  --portal-teal: #0a8872;
  --portal-green: #197a4c;
  --portal-amber: #a75e00;
  --portal-red: #bd3145;
  --portal-blue: #2465c7;
  --portal-shadow: 0 20px 55px rgba(28, 21, 66, .09);
  --portal-radius: 22px;
  --portal-header-height: 76px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--portal-ink);
  background: var(--portal-soft);
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

button { color: inherit; }

img { max-width: 100%; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  left: 1rem;
  top: -5rem;
  padding: .8rem 1rem;
  border-radius: 10px;
  color: #fff;
  background: var(--portal-primary-dark);
  font-weight: 800;
  text-decoration: none;
  transition: top .18s ease;
}

.skip-link:focus { top: 1rem; }

.portal-header {
  position: sticky;
  z-index: 30;
  top: 0;
  height: var(--portal-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(222, 218, 235, .9);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 5px 24px rgba(27, 21, 52, .04);
  backdrop-filter: blur(14px);
}

.brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .9rem;
  color: var(--portal-ink);
  font-weight: 850;
  text-decoration: none;
}

.brand img {
  width: clamp(128px, 16vw, 190px);
  height: 42px;
  object-fit: contain;
  object-position: left center;
}

.brand-divider { width: 1px; height: 28px; background: var(--portal-line); }
.brand-service { white-space: nowrap; color: #4e4c5e; font-size: .94rem; }

.account-area { display: flex; align-items: center; gap: 1rem; }
.account-copy { display: grid; gap: .15rem; text-align: right; }
.account-copy strong { font-size: .9rem; }
.account-copy span { max-width: 260px; overflow: hidden; color: var(--portal-muted); font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }

.center-view {
  min-height: calc(100vh - var(--portal-header-height));
  display: grid;
  place-items: center;
  padding: 2rem;
}

.loading-card {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  width: min(520px, 100%);
  padding: 1.7rem;
  border: 1px solid var(--portal-line);
  border-radius: var(--portal-radius);
  background: var(--portal-paper);
  box-shadow: var(--portal-shadow);
}

.loading-card h1 { margin: 0 0 .35rem; font-size: 1.25rem; }
.loading-card p { margin: 0; color: var(--portal-muted); }

.spinner {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 3px solid #e7e2fb;
  border-top-color: var(--portal-primary);
  border-radius: 50%;
  animation: spin .78s linear infinite;
}

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

.eyebrow {
  margin: 0 0 .65rem;
  color: var(--portal-primary);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.auth-view {
  min-height: calc(100vh - var(--portal-header-height));
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(400px, .88fr);
}

.auth-intro {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 650px;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 7.5rem);
  color: #fff;
  background:
    radial-gradient(circle at 5% 4%, rgba(255, 255, 255, .23), transparent 24%),
    radial-gradient(circle at 94% 86%, rgba(57, 226, 195, .22), transparent 27%),
    linear-gradient(140deg, #2115aa, #4b31db 51%, #8735e7);
}

.auth-intro::after {
  position: absolute;
  z-index: -1;
  right: -140px;
  bottom: -120px;
  width: 470px;
  height: 470px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 65px rgba(255, 255, 255, .035), 0 0 0 130px rgba(255, 255, 255, .025);
  content: "";
}

.auth-intro .eyebrow { color: #b9f6ed; }

.auth-intro h1 {
  max-width: 760px;
  margin: .3rem 0 1.3rem;
  font-size: clamp(2.8rem, 5.5vw, 6rem);
  line-height: .96;
  letter-spacing: -.055em;
}

.auth-intro > p:not(.eyebrow) { max-width: 660px; margin: 0; color: rgba(255, 255, 255, .78); font-size: 1.1rem; line-height: 1.65; }

.feature-list {
  display: grid;
  gap: .85rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
  font-weight: 750;
}

.feature-list li { display: flex; align-items: center; gap: .7rem; }
.feature-list li span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #174f47; background: #a5f2e6; font-size: .8rem; }

.security-note {
  max-width: 660px;
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin-top: 1.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 15px;
  background: rgba(12, 8, 73, .18);
}

.security-note p { margin: 0; color: rgba(255, 255, 255, .78); font-size: .88rem; line-height: 1.55; }
.security-note strong { color: #fff; }
.security-icon { width: 26px; height: 26px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #17116e; background: #b9f6ed; font-weight: 900; }

.auth-card {
  align-self: center;
  width: min(540px, calc(100% - 2rem));
  margin: 2.5rem auto;
  padding: clamp(1.6rem, 4vw, 3.3rem);
  border: 1px solid var(--portal-line);
  border-radius: 30px;
  background: var(--portal-paper);
  box-shadow: var(--portal-shadow);
}

.auth-panel h2 { margin: .1rem 0 .55rem; font-size: clamp(2rem, 4vw, 2.75rem); letter-spacing: -.045em; }
.panel-lead { margin: 0 0 1.6rem; color: var(--portal-muted); line-height: 1.55; }

label { display: block; margin: 1rem 0 .48rem; color: #444253; font-size: .86rem; font-weight: 800; }

input,
select,
textarea {
  width: 100%;
  border: 1px solid #d9d5e3;
  border-radius: 13px;
  outline: 0;
  color: var(--portal-ink);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input,
select { min-height: 48px; padding: .78rem .9rem; }
textarea { min-height: 110px; resize: vertical; padding: .9rem; line-height: 1.55; }

input::placeholder,
textarea::placeholder { color: #9b98a6; }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--portal-primary);
  box-shadow: 0 0 0 4px rgba(72, 52, 232, .11);
}

input:disabled,
select:disabled,
textarea:disabled { color: #85818e; background: #f0eef4; cursor: not-allowed; }

.password-field { position: relative; }
.password-field input { padding-right: 5rem; }
.password-toggle { position: absolute; right: .55rem; top: 50%; padding: .45rem .5rem; border: 0; color: var(--portal-primary); background: transparent; font-size: .78rem; font-weight: 850; transform: translateY(-50%); cursor: pointer; }

.field-help { margin: .45rem 0 0; color: var(--portal-muted); font-size: .78rem; line-height: 1.5; }
.optional { color: var(--portal-muted); font-weight: 500; }

.check-row { display: flex; align-items: flex-start; gap: .7rem; margin: 1.2rem 0; color: var(--portal-muted); font-weight: 600; line-height: 1.45; }
.check-row input { width: 18px; min-height: 18px; height: 18px; margin: .12rem 0 0; accent-color: var(--portal-primary); }

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .75rem 1rem;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 850;
  line-height: 1.1;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, opacity .14s ease;
}

.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:active:not(:disabled) { transform: translateY(0); }
.button:focus-visible,
.text-button:focus-visible,
.nav-button:focus-visible,
.back-button:focus-visible,
.icon-button:focus-visible,
.attachment-button:focus-within { outline: 3px solid rgba(72, 52, 232, .24); outline-offset: 2px; }
.button:disabled { opacity: .58; cursor: wait; }
.button-primary { color: #fff; background: linear-gradient(115deg, var(--portal-primary), var(--portal-violet)); box-shadow: 0 10px 26px rgba(72, 52, 232, .21); }
.button-secondary { border-color: #d9d5e3; color: #4c4857; background: #fff; box-shadow: none; }
.button-secondary:hover:not(:disabled), .button-quiet:hover:not(:disabled) { background: #f6f4fa; }
.button-quiet { border-color: transparent; color: #5e5968; background: transparent; }
.button-danger { color: #fff; background: var(--portal-red); }
.button-block { width: 100%; margin-top: 1.1rem; }
.button-small { min-height: 38px; padding: .55rem .75rem; font-size: .8rem; }

.text-button,
.inline-button,
.back-button {
  padding: 0;
  border: 0;
  color: var(--portal-primary);
  background: transparent;
  font-weight: 850;
  cursor: pointer;
}

.text-button:hover,
.inline-button:hover,
.back-button:hover { text-decoration: underline; }
.back-button { min-height: 40px; display: inline-flex; align-items: center; margin: 0 0 1.4rem; padding: .45rem .2rem; color: #605c6b; font-size: .82rem; }
.inline-button { font-size: inherit; }

.form-row { display: flex; align-items: center; gap: 1rem; margin-top: .7rem; }
.form-row-between { justify-content: flex-end; }
.auth-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; margin-top: 1.4rem; color: var(--portal-muted); font-size: .86rem; }
.code-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 1.3rem; border-radius: 15px; color: var(--portal-primary); background: #eeebff; font-size: 1.35rem; }
.code-input { text-align: center; font-size: 1.35rem; font-weight: 900; letter-spacing: .3em; font-variant-numeric: tabular-nums; }

.no-reply-note {
  display: grid;
  gap: .2rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--portal-line);
  color: var(--portal-muted);
  font-size: .73rem;
  line-height: 1.45;
}

.no-reply-note strong { color: #565261; }

.app-view {
  min-height: calc(100vh - var(--portal-header-height));
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
}

.portal-sidebar {
  position: sticky;
  top: var(--portal-header-height);
  align-self: start;
  height: calc(100vh - var(--portal-header-height));
  display: flex;
  flex-direction: column;
  padding: 1.3rem 1rem;
  border-right: 1px solid var(--portal-line);
  background: #fff;
}

.portal-nav { display: grid; gap: .35rem; }

.nav-button {
  width: 100%;
  min-height: 47px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  padding: .72rem .8rem;
  border: 0;
  border-radius: 11px;
  color: #5e5968;
  background: transparent;
  font-size: .86rem;
  font-weight: 760;
  text-align: left;
  cursor: pointer;
}

.nav-button:hover { color: var(--portal-primary); background: #f5f3fc; }
.nav-button.is-active { color: var(--portal-primary); background: #eeebff; font-weight: 880; }
.nav-button-primary { margin-top: .7rem; color: #fff; background: linear-gradient(115deg, var(--portal-primary), var(--portal-violet)); box-shadow: 0 9px 24px rgba(72, 52, 232, .18); }
.nav-button-primary:hover, .nav-button-primary.is-active { color: #fff; background: linear-gradient(115deg, var(--portal-primary-dark), #762bd8); }
.nav-icon { width: 25px; display: grid; place-items: center; font-size: 1.12rem; }
.nav-count { min-width: 24px; padding: .15rem .4rem; border-radius: 999px; color: var(--portal-primary); background: rgba(72, 52, 232, .1); font-size: .68rem; text-align: center; }
.nav-button-primary .nav-count { color: #fff; background: rgba(255, 255, 255, .18); }

.sidebar-help { margin-top: auto; padding: 1rem; border-radius: 14px; color: #555161; background: #f5f3f9; font-size: .75rem; line-height: 1.5; }
.sidebar-help strong { color: #302c3b; }
.sidebar-help p { margin: .35rem 0 0; }

.portal-content { width: 100%; max-width: 1420px; min-width: 0; margin: 0 auto; padding: clamp(1.3rem, 4vw, 3.2rem); }
.content-view { animation: view-in .22s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(5px); } }

.page-heading { margin-bottom: 1.7rem; }
.page-heading h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.03; letter-spacing: -.045em; }
.page-heading > div > p:last-child,
.page-heading > p:last-child { margin: .65rem 0 0; color: var(--portal-muted); line-height: 1.55; }
.page-heading-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.detail-heading { margin-bottom: 1.1rem; }

.banner {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-bottom: 1.4rem;
  padding: .9rem 1rem;
  border: 1px solid #cbdcf8;
  border-radius: 13px;
  color: #27527d;
  background: #eff6ff;
  font-size: .84rem;
}
.banner > span { font-size: 1.2rem; font-weight: 900; }
.banner p { margin: .18rem 0 0; color: #547493; }
.banner-demo {
  position: sticky;
  z-index: 18;
  top: calc(var(--portal-header-height) + .65rem);
  border-color: #e0b339;
  color: #5a3b00;
  background: linear-gradient(110deg, #fff8d9, #fff0bc);
  box-shadow: 0 10px 30px rgba(111, 76, 0, .1);
}
.banner-demo > span {
  width: 27px;
  height: 27px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: #8a5b00;
  font-size: .78rem;
}
.banner-demo p { color: #765b20; }
body.is-demo .notification-note { border-color: #ead085; color: #624500; background: #fff9e7; }
body.is-demo .notification-note p { color: #765f2b; }
body.is-demo .notification-symbol { background: #9a6800; }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.summary-card { position: relative; overflow: hidden; padding: 1.25rem; border: 1px solid var(--portal-line); border-radius: 17px; background: #fff; }
.summary-card::after { position: absolute; right: -20px; top: -25px; width: 88px; height: 88px; border-radius: 50%; background: var(--card-halo, #f0edff); content: ""; }
.summary-card span { position: relative; z-index: 1; color: var(--portal-muted); font-size: .78rem; font-weight: 750; }
.summary-card strong { position: relative; z-index: 1; display: block; margin-top: .3rem; font-size: 1.75rem; letter-spacing: -.04em; }
.summary-card.is-action { --card-halo: #fff1cf; }
.summary-card.is-complete { --card-halo: #dcf5eb; }

.content-card { margin-bottom: 1.2rem; padding: clamp(1rem, 2.5vw, 1.5rem); border: 1px solid var(--portal-line); border-radius: var(--portal-radius); background: #fff; box-shadow: 0 10px 35px rgba(32, 25, 63, .035); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-heading h2 { margin: 0; font-size: 1.18rem; letter-spacing: -.02em; }
.section-heading p { margin: .28rem 0 0; color: var(--portal-muted); font-size: .82rem; line-height: 1.45; }
.profile-card { transition: border-color .18s ease, box-shadow .18s ease; }
.profile-card.needs-attention { border-color: #e6b352; box-shadow: 0 0 0 3px rgba(230, 179, 82, .12); }
.profile-card.needs-attention #profile-help { color: #955800; font-weight: 750; }
.profile-email { max-width: 320px; overflow: hidden; padding: .42rem .62rem; border-radius: 999px; color: #5e5969; background: #f3f1f6; font-size: .72rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.profile-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto; align-items: end; gap: .75rem; }
.profile-form label { margin-top: 0; }
.profile-form .button { margin-bottom: 1px; }

.notification-note { display: flex; align-items: flex-start; gap: .9rem; padding: 1rem 1.1rem; border: 1px solid #cce7e0; border-radius: 15px; color: #285c52; background: #effaf7; font-size: .8rem; }
.notification-note p { margin: .25rem 0 0; color: #567970; line-height: 1.55; }
.notification-symbol { width: 31px; height: 31px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #fff; background: var(--portal-teal); }

.ticket-list { display: grid; gap: .75rem; }
.ticket-card { width: 100%; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(155px, .8fr) auto; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--portal-line); border-radius: 15px; color: inherit; background: #fff; text-align: left; cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.ticket-status { display: grid; justify-items: start; gap: .4rem; }
.customer-message-alert { display: inline-flex; min-height: 30px; align-items: center; padding: .36rem .62rem; border-radius: 999px; background: #b7332a; color: #fff; font-size: .72rem; font-weight: 850; }
.customer-message-opened { display: grid; gap: .2rem; padding: .85rem 1rem; border: 2px solid #d1594f; border-radius: 12px; background: #fff0ee; color: #842c25; }
.customer-message-opened strong { font-size: .9rem; }
.customer-message-opened span { font-size: .78rem; }
.ticket-card:hover { border-color: #c8c0e8; box-shadow: 0 10px 28px rgba(38, 28, 78, .07); transform: translateY(-1px); }
.ticket-card:focus-visible { outline: 3px solid rgba(72, 52, 232, .2); outline-offset: 2px; }
.ticket-primary { min-width: 0; }
.ticket-number { display: block; margin-bottom: .3rem; color: var(--portal-primary); font-size: .7rem; font-weight: 900; letter-spacing: .09em; }
.ticket-title { display: block; overflow: hidden; font-size: .95rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.ticket-device { display: block; margin-top: .3rem; overflow: hidden; color: var(--portal-muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.ticket-status { min-width: 0; }
.status-badge { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .38rem .58rem; border-radius: 999px; color: #4a4653; background: #f0eef3; font-size: .69rem; font-weight: 820; line-height: 1.2; }
.status-badge::before { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; content: ""; }
.status-new, .status-review { color: #5140c7; background: #eeebff; }
.status-waiting { color: #9a5900; background: #fff3d7; }
.status-working { color: #17669c; background: #e9f5ff; }
.status-ready { color: #08745f; background: #e3f8f2; }
.status-closed { color: #27724e; background: #e7f6ed; }
.status-ended { color: #7f4c59; background: #f8e9ed; }
.ticket-meta { min-width: 110px; text-align: right; }
.ticket-meta strong { display: block; font-size: .74rem; }
.ticket-meta span { display: block; margin-top: .23rem; color: var(--portal-muted); font-size: .7rem; }
.ticket-arrow { color: #958fa0; font-size: 1.1rem; }

.empty-state { display: grid; place-items: center; padding: clamp(2rem, 6vw, 4.5rem) 1.2rem; border: 1px dashed #d8d3e3; border-radius: 17px; text-align: center; }
.empty-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: .8rem; border-radius: 15px; color: var(--portal-primary); background: #eeebff; font-size: 1.4rem; }
.empty-state h3 { margin: 0; font-size: 1.05rem; }
.empty-state p { max-width: 420px; margin: .45rem 0 1rem; color: var(--portal-muted); font-size: .82rem; line-height: 1.5; }

.filter-bar { display: grid; grid-template-columns: minmax(220px, 1fr) 190px auto; gap: .7rem; margin-bottom: 1rem; }
.search-field { position: relative; margin: 0; }
.search-field > span:first-child { position: absolute; left: .9rem; top: 50%; z-index: 1; color: #8b8796; font-size: 1.1rem; transform: translateY(-50%); }
.search-field input { padding-left: 2.5rem; }

.form-card { padding: clamp(1.1rem, 3vw, 2rem); }
.grid-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1rem; }
.grid-span { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--portal-line); }
.form-actions .button { min-width: 130px; }
.char-count { display: block; margin-top: .3rem; color: #938f9c; font-size: .7rem; text-align: right; }
.icon-button { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; border: 0; border-radius: 9px; color: #6f6979; background: #f2f0f5; font-size: 1.2rem; cursor: pointer; }

.upload-field { position: relative; min-height: 125px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: 1rem; border: 1px dashed #c9c2dc; border-radius: 14px; color: var(--portal-muted); background: #faf9fc; text-align: center; cursor: pointer; }
.upload-field:hover { border-color: var(--portal-primary); background: #f7f5ff; }
.upload-field input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; }
.upload-field > span { color: var(--portal-primary); font-size: 1.4rem; font-weight: 900; }
.upload-field strong { color: #494554; font-size: .87rem; }
.upload-field small { font-size: .7rem; line-height: 1.45; }
.selected-files { display: grid; gap: .4rem; margin-top: .55rem; }
.selected-file { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .52rem .65rem; border-radius: 9px; color: #565160; background: #f3f1f6; font-size: .73rem; }
.selected-file span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selected-file span:last-child { flex: 0 0 auto; color: var(--portal-muted); }
.service-consent { display: flex; align-items: flex-start; gap: .7rem; margin: 1rem 0 0; padding: .9rem; border: 1px solid #d9d3e8; border-radius: 12px; color: #5d5868; background: #faf9fc; font-size: .78rem; font-weight: 650; line-height: 1.5; }
.service-consent input { width: 18px; min-height: 18px; height: 18px; flex: 0 0 auto; margin: .1rem 0 0; accent-color: var(--portal-primary); }
.consent-copy { display: flex; align-items: flex-start; gap: .65rem; margin-top: .8rem; padding: .8rem; border-radius: 11px; color: #586273; background: #f0f5fb; font-size: .76rem; line-height: 1.5; }
.consent-copy > span { width: 20px; height: 20px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--portal-blue); font-size: .7rem; font-weight: 900; }
.consent-copy p { margin: 0; }

.device-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.device-card { position: relative; overflow: hidden; padding: 1.2rem; border: 1px solid var(--portal-line); border-radius: 17px; background: #fff; }
.device-card::before { position: absolute; right: -32px; top: -38px; width: 112px; height: 112px; border-radius: 50%; background: #f0edff; content: ""; }
.device-type-icon { position: relative; width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 1rem; border-radius: 12px; color: var(--portal-primary); background: #eeebff; font-weight: 900; }
.device-card h3 { position: relative; margin: 0; font-size: 1rem; }
.device-brand { display: block; margin-bottom: .2rem; color: var(--portal-muted); font-size: .71rem; font-weight: 750; text-transform: uppercase; }
.device-data { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem .7rem; margin: 1rem 0 0; font-size: .74rem; }
.device-data dt { color: var(--portal-muted); }
.device-data dd { min-width: 0; margin: 0; overflow: hidden; font-weight: 720; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

.stage-card { padding: clamp(1.2rem, 3vw, 2rem); }
.stage-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.stage-top h2 { margin: .35rem 0 .2rem; font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -.03em; }
.stage-top p { margin: 0; color: var(--portal-muted); font-size: .8rem; }
.waiting-pill { padding: .55rem .7rem; border-radius: 10px; color: #6f4a08; background: #fff2d6; font-size: .72rem; font-weight: 820; }
.waiting-pill.is-team { color: #335c85; background: #eaf4ff; }
.stage-note { margin-top: 1.1rem; padding: .85rem 1rem; border-left: 3px solid var(--portal-primary); border-radius: 0 10px 10px 0; color: #514b5e; background: #f7f5fc; font-size: .78rem; line-height: 1.55; }
.stage-note p { margin: .25rem 0 0; white-space: pre-wrap; }
.stage-progress { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); gap: .25rem; margin-top: 1.8rem; }
.stage-progress::before { position: absolute; left: 8%; right: 8%; top: 13px; height: 3px; border-radius: 2px; background: #e5e1eb; content: ""; }
.progress-fill { position: absolute; left: 8%; top: 13px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--portal-primary), var(--portal-teal)); transition: width .3s ease; }
.progress-fill.progress-0 { width: 0; }
.progress-fill.progress-1 { width: 12%; }
.progress-fill.progress-2 { width: 24%; }
.progress-fill.progress-3 { width: 36%; }
.progress-fill.progress-4 { width: 48%; }
.progress-fill.progress-5 { width: 60%; }
.progress-fill.progress-6 { width: 72%; }
.progress-fill.progress-7 { width: 84%; }
.stage-step { position: relative; z-index: 1; display: grid; justify-items: center; gap: .5rem; color: #8a8593; font-size: .68rem; font-weight: 750; text-align: center; }
.stage-dot { width: 28px; height: 28px; display: grid; place-items: center; border: 3px solid #e5e1eb; border-radius: 50%; color: transparent; background: #fff; }
.stage-step.is-done, .stage-step.is-active { color: #4f4a58; }
.stage-step.is-done .stage-dot { border-color: var(--portal-teal); color: #fff; background: var(--portal-teal); }
.stage-step.is-active .stage-dot { border-color: var(--portal-primary); color: var(--portal-primary); box-shadow: 0 0 0 5px rgba(72, 52, 232, .1); }

.detail-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.detail-title-row h1 { margin: 0; }
.detail-meta { display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; margin-top: .6rem; color: var(--portal-muted); font-size: .77rem; }

.quote-card { border-color: #d9d0f1; background: linear-gradient(145deg, #fff, #faf8ff); }
.quote-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.quote-header h2 { margin: .25rem 0 0; font-size: 1.25rem; }
.quote-total { text-align: right; }
.quote-total span { display: block; color: var(--portal-muted); font-size: .7rem; }
.quote-total strong { display: block; margin-top: .15rem; font-size: 1.45rem; }
.quote-items { display: grid; gap: .45rem; margin: 1.2rem 0; padding: 0; list-style: none; }
.quote-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--portal-line); font-size: .8rem; }
.quote-item:last-child { border-bottom: 0; }
.quote-item small { display: block; margin-top: .22rem; color: var(--portal-muted); }
.quote-item strong { white-space: nowrap; }
.quote-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .7rem; padding-top: 1rem; border-top: 1px solid var(--portal-line); }
.quote-state { padding: .75rem; border-radius: 11px; color: #246342; background: #e7f6ed; font-size: .8rem; font-weight: 780; }
.quote-state.is-rejected { color: #884050; background: #f8e9ed; }
.quote-approval-help { margin-top: 1rem; padding: .85rem 1rem; border: 1px solid #ddd7f3; border-radius: 12px; color: #514a72; background: #f7f5ff; }
.quote-approval-help strong { display: block; margin-bottom: .25rem; }
.quote-approval-help p { margin: 0; font-size: .8rem; line-height: 1.55; }
.pre-service-note { margin-bottom: 1rem; }

.shipping-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.shipment { padding: .9rem; border: 1px solid var(--portal-line); border-radius: 13px; }
.shipment span { color: var(--portal-muted); font-size: .7rem; font-weight: 780; text-transform: uppercase; }
.shipment strong { display: block; margin-top: .35rem; font-size: .85rem; }
.shipment a { display: inline-block; margin-top: .25rem; color: var(--portal-primary); font-size: .76rem; font-weight: 800; text-decoration: none; }
.shipment .tracking-number { display: block; margin-top: .35rem; color: #4f5668; font-size: .76rem; font-weight: 800; overflow-wrap: anywhere; }
.shipment > small:not(.tracking-number) { display: block; margin-top: .25rem; color: var(--portal-muted); font-size: .72rem; }

.conversation-card { padding-bottom: 0; overflow: hidden; }
.message-list { display: grid; gap: .9rem; padding: .4rem 0 1.4rem; }
.message { max-width: min(78%, 760px); justify-self: start; }
.message.is-customer { justify-self: end; }
.message-bubble { padding: .85rem 1rem; border: 1px solid var(--portal-line); border-radius: 5px 15px 15px 15px; color: #393542; background: #f5f3f8; font-size: .85rem; line-height: 1.58; overflow-wrap: anywhere; white-space: pre-wrap; }
.message.is-customer .message-bubble { border-color: #ddd7fb; border-radius: 15px 5px 15px 15px; color: #2f2964; background: #eeebff; }
.message-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .3rem; color: var(--portal-muted); font-size: .67rem; }
.message.is-customer .message-meta { flex-direction: row-reverse; }
.message-meta strong { color: #514c5a; }
.message-attachments { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.attachment-link { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .42rem .55rem; border: 1px solid #d7d1e5; border-radius: 9px; color: var(--portal-primary); background: #fff; font-size: .68rem; font-weight: 780; text-decoration: none; }
.attachment-link span { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-link:hover { border-color: var(--portal-primary); }

.message-composer { margin: 0 calc(clamp(1rem, 2.5vw, 1.5rem) * -1); padding: 1.1rem clamp(1rem, 2.5vw, 1.5rem); border-top: 1px solid var(--portal-line); background: #faf9fc; }
.message-composer label:first-child { margin-top: 0; }
.composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .7rem; }
.attachment-button { min-height: 42px; display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .6rem .75rem; border: 1px solid #d9d5e3; border-radius: 11px; color: #5b5665; background: #fff; font-size: .78rem; cursor: pointer; }
.attachment-button input { position: absolute; width: 1px; min-height: 1px; height: 1px; padding: 0; opacity: 0; }
.composer-note { margin: .7rem 0 0; color: var(--portal-muted); font-size: .69rem; line-height: 1.45; }

.toast-region { position: fixed; z-index: 100; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); width: min(390px, calc(100vw - 2rem)); display: grid; gap: .6rem; pointer-events: none; }
.toast { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: flex-start; gap: .7rem; padding: .85rem 1rem; border: 1px solid #d7d2e2; border-radius: 13px; color: #fff; background: #302c3c; box-shadow: 0 14px 40px rgba(22, 18, 38, .2); font-size: .8rem; line-height: 1.45; animation: toast-in .2s ease both; pointer-events: auto; }
.toast::before { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #302c3c; background: #a9eee0; font-size: .7rem; font-weight: 900; content: "✓"; }
.toast.is-error::before { color: #8b2437; background: #ffd7df; content: "!"; }
.toast.is-warning::before { color: #7a4a00; background: #ffe3a5; content: "!"; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.noscript { position: fixed; z-index: 999; inset: auto 1rem 1rem; padding: 1rem; border-radius: 12px; color: #fff; background: #862e40; text-align: center; }

@media (max-width: 1050px) {
  .auth-view { grid-template-columns: minmax(280px, .82fr) minmax(380px, 1fr); }
  .auth-intro { padding: 3.2rem; }
  .auth-intro h1 { font-size: clamp(2.6rem, 5vw, 4.6rem); }
  .device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-form .button { grid-column: 1 / -1; justify-self: end; }
}

@media (max-width: 820px) {
  :root { --portal-header-height: 66px; }
  .portal-header { padding: 0 1rem; }
  .brand img { width: 128px; height: 36px; }
  .brand-divider { height: 23px; }
  .brand-service { font-size: .78rem; }
  .account-copy { display: none; }
  .auth-view { grid-template-columns: 1fr; }
  .auth-intro { min-height: auto; padding: 2.3rem 1.3rem 3rem; }
  .auth-intro h1 { max-width: 620px; font-size: clamp(2.3rem, 10vw, 4rem); }
  .auth-intro > p:not(.eyebrow) { font-size: .98rem; }
  .feature-list { margin: 1.5rem 0; }
  .security-note { margin-top: .5rem; }
  .auth-card { margin: -1.2rem auto 2rem; border-radius: 24px; }
  .app-view { display: block; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .portal-sidebar { position: fixed; z-index: 29; top: auto; right: 0; bottom: 0; left: 0; height: auto; display: block; padding: .45rem max(.5rem, env(safe-area-inset-right)) calc(.45rem + env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left)); border-top: 1px solid var(--portal-line); border-right: 0; background: rgba(255, 255, 255, .96); box-shadow: 0 -8px 28px rgba(27, 21, 52, .08); backdrop-filter: blur(14px); }
  .portal-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: .2rem; }
  .nav-button { min-height: 54px; display: flex; flex-direction: column; justify-content: center; gap: .15rem; padding: .35rem .15rem; font-size: .61rem; text-align: center; }
  .nav-button-primary { margin-top: 0; color: var(--portal-primary); background: #eeebff; box-shadow: none; }
  .nav-button-primary:hover, .nav-button-primary.is-active { color: var(--portal-primary); background: #e6e1ff; }
  .nav-icon { width: auto; font-size: 1.05rem; }
  .nav-count { position: absolute; margin: -25px 0 0 26px; }
  .sidebar-help { display: none; }
  .portal-content { padding: 1.25rem 1rem; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .summary-card { padding: .95rem .8rem; }
  .summary-card strong { font-size: 1.45rem; }
  .summary-card span { font-size: .65rem; }
  .page-heading-actions { align-items: flex-start; }
  .page-heading-actions > .button { flex: 0 0 auto; }
  .device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticket-card { grid-template-columns: minmax(0, 1fr) auto; }
  .ticket-status { grid-column: 1; grid-row: 2; }
  .ticket-meta { grid-column: 2; grid-row: 1 / span 2; }
  .ticket-arrow { display: none; }
}

@media (max-width: 600px) {
  .portal-header { gap: .5rem; }
  .brand { gap: .55rem; }
  .brand img { width: 108px; }
  .brand-service { max-width: 72px; white-space: normal; line-height: 1.05; }
  .button { min-height: 44px; font-size: .8rem; }
  .back-button, .text-button { min-height: 44px; display: inline-flex; align-items: center; padding: .55rem .25rem; }
  .auth-card { width: calc(100% - 1rem); padding: 1.5rem 1.15rem; }
  .auth-intro { padding: 2rem 1rem 2.6rem; }
  .auth-intro h1 { font-size: 2.55rem; }
  .feature-list { font-size: .84rem; }
  .security-note { display: none; }
  .page-heading { margin-bottom: 1.2rem; }
  .page-heading h1 { font-size: 2rem; }
  .page-heading-actions { display: grid; }
  .page-heading-actions > .button { width: 100%; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-card::after { display: none; }
  .summary-card strong { font-size: 1.35rem; }
  .content-card { border-radius: 17px; }
  .filter-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .filter-bar .search-field { grid-column: 1 / -1; }
  .filter-bar select { min-width: 0; }
  .ticket-card { gap: .55rem; padding: .85rem; }
  .ticket-meta { min-width: 78px; }
  .ticket-title { font-size: .86rem; }
  .status-badge { max-width: 175px; white-space: normal; }
  .grid-form { grid-template-columns: 1fr; }
  .grid-span { grid-column: 1; }
  .form-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .form-actions .button { min-width: 0; }
  .device-grid { grid-template-columns: 1fr; }
  .profile-form { grid-template-columns: 1fr; }
  .profile-form .button { grid-column: 1; width: 100%; }
  .stage-top { display: grid; }
  .waiting-pill { justify-self: start; }
  .stage-progress { gap: 0; }
  .stage-step { font-size: .57rem; }
  .quote-header { display: grid; }
  .quote-total { text-align: left; }
  .quote-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .shipping-card { grid-template-columns: 1fr; }
  .message { max-width: 92%; }
  .composer-actions { align-items: stretch; }
  .attachment-button, .composer-actions .button { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .portal-header, .portal-sidebar, .button, .message-composer, .toast-region { display: none !important; }
  .app-view { display: block; }
  .portal-content { max-width: none; padding: 0; }
  .content-card { break-inside: avoid; box-shadow: none; }
}