/* ============ tokens ============ */
  :root{
    --bg:#f7f8fa; --card:#ffffff; --card2:#f2f4f7;
    --ink:#0f172a; --ink2:#3f4a5c; --muted:#667085; --faint:#98a2b3;
    --line:rgba(15,23,42,.08); --line2:rgba(15,23,42,.14);
    --brand:#0f766e; --brand-d:#0c5f59; --brand-tint:rgba(15,118,110,.09); --brand-ring:rgba(15,118,110,.25);
    --accent:#3b5bdb; --accent-tint:rgba(59,91,219,.09);
    --ok:#137a4d; --ok-bg:rgba(19,122,77,.1);
    --warn:#b54708; --warn-bg:rgba(181,71,8,.09); --warn-line:rgba(181,71,8,.22);
    --danger:#d92d20; --danger-bg:rgba(217,45,32,.08);
    --bar-buy:#9ed4d0; --bar-use:#f1c9a2;
    --sh-sm:0 1px 2px rgba(15,23,42,.05);
    --sh:0 1px 2px rgba(15,23,42,.05),0 4px 16px -4px rgba(15,23,42,.08);
    --sh-lg:0 24px 48px -12px rgba(15,23,42,.25);
    --r-sm:8px; --r:12px; --r-lg:16px;
    --side-w:230px;
    --z-bars:10; --z-modal:40; --z-login:50;
    color-scheme:light;
  }
  html[data-theme="dark"]{
    --bg:#0b0d10; --card:#14171c; --card2:#1b1f26;
    --ink:#eef2f6; --ink2:#c4ccd6; --muted:#9aa4b2; --faint:#6b7684;
    --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.13);
    --brand:#3ec9bd; --brand-d:#6adcd2; --brand-tint:rgba(62,201,189,.11); --brand-ring:rgba(62,201,189,.3);
    --accent:#7b96f4; --accent-tint:rgba(123,150,244,.13);
    --ok:#4ade80; --ok-bg:rgba(74,222,128,.11);
    --warn:#f0a35e; --warn-bg:rgba(240,163,94,.11); --warn-line:rgba(240,163,94,.28);
    --danger:#f47272; --danger-bg:rgba(244,114,114,.1);
    --bar-buy:#2c5652; --bar-use:#6b4a2e;
    --sh-sm:0 1px 2px rgba(0,0,0,.4);
    --sh:0 1px 2px rgba(0,0,0,.4),0 6px 20px -6px rgba(0,0,0,.5);
    --sh-lg:0 28px 56px -12px rgba(0,0,0,.6);
    color-scheme:dark;
  }

  /* ============ base ============ */
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:"Inter","Noto Sans JP","Hiragino Sans","Yu Gothic UI","Meiryo",system-ui,sans-serif;
    background:var(--bg);color:var(--ink);font-size:14px;line-height:1.6;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
  }
  button{font-family:inherit;cursor:pointer;color:inherit;background:none;border:none;padding:0}
  input,select{font-family:inherit}
  h1,h2,h3{text-wrap:balance;margin:0}
  p{text-wrap:pretty}
  .hidden{display:none!important}
  .num{font-variant-numeric:tabular-nums}
  svg.ic{flex:none;display:block}
  :where(button,select,input,a):focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
  ::selection{background:var(--brand-tint)}
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

  /* ============ login ============ */
  #login{
    position:fixed;inset:0;z-index:var(--z-login);background:#0b0e12;
    display:grid;place-items:center;
    padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));
  }
  #login .box{background:#fff;color:#0f172a;border-radius:20px;box-shadow:var(--sh-lg);width:100%;max-width:396px;padding:34px 32px 24px}
  #login .logo{display:flex;align-items:center;gap:12px;margin-bottom:26px}
  #login .mark{width:42px;height:42px;border-radius:12px;background:#0f766e;color:#fff;display:flex;align-items:center;justify-content:center}
  #login h1{font-size:17px;font-weight:800}
  #login .sub{color:#667085;font-size:12px;margin:2px 0 0}
  #login label{display:block;font-size:12px;font-weight:600;color:#3f4a5c;margin:14px 0 6px}
  #login input{width:100%;padding:11px 13px;border:1px solid rgba(15,23,42,.14);border-radius:10px;font-size:14px;background:#fff;color:#0f172a;transition:border-color .15s,box-shadow .15s}
  #login input:focus{outline:none;border-color:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.16)}
  #login .err{display:none;color:#d92d20;font-size:12px;margin-top:10px}
  #login .go{width:100%;margin-top:22px;padding:12px;border-radius:10px;background:#0f766e;color:#fff;font-weight:700;font-size:14px;transition:background .15s}
  #login .go:hover{background:#0c5f59}
  #login .creds{margin-top:20px;border-top:1px solid rgba(15,23,42,.08);padding-top:15px}
  #login .creds .cap{font-size:11px;color:#98a2b3;margin:0 0 8px}
  #login .cred{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid rgba(15,23,42,.1);border-radius:10px;padding:10px 13px;font-size:12.5px;margin-bottom:7px;transition:border-color .15s,background .15s}
  #login .cred:hover{border-color:#0f766e;background:rgba(15,118,110,.04)}
  #login .cred .who{display:flex;align-items:center;gap:8px;font-weight:700;color:#0f172a}
  #login .cred .who .roletag{font-weight:500;color:#667085;font-size:11.5px}
  #login .cred .kp{color:#667085}
  #login .fine{font-size:11px;color:#98a2b3;text-align:center;margin:12px 0 0}

  /* ============ app shell ============ */
  .shell{display:flex;min-height:100dvh}

  /* ---- sidebar (desktop) ---- */
  aside.side{
    width:var(--side-w);flex:none;position:sticky;top:0;height:100dvh;
    background:var(--card);border-right:1px solid var(--line);
    display:flex;flex-direction:column;padding:18px 13px 14px;
  }
  .side .brand{display:flex;align-items:center;gap:10px;padding:2px 8px 16px}
  .side .mark{width:32px;height:32px;border-radius:9px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
  html[data-theme="dark"] .side .mark{color:#06211e}
  .side .bt1{font-weight:800;font-size:13.5px;line-height:1.25}
  .side .bt2{font-size:10.5px;color:var(--muted)}
  .side nav{display:flex;flex-direction:column;gap:2px;margin-top:4px}
  .navitem{
    display:flex;align-items:center;gap:10px;width:100%;
    padding:9px 10px;border-radius:9px;font-size:13px;font-weight:500;color:var(--muted);
    transition:background .12s,color .12s;text-align:left;
  }
  .navitem:hover{background:var(--card2);color:var(--ink)}
  .navitem.on{background:var(--brand-tint);color:var(--brand);font-weight:700}
  .side .grow{flex:1}
  .side .foot{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:10px}
  .usercard{display:flex;align-items:center;gap:9px;padding:0 4px}
  .avatar{width:30px;height:30px;border-radius:50%;background:var(--brand-tint);color:var(--brand);font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
  .usercard .un{font-size:12px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .usercard .ur{font-size:10.5px;color:var(--muted)}
  .side .acts{display:flex;gap:7px;padding:0 2px}
  .qbtn{
    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:34px;
    border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--muted);
    font-size:11.5px;font-weight:600;transition:background .12s,color .12s;
  }
  .qbtn:hover{background:var(--card2);color:var(--ink)}

  /* ---- mobile top bar / bottom tabs ---- */
  header.mtop{
    display:none;position:sticky;top:0;z-index:var(--z-bars);
    background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    padding:0 max(13px,env(safe-area-inset-left));height:54px;
    align-items:center;justify-content:space-between;gap:10px;
  }
  .mtop .brand{display:flex;align-items:center;gap:9px;min-width:0}
  .mtop .mark{width:29px;height:29px;border-radius:8px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
  html[data-theme="dark"] .mtop .mark{color:#06211e}
  .mtop .t1{font-weight:800;font-size:13.5px;white-space:nowrap}
  .mtop .right{display:flex;align-items:center;gap:7px}
  .mtop .avatar{width:28px;height:28px;font-size:11.5px}
  .iconbtn{width:34px;height:34px;border:1px solid var(--line);background:var(--card);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:background .12s,color .12s}
  .iconbtn:hover{background:var(--card2);color:var(--ink)}
  nav.tabs{
    display:none;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bars);
    background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    padding:6px max(10px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom));
  }
  .tabs .in{display:flex;max-width:520px;margin:0 auto}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;border-radius:10px;font-size:10.5px;font-weight:600;color:var(--faint);transition:color .12s,background .12s}
  .tab.on{color:var(--brand);background:var(--brand-tint)}

  /* ---- content ---- */
  .content{flex:1;min-width:0;display:flex;flex-direction:column}
  main{width:100%;max-width:1060px;margin:0 auto;padding:24px 26px 10px}
  footer{width:100%;max-width:1060px;margin:6px auto 34px;padding:14px 26px 0;color:var(--faint);font-size:11px;border-top:1px solid var(--line)}

  .banner{
    display:flex;align-items:center;gap:8px;
    background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn);
    border-radius:10px;padding:7px 12px;font-size:11.5px;margin-bottom:18px;
  }
  .banner b{font-weight:700}

  .page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
  .page-h h2{font-size:22px;font-weight:800;line-height:1.3}
  .formula{font-size:11.5px;font-weight:500;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;white-space:nowrap}
  .badge11{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;color:var(--accent);background:var(--accent-tint);border-radius:6px;padding:3px 8px;vertical-align:2px}

  /* ---- toolbar ---- */
  .toolbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:14px}
  .periodSlot{flex:0 0 142px;display:flex}
  .periodSlot select,.auditSlot{
    width:100%;height:36px;padding:0 28px 0 12px;font-size:12.5px;font-weight:600;color:var(--ink2);
    border:1px solid var(--line);border-radius:9px;background-color:var(--card);
    appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23858ea0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 9px center;
    transition:border-color .15s;
  }
  .periodSlot select:hover{border-color:var(--line2)}
  .auditSlot{display:flex;align-items:center;color:var(--muted);background-image:none}
  .searchbox{position:relative;flex:1;min-width:200px;display:flex;align-items:center}
  .searchbox .ic{position:absolute;left:11px;color:var(--faint);pointer-events:none}
  .searchbox kbd{
    position:absolute;right:9px;pointer-events:none;
    font-family:inherit;font-size:10.5px;font-weight:600;color:var(--faint);
    border:1px solid var(--line);border-radius:5px;padding:1px 6px;background:var(--card2);
  }
  .searchbox input{
    width:100%;height:36px;padding:0 34px;font-size:13px;color:var(--ink);
    border:1px solid var(--line);border-radius:9px;background:var(--card);
    transition:border-color .15s,box-shadow .15s;
  }
  .searchbox input::placeholder{color:var(--faint)}
  .searchbox input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
  .seg{display:flex;gap:2px;background:var(--card2);border:1px solid var(--line);border-radius:9px;padding:2px}
  .seg button{border-radius:7px;padding:6px 12px;font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap;transition:background .12s,color .12s}
  .seg button:hover{color:var(--ink)}
  .seg button.on{background:var(--card);color:var(--ink);font-weight:700;box-shadow:var(--sh-sm)}
  .count{font-size:11px;color:var(--faint);white-space:nowrap}
  .csvbtn{display:flex;align-items:center;gap:6px;height:36px;border:1px solid var(--line);background:var(--card);color:var(--ink2);border-radius:9px;padding:0 13px;font-size:12px;font-weight:600;white-space:nowrap;transition:background .12s,border-color .12s}
  .csvbtn:hover{background:var(--card2);border-color:var(--line2)}

  /* ---- KPI ---- */
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
  .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px 13px;box-shadow:var(--sh-sm);min-height:92px;display:flex;flex-direction:column;gap:7px}
  .kpi .lbl{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--muted)}
  .kpi .lbl .ic{color:var(--faint)}
  .kpi .val{font-size:27px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
  .kpi .val small{font-size:11.5px;font-weight:600;color:var(--faint);margin-left:4px}
  .kpi .val.sm{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
  .kpi .chip{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;font-size:10.5px;font-weight:700;border-radius:6px;padding:2px 7px}
  .kpi .chip.up{background:var(--ok-bg);color:var(--ok)}
  .kpi .chip.down{background:var(--danger-bg);color:var(--danger)}
  .kpi .chip.warn{background:var(--warn-bg);color:var(--warn)}
  .kpi .chip.flat{background:var(--card2);color:var(--muted)}

  /* ---- table ---- */
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow-x:auto}
  .card::-webkit-scrollbar{height:8px}
  .card::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
  .card::-webkit-scrollbar-track{background:transparent}
  table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:740px}
  thead th{
    text-align:right;padding:11px 16px 9px;color:var(--faint);font-weight:600;font-size:11px;
    border-bottom:1px solid var(--line);white-space:nowrap;user-select:none;
  }
  thead th.l{text-align:left}
  thead th.sortable{cursor:pointer;transition:color .12s}
  thead th.sortable:hover{color:var(--ink)}
  thead th .ar{font-size:8px;margin-left:3px;opacity:.45}
  thead th.activesort{color:var(--brand)}
  thead th.activesort .ar{opacity:1}
  tbody td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;vertical-align:middle;font-variant-numeric:tabular-nums}
  tbody tr:last-child td{border-bottom:none}
  tbody td.l{text-align:left}
  tbody tr.clk{cursor:pointer;transition:background .1s}
  tbody tr.clk:hover{background:var(--card2)}
  tbody tr.sel{background:var(--brand-tint);box-shadow:inset 2.5px 0 0 var(--brand)}
  .drug{font-weight:600}
  .spec{color:var(--faint);font-size:12px;margin-left:6px;font-weight:400}
  .close{font-weight:700}
  .neg{color:var(--danger)}
  .calcwas{font-size:10.5px;color:var(--faint);font-weight:400;line-height:1.4}
  .st{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--ink2)}
  .st i{width:7px;height:7px;border-radius:50%;flex:none}
  .st.ok i{background:var(--ok)}
  .st.warn{color:var(--warn);font-weight:600}
  .st.warn i{background:var(--warn)}
  .st.danger{color:var(--danger);font-weight:600}
  .st.danger i{background:var(--danger)}
  .pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700}
  .pill.adj{background:var(--accent-tint);color:var(--accent)}
  .fixbtn{border:1px solid var(--line);background:var(--card);color:var(--ink2);border-radius:8px;padding:5px 12px;font-size:12px;font-weight:600;transition:background .12s,color .12s,border-color .12s}
  .fixbtn:hover{background:var(--brand-tint);color:var(--brand);border-color:transparent}
  .lockcell{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--faint)}
  .seq{display:inline-block;min-width:26px;text-align:center;background:var(--card2);border-radius:6px;padding:1px 6px;font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
  .o2n .old{color:var(--faint);text-decoration:line-through}
  .o2n .arw{color:var(--faint);margin:0 5px}
  .reason{text-align:left;white-space:normal;max-width:240px;font-size:12.5px}
  .empty{display:flex;flex-direction:column;align-items:center;gap:9px;padding:38px 16px;color:var(--muted);white-space:normal}
  .empty .ic{color:var(--faint)}
  .empty p{margin:0;font-size:13px}

  /* ---- panels ---- */
  .grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:12px;margin-top:12px}
  .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:18px 20px}
  .panel h3{font-size:13.5px;font-weight:700;margin-bottom:2px}
  .panel .psub{color:var(--faint);font-size:11.5px;margin:0 0 12px}
  .legend{display:flex;gap:15px;font-size:11px;color:var(--muted);margin-top:10px;flex-wrap:wrap}
  .legend .sw{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
  .note{font-size:12.5px;color:var(--muted);line-height:1.85}
  .note b{color:var(--ink);font-weight:600}
  .conv{background:var(--card2);border-radius:10px;padding:11px 13px;font-size:12px;color:var(--muted);margin-top:12px;line-height:1.7}
  .conv b{color:var(--ink)}
  .clauses{list-style:none;padding:0;margin:10px 0 0}
  .clauses li{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--muted);padding:9px 0;border-bottom:1px solid var(--line);line-height:1.75}
  .clauses li:last-child{border-bottom:none}
  .clauses li .ic{color:var(--brand);margin-top:3px}
  .clauses b{color:var(--ink);font-weight:600}

  /* ---- modal ---- */
  .modal-bg{position:fixed;inset:0;background:rgba(9,11,15,.6);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:18px}
  .modal{background:var(--card);color:var(--ink);border-radius:var(--r-lg);box-shadow:var(--sh-lg);width:100%;max-width:432px;padding:22px 24px;border:1px solid var(--line);max-height:92dvh;overflow-y:auto}
  .mhead{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
  .mhead .mtile{width:34px;height:34px;border-radius:10px;background:var(--brand-tint);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px}
  .modal h3{font-size:15px;font-weight:800}
  .modal .msub{color:var(--muted);font-size:12px;margin:2px 0 0}
  .mrow{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
  .mrow .k{color:var(--muted);font-size:12.5px}
  .mrow .v{font-weight:700;font-variant-numeric:tabular-nums}
  .modal input[type=number]{width:132px;padding:8px 11px;border:1px solid var(--line2);border-radius:9px;font-size:14px;text-align:right;background:var(--card);color:var(--ink);font-variant-numeric:tabular-nums}
  .modal input:focus,.modal select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
  .mdiff{font-weight:700}
  .mrevert{font-size:12px;color:var(--muted);background:var(--card2);border-radius:10px;padding:10px 12px;margin-top:12px;line-height:1.7}
  .mrevert b{color:var(--ink)}
  .revbtn{border:1px solid var(--line);background:var(--card);color:var(--brand);border-radius:7px;padding:3px 10px;font-size:12px;font-weight:700;margin-left:4px}
  .revbtn:hover{background:var(--brand-tint)}
  .mlbl{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin:15px 0 6px}
  .mlbl .req{color:var(--danger);margin-left:4px;font-weight:500}
  .modal select,.mnote{width:100%;padding:9px 11px;border:1px solid var(--line2);border-radius:9px;font-size:13.5px;background:var(--card);color:var(--ink)}
  .mnote{margin-top:8px}
  .signbox{border:1px solid var(--line);border-radius:10px;background:var(--card2);padding:12px}
  .signer{display:flex;align-items:center;gap:7px;font-size:12.5px;margin-bottom:9px;color:var(--ink2)}
  .signer .ic{color:var(--brand)}
  .signpw{width:100%;padding:9px 11px;border:1px solid var(--line2);border-radius:8px;font-size:13.5px;background:var(--card);color:var(--ink)}
  .signpw:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
  .msign{font-size:11px;color:var(--faint);margin-top:11px;line-height:1.7}
  .msign b{color:var(--ink2)}
  .merr{display:none;color:var(--danger);font-size:12px;margin-top:10px}
  .mactions{display:flex;gap:9px;margin-top:17px}
  .mactions button{flex:1;padding:11px;border-radius:10px;font-size:13.5px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px;transition:background .12s}
  .mactions .save{background:var(--brand);color:#fff}
  html[data-theme="dark"] .mactions .save{color:#06211e}
  .mactions .save:hover{background:var(--brand-d)}
  .mactions .cancel{background:var(--card);color:var(--muted);border:1px solid var(--line)}
  .mactions .cancel:hover{background:var(--card2)}

  /* ============ responsive ============ */
  @media(max-width:900px){
    aside.side{display:none}
    header.mtop{display:flex}
    nav.tabs{display:block}
    main{padding:16px 15px 6px}
    footer{padding:12px 15px 0;margin-bottom:calc(76px + env(safe-area-inset-bottom))}
    .kpis{grid-template-columns:repeat(2,1fr)}
    .grid2{grid-template-columns:1fr}
    .page-h h2{font-size:18px}
    .searchbox kbd{display:none}
  }
  @media(max-width:560px){
    .toolbar{gap:7px}
    .periodSlot{flex-basis:118px}
    .searchbox{min-width:150px}
    .kpi{min-height:80px;padding:12px 14px 11px}
    .kpi .val{font-size:21px}
    .kpi .val.sm{font-size:12px}
    .count{width:100%;order:9}
  }