@charset "UTF-8";
.row-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.button.danger { background: #b84242; border-color: #b84242; color: #fff; }
.button.danger-outline { color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }
.button.danger-outline:hover { background: color-mix(in srgb, var(--red) 7%, var(--surface)); }

:root{color-scheme:light;
--bg:#f5f7f9;
--surface:#fff;
--surface2:#f8fafb;
--text:#1e303b;
--muted:#78848e;
--line:#e7ecef;
--brand:#117963;
--brand-soft:#e9f5f0;
--blue:#5379b8;
--amber:#b88222;
--red:#bc4f4f;
--shadow:0 12px 40px #1a34450d;
--side:#fff;
font-family:"Segoe UI","Microsoft JhengHei",sans-serif;
font-size:14px}

:root[data-theme=dark]{color-scheme:dark;
--bg:#121b22;
--surface:#1b2730;
--surface2:#202e38;
--text:#e0e9ef;
--muted:#9baab6;
--line:#30404b;
--brand:#6ed4b5;
--brand-soft:#243f38;
--blue:#9bbfff;
--amber:#e9bc71;
--red:#f39494;
--side:#18232b;
--shadow:none}

*{box-sizing:border-box}
body{margin:0;
background:var(--bg);
color:var(--text);
font-size:14px;
line-height:1.6}
button,input,select,textarea{font:inherit}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
button{cursor:pointer}
button:disabled{opacity:.45;
cursor:default}
a{color:inherit;
text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--brand);
outline-offset:3px}
svg{width:19px;
height:19px;
vertical-align:middle;
flex-shrink:0}
button{color:inherit}
h1,h2,h3,p{margin:0}
h1{font-size:28px;
letter-spacing:-.8px;
font-weight:650;
line-height:1.4}
h2{font-size:17px;
font-weight:650}
h3{font-size:15px;
font-weight:600}
small{font-size:12px}
input,select,textarea{background:var(--surface);
color:var(--text);
border:1px solid var(--line);
border-radius:7px;
padding:9px 11px;
min-height:39px;
min-width:0}
input::placeholder{color:var(--muted)}
input[type=search]{width:100%}
input[type=checkbox]{min-height:auto;
accent-color:var(--brand)}
label{display:flex;
flex-direction:column;
gap:7px}
pre{font:inherit;
white-space:pre-wrap;
overflow-wrap:anywhere}
code,.mono{font-family:Consolas,monospace;
font-size:12px;
overflow-wrap:anywhere}
[hidden]{display:none!important}
.muted{color:var(--muted)}
.error-text{color:var(--red)}
.sr-only{position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0,0,0,0)}

.sidebar{position:fixed;
inset:0 auto 0 0;
width:230px;
border-right:1px solid var(--line);
background:var(--side);
display:flex;
flex-direction:column;
z-index:20;
padding:27px 18px}
.brand{display:flex;
align-items:center;
gap:12px;
margin:0 9px 43px;
font-size:15px;
letter-spacing:1px;
font-weight:750}
.brand small{display:block;
color:var(--muted);
letter-spacing:.7px;
font-weight:400;
margin-top:2px}
.brand-mark{position:relative;
border-radius:11px;
width:39px;
height:39px;
display:grid;
place-items:center;
background:#116954;
color:white;
font-size:25px;
font-weight:750;
letter-spacing:-2px}
.brand-mark span{position:absolute;
width:7px;
height:7px;
border-radius:50%;
background:#a7dbc3;
right:5px;
top:5px;
border:2px solid #116954}
.nav-label{font-size:10px;
letter-spacing:1.5px;
color:var(--muted);
padding:0 17px;
margin-bottom:13px}
nav{display:grid;
gap:7px}
nav a{display:flex;
align-items:center;
gap:12px;
padding:12px 15px;
border-radius:8px;
color:var(--muted);
font-size:13px;
font-weight:500}
nav a:hover{background:var(--surface2);
color:var(--text)}
nav a.active{color:var(--brand);
background:var(--brand-soft);
font-weight:650}
nav a.active:before{content:"";
position:absolute;
left:0;
height:21px;
width:3px;
background:var(--brand);
border-radius:0 4px 4px 0}
.nav-tag{font-size:9px;
border:1px solid var(--line);
padding:1px 5px;
border-radius:4px;
margin-left:auto;
letter-spacing:1px}
.sidebar-bottom{margin-top:auto;
border-top:1px solid var(--line);
padding:21px 2px 0;
display:flex;
align-items:center;
gap:10px;
font-size:11px}
.sidebar-bottom small{display:block;
color:var(--muted);
font-size:10px;
margin-top:3px}
.workspace-icon{background:var(--surface2);
padding:7px;
border:1px solid var(--line);
border-radius:7px}
.dot{height:7px;
width:7px;
border-radius:50%;
background:#35ad85;
display:inline-block;
flex-shrink:0}
.sidebar-bottom .dot{margin-left:auto}
.shell{margin-left:230px;
min-height:100vh;
display:flex;
flex-direction:column}
.topbar{height:76px;
padding:0 36px;
border-bottom:1px solid var(--line);
display:flex;
align-items:center;
justify-content:space-between;
background:var(--surface)}
.breadcrumb{display:flex;
gap:14px;
align-items:center;
font-size:12px;
color:var(--muted)}
.breadcrumb strong{color:var(--text);
font-weight:500}
.topbar-right{display:flex;
align-items:center;
gap:18px}
.avatar{width:31px;
height:31px;
border:1px solid var(--line);
background:var(--surface2);
border-radius:50%;
font-size:10px;
display:grid;
place-items:center;
font-weight:650}
.icon-button{width:33px;
height:33px;
display:inline-grid;
place-items:center;
background:none;
border:1px solid transparent;
border-radius:7px;
font-size:22px}
.icon-button:hover{background:var(--surface2);
border-color:var(--line)}
main{padding:32px 36px;
max-width:1700px;
width:100%;
margin:auto;
flex:1}
main:focus{outline:none}
.page-heading{display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:27px}
.eyebrow{color:var(--brand);
font-size:10px;
font-weight:700;
letter-spacing:2px;
margin-bottom:8px}
.subtitle{font-size:12px;
color:var(--muted);
margin-top:7px}
.heading-actions{display:flex;
gap:9px;
align-items:center;
flex-wrap:wrap}
.button{display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:9px 14px;
border-radius:7px;
border:1px solid var(--line);
font-size:12px;
font-weight:500;
background:var(--surface);
white-space:nowrap;
min-height:37px}
.button:hover{filter:brightness(.97);
box-shadow:0 2px 5px #1a344509}
.button.primary{background:#14795f;
border-color:#14795f;
color:#fff}
.button.secondary{background:var(--surface)}
.text-link{color:var(--brand);
font-size:12px;
border:0;
background:none;
padding:0;
cursor:pointer}
.text-link:hover{text-decoration:underline}
.pill{border-radius:5px;
display:inline-flex;
gap:6px;
align-items:center;
padding:3px 8px;
font-size:10px;
font-weight:500;
white-space:nowrap}
.pill.good{color:var(--brand);
background:var(--brand-soft)}
.pill.neutral{color:var(--muted);
background:var(--surface2);
border:1px solid var(--line)}
.pill.warn{color:var(--amber);
background:color-mix(in srgb,var(--amber) 10%,var(--surface))}
.pill.bad{color:var(--red);
background:color-mix(in srgb,var(--red) 9%,var(--surface))}
.pill.blue{color:var(--blue);
background:color-mix(in srgb,var(--blue) 10%,var(--surface))}
.panel{background:var(--surface);
border:1px solid var(--line);
border-radius:11px;
box-shadow:0 2px 4px #102a3802;
overflow:hidden}
.panel-head{display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
padding:20px 22px;
border-bottom:1px solid var(--line)}
.panel-head p{font-size:11px;
color:var(--muted);
margin-top:3px}
.panel-body{padding:22px}
.kpis{display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:17px;
margin-bottom:22px}
.kpi{padding:21px 22px;
position:relative;
overflow:hidden}
.kpi-label{font-size:12px;
color:var(--muted);
display:flex;
align-items:center;
justify-content:space-between}
.kpi-icon{background:var(--surface2);
padding:6px;
border-radius:7px;
color:var(--brand);
display:grid;
place-items:center}
.kpi-number{font-size:34px;
line-height:1.3;
font-weight:650;
letter-spacing:-1px;
margin:10px 0 12px;
font-variant-numeric:tabular-nums}
.kpi-foot{font-size:10px;
color:var(--muted)}
.kpi-foot strong{color:var(--brand);
font-weight:550}
.dashboard-grid{display:grid;
grid-template-columns:minmax(0,1.65fr) minmax(275px,1fr);
gap:22px;
margin-bottom:22px}
.chart{height:158px;
display:flex;
gap:14px;
align-items:flex-end;
padding-top:15px;
position:relative;
border-bottom:1px solid var(--line);
background:repeating-linear-gradient(to top,transparent 0,transparent 38px,var(--line) 39px,transparent 40px)}
.chart-col{flex:1;
display:flex;
align-items:center;
flex-direction:column;
gap:4px;
position:relative;
max-width:75px;
margin:auto auto 0;
min-width:18px}
.chart-value{color:var(--muted);
font-size:10px}
.chart-bar{width:55%;
min-width:12px;
max-width:33px;
border-radius:5px 5px 0 0;
background:#b9dccc;
min-height:3px}
.chart-col:last-child .chart-bar{background:#238669}
.chart-labels{display:flex;
gap:14px;
text-align:center;
font-size:10px;
color:var(--muted);
padding-top:10px}
.chart-labels span{flex:1;
max-width:75px;
margin:auto}
.chart-summary{display:flex;
gap:22px;
font-size:10px;
color:var(--muted);
margin-bottom:2px}
.chart-summary strong{font-size:15px;
color:var(--text);
margin-right:5px}
.progress-row{margin-bottom:18px}
.progress-label{display:flex;
justify-content:space-between;
font-size:11px;
margin-bottom:8px}
.progress-label span{color:var(--muted)}
.progress{height:6px;
border-radius:4px;
background:var(--surface2);
overflow:hidden}
.progress>span{height:100%;
background:#38967c;
display:block;
border-radius:4px}
.service-row{display:flex;
align-items:center;
justify-content:space-between;
padding:11px 0;
border-bottom:1px solid var(--line);
font-size:12px}
.service-row:last-child{border:0}
.service-row>span{display:flex;
align-items:center;
gap:9px}
.service-row svg{color:var(--muted)}
.service-note{padding:11px 13px;
background:var(--surface2);
border-radius:6px;
color:var(--muted);
font-size:10px;
margin-top:12px}
.table-wrap{overflow:auto}
table{border-collapse:collapse;
width:100%;
font-size:12px;
text-align:left}
th{color:var(--muted);
font-weight:500;
background:var(--surface2);
font-size:10px;
letter-spacing:.3px;
padding:12px 18px;
white-space:nowrap;
border-bottom:1px solid var(--line)}
td{padding:15px 18px;
border-bottom:1px solid var(--line);
vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface2)}
td .sub{display:block;
font-size:10px;
color:var(--muted);
margin-top:4px}
.id-link{font-family:Consolas,monospace;
font-size:11px;
color:var(--muted);
display:block;
max-width:190px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
margin-top:5px}
.call-person{font-weight:550;
min-width:80px}
.cell-date{white-space:nowrap;
font-size:11px}
.issue-cell{max-width:300px;
min-width:130px}
.issue-text{display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
font-size:12px;
line-height:1.7}
.asset-cell{display:flex;
gap:8px;
align-items:center;
white-space:nowrap;
font-size:11px;
color:var(--muted)}
.asset-cell span{display:flex;
gap:4px;
align-items:center}
.asset-cell svg{width:14px;
height:14px}
.asset-cell .complete{color:var(--brand)}
.table-footer{display:flex;
justify-content:space-between;
align-items:center;
padding:13px 20px;
border-top:1px solid var(--line);
font-size:11px;
color:var(--muted);
gap:15px}
.pagination{display:flex;
align-items:center;
gap:10px}
.pagination select{min-height:29px;
padding:3px 7px;
font-size:10px}
.pagination button{width:28px;
height:28px;
font-size:17px;
background:var(--surface);
border:1px solid var(--line);
border-radius:5px}
.table-top{display:flex;
justify-content:space-between;
padding:16px 20px;
align-items:center;
gap:12px;
border-bottom:1px solid var(--line)}
.segmented{display:flex;
gap:4px;
padding:3px;
background:var(--surface2);
border-radius:7px;
border:1px solid var(--line)}
.segmented button{border:0;
background:none;
color:var(--muted);
padding:5px 11px;
font-size:11px;
border-radius:5px}
.segmented button.active{background:var(--surface);
color:var(--brand);
box-shadow:0 1px 4px #1e303b0c}
.search-toolbar{padding:18px 20px;
display:flex;
align-items:flex-end;
gap:10px;
flex-wrap:wrap;
border-bottom:1px solid var(--line)}
.search-toolbar label{font-size:10px;
color:var(--muted);
gap:5px}
.search-toolbar input,.search-toolbar select{font-size:11px;
padding:9px 10px}
.search-field{position:relative;
flex:1;
min-width:200px}
.search-field>span{position:absolute;
left:11px;
bottom:8px;
color:var(--muted)}
.search-field input{padding-left:35px}
.search-toolbar .button{min-height:39px}
.filter-note{font-size:11px;
color:var(--muted);
margin-bottom:12px}
.empty{padding:44px 20px;
text-align:center;
color:var(--muted)}
.empty svg{width:30px;
height:30px;
color:var(--muted);
opacity:.5;
margin-bottom:12px}
.empty strong{display:block;
color:var(--text);
font-size:14px;
margin-bottom:5px}
.empty p{font-size:12px}
.loading{padding:80px;
text-align:center;
color:var(--muted)}
.notice{border:1px solid color-mix(in srgb,var(--amber) 30%,var(--line));
background:color-mix(in srgb,var(--amber) 6%,var(--surface));
padding:12px 17px;
border-radius:8px;
color:var(--amber);
font-size:12px;
margin-bottom:20px}
.notice.error{border-color:color-mix(in srgb,var(--red) 30%,var(--line));
color:var(--red)}
.attention-item{padding:12px 0;
border-bottom:1px solid var(--line)}
.attention-item:last-child{border:0}
.attention-item a{display:block;
font-size:12px}
.attention-item p{font-size:10px;
color:var(--muted);
margin-top:5px}
.app-footer{padding:10px 36px 20px;
display:flex;
justify-content:space-between;
gap:15px;
color:var(--muted);
font-size:9px;
letter-spacing:.6px}

.back-link{display:inline-flex;
align-items:center;
gap:7px;
color:var(--muted);
font-size:12px;
margin-bottom:17px}
.detail-heading h1{font-size:24px}
.detail-id{font-family:Consolas,monospace;
color:var(--muted);
font-size:12px;
margin-top:7px}
.detail-meta{display:flex;
gap:25px;
flex-wrap:wrap;
margin-bottom:22px;
padding:18px 23px}
.detail-meta span{font-size:11px;
color:var(--muted)}
.detail-meta strong{display:block;
color:var(--text);
font-size:13px;
font-weight:500;
margin-top:3px}
.tabs{display:flex;
gap:25px;
border-bottom:1px solid var(--line);
margin-bottom:22px;
overflow:auto}
.tabs button{border:0;
border-bottom:2px solid transparent;
background:none;
padding:12px 2px;
color:var(--muted);
font-size:12px;
white-space:nowrap}
.tabs button.active{color:var(--brand);
border-bottom-color:var(--brand);
font-weight:600}
.detail-grid{display:grid;
grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr);
gap:22px}
.summary-issue{background:var(--brand-soft);
padding:22px;
border:1px solid color-mix(in srgb,var(--brand) 13%,var(--line));
border-radius:9px;
margin-bottom:19px}
.summary-issue .eyebrow{letter-spacing:1px}
.summary-issue p:last-child{font-size:16px;
line-height:1.8;
font-weight:500;
white-space:pre-line;
overflow-wrap:anywhere}
.summary-section{padding:20px 22px;
border-bottom:1px solid var(--line)}
.summary-section:last-child{border:0}
.summary-section h3{margin-bottom:12px;
font-size:13px}
.summary-section li{font-size:13px;
margin:9px 0;
line-height:1.85;
overflow-wrap:anywhere}
.summary-section ol,.summary-section ul{padding-left:21px;
margin:0}
.summary-section p{font-size:13px;
line-height:1.85;
white-space:pre-line}
.info-list{display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:12px 17px;
font-size:11px;
margin:0}
.info-list dt{color:var(--muted)}
.info-list dd{margin:0;
overflow-wrap:anywhere}
.stack{display:flex;
flex-direction:column;
gap:19px}
.segment-card{margin-bottom:18px}
.segment-head{display:flex;
align-items:center;
gap:11px;
padding:17px 21px;
border-bottom:1px solid var(--line)}
.segment-number{border:1px solid var(--line);
border-radius:7px;
width:30px;
height:30px;
display:grid;
place-items:center;
color:var(--muted);
font-size:11px}
.segment-head .pill{margin-left:auto}
.segment-head p{font-size:10px;
color:var(--muted)}
audio{width:100%;
height:40px;
margin:12px 0;
display:block}
.audio-meta{display:flex;
justify-content:space-between;
gap:12px;
align-items:center;
font-size:10px;
color:var(--muted)}
.transcript-tools{display:flex;
justify-content:space-between;
gap:10px;
margin-bottom:17px;
align-items:center}
.transcript-tools input{max-width:320px;
font-size:12px}
.cue{display:grid;
grid-template-columns:73px minmax(0,1fr);
padding:11px 4px;
border-bottom:1px solid var(--line);
gap:13px;
font-size:13px}
.cue:last-child{border:0}
.cue button{border:0;
background:none;
color:var(--brand);
font:11px Consolas,monospace;
align-self:start;
text-align:left;
padding:5px 0}
.cue .no-time{color:var(--muted)}
.cue-speaker{font-size:10px;
color:var(--muted);
margin-bottom:3px}
.cue p{line-height:1.85;
white-space:pre-line;
overflow-wrap:anywhere}
.cue.active{background:var(--brand-soft);
border-radius:5px}
.cue mark{background:#f3df9c;
color:#423515;
border-radius:2px}
.transcript-scroll{max-height:500px;
overflow-y:auto;
padding-right:10px}
.asset-status{padding:13px;
background:var(--surface2);
border-radius:6px;
margin-top:10px;
font-size:11px;
overflow-wrap:anywhere}
.asset-status p{color:var(--muted);
font-size:10px;
margin-top:5px}
.system-grid{display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px}
.system-grid .info-list{row-gap:18px}
.system-grid h3{font-size:12px}
.system-intro{font-size:12px;
line-height:1.9;
color:var(--muted)}
.settings-table td{padding:12px 18px;
font-size:11px}
.settings-table td:last-child{text-align:right;
font-family:Consolas,monospace}
.info-box{padding:13px 15px;
background:var(--surface2);
border-radius:7px;
color:var(--muted);
font-size:11px}
.customer-name{font-weight:550;
font-size:12px}
.form-grid{display:grid;
grid-template-columns:1fr 1fr;
gap:15px}
.checkbox{flex-direction:row;
align-items:center;
gap:9px;
font-size:11px}
dialog{background:var(--surface);
border:1px solid var(--line);
color:var(--text);
border-radius:13px;
box-shadow:var(--shadow);
max-width:520px;
width:calc(100% - 30px);
padding:27px}
dialog::backdrop{background:#10232c66;
backdrop-filter:blur(3px)}
dialog form{display:grid;
gap:18px}
.crm-fields{display:grid;gap:15px}
.crm-fields textarea{resize:vertical;min-height:78px}
.crm-picker{display:grid;gap:8px}
.crm-picker-results{display:grid;gap:4px;max-height:190px;overflow:auto}
.crm-picker-results button{text-align:left;justify-content:flex-start;white-space:normal}
.crm-description{white-space:pre-wrap;overflow-wrap:anywhere}
.crm-tabs{margin-top:8px}
.crm-contact{display:grid;gap:12px;border-bottom:1px solid var(--line);padding:14px 0}
.crm-contact:first-child{padding-top:0}
.crm-contact:last-child{border-bottom:0;padding-bottom:0}
.crm-contact-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crm-inline-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
dialog label{font-size:12px}
.dialog-head{display:flex;
align-items:center;
justify-content:space-between}
.dialog-head .eyebrow{font-size:9px}
.dialog-head h2{font-size:22px}
.dialog-actions{display:flex;
gap:10px;
justify-content:flex-end;
padding-top:10px;
border-top:1px solid var(--line)}
.toast{position:fixed;
bottom:25px;
left:50%;
transform:translateX(-50%);
z-index:100;
background:var(--text);
color:var(--surface);
padding:12px 22px;
border-radius:8px;
box-shadow:var(--shadow);
font-size:12px;
max-width:90vw}

@media(min-width:1500px){main{padding-top:38px}
.kpi{padding:25px}
.chart{height:190px}
.chart-bar{max-width:42px}
.dashboard-grid{grid-template-columns:minmax(0,1.8fr) minmax(300px,1fr)}
}

@media(max-width:1150px){.sidebar{width:198px;
padding-left:12px;
padding-right:12px}
.brand{font-size:13px;
gap:9px}
.brand-mark{width:33px;
height:33px}
.shell{margin-left:198px}
main{padding:26px 24px}
.topbar{padding:0 24px}
.kpis{gap:10px}
.kpi{padding:16px}
.kpi-number{font-size:29px}
.dashboard-grid{grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr)}
.detail-grid{grid-template-columns:minmax(0,1.7fr) minmax(210px,1fr)}
td,th{padding-left:13px;
padding-right:13px}
}

@media(max-width:900px){.dashboard-grid,.detail-grid{grid-template-columns:1fr}
.dashboard-grid .panel:last-child .panel-body{padding-top:10px}
.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.system-grid{grid-template-columns:1fr}
.page-heading{align-items:flex-start}
.heading-actions{justify-content:flex-end}
.detail-meta{gap:16px 25px}
.app-footer{padding-left:24px;
padding-right:24px}
.chart-col{max-width:none}
.chart-labels span{max-width:none}
}

@media(max-width:650px){.sidebar{position:sticky;
top:0;
width:100%;
padding:12px 14px 0;
border-right:0;
border-bottom:1px solid var(--line)}
.brand{margin:0 0 10px;
font-size:12px;
gap:8px}
.brand small{display:none}
.brand-mark{width:28px;
height:28px;
font-size:19px}
.brand-mark span{width:5px;
height:5px;
right:3px;
top:3px}
.nav-label,.sidebar-bottom,.nav-tag{display:none}
nav{display:flex;
gap:3px;
overflow-x:auto}
nav a{padding:9px 10px;
font-size:11px;
white-space:nowrap;
gap:6px;
border-radius:7px 7px 0 0}
nav a svg{width:15px;
height:15px}
nav a.active:before{display:none}
.shell{margin-left:0}
.topbar{height:51px;
padding:0 17px}
.topbar-right{gap:10px}
.breadcrumb{font-size:10px;
gap:9px}
.avatar{display:none}
main{padding:23px 17px}
.page-heading{margin-bottom:21px;
gap:12px}
h1{font-size:24px}
.eyebrow{font-size:9px}
.subtitle{font-size:11px}
.heading-actions .button{padding:8px 10px;
font-size:10px}
.heading-actions .button svg{width:15px;
height:15px}
.kpi{padding:15px}
.kpi-number{font-size:28px;
margin:6px 0 8px}
.kpi-label{font-size:11px}
.kpi-icon{padding:4px}
.kpi-icon svg{width:16px;
height:16px}
.kpi-foot{font-size:9px}
.dashboard-grid{gap:16px;
margin-bottom:16px}
.panel-head{padding:16px}
.panel-body{padding:17px}
.panel-head h2{font-size:15px}
.table-top{padding:12px 13px;
flex-wrap:wrap}
.search-toolbar{padding:14px;
gap:9px}
.search-field{flex-basis:100%}
.search-toolbar label:not(.search-field){flex:1;
min-width:100px}
.search-toolbar input,.search-toolbar select{width:100%}
.table-footer{padding:12px;
flex-wrap:wrap}
.pagination{gap:7px}
.app-footer{padding:10px 17px 15px;
font-size:8px;
letter-spacing:0}
.detail-heading h1{font-size:21px}
.detail-meta{padding:16px;
gap:14px 22px}
.tabs{gap:20px}
.summary-issue{padding:17px}
.summary-issue p:last-child{font-size:14px}
.summary-section{padding:17px}
.cue{grid-template-columns:60px minmax(0,1fr);
gap:8px;
font-size:12px}
.cue button{font-size:10px}
.segment-head{padding:14px}
.detail-id{font-size:10px}
.transcript-tools{flex-wrap:wrap}
.transcript-tools input{max-width:none}
.form-grid{grid-template-columns:1fr}
.detail-heading{flex-wrap:wrap}
}

@media(prefers-reduced-motion:no-preference){.panel,.button,nav a{transition:background .15s ease,box-shadow .15s ease}
.loading{animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}
}
}