:root{
    --bg: #f7f8fa;
    --surface: #ffffff;
    --border: #e2e5ea;
    --text: #1a1d24;
    --text-dim: #5b6270;
    --text-faint: #9aa1ad;
    --accent: #2563eb;
    --accent-soft: #eaf1ff;
    --warn: #d97706;
    --warn-soft: #fff7ea;
    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --green: #16a34a;
    --green-soft: #f0fdf4;
    --radius: 12px;
    --radius-sm: 8px;
}

*{ box-sizing: border-box; }

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
    line-height:1.6;
    padding-bottom:76px;
}

.container{
    max-width:960px;
    margin:0 auto;
    padding:20px 16px 40px;
}

header.page-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
    flex-wrap:wrap;
    gap:10px;
}

header.page-header h1{
    font-size:1.3rem;
    margin:0;
    font-weight:800;
}

a.back-link{
    color:var(--accent);
    font-weight:700;
    text-decoration:none;
    font-size:0.85rem;
}

.badge-amg{
    display:inline-block;
    background:var(--accent-soft);
    color:var(--accent);
    font-weight:700;
    font-size:0.72rem;
    padding:4px 10px;
    border-radius:999px;
    margin-left:8px;
    vertical-align:middle;
}

.card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:16px;
    margin-bottom:16px;
    box-shadow:0 1px 2px rgba(20,20,30,0.03);
}

.note{
    font-size:0.82rem;
    color:var(--text-dim);
    line-height:1.8;
}

.filter-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}

select, input[type=text], input[type=time], textarea{
    padding:10px 12px;
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
    background:#fff;
    color:var(--text);
    font-size:0.92rem;
    font-family:inherit;
}

button{
    padding:10px 16px;
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
    background:var(--accent);
    color:#fff;
    font-weight:700;
    font-size:0.88rem;
    cursor:pointer;
}

button.secondary{
    background:#fff;
    color:var(--text);
}

button.danger{
    background:var(--danger-soft);
    color:var(--danger);
    border-color:#fca5a5;
}

.stat-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
}

.stat-chip{
    background:var(--accent-soft);
    color:var(--accent);
    font-size:0.76rem;
    font-weight:700;
    padding:4px 10px;
    border-radius:999px;
}

.empty-msg{
    color:var(--text-faint);
    font-size:0.88rem;
    text-align:center;
    padding:30px 0;
}

.tag{
    display:inline-block;
    font-size:0.68rem;
    font-weight:800;
    padding:2px 8px;
    border-radius:999px;
    margin-left:6px;
    vertical-align:middle;
}

.tag-fixed{ background:var(--warn-soft); color:var(--warn); }
.tag-inserted{ background:#eef2ff; color:#4338ca; }
.tag-handover{ background:var(--danger-soft); color:var(--danger); }

/* ホーム画面のカードグリッド */

.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:12px;
}

a.menu-card{
    display:block;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:18px 14px;
    text-decoration:none;
    color:var(--text);
    text-align:center;
    box-shadow:0 1px 2px rgba(20,20,30,0.03);
}

a.menu-card:hover{
    border-color:var(--accent);
}

a.menu-card .icon{
    font-size:1.8rem;
    margin-bottom:8px;
}

a.menu-card .title{
    font-weight:700;
    font-size:0.86rem;
}

a.menu-card .desc{
    font-size:0.72rem;
    color:var(--text-faint);
    margin-top:4px;
}

/* テーブル */

.table-wrap{
    overflow-x:auto;
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
}

table.data-table{
    border-collapse:separate;
    border-spacing:0;
    width:100%;
    min-width:520px;
    font-size:0.84rem;
}

table.data-table th, table.data-table td{
    padding:8px 10px;
    text-align:center;
    white-space:nowrap;
    border-bottom:1px solid var(--border);
    border-right:1px solid var(--border);
}

table.data-table th:last-child, table.data-table td:last-child{
    border-right:none;
}

table.data-table thead th{
    background:#f4f6f9;
    font-weight:800;
}

/* 下部固定ナビ */

nav.bottom-nav{
    position:fixed;
    left:0; right:0; bottom:0;
    background:#ffffff;
    border-top:1px solid var(--border);
    display:flex;
    z-index:500;
}

nav.bottom-nav button, nav.bottom-nav a.bn-item{
    flex:1;
    background:none;
    border:none;
    color:var(--text-dim);
    font-size:0.68rem;
    padding:8px 4px 10px;
    text-decoration:none;
    text-align:center;
}

nav.bottom-nav .bn-icon{
    display:block;
    font-size:1.2rem;
    margin-bottom:2px;
}

#menu-sheet-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(20,20,30,0.4);
    z-index:600;
}

#menu-sheet{
    display:none;
    position:fixed;
    left:0; right:0; bottom:0;
    background:#fff;
    border-radius:16px 16px 0 0;
    z-index:601;
    max-height:78vh;
    overflow-y:auto;
    padding:14px;
}

#menu-sheet .sheet-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 8px;
    text-decoration:none;
    color:var(--text);
    border-bottom:1px solid var(--border);
    font-size:0.92rem;
    font-weight:600;
}

#menu-sheet .sheet-item:last-child{
    border-bottom:none;
}

/* ブロック表示（本日の運番・スターフ共通） */

.timeline{
    margin-top:10px;
}

.block-row{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:12px 10px;
    border-bottom:1px solid var(--border);
    border-radius:8px;
    transition:background 0.15s;
}

.block-row:hover{
    background:#fafbfc;
}

.block-row:last-child{
    border-bottom:none;
}

.type-icon{
    display:inline-block;
    margin-right:4px;
}

.block-time{
    flex:0 0 112px;
    font-weight:800;
    font-size:0.86rem;
    color:var(--text);
    white-space:nowrap;
}

.block-time .sub{
    display:block;
    font-size:0.72rem;
    font-weight:600;
    color:var(--text-faint);
    margin-left:20px;
}

.block-body{
    flex:1;
    min-width:0;
}

.block-title{
    font-weight:700;
    font-size:0.9rem;
}

.block-place{
    font-size:0.82rem;
    color:var(--text-dim);
    margin-top:2px;
}

.block-row.type-0{
    background:#ffffff;
    border-left:3px solid var(--border);
}

.block-row.type-1001{
    background:#eff6ff;
    border-left:3px solid #3b82f6;
}

.block-row.type-11, .block-row.type-13{
    background:var(--green-soft);
    border-left:3px solid var(--green);
}

.block-row.type-12{
    background:#fefce8;
    border-left:3px solid #ca8a04;
}

.block-row.type-1{
    background:#fef2f2;
    border-left:3px solid #dc2626;
}

.block-row.type-2{
    background:#fdf2f8;
    border-left:3px solid #db2777;
}

.handover-banner{
    margin-top:6px;
    background:var(--danger-soft);
    color:var(--danger);
    font-size:0.82rem;
    font-weight:800;
    padding:6px 10px;
    border-radius:var(--radius-sm);
    display:inline-block;
}

.legend{
    font-size:0.78rem;
    color:var(--text-dim);
    line-height:2.2;
}

.place-special{
    color:#dc2626;
    font-weight:800;
}

.handover-banner.handover-from{
    background:#eef4ff;
    color:var(--accent);
    margin-right:6px;
}

.day-tabs{
    display:flex;
    gap:8px;
    margin-bottom:12px;
}

.day-tab{
    flex:1;
    background:#fff;
    border:1px solid var(--border);
    color:var(--text-dim);
    font-size:0.8rem;
    font-weight:700;
    padding:8px 4px;
    border-radius:var(--radius-sm);
    line-height:1.4;
}

.day-tab.active{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
}

.finished-banner{
    text-align:center;
    padding:30px 10px;
    background:var(--green-soft);
    color:var(--green);
    font-weight:800;
    font-size:1rem;
    line-height:1.8;
    border-radius:var(--radius);
}