:root{--brand:#d8127e;--brand-2:#b10f67;--accent:#f04ea7;--bg:#f6f8fb;--card:#ffffff;--text:#102027;--muted:#5b6b78;--border:#e6ebf0;--shadow:0 8px 24px rgba(16,32,39,.08);--success:#1f9d63;--warning:#d98a12;--danger:#c53d3d}.theme-dark{--brand:#d8127e;--brand-2:#b10f67;--accent:#ff74bd;--bg:linear-gradient(160deg,#384357 0%,#0e2030 100%);--card:#0f1a2b;--text:#e7eef5;--muted:#a8b3c1;--border:rgba(255,255,255,.06);--shadow:0 8px 24px rgba(0,0,0,.35);--success:#3ecf8e;--warning:#f0b24e;--danger:#ff8c8c}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Arial,sans-serif;transition:background-color .25s,color .25s,background .25s}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.app-shell{min-height:100%;display:flex;flex-direction:column}.container{max-width:1180px;margin:0 auto;padding:24px;width:100%}.header{position:sticky;top:0;z-index:30;background:#ffffffb8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}.theme-dark .header{background:#0b1220b8}.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:82px}.logo{display:flex;align-items:center;gap:14px}.logo-mark{height:56px;width:56px;object-fit:cover;border-radius:12px;box-shadow:var(--shadow);border:1px solid var(--border);background:#fff}.brand-stack{display:grid;gap:2px}.brand{font-weight:800;letter-spacing:.2px;color:var(--brand);font-size:1.1rem}.brand-sub{color:var(--muted);font-size:.92rem}.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.theme-toggle,.ghost-button,.button,.status-pill{border-radius:12px}.theme-toggle,.ghost-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:#fff;color:var(--text);padding:10px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:700;transition:transform .18s ease,border-color .18s ease,background .18s ease}.theme-dark .theme-toggle,.theme-dark .ghost-button{background:#ffffff08}.theme-toggle:hover,.ghost-button:hover{transform:translateY(-1px);border-color:#d8127e59}.theme-toggle:disabled,.ghost-button:disabled,.button:disabled{opacity:.65;cursor:not-allowed;transform:none}.user-pill{display:inline-flex;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid rgba(216,18,126,.22);background:#d8127e14;color:#8c0d52;font-weight:700}.theme-dark .user-pill{color:#ffc4e3;background:#ff74bd24;border-color:#ff74bd42}.theme-toggle svg{width:18px;height:18px;display:block}.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:stretch;padding:36px 0 18px}.hero-card,.panel,.ticket-card,.timeline-card,.empty-state,.metric-card,.form-card{background:var(--card);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow)}.hero-card{padding:30px;position:relative;overflow:hidden;isolation:isolate}.hero-card:before{content:"";position:absolute;inset:auto -80px -100px auto;width:240px;height:240px;border-radius:999px;background:radial-gradient(circle,rgba(216,18,126,.18),transparent 68%);z-index:-1}.hero-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid rgba(216,18,126,.22);background:#d8127e14;color:#8c0d52;font-size:.82rem;font-weight:800;margin-bottom:14px}.theme-dark .hero-kicker{color:#ffc4e3;background:#ff74bd24;border-color:#ff74bd42}.hero h1{margin:0 0 10px;font-size:clamp(2rem,4vw,3.25rem);line-height:1.06;color:#0c1b23}.theme-dark .hero h1{color:var(--text)}.hero p{margin:0;color:var(--muted);line-height:1.65;max-width:62ch}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:var(--brand);color:#fff;padding:13px 16px;font-weight:800;cursor:pointer;box-shadow:var(--shadow);transition:transform .18s ease,background .18s ease,filter .18s ease}.button:hover{background:var(--brand-2);transform:translateY(-1px)}.button.secondary{background:#fff;color:var(--brand);border:1px solid var(--border)}.theme-dark .button.secondary{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.15)}.hero-side{display:grid;gap:16px}.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.metric-card{padding:18px}.metric-label{color:var(--muted);font-size:.92rem;margin-bottom:8px}.metric-value{font-size:1.8rem;font-weight:900;color:#0c1b23}.theme-dark .metric-value{color:var(--text)}.panel{padding:22px}.panel h2,.section-title{margin:0 0 8px;color:#0c1b23}.theme-dark .panel h2,.theme-dark .section-title{color:var(--text)}.panel-copy,.section-subtitle{margin:0;color:var(--muted);line-height:1.6}.main-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:24px;padding:18px 0 38px}.loading-shell{padding-top:80px;padding-bottom:80px}.portal-alert,.form-error{border-radius:16px;border:1px solid rgba(197,61,61,.24);background:#c53d3d14;color:#8f2323}.portal-alert{padding:14px 16px;margin-bottom:10px}.form-error{padding:12px 14px;font-size:.94rem;line-height:1.5}.theme-dark .portal-alert,.theme-dark .form-error{background:#ff8c8c1f;border-color:#ff8c8c3d;color:#ffd0d0}.sidebar{display:grid;gap:18px;align-self:start}.form-card{padding:22px}.form-card h3{margin:0 0 8px;color:#0c1b23}.theme-dark .form-card h3{color:var(--text)}.form-card p{margin:0 0 18px;color:var(--muted)}.form-grid{display:grid;gap:14px}.field{display:grid;gap:8px}.field label{font-size:.94rem;font-weight:700;color:var(--text)}.input,.select,.textarea{width:100%;background:#fff;border:2px solid #d0d7dd;border-radius:14px;padding:14px 16px;color:#102027;box-shadow:0 3px 8px #0000000a;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}.input::placeholder,.textarea::placeholder{color:#8a99a8}.input:hover,.select:hover,.textarea:hover{border-color:#b0bcc7;box-shadow:0 3px 8px #00000014}.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #f04ea740}.select{appearance:none;-webkit-appearance:none;-moz-appearance:none;min-height:54px;padding:12px 48px 12px 16px;line-height:normal;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238a99a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 16px center;background-size:18px}.textarea{min-height:150px;resize:vertical}.theme-dark .input,.theme-dark .select,.theme-dark .textarea{background:#ffffff0f;border:2px solid rgba(255,255,255,.18);color:var(--text);box-shadow:0 3px 8px #00000040}.theme-dark .input:focus,.theme-dark .select:focus,.theme-dark .textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #ff74bd4d}.theme-dark .select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a8b3c1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")}.form-note{font-size:.88rem;color:var(--muted);line-height:1.55}.content{display:grid;gap:18px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.search{min-width:260px}.status-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);background:#fff;color:var(--text);font-size:.92rem;font-weight:700}.theme-dark .status-pill{background:#ffffff08}.status-dot{width:9px;height:9px;border-radius:999px;background:var(--muted)}.status-open .status-dot{background:var(--success)}.status-pending .status-dot{background:var(--warning)}.status-closed .status-dot{background:var(--danger)}.ticket-list{display:grid;gap:14px}.ticket-card{padding:18px 18px 16px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;cursor:pointer}.ticket-card:hover{transform:translateY(-2px);border-color:#d8127e59}.ticket-card.active{border-color:#d8127e8c;box-shadow:0 18px 34px #1020271f,0 0 0 3px #d8127e1f}.ticket-card-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.ticket-card-title{margin:0 0 6px;font-size:1.08rem;color:#0c1b23}.theme-dark .ticket-card-title{color:var(--text)}.ticket-card-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:.9rem}.badge{display:inline-flex;align-items:center;gap:6px;background:#d8127e1a;color:#8c0d52;padding:5px 10px;border-radius:999px;font-size:.78rem;font-weight:800;border:1px solid rgba(216,18,126,.28)}.theme-dark .badge{background:#ff74bd24;color:#ffc4e3;border:1px solid rgba(255,116,189,.28)}.ticket-card-preview{margin:12px 0 0;color:var(--muted);line-height:1.6}.ticket-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px}.timeline-card{padding:22px}.timeline-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.timeline-header h3{margin:0 0 6px;color:#0c1b23}.theme-dark .timeline-header h3{color:var(--text)}.timeline-header p{margin:0;color:var(--muted);line-height:1.5}.message-list{display:grid;gap:14px}.message{display:grid;gap:8px;padding:14px 16px;border-radius:18px;background:#1020270a;border:1px solid rgba(16,32,39,.06)}.theme-dark .message{background:#ffffff0a;border-color:#ffffff0f}.message.customer{border-left:4px solid var(--brand)}.message.agent{border-left:4px solid var(--success)}.message-header{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.88rem}.message-author{font-weight:800;color:var(--text)}.message-body{color:var(--text);line-height:1.65;white-space:pre-wrap}.reply-box{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);display:grid;gap:12px}.side-stack{display:grid;gap:18px}.side-card{background:var(--card);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:18px}.side-card h4{margin:0 0 12px;color:#0c1b23}.theme-dark .side-card h4{color:var(--text)}.info-list{display:grid;gap:10px}.info-row{display:flex;justify-content:space-between;gap:16px;font-size:.94rem}.info-row span:first-child{color:var(--muted)}.empty-state{padding:32px;text-align:center}.empty-state h3{margin:0 0 8px}.empty-state p{margin:0;color:var(--muted);line-height:1.6}.footer{margin-top:auto;border-top:1px solid var(--border);padding:24px 0 34px;color:var(--muted);background:#fff}.theme-dark .footer{background:transparent}.footer-inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.footer-links{display:flex;gap:14px;flex-wrap:wrap}.login-shell{display:grid;align-items:center;flex:1;padding-top:48px;padding-bottom:48px}.login-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:24px;align-items:stretch}.login-copy{display:grid;gap:22px;min-height:100%}.login-feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.login-card{align-self:center;padding:28px}.login-card-header{margin-bottom:18px}.login-card-header h2{margin:0 0 8px;color:#0c1b23}.theme-dark .login-card-header h2{color:var(--text)}.login-card-header p{margin:0;color:var(--muted);line-height:1.6}@media (max-width: 980px){.hero,.main-grid,.ticket-layout,.login-layout{grid-template-columns:1fr}}@media (max-width: 720px){.container{padding:18px}.nav{align-items:flex-start;min-height:auto;padding:10px 0;flex-direction:column}.header-actions{width:100%;justify-content:space-between}.metric-grid,.login-feature-list{grid-template-columns:1fr}.toolbar{align-items:stretch}.toolbar-left,.toolbar-right{width:100%}.search{min-width:0;width:100%}.ticket-card-header,.timeline-header,.footer-inner{flex-direction:column}}