/* Mailbox concept visual system. Based on the user-provided reference. */
:root{--bg:#141414;--surface:#1a1a1a;--raised:#292a2b;--line:#424242;--muted:#929292;--text:#f0f0f0;--purple:#b5a8f0;--accent:#7561d5;--green:#67b88f}
body{background:#141414;font-family:'DM Sans',Arial,sans-serif;color:#ededed;font-size:14px}
.app{grid-template-columns:76px minmax(0,1fr)}.app.sidebar-expanded{grid-template-columns:260px minmax(0,1fr)}
.sidebar{width:76px;padding:27px 12px 20px;background:#1b1b1b;border-right:1px solid #424242}
.sidebar-expanded .sidebar{width:260px;padding:28px 21px 23px}
.sidebar button.logo{height:67px;margin-bottom:9px;padding-bottom:20px;justify-content:center}
.sidebar .brand-logo{width:36px;height:36px;filter:none}
.sidebar-expanded .brand-name{font-size:24px;letter-spacing:-.7px;color:#eee;font-weight:500}
.sidebar-expanded button.logo{justify-content:flex-start;gap:12px!important;padding-left:9px!important}
.sidebar-expanded .logo .brand-logo{width:32px;height:32px}
.sidebar-expanded .workspace{display:flex;padding:14px 13px;gap:11px;border:0;border-radius:9px;background:#7561d5;margin:0 0 30px;color:white;box-shadow:none;min-width:0}
.workspace>svg{width:21px;height:21px;flex-shrink:0}.workspace>div{min-width:0}.workspace strong{font-size:15px;font-weight:500}.workspace small{font-size:10px;color:#e0d9fa;white-space:nowrap;display:block;text-overflow:ellipsis;overflow:hidden;margin-top:3px}
.nav-label{display:none!important}.sidebar .nav{height:48px;margin:0 0 4px;border-radius:8px;box-shadow:none;color:#959595}
.sidebar .nav svg{color:#939393;width:21px;height:21px}.sidebar .nav:hover{background:#232425}.sidebar .nav.active{background:#2b2c2d;box-shadow:none;color:#f4f4f4}.sidebar .nav.active svg{color:#9686ed}
.sidebar-expanded .nav{font-size:15px;gap:11px;padding:0 12px;color:#aaa}.sidebar-expanded .nav.active{color:#f0f0f0}
.sidebar .nav .count{background:#7561d5;color:#fff;box-shadow:0 0 0 2px #1b1b1b}.sidebar-expanded .nav .count{background:none;box-shadow:none;color:#9b9b9b;font-size:12px;min-width:20px}
.sidebar .nav::after{background:#2a2b2c;border-color:#494949;color:#eee}
.mailbox-folders{display:none}.sidebar-expanded .mailbox-folders{display:block;margin:28px -21px 0;padding:24px 21px 0;border-top:1px solid #424242}
.mailbox-folders h3{font-size:13px;font-weight:500;margin:0 12px 14px;color:#d4d4d4}
.mailbox-folder{display:flex;align-items:center;width:100%;gap:11px;padding:12px;border:0;border-radius:7px;background:none;font-size:14px;color:#cecece}.mailbox-folder:hover{background:#262728}.mailbox-folder small{margin-left:auto;color:#929292;font-size:12px}.folder-symbol{display:grid;place-items:center;color:#13944a}.folder-symbol.purple{color:#9b44d1}.folder-symbol.pink{color:#c74775}.folder-symbol svg{width:18px;height:18px;margin:0}
.sidebar-bottom{padding-top:24px}.profile{border:0!important}.profile .avatar{background:#a497c1;color:#302341;width:39px;height:39px;font-size:12px;border:2px solid #d4c9e6}.profile strong{font-size:14px;font-weight:500}.profile small{font-size:11px;color:#929292}.sidebar-expanded .profile{padding:0 8px;gap:11px}
.app-header{height:74px;padding:0 32px;background:#141414;border:0}.app-header-title h1{font-size:25px;font-weight:500;letter-spacing:-.7px;color:#f0f0f0}.header-menu-trigger.icon{background:transparent;border:0;color:#999;width:37px;height:37px}.header-menu-trigger.icon:hover{background:#333;color:#eee}.header-account-menu{background:#232425;border-color:#515151;box-shadow:0 12px 35px #0005;border-radius:9px}.header-account-menu button{font-size:13px;color:#ddd}.header-account-menu button svg{color:#aaa}.header-account-menu button:hover,.header-account-menu button:focus-visible{background:#414244;color:white}
.content{padding:20px 32px 32px}.content:has(>.metrics){padding-top:12px}
.card{border-radius:12px;border:1px solid #414141;background:#1c1d1e;box-shadow:none}.card:hover{box-shadow:none}.card-head{padding:22px 24px 16px}.card-head h2{font-size:15px;color:#e5e5e5}.card-head small{font-size:12px;color:#999;margin-top:6px}
button{background:#272829;border:1px solid #464747;border-radius:7px;color:#d6d6d6;box-shadow:none}button:hover{background:#333435}button.primary{background:#7561d5;border-color:#8470e3;box-shadow:none;color:white}button.primary:hover{background:#8672e4;box-shadow:none}button.ghost{background:transparent}.filters button{background:#2b2c2d;border-color:#464747;color:#aaa}.filters button.selected{background:#7561d5;color:#fff;border-color:#8470e3}.filters button:hover{background:#3d3f41}.filters button.selected:hover{background:#8672e4}
.search{background:#2a2b2c;border-color:transparent;border-radius:8px;padding:12px}.search svg{color:#999}.search input{font-size:14px;color:#e0e0e0}.search input::placeholder{color:#999}.search:focus-within,.field input:focus,.field textarea:focus{border-color:#9686ed;box-shadow:0 0 0 2px #7561d515}
.metrics{gap:15px}.metric{min-height:132px;border-radius:12px;padding:24px 20px 20px 74px}.metric-label{font-size:13px;color:#bbb}.metric-value{font-size:28px;font-weight:500}.metric-label svg{width:33px;height:33px;left:23px;top:44px;border:0;background:#3b3645;color:#c3b7f3;box-shadow:none;border-radius:8px}.metric:first-child{background:#7561d5;border-color:#8b78e6;box-shadow:none}.metric:first-child .metric-label{color:#e8e1ff}.metric:first-child .metric-label svg{background:#ffffff1c;color:#fff;box-shadow:none;border:0}.metric:first-child .trend,.metric:first-child .trend span{color:#e4ddfa}.trend{font-size:11px}.trend span{font-size:10px;color:#929292}
.funnel-stages{padding:12px 24px 24px}.funnel-stage{border-color:#454545}.funnel-stage>span{color:#b6b6b6;font-size:12px}.funnel-stage>strong{font-size:23px}.funnel-stage>small{color:#949494;font-size:10px}.funnel-track{background:repeating-linear-gradient(to bottom,transparent 0,transparent 17px,#3d3e3f 18px,transparent 19px)}.funnel-track>div{background:#7561bd}.chart path[stroke="#a38af5"]{stroke:#a38af5}.chart path[stroke="#5d4a7c"]{stroke:#80768f}.chart path[stroke="#27212f"]{stroke:#404142}.chart text{fill:#a0a0a0}.chart stop:first-child{stop-color:#9679e2}.legend{font-size:11px;color:#aaa}.legend i{background:#a38af5}.legend i.gray{background:#8d819f}.segment{border-color:#434343;background:#232323}.segment button.selected{background:#7561d5}.tile{background:#3e3749;color:#c3b7f3;box-shadow:none;border-radius:8px}.activity-item{border-color:#424242}.activity-item p{font-size:12px}.activity-item small,.activity-item time{font-size:10px;color:#969696}
.card table th{background:#252626;border-color:#454545;color:#a2a2a2;font-size:11px}.card table td{padding:18px 24px;border-color:#404141;font-size:13px}.card tbody tr:hover{background:#272829}.person small{font-size:11px;color:#969696}.avatar{background:#786d82;color:#f5eff9}.avatar.blue{background:#78648e;color:#f4edff}.avatar.orange{background:#957d69;color:#fff8ee}.avatar.green{background:#668877;color:#effff5}.badge{background:#40374f;color:#bcaaf1}.badge.green{background:#2c4036;color:#94c7a7}.badge.orange{background:#443d2f;color:#cbb991}.badge.red{background:#463237;color:#e0a7b4}.table-foot{font-size:12px;color:#999}
.templates{gap:20px}.template{border-radius:12px;background:#1d1e1f}.template h2{font-size:17px;font-weight:500}.template p{font-size:14px;color:#a9a9a9}.template .tile{background:#403949;color:#bdaaf1}.template small{color:#979797}.settings-body{background:#1c1d1e;border-radius:12px}.settings-body>h2{font-size:18px}.settings-body>p{font-size:13px;color:#a1a1a1}.settings-nav button{font-size:14px;color:#aaa}.settings-nav .selected{background:#2b2c2d;color:#f1f1f1}.settings-row{border-color:#464646}.settings-row p{font-size:14px}.field label{font-size:13px;color:#c3c3c3}.field input,.field select,.field textarea{background:#292a2b;border:1px solid #454647;border-radius:7px;font-size:14px;color:#e8e8e8}.field small{color:#999;font-size:12px}.switch.on{background:#7561d5}.modal{background:#1c1d1e;border-color:#505050;border-radius:13px}.modal header,.modal footer{border-color:#454545}.modal h2{font-size:18px}.modal .sub{font-size:13px;color:#aaa}.modal-backdrop{background:#111a;backdrop-filter:blur(4px)}#toast{background:#37333e;border-color:#60546f;color:#eee;border-radius:8px}.demo-entry{background:#141414}
/* Mailbox: navigation / list / reading pane. */
.content:has(>.inbox-page){padding:0;margin:0}.inbox-page{height:calc(100dvh - 74px)}
.card.inbox-workspace{grid-template-columns:390px minmax(0,1fr);height:100%;min-height:0;border:0;background:#141414;border-radius:0}
.inbox-workspace .mail-list{background:#141414;border-right:1px solid #454545}.inbox-list-controls{padding:26px 22px 24px;border-bottom:1px solid #454545;background:#141414}.inbox-list-label{margin-bottom:22px;align-items:center}.mailbox-list-title h2{font-size:27px;font-weight:500;letter-spacing:-.7px;color:#eee}.mailbox-list-title p{font-size:12px;color:#999;margin-top:7px}
.inbox-filter-trigger{background:#2a2b2c;border:1px solid transparent;border-radius:8px;color:#c7c7c7;font-size:12px;min-width:94px;padding:10px}.inbox-filter-trigger:hover,.inbox-filter-trigger[aria-expanded="true"]{background:#353637;border-color:#646464}.inbox-filter .inbox-filter-trigger svg{color:#aaa}.inbox-filter-menu{background:#262728;border-color:#555;border-radius:9px}.filter-menu-label{color:#aaa}.inbox-filter-menu .filter-option{font-size:12px;color:#d0d0d0;border-radius:6px;padding:12px}.inbox-filter-menu .filter-option.selected{background:#7561d5;color:white}.inbox-filter-menu .filter-option:hover,.inbox-filter-menu .filter-option:focus-visible{background:#38393a;color:#fff}.inbox-filter-menu .filter-option.selected:hover{background:#8672e4}.filter-option-check{color:#fff}
.inbox-list-controls .search{background:#2a2b2c;border:0;border-radius:8px;padding:13px 12px;gap:10px}.inbox-list-controls .search input{font-size:14px}.inbox-list-controls .search svg{width:18px;height:18px;color:#a0a0a0}.inbox-list-scroll{padding:13px 12px}.inbox-workspace .mail-row{border:1px solid transparent;border-radius:9px;background:transparent;padding:20px 14px;gap:15px;margin-bottom:7px;box-shadow:none}.inbox-workspace .mail-row.active{background:#2a2b2c;border:1px solid #494a4b;box-shadow:none}.inbox-workspace .mail-row:hover{background:#202122}.inbox-workspace .mail-row.active:hover{background:#2d2e2f}.mail-avatar{padding-top:0}.mail-avatar .avatar{width:43px;height:43px;font-size:13px;border:1px solid #ffffff20}.unread-dot{width:9px;height:9px;top:1px;right:-2px;background:#9686ed;border:2px solid #141414}.mail-row.active .unread-dot{border-color:#2a2b2c}.mail-summary .line strong{font-size:15px;font-weight:500;color:#ededed}.mail-summary .line time{font-size:10px;color:#999;flex-shrink:0}.inbox-workspace .mail-row p{font-size:13px;color:#d1d1d1;margin:7px 0 12px;font-weight:400}.inbox-workspace .mail-row small{font-size:12px;color:#989898;line-height:1.5;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.mail-summary footer{margin-top:12px!important}.mail-summary footer>span:last-child{font-size:10px;color:#aaa}.mail-summary .badge{font-size:10px;padding:4px 6px}.inbox-workspace .badge{background:#414245;color:#c1c1c7}.inbox-workspace .badge.green{background:#304238;color:#a3c7af}.inbox-workspace .badge.orange{background:#443d30;color:#ccb88c}.inbox-list-bottom{padding:15px 22px;border-color:#444;background:#141414;font-size:11px;color:#909090}
.inbox-workspace .conversation{background:#141414}.mailbox-actions{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-bottom:1px solid #454545;flex-shrink:0;height:55px;color:#888;font-size:11px}.mailbox-actions>div{display:flex;gap:14px}.mailbox-actions button{background:transparent;border:0;color:#a3a3a3}.mailbox-actions button:hover{color:#ddd;background:#353535}.mailbox-actions button svg{width:19px;height:19px}.inbox-workspace .conversation-head{padding:25px 30px 18px;min-height:90px;border:0;background:transparent}.conversation-person{gap:14px}.conversation-person .avatar{width:47px;height:47px;font-size:14px;border:1px solid #ffffff20}.conversation-person h2{font-size:18px!important;font-weight:500;margin-bottom:6px!important}.conversation-person .sub{font-size:12px;color:#a4a4a4}.inbox-workspace #ticket-status{background:transparent;color:#999;border-color:#505050;font-size:11px;padding:8px}.resolve-button{font-size:11px;background:#272829;border-color:#525354;color:#d0d0d0}.resolve-button:hover{background:#424344;border-color:#666}.inbox-workspace .conversation-head .actions{gap:7px}.inbox-workspace .conversation-topic{padding:14px 30px 22px;border:0}.topic-label,.ticket-number{display:none}.conversation-topic h3{font-size:25px;color:#ececec;letter-spacing:-.7px;font-weight:500;line-height:1.3}
.inbox-workspace .messages{padding:0 30px 15px}.inbox-workspace .date-line{display:none}.inbox-workspace .message{max-width:none;margin:0 0 20px;padding:19px 0 0;border-top:1px solid #3c3c3c}.inbox-workspace .message:first-of-type{border:0;padding-top:0}.inbox-workspace .message:first-of-type .message-header{display:none}.inbox-workspace .message.outgoing{margin-left:0}.inbox-workspace .message-header{margin-bottom:12px;gap:9px}.inbox-workspace .message-header .avatar{width:27px;height:27px}.inbox-workspace .message-header strong{font-size:12px;color:#bfbfbf}.inbox-workspace .message-header small{font-size:10px;color:#929292}.message-team{font-size:9px;color:#909090}.inbox-workspace .message-body,.inbox-workspace .outgoing .message-body{background:transparent;border:0;border-radius:0;box-shadow:none;margin:0;padding:0;font-size:14px;color:#aaa;line-height:1.8}.inbox-workspace .note .message-body{background:#373326;border:1px solid #514b37;padding:13px;border-radius:7px;color:#c3bda7}
.inbox-workspace .reply{margin:10px 30px 24px;background:#1b1c1d;border:1px solid #494a4b;border-radius:9px;box-shadow:none}.inbox-workspace .reply-tabs{padding:10px 12px;border-color:#333435}.inbox-workspace .reply-tabs button{font-size:11px;color:#a4a4a4;padding:6px 9px}.inbox-workspace .reply-tabs button.selected{background:#3b3d40;color:#e1e1e1}.inbox-workspace .reply-template-button{color:#a5a5a5}.reply-recipient{padding:12px 19px 0;font-size:11px;color:#999}.reply-recipient span{color:#bbb}.inbox-workspace .reply textarea{height:84px;min-height:75px;padding:13px 19px;font-size:14px;color:#ddd}.inbox-workspace .reply textarea::placeholder{color:#858585}.inbox-workspace .reply footer{padding:9px 14px 14px}.inbox-workspace .reply footer .primary{padding:10px 16px;font-size:12px}.reply-demo{font-size:10px;color:#919191}.conversation-placeholder{color:#999}.conversation-placeholder h2{color:#ddd}.inbox-workspace *{scrollbar-color:#505050 transparent}
@media(min-width:1600px){.app.sidebar-expanded{grid-template-columns:280px minmax(0,1fr)}.sidebar-expanded .sidebar{width:280px}.card.inbox-workspace{grid-template-columns:430px minmax(0,1fr)}.inbox-workspace .mail-row{padding:23px 17px;gap:17px}.mail-avatar .avatar{width:47px;height:47px}.mail-summary .line strong{font-size:16px}.inbox-workspace .conversation-head{padding:30px 38px 20px}.inbox-workspace .conversation-topic{padding:15px 38px 28px}.conversation-topic h3{font-size:28px}.inbox-workspace .messages{padding:0 38px 20px}.inbox-workspace .message-body{font-size:15px}.inbox-workspace .reply{margin:10px 38px 28px}}
@media(max-width:1200px){.app.sidebar-expanded{grid-template-columns:225px minmax(0,1fr)}.sidebar-expanded .sidebar{width:225px;padding-inline:15px}.sidebar-expanded .brand-name{font-size:21px}.sidebar-expanded .logo .brand-logo{width:27px;height:27px}.sidebar-expanded .nav{font-size:13px;padding-inline:10px;gap:9px}.sidebar-expanded .mailbox-folders{margin-inline:-15px;padding-inline:15px}.mailbox-folder{font-size:13px}.card.inbox-workspace{grid-template-columns:320px minmax(0,1fr)}.inbox-list-controls{padding:21px 17px}.mailbox-list-title h2{font-size:23px}.mailbox-list-title p{font-size:11px}.inbox-workspace .mail-row{padding:17px 10px;gap:10px}.mail-avatar .avatar{width:35px;height:35px;font-size:11px}.mail-summary .line strong{font-size:13px}.inbox-workspace .mail-row p{font-size:12px}.inbox-workspace .mail-row small{font-size:11px}.inbox-workspace .conversation-head{padding:20px;flex-wrap:wrap}.inbox-workspace .conversation-topic{padding:12px 20px 22px}.conversation-topic h3{font-size:23px}.inbox-workspace .messages{padding:0 20px 15px}.inbox-workspace .reply{margin:8px 20px 20px}.reply-demo{font-size:9px}.inbox-workspace .reply-tabs button{padding:6px;font-size:10px}.metric{padding-left:60px}.metric-label svg{left:17px}.metric-value{font-size:25px}}
@media(max-width:960px) and (min-width:761px){.app.sidebar-expanded{grid-template-columns:205px minmax(0,1fr)}.sidebar-expanded .sidebar{width:205px;padding-inline:10px}.sidebar-expanded .brand-name{font-size:19px}.sidebar-expanded button.logo{gap:8px!important}.sidebar-expanded .mailbox-folders{margin-inline:-10px;padding-inline:10px}.card.inbox-workspace{grid-template-columns:265px minmax(0,1fr)}.mail-avatar{display:none}.inbox-list-label{flex-wrap:wrap;gap:12px}.conversation-person .sub{font-size:11px}.inbox-workspace .reply-tabs button{font-size:9px}.inbox-workspace .reply-tabs button svg{display:none}.reply-demo{max-width:100px}.inbox-workspace .message-body{font-size:13px}.conversation-topic h3{font-size:21px}}
@media(max-width:760px){.app,.app.sidebar-expanded{display:block}.sidebar,.sidebar-expanded .sidebar{width:260px;padding:24px 20px}.sidebar:not(.open){transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.sidebar-expanded .nav{font-size:15px}.sidebar-expanded .brand-name{font-size:24px}.sidebar-expanded .logo .brand-logo{width:32px;height:32px}.sidebar-expanded .mailbox-folders{margin-inline:-20px;padding-inline:20px}.app-header{height:60px;padding:0 17px}.app-header-title h1{font-size:20px}.content{padding:17px}.content:has(>.metrics){padding-top:15px}.metrics{gap:10px}.metric{padding:19px 12px 17px 54px;min-height:125px}.metric-label{font-size:11px}.metric-value{font-size:24px}.metric-label svg{width:29px;height:29px;left:13px;top:42px;padding:6px}.trend{font-size:9px}.trend span{font-size:9px}.card{border-radius:10px}.card-head{padding:19px 17px}.card-head h2{font-size:14px}.card-head small{font-size:11px}.inbox-page{height:calc(100dvh - 60px)}.card.inbox-workspace{display:block;min-height:0}.inbox-list-controls{padding:21px 20px}.mailbox-list-title h2{font-size:27px}.mailbox-list-title p{font-size:12px}.inbox-filter-trigger{font-size:12px}.inbox-workspace .mail-row{padding:19px 13px;gap:14px}.mail-avatar .avatar{width:43px;height:43px;font-size:13px}.mail-summary .line strong{font-size:15px}.inbox-workspace .mail-row p{font-size:13px}.inbox-workspace .mail-row small{font-size:12px}.mailbox-actions{height:43px;padding:6px 16px}.inbox-workspace .conversation-head{padding:18px 19px 12px;gap:14px}.conversation-person h2{font-size:17px!important}.conversation-person .avatar{width:37px;height:37px}.conversation-person .sub{font-size:11px}.inbox-workspace .conversation-head .actions{width:100%;justify-content:flex-end}.inbox-workspace .conversation-topic{padding:8px 19px 19px}.conversation-topic h3{font-size:24px}.inbox-workspace .messages{padding:0 19px 12px}.inbox-workspace .message-body{font-size:13px;line-height:1.8}.inbox-workspace .reply{margin:6px 12px 12px}.inbox-workspace .reply-tabs{padding:8px}.inbox-workspace .reply-tabs button{padding:5px;font-size:10px}.inbox-workspace .reply textarea{font-size:13px;min-height:65px;height:65px}.inbox-workspace .reply footer{padding:7px 11px 11px}.reply-demo{font-size:8px;max-width:125px}.inbox-workspace .reply footer .primary{font-size:11px;padding:9px 12px}.modal{border-radius:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Surface hierarchy: separate elements with tones instead of light outlines. */
:root{--line:transparent}
.sidebar,.mailbox-folders,.card,.card table th,.card table td,.activity-item,.funnel-stage,.settings-row,.modal,.modal header,.modal footer,.inbox-workspace .mail-list,.inbox-list-controls,.inbox-list-bottom,.mailbox-actions,.inbox-workspace .message,.inbox-workspace .reply-tabs{border-color:transparent!important}
.card{background:#1e1f20}.card table th{background:#191a1b}.card tbody tr:hover{background:#262728}
button,.field input,.field select,.field textarea,.search,.segment,.template,.settings-body,.header-account-menu,.inbox-filter-menu,#toast,.resolve-button,.inbox-workspace #ticket-status{border-color:transparent!important}
button:focus-visible,.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid #9686ed;outline-offset:2px}
.header-account-menu,.inbox-filter-menu{background:#272829}
.inbox-workspace .mail-row,.inbox-workspace .mail-row.active{border-color:transparent!important}
.inbox-workspace .mail-row.active{background:#2a2b2c}
.inbox-workspace .reply{background:#202122;border-color:transparent!important}
.inbox-workspace .reply-tabs{background:#232425}
.inbox-workspace #ticket-status{background:#232425}
.inbox-workspace .note .message-body{border-color:transparent}
.profile .avatar,.mail-avatar .avatar,.conversation-person .avatar{border-color:transparent}
.modal{background:#202122}.modal header,.modal footer{background:#232425}
.inbox-workspace .mail-list,.inbox-list-controls,.inbox-list-bottom{background:#19191a}
.inbox-workspace .conversation{background:#141414}

.sent-search-actions{display:flex;align-items:center;gap:12px}.sent-search-actions .search{flex:1;min-width:0}.sent-search-actions>.primary{white-space:nowrap;flex-shrink:0}@media(max-width:760px){.sent-search-actions{width:100%;gap:8px}.sent-search-actions .search{width:auto}.sent-search-actions>.primary{padding:11px;font-size:12px}}

.template-create{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;width:100%;height:100%;background:#1e1f20}.template-create:hover{background:#262728}.template-create .tile{color:#b5a8f0;background:#403949}.template-create .tile svg{margin:0;width:23px;height:23px}.template-create strong{font-size:17px;font-weight:500;color:#e5e5e5}.template-create-description{font-size:14px;color:#999;line-height:1.6}
.delivery-intro{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;color:#aaa;line-height:1.6}.delivery-grid{margin-top:22px}.delivery-summary{padding:0 24px 24px;display:flex;gap:28px;color:#aaa}.delivery-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.delivery-asset{background:#272829;border-radius:9px;padding:16px;margin:14px 0}.delivery-section-title{margin:24px 0 16px}.delivery-order-details{display:grid;gap:16px;color:#bbb}.delivery-ticket-context{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 30px;background:#211e28;color:#b5a8f0;font-size:12px}.sidebar{overflow-y:auto}.sidebar-expanded .mailbox-folders{margin-top:15px;padding-top:15px}.sidebar .nav{height:43px;flex-shrink:0}.sidebar button.logo{flex-shrink:0}.delivery-asset [hidden]{display:none!important}@media(max-width:760px){.delivery-intro,.delivery-summary{flex-direction:column;align-items:flex-start}.delivery-ticket-context{padding:10px 18px}.delivery-intro .badge{white-space:normal}}

.sidebar .profile{display:flex;align-items:center;gap:8px;padding-inline:0}.profile-info{flex:1;min-width:0}.profile-actions{display:flex;align-items:center;gap:2px;margin-left:auto}.profile-actions .icon{width:29px;height:32px;padding:6px;background:transparent;color:#999}.profile-actions .icon:hover{background:#292a2b;color:#b5a8f0}.profile-actions .icon svg{width:17px;height:17px;margin:0}.sidebar:not(.open) .profile-actions{flex-shrink:0}.app:not(.sidebar-expanded) .sidebar .profile{flex-direction:column}.app:not(.sidebar-expanded) .sidebar .profile-actions{flex-direction:column;margin-left:0}.app:not(.sidebar-expanded) .profile-info{display:none}.sidebar-expanded .profile strong{font-size:12px}.sidebar-expanded .profile small{font-size:10px}.sidebar-expanded .profile .avatar{width:30px;height:30px;font-size:10px}.sidebar .profile-actions{visibility:visible;opacity:1}@media(min-width:761px) and (max-width:1200px){.sidebar-expanded .profile .avatar{display:none}}

.sidebar .profile>.profile-actions{display:flex;gap:2px}.sidebar-expanded .profile>.profile-info{display:block}
.journey-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:4px 24px 24px}.journey-step{--journey-color:#a18aee;background:#252427;border-radius:12px;padding:19px 16px}.journey-step.amber{--journey-color:#cfab70}.journey-step.green{--journey-color:#79b99b}.journey-step.rose{--journey-color:#cf858e}.journey-label{display:flex;align-items:center;gap:9px;font-size:12px;color:#bbb;min-height:30px}.journey-icon{display:grid;place-items:center;color:var(--journey-color);width:28px;height:28px;flex-shrink:0}.journey-icon svg{width:19px;height:19px}.journey-value{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:19px 0 18px}.journey-value strong{font-size:32px;font-weight:500;letter-spacing:-1px;color:#eee}.journey-value>span{font-size:12px;color:var(--journey-color)}.journey-bar{height:7px;background:#343236;border-radius:10px;overflow:hidden}.journey-bar>span{display:block;height:100%;border-radius:10px;background:var(--journey-color);transition:width .35s ease}.journey-step>small{display:block;margin-top:11px;color:#858189;font-size:11px}@media(max-width:1100px){.journey-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.journey-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:4px 17px 17px;gap:10px}.journey-step{padding:15px 12px}.journey-label{font-size:11px;gap:5px}.journey-value strong{font-size:28px}}
.email-designer-modal{width:min(1180px,95vw);max-width:1180px}.email-designer-toolbar{display:flex;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}.email-designer{display:grid;grid-template-columns:minmax(240px,.85fr) minmax(360px,1.15fr);gap:18px;height:58vh;min-height:350px}.email-code{display:flex;flex-direction:column;gap:10px;min-height:0}.email-code label{font-size:12px;color:#aaa}.email-code textarea{width:100%;flex:1;resize:none;background:#151516;border:0;border-radius:9px;padding:16px;color:#c7bbeb;font:12px/1.8 Consolas,monospace;min-height:0}.email-code small,.email-preview-note{font-size:11px;color:#999;line-height:1.7}.email-preview-note{margin-top:14px}.email-preview-wrap{background:#171719;overflow:hidden;border-radius:10px;display:flex;justify-content:center}.email-preview-wrap iframe{width:100%;height:100%;border:0;background:white;transition:width .2s}.email-preview-wrap.mobile-preview iframe{width:375px;max-width:100%}.email-designer.preview-only{grid-template-columns:1fr}.email-designer.preview-only .email-preview-wrap iframe{max-width:650px}@media(max-width:760px){.email-designer{grid-template-columns:1fr;height:auto}.email-code textarea{min-height:220px}.email-preview-wrap{height:540px}.email-designer-toolbar button{font-size:11px}}
.deliverable-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px;align-items:stretch}.deliverable-preview-card{padding:0;overflow:hidden;background:#1e1f20;border-radius:13px;min-width:0}.deliverable-preview{position:relative;aspect-ratio:3/4;background:#f3f1f7;overflow:hidden}.deliverable-preview iframe{display:block;width:200%;height:200%;border:0;transform:scale(.5);transform-origin:top left;pointer-events:none}.deliverable-preview-open{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background:transparent;padding:0;display:flex;align-items:flex-end;justify-content:center}.deliverable-preview-open:hover,.deliverable-preview-open:focus-visible{background:#15111912}.deliverable-preview-open>span{display:flex;align-items:center;gap:8px;margin:0 12px 18px;padding:11px 16px;border-radius:8px;background:#26222f;color:#eee;font-size:12px;opacity:0;transition:opacity .18s}.deliverable-preview-open:hover>span,.deliverable-preview-open:focus-visible>span{opacity:1}.deliverable-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 18px}.deliverable-caption h2{font-size:15px;font-weight:500;line-height:1.4;margin:0 0 6px}.deliverable-caption small{font-size:11px;color:#8e8b96}.deliverable-caption>.icon{color:#aa9bd5;flex-shrink:0;background:#29262f}.deliverable-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:380px;padding:30px;background:#1e1f20;text-align:center}.deliverable-add:hover{background:#272529}.deliverable-add .tile{width:46px;height:46px;background:#30283f;color:#b5a8f0}.deliverable-add .tile svg{width:23px;height:23px;margin:0}.deliverable-add strong{font-size:16px;font-weight:500}.deliverable-add>span:last-child{max-width:190px;font-size:12px;line-height:1.7;color:#97929f}@media(min-width:1800px){.deliverable-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:600px){.deliverable-gallery{grid-template-columns:1fr;gap:18px}.deliverable-add{min-height:160px}.deliverable-preview-open>span{opacity:1}}
.deliverable-editor-modal{width:min(1320px,96vw);max-width:1320px;background:#19191b}.deliverable-editor-modal>.modal-body{padding:0;overflow:hidden}.deliverable-editor{display:grid;grid-template-columns:340px minmax(0,1fr);height:72vh;min-height:420px}.editor-config{background:#202022;padding:24px;overflow:auto}.editor-section+.editor-section{margin-top:25px}.editor-kicker{display:block;font-size:10px;letter-spacing:1.1px;color:#ac99df;margin-bottom:18px}.editor-config .field{margin-bottom:15px}.editor-config .field label{font-size:12px}.editor-config .field input,.editor-config .field select{font-size:12px;background:#29292d;padding:11px}.editor-config .field-row{display:block}.editor-config .delivery-asset{padding:14px;background:#262629}.editor-config .field small{font-size:10px;line-height:1.6}.editor-config button{font-size:11px}.editor-text-fallback{margin-top:18px;color:#aaa;font-size:12px}.editor-text-fallback summary{cursor:pointer;margin-bottom:12px}.editor-text-fallback textarea{font-size:12px;min-height:110px}.editor-design{padding:22px 25px;overflow:auto;min-width:0}.editor-design-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.editor-design-head h3{font-size:15px;margin-bottom:5px}.editor-design-head>div>span{font-size:11px;color:#8d8894}.editor-design-head button{font-size:11px}.editor-html-field{background:#121214;border-radius:10px;overflow:hidden}.editor-html-field>label{display:flex;gap:8px;align-items:center;padding:13px 16px;color:#c7bfd6;font-size:12px;background:#242228}.editor-html-field>textarea{display:block;width:100%;height:220px;resize:vertical;border:0;background:#121214;color:#c6b6e6;padding:17px;font:12px/1.8 Consolas,monospace;tab-size:2;outline-offset:-2px}.editor-variables{display:flex;flex-wrap:wrap;gap:7px;padding:10px 14px}.editor-variables code{font-size:10px;color:#a598bf;background:#28232f;padding:4px 7px;border-radius:4px}.editor-preview-label{display:flex;justify-content:space-between;margin:21px 0 12px;color:#8e8799;font-size:10px;letter-spacing:.6px}.editor-live-preview{display:flex;justify-content:center;background:#111113;border-radius:10px;overflow:hidden;height:560px}.editor-live-preview iframe{width:100%;height:100%;border:0;background:white}.editor-live-preview.mobile-preview iframe{width:375px;max-width:100%}.deliverable-editor-modal>footer{padding:16px 24px}@media(max-width:900px){.deliverable-editor{grid-template-columns:280px minmax(0,1fr)}.editor-config,.editor-design{padding:18px}.editor-design-head{flex-wrap:wrap}}@media(max-width:650px){.deliverable-editor-modal>.modal-body{overflow:auto}.deliverable-editor{display:block;height:auto;min-height:0}.editor-config,.editor-design{overflow:visible}.editor-live-preview{height:500px}.deliverable-editor-modal{max-height:94dvh}}
.editor-mode-tabs{display:flex;gap:5px;padding:5px;background:#242228;border-radius:9px;margin-bottom:18px;width:max-content}.editor-mode-tabs button{background:transparent;color:#9b95a5;border:0;padding:9px 24px;font-size:12px}.editor-mode-tabs button.selected{background:#3a304e;color:#c9b8f3}.editor-design [hidden]{display:none!important}.editor-design .editor-html-field textarea{height:calc(72vh - 225px);min-height:260px}.editor-design #dp-preview-panel .editor-preview-label{margin-top:0}.editor-design #dp-preview-panel .editor-live-preview{height:calc(72vh - 160px);min-height:320px}@media(max-width:650px){.editor-design .editor-html-field textarea{height:380px}.editor-design #dp-preview-panel .editor-live-preview{height:540px}}
.app-select{position:relative}.app-select>select{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none;padding:0!important;overflow:hidden}.app-select-trigger{display:flex;justify-content:space-between;align-items:center;width:100%;gap:12px;text-align:left;background:#29292d!important;border:0;border-radius:8px;padding:12px!important;color:#d3cddc;font-size:12px!important}.app-select-trigger>svg{width:14px;height:14px;transform:rotate(90deg);color:#9b8cb9;margin:0;flex-shrink:0}.app-select-trigger:hover,.app-select-trigger[aria-expanded=true]{background:#343039!important}.app-select-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;padding:5px;z-index:50;background:#302c36;border-radius:9px;box-shadow:0 10px 30px #0005;max-height:220px;overflow:auto}.app-select-menu[hidden]{display:none}.app-select-menu button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;padding:11px;text-align:left;background:transparent;border:0;color:#c5becd;font-size:12px;border-radius:6px}.app-select-menu button:hover,.app-select-menu button:focus-visible{background:#40364f}.app-select-menu button[aria-selected=true]{background:#443558;color:#d4c2f5}.app-select-menu button svg{width:15px;height:15px;margin:0;color:#b39be9}.app-file-upload{position:relative;display:flex!important;align-items:center;gap:10px;padding:15px!important;border-radius:9px;background:#302a39;color:#c5b3e5;cursor:pointer;margin-bottom:9px}.app-file-upload:hover{background:#3a3146}.app-file-upload:focus-within{outline:2px solid #9686ed;outline-offset:2px}.app-file-upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.app-file-icon{display:grid;place-items:center;width:32px;height:36px;flex-shrink:0}.app-file-text{min-width:0;flex:1}.app-file-text strong{display:block;font-size:12px;font-weight:500}.app-file-text small{display:block;margin-top:5px;color:#a297af;overflow-wrap:anywhere}.app-file-plus svg{width:16px;height:16px}.editor-config{scrollbar-width:thin;scrollbar-color:#39333f transparent}
.editor-design #dp-preview-panel .editor-live-preview{position:relative;overflow:hidden;background:#111113}.editor-design #dp-preview-panel .editor-live-preview iframe{flex:none;border-radius:8px}.editor-design{display:flex;flex-direction:column;overflow:hidden}.editor-design-head,.editor-mode-tabs{flex-shrink:0}#dp-preview-panel{min-height:0;flex:1;display:flex;flex-direction:column}.editor-design #dp-preview-panel .editor-live-preview{flex:1;height:auto;min-height:0}.editor-html-field{min-height:0;flex:1;display:flex;flex-direction:column}.editor-design .editor-html-field textarea{min-height:120px;height:auto;flex:1}@media(max-width:650px){.editor-design{height:680px}.editor-design #dp-preview-panel .editor-live-preview{min-height:300px}}
/* Preview without an extra dark frame; dropdowns expand within the form flow. */
.editor-design #dp-preview-panel .editor-live-preview{background:transparent;border-radius:0}
.editor-config .app-select-menu{position:static;inset:auto;margin-top:6px;max-height:180px;box-shadow:none;z-index:auto;background:#302c36}
.editor-config .app-select-menu[hidden]{display:none!important}
.live-login{min-height:100dvh;display:grid;place-items:center;padding:24px;background:#141414}.live-login form{width:100%;max-width:390px;background:#202022;padding:32px;border-radius:18px}.live-login img{width:48px;height:48px;margin-bottom:24px}.live-login h1{font-size:25px;margin-bottom:12px}.live-login p{color:#a398b3;font-size:13px;line-height:1.7;margin-bottom:24px}.live-login label{display:block;font-size:12px;color:#bbb;margin-bottom:18px}.live-login input{display:block;width:100%;padding:13px;background:#2b2930;color:#eee;border:0;border-radius:8px;margin-top:8px}.live-login button{width:100%}.live-open-link{position:fixed;bottom:12px;right:18px;background:#7561d5;color:white;padding:10px 16px;border-radius:8px;font-size:12px;z-index:100}
.live-message-files{padding:0 25px;max-height:140px;overflow:auto}.live-message-files .settings-row{padding:8px 0;font-size:10px}.live-message-files button{font-size:10px;padding:5px}.live-html-message{width:100%;height:65vh;border:0;background:white;border-radius:8px}