:root {
  color: #172235;
  background: #f4f6f9;
  font-family: "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif;
  line-height: 1.5;
  --nav: #101c33;
  --blue: #2457d6;
  --blue-dark: #1948be;
  --green: #12956f;
  --line: #e3e8ef;
  --muted: #66758a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #f4f6f9; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 20; top: 8px; left: 8px; transform: translateY(-150%); border-radius: 7px; background: #fff; padding: 10px 14px; color: var(--blue); font-weight: 700; box-shadow: 0 8px 24px #07142626; }
.skip-link:focus { transform: translateY(0); }
.page-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 5vw, 72px); background: var(--nav); color: #fff; border-bottom: 1px solid #ffffff17; }
.brand { min-height: 44px; display: flex; gap: 12px; align-items: center; text-decoration: none; border-radius: 9px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: var(--blue); font-size: 23px; font-weight: 800; box-shadow: 0 8px 22px #07142655; }
.brand-copy strong, .brand-copy small { display: block; }
.brand-copy strong { letter-spacing: .01em; }
.brand-copy small { color: #aeb9c9; font-size: 10px; }
.environment { display: inline-flex; align-items: center; gap: 8px; color: #c8d1df; font-size: 12px; font-weight: 700; }
.environment > span { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px #34d39920; }
main { width: min(1180px, calc(100% - 48px)); margin: 0 auto; flex: 1; }
.hero { padding: clamp(56px, 8vw, 92px) 0 48px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 7px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.hero h1 { margin: 0; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.035em; line-height: 1.2; }
.hero > p:last-child { max-width: 600px; margin: 14px 0 0; color: var(--muted); font-size: 15px; }
.applications { padding: 42px 0 80px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 20px; }
.section-heading h2 { margin: 0; font-size: 20px; }
.app-count { margin: 0; color: var(--muted); font-size: 12px; }
.app-count strong { color: var(--blue); font-size: 18px; }
.app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.app-card { position: relative; min-height: 290px; overflow: hidden; display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-decoration: none; box-shadow: 0 5px 20px #1722350a; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.card-topline { position: absolute; inset: 0 0 auto; height: 3px; background: var(--green); }
.app-card:hover { transform: translateY(-3px); border-color: #bfd0f7; box-shadow: 0 16px 40px #17223516; }
.app-card:focus-visible, .brand:focus-visible { outline: 3px solid #88a9f7; outline-offset: 4px; }
.app-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 13px; background: var(--blue); color: #fff; font-size: 28px; font-weight: 800; box-shadow: 0 10px 24px #2457d633; }
.app-content { display: flex; flex: 1; flex-direction: column; }
.app-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.app-eyebrow { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.status { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: #eaf8f3; padding: 5px 9px; color: #087755; font-size: 10px; font-weight: 700; }
.status > span:first-child { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.app-name { display: block; margin-top: 14px; font-size: 22px; letter-spacing: -.02em; }
.app-description { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.app-action { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 24px; color: var(--blue); font-size: 12px; font-weight: 800; }
.app-action > span { font-size: 18px; transition: transform 160ms ease; }
.app-card:hover .app-action > span { transform: translateX(4px); }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 22px clamp(20px, 5vw, 72px); border-top: 1px solid var(--line); color: #7a8798; font-size: 11px; }
.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0f1b32,#1f4f9d)}.login-card{width:min(420px,calc(100% - 32px));padding:42px;border-radius:16px;background:#fff;box-shadow:0 25px 70px #07142666;text-align:center}.login-card .brand-mark{display:grid;margin:0 auto}.login-card h1{margin:12px 0 0;font-size:28px}.login-card p{color:var(--muted);font-size:13px}.login-card form{text-align:left;margin-top:24px}.login-card label{display:block;margin-top:14px;font-size:13px;font-weight:700}.login-card input{width:100%;height:44px;margin-top:6px;border:1px solid #cad4e1;border-radius:8px;padding:10px}.login-card button{width:100%;height:44px;margin-top:22px;border:0;border-radius:8px;background:var(--blue);color:#fff;font-weight:700}.login-alert,.login-success{margin-top:18px;padding:10px;border-radius:8px;font-size:13px}.login-alert{background:#fff0f0;color:#b42318}.login-success{background:#eaf8f3;color:#087755}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .app-card, .app-action > span { transition: none; }
}

@media (max-width: 900px) {
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .topbar { height: 72px; padding: 0 18px; }
  .brand-mark { width: 38px; height: 38px; font-size: 21px; }
  .brand-copy strong { font-size: 14px; }
  .environment { font-size: 0; }
  main { width: min(100% - 32px, 1180px); }
  .hero { padding: 46px 0 36px; }
  .hero h1 { font-size: 30px; }
  .applications { padding: 34px 0 52px; }
  .app-grid { grid-template-columns: 1fr; }
  .app-card { min-height: 270px; padding: 22px; }
  footer { flex-direction: column; gap: 4px; padding: 20px 18px; }
}

/* System administration */
.portal-back{color:#c8d1df;text-decoration:none;font-size:12px;font-weight:700}.admin-main{width:min(1180px,calc(100% - 48px));padding-bottom:70px}.admin-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:48px 0 30px}.admin-hero h1{margin:0;font-size:30px;letter-spacing:-.03em}.admin-hero p:last-child{margin:8px 0 0;color:var(--muted);font-size:13px}.admin-kpi{min-width:170px;border:1px solid var(--line);border-top:3px solid var(--green);border-radius:10px;background:#fff;padding:15px 18px;box-shadow:0 5px 20px #1722350a}.admin-kpi span,.admin-kpi strong{display:block}.admin-kpi span{color:var(--muted);font-size:10px}.admin-kpi strong{margin-top:4px;font-size:20px}.admin-grid{display:grid;grid-template-columns:360px 1fr;gap:18px}.admin-panel{border:1px solid var(--line);border-radius:12px;background:#fff;padding:24px;box-shadow:0 5px 20px #1722350a}.admin-panel h2{margin:0 0 20px;font-size:18px}.admin-form{display:grid;gap:14px}.admin-form label{display:grid;gap:6px;color:#364152;font-size:12px;font-weight:700}.admin-form input,.admin-form select{width:100%;height:43px;border:1px solid #cad4e1;border-radius:8px;background:#fff;padding:0 11px}.admin-form small{color:var(--muted);font-size:9px;font-weight:400}.admin-form button{height:44px;margin-top:5px;border:0;border-radius:8px;background:var(--blue);color:#fff;font-weight:700;cursor:pointer}.admin-panel-head{display:flex;justify-content:space-between;align-items:start}.admin-count{border-radius:999px;background:#edf2ff;color:var(--blue);padding:5px 9px;font-size:10px;font-weight:800}.user-list{display:grid}.user-row{display:grid;grid-template-columns:40px minmax(160px,1fr) auto auto auto;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #edf0f4}.user-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#dfe8ff;color:var(--blue);font-size:12px;font-weight:800}.user-copy strong,.user-copy small{display:block}.user-copy strong{font-size:12px}.user-copy small{color:var(--muted);font-size:9px}.admin-role,.account-state{border-radius:999px;background:#edf2ff;color:var(--blue);padding:5px 8px;font-size:9px;font-weight:800}.admin-role.administrator{background:#eee9ff;color:#6941c6}.account-state{background:#eaf8f3;color:#087755}.account-state.disabled{background:#f0f1f3;color:#667085}.state-button{border:0;background:transparent;color:var(--blue);font-size:10px;font-weight:800;cursor:pointer}.admin-alert{margin-bottom:14px;border-radius:8px;padding:11px 14px;font-size:12px}.admin-alert.success{background:#eaf8f3;color:#087755}.admin-alert.error{background:#fff0f0;color:#b42318}
@media(max-width:800px){.admin-grid{grid-template-columns:1fr}.admin-hero{align-items:flex-start}.user-row{grid-template-columns:40px 1fr auto}.user-row .admin-role,.user-row .account-state{grid-row:2}.user-row form{grid-column:3;grid-row:2}}
@media(max-width:620px){.admin-main{width:calc(100% - 32px)}.admin-hero{flex-direction:column}.admin-kpi{width:100%}.portal-back{font-size:10px}.admin-panel{padding:18px}}
.topbar-actions{display:flex;align-items:center;gap:18px}.topbar-actions>a,.topbar-actions button{border:0;background:transparent;color:#c8d1df;text-decoration:none;font-size:11px;font-weight:700;cursor:pointer}.topbar-actions form{margin:0}.password-main{width:min(480px,calc(100% - 32px));display:grid;place-items:center;padding:56px 0}.password-card{width:100%;border:1px solid var(--line);border-radius:14px;background:#fff;padding:34px;box-shadow:0 14px 45px #17223514}.password-card h1{margin:0;font-size:26px}.password-lead{margin:8px 0 22px;color:var(--muted);font-size:12px}.password-icon{width:45px;height:45px;display:grid;place-items:center;margin-bottom:16px;border-radius:11px;background:#edf2ff;color:var(--blue);font-weight:900;letter-spacing:2px}@media(max-width:620px){.topbar-actions{gap:9px}.topbar-actions .environment{display:none}.password-card{padding:26px 22px}}
.ses-employee-row{display:grid;grid-template-columns:1fr minmax(200px,320px);gap:24px;align-items:center;padding:18px 0;border-top:1px solid #edf0f4}.ses-employee-row small{display:block;margin-top:6px;font-size:12px;color:#52627a}.ses-employee-row .admin-form{gap:8px}@media(max-width:620px){.ses-employee-row{grid-template-columns:1fr;gap:12px}}

/* Shared responsive layout: keep content readable without horizontal scrolling. */
body { min-width: 0; overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; }
input, select, textarea { min-width: 0; max-width: 100%; }
button, a { touch-action: manipulation; }
button { white-space: normal; }
button:disabled { cursor: not-allowed; opacity: .55; }
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid #88a9f7; outline-offset: 3px; }
.topbar { height: auto; min-height: 82px; gap: 16px; padding-block: 14px; flex-wrap: wrap; }
.brand, .brand-copy, .app-content, .admin-panel, .user-copy, .ses-employee-row > *, .admin-hero > * { min-width: 0; }
.brand-mark, .app-icon { flex-shrink: 0; }
.topbar-actions { flex-wrap: wrap; justify-content: flex-end; gap: 8px 16px; }
.topbar-actions > a, .topbar-actions button, .portal-back { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 4px; font-size: 13px; }
.app-meta { flex-wrap: wrap; gap: 8px; }
.status { flex-shrink: 0; }
.admin-grid { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
.admin-panel-head { flex-wrap: wrap; gap: 12px; }
.admin-form input, .admin-form select, .login-card input { font-size: 16px; min-height: 44px; }
.admin-form button { height: auto; min-height: 44px; padding: 10px 14px; }
.user-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px 12px; }
.user-row .user-avatar { grid-column: 1; grid-row: 1; }
.user-row .user-copy { grid-column: 2 / -1; grid-row: 1; }
.user-row .admin-role { grid-column: 2; grid-row: 2; justify-self: start; }
.user-row .account-state { grid-column: 2; grid-row: 3; justify-self: start; }
.user-row form { grid-column: 3; grid-row: 2 / 4; }
.user-copy strong { font-size: 14px; }
.user-copy small, .admin-role, .account-state { font-size: 12px; }
.state-button { min-height: 44px; padding: 10px 12px; font-size: 13px; }
.ses-employee-row { grid-template-columns: minmax(0, 1fr) minmax(180px, 320px); }
.ses-employee-row strong { font-size: 15px; }
.sync-status { font-size: 13px; color: var(--muted); }
.login-page { min-height: 100svh; padding-block: 24px; }
.login-card { flex: initial; padding: clamp(24px, 6vw, 42px); }
.password-main { padding-block: clamp(24px, 6vw, 56px); }
@media (max-width: 1100px) {
  .admin-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .topbar { padding: 12px 16px; gap: 8px 16px; }
  .topbar-actions { width: 100%; justify-content: flex-start; gap: 4px 16px; border-top: 1px solid #ffffff26; padding-top: 4px; }
  .topbar-actions > a, .topbar-actions button, .portal-back { font-size: 13px; }
  .topbar-actions .environment { display: none; }
  .admin-hero { flex-direction: column; align-items: stretch; padding-top: 28px; }
  .admin-hero h1 { font-size: clamp(22px, 6vw, 30px); }
  .admin-kpi { min-width: 0; }
  .ses-employee-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .admin-panel { padding: 20px; }
  .section-heading { align-items: center; gap: 12px; flex-wrap: wrap; }
  .app-count { white-space: nowrap; }
  .app-card { min-height: 0; }
  .hero { padding-top: 32px; }
  .hero h1 { font-size: clamp(25px, 7vw, 34px); }
  .password-card { padding: 24px 20px; }
  .password-card h1 { font-size: 24px; }
  footer { flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .user-row { grid-template-columns: 30px minmax(0, 1fr); }
  .user-avatar { width: 30px; height: 30px; }
  .user-row form { grid-column: 1 / -1; grid-row: 4; }
  .user-row form button { width: 100%; background: #edf2ff; border-radius: 7px; }
}