*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-height:100vh;background:
 radial-gradient(900px 480px at 0 -10%,rgba(215,25,32,.09),transparent 65%),
 radial-gradient(700px 420px at 100% 0,rgba(245,181,27,.13),transparent 60%),var(--bg);
 color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:var(--poj-red);text-decoration:none}
a:hover{text-decoration:underline}
.hidden{display:none!important}
.muted{color:var(--muted)!important}.tiny{font-size:12px}.mono{font-family:"SFMono-Regular",Consolas,monospace}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Login */
#login-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:24px;background:
 radial-gradient(circle at 15% 5%,rgba(215,25,32,.18),transparent 32%),
 radial-gradient(circle at 90% 90%,rgba(245,181,27,.18),transparent 30%),#17120f}
.auth-card{width:min(460px,100%);background:rgba(255,253,249,.97);border:1px solid rgba(255,255,255,.25);border-radius:30px;box-shadow:0 35px 90px rgba(0,0,0,.42);padding:38px;text-align:center;position:relative;overflow:hidden}
.auth-card::before{content:"";position:absolute;inset:0 0 auto;height:7px;background:linear-gradient(90deg,var(--poj-red),var(--poj-gold),var(--poj-red))}
.auth-card img{width:min(250px,75%);height:auto;max-height:220px;object-fit:contain;margin:0 auto 8px;display:block}
.auth-card h1{font-size:25px;color:#17120f;letter-spacing:-.03em}.auth-card p{color:#74695f;margin:7px 0 23px}
.auth-card input{background:#fff;color:#211b17;border:1.5px solid #dfd5ca}
.auth-card input:focus{border-color:var(--poj-red);box-shadow:var(--focus)}
.auth-error{padding:10px 12px;border-radius:10px;background:#fff0f1;color:#a90f16;font-weight:700;font-size:13px;margin-bottom:12px}

/* Shell */
#app-shell{min-height:100vh;display:flex;flex-direction:column}
#topbar{position:sticky;top:0;z-index:500;background:color-mix(in srgb,var(--panel) 91%,transparent);backdrop-filter:blur(18px) saturate(170%);border-bottom:1px solid var(--border);box-shadow:var(--shadow-xs)}
.topbar-inner{width:min(1680px,100%);margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 22px;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:11px;min-width:210px}
.brand img{height:56px;width:auto;max-width:130px;object-fit:contain}
.brand-copy{display:flex;flex-direction:column;line-height:1.15}.brand-copy strong{font-size:15px;color:var(--text-strong);letter-spacing:-.02em}.brand-copy span{font-size:11px;color:var(--muted);font-weight:650;text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
#user-chip{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:var(--pill);background:var(--panel-soft);border:1px solid var(--border);font-size:12.5px;font-weight:700;white-space:nowrap}
.role-dot{width:8px;height:8px;border-radius:50%;background:var(--poj-red);box-shadow:0 0 0 3px rgba(215,25,32,.12)}
#nav-scroll{flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;touch-action:pan-x;overscroll-behavior-inline:contain;cursor:grab}#nav-scroll::-webkit-scrollbar{height:5px}#nav-scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}#nav-scroll.is-dragging{cursor:grabbing;user-select:none}
#nav-tabs{list-style:none;display:flex;gap:4px;align-items:center;width:max-content;margin-left:auto}
.nav-btn{border:0;background:transparent;color:var(--muted);border-radius:var(--pill);padding:9px 13px;font-size:12.5px;font-weight:720;white-space:nowrap;transition:.16s var(--ease)}
.nav-btn:hover{background:var(--panel-strong);color:var(--text-strong);transform:translateY(-1px)}
.nav-btn.active{background:linear-gradient(180deg,#e8272e,var(--poj-red-dark));color:white;box-shadow:0 7px 18px rgba(215,25,32,.23)}
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;margin-left:5px;border-radius:99px;background:var(--poj-red);color:#fff;font-size:10px;font-weight:850;box-shadow:0 3px 9px rgba(215,25,32,.24)}.nav-btn.active .nav-badge{background:#fff;color:var(--poj-red)}
.topbar-actions{display:flex;gap:7px;flex:0 0 auto}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--panel);color:var(--text);display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-xs);font-size:17px}
.icon-btn:hover{border-color:var(--poj-red);color:var(--poj-red);transform:translateY(-1px)}
.settings-toggle{align-items:center;cursor:pointer}.settings-toggle>span{display:flex;flex-direction:column}.settings-toggle input{flex:0 0 auto}

#main-content{width:min(1500px,100%);margin:0 auto;flex:1;padding:28px 24px 48px}
.view{animation:viewIn .28s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.view-header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:21px;padding-bottom:15px;border-bottom:1px solid var(--border);position:relative}
.view-header::after{content:"";position:absolute;left:0;bottom:-1px;width:86px;height:3px;border-radius:10px;background:linear-gradient(90deg,var(--poj-red),var(--poj-gold))}
.view-title h2{font-size:clamp(22px,3vw,30px);color:var(--text-strong);letter-spacing:-.035em;line-height:1.1}.view-title p{color:var(--muted);font-size:14px;margin-top:6px;max-width:75ch}
.view-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}

#footer{padding:28px 20px 34px;border-top:1px solid var(--border);background:var(--panel);text-align:center;color:var(--muted);font-size:12px}
#footer img{height:42px;width:auto;max-width:150px;object-fit:contain;margin-bottom:7px}
#footer-links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:10px}
#footer-links a{display:inline-flex;align-items:center;padding:6px 10px;border:1px solid var(--border);border-radius:var(--pill);color:var(--muted);background:var(--panel-soft);font-weight:650}

/* Notepad */
#notepad-panel{position:fixed;right:22px;bottom:76px;z-index:1600;width:min(380px,calc(100vw - 28px));background:var(--panel);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
#notepad-panel header{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;background:var(--panel-soft);border-bottom:1px solid var(--border)}
#notepad-panel textarea{width:100%;min-height:230px;border:0!important;border-radius:0!important;margin:0!important;box-shadow:none!important;resize:vertical;padding:13px}
#notepad-panel footer{padding:8px 11px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);background:var(--panel-soft)}

@media(max-width:1050px){.brand-copy{display:none}.brand{min-width:auto}.topbar-inner{gap:9px}.nav-btn{padding:8px 11px}.topbar-actions{gap:4px}}
@media(max-width:720px){.topbar-inner{padding:8px 10px;flex-wrap:wrap}.brand img{height:46px}#user-chip{order:3}.topbar-actions{margin-left:auto}#nav-scroll{order:4;flex-basis:100%}#nav-tabs{margin-left:0}.nav-btn{font-size:12px;padding:8px 10px}#main-content{padding:20px 12px 38px}.view-header{align-items:flex-start}.view-actions{width:100%}.view-actions .btn{flex:1}.auth-card{padding:30px 22px}}