@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root { --bg: #f7f8fc; --surface: #fff; --ink: #17233d; --muted: #7b879e; --muted-2: #aab3c4; --line: #e6eaf1; --primary: #7954e8; --primary-dark: #6740da; --primary-soft: #f1edff; --blue: #4d78ea; --blue-soft: #edf2ff; --green: #2eb183; --green-soft: #e9f8f2; --amber: #e2a51f; --amber-soft: #fff6df; --red: #e56b76; --red-soft: #fff0f2; --shadow: 0 16px 44px rgba(42, 44, 84, .07); --shadow-soft: 0 7px 20px rgba(42, 44, 84, .05); --radius: 18px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'DM Sans', Arial, sans-serif; font-size: 14px; line-height: 1.5; }
button, input, textarea, select { font: inherit; }
button { border: 0; cursor: pointer; color: inherit; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 252px; min-height: 100vh; padding: 26px 16px 17px; background: rgba(255,255,255,.93); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: fixed; z-index: 30; inset: 0 auto 0 0; }
.brand { height: 45px; padding: 0 12px; display: flex; gap: 11px; align-items: center; margin-bottom: 30px; }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #9274f1, #6740da); border-radius: 10px 10px 10px 3px; box-shadow: 0 5px 12px rgba(121,84,232,.25); font: 800 17px Manrope, sans-serif; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy strong { font: 800 16px Manrope, sans-serif; letter-spacing: -.35px; }
.brand-copy span { color: var(--primary); font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; margin-top: 4px; }
.sidebar-close { display: none; margin-left: auto; }
.workspace-switcher { margin: 0 4px 31px; padding: 12px; display: flex; align-items: center; gap: 10px; background: #fafaff; border: 1px solid #e7e3fb; border-radius: 13px; }
.workspace-icon { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 10px; }
.workspace-icon svg { width: 17px; height: 17px; }
.workspace-switcher > div:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.workspace-switcher strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eyebrow { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.workspace-switcher .eyebrow { font-size: 9px; letter-spacing: .7px; margin-bottom: 2px; }
.workspace-switcher .chevron { width: 14px; height: 14px; margin-left: auto; color: var(--muted-2); }
.nav-section { display: flex; flex-direction: column; gap: 5px; }
.nav-section-bottom { margin-top: 27px; }
.nav-label { margin: 0 12px 8px; color: #acb4c5; font-size: 10px; font-weight: 700; letter-spacing: 1.05px; text-transform: uppercase; }
.nav-item { width: 100%; min-height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 12px; background: transparent; border-radius: 11px; color: #758098; text-align: left; transition: .2s ease; }
.nav-item:hover { color: var(--ink); background: #f8f7ff; }
.nav-item.active { color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.nav-item svg { width: 18px; height: 18px; }
.nav-item span { flex: 1; }
.nav-badge, .nav-count { min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--primary); font-size: 10px; }
.nav-count { color: #66718a; background: #f0f2f7; }
.nav-count.soft { color: var(--primary); background: #eee9ff; }
.sidebar-footer { margin-top: auto; padding: 16px 4px 0; border-top: 1px solid var(--line); }
.profile-mini { display: flex; align-items: center; gap: 9px; padding: 3px 4px 14px; }
.profile-mini > div:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.profile-mini strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-mini span { color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-mini > svg { width: 16px; height: 16px; margin-left: auto; color: var(--muted-2); }
.avatar { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; font-size: 10px; font-weight: 700; }
.avatar-purple { color: #6841d6; background: #e8e1ff; }
.logout-button { width: 100%; padding: 8px 4px; display: flex; align-items: center; gap: 9px; color: var(--muted); background: transparent; font-size: 12px; text-align: left; }
.logout-dot { width: 9px; height: 9px; border: 2px solid #a8b1c1; border-radius: 50%; }
.main-content { width: calc(100% - 252px); min-width: 0; margin-left: 252px; }
.topbar { height: 78px; padding: 0 clamp(23px, 4vw, 53px); display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.74); border-bottom: 1px solid var(--line); }
.topbar-left, .topbar-actions, .breadcrumb, .topbar-profile { display: flex; align-items: center; }
.topbar-left { gap: 15px; }
.breadcrumb { gap: 8px; color: var(--muted); font-size: 12px; }
.breadcrumb svg { width: 12px; height: 12px; color: #b8bfcc; transform: rotate(-90deg); }
.breadcrumb strong { color: var(--ink); font-weight: 600; }
.topbar-actions { gap: 12px; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: var(--muted); background: transparent; border-radius: 10px; transition: .2s ease; }
.icon-button:hover { color: var(--primary); background: var(--primary-soft); }
.menu-button { display: none; }
.quick-search { height: 38px; min-width: 246px; padding: 0 10px; display: flex; align-items: center; gap: 8px; color: var(--muted-2); background: #fff; border: 1px solid var(--line); border-radius: 10px; text-align: left; }
.quick-search span { flex: 1; font-size: 12px; }
kbd { color: #aab2c2; background: #f5f6f9; border: 1px solid #e9ebf0; border-radius: 5px; font: 10px 'DM Sans', sans-serif; padding: 2px 5px; }
.notification-button { position: relative; }
.notification-button i { width: 6px; height: 6px; position: absolute; top: 7px; right: 7px; background: #ed737d; border: 2px solid #fff; border-radius: 50%; }
.topbar-profile { gap: 8px; padding-left: 12px; border-left: 1px solid var(--line); }
.topbar-profile > div:nth-child(2) { display: flex; flex-direction: column; line-height: 1.25; }
.topbar-profile strong { font-size: 11px; }
.topbar-profile span { color: var(--muted); font-size: 10px; }
.topbar-profile > svg { width: 14px; height: 14px; margin-left: 4px; color: var(--muted-2); }
.content-wrap { max-width: 1500px; margin: 0 auto; padding: 38px clamp(23px, 4vw, 53px) 70px; }
.view { display: none; animation: fade-in .25s ease both; }
.view.active { display: block; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.page-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 25px; }
.page-intro h1 { margin: 4px 0 4px; color: var(--ink); font: 800 clamp(24px, 3vw, 31px)/1.15 Manrope, sans-serif; letter-spacing: -1px; }
.page-intro p { margin: 0; color: var(--muted); font-size: 13px; }
.accent-eyebrow { color: var(--primary); }
.wave { color: var(--amber); font-size: .8em; vertical-align: middle; }
.button { min-height: 42px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; font-size: 12px; font-weight: 700; transition: .2s ease; }
.button svg, .outline-button svg, .hero-link svg, .text-button svg { width: 15px; height: 15px; }
.button-primary { color: #fff; background: var(--primary); box-shadow: 0 8px 16px rgba(121,84,232,.16); }
.button-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 11px 20px rgba(121,84,232,.25); }
.outline-button { min-height: 39px; padding: 0 15px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; color: var(--primary); background: #fff; border: 1px solid #ddd5fb; border-radius: 9px; font-size: 12px; font-weight: 700; transition: .2s ease; }
.outline-button:hover { background: var(--primary-soft); border-color: #cfc3fa; }
.text-button { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); background: transparent; font-size: 12px; font-weight: 700; }
.text-button:hover { color: var(--primary-dark); }
.text-button.tiny { font-size: 11px; font-weight: 600; }
.hero-card { min-height: 236px; margin-bottom: 33px; padding: 31px 38px; position: relative; overflow: hidden; display: flex; justify-content: space-between; border-radius: 20px; color: #fff; background: radial-gradient(circle at 84% 25%, rgba(192,163,255,.32), transparent 34%), linear-gradient(118deg, #5f3cc9 0%, #7350de 52%, #8c6aeb 100%); box-shadow: 0 14px 34px rgba(86,55,184,.18); }
.hero-content { position: relative; z-index: 1; max-width: 420px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; color: #e5dcff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.14); border-radius: 7px; font-size: 10px; font-weight: 700; letter-spacing: .55px; text-transform: uppercase; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #94f0c6; box-shadow: 0 0 0 3px rgba(148,240,198,.16); }
.hero-card h2 { margin: 17px 0 6px; font: 800 29px/1.14 Manrope, sans-serif; letter-spacing: -1.2px; }
.hero-card h2 em { color: #f0dcff; font-style: normal; }
.hero-card p { max-width: 290px; margin: 0 0 19px; color: #ded6fb; font-size: 13px; }
.hero-link { display: inline-flex; align-items: center; gap: 10px; color: #fff; background: transparent; font-size: 12px; font-weight: 700; }
.hero-link:hover { color: #f1eaff; }
.hero-link svg { transition: .2s ease; }
.hero-link:hover svg { transform: translateX(3px); }
.hero-art { width: 310px; height: 195px; position: relative; margin: 2px 55px 0 0; }
.art-orbit { position: absolute; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; transform: rotate(-22deg); }
.orbit-one { width: 240px; height: 115px; top: 29px; left: 35px; }
.orbit-two { width: 290px; height: 145px; top: 16px; left: 10px; transform: rotate(28deg); }
.art-card { position: absolute; border: 1px solid rgba(255,255,255,.27); border-radius: 13px; box-shadow: 0 15px 22px rgba(55,32,139,.2); }
.art-card-back { width: 145px; height: 104px; top: 22px; left: 118px; background: rgba(255,255,255,.12); transform: rotate(9deg); }
.art-card-front { width: 172px; height: 126px; top: 44px; left: 78px; padding: 15px 16px; display: flex; flex-direction: column; background: rgba(255,255,255,.96); color: var(--ink); transform: rotate(-7deg); }
.art-check { width: 27px; height: 27px; display: grid; place-items: center; margin-bottom: 12px; color: var(--green); background: var(--green-soft); border-radius: 9px; }
.art-check svg { width: 15px; height: 15px; stroke-width: 2.3; }
.art-card-front span { color: var(--muted); font-size: 9px; }
.art-card-front strong { margin-top: 2px; font: 700 11px Manrope, sans-serif; }
.art-card-front small { margin-top: auto; color: var(--green); font-size: 9px; font-weight: 700; }
.art-spark { position: absolute; color: #f5d878; font-size: 20px; }
.spark-one { top: 13px; right: 20px; }.spark-two { bottom: 15px; left: 39px; font-size: 12px; color: #d9ccff; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; margin: 0 0 14px; }
.section-heading h2 { margin: 3px 0 0; font: 800 17px Manrope, sans-serif; letter-spacing: -.4px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.stat-card { min-height: 142px; padding: 17px 18px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow-soft); }
.stat-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.stat-icon, .ticket-icon, .solution-icon, .category-card-icon, .side-icon, .help-card-icon { display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; }
.stat-icon { width: 34px; height: 34px; }.stat-icon svg { width: 17px; height: 17px; }
.icon-blue { color: #4d78ea; background: var(--blue-soft); }.icon-amber { color: #cd9015; background: var(--amber-soft); }.icon-green { color: #23956c; background: var(--green-soft); }.icon-purple { color: var(--primary); background: var(--primary-soft); }
.trend { padding: 4px 6px; border-radius: 5px; font-size: 9px; font-weight: 700; }.trend-blue { color: var(--blue); background: var(--blue-soft); }.trend-amber { color: #ba7d0a; background: var(--amber-soft); }.trend-green { color: var(--green); background: var(--green-soft); }.trend-purple { color: var(--primary); background: var(--primary-soft); }
.stat-label { display: block; color: var(--muted); font-size: 11px; }.stat-value { display: block; margin: 1px 0 0; font: 800 24px Manrope, sans-serif; letter-spacing: -.8px; }.stat-card small { color: var(--muted-2); font-size: 10px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .9fr); gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.recent-panel, .quick-panel { min-height: 345px; padding: 22px 22px 17px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 17px; }.panel-heading h2 { margin: 0; font: 800 15px Manrope, sans-serif; letter-spacing: -.3px; }.panel-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }.panel-more { margin-top: -5px; }
.ticket-list { display: flex; flex-direction: column; }.ticket-row { min-height: 66px; padding: 9px 0; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto 17px; align-items: center; gap: 12px; border-top: 1px solid #f0f1f5; background: transparent; text-align: left; }.ticket-row:hover .ticket-info strong { color: var(--primary); }.ticket-icon { width: 34px; height: 34px; }.ticket-icon svg { width: 16px; height: 16px; }.ticket-info { min-width: 0; display: flex; flex-direction: column; }.ticket-info strong { overflow: hidden; color: #35415a; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; transition: .2s; }.ticket-info small { overflow: hidden; color: var(--muted-2); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.priority { width: max-content; padding: 4px 7px; border-radius: 5px; font-size: 9px; font-weight: 700; }.priority-high { color: #c96c29; background: #fff1e8; }.priority-normal { color: #778196; background: #f3f5f8; }.ticket-status { display: inline-flex; align-items: center; gap: 5px; width: max-content; color: var(--muted); font-size: 10px; font-weight: 600; white-space: nowrap; }.ticket-status i { width: 6px; height: 6px; display: block; border-radius: 50%; }.status-progress { color: var(--blue); }.status-progress i { background: var(--blue); }.status-waiting { color: #c68c14; }.status-waiting i { background: var(--amber); }.status-solved { color: var(--green); }.status-solved i { background: var(--green); }.row-arrow { width: 14px; height: 14px; color: #c1c8d5; transition: .2s; }.ticket-row:hover .row-arrow { color: var(--primary); transform: translateX(3px); }
.sparkle-icon { width: 28px; height: 28px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 8px; }
.search-field { height: 39px; padding: 0 11px; display: flex; align-items: center; gap: 8px; color: var(--muted-2); background: #fff; border: 1px solid var(--line); border-radius: 9px; transition: .2s; }.search-field:focus-within { border-color: #bcaef7; box-shadow: 0 0 0 3px rgba(121,84,232,.08); }.search-field input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); font-size: 11px; }.search-field input::placeholder { color: var(--muted-2); }.search-field svg { width: 16px; height: 16px; }.solution-list { margin: 10px 0 13px; }.solution-card { width: 100%; padding: 10px 0; display: flex; align-items: center; gap: 10px; background: transparent; border-bottom: 1px solid #f0f1f5; text-align: left; }.solution-card:hover strong { color: var(--primary); }.solution-icon { width: 31px; height: 31px; }.solution-icon svg { width: 15px; height: 15px; }.solution-card > span:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; }.solution-card strong { color: #35415a; font-size: 11px; transition: .2s; }.solution-card small { color: var(--muted-2); font-size: 10px; }.solution-card > svg { width: 13px; height: 13px; color: #b3bac8; }.full-button { width: 100%; height: 37px; }
.inner-intro { align-items: flex-end; }.back-link { margin-bottom: 15px; display: flex; align-items: center; gap: 4px; color: var(--primary); background: transparent; font-size: 11px; font-weight: 700; }.back-link svg { width: 14px; height: 14px; }.draft-badge, .approval-count { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 11px; }.draft-badge span { width: 6px; height: 6px; background: #65c7a4; border-radius: 50%; }
.stepper { max-width: 860px; margin: 0 auto 26px; padding: 0 12px; display: flex; align-items: center; justify-content: center; }.step { display: flex; align-items: center; gap: 8px; white-space: nowrap; }.step > span { width: 25px; height: 25px; display: grid; place-items: center; color: var(--muted); background: #fff; border: 1px solid #dfe4ec; border-radius: 50%; font-size: 10px; font-weight: 700; }.step.active > span { color: #fff; background: var(--primary); border-color: var(--primary); box-shadow: 0 4px 10px rgba(121,84,232,.2); }.step strong, .step small { display: block; line-height: 1.2; }.step strong { color: var(--muted); font-size: 10px; }.step small { color: var(--muted-2); font-size: 9px; margin-top: 2px; }.step.active strong { color: var(--ink); }.stepper > i { flex: 1; max-width: 75px; height: 1px; margin: 0 10px; background: #dfe4ec; }
.form-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(290px, .65fr); gap: 17px; align-items: start; }.form-main { min-width: 0; }.form-panel { padding: 24px; margin-bottom: 16px; }.form-heading { align-items: flex-start; margin-bottom: 22px; }.form-heading > div:first-child { display: flex; gap: 12px; }.number-bubble { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; color: var(--primary); background: var(--primary-soft); border-radius: 8px; font-size: 10px; font-weight: 800; }.form-heading h2 { margin-top: 4px; }.form-heading p { margin-top: 3px; }.required-note { color: var(--muted-2); font-size: 10px; }.required-note i, .field-label i { color: var(--red); font-style: normal; }.category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.category-card { min-height: 76px; padding: 12px; display: flex; align-items: center; gap: 10px; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 11px; text-align: left; transition: .2s ease; }.category-card:hover { border-color: #c9bdf8; background: #fcfbff; }.category-card.selected { border-color: #9b83ef; background: #faf8ff; box-shadow: 0 0 0 2px rgba(121,84,232,.09); }.category-card-icon { width: 33px; height: 33px; }.category-card-icon svg { width: 16px; height: 16px; }.category-card > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }.category-card strong { color: #35415a; font-size: 11px; }.category-card small { margin-top: 2px; color: var(--muted-2); font-size: 9px; line-height: 1.35; }.category-check { width: 15px; height: 15px; display: grid; place-items: center; position: absolute; top: 9px; right: 9px; color: transparent; border: 1px solid #dbe0ea; border-radius: 50%; }.category-check svg { width: 10px; height: 10px; stroke-width: 2.5; }.category-card.selected .category-check { color: #fff; background: var(--primary); border-color: var(--primary); }.form-fields { display: flex; flex-direction: column; }.field-label { margin: 0 0 7px; color: #46516a; font-size: 11px; font-weight: 700; }.field-label + .field-label { margin-top: 17px; }.field-help { width: 14px; height: 14px; margin-left: 3px; color: var(--primary); background: var(--primary-soft); border-radius: 50%; font-size: 9px; font-weight: 700; vertical-align: middle; }.field-hint { float: right; color: var(--muted-2); font-size: 9px; font-weight: 400; }.select-field { min-height: 57px; padding: 9px 12px; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 9px; text-align: left; transition: .2s; }.select-field:hover { border-color: #bbaef7; background: #fdfcff; }.select-leading { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; }.select-leading svg { width: 15px; height: 15px; }.select-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }.select-copy strong { color: #46516a; font-size: 11px; }.select-copy small { color: var(--muted-2); font-size: 10px; }.select-chevron { width: 15px; height: 15px; color: var(--muted-2); }.text-input, .text-area { width: 100%; padding: 0 12px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 9px; outline: 0; font-size: 11px; transition: .2s; }.text-input { height: 42px; }.text-area { min-height: 130px; padding: 12px; resize: vertical; line-height: 1.55; }.text-input:focus, .text-area:focus, .phone-input:focus-within { border-color: #bbaef7; box-shadow: 0 0 0 3px rgba(121,84,232,.08); }.text-input::placeholder, .text-area::placeholder { color: var(--muted-2); }.textarea-meta { margin-top: 6px; display: flex; justify-content: space-between; gap: 12px; color: var(--muted-2); font-size: 9px; }.priority-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.priority-switch label { position: relative; }.priority-switch input { position: absolute; opacity: 0; }.priority-switch label span { min-height: 53px; padding: 9px; display: block; background: #fff; border: 1px solid var(--line); border-radius: 9px; color: #68738a; font-size: 11px; font-weight: 700; cursor: pointer; transition: .2s; }.priority-switch input:checked + span { color: var(--ink); border-color: #bcaef6; background: #faf8ff; box-shadow: 0 0 0 2px rgba(121,84,232,.07); }.priority-switch small { display: block; margin-top: 2px; padding-left: 14px; color: var(--muted-2); font-size: 9px; font-weight: 400; }.priority-dot { width: 7px; height: 7px; margin-right: 6px; display: inline-block; border-radius: 50%; }.dot-green { background: var(--green); }.dot-amber { background: var(--amber); }.dot-red { background: var(--red); }.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }.phone-input { height: 42px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; transition: .2s; }.phone-input > span { height: 100%; padding: 0 10px; display: grid; place-items: center; color: var(--muted); background: #f7f8fb; border-right: 1px solid var(--line); font-size: 11px; }.phone-input input { min-width: 0; flex: 1; height: 100%; padding: 0 11px; color: var(--ink); border: 0; outline: 0; font-size: 11px; }.dropzone { min-height: 124px; padding: 16px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; color: var(--muted); background: #fcfcff; border: 1px dashed #cfd5e3; border-radius: 10px; text-align: center; transition: .2s; cursor: pointer; }.dropzone:hover, .dropzone.dragover { background: var(--primary-soft); border-color: #a68ff1; }.upload-icon { width: 31px; height: 31px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 8px; }.upload-icon svg { width: 16px; height: 16px; }.dropzone strong { color: #536078; font-size: 11px; }.dropzone u { color: var(--primary); text-decoration: none; }.dropzone small { color: var(--muted-2); font-size: 9px; }.file-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }.file-chip { padding: 7px 8px; display: inline-flex; align-items: center; gap: 6px; color: #56617b; background: #f6f7fa; border-radius: 7px; font-size: 10px; }.file-chip svg { width: 13px; height: 13px; color: var(--primary); }.file-chip button { width: 15px; height: 15px; display: grid; place-items: center; color: var(--muted); background: transparent; }.file-chip button svg { width: 11px; height: 11px; color: currentColor; }.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 4px 0 12px; }.form-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 18px; }.side-card { padding: 20px; }.side-title { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 19px; }.side-icon { width: 32px; height: 32px; }.side-icon svg { width: 16px; height: 16px; }.side-title > div { min-width: 0; flex: 1; }.side-title h3 { margin: 3px 0 2px; font: 800 13px Manrope, sans-serif; }.side-title p { margin: 0; color: var(--muted); font-size: 10px; }.side-title .tiny { margin-top: 6px; }.context-row { padding: 11px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-top: 1px solid #f0f1f5; }.context-row span { color: var(--muted); font-size: 10px; }.context-row strong { color: #4a566f; font-size: 10px; text-align: right; }.context-row mark { margin-right: 3px; padding: 2px 4px; color: var(--primary); background: var(--primary-soft); border-radius: 4px; font-size: 9px; }.check-list { margin: 0 0 17px; padding: 0; display: flex; flex-direction: column; gap: 11px; list-style: none; }.check-list li { display: flex; align-items: center; gap: 8px; color: #536078; font-size: 11px; }.check-list li span { width: 17px; height: 17px; display: grid; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 50%; }.check-list li svg { width: 10px; height: 10px; stroke-width: 2.5; }.side-tip { padding: 10px; display: flex; gap: 8px; background: #faf8ff; border-radius: 9px; }.side-tip > span { color: var(--primary); font-size: 16px; line-height: 1; }.side-tip p { margin: 0; color: var(--muted); font-size: 10px; }.side-tip strong { color: var(--primary); }.response-card { padding: 15px; display: flex; align-items: center; gap: 12px; color: var(--ink); background: linear-gradient(135deg, #eef5ff, #f7f2ff); border: 1px solid #e6e9fa; border-radius: var(--radius); }.response-illustration { width: 40px; height: 40px; display: grid; place-items: center; color: var(--blue); background: #fff; border-radius: 12px; box-shadow: 0 4px 10px rgba(69,115,227,.1); }.response-illustration svg { width: 20px; height: 20px; }.response-card .eyebrow { font-size: 8px; color: var(--blue); }.response-card strong { display: block; margin-top: 3px; font: 700 11px/1.35 Manrope, sans-serif; }.response-card p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.all-tickets-panel { overflow: hidden; }.tickets-toolbar { min-height: 74px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); }.tab-list { height: 100%; display: flex; align-items: center; gap: 20px; }.tab-list button { height: 100%; position: relative; color: var(--muted); background: transparent; font-size: 11px; }.tab-list button.active { color: var(--primary); font-weight: 700; }.tab-list button.active::after { content: ''; height: 2px; position: absolute; right: 0; bottom: -1px; left: 0; background: var(--primary); }.tab-list b { margin-left: 4px; padding: 2px 5px; color: inherit; background: #f2f3f7; border-radius: 4px; font-size: 9px; }.toolbar-actions { display: flex; gap: 8px; }.small-search { width: 190px; height: 35px; padding: 0 9px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted-2); }.small-search svg { width: 14px; height: 14px; }.small-search input { width: 100%; border: 0; outline: 0; color: var(--ink); font-size: 11px; }.filter-button { min-height: 35px; font-size: 11px; }.filter-button svg { width: 14px; height: 14px; }.table-wrap { overflow-x: auto; }table { width: 100%; min-width: 730px; border-collapse: collapse; }th, td { padding: 14px 22px; border-bottom: 1px solid #f0f1f5; color: var(--muted); font-size: 11px; text-align: left; }th { color: var(--muted-2); background: #fcfcfe; font-size: 9px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }td:first-child { display: flex; flex-direction: column; gap: 2px; }td strong { color: var(--primary); font-size: 11px; }td span { color: #4f5b73; font-weight: 600; }td small { color: var(--muted-2); font-size: 9px; }
.knowledge-hero { min-height: 214px; padding: 29px 36px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(115deg, #fff 0%, #fbf9ff 55%, #f1efff 100%); }.knowledge-hero h2 { margin: 5px 0 6px; font: 800 23px Manrope, sans-serif; letter-spacing: -.7px; }.knowledge-hero p { margin: 0 0 18px; color: var(--muted); font-size: 12px; }.knowledge-search { width: min(460px, 100%); height: 45px; }.knowledge-orb { width: 154px; height: 154px; margin-right: 14%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #8d6bee, #5d3ac8); border-radius: 50%; box-shadow: 0 0 0 16px rgba(121,84,232,.07), 0 0 0 34px rgba(121,84,232,.04); transform: rotate(12deg); }.knowledge-orb span { font: 800 74px Manrope, sans-serif; opacity: .92; }.knowledge-heading { margin-top: 31px; }.knowledge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.knowledge-card { min-height: 205px; padding: 21px; display: flex; flex-direction: column; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); text-align: left; transition: .2s; }.knowledge-card:hover { border-color: #c8bcf7; transform: translateY(-2px); box-shadow: var(--shadow); }.knowledge-card .solution-icon { width: 39px; height: 39px; margin-bottom: 16px; }.knowledge-card strong { color: #35415a; font: 700 13px Manrope, sans-serif; }.knowledge-card p { min-height: 39px; margin: 7px 0 13px; color: var(--muted); font-size: 11px; }.knowledge-card > span:last-child { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--primary); font-size: 10px; font-weight: 700; }.knowledge-card > span:last-child svg { width: 13px; height: 13px; }
.approval-count { color: var(--muted); }.approval-count strong { color: var(--primary); font: 800 17px Manrope, sans-serif; }.approval-panel { min-height: 390px; padding: 21px; }.approval-banner { padding: 15px; display: flex; align-items: center; gap: 11px; background: #fbf8ff; border: 1px solid #eee7ff; border-radius: 12px; }.approval-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--primary); background: #eee6ff; border-radius: 50%; }.approval-icon svg { width: 17px; height: 17px; }.approval-banner strong { font: 700 13px Manrope, sans-serif; }.approval-banner p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }.approval-pill { margin-left: auto; padding: 5px 8px; color: var(--primary); background: #eee7ff; border-radius: 6px; font-size: 10px; font-weight: 700; }.empty-state { padding: 66px 15px; display: flex; align-items: center; flex-direction: column; text-align: center; }.empty-icon { width: 54px; height: 54px; display: grid; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 18px; }.empty-icon svg { width: 25px; height: 25px; }.empty-state h2 { margin: 15px 0 4px; font: 800 16px Manrope, sans-serif; }.empty-state p { margin: 0 0 17px; color: var(--muted); font-size: 11px; }
.help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }.help-card { min-height: 265px; padding: 29px; }.help-card-icon { width: 44px; height: 44px; margin-bottom: 17px; }.help-card h2 { margin: 0 0 7px; font: 800 17px Manrope, sans-serif; }.help-card p { max-width: 390px; min-height: 40px; margin: 0 0 21px; color: var(--muted); font-size: 12px; }.help-card .button svg, .help-card .outline-button svg { width: 14px; height: 14px; }
.modal-backdrop { padding: 20px; position: fixed; z-index: 60; inset: 0; display: none; place-items: center; background: rgba(20,25,44,.46); backdrop-filter: blur(4px); }.modal-backdrop.open { display: grid; animation: fade-in .2s ease both; }.modal { width: min(650px, 100%); max-height: min(670px, calc(100vh - 40px)); overflow: hidden; background: #fff; border-radius: 18px; box-shadow: 0 25px 70px rgba(20,24,55,.24); }.modal-header { padding: 23px 25px 18px; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--line); }.modal-header h2 { margin: 4px 0 0; font: 800 18px Manrope, sans-serif; }.modal-close { margin-top: -5px; }.modal-search { margin: 17px 20px 0; height: 43px; }.modal-search input { font-size: 12px; }.modal-helper { margin: 8px 21px 10px; color: var(--muted-2); font-size: 10px; }.problem-table { max-height: 365px; overflow-y: auto; border-top: 1px solid var(--line); }.problem-option { width: 100%; min-height: 70px; padding: 13px 21px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(150px, .8fr) 16px; align-items: center; gap: 16px; background: #fff; border-bottom: 1px solid #f0f1f5; text-align: left; }.problem-option:hover { background: #faf8ff; }.problem-option:hover svg { color: var(--primary); transform: translateX(3px); }.problem-option svg { width: 14px; height: 14px; color: #c3c9d5; transition: .2s; }.problem-main { display: flex; flex-direction: column; gap: 3px; }.problem-main strong { overflow: hidden; color: #4c5770; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.problem-main small, .problem-option > span:nth-child(2) { color: var(--muted-2); font-size: 10px; }.modal-footer { min-height: 55px; padding: 0 21px; display: flex; align-items: center; justify-content: space-between; color: var(--muted-2); font-size: 10px; }.modal-footer b { color: var(--ink); }
.toast { min-height: 47px; padding: 0 14px; position: fixed; z-index: 100; right: 26px; bottom: 25px; display: flex; align-items: center; gap: 9px; color: #435069; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 12px 30px rgba(30,36,70,.14); font-size: 11px; transform: translateY(18px); opacity: 0; pointer-events: none; transition: .28s ease; }.toast.show { transform: none; opacity: 1; }.toast-icon { width: 23px; height: 23px; display: grid; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 7px; }.toast-icon svg { width: 13px; height: 13px; stroke-width: 2.5; }
.sidebar-overlay { display: none; }
@media (max-width: 1180px) { .hero-art { margin-right: 0; }.dashboard-grid { grid-template-columns: 1fr; }.quick-panel { min-height: auto; }.solution-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.solution-card { border: 1px solid #f0f1f5; padding: 9px; border-radius: 8px; }.solution-card > svg { display: none; } }
@media (max-width: 980px) { .sidebar { width: 76px; padding-left: 10px; padding-right: 10px; }.brand { padding: 0; justify-content: center; }.brand-copy, .workspace-switcher > div:nth-child(2), .workspace-switcher .chevron, .nav-label, .nav-item span, .nav-badge, .nav-count, .profile-mini > div:nth-child(2), .profile-mini > svg, .logout-button { display: none; }.workspace-switcher { justify-content: center; margin: 0 0 28px; padding: 10px 0; border-color: transparent; background: transparent; }.nav-item { justify-content: center; padding: 0; }.nav-item svg { width: 19px; height: 19px; }.profile-mini { justify-content: center; padding-bottom: 0; }.main-content { width: calc(100% - 76px); margin-left: 76px; }.form-layout { grid-template-columns: 1fr; }.form-side { display: grid; grid-template-columns: 1fr 1fr; position: static; }.response-card { grid-column: 1 / -1; }.hero-art { opacity: .72; transform: scale(.86); transform-origin: right center; margin-right: -25px; }.hero-content { max-width: 350px; }.stats-grid { grid-template-columns: repeat(2, 1fr); }.knowledge-orb { margin-right: 7%; } }
@media (max-width: 720px) { .sidebar { width: 252px; left: -270px; padding: 26px 16px 17px; transition: .25s ease; box-shadow: 10px 0 30px rgba(20,25,50,.1); }.sidebar.open { left: 0; }.sidebar .brand { padding: 0 12px; justify-content: flex-start; }.sidebar .brand-copy, .sidebar .workspace-switcher > div:nth-child(2), .sidebar .workspace-switcher .chevron, .sidebar .nav-label, .sidebar .nav-item span, .sidebar .nav-badge, .sidebar .nav-count, .sidebar .profile-mini > div:nth-child(2), .sidebar .profile-mini > svg, .sidebar .logout-button { display: initial; }.sidebar .workspace-switcher { justify-content: initial; margin: 0 4px 31px; padding: 12px; background: #fafaff; border-color: #e7e3fb; }.sidebar .nav-item { justify-content: initial; padding: 0 12px; }.sidebar .profile-mini { justify-content: initial; padding-bottom: 14px; }.sidebar .logout-button { display: flex; }.sidebar-close { display: grid; }.sidebar-overlay { position: fixed; z-index: 20; inset: 0; background: rgba(20,25,44,.3); }.sidebar-overlay.open { display: block; }.main-content { width: 100%; margin-left: 0; }.topbar { height: 66px; padding: 0 17px; }.menu-button { display: grid; }.quick-search { min-width: 0; width: 35px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }.quick-search span, .quick-search kbd, .topbar-profile > div:nth-child(2), .topbar-profile > svg { display: none; }.topbar-profile { padding-left: 0; border: 0; }.content-wrap { padding: 26px 17px 52px; }.page-intro { align-items: flex-start; flex-direction: column; }.page-intro .button { width: 100%; }.hero-card { min-height: 275px; padding: 25px; }.hero-art { position: absolute; right: -58px; bottom: -25px; opacity: .54; transform: scale(.75); }.stats-grid { gap: 10px; }.stat-card { min-height: 133px; padding: 14px; }.stat-value { font-size: 21px; }.solution-list { display: flex; flex-direction: column; }.solution-card { border: 0; border-bottom: 1px solid #f0f1f5; padding: 10px 0; border-radius: 0; }.solution-card > svg { display: block; }.stepper { justify-content: flex-start; overflow-x: auto; padding: 0 1px 6px; }.stepper > i { min-width: 20px; }.step { flex: 0 0 auto; }.step small { display: none; }.step strong { font-size: 9px; }.form-panel { padding: 18px; }.category-grid, .contact-grid, .priority-switch, .form-side { grid-template-columns: 1fr; }.response-card { grid-column: auto; }.form-heading { flex-direction: column; gap: 6px; }.form-actions { position: sticky; z-index: 5; bottom: 0; padding: 13px 0 4px; background: rgba(247,248,252,.94); backdrop-filter: blur(6px); }.form-actions .button, .form-actions .outline-button { flex: 1; }.tickets-toolbar { padding: 0 15px; align-items: stretch; flex-direction: column; }.tab-list { min-height: 56px; overflow-x: auto; gap: 18px; }.tab-list button { flex: 0 0 auto; }.toolbar-actions { padding-bottom: 12px; }.small-search { flex: 1; width: auto; }.knowledge-hero { padding: 24px; min-height: 245px; }.knowledge-orb { position: absolute; right: -38px; bottom: -47px; margin: 0; transform: scale(.66) rotate(12deg); }.knowledge-grid, .help-grid { grid-template-columns: 1fr; }.help-card { min-height: auto; padding: 24px; }.approval-banner { align-items: flex-start; }.approval-pill { margin-left: auto; white-space: nowrap; }.modal-backdrop { padding: 12px; }.modal-header { padding: 19px 17px 15px; }.problem-option { grid-template-columns: minmax(0, 1fr) 15px; padding: 13px 16px; }.problem-option > span:nth-child(2) { display: none; }.modal-search { margin-right: 16px; margin-left: 16px; }.modal-helper { margin-left: 17px; margin-right: 17px; } }
@media (max-width: 430px) { .breadcrumb span, .breadcrumb svg { display: none; }.stats-grid { grid-template-columns: 1fr 1fr; }.stat-card small { font-size: 9px; }.ticket-row { grid-template-columns: 33px minmax(0, 1fr) 15px; gap: 8px; }.ticket-row .priority, .ticket-row .ticket-status { display: none; }.hero-card h2 { font-size: 25px; }.hero-card p { font-size: 12px; }.draft-badge { align-self: flex-start; }.approval-count { align-self: flex-start; }.context-row { gap: 8px; }.page-intro h1 { font-size: 25px; } }
@media (max-width: 720px) { .sidebar .brand-copy, .sidebar .workspace-switcher > div:nth-child(2), .sidebar .profile-mini > div:nth-child(2) { display: flex; }.sidebar .workspace-switcher > div:nth-child(2), .sidebar .profile-mini > div:nth-child(2) { flex-direction: column; } }

/* Field copy and structure aligned with the live TheClinic Helpdesk form. */
#newTicketView > .stepper, #newTicketView .form-main > .form-panel:first-child { display: none; }
#newTicketView .form-layout { grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); }
#newTicketView .form-heading { margin-bottom: 18px; }
#newTicketView .form-heading > div:first-child { display: block; }
#newTicketView .form-heading h2 { font-size: 16px; }
#newTicketView .form-heading p { font-size: 11px; }
#newTicketView .form-panel { padding: 22px 24px; }
#newTicketView .detail-label { margin-top: 20px; }
.status-badge { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }
.status-badge b { padding: 7px 11px; color: #e87849; background: #fff0e9; border-radius: 999px; font-size: 11px; }
.required-select { border-color: #efbd22; background: #fffdf2; }
.required-select:hover { border-color: #d9a300; background: #fffbea; }
.required-select .select-copy strong { color: #9a8a5b; font-weight: 500; }
.required-select .select-leading { color: #197d91; background: #e4f3f5; }
.phone-panel { padding-top: 20px !important; padding-bottom: 20px !important; }
.form-error-hint { margin: 6px 0 0; color: #ff6b6b; font-size: 10px; font-style: italic; }
.attachment-side { padding-bottom: 17px !important; }
.attachment-side .side-title { margin-bottom: 14px; }
.attachment-side .side-title p { max-width: 265px; line-height: 1.45; }
.attachment-side .dropzone { min-height: 118px; background: #fff; }
.add-file-button { margin: 12px 0 0; padding: 0; color: #416bf0; background: transparent; font-size: 11px; }
.add-file-button:hover { color: var(--primary); text-decoration: underline; }
.attachment-hint { margin: 9px 0 0; color: #ff6b6b; font-size: 9px; font-style: italic; line-height: 1.7; }
.clear-search { padding: 0 3px; color: var(--muted-2); background: transparent; font-size: 15px; line-height: 1; }
.clear-search:hover { color: var(--primary); }
.problem-modal { width: min(700px, 100%); }
.real-problem-table { max-height: 395px; }
.problem-table-head { min-height: 38px; padding: 0 20px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(120px, .7fr); align-items: center; gap: 16px; color: #546077; background: #f8f9fb; font-size: 10px; font-weight: 700; }
.real-problem-table .problem-option { min-height: 79px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(120px, .7fr); padding: 12px 20px; gap: 16px; }
.real-problem-table .problem-option:hover { background: #fbf9ff; }
.problem-module, .problem-division { display: flex; flex-direction: column; color: #566178; font-size: 10px; line-height: 1.45; }
.problem-module small, .problem-division small { margin-top: 3px; color: var(--muted-2); font-size: 9px; }
.problem-division { color: #566178; }

@media (max-width: 980px) { #newTicketView .form-layout { grid-template-columns: 1fr; } }
@media (max-width: 720px) { #newTicketView .form-layout { grid-template-columns: 1fr; } #newTicketView .form-panel { padding: 18px; } .problem-table-head, .real-problem-table .problem-option { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .problem-table-head span:last-child, .problem-division { display: none; } }