.home-page { color: var(--ui-white); }
.home-page * { box-sizing: border-box; }
.home-workspace { margin-left: var(--database-sidebar-width); padding: calc(var(--database-header-height) + 17px) 22px 28px; }
body.home-page.database-navigation-collapsed .home-workspace { margin-left: var(--database-sidebar-collapsed-width); padding-left: 22px; }
.home-title { max-width: 900px; margin: 0 auto 17px; padding: 12px 14px; border: .7px solid var(--ui-line); border-radius: 5px; background: var(--ui-carbon); }
.home-title h2 { margin: 0 0 7px; color: var(--ui-blue); font: 700 21px var(--display-font); text-transform: uppercase; letter-spacing: .07em; }
.home-title p, .home-account-intro { margin: 0; color: #c5d3de; font-size: 12px; line-height: 1.6; }
.home-sections { display: grid; grid-template-columns: 1fr; align-items: start; gap: 17px; max-width: 900px; margin: auto; }
.home-section { border: .7px solid var(--ui-blue); background: var(--ui-navy); border-radius: 5px; overflow: hidden; }
.home-section h3 { margin: 0; padding: 10px 12px; border-bottom: .7px solid var(--ui-blue); background: var(--ui-slate); color: #cfe7ff; font: 700 13px var(--display-font); letter-spacing: .08em; text-align: center; }
.home-navigation { display: grid; gap: 7px; padding: 14px; }
.home-navigation a, .home-account-link { display: block; padding: 10px 12px; border: .7px solid var(--ui-blue); border-radius: 3px; background: var(--ui-carbon); color: white; font: 600 12px var(--body-font); text-align: center; text-decoration: none; }
.home-navigation a:hover, .home-account-link:hover { background: var(--ui-blue); }
.home-account-link { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); padding: 6px 10px; font-size: 10px; }
.home-account { scroll-margin-top: calc(var(--database-header-height) + 15px); }.home-account-intro { padding: 13px 14px 0; font-size: 11px; }
.home-account .shared-database-profile { position: static; transform: none; }
.home-account .shared-database-profile > summary { display: none; }
.home-account .shared-database-profile-menu { position: static; width: 100%; min-width: 0; max-width: none; padding: 14px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.home-account .shared-account-login, .home-account .shared-account-user { gap: 10px; }
.home-account .shared-account-login label { font-size: 10px; gap: 5px; }
.home-account .shared-account-login input { min-height: 36px; padding: 8px; background: var(--ui-slate); font-size: 13px; }
.home-account .shared-account-password input { padding-right: 52px; }
.home-account .shared-database-profile-menu button, .home-account .shared-profile-link { min-height: 35px; font-size: 11px; background: var(--ui-carbon); }
.home-account .shared-account-password-toggle { width: auto; min-height: 28px!important; font-size: 10px!important; }
.home-account .shared-database-profile-menu button:hover, .home-account .shared-profile-link:hover { background: var(--ui-blue); }
.home-account .shared-account-status { font-size: 11px; line-height: 1.5; }
.home-account .shared-account-separator { font-size: 10px; }
.home-account [hidden] { display: none!important; }
.home-account .shared-account-user p { font-size: 13px; }
.home-workspace a:focus-visible, .home-workspace button:focus-visible, .home-workspace input:focus-visible { outline: 2px solid #a7d7ff; outline-offset: 3px; }
@media(max-width: 850px) { .home-sections { grid-template-columns: 1fr; max-width: 520px; }.home-title { max-width: 520px; }.home-page { --database-sidebar-width: 145px; --database-brand-width: 145px; }.home-page .database-header h1 { font-size: 12px; padding-right: 65px; } }
@media(max-width: 500px) { .home-page { --database-sidebar-width: 110px; --database-brand-width: 110px; }.home-workspace { padding-left: 10px; padding-right: 10px; }.home-page .database-sidebar nav a { font-size: 10px; }.home-page .database-sidebar h2 { font-size: 11px; }.home-page .database-header h1 { font-size: 9px; letter-spacing: .03em; }.home-title h2 { font-size: 17px; }.home-title p { font-size: 11px; } }
.home-header-actions { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; }
.home-header-actions button, .home-profile-menu a, #developer-options-panel button, #laptop-preview-dialog button { border: .7px solid var(--ui-blue); border-radius: 3px; padding: 8px 10px; background: var(--ui-carbon); color: white; font: 600 10px var(--body-font); cursor: pointer; text-decoration: none; }
.home-header-actions [hidden] { display: none!important; }
.home-profile-menu { position: relative; }.home-profile-menu summary { width: 41px; height: 41px; border: 1.4px solid var(--ui-blue); border-radius: 50%; cursor: pointer; list-style: none; overflow: hidden; background: var(--ui-navy); }.home-profile-menu summary::-webkit-details-marker { display: none; }.home-profile-menu summary img { width: 100%; height: 100%; object-fit: cover; }
.home-profile-menu > div { position: absolute; right: 0; top: 50px; min-width: 180px; padding: 12px; border: 1px solid var(--ui-blue); border-radius: 5px; background: var(--ui-navy); box-shadow: 0 8px 25px #0008; }.home-profile-menu > div p { margin: 0 0 10px; text-align: center; font-size: 12px; }.home-profile-menu a, .home-profile-menu button { display: block; width: 100%; margin-top: 7px; text-align: center; }
.home-header-actions button:hover, .home-profile-menu a:hover, #developer-options-panel button:hover, #laptop-preview-dialog button:hover { background: var(--ui-blue); }
.home-header-actions :focus-visible { outline: 2px solid #a7d7ff; outline-offset: 3px; }
@media(max-width: 850px) { .home-page .database-header h1 { visibility: hidden; }.home-header-actions { gap: 6px; }#developer-options-button { max-width: 145px; font-size: 9px; } }
/* Developer controls stay attached to the header without blocking the page. */
#developer-options-panel[hidden] { display: none; }
#developer-options-panel :focus-visible { outline: 2px solid #a7d7ff; outline-offset: 3px; }
/* The blue border follows the 16:9 page, not the surrounding black stage. */
#laptop-preview-dialog::backdrop { background: #000; }
.laptop-preview-toolbar { background: #000; color: #a7d7ff; border-bottom-color: #173a56; }
#laptop-preview-stage { display: flex; align-items: center; justify-content: center; background: #000; }
.laptop-window-frame { position: relative; flex: none; box-sizing: content-box; overflow: hidden; outline: 3px solid #3d85c6; box-shadow: 0 0 0 5px #0f202f; }
#laptop-preview-stage iframe { left: 0; top: 0; }
@media(max-width: 500px) { #developer-options-panel { right: 12px; }.laptop-preview-toolbar { font-size: 10px; } }
.home-title,.home-sections { max-width: 460px; text-align:center; }
.home-workspace { text-align:center; }
.home-section h3 { background:var(--ui-blue);color:white; }
.home-account .shared-account-login input,.home-account .shared-account-login label { text-align:center; }
.home-account .shared-account-user { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:center;gap:16px; }
.shared-account-identity { display:grid;gap:7px;text-align:center;min-width:0; }.shared-account-identity p { overflow-wrap:anywhere; }.shared-account-actions { display:grid;gap:7px;min-width:0; }
.home-account .shared-account-user-avatar {width:70px;height:70px;}
@media(max-width:850px){.home-title,.home-sections{max-width:460px;}}
@media(max-width:500px){.home-account .shared-account-user{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8px;}.home-account .shared-account-user-avatar{width:48px;height:48px;}}
/* Larger identity, with centered button labels beside it. */
.home-account .shared-account-user-avatar { width:96px;height:96px; }
.home-account .shared-account-user .shared-account-identity p { font-size:14px;line-height:1.4; }
.home-account .shared-account-user .shared-account-display-name { font-size:16px;font-weight:600; }
.home-account .shared-account-actions { align-self:center; }
.home-account .shared-profile-link,.home-account .shared-account-actions button,.home-profile-menu a,.home-profile-menu button { display:flex;align-items:center;justify-content:center;min-height:38px;padding:8px 12px;line-height:1.3;text-transform:uppercase; }
.home-profile-menu > div { min-width:240px;padding:14px; }
.home-dropdown-avatar { display:block;width:96px;height:96px;margin:0 auto 12px;border:1.4px solid var(--ui-blue);border-radius:50%;object-fit:cover;background:var(--ui-slate); }
.home-profile-menu > div p { font-size:14px;line-height:1.4;overflow-wrap:anywhere; }
.home-profile-menu #home-profile-display-name { font-size:16px;font-weight:600; }
#home-profile-display-name:empty { display:none; }
.home-profile-menu a,.home-profile-menu button { border:.7px solid var(--ui-blue);border-radius:3px;background:var(--ui-carbon);font:600 11px var(--body-font);line-height:1.3; }
@media(max-width:500px){.home-account .shared-account-user-avatar{width:75px;height:75px;}.home-account .shared-account-user .shared-account-identity p{font-size:14px;}.home-account .shared-account-user .shared-account-display-name{font-size:15px;}}
.home-navigation [hidden] { display: none!important; }