* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #202124; background: #f6f7f9; }
.topbar { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 20px 28px; background: #fff; border-bottom: 1px solid #dde1e6; }
h1, h2, p { margin: 0; }
h1 { font-size: 22px; }
h2 { font-size: 16px; margin-bottom: 12px; }
p { color: #5f6368; font-size: 14px; }
main { padding: 24px; }
.panel { background: #fff; border: 1px solid #dde1e6; border-radius: 8px; padding: 18px; }
.narrow { max-width: 420px; margin: 48px auto; }
.workspace { display: grid; gap: 18px; }
.controls { display: flex; justify-content: space-between; align-items: center; }
.grid { display: grid; grid-template-columns: minmax(420px, 1.2fr) minmax(340px, 0.8fr); gap: 18px; align-items: start; }
.stack { display: grid; gap: 14px; }
.row, .preview-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
label { display: grid; gap: 6px; font-size: 13px; color: #3c4043; }
input, select, textarea { width: 100%; border: 1px solid #c9d1d9; border-radius: 6px; padding: 9px 10px; font: inherit; background: #fff; }
textarea { resize: vertical; }
button { border: 1px solid #1a73e8; background: #1a73e8; color: #fff; border-radius: 6px; padding: 9px 12px; font: inherit; cursor: pointer; }
button.secondary, .tab { background: #fff; color: #1a73e8; }
button.danger { border-color: #b3261e; background: #b3261e; }
button:disabled { opacity: 0.55; cursor: not-allowed; }
.authbar, .actions, .tabs { display: flex; gap: 10px; align-items: center; }
.tabs { margin-bottom: 12px; }
.tab.active { background: #e8f0fe; }
.list { display: grid; gap: 10px; max-height: 640px; overflow: auto; }
.item { border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px; cursor: pointer; background: #fff; }
.item:hover { border-color: #1a73e8; }
.item strong { display: block; margin-bottom: 4px; }
.item small { color: #5f6368; }
pre { min-height: 120px; overflow: auto; background: #111827; color: #e5e7eb; padding: 14px; border-radius: 6px; }
@media (max-width: 900px) { .grid, .row, .preview-row { grid-template-columns: 1fr; } .topbar, .controls { align-items: flex-start; flex-direction: column; } }