@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,300;9..144,400&family=Kalam:wght@400;700&family=Source+Serif+4:opsz,wght@8..60,300;8..60,400&display=swap');

/* ── Light mode — parchment editorial ── */
:root{
  --bg:#faf8f4;
  --shell:#faf8f4;
  --bar:#ffffff;
  --card:#ffffff;
  --card-soft:#f4f1eb;
  --text:#1c1917;
  --heading:#0f0e0c;
  --muted:#78716c;
  --border:#e8e4db;
  --good:#16a34a;
  --warn:#d97706;
  --bad:#dc2626;
  --accent:#b8933a;
  --accent-glow:rgba(184,147,58,.12);
  --editor-font-size:19px;
  --editor-font-family:"Source Serif 4","Tiempos Text",Georgia,serif;
  --button-height:28px;
}

/* ── Dark mode ── */
html[data-theme="dark"]{
  --bg:#0f0e0c;
  --shell:#0f0e0c;
  --bar:#161512;
  --card:#0f0e0c;
  --card-soft:#1e1c19;
  --text:#c8c4bc;
  --heading:#e8e2d9;
  --muted:#5a5753;
  --border:#272420;
  --accent:#c8a96e;
  --accent-glow:rgba(200,169,110,.18);
}

*{ box-sizing:border-box; }
html,body{ min-height:100%; }

body{
  margin:0; padding:0;
  display:flex; align-items:flex-start; justify-content:center;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}

html[data-theme="dark"] body{ background:var(--bg); }

.appShell{ width:100%; min-height:100vh; background:var(--shell); overflow:hidden; }

/* ── Header ── */
.windowBar{
  height:46px;
  display:flex; align-items:center; gap:10px;
  padding:0 14px;
  background:var(--bar);
  border-bottom:2px solid var(--accent);
  position:relative; z-index:100;
}

/* ── Burger ── */
.burgerBtn{
  width:30px; height:30px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px; border-radius:6px;
  transition:background .15s;
}
.burgerBtn:hover{ background:var(--accent-glow); }

/* Amber health dot on burger when sync is unhealthy */
.burgerBtn .healthDot{
  position:absolute;
  top:6px; right:6px;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--warn);
  border:1.5px solid var(--bar);
  display:none;
}
.burgerBtn.has-warning .healthDot{ display:block; }
.burgerBtn{ position:relative; }
.burgerBtn span{
  display:block; width:17px; height:1.5px; background:var(--text); border-radius:2px;
  transition:transform .2s, opacity .2s; transform-origin:center;
}
.burgerBtn.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burgerBtn.is-open span:nth-child(2){ opacity:0; }
.burgerBtn.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ── Brand ── */
.windowBrand{ display:flex; align-items:center; }
h1{ margin:0; font-size:16px; line-height:1; font-weight:300; color:var(--heading); }
.brandTitle{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Fraunces',serif;
}
.brandTitle span:first-child{ font-weight:400; }
.brandTitle i{
  width:5px; height:5px; display:inline-block; border-radius:50%;
  background:var(--accent);
}
.brandTitle span:last-child{ color:var(--muted); }

/* ── Header right cluster ── */
.windowBarRight{
  margin-left:auto;
  display:flex; align-items:center; gap:6px;
}

/* ── Compact user|pin box ── */
.userPinBox{
  display:flex; align-items:center;
  height:28px;
  background:var(--card-soft);
  border:1px solid var(--border);
  border-radius:999px;
  padding:0 4px 0 10px;
  gap:4px;
  font-size:12px;
}
.userPinInput{
  border:none; outline:none; background:transparent;
  color:var(--text); font-size:12px; font-family:inherit;
  width:4ch; min-width:2ch; max-width:16ch;
}
.userPinInput.pinInput{ width:3ch; }
.userPinInput::placeholder{ color:var(--muted); }
.userPinSep{ color:var(--border); font-size:14px; flex-shrink:0; }
.userPinLoad{
  height:22px; padding:0 10px;
  border:1px solid var(--accent); border-radius:999px;
  background:transparent; color:var(--accent);
  font-size:11px; font-weight:500; cursor:pointer;
  transition:background .15s, color .15s;
  flex-shrink:0;
}
.userPinLoad:hover{ background:var(--accent); color:#fff; }

/* ── Tool buttons ── */
.toolBtn{
  height:var(--button-height); padding:0 12px;
  border:1px solid var(--border); border-radius:999px;
  background:transparent; color:var(--text);
  font-size:12px; font-weight:400; cursor:pointer; white-space:nowrap;
  transition:border-color .15s, color .15s, background .15s;
}
.toolBtn[aria-pressed="true"]{
  background:var(--accent); border-color:var(--accent); color:#fff; font-weight:500;
}
.toolBtn:hover{ border-color:var(--accent); color:var(--heading); background:var(--accent-glow); }
.toolBtn:active{ background:rgba(200,169,110,.2); }

/* ── Tidy button ── */
.aiTidyBtn{
  border-color:var(--accent) !important; color:var(--accent) !important;
  padding:0 12px !important; font-weight:500 !important;
}
.aiTidyBtn:disabled{ opacity:.5; cursor:wait; }

/* ── Help button ── */
.helpBtn{
  width:var(--button-height) !important; padding:0 !important;
  font-weight:700; font-style:italic;
  font-family:Georgia,serif; font-size:13px;
  border-radius:50% !important;
}

/* ── Font select ── */
.fontSelect{
  height:var(--button-height); padding:0 20px 0 8px;
  border:1px solid var(--border); border-radius:999px;
  background:transparent; color:var(--text);
  font-size:12px; font-family:inherit; cursor:pointer; outline:none;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 7px center;
  min-width:72px;
}
.fontSelect option{ background:var(--shell); color:var(--text); }

/* ── Drawer ── */
.drawer{ background:var(--bar); border-bottom:1px solid var(--border); position:relative; z-index:90; }
.drawer[hidden]{ display:none; }
.drawerInner{ padding:8px 14px 10px; display:flex; flex-direction:column; gap:7px; }
.drawerRow{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.drawerMeta{ gap:10px; }
.toolDivider{ width:1px; height:16px; background:var(--border); margin:0 3px; flex-shrink:0; }

.authMessage{ margin:0; color:var(--muted); font-size:11px; white-space:normal; flex:1; }
.notesCounter,.textSizeLabel{ margin:0; color:var(--muted); font-size:11px; white-space:nowrap; }

/* ── Conflict panel ── */
.conflictPanel{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 12px; margin-top:6px;
  background:#fff8e8; border:1px solid #ffd48a; border-radius:8px; color:var(--text);
}
.conflictPanel[hidden]{ display:none; }
.conflictPanel strong{ display:block; font-weight:400; font-size:12px; }
.conflictPanel span{ color:var(--muted); font-size:11px; }
html[data-theme="dark"] .conflictPanel{ background:#241f12; border-color:#80621d; }
.conflictActions{ display:flex; flex-wrap:wrap; gap:6px; }

/* ── Control row ── */
.controlRow{
  display:flex; align-items:center; gap:20px;
  padding:10px 16px;
  border-bottom:1px solid var(--border);
  transition:background .3s;
}

/* Running state — amber wash behind timer row */
.controlRow.timer-running{
  background:linear-gradient(90deg, rgba(200,169,110,.07) 0%, transparent 60%);
}

/* ── Timer readout ── */
.timerReadout{
  display:flex; align-items:center; gap:8px;
  flex-shrink:0;
  transition:all .3s ease;
  padding-left:2px;
  border-left:2px solid transparent;
  transition:border-color .3s ease;
}

/* Vertical TIMER label */
.timerLabel{
  font-family:'DM Mono','Courier New',monospace;
  font-size:9px; font-weight:500; color:var(--muted);
  letter-spacing:.18em; text-transform:uppercase;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  line-height:1;
  opacity:.5;
  transition:opacity .25s ease, color .25s ease;
  align-self:stretch;
  display:flex; align-items:center; justify-content:center;
}

#timerDisplay{
  font-family:'DM Mono','Courier New',monospace;
  font-size:22px; font-weight:400; letter-spacing:.05em;
  color:var(--heading); white-space:nowrap;
  transition:font-size .25s ease, color .25s ease;
}

/* Timer running — larger, amber, amber spine ── */
.timerReadout.timer-running{
  border-left-color:var(--accent);
}
.timerReadout.timer-running .timerLabel{
  color:var(--accent);
  opacity:.8;
}
.timerReadout.timer-running #timerDisplay{
  font-size:32px;
  color:var(--accent);
}

/* Pulse animation on the dot when running */
@keyframes pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.4; }
}

/* ── Task controls ── */
.taskControl{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.taskLabel{ font-size:15px; font-weight:300; color:var(--muted); }

.actionBtn,.resetBtn{
  height:var(--button-height); padding:0 14px;
  border:1px solid var(--border); border-radius:999px;
  background:transparent; color:var(--text);
  font-size:12px; font-weight:400; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.actionBtn:disabled{ opacity:.3; cursor:not-allowed; }

/* Start — amber accent always */
.startBtn:not(:disabled){ border-color:var(--accent); color:var(--accent); font-weight:500; }

/* Running/paused coloured states */
.controlRow.is-running .startBtn{
  background:linear-gradient(180deg,#c9ffd6 0%,#31d765 52%,#18ad44 100%);
  border-color:#24b84c; color:#fff;
  animation:none;
}
.controlRow.is-paused .pauseBtn{
  background:linear-gradient(180deg,#fff2b5 0%,#f5ce45 52%,#d6aa19 100%);
  border-color:#d7b12f; color:#2f3137;
}
.actionBtn:hover:not(:disabled),.resetBtn:hover{
  border-color:var(--accent); color:var(--heading); background:var(--accent-glow);
}

/* ── Status strip ── */
.statusStrip{
  display:flex; align-items:center; gap:8px;
  padding:5px 16px;
  background:var(--card-soft);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  font-size:11px; color:var(--muted);
  min-height:28px;
  position:relative; z-index:10;
  transition:background .25s, color .25s, box-shadow .35s, border-color .25s, transform .25s;
}

/* Elevated / floating state when task is active */
.statusStrip.strip-active{
  background:var(--bar);
  border-color:var(--accent);
  color:var(--text);
  box-shadow:0 4px 20px rgba(200,169,110,.22), 0 1px 4px rgba(0,0,0,.12);
  transform:translateY(-1px);
}

html[data-theme="dark"] .statusStrip.strip-active{
  box-shadow:0 4px 24px rgba(200,169,110,.28), 0 2px 8px rgba(0,0,0,.5);
}

.statusStrip[data-kind="warn"]{ background:rgba(232,164,0,.07); color:var(--warn); border-color:rgba(232,164,0,.3); }
.statusStrip[data-kind="bad"]{ background:rgba(217,48,37,.06); color:var(--bad); border-color:rgba(217,48,37,.3); }

.statusStrip #taskStatus{ flex:1; font-size:12px; }
.statusStrip.strip-active #taskStatus{ color:var(--heading); font-weight:400; }

.statusRight{
  flex-shrink:0; font-size:11px; color:var(--muted);
  margin-left:auto;
}

/* Status dot */
.statusDot{
  width:6px; height:6px; border-radius:50%;
  background:var(--good); flex-shrink:0;
  transition:background .2s;
}
.strip-active .statusDot{ animation:pulse 1.4s ease-in-out infinite; }

/* ── Editor ── */
.editorCard{
  position:relative; min-height:300px;
  background:transparent; border:none;
  padding:0 16px;
}

.textarea{
  width:100%; min-height:300px;
  display:block; overflow:auto;
  border:0; outline:none;
  padding:18px 0 48px;
  background:transparent;
  color:var(--text);
  font-size:var(--editor-font-size);
  font-family:var(--editor-font-family);
  line-height:1.8;
  caret-color:var(--accent);
  word-break:break-word; white-space:pre-wrap;
}

.textarea[data-empty="true"]::before{
  content:attr(data-placeholder);
  color:var(--muted); opacity:.45;
  pointer-events:none; display:block;
  font-family:var(--editor-font-family);
}
.textarea:focus{ outline:none; }

/* ── Name highlight ── */
.editorName{ color:var(--accent); font-weight:500; }
.editorSep{ color:var(--muted); font-weight:300; opacity:.6; }
.editorNameGroup{ display:inline; white-space:nowrap; }

/* ── Checkboxes ── */
.editorCheckbox{
  appearance:none; -webkit-appearance:none;
  width:14px; height:14px;
  border:1.5px solid var(--muted); border-radius:3px;
  background:transparent; cursor:pointer;
  vertical-align:middle; margin-right:6px; margin-top:-1px;
  position:relative; flex-shrink:0;
  transition:border-color .15s, background .15s;
}
.editorCheckbox:checked{ background:var(--accent); border-color:var(--accent); }
.editorCheckbox:checked::after{
  content:''; position:absolute;
  left:3px; top:0px; width:5px; height:9px;
  border:2px solid #fff; border-top:none; border-left:none;
  transform:rotate(40deg);
}

/* ── Footer ── */
.footerHelp{
  position:absolute; left:16px; right:16px; bottom:10px;
  margin:0; color:var(--muted); font-size:11px; font-weight:300;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.footerHelp:not(:empty){ color:#9a6700; }

/* ── Structured line rendering ── */
#editor div{ transition:font-size .12s ease, color .12s ease; }

#editor .md-h1{
  font-family:'Source Serif 4',serif;
  font-size:1.55em; font-weight:400; color:var(--heading);
  line-height:1.3; padding:.1em 0;
  border-bottom:1px solid var(--border); margin-bottom:.1em;
}
#editor .md-h2{
  font-family:'Source Serif 4',serif;
  font-size:1.25em; font-weight:400; color:var(--heading);
  line-height:1.35; padding:.05em 0;
}
#editor .md-h3{
  font-size:.78em; font-weight:600; color:var(--accent);
  text-transform:uppercase; letter-spacing:.1em; padding:.25em 0 .1em;
}
#editor .md-hr{ padding:.6em 0; cursor:default; }
#editor .md-hr-line{ display:block; height:1px; background:var(--border); pointer-events:none; }
#editor .md-blockquote{
  border-left:3px solid var(--accent); padding-left:12px;
  color:var(--muted); font-style:italic; margin-left:2px;
}
#editor .md-bullet{ display:flex; align-items:baseline; }
#editor .md-bullet-dot{
  flex-shrink:0; margin-right:8px;
  color:var(--accent); font-size:.7em; line-height:inherit; user-select:none;
}
#editor .md-bullet-dot::before{ content:'●'; }

/* ── Log card ── */
.logCard{
  margin:0 16px 24px;
  border-top:1px solid var(--border);
}
.logHeader{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0 6px;
}
.logCard h2{
  margin:0; font-size:15px; font-weight:400; color:var(--heading);
  font-family:'Source Serif 4',serif; letter-spacing:.01em;
}
.logCopyBtn,
.logExpandBtn{
  height:24px !important; padding:0 10px !important;
  font-size:11px !important; color:var(--muted) !important;
}
.logCopyBtn:hover,
.logExpandBtn:hover{ color:var(--accent) !important; border-color:var(--accent) !important; }

.logContainer{
  min-height:40px; max-height:180px; overflow:auto;
  transition:max-height .3s ease;
}
.logContainer.log-expanded{
  max-height:60vh;
}

/* Person group header */
.logGroup{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0 3px;
  border-top:1px solid var(--border);
  margin-top:4px;
}
.logGroup:first-child{ margin-top:0; border-top:none; }
.logPerson{ font-size:12px; font-weight:600; color:var(--accent); letter-spacing:.04em; text-transform:uppercase; }
.logPersonNone{ font-size:12px; color:var(--muted); }
.logTotal{ font-family:'DM Mono',monospace; font-size:12px; color:var(--heading); font-weight:500; }

/* Task rows */
.logRow{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:2px 0 2px 12px;
  border-bottom:1px solid rgba(0,0,0,.04);
  gap:12px;
}
.logTask{ font-size:12px; color:var(--text); flex:1; min-width:0; }
.logTime{ font-family:'DM Mono',monospace; font-size:11px; color:var(--muted); flex-shrink:0; white-space:nowrap; }
.logEmpty{ padding:8px 0; color:var(--muted); font-size:12px; }

/* ── Help modal ── */
.helpModalBackdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.4); z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:20px; backdrop-filter:blur(3px);
}
.helpModalBackdrop[hidden]{ display:none; }
.helpModal{
  position:relative; background:var(--shell);
  border:1px solid var(--border); border-radius:14px;
  width:min(560px,100%); max-height:80vh; overflow-y:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.2);
}
.helpModalBody{ padding:24px 24px 20px; display:flex; flex-direction:column; gap:20px; }
.helpCloseBtn{
  position:sticky; top:0; float:right; margin:12px 12px 0 0;
  width:26px; height:26px;
  border:1px solid var(--border); border-radius:50%;
  background:var(--card-soft); color:var(--muted);
  font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:color .15s, border-color .15s; z-index:1;
}
.helpCloseBtn:hover{ color:var(--heading); border-color:var(--accent); }
.helpSection h3{
  font-family:'Source Serif 4',serif; font-size:13px; font-weight:400;
  color:var(--heading); margin:0 0 10px;
  padding-bottom:5px; border-bottom:1px solid var(--border);
}
.helpGrid{ display:grid; grid-template-columns:auto 1fr; gap:5px 14px; align-items:center; }
.helpGrid kbd{
  font-family:'DM Mono','Courier New',monospace; font-size:11px;
  background:var(--card-soft); border:1px solid var(--border);
  border-bottom-width:2px; border-radius:4px; padding:2px 7px;
  color:var(--heading); white-space:nowrap; justify-self:start; line-height:1.5;
}
.helpGrid span{ font-size:12px; color:var(--text); }

/* ── First-load Typora tooltip ── */
.typoraHint{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  background:var(--heading);
  color:#fff;
  font-size:12px;
  padding:8px 18px;
  border-radius:999px;
  white-space:nowrap;
  pointer-events:none;
  z-index:20;
  opacity:0;
  transition:opacity .4s ease;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.typoraHint.visible{ opacity:1; }


/* ── About modal additions ── */
.aboutBtn{
  margin-left:auto;
  font-size:11px !important;
  padding:0 10px !important;
  height:22px !important;
  color:var(--muted) !important;
  border-color:var(--border) !important;
}
.aboutBtn:hover{ color:var(--accent) !important; border-color:var(--accent) !important; }

.aboutDesc{
  font-size:13px; color:var(--text); line-height:1.6; margin:0;
}

.aboutLinks{
  display:flex; flex-direction:column; gap:6px; margin-top:4px;
}

.aboutLink{
  font-size:13px; color:var(--accent);
  text-decoration:none; padding:6px 10px;
  border:1px solid var(--border); border-radius:7px;
  display:block; transition:border-color .15s, background .15s;
  font-family:'DM Mono', monospace;
}
.aboutLink:hover{ border-color:var(--accent); background:var(--accent-glow); }

.aboutLicense{
  font-family:'DM Mono', monospace; font-size:10px;
  color:var(--muted); line-height:1.7;
  background:var(--card-soft); border:1px solid var(--border);
  border-radius:8px; padding:12px 14px;
  white-space:pre-wrap; word-break:break-word; margin:0;
  max-height:160px; overflow:auto;
}

.aboutMeta{
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; color:var(--muted);
}
.aboutMeta a{ color:var(--accent); text-decoration:none; }
.aboutMeta a:hover{ text-decoration:underline; }


/* ── Start button pulse hint (first-time user) ── */
@keyframes subtlePulse {
  0%,100%{ box-shadow: 0 0 0 0 rgba(184,147,58,0); }
  50%{ box-shadow: 0 0 0 5px rgba(184,147,58,.3); }
}

.startBtn.pulse-hint{
  animation: subtlePulse 1.8s ease-in-out infinite;
}

.startBtn.pulse-hint::after{
  content: "← select a line first";
  position: absolute;
  left: calc(100% + 10px);
  top: 50%; transform: translateY(-50%);
  font-family: "Source Serif 4", serif;
  font-size: 11px; font-style: italic;
  color: var(--muted); white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: fadeIn .4s .6s ease forwards;
}

/* Make taskControl relative so ::after positions correctly */
.taskControl{ position: relative; }

/* ── Editor pointer tooltip ── */
.editorPointer{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) translateY(10px);
  background: var(--heading);
  color: var(--white, #fff);
  font-size: 12px;
  font-family: "Source Serif 4", serif;
  padding: 8px 20px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}

.editorPointer.visible{
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}


/* ════════════════
   DARK OVERRIDES
   ════════════════ */
html[data-theme="dark"] .windowBar{ border-bottom-color:var(--accent); }
html[data-theme="dark"] .toolBtn[aria-pressed="true"]{ color:#13120f; }
html[data-theme="dark"] .controlRow.is-running .startBtn{ color:#fff; }
html[data-theme="dark"] .controlRow.is-paused .pauseBtn{ color:#1d1d1f; }
html[data-theme="dark"] .logRow{ border-bottom-color:rgba(255,255,255,.04); }
html[data-theme="dark"] .statusStrip{ background:var(--card-soft); }
html[data-theme="dark"] .statusStrip[data-kind="warn"]{ background:rgba(232,164,0,.08); }
html[data-theme="dark"] .statusStrip[data-kind="bad"]{ background:rgba(217,48,37,.07); }
html[data-theme="dark"] .userPinBox{ background:var(--card-soft); }

/* ════════════════
   RESPONSIVE
   ════════════════ */
@media (max-width:860px){
  .windowBar{ height:auto; flex-wrap:wrap; padding:10px 12px; gap:8px; }
  .windowBarRight{ flex-wrap:wrap; }
  .userPinBox{ order:-1; width:100%; border-radius:8px; padding:6px 10px; }
  .userPinInput{ width:auto; flex:1; }
  .controlRow{ flex-wrap:wrap; padding:10px 12px; gap:10px; }
  #timerDisplay{ font-size:20px !important; }
  .timerReadout.timer-running #timerDisplay{ font-size:26px !important; }
  .taskControl{ flex-wrap:wrap; }
  .editorCard{ padding:0 12px; }
  .logCard{ margin:0 12px 20px; }
  .footerHelp{ left:12px; right:12px; }
}