:root {
  --background: 216 35% 97%;
  --foreground: 222 34% 18%;
  --card: 0 0% 100%;
  --card-foreground: 222 34% 18%;
  --primary: 225 63% 49%;
  --primary-foreground: 0 0% 100%;
  --secondary: 216 32% 93%;
  --secondary-foreground: 222 34% 23%;
  --muted: 214 29% 94%;
  --muted-foreground: 215 14% 48%;
  --accent: 195 63% 93%;
  --accent-foreground: 215 65% 33%;
  --destructive: 0 67% 52%;
  --destructive-foreground: 0 0% 100%;
  --border: 216 24% 88%;
  --input: 216 24% 88%;
  --ring: 225 63% 49%;
  --radius: 0.8rem;
  --app-font-sans: 'DM Sans', sans-serif;
  --app-font-serif: 'Manrope', sans-serif;
  --app-font-mono: 'SFMono-Regular', Consolas, monospace;
  --sidebar: 216 35% 97%;
  --sidebar-foreground: 222 34% 18%;
  --sidebar-border: 216 24% 88%;
  --sidebar-primary: 225 63% 49%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 216 32% 93%;
  --sidebar-accent-foreground: 222 34% 23%;
  --sidebar-ring: 225 63% 49%;
}

.font-display { font-family: 'Manrope', sans-serif; }
.app-shell { min-height: 100dvh; background: radial-gradient(ellipse at 90% 0%, rgba(219,232,255,.45), transparent 35%), hsl(var(--background)); }
.surface { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); box-shadow: 0 8px 24px rgba(31,54,92,.045); }
.entrance { animation: rise-in .4s ease both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.topbar { height: 74px; border-bottom: 1px solid rgba(211,220,232,.76); background: rgba(255,255,255,.78); backdrop-filter: blur(14px); }
.topbar-inner { height: 100%; max-width: 1180px; padding: 0 30px; margin: auto; display: flex; justify-content: space-between; align-items: center; }
.brand { display: flex; align-items: center; gap: 13px; color: #293954; font-weight: 600; font-size: 13px; text-decoration: none; }
.brand img { width: 139px; height: auto; filter: brightness(.52) sepia(.35) saturate(1.4) hue-rotate(178deg); }
.brand-divider { height: 23px; width: 1px; background: #dce3ee; }
.top-actions { display: flex; gap: 20px; align-items: center; }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; background: #eff3f8; border: 1px solid #e5eaf1; border-radius: 8px; padding: 2px; }
.lang-switch button { min-width: 35px; min-height: 25px; border: 0; border-radius: 5px; padding: 4px 6px; color: #52627a; font-size: 10px; font-weight: 800; letter-spacing: .06em; cursor: pointer; background: transparent; }
.lang-switch button.selected { color: #1f315c; background: #fff; box-shadow: 0 1px 4px rgba(30,50,80,.16); }
.lang-switch button:hover { color: #304c9b; background-color: rgba(255,255,255,.7); }
.lang-switch > span { width: 1px; height: 12px; background: #d8e0e9; }
.quiet-link,.text-button { display: inline-flex; gap: 8px; align-items: center; border: 0; background: none; color: #64738a; font-size: 12px; cursor: pointer; text-decoration: none; }
.quiet-link:hover,.text-button:hover { color: #304c9b; }
.footer { max-width: 1180px; margin: 0 auto; padding: 24px 30px 27px; display: flex; justify-content: space-between; color: #8994a5; font-size: 11px; }
.footer span { display: inline-flex; align-items: center; gap: 6px; }
.footer-brand-link { color: inherit; font-weight: 700; text-decoration: none; }
.footer-brand-link:hover { color: #435fb4; text-decoration: underline; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 15px; }
.legal-nav a,.legal-related a { color: #586da8; text-decoration: none; }
.legal-nav a:hover,.legal-related a:hover { text-decoration: underline; }
.legal-page { max-width: 900px; margin: 0 auto; padding: 54px 30px 70px; }
.legal-header { margin-bottom: 23px; }
.legal-header h1 { margin: 13px 0 8px; color: #263653; font: 800 clamp(30px, 5vw, 42px)/1.2 'Manrope',sans-serif; letter-spacing: -.045em; }
.legal-header > p { max-width: 760px; margin: 8px 0 0; color: #68768b; font-size: 13px; line-height: 1.75; }
.legal-header .legal-updated { color: #8994a5; font-size: 11px; }
.legal-related { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 12px; }
.legal-content { padding: 27px 32px; border-radius: 13px; }
.legal-content section + section { margin-top: 25px; padding-top: 21px; border-top: 1px solid #edf0f4; }
.legal-content h2 { margin: 0 0 9px; color: #394963; font: 700 16px/1.45 'Manrope',sans-serif; }
.legal-content p,.legal-content li { color: #68768b; font-size: 12px; line-height: 1.8; }
.legal-content p { margin: 8px 0; }
.legal-content ul { display: grid; gap: 6px; margin: 10px 0; padding-left: 22px; }
.legal-content .legal-contact { margin-top: 25px; padding-top: 17px; border-top: 1px solid #edf0f4; }
.legal-contact a { color: #435fb4; font-weight: 700; }

.auth-layout { max-width: 1020px; min-height: calc(100dvh - 142px); margin: 0 auto; padding: 74px 30px 65px; display: grid; grid-template-columns: 1fr 420px; gap: 100px; align-items: center; }
.services-section { max-width: 1020px; margin: 0 auto; padding: 0 30px 70px; }
.services-heading { max-width: 630px; margin-bottom: 22px; }
.services-heading h2 { margin: 12px 0 0; color: #263653; font: 700 clamp(22px, 3vw, 30px)/1.3 'Manrope',sans-serif; letter-spacing: -.04em; }
.services-heading h2 strong { color: #435fb4; }
.services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.service-card { display: flex; min-height: 250px; flex-direction: column; align-items: flex-start; padding: 18px; border-radius: 12px; text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.service-card:hover { transform: translateY(-3px); border-color: #c6d2ed; box-shadow: 0 12px 28px rgba(31,54,92,.09); }
.service-card-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: #eaf0ff; color: #4967b6; font-size: 19px; }
.service-card h3 { margin: 15px 0 8px; color: #34435e; font: 700 13px/1.45 'Manrope',sans-serif; }
.service-card p { margin: 0 0 14px; color: #77859a; font-size: 10px; line-height: 1.65; }
.service-card-link { display: flex; gap: 6px; align-items: center; margin-top: auto; color: #4b63a8; font-size: 10px; font-weight: 700; }
.services-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 18px; padding: 22px 25px; border: 1px solid #d9e2f3; border-radius: 12px; background: linear-gradient(115deg, #eef3ff, #fff 75%); }
.services-cta h2 { margin: 0 0 6px; color: #293954; font: 700 17px/1.4 'Manrope',sans-serif; letter-spacing: -.025em; }
.services-cta p { max-width: 590px; margin: 0; color: #718096; font-size: 11px; line-height: 1.65; }
.services-cta-button { flex: 0 0 auto; background: #435fb4; color: #fff; box-shadow: 0 3px 9px rgba(51,75,149,.16); }
.services-cta-button:hover { background: #364f9f; }
.auth-copy { max-width: 455px; }
.eyebrow { display: flex; align-items: center; gap: 9px; text-transform: uppercase; color: #59709c; letter-spacing: .12em; font-size: 10px; font-weight: 700; }
.eyebrow-dot { width: 7px; height: 7px; background: #5275cb; border-radius: 50%; box-shadow: 0 0 0 4px #e8edfa; }
.auth-copy h1 { margin: 22px 0 15px; font-size: clamp(37px, 5vw, 52px); letter-spacing: -.055em; line-height: 1.12; color: #263653; }
.auth-copy > p { color: #68768b; line-height: 1.75; font-size: 15px; max-width: 430px; }
.service-note { display: flex; gap: 14px; align-items: center; margin-top: 39px; padding-top: 25px; border-top: 1px solid #dce4ee; }
.service-icon,.card-top-icon,.soft-icon,.help-icon { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; background: #eaf0ff; color: #4967b6; }
.service-note strong,.service-note span { display: block; }
.service-note strong { font-size: 12px; color: #34435e; margin-bottom: 5px; }
.service-note span { color: #8190a4; font-size: 11px; }
.auth-footer-note { display: flex; align-items: center; gap: 9px; margin-top: 43px; font-size: 11px; color: #8793a5; }
.signal-dot { width: 7px; height: 7px; border-radius: 50%; background: #69a993; }
.auth-card,.verify-card { border-radius: 17px; padding: 31px; }
.card-top-icon { margin-bottom: 17px; width: 40px; height: 40px; border-radius: 12px; }
.auth-card h2,.verify-card h1 { font-family: 'Manrope',sans-serif; font-size: 22px; line-height: 1.3; letter-spacing: -.035em; margin: 0 0 6px; color: #273652; }
.auth-card > p,.verify-card > p { font-size: 12px; color: #738198; line-height: 1.65; margin: 0 0 25px; }
.field-label { display: block; margin: 0 0 7px; color: #3f4d64; font-size: 12px; font-weight: 600; }
input:not([type=file]), select, textarea { width: 100%; min-height: 43px; padding: 11px 12px; border: 1px solid #dbe2ec; border-radius: 8px; background: #fff; color: #2b3850; font-size: 12px; transition: border-color .16s, box-shadow .16s; }
input::placeholder,textarea::placeholder { color: #a4adba; }
input:focus,select:focus,textarea:focus { border-color: #728bd0; outline: none; box-shadow: 0 0 0 3px rgba(91,118,194,.12); }
textarea { resize: vertical; line-height: 1.6; }
.helper-text { display: block; margin-top: 7px; color: #8793a5; font-size: 10px; line-height: 1.5; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 43px; padding: 0 17px; border-radius: 8px; border: 1px solid transparent; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .18s, background-color .18s, box-shadow .18s; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.button.primary { background: #435fb4; color: white; box-shadow: 0 3px 9px rgba(51,75,149,.16); }
.button.primary:hover { background: #364f9f; box-shadow: 0 6px 16px rgba(51,75,149,.2); }
.button.secondary { background: #fff; border-color: #dce3ec; color: #45546d; }
.button.secondary:hover { background: #f7f9fc; }
.button.full { width: 100%; margin-top: 17px; }
.divider-label { display: flex; align-items: center; gap: 12px; margin: 23px 0 14px; color: #8994a5; font-size: 10px; }
.divider-label::before,.divider-label::after { content: ''; flex: 1; border-top: 1px solid #e8edf2; }
.demo-access { margin: 22px -31px -31px; padding: 18px 31px; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #f6f8fc; border-radius: 0 0 16px 16px; border-top: 1px solid #edf0f5; }
.demo-access strong,.demo-access span { display: block; }
.demo-access strong { font-size: 11px; color: #42516b; margin-bottom: 4px; }
.demo-access span { color: #8793a5; font-size: 10px; }
.demo-access a { display: inline-flex; gap: 6px; align-items: center; text-decoration: none; color: #3f5cae; font-size: 10px; font-weight: 700; white-space: nowrap; }
.verify-wrap { max-width: 480px; margin: 0 auto; padding: 42px 24px 80px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #6a7890; text-decoration: none; margin-bottom: 22px; }
.back-link:hover { color: #3b59a6; }
.verify-card { padding: 34px; }
.verify-card h1 { font-size: 25px; }
.verify-card > p { margin-bottom: 26px; }
.verify-card > p strong { color: #405478; }
.code-input { text-align: center; letter-spacing: .42em; font-size: 20px !important; font-weight: 700; padding-left: 20px !important; }
.verify-card .helper-text { margin: 9px 0 0; }
.verify-card .text-button { margin: 18px auto 0; display: flex; justify-content: center; color: #516aa9; font-size: 11px; }
.field-error { color: #b34242; font-size: 11px; margin: 8px 0 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.form-page,.dashboard-page,.ticket-detail-page { max-width: 1050px; margin: 0 auto; padding: 35px 30px 64px; }
.page-heading { margin: 4px 0 24px; }
.page-heading h1,.dashboard-head h1,.ticket-title-line h1 { margin: 12px 0 6px; font-family: 'Manrope',sans-serif; letter-spacing: -.045em; font-size: 31px; line-height: 1.25; color: #263653; }
.page-heading p,.dashboard-head p,.ticket-title-line p { margin: 0; color: #77859a; font-size: 12px; line-height: 1.6; }
.request-form { border-radius: 13px; padding: 0 28px; }
.form-section { padding: 24px 0 25px; border-bottom: 1px solid #e9edf2; }
.form-section h2 { margin: 0 0 19px; color: #384963; font: 700 13px 'Manrope',sans-serif; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 16px; }
.field { min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.required-mark { color: #5271bd; font-weight: 700; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237989a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 35px; }
.file-control { position: relative; min-height: 47px; border: 1px dashed #cbd6e4; border-radius: 8px; padding: 12px; display: flex; gap: 9px; align-items: center; color: #687991; font-size: 11px; cursor: pointer; }
.file-control:hover { border-color: #8195c7; background: #fafbfe; }
.file-control input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.remove-file { margin-left: auto; z-index: 1; border: 0; color: #738198; background: transparent; cursor: pointer; padding: 3px; }
.guest-note { display: flex; align-items: flex-start; gap: 9px; padding: 17px 0 0; color: #77859a; font-size: 10px; line-height: 1.6; }
.guest-note svg { color: #647db7; flex: 0 0 auto; }
.form-bottom { padding: 19px 0 22px; display: flex; justify-content: space-between; align-items: center; }
.small-muted { color: #8995a6; font-size: 10px; }
.form-alert { margin-top: 18px; padding: 11px 13px; color: #984848; background: #fff1f0; border: 1px solid #f0d4d1; border-radius: 7px; font-size: 11px; }
.success-page { max-width: 570px; text-align: center; padding: 100px 24px 115px; margin: 0 auto; }
.success-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 20px; border-radius: 50%; background: #e4f3ed; color: #458f70; }
.success-page .eyebrow { display: block; font-size: 10px; margin-bottom: 13px; }
.success-page h1 { color: #293954; font-size: 31px; letter-spacing: -.04em; margin: 0 0 9px; }
.success-page > p { margin: 0 auto; max-width: 410px; color: #77859a; font-size: 12px; line-height: 1.7; }
.success-id { display: flex; align-items: center; justify-content: space-between; max-width: 350px; padding: 15px 17px; margin: 27px auto 21px; border: 1px solid #e2e8f0; border-radius: 9px; color: #748197; background: white; font-size: 11px; }
.success-id strong { color: #304b91; font-size: 13px; }
.success-actions { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; }

.dashboard-page { padding-top: 48px; }
.dashboard-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 28px; gap: 16px; }
.dashboard-head h1 { font-size: 30px; margin-top: 11px; }
.dashboard-head .button { min-width: 135px; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 26px; }
.summary-card { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 11px; }
.summary-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; }
.summary-icon.blue { background: #edf1ff; color: #5168b5; }
.summary-icon.amber { background: #fff3e2; color: #b58237; }
.summary-icon.teal { background: #e8f5f3; color: #4c938c; }
.summary-card span,.summary-card strong,.summary-card small { display: block; }
.summary-card span { color: #6e7b91; font-size: 10px; }
.summary-card strong { color: #2a3954; font: 700 22px 'Manrope',sans-serif; margin: 2px 0; }
.summary-card small { color: #96a0af; font-size: 9px; }
.tickets-panel { border-radius: 12px; overflow: hidden; }
.panel-head { padding: 22px 22px 14px; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.panel-head h2,.ticket-sidebar h2 { font: 700 15px 'Manrope',sans-serif; margin: 0 0 5px; color: #34445f; }
.panel-head p { margin: 0; font-size: 10px; color: #8b96a6; }
.ticket-filters { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.filter { border: 1px solid transparent; padding: 7px 9px; border-radius: 6px; color: #77859a; background: transparent; font-size: 9px; cursor: pointer; }
.filter:hover { background: #f6f8fb; color: #435b9d; }
.filter.active { color: #415da9; background: #edf1fc; border-color: #e5eafa; font-weight: 700; }
.ticket-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 85px; padding: 15px 22px; border-top: 1px solid #edf0f4; text-decoration: none; transition: background .15s; }
.ticket-row:hover { background: #f9fbfe; }
.ticket-main { min-width: 0; }
.ticket-id { font-size: 9px; color: #8b98aa; letter-spacing: .04em; font-weight: 700; }
.ticket-main h3 { margin: 4px 0 5px; font-size: 12px; color: #394963; font-weight: 600; }
.ticket-project { font-size: 10px; color: #8793a4; }
.ticket-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; color: #8793a4; font-size: 10px; }
.status-pill { display: inline-flex; white-space: nowrap; padding: 5px 8px; border-radius: 20px; font-size: 9px; font-weight: 700; }
.status-pill.open { background: #eaf0ff; color: #4c63ae; }
.status-pill.in-progress { background: #fff3df; color: #9f7129; }
.status-pill.waiting-for-client { background: #f1edff; color: #7056a4; }
.status-pill.resolved { background: #e8f4ef; color: #49856c; }
.status-pill.large { font-size: 10px; padding: 7px 11px; }
.priority-indicator { display: inline-flex; align-items: center; gap: 5px; min-width: 43px; }
.priority-indicator::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #92a0b0; }
.priority-high::before,.priority-urgent::before { background: #d47a68; }
.priority-medium::before { background: #d6a24c; }
.row-arrow { color: #a7b1bf; }
.table-foot { display: flex; justify-content: space-between; border-top: 1px solid #edf0f4; padding: 11px 22px; color: #9aa4b1; font-size: 9px; }
.empty-state { text-align: center; padding: 48px 20px; }
.empty-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 13px; border-radius: 14px; color: #5a71b3; background: #edf1fc; }
.empty-state h3 { font: 700 14px 'Manrope',sans-serif; margin: 0 0 6px; color: #384760; }
.empty-state p { max-width: 310px; margin: 0 auto 15px; color: #8995a6; font-size: 11px; line-height: 1.6; }
.dashboard-help { display: flex; align-items: center; gap: 13px; margin-top: 19px; padding: 16px 18px; border: 1px solid #e0e8f3; background: rgba(245,248,253,.8); border-radius: 10px; }
.dashboard-help .help-icon { width: 36px; height: 36px; border-radius: 10px; }
.dashboard-help div:nth-child(2) { flex: 1; }
.dashboard-help strong,.dashboard-help span { display: block; }
.dashboard-help strong { font-size: 11px; color: #40516d; margin-bottom: 3px; }
.dashboard-help span { font-size: 10px; color: #8190a4; }
.dashboard-help > a { display: flex; align-items: center; gap: 5px; color: #4a63a9; font-weight: 700; text-decoration: none; font-size: 10px; white-space: nowrap; }

.ticket-detail-page { padding-top: 37px; }
.ticket-title-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; padding-bottom: 22px; }
.ticket-title-line h1 { font-size: 26px; }
.ticket-title-line > .status-pill { margin-top: 23px; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 255px; align-items: start; gap: 18px; }
.detail-main { display: grid; gap: 16px; }
.detail-card,.conversation-card,.ticket-sidebar { border-radius: 11px; padding: 20px; }
.section-title { display: flex; align-items: center; gap: 10px; }
.section-title h2 { margin: 0; color: #394963; font: 700 13px 'Manrope',sans-serif; }
.section-title p { margin: 3px 0 0; color: #8b96a6; font-size: 10px; }
.soft-icon { width: 34px; height: 34px; border-radius: 10px; }
.detail-description { color: #5f6e84; font-size: 12px; line-height: 1.75; white-space: pre-wrap; margin: 19px 0 0; }
.detail-subsection { margin-top: 18px; padding-top: 15px; border-top: 1px solid #edf0f4; }
.detail-subsection span { color: #77859a; font-size: 10px; font-weight: 600; }
.detail-subsection p { margin: 7px 0 0; color: #596981; font-size: 11px; line-height: 1.7; white-space: pre-line; }
.attached-file { display: inline-flex; align-items: center; gap: 7px; color: #566ca7; font-size: 10px; padding: 7px 10px; border-radius: 7px; background: #f2f5fc; margin-top: 14px; }
.messages { display: grid; gap: 20px; margin: 23px 0; }
.message { display: flex; gap: 11px; align-items: flex-start; }
.message-avatar { flex: 0 0 auto; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: #eaf0ff; color: #4c62ac; font-size: 9px; font-weight: 700; }
.message.team .message-avatar { background: #e8f3ef; color: #438269; }
.message-content { flex: 1; min-width: 0; }
.message-head { display: flex; align-items: center; gap: 10px; margin: 1px 0 6px; }
.message-head strong { color: #41516b; font-size: 10px; }
.message-head time { color: #9aa4b1; font-size: 9px; }
.message-content p { margin: 0; color: #69778c; font-size: 11px; line-height: 1.7; }
.reply-form { padding-top: 16px; border-top: 1px solid #edf0f4; }
.reply-form textarea { min-height: 72px; }
.reply-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 8px; }
.reply-bottom > span { color: #98a2af; font-size: 9px; }
.reply-bottom .button { min-height: 36px; }
.inline-success { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 7px; background: #eaf5ef; color: #468269; font-size: 10px; margin: -5px 0 12px; }
.ticket-sidebar h2 { padding-bottom: 15px; border-bottom: 1px solid #edf0f4; }
.detail-item { display: grid; gap: 5px; margin-top: 15px; }
.detail-item span { color: #8995a5; font-size: 9px; }
.detail-item strong { color: #46566f; font-size: 10px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.project-out { display: inline-flex; align-items: center; gap: 5px; color: #5169a9; font-size: 9px; margin-top: 7px; text-decoration: none; overflow-wrap: anywhere; }
.side-divider { margin-top: 16px; border-top: 1px solid #edf0f4; }
.not-found { min-height: 65vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px; text-align: center; }
.not-found h1 { margin: 0; font-size: 24px; color: #34435e; }

@media (max-width: 780px) {
  .services-section { max-width: 500px; padding: 0 30px 52px; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card { min-height: 230px; }
  .services-cta { align-items: flex-start; flex-direction: column; }
  .auth-layout { grid-template-columns: 1fr; max-width: 500px; gap: 32px; padding-top: 42px; }
  .auth-copy h1 { max-width: 420px; font-size: 39px; margin-top: 16px; }
  .auth-copy > p { font-size: 13px; }
  .service-note { margin-top: 22px; padding-top: 18px; }
  .auth-footer-note { margin-top: 18px; }
  .auth-card { margin-bottom: 15px; }
  .summary-grid { grid-template-columns: 1fr; gap: 9px; }
  .summary-card { padding: 13px 15px; }
  .summary-card > div:last-child { display: grid; grid-template-columns: 1fr auto; align-items: baseline; flex: 1; }
  .summary-card strong { grid-column: 2; grid-row: 1 / span 2; }
  .summary-card small { grid-column: 1; }
  .panel-head { display: block; }
  .ticket-filters { justify-content: flex-start; margin-top: 16px; }
  .ticket-row { align-items: flex-start; padding: 15px; }
  .ticket-meta { gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 170px; }
  .ticket-meta time { display: none; }
  .detail-layout { grid-template-columns: 1fr; }
  .ticket-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 15px; }
  .ticket-sidebar h2,.ticket-sidebar .side-divider { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .legal-nav { gap: 10px 14px; }
  .legal-page { padding: 35px 16px 45px; }
  .legal-content { padding: 21px 18px; }
  .services-section { padding: 0 16px 40px; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card { min-height: auto; }
  .services-cta { gap: 15px; padding: 19px; }
  .services-cta-button { width: 100%; }
  .topbar { height: 64px; }
  .topbar-inner { padding: 0 16px; }
  .brand { gap: 8px; font-size: 10px; }
  .brand img { width: 111px; }
  .brand-divider { height: 18px; }
  .top-actions { gap: 8px; }
  .quiet-link { font-size: 0; }
  .quiet-link svg { width: 17px; height: 17px; }
  .footer { padding: 20px 16px; gap: 12px; flex-direction: column; }
  .auth-layout { padding: 34px 16px 40px; gap: 23px; }
  .auth-copy h1 { font-size: 35px; }
  .auth-card { padding: 24px 20px; }
  .demo-access { margin: 22px -20px -24px; padding: 16px 20px; align-items: flex-start; flex-direction: column; }
  .form-page,.dashboard-page,.ticket-detail-page { padding: 25px 15px 40px; }
  .page-heading h1,.dashboard-head h1 { font-size: 26px; }
  .request-form { padding: 0 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .field.wide { grid-column: auto; }
  .form-section { padding: 20px 0; }
  .form-bottom { gap: 8px; align-items: flex-start; flex-direction: column; }
  .form-bottom .button { width: 100%; }
  .dashboard-head { align-items: flex-start; flex-direction: column; }
  .dashboard-head .button { width: 100%; }
  .ticket-row { gap: 10px; }
  .ticket-main h3 { line-height: 1.5; }
  .ticket-meta { max-width: 120px; }
  .ticket-meta .priority-indicator { display: none; }
  .status-pill { font-size: 8px; padding: 5px 7px; }
  .dashboard-help { flex-wrap: wrap; align-items: flex-start; }
  .dashboard-help > a { margin-left: 49px; }
  .ticket-title-line { flex-direction: column; }
  .ticket-title-line > .status-pill { margin-top: 0; }
  .ticket-title-line h1 { font-size: 22px; }
  .detail-card,.conversation-card,.ticket-sidebar { padding: 16px; }
  .ticket-sidebar { grid-template-columns: 1fr 1fr; }
  .reply-bottom { align-items: flex-start; flex-direction: column; }
  .reply-bottom .button { width: 100%; }
  .verify-wrap { padding: 28px 15px 60px; }
  .verify-card { padding: 25px 21px; }
}

* { box-sizing: border-box; }
body { margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--app-font-sans); }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
.lang-switch form { display: contents; }
.portal-nav { display: flex; align-items: center; gap: 18px; }
.portal-nav a { color: #718096; font-size: 11px; text-decoration: none; }
.portal-nav a:hover,.portal-nav a.current { color: #405ba7; }
.top-actions > form { margin: 0; }
.password-label { margin-top: 15px; }
.remember-control { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #738198; font-size: 11px; cursor: pointer; }
.remember-control input { width: auto; min-height: 0; margin: 0; accent-color: #435fb4; }
.auth-card .form-alert { margin: -8px 0 16px; }
.auth-card .demo-access { align-items: flex-start; flex-direction: column; }
.demo-access > span { line-height: 1.5; }
.view-all-link,.section-heading > a { display: inline-flex; align-items: center; gap: 6px; color: #4a63a9; font-size: 10px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.dashboard-projects { margin-top: 27px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 13px; }
.section-heading h2 { margin: 0 0 4px; color: #394963; font: 700 14px 'Manrope',sans-serif; }
.section-heading p { margin: 0; color: #8793a4; font-size: 10px; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.project-grid-page { margin-top: 20px; }
.project-card { position: relative; display: flex; min-height: 190px; flex-direction: column; align-items: flex-start; padding: 19px; border-radius: 11px; text-decoration: none; transition: transform .18s, box-shadow .18s; }
.project-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(31,54,92,.09); }
.project-mark { position: absolute; top: 17px; right: 18px; color: #778bbd; font-size: 18px; }
.project-state { color: #49856c; background: #e8f4ef; border-radius: 16px; padding: 4px 8px; font-size: 9px; font-weight: 700; }
.project-card h3 { margin: 15px 0 6px; color: #394963; font: 700 13px 'Manrope',sans-serif; }
.project-card p { margin: 0 0 13px; color: #77859a; font-size: 10px; line-height: 1.6; }
.project-url { color: #8390a3; font-size: 9px; overflow-wrap: anywhere; }
.project-card-link { display: flex; justify-content: space-between; width: 100%; margin-top: auto; padding-top: 14px; color: #4b63a8; font-size: 9px; font-weight: 700; }
.project-detail-head { margin: 14px 0 23px; }
.project-detail-head h1 { margin-top: 10px; }
.project-ticket-panel { padding: 0; overflow: hidden; }
.project-ticket-panel .panel-head { padding: 18px 20px; }
.project-ticket-panel .ticket-row { padding-right: 20px; padding-left: 20px; }
.field-error { color: #b34242; font-size: 11px; margin: 8px 0 0; }
.success-actions { justify-content: center; }
.success-id { display: flex; }
.file-control input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.ticket-title-line > .priority-indicator { margin-top: 26px; }

@media (max-width: 780px) {
  .portal-nav { gap: 10px; }
  .project-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .brand img { width: 94px; }
  .portal-nav { display: none; }
  .brand { font-size: 9px; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card { min-height: 165px; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .ticket-title-line > .priority-indicator { margin: -5px 0 0; }
}

.admin-actions { display: flex; gap: 9px; }
.admin-actions .button { white-space: nowrap; }
.admin-table-panel { border-radius: 11px; overflow: hidden; }
.admin-client-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.admin-client-card { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 16px; border-radius: 10px; }
.client-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #eaf0ff; color: #4c62ac; font-size: 12px; font-weight: 700; }
.admin-client-card h3 { margin: 0 0 4px; color: #394963; font: 700 11px 'Manrope',sans-serif; }
.admin-client-card p,.admin-client-card small { display: block; margin: 0 0 5px; color: #8190a4; font-size: 9px; overflow-wrap: anywhere; }
.admin-client-card small { color: #98a2af; }
.admin-form-card { max-width: 850px; margin: 0 auto; padding: 23px 27px 0; border-radius: 12px; }
.admin-form-card > h2 { margin: 0 0 6px; color: #394963; font: 700 15px 'Manrope',sans-serif; }
.admin-form-card > p { margin: 0 0 20px; color: #8793a4; font-size: 10px; }
.admin-form-card .form-bottom { margin-top: 9px; border-top: 1px solid #e9edf2; }
.admin-lower-panel { margin-top: 22px; }
.admin-list-row { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-top: 1px solid #edf0f4; }
.admin-list-row > div { display: grid; flex: 1; gap: 3px; min-width: 0; }
.admin-list-row strong { color: #46566f; font-size: 11px; }
.admin-list-row small,.admin-list-row > span:last-child { color: #8793a4; font-size: 9px; }
.status-form { display: grid; gap: 9px; padding-top: 14px; }
.status-form .button.full { margin-top: 2px; }
.admin-ticket-count { color: #8b96a6; font-size: 10px; }
.admin-filter-head { align-items: flex-start; gap: 18px; }
.admin-filters { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.admin-filters select,.admin-filters input { min-height: 36px; padding: 8px 10px; border: 1px solid #e1e6ee; border-radius: 7px; background: #fff; color: #46566f; font-size: 10px; }
.admin-filters input[type=search] { width: 155px; }
.admin-filters .button { min-height: 36px; padding: 8px 12px; }
.project-filters { justify-content: flex-start; padding: 14px; border-radius: 10px; }
.clear-filter { color: #586da8; font-size: 10px; font-weight: 700; text-decoration: none; }
.admin-actions form { margin: 0; }
.button.danger { border: 1px solid #f0d5d5; background: #fff7f7; color: #a33e3e; }
.button.danger:hover { background: #ffeded; }
.admin-project-meta { overflow-wrap: anywhere; }

@media (max-width: 780px) {
  .admin-client-grid { grid-template-columns: 1fr 1fr; }
  .admin-actions { flex-wrap: wrap; }
  .admin-filter-head { flex-direction: column; }
  .admin-filters { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .admin-actions { width: 100%; }
  .admin-actions .button { flex: 1; }
  .admin-client-grid { grid-template-columns: 1fr; }
  .admin-form-card { padding: 20px 16px 0; }
  .admin-list-row { padding: 12px; }
  .admin-list-row > span:last-child { display: none; }
  .admin-filters { width: 100%; }
  .admin-filters label { flex: 1 1 140px; }
  .admin-filters select,.admin-filters input[type=search] { width: 100%; }
}