/* Exact visual proportions and palette based on Jap! Chrome Extension v1.0.2 */
:root{--cartoon-yellow:#ffd83d;--cartoon-blue:#176ef5;--cartoon-ink:#16223c;--cartoon-paper:#fffef9;font-family:"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif}
*{box-sizing:border-box}html,body{min-height:100%;color:#16223c;font-family:"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif!important}
body{margin:0;background:radial-gradient(circle at 12% 7%,#fff9 0 27px,transparent 28px),radial-gradient(circle at 75% 1%,#fff9 0 28px,transparent 29px),linear-gradient(180deg,#78c9ff 0%,#dff3ff 38%,#fff4bd 100%)!important}
body:before{display:none!important}.wrap{max-width:360px!important;margin:0 auto!important;padding:4px 12px 45px!important;min-height:100vh;position:relative}
.brandHead{height:94px;min-height:94px!important;display:flex;justify-content:space-between;align-items:center;gap:10px;background:linear-gradient(120deg,#ffe978,#ffd83d 60%,#ffcb30)!important;border:2px solid #f0b82c!important;border-radius:26px!important;padding:8px 9px!important;box-shadow:0 6px 0 #a26e2322,0 11px 18px #28467e1e!important}
.brandBox{display:flex;align-items:center;gap:44px;min-width:0}.brandLogo{width:66px!important;height:72px!important;object-fit:contain}.radar{font-size:13px;color:#20b77d;background:#fff;border:2px solid #e4e4bd;border-radius:50%;width:27px;height:27px;display:grid;place-items:center;box-shadow:0 2px 3px #1c346024;animation:blink 2s infinite}@keyframes blink{50%{opacity:.6}}
.langBtn{width:47px;height:36px;flex-shrink:0;border-radius:24px!important;background:linear-gradient(#fff,#fff4d4)!important;color:#16223c!important;border:1px solid #e6d4a1!important;box-shadow:0 3px 0 #a7772040!important;padding:4px!important;font-size:11px}
.card{background:#fffef9!important;border:2px solid #e6c453!important;border-top:3px solid #f8aa23!important;border-radius:22px!important;box-shadow:0 7px 0 #1f325712,0 18px 30px #28467e1e!important;margin-top:12px!important;padding:14px 12px 13px!important}
.card h2{font-size:21px!important;letter-spacing:-.4px;margin:7px 0 8px!important;color:#16223c}.eyebrow{display:inline-block;font-size:9px;letter-spacing:.07em;font-weight:900;color:#94651b;background:#fff0ad;border:1px solid #efce64;border-radius:15px;padding:4px 8px;margin:4px 0}
.muted{font-size:12px!important;line-height:1.6;color:#65718b!important}.grid{display:grid;grid-template-columns:1fr!important;gap:10px}.roleChoice{min-height:58px!important}
button{font-family:inherit;font-size:11px;background:linear-gradient(180deg,#3988ff,#176ef5 70%,#0753c7)!important;border:2px solid #0b56d0!important;color:white!important;border-radius:14px!important;box-shadow:0 4px 0 #064aa7!important;font-weight:900;cursor:pointer;padding:10px}
button.secondary{background:linear-gradient(180deg,#fffef9,#fff1b9)!important;border:1px solid #e6c453!important;color:#775722!important;box-shadow:0 3px 0 #cbb86b55!important}
input{background:white!important;border:2px solid #d7ddeb!important;border-radius:14px!important;min-height:39px;padding:9px 11px!important;font-size:13px!important;box-shadow:inset 0 1px 3px #17213b0a}label{font-size:11px;font-weight:700;color:#65718b}.actions{display:flex;flex-wrap:wrap;gap:8px}.actions button{flex:1}.item{background:white;border:1px solid #d9e4f1;border-radius:14px;padding:12px;margin:10px 0}.hide{display:none!important}.error{color:#b42318}
@media(max-width:380px){.wrap{padding-left:10px!important;padding-right:10px!important}.brandBox{gap:35px}}

/* Jap! Web responsive layout — preserve original extension theme */
html{width:100%;overflow-x:hidden}
body{width:100%;overflow-x:hidden}
.wrap{width:100%!important;max-width:1120px!important;padding:clamp(8px,2.5vw,24px)!important;margin:0 auto!important;min-height:100dvh}
.brandHead{width:100%;max-width:100%;}
.card{width:100%;min-width:0;overflow-wrap:anywhere}
.grid{min-width:0}
input,button{max-width:100%;min-width:0}
.actions button{flex:1 1 135px}
.item{min-width:0}
.item p{overflow-wrap:anywhere}
/* Phones: match the compact Chrome extension appearance */
@media(max-width:599px){
 .wrap{max-width:430px!important;padding:4px 12px 36px!important}
 .brandHead{height:94px;min-height:94px!important}
 .brandBox{gap:clamp(15px,10vw,44px)}
 .card{padding:14px 12px 13px!important}
 .grid{grid-template-columns:1fr!important}
 .roleChoice{min-height:58px!important}
 .card h2{font-size:21px!important}
}
/* Tablets: same Jap! design with comfortable proportions */
@media(min-width:600px) and (max-width:1023px){
 .wrap{max-width:780px!important;padding:18px 22px 48px!important}
 .brandHead{height:108px;min-height:108px!important;padding:12px 18px!important}
 .brandBox{gap:40px}
 .brandLogo{width:82px!important;height:86px!important}
 .card{padding:22px 24px!important;margin-top:18px!important}
 .card h2{font-size:26px!important}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .muted{font-size:14px!important}
 button{font-size:13px;padding:12px 14px}
 input{font-size:15px!important;min-height:46px}
 label{font-size:13px}
}
/* PCs: wider workspace, original palette and components */
@media(min-width:1024px){
 .wrap{max-width:1100px!important;padding:26px 30px 64px!important}
 .brandHead{height:116px;min-height:116px!important;padding:14px 24px!important}
 .brandBox{gap:46px}
 .brandLogo{width:92px!important;height:96px!important}
 .radar{width:30px;height:30px}
 .langBtn{width:55px;height:40px;font-size:13px}
 .card{padding:26px 30px!important;margin-top:20px!important}
 .card h2{font-size:29px!important}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px}
 .roleChoice{min-height:72px!important}
 .muted{font-size:14px!important}
 button{font-size:14px;padding:13px 18px}
 input{font-size:15px!important;min-height:48px}
 label{font-size:13px}
 #login,#admin{max-width:680px;margin-left:auto;margin-right:auto}
 #vault .item{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
 #vault .item .actions{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){.radar{animation:none}}