:root{--yellow:#ffc72c;--yellow-d:#e5ac00;--black:#111111;--black-2:#1c1c1c;--black-3:#2a2a2a;--text:#1a1a1a;--muted:#8a8a8a;--bg:#f5f5f2}
*{box-sizing:border-box}
body{margin:0;font-family:Quicksand,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--bg);min-height:100vh}
.muted{color:var(--muted);font-size:.9rem}.error{color:#b42318;background:#fdecea;padding:.5rem .75rem;border-radius:6px;margin:0}
a{color:inherit}

/* login */
body.login{display:grid;place-items:center;background:radial-gradient(circle at 20% 15%,#2b2b2b 0,var(--black) 55%)}
.card{background:#fff;padding:2.25rem 2rem;border-radius:12px;box-shadow:0 12px 40px #0008;width:360px;display:grid;gap:.85rem;border-top:6px solid var(--yellow)}
.card h1{margin:0;font-size:1.8rem;letter-spacing:-.5px}
.card h1::before{content:"";display:inline-block;width:.7em;height:.7em;background:var(--yellow);border-radius:50%;margin-right:.4em;box-shadow:0 0 0 3px var(--black)}
label{display:grid;gap:.3rem;font-size:.85rem;font-weight:600}
input{padding:.6rem .7rem;border:1px solid #d6d6d0;border-radius:6px;font:inherit;background:#fafaf8}
input:focus{outline:2px solid var(--yellow);border-color:var(--yellow-d);background:#fff}
button{padding:.6rem 1.1rem;border:0;border-radius:6px;background:var(--yellow);color:var(--black);font:inherit;font-weight:700;cursor:pointer;transition:background .15s}
button:hover{background:var(--yellow-d)}
button.link{background:none;color:var(--yellow);padding:.4rem .7rem;border:1px solid var(--yellow)}
button.link:hover{background:var(--yellow);color:var(--black)}

/* shell */
body:not(.login){display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:1rem;padding:.6rem 1.25rem;background:var(--black);color:#fff;border-bottom:3px solid var(--yellow)}
.topbar strong{font-size:1.15rem;letter-spacing:.5px}
.topbar strong::before{content:"";display:inline-block;width:.6em;height:.6em;background:var(--yellow);border-radius:50%;margin-right:.5em}
.topbar .muted{color:#c9c9c9}
.spacer{flex:1}
.layout{display:flex;flex:1;min-height:0}
.menu{width:270px;background:var(--black-2);color:#e6e6e6;padding:.75rem .5rem;overflow:auto}
.menu .muted{color:#888;padding:0 .6rem}
.menu a,.menu summary{display:block;padding:.45rem .7rem;color:#e6e6e6;text-decoration:none;border-radius:6px;cursor:pointer;border-left:3px solid transparent}
.menu a:hover,.menu summary:hover{background:var(--black-3);border-left-color:var(--yellow)}
.menu summary{font-weight:700}
.menu > details > summary{color:var(--yellow);text-transform:uppercase;font-size:.78rem;letter-spacing:1px;margin-top:.5rem}
.menu a.active{background:var(--yellow);color:var(--black);font-weight:700}
.menu .sub{margin-left:.75rem}
.content{flex:1;padding:0;position:relative;overflow:auto;transform:translateZ(0)} /* transform makes the apps' position:fixed layout (drawer/toolbar) relative to this area */
.placeholder{padding:2rem;font-size:1rem}
.topbar select{background:var(--black-3);color:#fff;border:1px solid #555;border-radius:6px;padding:.35rem .5rem;font:inherit}
.topbar select:focus{outline:2px solid var(--yellow)}

/* notifications (contract C11): bell + list; the notification itself is shown by the application */
.notifications{position:relative}
.notifications[hidden],.notifications-panel[hidden],.badge[hidden]{display:none}
.bell{position:relative;background:var(--black-3);color:#fff;border:1px solid #555;border-radius:50%;width:2.2rem;height:2.2rem;padding:0;font-size:1.1rem;display:grid;place-items:center}
.bell:hover{background:var(--black-3);border-color:var(--yellow)}
.badge{position:absolute;top:-.35rem;right:-.35rem;min-width:1.1rem;height:1.1rem;padding:0 .25rem;border-radius:.55rem;background:var(--yellow);color:var(--black);font-size:.7rem;font-weight:700;line-height:1.1rem;text-align:center}
.notifications-panel{position:absolute;right:0;top:calc(100% + .5rem);z-index:10;width:380px;max-width:90vw;max-height:500px;overflow-y:auto;background:#fff;color:var(--text);border-radius:8px;box-shadow:0 6px 24px #0004}
.notifications-panel h3{margin:0;padding:.8rem 1rem;font-size:.95rem;border-bottom:1px solid #eee}
.notifications-panel .empty{padding:1rem;text-align:center;color:var(--muted)}
.notifications-panel .item{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #f0f0f0;border-radius:0;padding:.65rem 1rem;font-weight:400;color:var(--text)}
.notifications-panel .item:hover{background:#f7f7f4}
.notifications-panel .item.unread .title{font-weight:700}
.notifications-panel .item .date{display:block;font-size:.75rem;color:#999}

/* static pages of the shell menu */
.page h1{margin:0 0 .25rem}.page h2{margin:1.5rem 0 .5rem;font-size:1.1rem}
.page .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:1rem}
.page .stat{background:#fff;border-radius:10px;padding:1rem 1.1rem;border-top:4px solid var(--yellow);box-shadow:0 1px 4px #0001;display:grid;gap:.3rem}
.page .stat span{color:var(--muted);font-size:.85rem}.page .stat strong{font-size:1.5rem}
.page table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 4px #0001;margin-top:1rem}
.page th,.page td{text-align:left;padding:.65rem .9rem;border-bottom:1px solid #eee}
.page th{background:var(--black-2);color:#fff;font-size:.85rem}
.menu .app-icon{margin-right:.5rem;font-size:1.1em;vertical-align:middle;color:var(--yellow)}