:root {
      --nav:#1a2d4a; --brand:#2563eb; --brand-dk:#1d4ed8; --brand-lt:#eff6ff;
      --line:#dde5ee; --text:#1a2733; --muted:#6b809a;
      --red:#dc2626; --red-lt:#fef2f2;
      --shadow:0 20px 60px rgba(10,20,50,.35);
      --r:16px; --r-sm:10px;
      --footer-h:44px;
    }
    *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
    body {
      font-family:"Yu Gothic UI","Hiragino Sans","Meiryo",sans-serif;
      min-height:100vh; display:flex; flex-direction:column;
      background:linear-gradient(135deg, var(--nav) 0%, #2c4a7c 100%);
      color:var(--text);
    }

    /* 上部ロゴバー */
    .top-bar {
      padding:14px 24px;
      display:flex; align-items:center; gap:10px;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .top-bar .logo-icon { font-size:20px; }
    .top-bar .logo-text { color:#fff; font-size:14px; font-weight:700; }
    .top-bar .logo-sub  { color:rgba(255,255,255,.45); font-size:10px; margin-left:4px; }

    /* センター */
    .center {
      flex:1; display:flex; align-items:center; justify-content:center;
      padding:32px 16px;
    }
    .panel {
      width:min(420px,100%);
      background:#fff; border-radius:var(--r);
      padding:36px 32px; box-shadow:var(--shadow);
    }
    .logo { text-align:center; margin-bottom:28px; }
    .logo-icon { font-size:40px; margin-bottom:8px; }
    .logo-title { font-size:18px; font-weight:700; color:var(--text); }
    .logo-sub2  { font-size:12px; color:var(--muted); margin-top:4px; }

    .error { background:var(--red-lt); border:1px solid #fca5a5; border-radius:var(--r-sm); padding:10px 13px; color:var(--red); font-size:13px; margin-bottom:18px; display:flex; align-items:center; gap:6px; }
    .fld { display:grid; gap:6px; margin-bottom:14px; }
    .fld-label { font-size:12px; font-weight:600; color:var(--muted); }
    input[type="text"],input[type="password"] { width:100%; padding:11px 14px; border-radius:var(--r-sm); border:1.5px solid var(--line); font:inherit; font-size:14px; background:#f8fafc; color:var(--text); outline:none; transition:border-color .15s,background .15s; }
    input:focus { border-color:var(--brand); background:#fff; }
    .btn { width:100%; padding:12px; border-radius:var(--r-sm); background:var(--brand); color:#fff; border:none; font:inherit; font-size:15px; font-weight:700; cursor:pointer; margin-top:6px; transition:background .15s; }
    .btn:hover { background:var(--brand-dk); }
    .hint { margin-top:18px; font-size:12px; color:var(--muted); text-align:center; background:#f8fafc; border-radius:var(--r-sm); padding:10px 13px; border:1px solid var(--line); }

    /* フッター */
    .site-footer { height:var(--footer-h); background:rgba(0,0,0,.2); display:flex; align-items:center; justify-content:center; padding:0 24px; border-top:1px solid rgba(255,255,255,.06); }
    .site-footer .ft-text { font-size:11px; color:rgba(255,255,255,.3); }