.kp-tabbar{display:none}
.kp-sheet{display:none}

@media (max-width:900px){
  html,
  body{
    overflow-x:hidden;
  }

  #app{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    grid-template-areas:"top" "main";
    min-height:100%;
  }

  #app.on{
    display:grid;
  }

  .rail{
    position:fixed;
    inset:0 auto 0 0;
    z-index:60;
    width:min(84vw,320px);
    max-width:100vw;
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:var(--shadow-lg);
  }

  .rail.mobile-open{
    transform:translateX(0);
  }

  .rail-overlay{
    position:fixed;
    inset:0;
    z-index:50;
    background:color-mix(in srgb,var(--rail) 62%,transparent);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }

  .rail-overlay.open,
  .rail-overlay.mobile-open{
    opacity:1;
    pointer-events:auto;
  }

  .top{
    min-height:56px;
    gap:10px;
    padding:0 12px;
    min-width:0;
  }

  .top-search,
  .top-right .hint{
    display:none;
  }

  .top-right{
    gap:4px;
    min-width:0;
  }

  .top-right select{
    max-width:88px;
    font-size:12px;
  }

  .top-right .btn{
    padding:0 8px;
    font-size:12px;
  }

  .user-chip .un{
    display:none;
  }

  .crumb{
    overflow:hidden;
    white-space:nowrap;
    font-size:0;
    min-width:0;
  }

  .crumb svg{
    display:none;
  }

  .crumb b{
    font-size:14px;
  }

  .main{
    padding:16px 12px 76px;
    padding-bottom:76px;
  }

  .kp-tabbar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:70;
    display:flex;
    align-items:stretch;
    min-height:52px;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    background:var(--card);
    border-top:1px solid var(--line);
    color:var(--ink-2);
    box-shadow:var(--shadow);
  }

  .kp-tab{
    flex:1;
    min-width:0;
    min-height:40px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    color:var(--ink-2);
    font-size:11px;
    font-weight:600;
  }

  .kp-tab svg{
    width:20px;
    height:20px;
  }

  .kp-tab.on{
    color:var(--accent);
  }

  .kp-sheet{
    position:fixed;
    inset:0;
    z-index:80;
    display:none;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:16px 16px calc(24px + env(safe-area-inset-bottom));
    background:var(--card);
    color:var(--ink);
  }

  .kp-sheet.open{
    display:block;
  }

  .kp-sheet-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }

  .kp-sheet-close{
    transform:rotate(45deg);
  }

  .kp-sheet-workspaces{
    display:flex;
    gap:8px;
  }

  .kp-sheet-ws{
    flex:1;
    min-width:0;
    border:1px solid var(--line);
    border-radius:var(--r-sm);
  }

  .kp-sheet-ws.on{
    color:var(--accent);
    border-color:var(--accent);
  }

  .kp-sheet-group h3{
    font-size:13px;
    color:var(--ink-2);
    margin:14px 0 8px;
  }

  .kp-sheet-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
  }

  .kp-sheet-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:10px 4px;
    border:1px solid var(--line);
    border-radius:var(--r-sm);
    background:var(--card-2,var(--card));
    font-size:12px;
    color:var(--ink-2);
  }

  .kp-sheet-item span{
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  .kp-sheet-item.on{
    color:var(--accent);
    border-color:var(--accent);
  }

  .card{
    overflow-x:auto;
  }

  .card table{
    min-width:560px;
  }

  .drawer{
    width:100vw;
  }

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

  .fg.col2,
  .fg.col3{
    grid-column:auto;
  }

  button,
  input,
  select,
  textarea,
  .btn,
  .icon-btn,
  .pg,
  .st-tab{
    min-height:40px;
  }
}