:root{--bg:#004D66;--accent:#FECB00;--accent-text:#004D66}
html,body,#root{height:100%;margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--accent)}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
.logo{width:200px;height:200px;margin-bottom:24px}
.top-banner{width:100%;display:flex;align-items:center;gap:16px;padding:12px 24px;background:#004D66;color:#FECB00;box-sizing:border-box}
.top-banner .banner-logo{width:56px;height:auto}
.top-banner .banner-title{font-size:18px;margin:0;color:var(--accent)}
.layout{display:flex;height:calc(100vh - 76px);overflow:hidden}
.sidebar{width:clamp(140px,18vw,240px);padding:20px;background:var(--bg);height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;overflow:auto;-webkit-overflow-scrolling:touch}
.content{flex:1;overflow:auto;height:100%;-webkit-overflow-scrolling:touch}
.content-inner{padding:40px}
.pm-image{max-width:100%;height:auto;border-radius:8px;margin-top:16px;display:block}
.primary{background:var(--accent);color:var(--accent-text);border:none;padding:12px 18px;border-radius:6px;font-weight:bold;cursor:pointer}
h1{font-size:20px;margin:0 0 16px}
h2{font-size:20px;margin:0 0 16px}

/* User entry in sidebar */
.sidebar-bottom{padding-top:12px;display:flex;flex-direction:column;gap:8px;align-items:stretch}
.user-entry{display:flex;align-items:center;gap:8px;background:transparent;border:none;color:var(--accent);cursor:pointer;padding:6px;border-radius:6px;justify-content:flex-start}
.user-entry:hover{background:rgba(255,255,255,0.02)}
.user-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}
.user-name{font-size:14px}
.sidebar-logout{width:100%}
.sidebar .primary{width:100%}

/* Card thumbnail for projects and usecases */
.card{display:flex;gap:12px;align-items:flex-start}
.card-thumb{width:120px;max-height:80px;height:auto;object-fit:contain;border-radius:6px;margin:0;flex:0 0 120px;align-self:flex-start;background:#f6f6f6}
.card .card-body{flex:1}

/* Sidebar link active state */
.sidebar a{display:block;padding:6px 4px;border-radius:4px}
.sidebar a:hover{background:rgba(255,255,255,0.02)}
.sidebar a.active{background:rgba(254,203,0,0.12);color:var(--accent-text);font-weight:600}