@import url("./tokens.css");

:root{
    font-family:var(--font-sans);
    color:var(--ink);
    background:var(--canvas);
    font-synthesis:none;
    font-size:var(--text-xs);
    --muted:var(--muted-text);
    --line:var(--border);
    --sidebar:280px;
}
*{
    box-sizing:border-box}
body{
    margin:0}
button,input,select,textarea{
    font:inherit}
button,a,input,select,textarea{
    -webkit-tap-highlight-color:transparent}
button{
    cursor:pointer}
button{
    color:inherit}
button:disabled{
    opacity:.5;
    cursor:wait}
button,select,input,textarea{
    outline-offset:4px}
button:focus-visible,a:focus-visible{
    outline:2px solid var(--focus)}
input:focus,select:focus,textarea:focus{
    outline:2px solid var(--chart-accent);
    outline-offset:1px}
button svg{
    flex-shrink:0}
a{
    color:inherit;
    text-decoration:none}
button{
    border:0;
    background:none}
h1,h2,h3,p{
    margin:0}
h2{
    font-size:var(--text-base);
    line-height:1.4;
    font-weight:650;
    letter-spacing:-.3px}
h3{
    font-size:var(--text-xs);
    font-weight:650;
    line-height:1.5}
small{
    font-size:var(--text-xs)}
svg{
    vertical-align:middle;
    flex-shrink:0}
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0}
.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:var(--sidebar);
    background:var(--sidebar-bg);
    color:var(--sidebar-text);
    z-index:25;
    display:flex;
    flex-direction:column;
    padding:30px 16px 0;
    border-right:1px solid var(--sidebar-border);
}
.brand{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
    color:var(--ink);
    font-size:var(--text-lg);
    letter-spacing:1px;
    font-weight:750;
    padding:0 11px 27px}
.workspace-label{
    display:flex;
    align-items:center;
    gap:9px;
    border:1px solid var(--sidebar-border);
    border-radius:var(--radius-small);
    padding:12px 9px;
    margin:0 3px 22px;
    font-size:var(--text-xs);
    color:var(--sidebar-text);
    font-weight:550;
    background:var(--sidebar-hover);
}
.workspace-label>svg{
    margin-left:auto;
    color:var(--sidebar-text)}
.workspace-label small{
    display:block;
    color:var(--sidebar-text);
    font-size:var(--text-xs);
    margin-top:4px;
    font-weight:400}
.workspace-avatar{
    display:grid;
    place-items:center;
    background:var(--sidebar-active);
    border:1px solid var(--sidebar-border);
    border-radius:5px;
    color:var(--accent);
    width:28px;
    height:28px;
    font-size:var(--text-xs)}
.sidebar nav{
    overflow-y:auto;
    scrollbar-width:none;
    padding-bottom:12px;
    flex:1}
.nav-group{
    font-size:var(--text-xs);
    letter-spacing:1.1px;
    font-weight:600;
    padding:10px 13px 10px;
    color:var(--sidebar-muted)}
.nav-item{
    display:flex;
    align-items:center;
    width:100%;
    gap:11px;
    text-align:left;
    border-radius:var(--radius-small);
    padding:10px 12px;
    font-size:var(--text-xs);
    color:var(--sidebar-text);
    margin:2px 0;
    transition:background .15s,color .15s;
    min-height:38px}
.nav-item:hover{
    background:var(--sidebar-hover);
    color:var(--ink)}
.nav-item.active{
    background:var(--sidebar-active);
    color:var(--accent);
    box-shadow:inset 3px 0 0 var(--accent);
}
.nav-item.active>svg{
    color:var(--accent)}
.nav-count{
    margin-left:auto;
    border-radius:4px;
    padding:2px 5px;
    background:var(--sidebar-border);
    font-size:var(--text-xs);
    color:var(--sidebar-text)}
.nav-count.warm{
    background:var(--accent);
    color:var(--surface)}
.sidebar-footer{
    padding:15px 2px 16px;
    border-top:1px solid var(--sidebar-border)}
.help-link{
    display:flex;
    width:100%;
    align-items:center;
    gap:9px;
    color:var(--sidebar-text);
    font-size:var(--text-xs);
    padding:5px 9px 17px}
.help-link svg:last-child{
    margin-left:auto}
.sidebar-status{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--sidebar-muted);
    font-size:var(--text-xs);
    padding:10px 9px 0;
    border-top:1px solid var(--sidebar-border)}
.sidebar-status>span{
    width:5px;
    height:5px;
    background:var(--accent);
    border-radius:50%}
.sidebar-status small{
    margin-left:auto;
    font-size:var(--text-xs)}
.workspace{
    margin-left:var(--sidebar);
    min-height:100vh}
.topbar{
    height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding:0 32px;
    background:var(--surface);
    border-bottom:1px solid var(--border)}
.breadcrumb{
    font-size:var(--text-xs);
    color:var(--muted-text);
    display:flex;
    align-items:center;
    gap:12px;
    white-space:nowrap}
.breadcrumb strong{
    font-weight:550;
    color:var(--muted-text)}
.global-search{
    position:relative;
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted-text);
    margin-left:auto;
    max-width:270px;
    width:26%;
    min-width:160px}
.global-search input{
    width:100%;
    border:0;
    background:transparent;
    font-size:var(--text-xs);
    padding:8px 2px;
    min-width:0}
.global-search kbd{
    font-size:var(--text-xs);
    white-space:nowrap;
    background:var(--canvas);
    border:1px solid var(--surface-soft);
    padding:3px 4px;
    border-radius:4px;
    color:var(--muted-text)}
.topbar-right{
    display:flex;
    align-items:center;
    gap:18px}
.demo-badge{
    font-size:var(--text-xs);
    letter-spacing:1px;
    border:1px solid var(--border);
    background:var(--canvas);
    color:var(--amber);
    border-radius:4px;
    padding:5px 6px;
    font-weight:650}
.icon-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    height:34px;
    border-radius:var(--radius-small);
    color:var(--muted-text);
    padding:6px;
    flex-shrink:0}
.icon-btn:hover{
    background:var(--surface-soft);
    color:var(--muted-text)}
.notification-btn{
    position:relative}
.notification-btn i{
    position:absolute;
    top:7px;
    right:9px;
    width:5px;
    height:5px;
    background:var(--accent);
    border:1px solid white;
    border-radius:50%}
.user-switch{
    display:flex;
    align-items:center;
    gap:10px;
    padding-left:20px;
    border-left:1px solid var(--line)}
.avatar{
    display:grid;
    place-items:center;
    border-radius:50%;
    width:33px;
    height:33px;
    background:var(--border);
    color:var(--muted-text);
    font-size:var(--text-xs);
    font-weight:650;
    flex-shrink:0}
.avatar.small{
    width:30px;
    height:30px;
    font-size:var(--text-xs)}
.user-switch select{
    font-size:var(--text-xs);
    font-weight:600;
    border:0;
    background:transparent;
    color:var(--muted-text);
    width:170px;
    padding:3px 0}
.user-switch small{
    display:block;
    font-size:var(--text-xs);
    color:var(--muted-text);
    padding-top:3px}
.mobile-menu{
    display:none}
.sidebar-scrim{
    display:none}
main{
    padding:35px 32px 20px;
    max-width:1640px;
    margin:auto}
.eyebrow{
    font-size:var(--text-xs);
    font-weight:650;
    letter-spacing:1.3px;
    color:var(--muted-text);
    margin-bottom:10px}
.page-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    margin-bottom:25px}
.page-head h1{
    font-size:var(--text-display);
    letter-spacing:-1.2px;
    line-height:1.25;
    font-weight:650;
    margin-bottom:8px}
.page-head p{
    font-size:var(--text-xs);
    color:var(--muted-text);
    line-height:1.6}
.head-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0}
.btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    border-radius:var(--radius-small);
    min-height:38px;
    padding:10px 15px;
    font-size:var(--text-xs);
    font-weight:600;
    white-space:nowrap;
    line-height:1.25;
    transition:background .15s}
.btn.primary{
    background:var(--accent);
    color:var(--surface);
    border:1px solid var(--accent);
    box-shadow:none;
    border-radius:var(--radius-action);
}
.btn.primary:hover{
    background:var(--accent-strong);
    border-color:var(--accent-strong);
}
.btn.secondary{
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--ink)}
.btn.secondary:hover{
    background:var(--accent-soft);
    border-color:var(--accent);
}
.btn.ghost{
    background:transparent;
    color:var(--muted-text)}
.btn.ghost:hover{
    background:var(--surface-soft)}
.btn.danger{
    background:var(--red-soft);
    color:var(--red);
    border:1px solid var(--red-soft)}
.btn.full{
    width:100%}
.demo-strip{
    display:flex;
    align-items:center;
    gap:8px;
    padding:11px 15px;
    background:var(--surface-soft);
    border:1px solid var(--border);
    border-radius:var(--radius-small);
    margin-bottom:22px;
    font-size:var(--text-xs);
    color:var(--muted-text);
    line-height:1.5}
.demo-strip strong{
    font-size:var(--text-xs);
    color:var(--muted-text);
    font-weight:600;
    white-space:nowrap}
.demo-strip button{
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
    font-size:var(--text-xs);
    white-space:nowrap;
    color:var(--muted-text);
    font-weight:600}
.demo-dot{
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--chart-bar);
    display:inline-block;
    flex-shrink:0}
.metric-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;
    margin-bottom:23px}
.metric-grid.three{
    grid-template-columns:repeat(3,minmax(0,1fr))}
.metric{
    text-align:left;
    padding:19px 19px 17px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    min-width:0;
    box-shadow:var(--shadow-card);
    transition:transform .15s,border-color .15s}
.metric:hover{
    transform:translateY(-2px);
    border-color:var(--accent)}
.metric.warm{
    background:var(--accent-soft);
    border-color:var(--border)}
.metric-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:var(--text-xs);
    color:var(--muted-text);
    margin-bottom:15px}
.metric-top>svg{
    color:var(--muted-text)}
.metric>strong{
    font-size:var(--text-display);
    letter-spacing:-.8px;
    font-weight:620;
    display:block;
    white-space:nowrap;
    line-height:1.2;
    margin-bottom:12px;
    color:var(--ink);
}
.metric>strong em{
    font-size:var(--text-xs);
    font-weight:450;
    font-style:normal;
    letter-spacing:0;
    color:var(--muted-text)}
.metric-footer{
    font-size:var(--text-xs);
    color:var(--muted-text);
    display:flex;
    align-items:center;
    gap:5px;
    line-height:1.5}
.mini-dot{
    width:5px;
    height:5px;
    border-radius:50%;
    display:inline-block;
    margin-right:4px}
.mini-dot.green{
    background:var(--accent)}
.mini-dot.amber{
    background:var(--accent)}
.text-muted,.muted{
    color:var(--muted-text)}
.text-amber{
    color:var(--amber)!important}
.text-green{
    color:var(--muted-text)!important}
.text-red{
    color:var(--amber)!important}
.panel{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    min-width:0}
.panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:21px 22px 15px}
.panel-head p{
    font-size:var(--text-xs);
    color:var(--muted-text);
    margin-top:5px}
.panel-head>svg{
    color:var(--muted-text)}
.panel-head select,.toolbar select{
    border:1px solid var(--line);
    border-radius:6px;
    padding:7px 24px 7px 10px;
    font-size:var(--text-xs);
    background:var(--surface);
    color:var(--muted-text)}
.panel-subtitle{
    font-size:var(--text-xs);
    color:var(--muted-text);
    padding:0 22px 15px;
    margin-top:-5px}
.dashboard-main{
    display:grid;
    grid-template-columns:minmax(0,1.8fr) minmax(270px,1fr);
    gap:20px;
    margin-bottom:22px}
.chart-summary{
    display:flex;
    align-items:baseline;
    gap:8px;
    padding:0 22px 10px}
.chart-summary strong{
    font-size:var(--text-xl);
    letter-spacing:-.5px;
    font-weight:600}
.chart-summary>span{
    font-size:var(--text-xs);
    color:var(--muted-text)}
.chart-summary .chart-legend{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:5px}
.chart-legend i{
    background:var(--chart-bar);
    width:6px;
    height:6px;
    border-radius:2px}
.revenue-chart{
    display:block;
    width:calc(100% - 44px);
    height:auto;
    min-height:160px;
    max-height:225px;
    margin:0 22px 10px;
    overflow:visible}
.chart-label{
    font:9px -apple-system,BlinkMacSystemFont,sans-serif;
    fill:var(--sidebar-muted)}
.chart-note{
    padding:11px 22px;
    font-size:var(--text-xs);
    color:var(--muted-text);
    border-top:1px solid var(--surface-soft);
    line-height:1.5}
.attention-panel{
    display:flex;
    flex-direction:column}
.count-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--accent-soft);
    color:var(--accent);
    font-size:var(--text-xs);
    border-radius:5px;
    min-width:22px;
    min-height:20px}
.attention-list{
    padding:0 19px;
    flex:1}
.attention-row{
    display:flex;
    align-items:center;
    gap:12px;
    text-align:left;
    width:100%;
    padding:16px 0;
    border-bottom:1px solid var(--surface-soft)}
.attention-row:last-child{
    border-bottom:0}
.attention-row>span:nth-child(2){
    flex:1;
    min-width:0}
.attention-row strong{
    display:block;
    font-size:var(--text-xs);
    line-height:1.5;
    font-weight:550}
.attention-row small{
    display:block;
    font-size:var(--text-xs);
    color:var(--muted-text);
    margin-top:5px}
.attention-row>svg{
    color:var(--muted-text)}
.attention-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-small);
    background:var(--accent-soft);
    color:var(--accent);
    width:34px;
    height:36px;
    flex-shrink:0}
.panel-bottom{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-top:1px solid var(--line);
    padding:14px;
    font-size:var(--text-xs);
    font-weight:550;
    color:var(--muted-text);
    width:100%;
    background:var(--surface)}
.panel-bottom:hover{
    background:var(--surface-soft)}
.dashboard-bottom{
    display:grid;
    grid-template-columns:minmax(0,1.8fr) minmax(270px,1fr);
    gap:20px}
.text-btn{
    font-size:var(--text-xs);
    font-weight:550;
    color:var(--accent);
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    min-height:28px}
.text-btn:hover{
    color:var(--amber)}
.table-wrap{
    overflow-x:auto;
    scrollbar-width:thin}
table{
    width:100%;
    border-collapse:collapse;
    text-align:left;
    font-size:var(--text-xs);
    white-space:nowrap}
th{
    font-size:var(--text-xs);
    font-weight:550;
    color:var(--muted-text);
    background:var(--surface);
    padding:12px 18px;
    border-top:1px solid var(--surface-soft);
    border-bottom:1px solid var(--surface-soft)}
td{
    padding:15px 18px;
    border-bottom:1px solid var(--surface-soft);
    color:var(--muted-text);
    line-height:1.4}
tbody tr:last-child td{
    border-bottom:0}
tbody tr:hover{
    background:var(--surface)}
td small{
    display:block;
    font-size:var(--text-xs);
    color:var(--muted-text);
    margin-top:5px;
    line-height:1.5}
td strong{
    font-size:var(--text-xs);
    font-weight:550}
.order-id{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:var(--text-xs);
    font-weight:550;
    padding:0;
    color:var(--accent)}
.order-id:hover{
    text-decoration:underline;
    color:var(--amber)}
.amount{
    font-variant-numeric:tabular-nums;
    font-weight:550;
    white-space:nowrap;
    color:var(--muted-text);
    font-size:var(--text-xs)}
.badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    white-space:nowrap;
    line-height:1.25;
    font-size:var(--text-xs);
    font-weight:500;
    border-radius:5px;
    padding:5px 7px;
    background:var(--surface-soft);
    color:var(--muted-text)}
.badge>span{
    width:4px;
    height:4px;
    border-radius:50%;
    background:currentColor;
    opacity:.75}
.badge.green{
    background:var(--green-soft);
    color:var(--green)}
.badge.amber{
    background:var(--amber-soft);
    color:var(--amber)}
.badge.blue{
    background:var(--blue-soft);
    color:var(--blue)}
.badge.purple{
    background:var(--purple-soft);
    color:var(--purple)}
.badge.red{
    background:var(--red-soft);
    color:var(--red)}
.badge.neutral{
    background:var(--surface-soft);
    color:var(--muted-text)}
.channel{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:var(--text-xs);
    white-space:nowrap;
    color:var(--muted-text)}
.channel i{
    width:5px;
    height:5px;
    background:var(--channel);
    border-radius:50%;
    display:inline-block}
.channel small{
    font-size:var(--text-xs);
    padding:1px 3px;
    border:1px solid var(--surface-soft);
    border-radius:3px;
    display:inline;
    margin:0;
    color:var(--muted-text)}
.channel-panel .panel-head{
    padding-bottom:12px}
.channel-stat{
    margin:0 22px 17px}
.channel-stat>div:first-child{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:7px}
.channel-stat strong{
    font-size:var(--text-xs);
    font-weight:500;
    color:var(--muted-text)}
.progress{
    height:4px;
    background:var(--surface-soft);
    border-radius:5px;
    overflow:hidden}
.progress span{
    display:block;
    height:100%;
    border-radius:5px}
.soft-note{
    font-size:var(--text-xs);
    color:var(--muted-text);
    background:var(--canvas);
    border:1px solid var(--surface-soft);
    border-radius:var(--radius-small);
    padding:13px 15px;
    line-height:1.7;
    margin:16px 0}
.channel-panel .soft-note{
    background:var(--canvas);
    border-radius:0;
    border:0;
    border-top:1px solid var(--surface-soft);
    font-size:var(--text-xs);
    margin-bottom:0;
    margin-top:20px}
.page-footer{
    display:flex;
    justify-content:space-between;
    font-size:var(--text-xs);
    color:var(--muted-text);
    letter-spacing:.25px;
    margin-top:25px;
    padding:0 2px}
.tabs{
    display:flex;
    gap:25px;
    padding:0 22px;
    overflow-x:auto;
    border-bottom:1px solid var(--line)}
.tab{
    font-size:var(--text-xs);
    color:var(--muted-text);
    padding:18px 0 15px;
    white-space:nowrap;
    border-bottom:2px solid transparent}
.tab.active{
    color:var(--accent);
    border-bottom-color:var(--accent);
    font-weight:600}
.tab span{
    padding:2px 5px;
    background:var(--surface-soft);
    border-radius:4px;
    margin-left:4px;
    font-size:var(--text-xs)}
.toolbar{
    display:flex;
    align-items:center;
    gap:15px;
    padding:17px 22px;
    min-height:64px}
.search-input{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted-text);
    max-width:350px;
    flex:1}
.search-input input{
    border:0;
    width:100%;
    min-width:0;
    font-size:var(--text-xs);
    padding:8px 0;
    background:transparent}
.table-total{
    font-size:var(--text-xs);
    color:var(--muted-text);
    margin-left:auto;
    white-space:nowrap}
.table-foot{
    display:flex;
    justify-content:space-between;
    padding:14px 22px;
    font-size:var(--text-xs);
    color:var(--muted-text);
    border-top:1px solid var(--line)}
.summary-strip{
    display:flex;
    align-items:center;
    gap:28px;
    padding:0 2px;
    margin-bottom:22px;
    color:var(--muted-text);
    font-size:var(--text-xs)}
.summary-strip>div{
    display:flex;
    align-items:center;
    gap:8px}
.summary-strip strong{
    color:var(--muted-text);
    font-weight:550;
    margin-left:3px}
.summary-strip>.text-btn{
    margin-left:auto}
.product-cell{
    display:flex;
    align-items:center;
    gap:12px;
    text-align:left;
    padding:0}
.product-cell strong{
    display:block;
    font-size:var(--text-xs)}
.product-avatar{
    width:41px;
    height:43px;
    border-radius:var(--radius-small);
    border:1px solid var(--surface-soft);
    background:var(--surface-soft);
    color:var(--muted-text);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0}
.product-avatar.console{
    background:var(--accent-soft);
    color:var(--accent)}
.product-avatar.accessory{
    background:var(--surface-soft);
    color:var(--ink)}
.mono{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:var(--text-xs)}
.market-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:15px;
    margin-bottom:24px}
.market-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    text-align:left;
    padding:20px 17px;
    transition:transform .15s}
.market-card:hover{
    transform:translateY(-3px)}
.market-logo{
    width:100%;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin-bottom:16px;
}
.channel-brand{
    display:block;
    flex-shrink:0;
    object-fit:contain;
}
.channel-brand-icon{
    width:24px;
    height:24px;
    border-radius:5px;
}
.channel-brand-logo{
    width:160px;
    max-width:100%;
    height:64px;
    object-position:left center;
}
.channel-brand-symbol{width:64px;}
.integration-brand{display:inline-flex;align-items:center;gap:8px;}
.market-card>.badge{
    padding:4px 5px;
    font-size:var(--text-xs)}
.market-card h3{
    margin:10px 0 7px;
    font-size:var(--text-xs)}
.market-card p{
    font-size:var(--text-xs);
    color:var(--muted-text);
    line-height:1.5}
.market-bottom{
    border-top:1px solid var(--surface-soft);
    margin-top:17px;
    padding-top:13px;
    display:flex;
    align-items:center;
    gap:5px;
    font-size:var(--text-xs);
    color:var(--muted-text)}
.market-bottom>svg{
    margin-left:auto}
.info-line{
    display:flex;
    align-items:flex-start;
    gap:8px;
    color:var(--muted-text);
    font-size:var(--text-xs);
    line-height:1.7;
    margin:17px 2px}
.spaced{
    margin-top:22px}
.approval-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    padding:22px}
.approval-card{
    border:1px solid var(--surface-soft);
    border-radius:var(--radius-small);
    padding:17px;
    display:flex;
    flex-direction:column;
    min-height:210px}
.approval-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:7px;
    margin-bottom:20px}
.approval-type{
    font-size:var(--text-xs);
    color:var(--muted-text);
    display:flex;
    align-items:center;
    gap:6px}
.approval-card h3{
    font-size:var(--text-xs);
    line-height:1.6;
    margin-bottom:8px}
.approval-card p{
    color:var(--muted-text);
    font-size:var(--text-xs);
    line-height:1.6;
    flex:1}
.approval-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    font-size:var(--text-xs);
    color:var(--muted-text);
    margin:20px 0 15px}
.empty{
    text-align:center;
    padding:55px 25px;
    color:var(--muted-text)}
.empty>svg{
    margin-bottom:15px}
.empty h3{
    color:var(--muted-text);
    font-size:var(--text-sm);
    margin-bottom:8px}
.empty p{
    font-size:var(--text-xs);
    line-height:1.7;
    max-width:400px;
    margin:0 auto 18px}
.customer-name{
    display:flex;
    align-items:center;
    gap:10px;
    text-align:left;
    padding:0}
.kanban{
    display:flex;
    overflow:auto;
    padding:22px;
    gap:12px;
    min-height:300px}
.kanban-col{
    min-width:180px;
    background:var(--canvas);
    border-radius:var(--radius-small);
    padding:13px;
    flex:1}
.kanban-col h3{
    font-size:var(--text-xs);
    color:var(--muted-text);
    display:flex;
    justify-content:space-between;
    margin-bottom:14px}
.kanban-col h3>span{
    color:var(--muted-text)}
.lead-card{
    text-align:left;
    background:var(--surface);
    border:1px solid var(--surface-soft);
    box-shadow:0 2px 3px var(--scrim);
    width:100%;
    border-radius:var(--radius-small);
    padding:14px 11px;
    margin-bottom:10px;
    display:block}
.lead-card strong{
    display:block;
    font-size:var(--text-xs)}
.lead-card small{
    display:block;
    font-size:var(--text-xs);
    color:var(--muted-text);
    margin-top:7px}
.lead-card>span{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:var(--text-xs);
    color:var(--amber);
    margin-top:13px}
.task-row{
    display:flex;
    align-items:center;
    gap:15px;
    padding:19px 22px;
    border-bottom:1px solid var(--surface-soft);
    font-size:var(--text-xs);
    color:var(--muted-text)}
.task-row:last-child{
    border:0}
.task-row>div{
    flex:1;
    min-width:0}
.task-row strong{
    color:var(--muted-text);
    font-size:var(--text-xs);
    font-weight:550}
.task-row small{
    display:block;
    font-size:var(--text-xs);
    color:var(--muted-text);
    margin-top:5px}
.task-row>span:not(.badge){
    font-size:var(--text-xs)}
.task-check{
    width:19px;
    height:19px;
    border-radius:5px;
    border:1px solid var(--border);
    background:var(--surface);
    display:grid;
    place-items:center;
    padding:0;
    flex-shrink:0}
.task-check.done{
    background:var(--chart-bar);
    color:var(--surface);
    border-color:var(--chart-bar)}
.report-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    margin-bottom:25px}
.report-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
    text-align:left;
    transition:transform .15s}
.report-card:hover{
    transform:translateY(-3px)}
.report-card>svg{
    color:var(--accent);
    margin-bottom:18px}
.report-card h3{
    font-size:var(--text-base);
    margin-bottom:10px}
.report-card p{
    font-size:var(--text-xs);
    color:var(--muted-text);
    line-height:1.8}
.report-card>span{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:24px;
    font-size:var(--text-xs);
    color:var(--accent)}
.padded{
    padding:24px}
.padded h2{
    margin-bottom:10px}
.padded>.muted{
    font-size:var(--text-xs);
    line-height:1.7;
    margin-bottom:22px}
.settings-grid{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:24px;
    align-items:start}
.integration-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:1px solid var(--surface-soft);
    font-size:var(--text-xs);
    color:var(--muted-text)}
.integration-row:last-child{
    border:0}
.checkbox-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin:10px 0;
    font-size:var(--text-xs);
    color:var(--muted-text)}
.checkbox-row input{
    accent-color:var(--chart-bar);
    width:16px;
    height:16px}
.all-clear{
    padding:25px 5px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
    color:var(--muted-text);
    font-size:var(--text-xs)}

/* Modal and workflow forms */
.dialog{
    border:1px solid var(--border);
    border-radius:14px;
    max-width:min(540px,calc(100vw - 36px));
    width:100%;
    max-height:calc(100dvh - 48px);
    padding:0;
    color:var(--muted-text);
    background:var(--surface);
    box-shadow:0 25px 100px var(--scrim);
    overflow:hidden}
.dialog::backdrop{
    background:var(--scrim);
    backdrop-filter:blur(3px)}
.dialog[open]{
    display:flex;
    flex-direction:column;
    animation:modal-in .18s ease-out}
.dialog.wide{
    max-width:min(700px,calc(100vw - 36px))}
.dialog.drawer{
    height:100dvh;
    max-height:100dvh;
    max-width:min(650px,100vw);
    margin:0 0 0 auto;
    border-radius:0;
    border:0;
    border-left:1px solid var(--border);
    animation:drawer-in .2s ease-out}
.dialog-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    padding:25px 27px 22px;
    border-bottom:1px solid var(--surface-soft);
    gap:15px;
    flex-shrink:0}
.dialog-head .eyebrow{
    font-size:var(--text-xs);
    margin-bottom:7px}
.dialog-head h2{
    font-size:var(--text-xl);
    letter-spacing:-.6px;
    color:var(--muted-text)}
.dialog-content{
    padding:25px 27px;
    overflow-y:auto;
    overscroll-behavior:contain}
.dialog-footer{
    padding:20px 27px;
    border-top:1px solid var(--surface-soft);
    flex-shrink:0}
.field{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:18px;
    min-width:0;
    font-size:var(--text-xs);
    color:var(--muted-text)}
.field>span{
    font-weight:550}
.field input:not([type=checkbox]),.field select,.field textarea{
    width:100%;
    min-height:40px;
    border:1px solid var(--border);
    background:var(--surface);
    border-radius:var(--radius-small);
    padding:10px 11px;
    color:var(--muted-text);
    font-size:var(--text-xs);
    line-height:1.5}
.field input::placeholder,.field textarea::placeholder{
    color:var(--muted-text);
    font-size:var(--text-xs)}
.field textarea{
    resize:vertical;
    min-height:80px}
.field small{
    font-size:var(--text-xs);
    color:var(--muted-text);
    line-height:1.5}
.field input[type=file]{
    font-size:var(--text-xs)}
.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px}
.form-actions{
    border-top:1px solid var(--surface-soft);
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:24px;
    padding-top:20px}
.form-actions.wrap{
    flex-wrap:wrap}
.form-error:not(:empty){
    color:var(--red);
    background:var(--red-soft);
    border:1px solid var(--border);
    padding:12px 15px;
    border-radius:var(--radius-small);
    line-height:1.7;
    font-size:var(--text-xs);
    margin-top:15px}
.order-line{
    padding:17px;
    background:var(--canvas);
    border:1px solid var(--surface-soft);
    border-radius:var(--radius-small);
    margin-bottom:15px}
.line-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:var(--text-xs);
    color:var(--muted-text);
    font-weight:600;
    letter-spacing:.8px;
    margin-bottom:8px}
.line-heading .icon-btn{
    height:25px;
    min-width:25px;
    padding:4px}
.order-line .field{
    margin-bottom:13px}
.order-line .form-row .field{
    margin-bottom:0}
.line-hint{
    font-size:var(--text-xs);
    color:var(--ink);
    margin-top:13px}
.serial-field:not(:empty){
    margin-top:14px}
.inline-actions{
    display:flex;
    align-items:center;
    gap:10px;
    margin:17px 0}
.order-total{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:var(--text-xs);
    border-top:1px solid var(--surface-soft);
    margin:17px 0 15px;
    padding-top:17px;
    color:var(--muted-text)}
.order-total strong{
    font-size:var(--text-xl);
    color:var(--ink);
    font-weight:600;
    letter-spacing:-.4px}
.muted.compact{
    font-size:var(--text-xs);
    line-height:1.7;
    margin-bottom:23px}
.detail-status{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:22px}
.detail-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px 20px;
    margin:20px 0}
.detail-grid>div{
    min-width:0}
.detail-grid small{
    display:block;
    font-size:var(--text-xs);
    color:var(--muted-text);
    margin-bottom:7px}
.detail-grid strong{
    display:block;
    font-size:var(--text-xs);
    line-height:1.6;
    font-weight:550;
    color:var(--muted-text);
    overflow-wrap:anywhere}
.detail-grid span:not(.amount){
    display:block;
    font-size:var(--text-xs);
    color:var(--muted-text);
    margin-top:5px;
    line-height:1.6}
.detail-grid.compact-grid{
    background:var(--canvas);
    padding:15px;
    border-radius:var(--radius-small);
    gap:20px}
.section-title{
    padding-top:22px;
    margin:20px 0 15px;
    border-top:1px solid var(--surface-soft);
    color:var(--muted-text);
    font-size:var(--text-xs)}
.lifecycle{
    display:flex;
    margin:8px 0 28px;
    gap:0;
    position:relative;
    overflow-x:auto;
    padding-bottom:5px}
.lifecycle>div{
    position:relative;
    flex:1;
    min-width:55px;
    text-align:center;
    color:var(--muted-text)}
.lifecycle>div:after{
    content:'';
    height:1px;
    position:absolute;
    top:10px;
    left:65%;
    right:-35%;
    background:var(--border)}
.lifecycle>div:last-child:after{
    display:none}
.lifecycle>div>span{
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    background:var(--surface);
    width:21px;
    height:21px;
    border-radius:50%;
    font-size:var(--text-xs);
    margin:0 auto 7px;
    position:relative;
    z-index:1}
.lifecycle>div>small{
    font-size:var(--text-xs);
    white-space:nowrap}
.lifecycle .done{
    color:var(--accent)}
.lifecycle .done>span{
    color:var(--surface);
    background:var(--accent);
    border-color:var(--accent)}
.lifecycle .done:after{
    background:var(--accent)}
.order-product{
    display:flex;
    align-items:center;
    gap:13px;
    padding:15px 0;
    border-bottom:1px solid var(--surface-soft)}
.order-product:last-child{
    border-bottom:0}
.order-product>div{
    flex:1;
    min-width:0}
.order-product strong{
    display:block;
    font-size:var(--text-xs);
    color:var(--muted-text)}
.order-product small{
    display:block;
    font-size:var(--text-xs);
    color:var(--muted-text);
    margin-top:5px;
    line-height:1.6;
    overflow-wrap:anywhere}
.detail-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:25px 0}
.reservation-note{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    font-size:var(--text-xs);
    color:var(--amber);
    background:var(--accent-soft);
    border:1px solid var(--border);
    padding:11px;
    border-radius:var(--radius-small)}
.reservation-note .text-btn{
    font-size:var(--text-xs);
    margin-left:auto}
.invoice-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:var(--canvas);
    padding:15px;
    border-radius:var(--radius-small);
    border:1px solid var(--surface-soft);
    font-size:var(--text-xs);
    color:var(--muted-text)}
.invoice-link>span{
    display:flex;
    align-items:center;
    gap:9px}
.timeline{
    padding:5px 0}
.timeline>div{
    position:relative;
    border-left:1px solid var(--border);
    padding:0 0 23px 20px;
    margin-left:5px}
.timeline>div:last-child{
    border:0;
    padding-bottom:5px}
.timeline i{
    position:absolute;
    background:var(--sidebar-muted);
    border:3px solid var(--surface);
    width:10px;
    height:10px;
    left:-5px;
    top:0;
    border-radius:50%}
.timeline strong{
    font-size:var(--text-xs);
    color:var(--muted-text);
    display:block;
    font-weight:550}
.timeline small{
    font-size:var(--text-xs);
    color:var(--muted-text);
    display:block;
    margin-top:7px}
.product-detail-hero{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:25px}
.product-detail-hero .product-avatar{
    width:65px;
    height:68px}
.product-detail-hero p{
    font-size:var(--text-xs);
    line-height:1.8;
    color:var(--muted-text);
    margin-top:7px}
.unit-list>div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:12px 0;
    border-bottom:1px solid var(--surface-soft)}
.choose-list>button{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    padding:15px 0;
    border-bottom:1px solid var(--surface-soft);
    text-align:left}
.choose-list>button>span:not(.amount){
    flex:1}
.choose-list strong{
    display:block;
    font-size:var(--text-xs);
    color:var(--muted-text)}
.choose-list small{
    display:block;
    font-size:var(--text-xs);
    color:var(--ink);
    margin-top:6px}
.calculation{
    padding:15px;
    background:var(--canvas);
    border-radius:var(--radius-small);
    margin:20px 0}
.calculation>div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 3px;
    font-size:var(--text-xs);
    color:var(--ink)}
.calculation .total{
    border-top:1px solid var(--border);
    margin-top:10px;
    padding-top:15px}
.calculation .total strong{
    font-weight:600;
    color:var(--ink)}
.scenario-list{
    margin-top:20px}
.scenario{
    display:flex;
    align-items:center;
    gap:15px;
    padding:20px 0;
    border-bottom:1px solid var(--surface-soft);
    text-align:left;
    width:100%}
.scenario>span{
    font-size:var(--text-xs);
    color:var(--muted-text);
    align-self:flex-start;
    line-height:1.6}
.scenario>div{
    flex:1;
    min-width:0}
.scenario strong{
    font-size:var(--text-xs);
    font-weight:600;
    color:var(--ink)}
.scenario p{
    font-size:var(--text-xs);
    color:var(--muted-text);
    line-height:1.8;
    margin-top:7px}
.scenario>svg{
    color:var(--ink)}
.pricing-example{
    border:1px solid var(--border);
    border-radius:var(--radius-small);
    font-size:var(--text-xs);
    padding:12px;
    line-height:1.8;
    color:var(--ink);
    margin-top:20px}
.pricing-example summary{
    cursor:pointer}
.pricing-example p{
    margin:8px 0}
.pricing-example strong{
    font-size:var(--text-xs);
    color:var(--ink)}
.warning-banner{
    font-size:var(--text-xs);
    padding:14px;
    border:1px solid var(--border);
    color:var(--amber);
    background:var(--accent-soft);
    line-height:1.7;
    border-radius:var(--radius-small);
    margin-bottom:18px}
.search-results{
    position:absolute;
    top:calc(100% + 17px);
    left:-40px;
    width:370px;
    max-width:90vw;
    background:var(--surface);
    box-shadow:0 15px 50px var(--shadow-color);
    border:1px solid var(--border);
    border-radius:var(--radius);
    z-index:40;
    padding:7px}
.search-results[hidden]{
    display:none}
.search-results>button{
    display:flex;
    align-items:center;
    gap:12px;
    text-align:left;
    width:100%;
    padding:12px;
    border-radius:var(--radius-small);
    color:var(--ink)}
.search-results>button:hover{
    background:var(--accent-soft)}
.search-results>button>span{
    flex:1;
    min-width:0}
.search-results strong{
    display:block;
    font-size:var(--text-xs);
    font-weight:550;
    color:var(--ink)}
.search-results small{
    display:block;
    font-size:var(--text-xs);
    margin-top:5px}
.search-results p{
    padding:15px;
    font-size:var(--text-xs);
    color:var(--ink)}
#toasts{
    position:fixed;
    bottom:24px;
    right:24px;
    z-index:100;
    display:flex;
    flex-direction:column;
    gap:10px;
    pointer-events:none}
.toast{
    background:var(--ink);
    color:var(--surface);
    border:1px solid var(--muted-text);
    border-radius:var(--radius-small);
    box-shadow:0 8px 30px var(--shadow-color);
    padding:14px 17px;
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:var(--text-xs);
    line-height:1.7;
    max-width:420px;
    animation:toast-in .2s ease-out;
    border-color:var(--sidebar-border);
}
.toast.error{
    background:var(--red);
    border-color:var(--red)}
.toast svg{
    margin-top:1px}
.invoice-brand{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 0 20px;
    border-bottom:2px solid var(--ink);
    color:var(--ink)}
.invoice-brand>strong{
    font-size:var(--text-xl);
    letter-spacing:1px}
.invoice-brand>strong span{
    color:var(--accent)}
.invoice-brand>div{
    font-size:var(--text-xs);
    letter-spacing:1px;
    text-align:right}
.invoice-brand b{
    display:block;
    font-size:var(--text-base);
    letter-spacing:0;
    margin-top:5px}
.invoice-demo{
    font-size:var(--text-xs);
    color:var(--muted-text);
    padding:13px 0}
.invoice-info{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin:15px 0 25px}
.invoice-info small,.invoice-info span,.invoice-info strong{
    display:block;
    font-size:var(--text-xs);
    margin-bottom:7px}
.invoice-info small{
    font-size:var(--text-xs);
    color:var(--muted-text)}
.invoice-info span{
    font-size:var(--text-xs);
    color:var(--muted-text)}
.invoice-table td,.invoice-table th{
    padding:12px 8px;
    font-size:var(--text-xs);
    white-space:normal}
.invoice-table td:first-child{
    width:45%}
.invoice-total{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:20px;
    margin:25px 0;
    font-size:var(--text-xs);
    color:var(--muted-text)}
.invoice-total strong{
    font-size:var(--text-xl);
    color:var(--ink)}
.invoice-terms{
    font-size:var(--text-xs);
    color:var(--muted-text);
    line-height:1.8;
    border-top:1px solid var(--border);
    padding-top:15px}
.invoice-terms p{
    margin-bottom:7px}
@keyframes modal-in{
    from{
    opacity:0;
    transform:translateY(12px)}
to{
    opacity:1;
    transform:translateY(0)}
}
@keyframes drawer-in{
    from{
    opacity:.7;
    transform:translateX(25px)}
to{
    opacity:1;
    transform:translateX(0)}
}
@keyframes toast-in{
    from{
    opacity:0;
    transform:translateY(10px)}
to{
    opacity:1;
    transform:translateY(0)}
}

@media(min-width:1600px){
    :root{
    --sidebar:280px}
.sidebar{
    padding-left:21px;
    padding-right:21px}
.topbar{
    padding:0 45px}
main{
    padding-left:45px;
    padding-right:45px}
.nav-item{
    font-size:var(--text-xs);
    padding-top:12px;
    padding-bottom:12px}
.dashboard-main,.dashboard-bottom{
    grid-template-columns:minmax(0,2fr) minmax(300px,1fr)}
}

@media(max-width:1240px){
    :root{
    --sidebar:260px}
main{
    padding:28px 22px 20px}
.topbar{
    padding:0 22px;
    gap:14px}
.breadcrumb{
    gap:7px;
    font-size:var(--text-xs)}
.global-search{
    max-width:210px}
.topbar-right{
    gap:12px}
.user-switch{
    padding-left:12px}
.user-switch select{
    width:150px}
.dashboard-main,.dashboard-bottom{
    grid-template-columns:minmax(0,1.65fr) minmax(245px,1fr);
    gap:16px}
.panel-head{
    padding-left:18px;
    padding-right:18px}
.metric{
    padding:17px 15px}
.metric>strong{
    font-size:var(--text-xl)}
.metric-top{
    font-size:var(--text-xs)}
.metric-footer{
    font-size:var(--text-xs)}
.market-grid{
    gap:10px}
.market-card{
    padding:18px 12px}
.market-card h3{
    font-size:var(--text-xs)}
td,th{
    padding-left:14px;
    padding-right:14px}
.summary-strip{
    gap:15px;
    font-size:var(--text-xs)}
.approval-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))}
.chart-note{
    font-size:var(--text-xs)}
}

@media(max-width:1080px){
    .global-search{
    min-width:140px;
    max-width:190px}
.global-search kbd{
    display:none}
.breadcrumb>strong{
    display:none}
.breadcrumb{
    gap:8px}
.dashboard-main,.dashboard-bottom{
    grid-template-columns:minmax(0,1fr)}
.attention-list{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:15px}
.attention-row{
    border-bottom:0;
    align-items:flex-start;
    padding:15px 0 20px}
.attention-row>svg{
    display:none}
.attention-row strong{
    font-size:var(--text-xs)}
.attention-row small{
    font-size:var(--text-xs)}
.channel-panel{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    padding-bottom:3px}
.channel-panel .panel-head,.channel-panel .panel-subtitle,.channel-panel .soft-note{
    grid-column:1/-1}
.channel-panel .soft-note{
    margin-top:5px}
.metric-grid{
    gap:12px}
.metric>strong{
    font-size:var(--text-xl)}
.market-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))}
.market-card h3{
    font-size:var(--text-xs)}
.settings-grid{
    grid-template-columns:1fr}
.report-grid{
    gap:12px}
.report-card{
    padding:18px}
.report-card h3{
    font-size:var(--text-xs)}
.summary-strip{
    flex-wrap:wrap;
    gap:12px 20px}
.summary-strip>.text-btn{
    margin-left:0}
.metric-grid.three .metric>strong{
    font-size:var(--text-lg)}
.page-head h1{
    font-size:var(--text-xl)}
}

@media(max-width:800px){
    :root{
    --sidebar:280px}
.sidebar{
    transform:translateX(-100%);
    transition:transform .2s}
.nav-open .sidebar{
    transform:translateX(0)}
.nav-open .sidebar-scrim{
    display:block;
    position:fixed;
    inset:0;
    background:var(--scrim);
    z-index:24;
    backdrop-filter:blur(2px)}
.workspace{
    margin-left:0}
.topbar{
    height:67px;
    padding:0 22px;
    gap:15px}
.mobile-menu{
    display:inline-flex}
.topbar-left{
    display:flex;
    gap:8px;
    align-items:center}
.breadcrumb{
    display:none}
.global-search{
    max-width:none;
    margin-left:0;
    min-width:90px;
    flex:1;
    width:auto}
.global-search input{
    font-size:var(--text-xs)}
.demo-badge{
    display:none}
.topbar-right{
    gap:8px}
.user-switch{
    padding-left:10px;
    gap:8px}
.user-switch select{
    width:140px;
    font-size:var(--text-xs)}
.user-switch small{
    font-size:var(--text-xs)}
.user-switch .avatar{
    width:29px;
    height:29px;
    font-size:var(--text-xs)}
.topbar .icon-btn{
    min-width:29px;
    width:29px}
.page-head{
    margin-bottom:21px}
.metric-grid{
    gap:12px}
.metric-footer{
    font-size:var(--text-xs)}
.demo-strip{
    flex-wrap:wrap}
.demo-strip>span:nth-of-type(2){
    flex:1;
    min-width:200px}
.demo-strip button{
    font-size:var(--text-xs)}
.attention-list{
    grid-template-columns:repeat(3,minmax(0,1fr))}
.page-head p{
    font-size:var(--text-xs)}
.summary-strip{
    font-size:var(--text-xs)}
.task-row{
    flex-wrap:wrap}
.task-row>.text-btn{
    margin-left:35px}
.search-results{
    left:-35px;
    top:calc(100% + 15px);
    width:330px}
}

@media(max-width:580px){
    main{
    padding:24px 16px 18px}
.topbar{
    padding:0 12px;
    gap:9px}
.topbar-right{
    gap:6px}
.user-switch{
    padding-left:8px;
    gap:6px}
.user-switch select{
    width:123px;
    font-size:var(--text-xs)}
.user-switch small{
    font-size:var(--text-xs)}
.user-switch .avatar{
    width:27px;
    height:27px}
.global-search>svg{
    width:15px}
.global-search{
    gap:3px;
    min-width:55px}
.global-search input{
    font-size:var(--text-xs)}
.notification-btn{
    display:none}
.page-head{
    align-items:flex-start;
    gap:13px}
.page-head h1{
    font-size:var(--text-xl);
    letter-spacing:-.8px}
.eyebrow{
    font-size:var(--text-xs);
    letter-spacing:.9px}
.page-head p{
    font-size:var(--text-xs);
    line-height:1.6;
    max-width:250px}
.head-actions .btn{
    font-size:var(--text-xs);
    width:37px;
    height:37px;
    padding:9px}
.head-actions .btn svg{
    width:18px;
    height:18px}
.head-actions .btn span{
    font-size:var(--text-xs)}
.demo-strip{
    padding:10px 12px;
    gap:7px;
    font-size:var(--text-xs);
    margin-bottom:17px}
.demo-strip strong{
    font-size:var(--text-xs)}
.demo-strip>span:nth-of-type(2){
    flex-basis:100%;
    padding-left:12px;
    min-width:0;
    font-size:var(--text-xs)}
.demo-strip button{
    margin-left:12px;
    font-size:var(--text-xs)}
.metric-grid,.metric-grid.three{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:17px}
.metric{
    padding:15px 13px;
    border-radius:var(--radius-small)}
.metric-top{
    font-size:var(--text-xs);
    margin-bottom:13px;
    gap:5px}
.metric-top svg{
    width:15px;
    height:15px}
.metric>strong{
    font-size:var(--text-xl);
    margin-bottom:10px}
.metric-footer{
    font-size:var(--text-xs);
    line-height:1.6}
.metric-grid.three .metric:last-child{
    grid-column:1/-1}
.dashboard-main{
    gap:16px;
    margin-bottom:16px}
.dashboard-bottom{
    gap:16px}
.panel{
    border-radius:var(--radius)}
.panel-head{
    padding:17px 16px 13px}
.panel-head h2{
    font-size:var(--text-xs)}
.panel-head p{
    font-size:var(--text-xs)}
.panel-head select{
    font-size:var(--text-xs);
    padding:7px}
.panel-subtitle{
    padding-left:16px;
    padding-right:16px;
    font-size:var(--text-xs)}
.chart-summary{
    padding:0 16px 10px;
    gap:8px}
.chart-summary strong{
    font-size:var(--text-xl)}
.chart-summary>span{
    font-size:var(--text-xs)}
.chart-summary .chart-legend{
    font-size:var(--text-xs);
    gap:4px}
.revenue-chart{
    width:calc(100% - 32px);
    margin-left:16px;
    margin-right:16px;
    min-height:140px}
.chart-note{
    padding:11px 16px;
    line-height:1.7;
    font-size:var(--text-xs)}
.attention-list{
    display:block;
    padding:0 16px}
.attention-row{
    border-bottom:1px solid var(--surface-soft);
    padding:13px 0;
    gap:11px;
    align-items:center}
.attention-row strong{
    font-size:var(--text-xs)}
.attention-row small{
    font-size:var(--text-xs)}
.attention-row>svg{
    display:block}
.attention-icon{
    width:32px;
    height:34px}
.panel-bottom{
    font-size:var(--text-xs);
    padding:13px}
table{
    font-size:var(--text-xs)}
.orders-table{
    min-width:540px}
.orders-table td:first-child{
    min-width:145px}
.table-foot{
    font-size:var(--text-xs);
    flex-wrap:wrap;
    gap:8px;
    padding:12px 16px}
.toolbar{
    padding:12px 16px;
    flex-wrap:wrap;
    gap:7px}
.search-input{
    min-width:210px;
    flex-basis:100%;
    max-width:none}
.search-input input{
    font-size:var(--text-xs)}
.tabs{
    padding:0 16px;
    gap:20px}
.tab{
    font-size:var(--text-xs);
    padding:16px 0 13px}
.table-total{
    font-size:var(--text-xs)}
.toolbar select{
    font-size:var(--text-xs)}
.summary-strip{
    font-size:var(--text-xs);
    gap:12px;
    align-items:flex-start}
.summary-strip>div{
    gap:5px}
.summary-strip svg{
    width:15px;
    height:15px}
.summary-strip>.text-btn{
    width:100%;
    font-size:var(--text-xs)}
.market-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:17px}
.market-card{
    padding:16px 13px;
    border-radius:var(--radius)}
.market-card h3{
    font-size:var(--text-xs)}
.market-card .badge{
    font-size:var(--text-xs)}
.market-bottom{
    font-size:var(--text-xs)}
.approval-grid{
    grid-template-columns:1fr;
    padding:16px;
    gap:12px}
.approval-card{
    padding:16px;
    min-height:190px}
.task-row{
    padding:16px;
    gap:12px}
.task-row>div{
    min-width:190px}
.task-row strong{
    font-size:var(--text-xs)}
.task-row>span:not(.badge){
    font-size:var(--text-xs);
    margin-left:31px}
.task-row>.text-btn{
    margin-left:auto}
.report-grid{
    grid-template-columns:1fr;
    gap:12px}
.report-card{
    padding:20px;
    position:relative}
.report-card>svg{
    margin-bottom:14px}
.report-card h3{
    font-size:var(--text-sm)}
.report-card p{
    font-size:var(--text-xs);
    max-width:85%}
.report-card>span{
    font-size:var(--text-xs);
    margin-top:16px}
.settings-grid{
    gap:17px}
.padded{
    padding:19px}
.page-footer{
    font-size:var(--text-xs);
    gap:12px}
.dialog,.dialog.wide{
    max-width:calc(100vw - 20px);
    max-height:calc(100dvh - 24px);
    border-radius:var(--radius)}
.dialog.drawer{
    max-width:100vw;
    border:0}
.dialog-head{
    padding:21px 19px 18px}
.dialog-head h2{
    font-size:var(--text-lg)}
.dialog-head .eyebrow{
    font-size:var(--text-xs)}
.dialog-content{
    padding:21px 19px}
.form-row{
    gap:12px}
.field{
    font-size:var(--text-xs);
    gap:7px;
    margin-bottom:15px}
.field input:not([type=checkbox]),.field select,.field textarea{
    font-size:var(--text-xs)}
.field select{
    padding:10px 8px}
.order-line{
    padding:13px}
.order-line .form-row{
    gap:10px}
.btn{
    font-size:var(--text-xs);
    padding:10px 12px;
    min-height:38px}
.detail-grid{
    gap:20px 15px}
.detail-grid small{
    font-size:var(--text-xs)}
.detail-grid strong{
    font-size:var(--text-xs)}
.detail-grid span:not(.amount){
    font-size:var(--text-xs)}
.detail-actions{
    gap:8px}
.detail-actions .btn{
    font-size:var(--text-xs)}
.lifecycle>div{
    min-width:48px}
.lifecycle>div>small{
    font-size:var(--text-xs)}
.order-product{
    gap:10px}
.order-product .product-avatar{
    width:35px;
    height:39px}
.order-product strong{
    font-size:var(--text-xs)}
.order-product small{
    font-size:var(--text-xs)}
.order-product .amount{
    font-size:var(--text-xs)}
.reservation-note{
    font-size:var(--text-xs)}
.invoice-link{
    font-size:var(--text-xs);
    padding:13px;
    gap:5px}
.invoice-link .text-btn{
    font-size:var(--text-xs)}
.invoice-brand{
    padding-top:5px}
.invoice-brand>strong{
    font-size:var(--text-xl)}
.invoice-demo{
    font-size:var(--text-xs)}
.invoice-terms{
    font-size:var(--text-xs)}
.scenario strong{
    font-size:var(--text-xs)}
.scenario p{
    font-size:var(--text-xs)}
.scenario{
    gap:12px}
.search-results{
    left:-30px;
    width:min(340px,calc(100vw - 30px))}
#toasts{
    right:12px;
    left:12px;
    bottom:12px}
.toast{
    font-size:var(--text-xs);
    max-width:none;
    padding:12px 14px}
.unit-list .mono{
    font-size:var(--text-xs)}
.unit-list .badge{
    font-size:var(--text-xs)}
.unit-list>div{
    gap:7px}
.report-grid+.panel .detail-grid{
    grid-template-columns:1fr}
.invoice-table{
    min-width:0}
.invoice-table td,.invoice-table th{
    font-size:var(--text-xs);
    padding:11px 5px}
.invoice-total strong{
    font-size:var(--text-lg)}
}

@media(max-width:360px){
    .user-switch .avatar{
    display:none}
.user-switch select{
    width:120px}
.metric>strong{
    font-size:var(--text-xl)}
.metric-top{
    font-size:var(--text-xs)}
.metric-footer{
    font-size:var(--text-xs)}
.metric{
    padding:14px 11px}
.page-head h1{
    font-size:var(--text-xl)}
.metric-grid{
    gap:8px}
.form-row{
    grid-template-columns:1fr}
.dialog .form-row{
    gap:0}
.chart-summary .chart-legend{
    display:none}
.page-head p{
    font-size:var(--text-xs)}
.market-card h3{
    font-size:var(--text-xs)}
}

@media(prefers-reduced-motion:reduce){
    *,*:before,*:after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important}
}

@media print{
    body{
    background:white!important}
#app,#toasts,.dialog-head,.no-print{
    display:none!important}
#overlay{
    display:block!important;
    position:static!important}
.dialog[open]{
    display:block!important;
    position:static!important;
    border:0!important;
    box-shadow:none!important;
    max-width:100%!important;
    max-height:none!important;
    width:100%!important;
    margin:0!important;
    overflow:visible!important}
.dialog-content{
    overflow:visible!important;
    padding:0!important}
.dialog::backdrop{
    background:transparent!important}
.invoice{
    color:var(--muted-text)!important}
.invoice *{
    color:var(--muted-text)!important}
.invoice-table{
    width:100%!important;
    white-space:normal!important}
.invoice-table td,.invoice-table th{
    font-size:11pt!important;
    padding:12pt 5pt!important}
.invoice-brand>strong{
    font-size:22pt!important}
.invoice-demo{
    color:var(--muted-text);
    font-size:10pt!important}
.invoice-info small,.invoice-info span,.invoice-info strong,.invoice-terms{
    font-size:10pt!important}
.invoice-total strong{
    font-size:20pt!important}
@page{
    size:A4;
    margin:18mm}
}


/* Readable secondary text on light surfaces. */
.field>label{
    font-weight:550;
    line-height:1.5;
    color:var(--muted-text)}
.panel td small,.panel-head p,.panel-subtitle,.metric-footer,.channel-stat strong,.table-total,.table-foot,.page-head p,.soft-note,.info-line,.chart-note,.detail-grid small,.detail-grid span:not(.amount),.timeline small,.scenario p,.choose-list small,.line-hint{
    color:var(--muted-text)}
.page-head .eyebrow{
    color:var(--muted-text)}
.badge.green{
    color:var(--green)}
.badge.amber{
    color:var(--amber)}
.badge.blue{
    color:var(--blue)}
.badge.purple{
    color:var(--purple)}
.badge.red{
    color:var(--red)}
.badge.neutral{
    color:var(--muted-text)}
.channel{
    color:var(--muted-text)}

/* Keep accessible labels inside their clipping context on narrow tables. */
.sr-only{
    left:0;
    top:0}
.table-wrap{
    position:relative}

@media(max-width:580px){
    .field input:not([type=checkbox]),.field select,.field textarea{
    font-size:var(--text-base);
    min-height:44px}
.field input[type=file]{
    font-size:var(--text-xs)}
.field select{
    font-size:var(--text-xs)}
}

@media(max-width:580px){
    .field select{
    font-size:var(--text-base)}
.field>label{
    font-size:var(--text-xs)}
.btn{
    font-size:var(--text-xs)}
.page-head p{
    font-size:var(--text-xs)}
.demo-strip,.demo-strip strong,.demo-strip>span:nth-of-type(2){
    font-size:var(--text-xs)}
.metric-footer{
    font-size:var(--text-xs)}
.panel-head p,.panel-subtitle{
    font-size:var(--text-xs)}
.soft-note,.dialog .muted{
    font-size:var(--text-xs)}
.detail-grid strong{
    font-size:var(--text-xs)}
.detail-grid span:not(.amount),.detail-grid small{
    font-size:var(--text-xs)}
.scenario p{
    font-size:var(--text-xs)}
.scenario strong{
    font-size:var(--text-xs)}
.invoice-link .text-btn{
    font-size:var(--text-xs)}
}


/* Shared readable controls and working layouts for the two supported languages. */
body {
     line-height: 1.5;
     }

main {
     min-width: 0;
     }

h1 {
     overflow-wrap: anywhere;
     }

h2 {
     font-size: var(--text-lg);
     }

button, .btn, .icon-btn, .text-btn, .task-check {
     min-height: var(--control-height);
     }

.icon-btn, .task-check {
     min-width: var(--control-height);
     width: var(--control-height);
     height: var(--control-height);
     }

.btn, .tab {
     font-size: var(--text-sm);
     }

.btn span {
     white-space: normal;
     }

.field input:not([type=checkbox]), .field select, .field textarea {
     min-height: var(--control-height);
     font-size: var(--text-base);
     }

.field input[type=file] {
     max-width: 100%;
     font-size: var(--text-xs);
     }

.field label {
     color: var(--ink);
     }

.field small, .muted {
     color: var(--muted-text);
     line-height: 1.6;
     }

.nav-item {
     min-height: var(--control-height);
     }

.nav-group {
     letter-spacing: .3px;
     }

.topbar {
     min-height: 84px;
     height: auto;
     padding-top: 12px;
     padding-bottom: 12px;
     }

.topbar-right {
     gap: 12px;
     }

.user-switch select {
     width: 210px;
     font-size: var(--text-xs);
     min-height: 40px;
     }

.user-switch small {
     display: none;
     }

.language-switch select {
     min-height: var(--control-height);
     max-width: 130px;
     border: 1px solid var(--border);
     border-radius: var(--radius-small);
     background: var(--surface);
     padding: 0 8px;
     }

.global-search {
     min-width: 120px;
     }

.global-search input {
     min-height: var(--control-height);
     }

.quick-tools {
     margin-bottom: 28px;
     }

.quick-actions, .quick-filters {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     }

.quick-actions {
     margin-bottom: 12px;
     }

.quick-actions .btn {
     background: var(--surface);
     }

.filter-chip {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 8px 12px;
     border: 1px solid var(--border);
     background: var(--surface);
     border-radius: 24px;
     color: var(--ink);
     }

.filter-chip:hover {
     background:var(--accent-soft);;
    border-color:var(--accent);
}

.filter-chip span {
     font-weight: 650;
     color: var(--muted-text);
     }

.tabs {
     overflow-x: auto;
     align-items: stretch;
     }

.tab {
     flex-shrink: 0;
     }

.toolbar {
     flex-wrap: wrap;
     }

.metric {
     min-height: 162px;
     }

.metric-top {
     align-items: flex-start;
     line-height: 1.5;
     }

.metric-footer {
     line-height: 1.5;
     }

.chart-summary {
     flex-wrap: wrap;
     }

.panel-head {
     align-items: flex-start;
     gap: 12px;
     flex-wrap: wrap;
     }

.panel-head h2 {
     font-size: var(--text-lg);
     }

.panel-subtitle {
     line-height: 1.6;
     }

.channel-panel {
     display: block;
     }

td, th {
     line-height: 1.5;
     }

td small {
     line-height: 1.6;
     }

.orders-table {
     min-width: 680px;
     }

.detail-grid strong {
     font-size: var(--text-base);
     }

.lifecycle>div {
     min-width: 110px;
     }

.lifecycle>div>span {
     width: 28px;
     height: 28px;
     }

.lifecycle>div:after {
     top: 14px;
     }

.lifecycle>div>small {
     white-space: normal;
     }

.unit-list>div {
     flex-wrap: wrap;
     }

.invoice-table {
     min-width: 480px;
     }

.settings-grid h3 {
     margin: 24px 0 8px;
     }

.checkbox-row {
     min-height: var(--control-height);
     }

.checkbox-row input {
     width: 20px;
     height: 20px;
     }

.task-row>div {
     min-width: 0;
     overflow-wrap: anywhere;
     }

.page-footer {
     flex-wrap: wrap;
     }

@media (max-width: 1240px) {

    .breadcrumb {
     display: none;
     }

    .topbar {
     gap: 10px;
     padding-left: 20px;
     padding-right: 20px;
     }

    .user-switch select {
     width: 180px;
     }

    .metric-grid {
     grid-template-columns: repeat(2, minmax(0,1fr));
     }

    .attention-list {
     display: block;
     }

}

@media (max-width: 800px) {

    .topbar {
     display: grid;
     grid-template-columns: 44px minmax(0,1fr);
     gap: 8px;
     }

    .topbar-left {
     grid-column: 1;
     grid-row: 1;
     }

    .topbar-right {
     grid-column: 2;
     grid-row: 1;
     justify-content: flex-end;
     }

    .global-search {
     grid-column: 1 / -1;
     grid-row: 2;
     width: 100%;
     max-width: none;
     margin: 0;
     border-top: 1px solid var(--border);
     }

    .user-switch {
     padding-left: 0;
     border-left: 0;
     }

    .user-switch .avatar {
     display: none;
     }

    .user-switch select {
     width: 170px;
     }

    .notification-btn {
     display: none;
     }

    .search-results {
     left: 0;
     top: 100%;
     width: 100%;
     max-width: 100%;
     }

}

@media (max-width: 580px) {

    .topbar {
     padding: 10px 12px;
     }

    .topbar-right {
     gap: 8px;
     min-width: 0;
     }

    .language-switch select {
     max-width: 110px;
     font-size: var(--text-xs);
     }

    .user-switch {
     min-width: 0;
     }

    .user-switch select {
     width: 100%;
     max-width: 170px;
     min-width: 90px;
     }

    .page-head {
     flex-wrap: wrap;
     }

    .page-head p {
     max-width: none;
     }

    .head-actions {
     width: 100%;
     }

    .head-actions .btn {
     width: auto;
     height: auto;
     padding: 10px 14px;
     }

    .head-actions .btn span {
     font-size: var(--text-sm);
     }

    .metric-grid, .metric-grid.three {
     grid-template-columns: 1fr;
     }

    .metric-grid.three .metric:last-child {
     grid-column: auto;
     }

    .metric {
     min-height: 130px;
     }

    .metric>strong {
     margin: 4px 0 10px;
     }

    .quick-actions .btn {
     flex: 1 1 140px;
     }

    .form-row, .invoice-info {
     grid-template-columns: 1fr;
     }

    .form-actions {
     flex-wrap: wrap;
     }

    .market-grid {
     grid-template-columns: 1fr;
     }

    .dialog-head h2 {
     font-size: var(--text-xl);
     }

    .detail-grid {
     grid-template-columns: 1fr;
     }

    .task-row>div {
     min-width: 170px;
     }

    .unit-list .mono {
     overflow-wrap: anywhere;
     }

    .invoice-table {
     min-width: 480px;
     }

    .invoice .table-wrap {
     margin: 0;
     }

}

@media print {
     .invoice-table {
     min-width: 0;
     }
 }


.chart-label { fill: var(--muted-text); font-size: var(--text-xs); }

.metric.warm .metric-top>svg { color:var(--accent); }

h1,h2,h3 { color:var(--ink); }

/* Original PSOPTOM technical wordmark and matching compact PS sign. */
.brand-lockup {
    display:block;
    width:222px;
    max-width:100%;
    height:auto;
}
.workspace-avatar img { display:block; }
.invoice-brand { gap:12px; }
.invoice-logo {
    display:block;
    width:180px;
    max-width:52%;
    height:auto;
}
.invoice-brand>div { min-width:0; max-width:48%; letter-spacing:.3px; }