* { box-sizing: border-box; }
body { font-family: system-ui, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
       margin: 0; background: #f5f6f8; color: #2b2f36; }
.container { max-width: 960px; margin: 0 auto; padding: 1.5rem; }

/* トップバー */
.topbar { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem;
          background: #1f2937; color: #fff; }
.topbar .brand { font-weight: 700; }
.topbar .mainnav a { color: #cbd5e1; text-decoration: none; margin-right: .8rem; }
.topbar .mainnav a.active { color: #fff; border-bottom: 2px solid #60a5fa; }
.topbar .user-area { margin-left: auto; display: flex; align-items: center; gap: .8rem; font-size: .9rem; }
.topbar .user-area a { color: #cbd5e1; text-decoration: none; }
.topbar .user-area a:hover { color: #fff; }
.logout-form { margin: 0; }
.logout-btn { background: transparent; color: #cbd5e1; border: 1px solid #475569;
              border-radius: 6px; padding: .25rem .6rem; cursor: pointer; }
.logout-btn:hover { color: #fff; border-color: #94a3b8; }

/* カード・認証フォーム */
.card, .auth-card { background: #fff; border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,.08);
                    padding: 1.25rem 1.5rem; margin: 1rem 0; }
.auth-card { max-width: 420px; margin: 3rem auto; }
.auth-card h1, .card h2 { margin-top: 0; }
.card h3 { margin: .8rem 0 .3rem; font-size: 1rem; }
.auth-card label, .card label { display: block; margin: .6rem 0; font-size: .9rem; }
.auth-card input[type=text], .auth-card input[type=password],
.card input[type=text], .card input[type=password] {
    width: 100%; padding: .5rem; margin-top: .25rem;
    border: 1px solid #cbd5e1; border-radius: 6px; }
/* カード内の説明リスト（要求スコープ等）が崩れないように */
.card ul.note { margin: .3rem 0 .6rem; padding-left: 1.2rem; }
.card ul.note li { word-break: break-all; }
.card code { background: #eef1f4; padding: 0 .25rem; border-radius: 4px; word-break: break-all; }
.btn-primary { background: #2563eb; color: #fff; border: none; border-radius: 6px;
               padding: .55rem 1rem; cursor: pointer; font-size: .95rem; margin-top: .5rem; }
.btn-primary:hover { background: #1d4ed8; }
.auth-note, .note { color: #6b7280; font-size: .88rem; }

/* お知らせ */
.alert { padding: .6rem .8rem; border-radius: 6px; margin: .6rem 0; font-size: .9rem; }
.alert-info { background: #e0f2fe; color: #075985; }
.alert-error { background: #fee2e2; color: #991b1b; }

/* テーブル */
table.list { width: 100%; border-collapse: collapse; background: #fff; margin-top: .5rem; }
table.list th, table.list td { border: 1px solid #e5e7eb; padding: .4rem .6rem; text-align: left; font-size: .9rem; }
table.list th { background: #f3f4f6; }