/* StoreWatch add-on to ../../mockups/mockup.css (tokens.css). No inline styles. */
.logo-fsc{display:block;height:40px;width:40px}
.hdr-brand .app-name{display:flex;flex-direction:column;line-height:1.15}
.hdr-brand .app-name small{font-size:var(--fs-12);color:var(--text-3);font-weight:var(--fw-regular)}
.policy-pill{font-size:var(--fs-12);font-weight:var(--fw-semibold);color:var(--gray-700);background:var(--gray-100);border:1px solid var(--border);border-radius:var(--r-pill);padding:2px 10px;white-space:nowrap}
.cam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-4)}
.cam{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2);box-shadow:var(--sh-1);overflow:hidden;display:flex;flex-direction:column}
.cam-view{position:relative;aspect-ratio:16/9;background:var(--gray-900);display:flex;align-items:center;justify-content:center;color:var(--gray-400);font-size:var(--fs-13)}
.cam-view.v1{background:linear-gradient(135deg,#2b333a,#3f4952)} .cam-view.v2{background:linear-gradient(160deg,#232a30,#56616b)} .cam-view.v3{background:linear-gradient(120deg,#1a1f24,#3f4952)}
.cam-view .live{position:absolute;top:8px;left:8px;background:rgba(17,21,24,.75);color:#fff;font-size:var(--fs-12);font-weight:var(--fw-semibold);padding:2px 8px;border-radius:var(--r-1);display:flex;align-items:center;gap:6px}
.cam-view .live::before{content:"";width:8px;height:8px;border-radius:50%;background:#3ccf6e}
.cam-view .ts{position:absolute;bottom:8px;right:8px;color:#fff;font-family:var(--font-mono);font-size:var(--fs-12);background:rgba(17,21,24,.6);padding:1px 6px;border-radius:var(--r-1)}
.cam-view svg.i{width:40px;height:40px;opacity:.5}
.cam-ft{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);min-height:60px}
.cam-ft .nm{flex:1;min-width:0}
.cam-ft b{display:block;font-size:var(--fs-14)} .cam-ft small{color:var(--text-3);font-size:var(--fs-12)}
.store-tabs{display:flex;flex-wrap:nowrap;gap:0;border-bottom:1px solid var(--border);margin-bottom:var(--sp-4);max-width:100%;min-width:0;overflow-x:auto}
.store-tabs a{flex:0 0 auto;min-height:var(--tap);display:flex;align-items:center;padding:0 var(--sp-4);color:var(--text-2);text-decoration:none;font-weight:var(--fw-semibold);border-bottom:3px solid transparent}
.store-tabs a.active{color:var(--accent);border-bottom-color:var(--accent)}
.store-tabs .count{margin-left:6px;font-size:var(--fs-12);color:var(--text-3)}
.alert-row{display:grid;grid-template-columns:12px 1fr auto;gap:var(--sp-3);align-items:center;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);min-height:56px}
button.alert-row{width:100%;text-align:left;font:inherit;color:inherit;background:transparent;border:0;cursor:pointer}
button.alert-row .grow,button.alert-row .lead-tag{display:block}
.alert-row:last-child{border-bottom:0}
.sev{width:10px;height:10px;border-radius:50%}
.sev.high{background:var(--danger)} .sev.med{background:var(--warning)} .sev.low{background:var(--gray-400)}
.alert-row b{display:block;font-size:var(--fs-14)} .alert-row small{color:var(--text-3);font-size:var(--fs-12)}
.lead-tag{color:var(--warning);font-weight:var(--fw-semibold);font-size:var(--fs-12)}
.layout-2{display:grid;grid-template-columns:1fr 360px;gap:var(--sp-4)}
.signon-brand .logo-fsc{width:96px;height:96px}
.signon-note{font-size:var(--fs-12);color:var(--text-2);background:var(--gray-100);border-radius:var(--r-2);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-4)}
.field label{display:block;font-size:var(--fs-13);font-weight:var(--fw-semibold);margin-bottom:4px}
.input{width:100%;min-height:var(--tap);border:1px solid var(--border-input);border-radius:var(--r-2);padding:0 var(--sp-3);font:inherit;background:#fff}
.fine{font-size:var(--fs-12);color:var(--text-3);text-align:center;margin:var(--sp-4) 0 0}
#signin{width:100%;display:flex;justify-content:center}
.grow{flex:1;min-width:0}
.col-task{min-width:120px}
.mb-4{margin-bottom:var(--sp-4)}
.mt-4{margin-top:var(--sp-4)}
.rail-foot{padding:var(--sp-3) var(--sp-2) var(--sp-4)}
.rail-foot .signout{color:var(--text-on-dark);border-color:var(--gray-600);font-size:var(--fs-12)}
.pw-field .input{padding-right:52px}
.cam-view{overflow:hidden}
.cam-view video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0b1220}
.w-0{width:0}.w-5{width:5%}.w-10{width:10%}.w-15{width:15%}.w-20{width:20%}.w-25{width:25%}.w-30{width:30%}.w-35{width:35%}.w-40{width:40%}.w-45{width:45%}.w-50{width:50%}.w-55{width:55%}.w-60{width:60%}.w-65{width:65%}.w-70{width:70%}.w-75{width:75%}.w-80{width:80%}.w-85{width:85%}.w-90{width:90%}.w-95{width:95%}.w-100{width:100%}
.pbar i{height:100%}
@media (max-width:900px){.layout-2{grid-template-columns:1fr}}
@media (max-width:860px){
  .hdr-menu{width:44px;min-width:44px;height:44px;min-height:44px;flex:0 0 44px}
  .policy-pill,.demo-pill{display:none}
  .hdr-store{min-width:44px;width:auto;max-width:none;flex:1 1 44px}
  .app-header,.hdr-brand{min-width:0}
  .logo-fsc{width:32px;height:32px;flex:0 0 32px}
  #app,.main,.content,#content,.page-head,.card,.cam-grid{min-width:0;max-width:100%}
  .cam-grid{grid-template-columns:1fr}
  .cam-ft{flex-wrap:wrap}
  table,.msg,.keyline{display:block;max-width:100%;overflow-x:auto}
  .col-task{min-width:0}
}
@media (min-width:1280px){
  .rail.open{width:var(--rail-w-open)}
  .rail.open ~ .main{margin-left:var(--rail-w-open)}
}