.login-page { display:grid; place-items:center; min-height:100dvh; padding:24px; }
.login-card { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:32px; width:min(100%,440px); }
.account-brand { color:var(--accent); font:600 24px var(--font-head); }
.login-card h1 { font-size:26px; }
.login-card input { display:block; width:100%; }
.login-card button { margin-top:22px; width:100%; }
[hidden] { display:none!important; }
.account-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:22px; align-items:start; }
.account-grid input,.account-grid select { width:100%; }
.account-row { padding:14px 0; border-bottom:1px solid var(--border-soft); display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.account-row strong { flex:1; overflow-wrap:anywhere; }
.share-note { color:var(--muted); font-size:13px; line-height:1.6; }
.public-page { display:block; }
.public-main { width:min(1100px,100%); margin:auto; padding:28px; }
.public-header { display:flex; justify-content:space-between; gap:20px; margin-bottom:30px; }
.public-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr)); gap:18px; }
.public-gallery button { min-height:100px; background:var(--panel); color:var(--text); border:1px solid var(--border); text-align:left; font-size:17px; }
#public-frame { width:100%; height:70dvh; border:1px solid var(--border); border-radius:14px; background:white; }
#public-json { white-space:pre-wrap; overflow-wrap:anywhere; }
html[data-role=user] .shell-create,html[data-role=user] .apps-create,html[data-role=user] #edit-bi-btn { display:none; }

.public-gallery .public-tile { aspect-ratio:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:18px; border-radius:14px; text-align:center; font-size:14px; }
.public-tile:hover { background:var(--accent-soft); border-color:var(--accent); }
.public-tile:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.public-tile strong { overflow-wrap:anywhere; }
.public-tile-icon { display:grid; place-items:center; width:56px; height:56px; border-radius:14px; color:var(--accent); background:var(--accent-soft); }
.public-tile-icon svg { width:30px; height:30px; }
.public-tile-label { font-size:11px; color:var(--muted); }
#public-message:not(:empty) { padding:14px; border:1px solid var(--border); background:var(--panel); border-radius:10px; }
.public-header { flex-wrap:wrap; }
@media(max-width:500px) { .public-main { padding:18px; } .public-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .public-gallery .public-tile { padding:12px; gap:10px; font-size:12px; } }
.public-tile-icon img { width:100%; height:100%; object-fit:contain; border-radius:12px; }