:root{--ink:#17221d;--muted:#69756f;--paper:#f5f4ef;--card:#fff;--green:#16664a;--lime:#d9f466;--line:#dfe3dd;--red:#aa4138}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,'Noto Sans JP',sans-serif}.authBody{min-height:100vh;background:radial-gradient(circle at 85% 10%,#d9f46622,transparent 24%),linear-gradient(145deg,#102c23,#176047)}.authShell{width:min(460px,calc(100% - 28px));margin:auto;padding:9vh 0 40px}.authBrand{display:flex;align-items:center;gap:13px;margin-bottom:22px;color:#fff}.authMark{display:grid;width:44px;height:44px;place-items:center;border-radius:13px;background:var(--lime);color:#153426;font-size:21px;font-weight:900}.authBrand p,.accessHeader p,.accessTitle p{margin:0 0 4px;color:#6e9786;font-size:9px;font-weight:900;letter-spacing:.19em}.authBrand p{color:#b8d4c8}.authBrand h1{margin:0;font-size:20px}.authCard{padding:28px;border-radius:24px;background:#fff;box-shadow:0 24px 80px #061b1455}.authEyebrow{margin:0 0 8px;color:var(--green);font-size:10px;font-weight:900;letter-spacing:.18em}.authCard h2{margin:0;font-size:27px}.authLead{margin:12px 0 22px;color:var(--muted);font-size:13px;line-height:1.7}.authCard form{display:grid;gap:14px}.authCard label,.createGrid label{display:grid;gap:6px}.authCard label span,.createGrid label span{color:var(--muted);font-size:11px;font-weight:700}input,select{width:100%;padding:13px 14px;border:1px solid #d9dfda;border-radius:11px;background:#fff;color:var(--ink);font:inherit;outline:0}input:focus,select:focus{border-color:#3c9a75;box-shadow:0 0 0 3px #3c9a7518}button{padding:12px 15px;border:1px solid #d4dbd5;border-radius:10px;background:#fff;color:var(--ink);font-weight:800;cursor:pointer}.authCard button{margin-top:4px;border-color:var(--green);background:var(--green);color:#fff}.authMessage{margin:0 0 17px;padding:12px 14px;border-radius:10px;font-size:12px;line-height:1.6}.authMessage.error{background:#f9e9e7;color:#96392f}.authMessage.pending{background:#fff4d6;color:#795d12}.authMessage.success{background:#e2f2e9;color:#176144}.authFoot{text-align:center;color:#b7cfc5;font-size:10px;letter-spacing:.12em}.accessBody{min-height:100vh}.accessShell{width:min(1120px,calc(100% - 34px));margin:auto;padding:30px 0 60px}.accessHeader{display:flex;justify-content:space-between;align-items:end;padding:8px 0 25px;border-bottom:1px solid var(--line)}.accessHeader h1{margin:0;font-size:30px}.accessHeader nav{display:flex;gap:9px}.accessHeader a,.privateLinks a{padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font-size:11px;font-weight:800;text-decoration:none}.accessSection{margin-top:22px;padding:24px;border:1px solid var(--line);border-radius:20px;background:#ffffffa6}.accessTitle{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}.accessTitle h2{margin:0;font-size:21px}.accessTitle>span{color:var(--muted);font-size:10px}.createGrid{display:grid;grid-template-columns:1fr 1fr 1.25fr 120px auto;gap:10px;align-items:end}.createGrid button{height:46px;background:var(--green);color:#fff}.memberGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.memberCard{padding:17px;border:1px solid var(--line);border-radius:15px;background:#fff}.memberCard.disabled{opacity:.6}.memberHead{display:flex;justify-content:space-between;gap:10px}.memberHead strong,.memberHead small{display:block}.memberHead small{margin:4px 0 0;color:var(--muted);font-size:10px}.memberHead>b{font-size:9px;color:var(--muted)}.onlineDot{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:#aab2ad}.onlineDot.on{background:#43bd78;box-shadow:0 0 0 4px #dff2e7}.memberCard dl{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:15px 0}.memberCard dl div{padding:9px;border-radius:9px;background:#f5f7f4}.memberCard dt{color:var(--muted);font-size:8px}.memberCard dd{margin:5px 0 0;font-size:11px;font-weight:800}.memberActions{display:flex;gap:6px}.memberActions form{flex:1}.memberActions button{width:100%;padding:8px;font-size:10px}.resetForm{display:grid;grid-template-columns:1fr auto;gap:6px;margin-top:7px}.resetForm input,.resetForm button{padding:8px;font-size:10px}.deviceList{display:grid;gap:7px}.deviceRow{display:grid;grid-template-columns:minmax(0,1fr) 90px auto;gap:12px;align-items:center;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}.deviceRow.pending{border-color:#e8c663;background:#fffaf0}.deviceRow.revoked{opacity:.55}.deviceRow strong,.deviceRow span{display:block}.deviceRow span{margin-top:4px;color:var(--muted);font-size:10px}.deviceRow>b{font-size:9px;color:var(--muted)}.deviceActions button{padding:8px 10px;font-size:10px}.deviceActions .approve{border-color:var(--green);background:var(--green);color:#fff}.historyList{display:grid}.historyList>div{display:grid;grid-template-columns:14px 1fr 1fr 100px 44px;gap:8px;align-items:center;padding:9px 3px;border-bottom:1px solid var(--line);font-size:11px}.historyList i{width:8px;height:8px;border-radius:50%;background:#b5bbb7}.historyList i.ok{background:#43bd78}.historyList i.ng{background:#d75b50}.historyList span,.historyList time{color:var(--muted)}.empty{color:var(--muted);font-size:12px}.privateLinks{display:flex;gap:7px;margin-left:auto}.privateLinks a{padding:5px 8px;font-size:9px}
@media(max-width:760px){.authShell{padding-top:6vh}.authCard{padding:23px 19px}.accessShell{width:calc(100% - 20px);padding-top:16px}.accessHeader{align-items:flex-start}.accessHeader h1{font-size:25px}.accessHeader nav{display:grid}.accessSection{padding:17px 13px}.accessTitle{display:block}.accessTitle>span{display:block;margin-top:5px}.createGrid{grid-template-columns:1fr 1fr}.createGrid label:nth-of-type(3){grid-column:1/-1}.createGrid button{grid-column:1/-1}.memberGrid{grid-template-columns:1fr}.memberCard dl{grid-template-columns:repeat(2,1fr)}.deviceRow{grid-template-columns:1fr auto}.deviceRow>b{grid-column:2}.deviceActions{grid-column:1/-1}.deviceActions button{width:100%}.historyList>div{grid-template-columns:12px 1fr 74px 35px}.historyList span{grid-column:2}.historyList time{grid-column:3;grid-row:1}.historyList b{grid-column:4;grid-row:1}.privateLinks{margin:12px 0 0}}
