:root {
  --gm-bg: #f4f8ff;
  --gm-surface: #fff;
  --gm-border: #dce5f3;
  --gm-text: #202124;
  --gm-muted: #5f6368;
  --gm-blue: #087cf5;
  --gm-blue-soft: #e8f2ff;
  --gm-compose: #c7f2ff;
  --gm-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px rgba(60, 64, 67, 0.15);
  --gm-radius: 16px;
  font-family: "Google Sans", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--gm-bg);
  color: var(--gm-text);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

.gm-shell { display: flex; flex-direction: column; min-height: 100vh; }

.gm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--gm-bg);
}

.gm-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 240px;
  font-size: 22px;
  color: var(--gm-muted);
}
.gm-logo-mark {
  width: 40px; height: 40px;
  display: grid; place-items: center;
}
.gm-logo-mark svg { width: 32px; height: 32px; }
.gm-logo-image { width: 52px; height: 44px; object-fit: contain; }

.gm-search-wrap { flex: 1; max-width: 720px; }
.gm-search {
  display: flex;
  align-items: center;
  background: #eaf1fb;
  border-radius: 24px;
  padding: 0 16px;
  height: 48px;
  box-shadow: inset 0 0 0 1px transparent;
}
.gm-search:focus-within {
  background: #fff;
  box-shadow: var(--gm-shadow);
}
.gm-search input {
  border: 0; outline: 0; flex: 1; background: transparent;
  font-size: 16px; margin-left: 8px;
}

.gm-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.gm-icon-btn {
  width: 40px; height: 40px;
  border: 0; background: transparent;
  border-radius: 50%;
  cursor: pointer;
  color: var(--gm-muted);
  display: grid; place-items: center;
}
.gm-icon-btn:hover { background: rgba(60,64,67,.08); }

.gm-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #f28b82;
  color: #fff;
  display: grid; place-items: center;
  font-weight: 600;
  margin-left: 8px;
}

.gm-body { display: flex; flex: 1; min-height: 0; }

.gm-rail {
  width: 72px;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.gm-rail-item {
  width: 52px; padding: 8px 0;
  border-radius: 16px;
  text-align: center;
  font-size: 11px;
  color: var(--gm-muted);
  position: relative;
}
.gm-rail-item.active { background: var(--gm-blue-soft); color: var(--gm-blue); font-weight: 600; }
.gm-badge {
  position: absolute; top: 2px; right: 6px;
  background: #d93025; color: #fff;
  font-size: 10px; padding: 1px 5px; border-radius: 8px;
}

.gm-sidebar {
  width: 256px;
  padding: 8px 8px 8px 4px;
}
.gm-mobile-nav { display:none; }
.gm-mobile-more { border-radius:18px 18px 0 0; max-height:82vh; }
.gm-mobile-more-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-content:start; }
.gm-mobile-more-links a { display:flex; gap:10px; align-items:center; padding:12px; border-radius:12px; background:#f4f8ff; color:var(--gm-text); }
.gm-storage-pill { width:128px; flex:none; display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:7px; padding:7px 9px; border:1px solid var(--gm-border); border-radius:12px; background:#fff; color:var(--gm-muted); font-size:11px; white-space:nowrap; }
.gm-storage-pill > i { color:var(--gm-blue); font-size:15px; }
.gm-storage-track { grid-column:1/-1; height:4px; overflow:hidden; border-radius:9px; background:#e8edf5; }
.gm-storage-track > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#08c6de,#087cf5,#5734e8,#ed168c); }
.gm-mobile-storage { grid-column:1/-1; display:grid; grid-template-columns:1fr auto; gap:8px; padding:12px; border:1px solid var(--gm-border); border-radius:12px; background:#fff; color:var(--gm-muted); font-size:12px; }
.gm-mobile-storage strong { color:var(--gm-text); }
.gm-mobile-storage .gm-storage-track { grid-column:1/-1; }
.personal-app-main { padding:28px clamp(12px,3vw,42px) 56px; overflow:auto; }
.personal-app-wrap { width:min(1320px,100%); margin:0 auto; }
.personal-app-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 22px; }
.personal-app-heading h1 { margin:4px 0; font-size:clamp(26px,3vw,36px); }
.personal-app-heading p { margin:0; color:var(--gm-muted); }
.personal-card { padding:22px; border:1px solid var(--gm-border); border-radius:16px; background:#fff; box-shadow:0 4px 18px rgba(34,79,130,.06); }
.personal-card h2 { margin:0 0 18px; font-size:19px; }
.flash-layout { display:block; }
.flash-link-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.flash-link-card { min-width:0; padding:18px; border:1px solid var(--gm-border); border-radius:16px; background:#fff; box-shadow:0 4px 18px rgba(34,79,130,.05); }
.flash-link-open { min-width:0; display:grid; justify-items:start; gap:8px; }
.flash-link-open img,.flash-default-icon { width:48px; height:48px; border-radius:14px; object-fit:cover; background:#edf5ff; display:grid; place-items:center; font-size:24px; color:#087cf5; }
.flash-link-open strong,.flash-domain { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flash-domain { color:var(--gm-muted); font-size:12px; }
.flash-username { display:flex; align-items:center; margin-top:10px; overflow-wrap:anywhere; }
.flash-link-card p { margin:8px 0; color:var(--gm-muted); font-size:13px; overflow-wrap:anywhere; }
.flash-link-card footer { display:flex; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid #edf0f5; }
.flash-link-card footer a,.flash-link-card footer button { border:0; background:none; color:#176bd1; font:inherit; font-size:13px; }
.flash-edit-icon { display:block; width:40px; height:40px; object-fit:cover; margin:0 0 8px; border-radius:8px; }
.flash-empty { grid-column:1/-1; text-align:center; padding:42px 18px; }
.flash-empty i { font-size:34px; color:#ffb000; }
.storage-meter { min-width:150px; display:grid; gap:3px; color:var(--gm-muted); font-size:12px; }
.storage-meter strong { color:var(--gm-text); font-size:16px; }
.storage-meter .progress { height:7px; }
.vault-gate { width:min(460px,100%); margin:30px auto; }
.vault-gate-icon { display:block; color:#087cf5; font-size:36px; margin-bottom:10px; }
.vault-layout { display:block; }
.vault-entry-list { display:grid; gap:12px; min-width:0; }
.vault-entry-list > h2 { display:flex; gap:10px; align-items:center; margin:4px 0; font-size:20px; }
.vault-entry { padding:18px; }
.vault-entry-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.vault-entry-title > div { display:flex; align-items:center; gap:10px; }
.vault-entry-icon { color:#087cf5; font-size:20px; }
.vault-copy-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-top:1px solid #edf0f5; }
.vault-copy-row > span { min-width:0; display:grid; }
.vault-copy-row small { color:var(--gm-muted); font-size:11px; }
.vault-value { overflow-wrap:anywhere; }
.vault-secret { filter:blur(5px); transition:filter .15s; }
.vault-secret:hover,.vault-secret:focus { filter:none; }
.vault-notes { margin:10px 0; color:var(--gm-muted); white-space:pre-wrap; overflow-wrap:anywhere; }
.vault-security-note { margin:18px 0 0; color:var(--gm-muted); font-size:12px; }
.gm-compose {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--gm-compose);
  border: 0;
  border-radius: 16px;
  padding: 14px 24px 14px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
  margin: 8px 0 16px 8px;
}
.gm-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 26px;
  height: 32px;
  border-radius: 0 16px 16px 0;
  font-size: 14px;
  color: var(--gm-text);
}
.gm-nav-item:hover { background: #eceff1; }
.gm-nav-item.active { background: var(--gm-blue-soft); font-weight: 700; color: #174ea6; }
.gm-nav-count { color: var(--gm-muted); font-size: 12px; }

.gm-main {
  flex: 1;
  background: var(--gm-surface);
  border-radius: var(--gm-radius) 0 0 0;
  margin-right: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.gm-toolbar {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--gm-border);
  gap: 8px;
  color: var(--gm-muted);
  font-size: 13px;
}

.gm-tabs {
  display: flex;
  border-bottom: 1px solid var(--gm-border);
}
.gm-tab {
  flex: 1;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--gm-muted);
  border-bottom: 3px solid transparent;
}
.gm-tab.active {
  color: var(--gm-blue);
  border-bottom-color: var(--gm-blue);
  font-weight: 600;
}

.gm-list { flex: 1; overflow: auto; }
.gm-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-bottom: 1px solid #f1f3f4;
  font-size: 14px;
}
.gm-row:hover, .gm-row:focus-within { background:#f2f7ff; box-shadow:inset 1px 0 0 #cbdcf6, inset -1px 0 0 #cbdcf6, 0 1px 2px rgba(40,70,120,.08); z-index:1; }
.gm-row.unread { background:#f6faff; }
.gm-row.unread .gm-subject, .gm-row.unread .gm-from { font-weight: 700; }
.gm-row-star, .gm-row-actions form { margin:0; }
.gm-row-icon { width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:#71809a; cursor:pointer; }
.gm-row-icon:hover, .gm-row-icon:focus-visible { background:#e4efff; color:#176bd1; outline:0; }
.gm-row-icon.is-starred { color:#f59e0b; }
.gm-danger-icon:hover { background:#fff0f0; color:#c5221f; }
.gm-row-content { min-width:0; display:grid; grid-template-columns:minmax(125px, 190px) minmax(0,1fr) 82px; align-items:center; gap:12px; color:inherit; }
.gm-from { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gm-subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gm-text); }
.gm-snippet { color: var(--gm-muted); font-weight: 400; }
.gm-date { text-align: right; color: var(--gm-muted); font-size: 12px; }
.gm-row-actions { display:flex; align-items:center; gap:1px; opacity:.28; transition:opacity .15s ease; }
.gm-row:hover .gm-row-actions, .gm-row:focus-within .gm-row-actions { opacity:1; }
.gm-empty-state { min-height:280px; display:grid; align-content:center; justify-items:center; gap:8px; padding:30px; color:var(--gm-muted); text-align:center; }
.gm-empty-state i { margin-bottom:6px; color:#4aaee9; font-size:40px; }
.gm-empty-state strong { color:#34415a; font-size:16px; }
.gm-empty-state span { font-size:13px; }

.gm-right-rail {
  width: 56px;
  border-left: 1px solid var(--gm-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 12px;
  gap: 16px;
  position: fixed;
  right: 0; top: 64px; bottom: 0;
  background: var(--gm-bg);
}

/* Apps popover */
.apps-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: none;
}
.apps-overlay.open { display: block; }
.apps-popover {
  position: absolute;
  top: 56px; right: 72px;
  width: 320px;
  background: #fff;
  border-radius: 28px;
  box-shadow: var(--gm-shadow);
  padding: 20px 16px 16px;
}
.apps-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 12px;
  font-size: 16px;
  font-weight: 500;
}
.apps-popover-actions { display: flex; gap: 4px; }
.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.apps-built-in-icon { width:48px;height:48px;display:grid;place-items:center;border-radius:15px;font-size:21px; }
.apps-built-in-icon.vault { background:#e4f1ff;color:#087cf5; }
.apps-built-in-icon.flash { background:#fff5d8;color:#ee9b00; }
.apps-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border-radius: 12px;
  text-align: center;
  font-size: 12px;
}
.apps-item:hover { background: #f1f3f4; }
.apps-item img {
  width: 48px; height: 48px;
  border-radius: 12px;
  object-fit: cover;
}

/* Auth pages */
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--gm-bg);
}
.auth-card {
  width: min(420px, 92vw);
  background: #fff;
  border: 1px solid var(--gm-border);
  border-radius: 8px;
  padding: 40px 36px;
  box-shadow: var(--gm-shadow);
}
.auth-card h1 { margin: 0 0 8px; font-size: 24px; font-weight: 400; }
.auth-card p { color: var(--gm-muted); margin-top: 0; }
.signup-card { width: min(450px, 92vw); }
.terms-card { width: min(680px, 94vw); }
.terms-card h1 { font-size:26px; }
.terms-copy { max-height:46vh; overflow:auto; margin:18px 0 20px; padding:18px 20px; border:1px solid var(--gm-border); border-radius:8px; background:#fbfdff; color:#34415a; font-size:14px; line-height:1.65; }
.terms-copy p { margin:0 0 14px; color:inherit; }
.terms-copy p:last-child { margin-bottom:0; }
.terms-copy h2 { margin:18px 0 6px; color:#18233c; font-size:15px; }
.terms-copy h2:first-of-type { margin-top:0; }
.terms-form { margin-top:18px; }
.terms-consent { display:flex; align-items:flex-start; gap:10px; color:var(--gm-text); font-size:14px; line-height:1.5; }
.terms-consent input { width:18px; height:18px; flex:none; margin:1px 0 0; accent-color:var(--gm-blue); }
.terms-actions { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:22px; }
.terms-actions .btn-primary { padding:11px 18px; }
.signup-brand { color: var(--gm-blue); font-size: 20px; font-weight: 600; margin-bottom: 18px; }
.signup-brand img { display: block; width: 82px; height: 64px; object-fit: contain; }
.auth-brand { margin: 0 0 18px; }
.auth-brand img { display: block; width: 82px; height: 64px; object-fit: contain; }
.signup-progress { height: 3px; background: #e8eaed; border-radius: 3px; margin: 0 0 22px; overflow: hidden; }
.signup-progress-fill { display: block; height: 100%; width: 25%; background: var(--gm-blue); transition: width .2s ease; }
.signup-step[hidden] { display: none; }
.signup-step-copy { font-size: 14px; margin-bottom: 18px; }
.signup-address-field { display: flex; align-items: center; gap: 8px; }
.signup-address-field input { flex: 1; min-width: 0; }
.signup-address-field span { color: var(--gm-muted); font-size: 14px; white-space: nowrap; }
.signup-hint { display: block; color: var(--gm-muted); font-size: 12px; margin-top: 7px; }
.signup-suggestions { display: grid; gap: 8px; margin: 0 0 20px; }
.signup-suggestion { text-align: left; border: 1px solid var(--gm-border); background: #fff; border-radius: 4px; padding: 10px 12px; color: var(--gm-blue); font: inherit; cursor: pointer; }
.signup-suggestion:hover { background: #f5f9ff; border-color: var(--gm-blue); }
.signup-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.signup-back { border: 0; background: none; padding: 10px 0; cursor: pointer; }
.signup-back[hidden], .signup-actions button[hidden] { display: none; }
.signup-login-link { margin: 22px 0 0 !important; }
.auth-field { margin-bottom: 16px; }
.auth-field label { display: block; font-size: 12px; color: var(--gm-muted); margin-bottom: 6px; }
.auth-field input {
  width: 100%; padding: 12px;
  border: 1px solid var(--gm-border);
  border-radius: 4px;
  font-size: 16px;
}
.auth-field select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--gm-border);
  border-radius: 4px;
  background: #fff;
  font-size: 16px;
}
.btn-primary {
  background: linear-gradient(110deg, #08bfe5, #087cf5 58%, #592fe3);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 10px 24px;
  font-weight: 500;
  cursor: pointer;
}
.btn-link { color: var(--gm-blue); font-size: 14px; }
.alert { padding: 10px 12px; border-radius: 4px; margin-bottom: 12px; font-size: 14px; }
.alert-error { background: #fce8e6; color: #c5221f; }
.alert-success { background: #e6f4ea; color: #137333; }

/* Admin */
.admin-wrap { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.admin-panel {
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--gm-border);
  padding: 16px;
}
.admin-panel h2 { margin-top: 0; font-size: 18px; }
.admin-section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:14px; }
.admin-section-heading h2 { margin:0 0 4px; }
.admin-section-heading p { margin:0; color:var(--gm-muted); font-size:13px; }
.admin-search { width:min(280px, 100%); padding:10px 12px; border:1px solid var(--gm-border); border-radius:6px; font:inherit; }
.admin-table-wrap { overflow-x:auto; }
.admin-table { width:100%; border-collapse:collapse; font-size:14px; }
.admin-table th, .admin-table td { padding:12px 10px; text-align:left; border-bottom:1px solid #edf0f2; vertical-align:middle; }
.admin-table th { color:var(--gm-muted); font-size:12px; font-weight:600; text-transform:uppercase; }
.admin-table td:first-child strong, .admin-table td:first-child span { display:block; }
.admin-table td:first-child span { margin-top:3px; color:var(--gm-muted); font-size:13px; }
.status-pill { display:inline-block; padding:4px 9px; border-radius:20px; font-size:12px; font-weight:600; }
.status-active { background:#e6f4ea; color:#137333; }
.status-disabled { background:#fce8e6; color:#c5221f; }
.admin-action { border:1px solid var(--gm-border); border-radius:5px; background:#fff; padding:7px 10px; color:var(--gm-blue); cursor:pointer; }
.admin-action.danger { color:#c5221f; }
.gm-toolbar-action { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 10px; border:0; border-radius:5px; background:transparent; color:var(--gm-muted); font:inherit; cursor:pointer; }
.gm-toolbar-action:hover, .gm-toolbar-action.selected { background:var(--gm-blue-soft); color:#174ea6; }
.gm-result-count { margin-left:auto; color:var(--gm-muted); }
.gm-row { min-height:48px; }
.gm-toolbar { flex-wrap:wrap; }
.gm-search input { min-width:0; }
.gm-main > h1, .gm-main > h2 { overflow-wrap:anywhere; }
.gm-compose-main, .gm-message-main, .gm-help-main { align-items:stretch; padding:clamp(18px,3vw,34px); }
.mail-compose-card { width:min(860px,100%); margin:0 auto 0 0; padding:clamp(18px,3vw,30px); border:1px solid #e0eaf8; border-radius:16px; background:linear-gradient(145deg,#fff,#f8fbff 70%,#fcf9ff); box-shadow:0 12px 34px rgba(30,76,145,.08); }
.mail-compose-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.mail-compose-heading h1 { margin:4px 0 0; font-size:26px; font-weight:600; }
.gm-eyebrow { color:#2364ce; font-size:10px; font-weight:700; letter-spacing:.15em; }
.mail-compose-form .form-label { color:#34415a; font-size:13px; font-weight:600; }
.mail-compose-form .form-control, .gm-reply-form .form-control { border-color:#d6e2f3; border-radius:9px; }
.mail-compose-form .form-control:focus, .gm-reply-form .form-control:focus { border-color:#69aafa; box-shadow:0 0 0 .2rem rgba(8,124,245,.15); }
.mail-body-input { min-height:250px; resize:vertical; }
.mail-compose-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding-top:6px; }
.mail-compose-actions .btn-primary, .gm-reply-form .btn-primary { border:0; background:linear-gradient(110deg,#08bfe5,#087cf5 58%,#592fe3); color:#fff; }
.gm-message-main { min-width:0; }
.gm-message-page { width:min(900px,100%); margin:0 auto 0 0; padding:0 clamp(0px,1vw,10px) 40px; }
.gm-message-toolbar { display:flex; align-items:center; gap:12px; margin:0 0 22px; }
.gm-message-folder { color:#72809a; font-size:12px; }
.gm-message-subject { margin:0 0 22px; color:#18233c; font-size:clamp(22px,3vw,30px); font-weight:500; overflow-wrap:anywhere; }
.gm-message-meta { display:flex; align-items:center; gap:12px; padding:16px 0; border-top:1px solid #e8edf6; border-bottom:1px solid #e8edf6; }
.gm-message-avatar { width:42px; height:42px; display:grid; place-items:center; flex:none; border-radius:50%; background:linear-gradient(135deg,#08c5e4,#087cf5 60%,#622fe2); color:#fff; font-weight:700; }
.gm-message-person { min-width:0; display:grid; gap:3px; }
.gm-message-person strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.gm-message-person span, .gm-message-meta time { color:#73809a; font-size:12px; }
.gm-message-meta time { margin-left:auto; text-align:right; }
.gm-message-content { min-height:130px; padding:26px 4px 32px; color:#25334d; font-size:15px; line-height:1.75; overflow-wrap:anywhere; }
.gm-reply-form { padding:20px; border:1px solid #dfe8f7; border-radius:14px; background:linear-gradient(135deg,#f8fcff,#fbf9ff); }
.gm-reply-form .form-label { font-size:13px; font-weight:600; }
.gm-reply-disabled { padding:12px 14px; border-radius:8px; background:#f3f6fb; color:#75819a; font-size:13px; }
.gm-help-page { width:min(1000px,100%); margin:0 auto 0 0; }
.gm-help-hero { display:flex; align-items:center; gap:18px; margin-bottom:24px; padding:24px; border-radius:18px; background:linear-gradient(110deg,#e5f9ff,#e8f1ff 60%,#f2eaff); }
.gm-help-hero > i { color:#197be8; font-size:36px; }
.gm-help-hero h1 { margin:4px 0; color:#18233c; font-size:28px; }
.gm-help-hero p { margin:0; color:#6a7892; font-size:14px; }
.gm-help-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.gm-help-card { padding:21px; border:1px solid #e0e9f7; border-radius:14px; background:#fff; box-shadow:0 8px 24px rgba(32,74,135,.05); }
.gm-help-card > i { color:#1777e7; font-size:23px; }
.gm-help-card h2 { margin:12px 0 8px; font-size:16px; }
.gm-help-card p { min-height:62px; margin:0 0 14px; color:#697894; font-size:13px; line-height:1.6; }
.gm-help-card a { color:#176bd1; font-size:13px; font-weight:600; }
.gm-compose { background:linear-gradient(115deg,#c7f2ff,#dceaff 70%,#eee5ff); color:#123d7a; }
.gm-compose:hover { box-shadow:0 4px 14px rgba(25,94,190,.18); }
.gm-nav-item.active { color:#125fca; }
.gm-right-rail > * { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#41668e; }
.gm-right-rail > *:hover { background:#e5f2ff; color:#087cf5; }

@media (max-width: 960px) {
  .gm-rail, .gm-right-rail { display: none; }
  .gm-storage-pill { display:none; }
  .gm-sidebar { display:none; }
  .gm-compose { display:none; }
  .gm-mobile-nav { position:fixed; z-index:1030; left:0; right:0; bottom:0; height:64px; display:flex; justify-content:space-around; align-items:center; padding:4px 6px calc(4px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--gm-border); box-shadow:0 -3px 16px rgba(30,70,120,.08); }
  .gm-mobile-nav a, .gm-mobile-nav button { min-width:54px; border:0; background:transparent; color:var(--gm-muted); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font:inherit; font-size:10px; }
  .gm-mobile-nav i { font-size:20px; color:#087cf5; }
  .gm-main { margin-right:0; margin-bottom:64px; border-radius:0; }
  .personal-app-main { padding:18px 12px 84px; }
  .flash-layout,.vault-layout { grid-template-columns:1fr; }
  .personal-app-heading { align-items:flex-start; }
  .storage-meter { min-width:110px; }
  .gm-row { grid-template-columns:36px minmax(0,1fr) auto; }
  .gm-row-content { grid-template-columns:minmax(0,1fr) 72px; }
  .gm-from { display:none; }
  .gm-row-actions { opacity:1; }
  .gm-row-actions .gm-row-icon { width:30px; height:30px; }
}

@media (max-width: 640px) {
  .gm-header { padding:8px; gap:6px; flex-wrap:wrap; }
  .gm-logo { min-width:0; font-size:18px; }
  .gm-logo-mark { width:32px; height:32px; }
  .gm-search-wrap { order:3; flex-basis:100%; max-width:none; }
  .gm-header-actions { gap:0; }
  .gm-header-actions .gm-icon-btn { width:36px; height:36px; }
  .gm-row { grid-template-columns:30px minmax(0,1fr); gap:4px; padding:9px 8px; }
  .gm-row-content { grid-column:2; grid-template-columns:minmax(0,1fr) 48px; gap:5px; }
  .gm-row-star { grid-row:1; grid-column:1; }
  .gm-row-actions { grid-column:2; grid-row:2; justify-content:flex-end; margin-top:-4px; }
  .gm-row-actions .gm-row-icon { width:28px; height:28px; }
  .gm-subject { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .gm-date { font-size:11px; }
  .gm-result-count { width:100%; margin:0; text-align:right; }
  .auth-card { padding:28px 22px; }
  .admin-wrap { margin:16px auto; padding:0 12px; }
  .admin-grid { grid-template-columns:1fr; gap:14px; }
  .admin-users-panel { grid-column:1/-1; }
  .admin-section-heading { align-items:stretch; flex-direction:column; }
  .admin-search { width:100%; }
  .admin-table { min-width:680px; }
  .gm-compose-main, .gm-message-main, .gm-help-main { padding:14px 10px 70px; }
  .personal-app-heading { flex-direction:column; gap:10px; }
  .flash-link-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .flash-link-card { padding:13px; }
  .personal-card { padding:17px; }
  .mail-compose-card { padding:18px 14px; border-radius:12px; }
  .mail-compose-heading h1 { font-size:22px; }
  .mail-compose-actions .btn { flex:1 1 auto; }
  .mail-compose-actions .btn-link { flex:0 0 100%; margin:0 !important; text-align:center; }
  .gm-message-page { padding:0 4px 30px; }
  .gm-message-meta { gap:9px; }
  .gm-message-meta time { max-width:100px; font-size:11px; }
  .gm-message-content { padding:20px 2px 26px; font-size:14px; }
  .gm-reply-form { padding:14px; }
  .gm-help-grid { grid-template-columns:1fr; }
  .gm-help-card p { min-height:0; }
}

  /* Admin console */
  .admin-page { background:#f4f8ff; color:#18233c; }
  .admin-layout { min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr); }
  .admin-sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:24px 16px 18px; background:#101a40; color:#eef5ff; }
  .admin-mobile-menu-toggle { display:none; }
  .admin-brand { display:flex; align-items:center; gap:11px; padding:2px 8px 28px; font-size:17px; font-weight:700; }
  .admin-brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:#54d5ed; color:#112b65; font-size:17px; }
.admin-brand-logo { width:44px; height:36px; object-fit:contain; }
.admin-header-brand { display:flex; align-items:center; gap:10px; }
.admin-header-brand img { width:48px; height:42px; object-fit:contain; }
  .admin-nav-label { padding:0 12px 10px; color:#aab9d3; font-size:10px; font-weight:700; letter-spacing:.12em; }
  .admin-nav { display:grid; gap:5px; }
  .admin-nav a { display:flex; align-items:center; gap:12px; min-height:44px; padding:0 12px; border-radius:7px; color:#d0def5; font-size:14px; }
  .admin-nav a > span { width:20px; color:#9dc4ff; text-align:center; font-size:17px; }
  .admin-nav a:hover, .admin-nav a.active { background:#243c76; color:#fff; }
  .admin-nav a.active > span { color:#54d5ed; }
  .admin-sidebar-bottom { margin-top:auto; padding:16px 8px 0; border-top:1px solid #314574; display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; }
  .admin-sidebar-bottom small { display:block; margin-top:4px; color:#aab9d3; text-transform:capitalize; }
  .admin-sidebar-bottom > a { color:#90daf1; font-size:12px; }
  .admin-content { width:min(1400px,100%); margin:0 auto; padding:34px clamp(18px,4vw,56px) 56px; }
  .admin-page-header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:26px; }
  .admin-page-header h1 { margin:5px 0 0; font-size:30px; font-weight:600; }
  .admin-eyebrow, .store-kicker, .profile-kicker { color:#2364ce; font-size:10px; font-weight:700; letter-spacing:.13em; }
  .admin-view-site { padding:9px 13px; border:1px solid #d5e1f3; border-radius:6px; background:#fff; font-size:13px; }
  .admin-welcome { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:28px 30px; border:1px solid #dfe8f6; border-radius:8px; background:linear-gradient(115deg,#e2f3ff,#f2efff 65%,#eff7ff); }
  .admin-welcome h2 { margin:0 0 8px; font-size:22px; font-weight:600; }
  .admin-welcome p { margin:0; color:#596985; }
  .admin-welcome-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:#d6edff; color:#116bd4; font-size:23px; font-weight:700; }
  .admin-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0 34px; }
  .admin-stat { display:grid; gap:12px; padding:19px; border:1px solid #dee7f4; border-radius:8px; background:#fff; }
  .admin-stat > span { color:#687894; font-size:13px; }
  .admin-stat strong { font-size:30px; font-weight:600; }
  .admin-stat a { color:#176bd1; font-size:12px; font-weight:600; }
  .admin-quick-links h2 { margin:0 0 14px; font-size:18px; }
  .admin-area-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .admin-area-link { display:flex; align-items:center; gap:14px; padding:17px; border:1px solid #dee7f4; border-radius:7px; background:#fff; }
  .admin-area-link:hover { border-color:#91baf2; box-shadow:0 4px 14px #17478014; }
  .admin-area-link > span { width:39px; height:39px; display:grid; place-items:center; border-radius:9px; background:#e8f2ff; color:#1b66c6; font-size:18px; }
  .admin-area-link div { flex:1; display:grid; gap:4px; }
  .admin-area-link strong { font-size:14px; }
  .admin-area-link small { color:#70809a; font-size:12px; }
  .admin-area-link b { color:#4a75c6; font-size:18px; }
  .admin-page-panel { margin-bottom:16px; padding:22px; border-radius:8px; }
  .admin-page-panel .admin-section-heading { margin-bottom:20px; }
  .admin-apps-layout { display:grid; grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr); gap:16px; align-items:start; }
  .admin-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .admin-field { display:grid; gap:7px; color:#42536f; font-size:12px; font-weight:600; }
  .admin-field input, .admin-field select, .admin-field textarea { width:100%; min-width:0; padding:11px 12px; border:1px solid #d3def0; border-radius:5px; background:#fff; color:#1d2a45; font-family:inherit; font-size:14px; }
  .admin-field input:focus, .admin-field select:focus, .admin-field textarea:focus { outline:2px solid #b7d5ff; border-color:#4c91ec; }
  .admin-field textarea { resize:vertical; }
  .admin-field small { color:#77859c; font-size:11px; font-weight:400; }
  .admin-field-wide { grid-column:1/-1; }
  .admin-primary-button { min-height:38px; padding:0 15px; border:0; border-radius:5px; background:#1677e9; color:#fff; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; }
  .admin-primary-button:hover { background:#105bbd; }
  .admin-empty { padding:20px 0; color:#70809a; font-size:14px; }
  .admin-review-row { display:flex; align-items:flex-start; gap:13px; padding:14px 0; border-top:1px solid #edf2fb; }
  .admin-review-row > img { width:44px; height:44px; border-radius:10px; object-fit:cover; }
  .admin-review-copy { flex:1; min-width:0; display:grid; gap:5px; font-size:13px; }
  .admin-review-copy > span, .admin-review-copy > p { margin:0; color:#70809a; font-size:12px; }
  .admin-review-copy a, .admin-table a { color:#176bd1; font-size:12px; }
  .admin-review-row form { display:grid; gap:6px; }
  .admin-app-cell { display:flex; align-items:center; gap:9px; }
  .admin-app-cell img { width:34px; height:34px; border-radius:8px; object-fit:cover; }
  .status-pending { background:#fff4d8; color:#7e5a05; }
  .status-rejected { background:#fce8e6; color:#c5221f; }
  .admin-phone-row { display:flex; align-items:center; gap:13px; padding:14px 0; border-top:1px solid #edf2fb; }
  .admin-user-initial { width:38px; height:38px; display:grid; place-items:center; flex:none; border-radius:50%; background:#e6f0ff; color:#1b63c2; font-weight:700; }
  .admin-phone-row > div:nth-child(2) { flex:1; min-width:0; display:grid; gap:5px; }
  .admin-phone-row > div:nth-child(2) span { color:#70809a; font-size:12px; overflow-wrap:anywhere; }

  /* User profile */
  .profile-main { margin-right:56px; padding:30px clamp(16px,4vw,54px); }
  .profile-content { width:min(780px,100%); margin:0 auto; }
  .profile-back { display:inline-block; margin-bottom:25px; color:#1b64c8; font-size:13px; }
  .profile-heading { margin-bottom:25px; }
  .profile-heading h1 { margin:6px 0; font-size:30px; font-weight:600; }
  .profile-heading p, .profile-photo-section p { margin:0; color:#697792; font-size:14px; }
  .profile-form { padding:24px; border:1px solid #dee7f4; border-radius:8px; background:#fff; }
  .profile-photo-section { display:flex; align-items:center; gap:18px; padding-bottom:22px; border-bottom:1px solid #edf2fb; }
  .profile-photo-preview { width:84px; height:84px; overflow:hidden; display:grid; place-items:center; flex:none; border-radius:50%; background:#d6eaff; color:#1677e9; font-size:32px; font-weight:600; }
  .profile-photo-preview img { width:100%; height:100%; object-fit:cover; }
  .profile-photo-section h2 { margin:0 0 6px; font-size:15px; }
  .profile-photo-section p { margin-bottom:10px; font-size:12px; }
  .profile-upload-button { display:inline-flex; padding:8px 11px; border:1px solid #cbd9ef; border-radius:5px; color:#1768cd; cursor:pointer; font-size:12px; font-weight:600; }
  .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .profile-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; padding-top:22px; }
  .profile-form-footer { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:22px; padding-top:18px; border-top:1px solid #edf2fb; }
  .profile-form-footer > a { color:#176bd1; font-size:13px; }
  .profile-account-meta { margin:18px 0 0; color:#7b8ba5; font-size:12px; }
  .gm-avatar-link { display:grid; place-items:center; border-radius:50%; }
  .gm-avatar-link .gm-avatar { display:grid; place-items:center; width:34px; height:34px; object-fit:cover; }

  /* App discovery and library */
  .store-main { margin-right:56px; background:#f8faff; }
  .store-content { width:min(1120px,100%); margin:0 auto; padding:34px clamp(16px,3vw,40px) 54px; }
  .store-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; }
  .store-heading h1 { margin:6px 0 8px; font-size:30px; font-weight:600; }
  .store-heading p { margin:0; color:#6c7c95; font-size:14px; }
  .store-search { display:flex; align-items:center; gap:8px; width:min(390px,100%); height:44px; padding:0 8px 0 13px; border:1px solid #d7e2f3; border-radius:7px; background:#fff; }
  .store-search > span { color:#2364ce; font-size:22px; }
  .store-search input { flex:1; min-width:0; border:0; outline:0; font-family:inherit; font-size:14px; }
  .store-search button { height:32px; padding:0 12px; border:0; border-radius:5px; background:#e9f2ff; color:#176bd1; font-size:12px; font-weight:600; cursor:pointer; }
  .store-categories { display:flex; gap:8px; margin:24px 0; padding-bottom:9px; overflow-x:auto; border-bottom:1px solid #e9f0fb; }
  .store-categories a { flex:none; padding:9px 13px; border-radius:18px; color:#5d6e88; font-size:12px; }
  .store-categories a:hover, .store-categories a.active { background:#e8f2ff; color:#1677e9; }
  .store-section-title { display:flex; justify-content:space-between; align-items:end; gap:12px; margin-bottom:15px; }
  .store-section-title h2 { margin:5px 0 0; font-size:20px; font-weight:600; }
  .store-section-title > a, .store-result-count { color:#6d7d96; font-size:12px; }
  .store-featured { margin:26px 0 34px; }
  .store-featured-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .store-featured-item { min-height:145px; display:grid; align-content:start; gap:8px; padding:17px; border:1px solid #dfe8f6; border-radius:8px; background:linear-gradient(130deg,#e8f3ff,#f3f0ff); }
  .store-featured-item:nth-child(2) { background:linear-gradient(130deg,#e7f4ff,#f0efff); }
  .store-featured-item:nth-child(3) { background:linear-gradient(130deg,#e9f1ff,#edf4ff); }
  .store-featured-item img { grid-row:span 4; width:52px; height:52px; margin-bottom:4px; border-radius:12px; object-fit:cover; }
  .store-featured-item > span { color:#2364ce; font-size:10px; text-transform:uppercase; }
  .store-featured-item strong { font-size:15px; }
  .store-featured-item small { color:#6c7c95; font-size:11px; }
  .store-list-section { margin-top:22px; }
  .store-app-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
  .store-app-card { min-width:0; padding:17px; border:1px solid #dee7f4; border-radius:7px; background:#fff; transition:transform .15s ease,border-color .15s ease; }
  .store-app-card:hover { transform:translateY(-2px); border-color:#a9c9f7; }
  .store-app-main { display:flex; align-items:center; gap:12px; min-width:0; }
  .store-app-icon { width:48px; height:48px; flex:none; border-radius:12px; object-fit:cover; background:#eaf2ff; }
  .store-app-copy { display:grid; min-width:0; gap:5px; }
  .store-app-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
  .store-app-copy small { color:#70809a; font-size:11px; }
  .store-app-card > p { min-height:38px; margin:14px 0 12px; color:#687894; font-size:12px; line-height:1.55; }
  .store-app-meta { display:flex; gap:14px; color:#697a94; font-size:11px; }
  .store-app-meta span:first-child, .store-app-hero-copy > p { color:#2364ce; }
  .store-card-actions { display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:12px; border-top:1px solid #edf2fb; }
  .store-details-link { color:#667792; font-size:12px; }
  .store-save-button, .store-button { min-height:34px; display:inline-flex; align-items:center; justify-content:center; padding:0 13px; border:1px solid #b5cef2; border-radius:5px; background:#e8f2ff; color:#1768cd; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; }
  .store-save-button.saved { background:#fff; color:#596987; border-color:#d7e2f3; }
  .store-empty { display:grid; justify-items:center; padding:56px 18px; text-align:center; }
  .store-empty > span { color:#5f9feb; font-size:38px; }
  .store-empty h3 { margin:12px 0 5px; }
  .store-empty p { max-width:380px; color:#6c7c95; font-size:13px; line-height:1.6; }
  .store-detail-page { max-width:900px; }
  .store-app-hero { display:flex; align-items:center; gap:24px; padding:28px 0 34px; border-bottom:1px solid #e1eaf7; }
  .store-app-hero > img { width:112px; height:112px; border-radius:24px; object-fit:cover; }
  .store-app-hero-copy h1 { margin:6px 0 8px; font-size:32px; }
  .store-app-hero-copy > p { color:#687894; font-size:13px; }
  .store-app-hero-copy > p span { padding:0 5px; color:#99afd0; }
  .store-detail-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:15px; }
  .store-detail-section { padding:26px 0; border-bottom:1px solid #e1eaf7; }
  .store-detail-section h2 { margin:6px 0 12px; font-size:20px; }
  .store-description { color:#596987; line-height:1.8; white-space:normal; }
  .store-website { color:#176bd1; font-size:13px; }
  .store-big-rating { color:#176bd1; font-size:26px; }
  .store-big-rating span { font-size:18px; }
  .store-review-form { display:grid; justify-items:start; gap:9px; max-width:560px; margin:20px 0; }
  .store-review-form label { color:#536984; font-size:12px; font-weight:600; }
  .store-review-form label span { color:#8795ac; font-weight:400; }
  .store-review-form select, .store-review-form textarea { width:min(560px,100%); padding:10px 11px; border:1px solid #d3def0; border-radius:5px; background:#fff; font-family:inherit; font-size:14px; }
  .store-review-form textarea { resize:vertical; }
  .store-review-list { display:grid; gap:17px; margin-top:18px; }
  .store-review { display:flex; gap:11px; padding-top:15px; border-top:1px solid #edf2fb; }
  .store-review-avatar { width:34px; height:34px; display:grid; place-items:center; flex:none; overflow:hidden; border-radius:50%; background:#e0efff; color:#1d65c8; font-weight:600; }
  .store-review-avatar img { width:100%; height:100%; object-fit:cover; }
  .store-review > div:last-child { display:grid; gap:5px; font-size:13px; }
  .store-review-stars { color:#3f78c9; letter-spacing:1px; }
  .store-review p { margin:0; color:#5e6e8a; line-height:1.6; }

  @media (max-width: 960px) {
    .profile-main, .store-main { margin-right:0; margin-bottom:58px; }
    .admin-layout { grid-template-columns:1fr; }
    .admin-sidebar { position:sticky; z-index:30; top:0; width:100%; height:auto; padding:10px 14px; display:flex; flex-direction:row; justify-content:space-between; align-items:center; flex-wrap:wrap; }
    .admin-brand { padding:0 2px; }
    .admin-nav-label, .admin-sidebar-bottom { display:none; }
    .admin-mobile-menu-toggle { display:inline-flex; align-items:center; padding:8px 12px; border:1px solid #48618e; border-radius:10px; background:#19264e; color:#fff; }
    .admin-nav { display:none; position:absolute; top:100%; left:0; right:0; padding:10px 14px 14px; background:#101a40; box-shadow:0 10px 20px rgba(0,0,0,.2); }
    .admin-nav.open { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
    .admin-nav a { min-height:40px; gap:7px; padding:0 10px; font-size:12px; }
    .admin-content { padding-top:22px; }
  }
  @media (max-width: 760px) {
    .admin-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .admin-apps-layout { grid-template-columns:1fr; }
    .store-heading { align-items:stretch; flex-direction:column; }
    .store-search { width:100%; }
    .store-featured-grid, .store-app-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  }
  @media (max-width: 520px) {
    .admin-page-header h1, .profile-heading h1, .store-heading h1 { font-size:25px; }
    .admin-stat-grid { gap:9px; }
    .admin-stat { padding:14px; }
    .admin-stat strong { font-size:25px; }
    .admin-welcome { padding:19px; }
    .admin-welcome-icon { display:none; }
    .admin-area-grid { grid-template-columns:1fr; }
    .admin-review-row { flex-wrap:wrap; }
    .admin-review-row form { width:100%; display:flex; }
    .admin-form-grid, .profile-fields { grid-template-columns:1fr; }
    .admin-field-wide, .profile-field-wide { grid-column:auto; }
    .admin-page-panel, .profile-form { padding:16px; }
    .profile-main { padding:20px 13px; }
    .profile-photo-section { align-items:flex-start; }
    .profile-photo-preview { width:68px; height:68px; }
    .store-content { padding:24px 14px 36px; }
    .store-featured-grid, .store-app-grid { grid-template-columns:1fr; }
    .store-featured-item { grid-template-columns:56px 1fr; align-items:center; min-height:auto; }
    .store-featured-item img { grid-column:1; grid-row:1/5; }
    .store-featured-item > span, .store-featured-item strong, .store-featured-item small { grid-column:2; }
    .store-app-hero { align-items:flex-start; gap:15px; }
    .store-app-hero > img { width:76px; height:76px; border-radius:17px; }
    .store-app-hero-copy h1 { font-size:24px; }
    .store-detail-actions { align-items:flex-start; flex-direction:column; }
    .profile-form-footer { align-items:flex-start; flex-direction:column; }
  }