.workspace{
    background:#f3f5f8;
    font-size:14px}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.live-status{display:inline-block;margin-left:12px;color:#487561;font-size:11px}
.password-editor{margin-top:18px;border-top:1px solid #dbe4f0;padding-top:16px}
.password-editor summary{cursor:pointer;font-weight:650}
.password-editor form{margin-top:16px}
.setup-layout>div,#sign-in,#computer{min-width:0}
.two-columns.setup-layout{align-items:stretch;margin-bottom:24px}
.setup-layout>.setup-step{margin-bottom:0}
.setup-step .detail-list dd,#sign-in dd,#computer dd{overflow-wrap:anywhere;min-width:0}
#sign-in form+form,#computer form+.notice{margin-top:16px}
.account-email-list{list-style:none;padding:0;margin:16px 0}
.account-email-list li{padding:12px 0;border-bottom:1px solid #dce5ef;overflow-wrap:anywhere}
.account-email-list strong,.account-email-list small{display:block;margin-bottom:6px}
@media(max-width:600px){.page-heading{flex-direction:column;align-items:flex-start!important;gap:18px}.page-heading>div{min-width:0;max-width:100%}.page-heading h1,.page-heading p{overflow-wrap:anywhere}}
.sidebar{
    width:238px;
    background:#0c131d;
    color:#e7eff9;
    position:fixed;
    inset:0 auto 0 0;
    display:flex;
    flex-direction:column;
    padding:25px 13px 16px;
    z-index:20;
    border-right:1px solid #1d2a3b}
.sidebar .brand{
    font-size:19px;
    padding-left:9px;
    gap:9px}
.sidebar .brand-mark{
    font-size:32px}
.workspace-label{
    font-size:9px;
    letter-spacing:1.7px;
    color:#6d849f;
    padding:30px 15px 15px}
.sidebar nav{
    display:grid;
    gap:4px;
    overflow:auto}
.sidebar nav>a{
    padding:12px 16px;
    color:#adbed3;
    border-radius:6px;
    font-size:13px}
.sidebar nav>a:hover,.sidebar nav>a.active{
    background:#007deb;
    color:white;
    text-decoration:none}
.sidebar-bottom{
    margin-top:auto;
    padding:22px 10px 0;
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    gap:10px;
    align-items:center;
    border-top:1px solid #233046;
    font-size:11px}
.sidebar-bottom form{
    grid-column:1 / -1;
    margin:0}
.sidebar-username{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap}
.sidebar-bottom button{
    width:100%;
    min-height:36px;
    text-align:left;
    white-space:nowrap;
    color:#93abc5;
    font-size:12px}
.avatar{
    width:30px;
    height:30px;
    background:#167ee7;
    color:white;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-weight:700;
    flex-shrink:0}
.workspace-body{
    margin-left:238px}
.topbar{
    height:65px;
    padding:0 32px;
    border-bottom:1px solid #dce4ed;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#fff;
    color:#64758c;
    font-size:12px}
.topbar>div{
    display:flex;
    gap:24px}
.workspace-content{
    padding:32px;
    max-width:1600px;
    margin:auto}
.page-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:27px;
    gap:20px}
.page-heading h1{
    font-size:32px;
    line-height:1.2;
    margin-bottom:8px}
.page-heading p{
    color:#697c95;
    font-size:14px;
    margin:0}
.metrics{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:25px}
.metric{
    background:white;
    border:1px solid #dce4ed;
    border-radius:8px;
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:13px}
.metric>span{
    font-size:12px;
    color:#63738a}
.metric strong{
    font-size:32px;
    letter-spacing:-1px;
    line-height:1.1}
.metric small{
    font-size:11px}
.panel{
    border:1px solid #dce4ed;
    background:white;
    border-radius:8px;
    padding:25px;
    margin-bottom:24px;
    min-width:0}
.panel h2{
    font-size:20px;
    margin-bottom:9px}
.panel>p{
    color:#6d7c91;
    font-size:13px}
.panel-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
    gap:20px}
.panel-heading h2{
    margin:0}
.panel-heading>a{
    font-size:12px}
.two-columns{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:24px;
    align-items:start}
.two-columns.equal{
    grid-template-columns:1fr 1fr}
.panel label.field{
    margin-bottom:17px}
.panel .form-grid{
    gap:15px}
.table-wrap{
    overflow:auto}
.data-table{
    width:100%;
    border-collapse:collapse;
    font-size:12px}
.data-table th{
    text-align:left;
    color:#6a7a91;
    font-weight:500;
    padding:14px 12px;
    background:#f6f8fb;
    border-bottom:1px solid #dfe6ef;
    white-space:nowrap}
.data-table td{
    padding:15px 12px;
    border-bottom:1px solid #e9eef5;
    vertical-align:middle}
.data-table tr:last-child td{
    border-bottom:0}
.data-table td>small{
    display:block;
    font-size:11px}
.data-table .actions{
    gap:7px}
.empty-state{
    padding:55px 30px;
    text-align:center;
    color:#76879e}
.empty-state strong{
    display:block;
    color:#233b58;
    font-size:18px;
    margin-bottom:10px}
.empty-state p{
    font-size:13px}
.detail-list{
    display:grid;
    grid-template-columns:145px 1fr;
    gap:15px;
    font-size:13px;
    margin:25px 0}
.detail-list dt{
    color:#74839a}
.detail-list dd{
    margin:0;
    word-break:break-word}
.toolbar{
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin-bottom:20px;
    flex-wrap:wrap}
.toolbar form{
    display:flex;
    gap:10px;
    max-width:520px;
    flex:1}
.toolbar input{
    min-width:180px}
.page-tabs{
    display:flex;
    gap:24px;
    border-bottom:1px solid #dce4ed;
    margin-bottom:24px}
.page-tabs a{
    padding:13px 0;
    color:#63758f;
    font-size:13px}
.page-tabs a.active{
    border-bottom:2px solid #008dff;
    color:#0081f0}
.drop-zone{
    display:block;
    width:100%;
    margin:24px 0;
    color:var(--ink);
    font:inherit;
    padding:65px 25px;
    text-align:center;
    border:2px dashed #b7cbe2;
    background:#f7fbff;
    border-radius:8px;
    cursor:pointer}
.drop-zone.dragging{
    border-color:#008dff;
    background:#e8f5ff}
.drop-zone .upload-icon{
    display:block;
    width:48px;
    height:48px;
    color:#178de9;
    margin:0 auto 15px}
.drop-zone strong{
    display:block;
    font-size:19px;
    margin-bottom:10px}
.drop-zone > span{
    display:block;
    color:#8292a8;
    font-size:12px}
.drop-zone:hover,.drop-zone:focus-visible{
    border-color:#008dff;
    background:#eef7ff}
#file-label{
    overflow-wrap:anywhere}
.file-check-results{
    margin-top:25px}
.solution-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:6px}
.solution-list>div{
    border:1px solid #325574;
    background:#101e2e;
    color:#e7eff9;
    border-radius:6px;
    padding:8px;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    min-width:0;
    min-height:56px;
    text-align:left;
    font-size:12px;
    line-height:1.35}
.solution-card img{
    width:32px;
    height:32px;
    object-fit:contain;
    flex-shrink:0}
.solution-card span{
    min-width:0;
    overflow-wrap:anywhere}
.progress-track{
    height:6px;
    background:#e4edf7;
    border-radius:5px;
    overflow:hidden;
    margin:18px 0}
.progress-track.busy:after{
    content:'';
    display:block;
    height:100%;
    width:35%;
    background:#0092ff;
    animation:progress 1.4s ease-in-out infinite}
@keyframes progress{
    from{
        transform:translateX(-100%)}
    to{
        transform:translateX(400%)}
}
.invoice{
    max-width:900px;
    margin:25px auto;
    background:white;
    padding:50px;
    border:1px solid #dce4ed}
.invoice-header{
    display:flex;
    justify-content:space-between;
    align-items:start;
    padding-bottom:35px;
    border-bottom:2px solid #008dff;
    margin-bottom:30px}
.invoice .brand{
    color:#172b44}
.invoice .brand small{
    color:#6c819b}
.invoice-total{
    font-size:24px;
    text-align:right;
    padding:25px 0;
    border-top:1px solid #dce4ed}
.copy-code{
    font-family:Consolas,monospace;
    background:#f0f6ff;
    border:1px solid #bfd9f4;
    padding:15px;
    word-break:break-all;
    font-size:16px;
    border-radius:5px}
.message-list{
    display:flex;
    flex-direction:column;
    gap:20px;
    max-height:580px;
    overflow:auto;
    padding:10px 0 20px}
.message{
    background:#f0f4f9;
    border:1px solid #e0e7f0;
    border-radius:8px;
    padding:18px;
    max-width:88%}
.message.staff{
    margin-left:auto;
    background:#eaf4ff;
    border-color:#cfe4fa}
.message header{
    display:flex;
    gap:20px;
    justify-content:space-between;
    font-size:11px;
    margin-bottom:12px;
    color:#637892}
.message p{
    white-space:pre-wrap;
    margin:0;
    font-size:14px}
.message a{
    display:inline-block;
    margin-top:12px}
.private-detail{
    font-family:Consolas,monospace;
    font-size:11px;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    background:#111e30;
    color:#c0d2e7;
    padding:18px;
    border-radius:5px}
.integration-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px}
.integration-grid .panel{
    margin-bottom:0}
.integration-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:24px}
.integration-title h2{
    margin:0}
.setting-status{
    font-size:11px;
    color:#458067}
.settings-note{
    margin-top:22px}
.section-divider{
    height:1px;
    background:#e1e8f0;
    margin:24px 0}
.inline-form{
    display:flex;
    gap:10px;
    align-items:end;
    flex-wrap:wrap}
.inline-form label{
    flex:1}
.small-code{
    font-size:11px;
    word-break:break-all}
.muted-label{
    color:#8a99ad}
.auth-card h1{
    letter-spacing:-1px}
@media(max-width:1150px){
    .metrics{
        grid-template-columns:repeat(2,1fr)}
    .two-columns{
        grid-template-columns:1fr}
    .sidebar{
        width:210px}
    .workspace-body{
        margin-left:210px}
    .workspace-content{
        padding:24px}
    .sidebar .brand{
        font-size:16px}
    .integration-grid{
        grid-template-columns:1fr}
}
@media(max-width:760px){
    .sidebar{
        position:static;
        width:auto;
        padding:16px}
    .sidebar nav{
        display:flex;
        gap:4px;
        margin-top:15px}
    .sidebar nav>a{
        white-space:nowrap;
        padding:9px 12px;
        font-size:11px}
    .sidebar .workspace-label,.sidebar-bottom{
        display:none}
    .workspace-body{
        margin-left:0}
    .topbar{
        height:50px;
        padding:0 20px}
    .workspace-content{
        padding:22px 15px}
    .page-heading{
        align-items:start}
    .page-heading h1{
        font-size:26px}
    .page-heading>.actions{
        justify-content:end}
    .metrics{
        gap:10px}
    .metric{
        padding:16px}
    .metric strong{
        font-size:27px}
    .panel{
        padding:18px}
    .two-columns.equal{
        grid-template-columns:1fr}
    .solution-list{
        grid-template-columns:1fr 1fr}
    .invoice{
        padding:24px}
    .detail-list{
        grid-template-columns:110px 1fr}
    .message{
        max-width:95%}
}
@media print{
    .sidebar,.topbar,.public-header,.public-footer,.page-heading .actions{
        display:none}
    .workspace-body{
        margin:0}
    .workspace-content{
        padding:0}
    .invoice{
        border:0;
        margin:0;
        max-width:none}
    .workspace{
        background:white}
}
