/* ===========================================================
   Galocaffe Workspace, kattintható demó
   Minden szabály a .gd előtag alatt van, hogy ne ütközzön a site stílusaival.
   Arculat: Manrope, #F05A28 narancs, krém munkaterület, fehér oldalsáv.
   =========================================================== */
.gd {
  --gd-ink: #1A1D2B;
  --gd-text: #2B2F3F;
  --gd-text-2: #5B6072;
  --gd-text-3: #8C90A0;
  --gd-orange: #F05A28;
  --gd-orange-lt: #FF7A45;
  --gd-orange-dk: #C9461C;
  --gd-peach: #FFF1EA;
  --gd-cream: #FAF8F5;
  --gd-line: #ECE8E3;
  --gd-line-2: #E2DDD6;
  --gd-green: #1F8A4C;
  --gd-green-bg: #E7F6EC;
  --gd-shadow: 0 1px 2px rgba(26,29,43,.05), 0 6px 18px rgba(26,29,43,.06);
  max-width: 1200px; margin: 0 auto;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--gd-text); text-align: left;
}
.gd *, .gd *::before, .gd *::after { box-sizing: border-box; }
.gd button { font-family: inherit; }
.gd svg { flex: none; }

/* ---------- Keret ---------- */
.gd .gd-frame {
  border-radius: 18px; overflow: hidden; background: #fff;
  border: 1px solid var(--gd-line-2);
  box-shadow: 0 30px 70px rgba(21,24,41,.16), 0 4px 14px rgba(21,24,41,.06);
}
.gd .gd-bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 16px;
  background: #F4F1ED; border-bottom: 1px solid var(--gd-line);
}
.gd .gd-bar-dot { width: 11px; height: 11px; border-radius: 50%; background: #E0DAD2; }
.gd .gd-bar-dot:first-child { background: #F6A58A; }
.gd .gd-bar-url {
  margin-left: 12px; font-size: 12px; color: var(--gd-text-3); background: #fff;
  border: 1px solid var(--gd-line); border-radius: 8px; padding: 4px 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

.gd .gd-app {
  display: grid; grid-template-columns: 250px 1fr;
  height: 680px; background: var(--gd-cream); font-size: 13.5px; line-height: 1.5;
  position: relative;
}

/* ---------- Oldalsáv ---------- */
.gd .gd-side {
  background: #fff; border-right: 1px solid var(--gd-line);
  display: flex; flex-direction: column; overflow: hidden; min-width: 0;
}
.gd .gd-logo { padding: 14px 16px 8px; }
.gd .gd-logo img { height: 34px; width: auto; display: block; }
.gd .gd-new {
  margin: 6px 12px 12px; padding: 10px 14px; border-radius: 10px; border: 0;
  background: linear-gradient(180deg, var(--gd-orange), #E04E1E);
  color: #fff; font-weight: 700; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  box-shadow: 0 4px 12px rgba(240,90,40,.28); transition: filter .15s, transform .15s;
}
.gd .gd-new:hover { filter: brightness(.95); transform: translateY(-1px); }
.gd .gd-nav { flex: 1; overflow-y: auto; padding: 0 8px 12px; }
.gd .gd-nav::-webkit-scrollbar { width: 6px; }
.gd .gd-nav::-webkit-scrollbar-thumb { background: var(--gd-line-2); border-radius: 3px; }
.gd .gd-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 9px; border: 0; background: none;
  color: var(--gd-text-2); font-size: 13.3px; cursor: pointer; text-align: left;
  transition: background .14s, color .14s; margin-bottom: 1px;
}
.gd .gd-item:hover { background: var(--gd-cream); color: var(--gd-ink); }
.gd .gd-item.on { background: var(--gd-peach); color: var(--gd-orange-dk); font-weight: 700; }
.gd .gd-item svg { opacity: .85; }
.gd .gd-lbl { flex: 1; min-width: 0; }
.gd .gd-badge {
  margin-left: auto; background: var(--gd-orange); color: #fff; font-size: 10.5px; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 5px;
}
.gd .gd-sec {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gd-text-3); padding: 16px 10px 7px; display: flex; gap: 6px;
}
.gd .gd-sec span { color: #B7BAC6; }
.gd .gd-mate {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px;
  border: 0; background: none; border-radius: 9px; cursor: pointer; text-align: left;
}
.gd .gd-mate:hover { background: var(--gd-cream); }
.gd .gd-mate b { display: block; font-size: 12.8px; font-weight: 600; color: var(--gd-ink); }
.gd .gd-mate i { display: block; font-style: normal; font-size: 11px; color: var(--gd-text-3); }
.gd .gd-mate-av {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; flex: none; border: 1px solid rgba(0,0,0,.06);
}
.gd .gd-c1 { background: #FFF1EA; color: #C9461C; }
.gd .gd-c2 { background: #E8F4FB; color: #2D6E96; }
.gd .gd-c3 { background: #FDEFF3; color: #B0405F; }
.gd .gd-c4 { background: #EAF6EE; color: #2E7D4B; }
.gd .gd-user {
  border-top: 1px solid var(--gd-line); padding: 11px 14px;
  display: flex; align-items: center; gap: 10px;
}
.gd .gd-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--gd-peach); color: var(--gd-orange);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; flex: none;
}
.gd .gd-user b { display: block; font-size: 13px; color: var(--gd-ink); font-weight: 700; }
.gd .gd-user span span { font-size: 11px; color: var(--gd-text-3); }

/* ---------- Fő terület ---------- */
.gd .gd-main { display: flex; flex-direction: column; overflow: hidden; position: relative; min-width: 0; }
.gd .gd-top {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 11px 18px;
  border-bottom: 1px solid var(--gd-line); background: var(--gd-cream); flex: none;
}
.gd .gd-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border-radius: 999px; font-size: 11.8px; font-weight: 600; border: 1px solid var(--gd-line-2);
  background: #fff; color: var(--gd-text-2); white-space: nowrap;
}
.gd button.gd-chip { cursor: pointer; transition: .15s; }
.gd button.gd-chip:hover { border-color: var(--gd-orange); }
.gd .gd-chip.gd-mask { color: var(--gd-text-2); }
.gd .gd-chip.gd-mask.on { color: var(--gd-green); border-color: #BFE3CB; background: #fff; }
.gd .gd-chip.gd-mask:not(.on) { color: #A0522D; border-color: #F3D2C4; background: #FFF8F5; }
.gd .gd-chip-soft { background: var(--gd-green-bg); border-color: #CDEBD7; color: var(--gd-green); }
.gd .gd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gd-orange); }

.gd .gd-panel { display: none; flex: 1; min-height: 0; }
.gd .gd-panel.on { display: flex; flex-direction: column; animation: gd-fade .3s ease; }
@keyframes gd-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.gd .gd-view { flex: 1; overflow-y: auto; padding: 26px 32px; }
.gd .gd-view::-webkit-scrollbar, .gd .gd-thread::-webkit-scrollbar { width: 8px; }
.gd .gd-view::-webkit-scrollbar-thumb, .gd .gd-thread::-webkit-scrollbar-thumb { background: var(--gd-line-2); border-radius: 4px; }
.gd .gd-app .gd-h {
  font-weight: 800; font-size: 23px; color: var(--gd-ink); margin: 0 0 4px; letter-spacing: -.02em; line-height: 1.2;
}
.gd .gd-sub { font-size: 13px; color: var(--gd-text-2); margin: 0 0 20px; }
.gd .gd-small { font-size: 12.3px; color: var(--gd-text-3); margin: 12px 0 0; }

/* ---------- Chat ---------- */
.gd .gd-thread { flex: 1; overflow-y: auto; padding: 26px 32px 10px; }
.gd .gd-welcome { max-width: 660px; margin: 7vh auto 0; }
.gd .gd-date {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gd-text-3); margin-bottom: 10px;
}
.gd .gd-app .gd-greet {
  font-weight: 800; font-size: 34px; color: var(--gd-ink); line-height: 1.12; margin: 0 0 10px; letter-spacing: -.03em;
}
.gd .gd-greet em { font-style: italic; color: var(--gd-orange); }
.gd .gd-greet-sub { font-size: 13.8px; color: var(--gd-text-2); margin: 0 0 22px; }
.gd .gd-alert {
  display: flex; align-items: center; gap: 11px; padding: 12px 15px; border-radius: 12px;
  background: #FFF6EC; border: 1px solid #F7DEC2; font-size: 13px; color: #8A5320; margin-bottom: 18px;
}
.gd .gd-alert-n {
  width: 22px; height: 22px; border-radius: 50%; background: var(--gd-orange); color: #fff;
  font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none;
}
.gd .gd-alert button {
  margin-left: auto; background: none; border: 0; color: var(--gd-orange-dk); font-weight: 700;
  text-decoration: underline; cursor: pointer; font-size: 13px; white-space: nowrap; padding: 0;
}
.gd .gd-sugs { display: flex; flex-wrap: wrap; gap: 8px; }
.gd .gd-sug {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 12px;
  border: 1px solid var(--gd-line-2); background: #fff; font-size: 13px; color: var(--gd-text);
  cursor: pointer; text-align: left; transition: .16s ease; line-height: 1.35;
}
.gd .gd-sug:hover { border-color: var(--gd-orange); color: var(--gd-orange-dk); background: #FFFBF8; transform: translateY(-1px); }
.gd .gd-sug svg { color: var(--gd-orange); }

.gd .gd-msg { max-width: 660px; margin: 0 auto 20px; }
.gd .gd-msg.gd-me { text-align: right; }
.gd .gd-bubble {
  display: inline-block; text-align: left; padding: 11px 16px; border-radius: 16px 16px 4px 16px;
  background: var(--gd-ink); color: #fff; font-size: 13.5px; max-width: 85%;
}
.gd .gd-ai { display: flex; gap: 12px; }
.gd .gd-ai-ico {
  width: 28px; height: 28px; border-radius: 9px; background: var(--gd-peach); color: var(--gd-orange);
  display: flex; align-items: center; justify-content: center; flex: none; margin-top: 2px;
}
.gd .gd-ai-body { flex: 1; min-width: 0; font-size: 13.8px; color: var(--gd-text); line-height: 1.62; }
.gd .gd-ai-body p { margin: 0 0 10px; }
.gd .gd-ai-body ul { margin: 0 0 10px; padding-left: 19px; }
.gd .gd-ai-body li { margin-bottom: 5px; }
.gd .gd-ai-body strong { color: var(--gd-ink); }
.gd .gd-cursor {
  display: inline-block; width: 7px; height: 15px; background: var(--gd-orange);
  vertical-align: -2px; animation: gd-blink .9s step-end infinite;
}
@keyframes gd-blink { 50% { opacity: 0; } }
.gd .gd-think { display: flex; gap: 6px; align-items: center; color: var(--gd-text-3); font-size: 13px; }
.gd .gd-think i { width: 6px; height: 6px; border-radius: 50%; background: var(--gd-orange-lt); animation: gd-bounce 1.15s infinite; }
.gd .gd-think i:nth-child(2) { animation-delay: .16s; }
.gd .gd-think i:nth-child(3) { animation-delay: .32s; }
@keyframes gd-bounce { 0%,60%,100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }

.gd .gd-srcs { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--gd-line-2); }
.gd .gd-srcs-t {
  font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--gd-text-3); margin-bottom: 8px;
}
.gd .gd-mt { margin-top: 20px; }
.gd .gd-src {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 9px;
  border: 1px solid #F3D2C4; background: #FFF8F4; font-size: 12px; color: var(--gd-orange-dk);
  cursor: pointer; margin: 0 6px 6px 0; font-weight: 600; transition: .15s; text-align: left;
}
.gd .gd-src:hover { background: var(--gd-peach); border-color: var(--gd-orange); }

.gd .gd-compose { flex: none; padding: 10px 32px 14px; }
.gd .gd-box {
  border: 1px solid var(--gd-line-2); border-radius: 16px; padding: 10px 12px;
  max-width: 660px; margin: 0 auto; background: #fff; transition: border-color .16s, box-shadow .16s;
  box-shadow: var(--gd-shadow);
}
.gd .gd-box:focus-within { border-color: var(--gd-orange); box-shadow: 0 0 0 3px rgba(240,90,40,.1); }
.gd .gd-box-row { display: flex; align-items: center; gap: 9px; }
.gd .gd-box-pills { display: flex; gap: 7px; margin-top: 8px; }
.gd .gd-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  color: var(--gd-text-2); border: 1px solid var(--gd-line-2); border-radius: 999px; padding: 4px 11px;
}
.gd .gd-input {
  flex: 1; min-width: 0; border: 0; outline: 0; font-size: 14px; font-family: inherit;
  color: var(--gd-text); background: none; padding: 4px 2px;
}
.gd .gd-input::placeholder { color: #A9ACB8; }
.gd .gd-send {
  width: 34px; height: 34px; border-radius: 10px; background: var(--gd-orange); color: #fff;
  border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none;
  transition: background .15s;
}
.gd .gd-send:hover { background: var(--gd-orange-dk); }
.gd .gd-note { text-align: center; font-size: 11px; color: #A9ACB8; margin: 8px 0 0; }

/* ---------- Listás nézetek ---------- */
.gd .gd-row {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 12px;
  border: 1px solid var(--gd-line); background: #fff; margin-bottom: 9px; cursor: pointer;
  transition: .16s ease;
}
.gd .gd-row:hover { border-color: #F3C3AE; box-shadow: var(--gd-shadow); transform: translateX(2px); }
.gd .gd-row.gd-static { cursor: default; }
.gd .gd-row.gd-static:hover { transform: none; border-color: var(--gd-line-2); }
.gd .gd-row-ico {
  width: 34px; height: 34px; border-radius: 10px; background: var(--gd-peach); color: var(--gd-orange);
  display: flex; align-items: center; justify-content: center; flex: none; font-size: 11px; font-weight: 800;
}
.gd .gd-row-ico.gd-av { border-radius: 50%; }
.gd .gd-row-b { flex: 1; min-width: 0; }
.gd .gd-row-b b { display: block; font-size: 13.8px; color: var(--gd-ink); font-weight: 700; }
.gd .gd-row-b > span { font-size: 12.2px; color: var(--gd-text-3); }
.gd .gd-tag {
  font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 0;
  background: var(--gd-peach); color: var(--gd-orange-dk); letter-spacing: .02em; white-space: nowrap; flex: none;
}
.gd .gd-tag.ok { background: var(--gd-green-bg); color: var(--gd-green); }
.gd .gd-tag.warn { background: #FFF0D9; color: #A35F0B; }
.gd .gd-tag.off { background: #F1F0EE; color: #8C8A86; }
.gd .gd-tag-btn { cursor: pointer; font-family: inherit; text-decoration: underline; text-underline-offset: 2px; }
.gd .gd-tag-btn:hover { background: #FFE4BD; }
.gd .gd-back {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
  color: var(--gd-orange-dk); font-size: 12.5px; font-weight: 700; cursor: pointer;
  margin-bottom: 14px; padding: 0;
}
.gd .gd-back:hover { text-decoration: underline; }
.gd .gd-link {
  background: none; border: 0; padding: 0; color: var(--gd-orange-dk); font-weight: 700;
  font-size: inherit; cursor: pointer; text-decoration: underline;
}
.gd .gd-proj {
  display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; color: var(--gd-ink);
  margin: 18px 0 8px;
}
.gd .gd-proj:first-child { margin-top: 0; }
.gd .gd-proj span { font-size: 11px; font-weight: 600; color: var(--gd-text-3); }
.gd .gd-prio { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex: none; }
.gd .gd-prio-hi { background: #FDE6DD; color: #B83E14; }
.gd .gd-prio-mid { background: #FFF0D9; color: #A35F0B; }
.gd .gd-prio-lo { background: #F1F0EE; color: #8C8A86; }

/* Kapcsoló */
.gd .gd-toggle {
  width: 40px; height: 23px; border-radius: 999px; background: #DAD6D0; border: 0; padding: 0;
  position: relative; cursor: pointer; flex: none; transition: background .2s;
}
.gd .gd-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.gd .gd-toggle.on { background: var(--gd-orange); }
.gd .gd-toggle.on::after { transform: translateX(17px); }

/* Teendő pipa */
.gd .gd-check {
  width: 20px; height: 20px; border-radius: 6px; border: 1.8px solid #D3CEC7; background: #fff;
  cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center;
  transition: .16s; padding: 0;
}
.gd .gd-check:hover { border-color: var(--gd-orange); }
.gd .gd-check.on { background: var(--gd-orange); border-color: var(--gd-orange); }
.gd .gd-check svg { opacity: 0; }
.gd .gd-check.on svg { opacity: 1; }
.gd .gd-row.gd-done .gd-row-b b { text-decoration: line-through; color: var(--gd-text-3); font-weight: 500; }

/* Maszkolás: bekapcsolva a jelölő látszik, kikapcsolva a valódi adat. */
.gd .gd-pii-m {
  display: none; font-size: .86em; font-weight: 700; letter-spacing: .02em;
  background: #EEF0F4; color: #4A5068; border-radius: 5px; padding: 0 5px;
}
.gd .gd-app.gd-masked .gd-pii-m { display: inline; }
.gd .gd-app.gd-masked .gd-pii-r { display: none; }

/* ---------- Oldalsó fiók ---------- */
.gd .gd-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 360px; max-width: 100%; background: #fff;
  border-left: 1px solid var(--gd-line); box-shadow: -14px 0 34px rgba(26,29,43,.1);
  transform: translateX(100%); visibility: hidden;
  transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s;
  display: flex; flex-direction: column; z-index: 5;
}
.gd .gd-drawer.open { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.gd .gd-drawer-h {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--gd-line); flex: none;
}
.gd .gd-drawer-h b { font-size: 13.5px; color: var(--gd-ink); flex: 1; font-weight: 800; }
.gd .gd-drawer-x {
  background: none; border: 0; cursor: pointer; color: var(--gd-text-3); font-size: 22px;
  line-height: 1; padding: 0; width: 26px; height: 26px; border-radius: 6px;
}
.gd .gd-drawer-x:hover { color: var(--gd-ink); background: var(--gd-cream); }
.gd .gd-drawer-b { flex: 1; overflow-y: auto; padding: 18px; font-size: 13px; color: var(--gd-text-2); line-height: 1.6; }
.gd .gd-drawer-b p { margin: 0 0 10px; }
.gd .gd-quote {
  background: var(--gd-cream); border-left: 3px solid var(--gd-orange); border-radius: 0 10px 10px 0;
  padding: 12px 14px; margin: 10px 0 12px; font-size: 12.8px; color: var(--gd-text);
}
.gd .gd-quote-tight { margin: 8px 0 12px; }
.gd .gd-meta { font-size: 11.5px; color: var(--gd-text-3); margin-top: 8px; }
.gd .gd-lessons { margin: 0; padding-left: 20px; color: var(--gd-text); }
.gd .gd-lessons li { margin-bottom: 6px; }
.gd .gd-approve {
  border: 1px solid var(--gd-line); border-radius: 12px; padding: 15px; margin-bottom: 12px; background: #fff;
}
.gd .gd-approve > b { display: block; font-size: 13.5px; color: var(--gd-ink); margin-bottom: 6px; font-weight: 800; }
.gd .gd-approve p { font-size: 12.6px; color: var(--gd-text-2); margin: 0 0 8px; }
.gd .gd-approve-row { display: flex; gap: 8px; flex-wrap: wrap; }
.gd .gd-btn-s {
  padding: 8px 15px; border-radius: 9px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--gd-line-2); background: #fff; color: var(--gd-text-2);
}
.gd .gd-btn-s:hover { border-color: var(--gd-orange); color: var(--gd-orange-dk); }
.gd .gd-btn-s.pri { background: var(--gd-orange); border-color: var(--gd-orange); color: #fff; }
.gd .gd-btn-s.pri:hover { background: var(--gd-orange-dk); border-color: var(--gd-orange-dk); color: #fff; }
.gd .gd-done-note {
  padding: 10px 13px; border-radius: 10px; background: var(--gd-green-bg); color: var(--gd-green);
  font-size: 12.5px; font-weight: 700; display: flex; align-items: flex-start; gap: 8px;
}
.gd .gd-done-note svg { margin-top: 3px; }
.gd .gd-done-note.gd-no { background: #F4F2EF; color: #6F6B66; }
.gd .gd-log-wrap { margin-top: 20px; }
.gd .gd-log { margin-top: 0; line-height: 1.8; }

/* ---------- Lábléc, visszaállítás ---------- */
.gd .gd-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 16px; flex-wrap: wrap;
}
.gd .gd-hint { font-size: 13.5px; color: var(--gd-text-2); display: flex; align-items: center; gap: 8px; }
.gd .gd-hint svg { color: var(--gd-orange); }
.gd .gd-reset {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--gd-line-2); background: #fff; color: var(--gd-ink); font-size: 13px;
  font-weight: 700; cursor: pointer; transition: .15s;
}
.gd .gd-reset:hover { border-color: var(--gd-orange); color: var(--gd-orange-dk); }

/* Asztali nézetben nincs hamburger és elsötétítés. */
.gd .gd-menu, .gd .gd-backdrop { display: none; }

/* ---------- Reszponzív ----------
   Mobilon ugyanaz a felület marad, az oldalsáv hamburgerrel húzható ki. */
@media (max-width: 900px) {
  .gd .gd-app { grid-template-columns: 1fr; height: 620px; overflow: hidden; }
  .gd .gd-menu {
    display: inline-flex; align-items: center; justify-content: center; margin-right: auto;
    width: 34px; height: 31px; border-radius: 9px; border: 1px solid var(--gd-line-2);
    background: #fff; color: var(--gd-ink); cursor: pointer; flex: none; padding: 0;
  }
  .gd .gd-menu:hover { border-color: var(--gd-orange); color: var(--gd-orange); }
  .gd .gd-side {
    position: absolute; top: 0; left: 0; bottom: 0; width: 250px; z-index: 12;
    transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  .gd .gd-app.gd-nav-open .gd-side { transform: none; box-shadow: 14px 0 34px rgba(21,24,41,.2); }
  .gd .gd-backdrop {
    display: block; position: absolute; inset: 0; z-index: 10; border: 0; padding: 0;
    background: rgba(21,24,41,.42); opacity: 0; pointer-events: none; transition: opacity .28s; cursor: pointer;
  }
  .gd .gd-app.gd-nav-open .gd-backdrop { opacity: 1; pointer-events: auto; }
  .gd .gd-view, .gd .gd-thread { padding: 18px 16px; }
  .gd .gd-compose { padding: 8px 14px 12px; }
  .gd .gd-welcome { margin-top: 10px; }
  .gd .gd-app .gd-greet { font-size: 26px; }
  .gd .gd-app .gd-h { font-size: 20px; }
  .gd .gd-drawer { width: 100%; }
  .gd .gd-top { padding: 9px 12px; gap: 6px; }
}
@media (max-width: 560px) {
  .gd .gd-hide-s { display: none; }
  .gd .gd-row { flex-wrap: wrap; row-gap: 8px; }
  .gd .gd-row-b { flex: 1 1 calc(100% - 47px); }
  .gd .gd-row > .gd-tag, .gd .gd-row > .gd-prio { margin-left: 47px; }
  .gd .gd-row > .gd-toggle { margin-left: auto; }
  .gd .gd-sug { font-size: 12.6px; padding: 9px 12px; }
  .gd .gd-alert { flex-wrap: wrap; }
  .gd .gd-alert button { margin-left: 33px; }
  .gd .gd-bar-url { font-size: 11px; }
}
@media (max-width: 400px) {
  .gd .gd-app { height: 580px; }
  .gd .gd-side { width: 230px; }
  .gd .gd-chip { font-size: 11px; padding: 4px 9px; }
  .gd .gd-chip-model { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gd *, .gd *::before, .gd *::after { animation: none !important; transition: none !important; }
}