:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --accent:#06c755; /* LINE green */
  --danger:#ef4444;
  --warn:#f59e0b;
  --radius:16px;
  --radius2:12px;
  --shadow: 0 10px 30px rgba(17,24,39,.08);
  --maxw: 520px;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app{min-height:100%; display:flex; justify-content:center;}
.shell{
  width:100%;
  max-width: var(--maxw);
  min-height: 100dvh;
  padding: calc(12px + var(--safe-top)) 14px calc(18px + var(--safe-bottom)) 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246,247,251,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.topbar .center{display:flex; flex-direction:column; align-items:center; gap:2px; min-width: 0;}
.title{font-weight:980; font-size:14px; line-height:1.1;}
.subtitle{font-size:12px; color: var(--muted); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 220px;}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-weight: 950;
  font-size: 13px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s ease;
  box-shadow: 0 2px 10px rgba(17,24,39,.04);
}
.btn:active{transform: scale(.99);}
.btn.primary{
  border-color: rgba(6,199,85,.35);
  background: rgba(6,199,85,.10);
}
.btn.danger{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
  color: #991b1b;
}
.btn.ghost{
  border-color: transparent;
  background: transparent;
  box-shadow:none;
}
.btn.small{
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 10px;
}

/* Cards */
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.col{display:flex; flex-direction:column; gap:6px; min-width:0;}
.h1{font-size:18px; font-weight:990;}
.h2{font-size:14px; font-weight:980;}
.p{font-size:13px; line-height:1.6; color: var(--muted); margin:0;}
.divider{height:1px; background: var(--line); margin: 10px 0;}
.pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 980;
  font-size: 12px;
  background: #f9fafb;
  color: var(--muted);
  white-space:nowrap;
}
.pill.ok{border-color: rgba(6,199,85,.35); background: rgba(6,199,85,.10); color:#065f46;}
.pill.ng{border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); color:#991b1b;}
.pill.warn{border-color: rgba(245,158,11,.40); background: rgba(245,158,11,.12); color:#92400e;}

/* Lists */
.list{display:flex; flex-direction:column; gap:10px;}
.item{
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  padding: 12px;
  background: #fff;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.meta{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.meta .left{min-width:0;}
.meta .left .main{font-weight: 990; font-size: 13px; line-height:1.2;}
.meta .left .sub{font-size: 12px; color: var(--muted); margin-top: 4px;}
.actions{display:flex; gap:10px; flex-wrap:wrap;}
.actions .btn{flex:1; min-width: 140px;}
.disabled{opacity:.55;}
.disabled .btn.primary{cursor:not-allowed;}

/* Forms */
.field{display:flex; flex-direction:column; gap:6px;}
.label{font-size:12px; font-weight: 980; color: var(--muted);}
select,input{
  width:100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  padding: 0 12px;
  outline: none;
  font-size: 14px;
}
input::placeholder{color: #9ca3af;}
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:10px;}
@media (max-width: 380px){ .grid2{grid-template-columns: 1fr;} }

/* Bottom nav */
.bottomnav{
  position: sticky;
  bottom: calc(10px + var(--safe-bottom));
  z-index: 40;
  display:flex;
  gap:10px;
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}
.navbtn{
  flex:1;
  height: 44px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor:pointer;
  font-weight: 980;
  font-size: 12px;
  color: var(--muted);
  -webkit-tap-highlight-color: transparent;
}
.navbtn.active{
  background: rgba(6,199,85,.12);
  border-color: rgba(6,199,85,.25);
  color: var(--text);
}

/* Views */
.view{display:none;}
.view.active{display:block;}

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(82px + var(--safe-bottom));
  z-index: 200;
  max-width: min(var(--maxw), calc(100% - 24px));
  background: rgba(17,24,39,.92);
  color: #fff;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 980;
  display:none;
}
.toast.show{display:block;}