@font-face{
  font-family:'MyDisplay';
  src:url('../../src/assets/fonts/ExplorerCondensed-Bold.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ========================================================================
   Alpine Prism design system
   Palette: Abyss Teal #042736 · Deep Fjord #083B4F · Glacier Cyan #00A8FF
            Alpine Red #EF4444 · Alpine White #FFFFFF · Ice White #E2E8F0
   Sharp geometry (0 border-radius), stencil display type, faded image edges,
   low-poly "Alpine Prism" background, seamless light/dark theming.
   ========================================================================== */

:root{
  /* palette (theme-independent) */
  --abyss-teal:  #042736;
  --deep-fjord:  #083B4F;
  --glacier:     #00ace1;
  --alpine-red:  #EF4444;
  --alpine-white:#FDFDFF;
  --ice-white:   #E2E8F0;

  --radius: 0px;
  --accent: var(--glacier);
  --danger: var(--alpine-red);

  --font-display: 'Anton', 'Inter', system-ui, sans-serif;
  --font-titles: 'MyDisplay', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ---- dark theme values (default) ---- */
  --bg: var(--abyss-teal);
  --surface: var(--deep-fjord);
  --surface-2: #0a4459;
  --border: rgba(226,232,240,0.10);
  --border-strong: rgba(226,232,240,0.22);
  --text: var(--ice-white);
  --text-heading: var(--alpine-white);
  --text-dim: rgba(226,232,240,0.66);
  --text-faint: rgba(226,232,240,0.42);
  --fade-color: var(--abyss-teal);
  --prism-color: var(--glacier);
  --prism-opacity: 0.045;
  --card-shadow: none;
  --header-surface: var(--surface);
  --button-text: #04202c;
  color-scheme: dark;
}

:root[data-theme="light"]{
  --bg: var(--alpine-white);
  --surface: var(--alpine-white);
  --surface-2: #F3F6F8;
  --border: rgba(4,39,54,0.10);
  --border-strong: rgba(4,39,54,0.28);
  --text: var(--abyss-teal);
  --text-heading: var(--abyss-teal);
  --text-dim: rgba(4,39,54,0.62);
  --text-faint: rgba(4,39,54,0.40);
  --fade-color: var(--alpine-white);
  --prism-color: var(--deep-fjord);
  --prism-opacity: 0.05;
  --card-shadow: 0 10px 30px rgba(4,39,54,0.10), 0 2px 8px rgba(4,39,54,0.06);
  --header-surface: var(--deep-fjord);
  --button-text: #042736;
  color-scheme: light;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--bg);
  color:var(--text);
  font-family: var(--font-body);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  position:relative;
  transition: background-color .2s ease, color .2s ease;
  display:flex;
  flex-direction:column;
}
/* Whichever screen is showing (login or app) grows to fill available space,
   pushing the footer down to the bottom edge of the viewport instead of
   leaving it stranded right under short content like the login card. */
#app-screen{ flex:1; }
.app-footer{ margin-top:auto; }

/* ---- Alpine Prism background pattern ---- */
.prism-bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  pointer-events:none;
  color: var(--prism-color);
  opacity: var(--prism-opacity);
}
.prism-bg polygon{ fill: currentColor; }

.wrap{
  max-width:920px;
  margin:0 auto;
  padding:48px 20px 100px;
  position:relative;
}
header.top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:36px;
  border-bottom:1px solid var(--border);
  padding-bottom:18px;
}
header.top .brand{
  font-family: var(--font-display);
  font-weight:400;
  font-size:30px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--text-heading);
}
header.top .brand em{
  color:var(--accent);
  font-style:normal;
}
header.top .sub{
  font-size:11px;
  color:var(--text-faint);
  margin-top:4px;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
#signout{
  background:none;
  border:1px solid var(--border);
  border-radius: var(--radius);
  color:var(--text-dim);
  font-size:12px;
  padding:7px 14px;
  cursor:pointer;
  font-family: var(--font-body);
  letter-spacing:0.03em;
  text-transform:uppercase;
}
#signout:hover{border-color:var(--border-strong); color:var(--text);}

/* ---- theme toggle ---- */
.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:none;
  color:var(--text-dim);
  cursor:pointer;
  font-size:14px;
  line-height:1;
}
.theme-toggle:hover{border-color:var(--border-strong); color:var(--accent);}
.theme-toggle .tt-icon{display:none;}
:root:not([data-theme="light"]) .theme-toggle .tt-moon{display:inline-flex;}
:root[data-theme="light"] .theme-toggle .tt-sun{display:inline;}
.theme-toggle-row{
  display:flex;
  justify-content:flex-end;
  margin-bottom:8px;
}
.header-actions{display:flex; gap:8px; align-items:center;}

/* Crescent moon, drawn with a mask so it reads cleanly at small sizes and
   inherits the toggle's current color instead of relying on a glyph that
   renders inconsistently across platforms/fonts. */
.tt-icon.tt-moon{
  align-items:center;
  justify-content:center;
}
.moon-crescent{
  display:inline-block;
  width:13px;
  height:13px;
  border-radius:50%;
  background:currentColor;
  transform:rotate(30deg);
  -webkit-mask-image: radial-gradient(circle at 62% 32%, transparent 43%, #000 44%);
  mask-image: radial-gradient(circle at 62% 32%, transparent 43%, #000 44%);
}

/* ---- Login ---- */
#login-screen{
  max-width:480px;
  width:min(92vw, 480px);
  margin:100px auto auto;
  padding:32px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  position:relative;
  z-index:1;
}
#login-screen h1{
  font-family: var(--font-display);
  text-transform:uppercase;
  letter-spacing:0.02em;
  font-size:26px;
  font-weight:400;
  margin:0 0 6px;
  color:var(--text-heading);
}
#login-screen p{color:var(--text-dim); font-size:13px; margin: 0 0 32px;}
.field{margin-bottom:14px;}
.field label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-faint);
  margin-bottom:6px;
}
input[type=email], input[type=password], input[type=text], input[type=number], input[type=date], select{
  width:100%;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius: var(--radius);
  color:var(--text);
  padding:10px 12px;
  font-family: var(--font-body);
  font-size:14px;
}
select{
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:14px;
  padding-right:32px;
}
:root:not([data-theme="light"]) select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%238b9096' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M5.5 7.5l4.5 4.5 4.5-4.5'/%3E%3C/svg%3E");
}
:root[data-theme="light"] select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23083B4F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M5.5 7.5l4.5 4.5 4.5-4.5'/%3E%3C/svg%3E");
}
select option{
  background:var(--surface-2);
  color:var(--text);
}
input::placeholder{
  color: var(--text-faint);
  opacity: 1; /* Firefox dims placeholders by default; this keeps it consistent cross-browser */
}
select:disabled, input:disabled{opacity:0.6; cursor:default;}
input:focus, .theme-toggle:focus-visible, .btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
  border-color:var(--accent);
}
button{font-family: var(--font-body);}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:var(--surface-2);
  color:var(--text);
  padding:10px 20px;
  font-size:14px;
  font-weight:500;
  letter-spacing:0.01em;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.btn:hover{border-color:var(--border-strong);}
.btn:disabled{opacity:0.4; cursor:default;}
.btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--button-text);
  font-weight:600;
}
.btn.primary:hover{background:#33bcff;}
.btn.running{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--button-text);
  font-weight:600;
}
.btn.danger{color:var(--danger); border-color:var(--danger); background:none; padding:6px 10px; font-size:12px;}
.btn.danger:hover{background:rgba(239,68,68,0.10);}
.btn.ghost{background:none; border-color:transparent; color:var(--text-dim); padding:6px 10px; font-size:12px;}
.btn.ghost:hover{color:var(--text); border-color:var(--border);}
#error-msg{color:var(--danger); font-size:13px; margin-top:10px; min-height:16px;}

/* ---- Timer card ---- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding:28px;
  margin-bottom:24px;
  position:relative;
  z-index:1;
}
.timer-status{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--text-faint);
  margin-bottom:10px;
}
.dot{
  width:8px; height:8px;
  background:var(--text-faint);
}
.dot.running{background:var(--accent); animation:pulse 1.6s infinite;}
.dot.paused{background:var(--text-dim);}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,168,255,0.45);}
  50%{box-shadow:0 0 0 6px rgba(0,168,255,0);}
}
.timer-display{
  font-family: var(--font-mono);
  font-size:56px;
  font-weight:500;
  letter-spacing:0.01em;
  line-height:1;
  margin-bottom:20px;
  font-variant-numeric:tabular-nums;
  color:var(--text-heading);
}
.timer-note{margin-bottom:18px;}
.timer-actions{display:flex; gap:10px; flex-wrap:wrap;}
.project-row{
  display:flex;
  gap:10px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.project-row .col{flex:1; min-width:150px;}
.project-row .rate-col{max-width:130px; min-width:110px;}
.project-row .currency-col{max-width:90px; min-width:80px;}
#new-project-row{display:none; gap:8px; margin-bottom:14px;}
#new-project-row.show{display:flex;}
#project-error{color:var(--danger); font-size:12px; margin:-8px 0 14px; min-height:14px;}

/* ---- Summary ---- */
.summary-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.summary-total .label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--text-faint);
  margin-bottom:6px;
}
.filters{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap;}
.filters .field{margin-bottom:0;}
.filters input, .filters select{width:140px; font-size:13px; padding:8px 10px;}
.filters .btn{padding:8px 14px; font-size:13px;}

.summary-value-lines{
  font-family: var(--font-mono);
  font-size:22px;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  line-height:1.4;
}
.summary-value-lines .line{white-space:nowrap;}
.breakdown{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.breakdown-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--text-faint);
  margin-bottom:10px;
}
.breakdown-row{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  padding:5px 0;
  color:var(--text-dim);
}
.breakdown-row .b-project{color:var(--text);}
.breakdown-row .b-amount{font-family: var(--font-mono); font-variant-numeric:tabular-nums;}

.badge{
  display:inline-block;
  font-size:11px;
  padding:2px 9px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius: var(--radius);
  color:var(--text-dim);
  white-space:nowrap;
}

/* ---- Export status indicator ----
   Quiet, low-contrast pill that sits flush with the rest of the entry's
   metadata instead of reading as a separate loud "badge". Pending entries
   stay near-invisible (faint dot + ellipsis); exported ones pick up a hint
   of accent color on the dot only, so the row itself doesn't shout. */
.export-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family: var(--font-mono);
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-faint);
  line-height:1;
  white-space:nowrap;
}
.export-pill .export-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--text-faint);
  flex-shrink:0;
  transition:background-color .15s ease;
}
.export-pill.exported{color:var(--text-faint);}
.export-pill.exported .export-dot{background:var(--accent);}
.export-pill.pending .export-dot{
  animation:pulse-faint 2s infinite;
}
@keyframes pulse-faint{
  0%,100%{opacity:0.4;}
  50%{opacity:0.9;}
}

/* ---- Entries ---- */
.entries-head{
  font-family: var(--font-titles);
  text-transform:uppercase;
  letter-spacing:0.02em;
  font-size:17px;
  color:var(--text-heading);
  margin:32px 0 10px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.speckled{filter:url(#distress-speckles);}
.entries-head .count{font-family: var(--font-mono); font-size:12px; color:var(--text-faint); text-transform:none; letter-spacing:0;}
.entry{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 4px;
  border-bottom:1px solid var(--border);
}
.entry:last-child{border-bottom:none;}
.entry-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.entry-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex-wrap:wrap;
}
.entry-right{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
}
.entry .num{
  font-family: var(--font-mono);
  color:var(--text-faint);
  font-size:12px;
  flex-shrink:0;
}
.entry .date-col{
  font-size:12px;
  color:var(--text-dim);
  font-family: var(--font-mono);
  white-space:nowrap;
  flex-shrink:0;
}
.entry .note-col{
  flex:1;
  font-size:13px;
  color:var(--text-dim);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.entry .note-col.empty{color:var(--text-faint); font-style:italic;}
.entry .dur-col{
  font-family: var(--font-mono);
  font-size:14px;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.entry .earn-col{
  font-family: var(--font-mono);
  font-size:13px;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.entry .actions{display:flex; gap:2px; flex-shrink:0;}
.empty-state{
  color:var(--text-faint);
  font-size:13px;
  padding:24px 4px;
  text-align:center;
  font-style:italic;
}
.edit-row{
  display:flex;
  gap:8px;
  align-items:center;
  padding:12px 4px;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.edit-row input[type=text]{flex:1; min-width:120px;}
.edit-row input[type=number]{width:80px;}
.edit-row .mini-label{font-size:11px; color:var(--text-faint);}

.hidden{display:none !important;}

#home-link{
  background:none;
  border:1px solid var(--border);
  border-radius: var(--radius);
  color:var(--text-dim);
  font-size:12px;
  padding:7px 14px;
  cursor:pointer;
  font-family: var(--font-body);
  text-decoration:none;
  display:inline-block;
}
#home-link:hover{border-color:var(--border-strong); color:var(--text);}

/* ---- Focus mode (session running) ---- */
body.session-active #summary-card,
body.session-active #statement-card,
body.session-active #entries-section{
  display:none;
}
body.session-active .timer-card{
  min-height:64vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
body.session-active .wrap{
  padding-bottom: 30px;
}
body.session-active .timer-status{justify-content:center;}
body.session-active .timer-display{
  font-size:88px;
  margin-bottom:10px;
}
body.session-active .session-meta{
  color:var(--text-dim);
  font-size:14px;
  margin-bottom:28px;
  min-height:20px;
}
.session-meta{display:none;}
body.session-active .session-meta{display:block;}

/* image masking: faded edges instead of hard borders, fading into the
   current background color (per-theme via --fade-color) */
#focus-visual{
  display:none;
  width:100%;
  max-width:280px;
  margin:0 0 28px;
  position:relative;
}
body.session-active #focus-visual{display:block;}
/* The gif itself fades to transparent at its edges (soft alpha mask), so the
   page background shows through directly instead of a hard-edged overlay
   sitting on top of it. */

#focus-visual-placeholder{
  display:none;
  width:100%;
  aspect-ratio:16/9;
  border:1px dashed var(--border-strong);
  align-items:center;
  justify-content:center;
  color:var(--text-faint);
  font-size:12px;
  text-align:center;
  padding:12px;
}

@media (max-width:480px){
  .timer-display{font-size:42px;}
  body.session-active .timer-display{font-size:56px;}
  .wrap{padding:32px 14px 80px;}
  header.top .brand{font-size:24px;}
}

/* ---- Statement setup ---- */
.statement-setup{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:16px;
}
.statement-setup .field.full{grid-column:1 / -1;}
#stmt-range-note{
  font-size:12px;
  color:var(--text-faint);
  margin-bottom:16px;
}
#stmt-range-note b{color:var(--text-dim); font-weight:600;}

/* ---- Print sheet overlay: always paper-themed, unaffected by app theme ---- */
#print-overlay{
  position:fixed;
  inset:0;
  background:#f4f2ee;
  z-index:1000;
  overflow-y:auto;
  padding:24px 0 60px;
}
#print-overlay.hidden{display:none;}
.print-toolbar{
  max-width:760px;
  margin:0 auto 18px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:0 20px;
}
.print-toolbar .btn{border-radius:0;}
/* The overlay's paper background (#f4f2ee) never changes with the app
   theme, but .btn's colors come from theme variables - in dark mode those
   resolve to light, low-contrast text/borders that all but disappear on
   the light paper background. Pin these buttons to fixed, paper-appropriate
   colors regardless of --theme so "Close" stays visible either way. */
.print-toolbar .btn{
  background:#ffffff;
  border-color:rgba(4,39,54,0.25);
  color:#083B4F;
}
.print-toolbar .btn:hover{
  border-color:rgba(4,39,54,0.5);
  background:#fbfbfa;
}
.print-toolbar .btn.primary{
  background:#00A8FF;
  border-color:#00A8FF;
  color:#04202c;
}
.print-toolbar .btn.primary:hover{
  background:#33bcff;
}
#print-sheet{
  max-width:760px;
  margin:0 auto;
  background:#ffffff;
  color:#1c1c1c;
  padding:48px;
  box-shadow:0 2px 20px rgba(4,39,54,0.15);
  font-family:'Inter', sans-serif;
}
#print-sheet h1{
  font-family: var(--font-display);
  text-transform:uppercase;
  letter-spacing:0.02em;
  font-size:26px;
  font-weight:400;
  margin:0 0 4px;
  color:#083B4F;
}
#print-sheet .print-sub{
  font-size:12px;
  color:#777;
  margin-bottom:24px;
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.print-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 24px;
  font-size:13px;
  margin-bottom:28px;
  padding-bottom:20px;
  border-bottom:1px solid #ddd;
}
.print-meta .m-label{color:#888; font-size:11px; text-transform:uppercase; letter-spacing:0.05em;}
.print-meta .m-value{font-weight:500;}
table.print-table{
  width:100%;
  border-collapse:collapse;
  font-size:12.5px;
  margin-bottom:8px;
}
table.print-table thead{display:table-header-group;}
table.print-table th{
  text-align:left;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#888;
  border-bottom:1px solid #ccc;
  padding:6px 8px;
}
table.print-table td{
  padding:6px 8px;
  border-bottom:1px solid #eee;
  vertical-align:top;
}
table.print-table tr{break-inside:avoid;}
table.print-table td.num, table.print-table th.num{text-align:right; font-variant-numeric:tabular-nums;}
.print-currency-block{
  margin-top:28px;
  padding-top:20px;
  border-top:2px solid #083B4F;
  break-inside:avoid;
}
.print-currency-block .pc-totals{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:16px;
}
.print-currency-block .pc-totals .big{
  font-family:'JetBrains Mono', monospace;
  font-size:22px;
  font-weight:600;
  color:#00A8FF;
}
.print-currency-block .pc-totals .lbl{font-size:11px; color:#888; text-transform:uppercase; letter-spacing:0.05em;}
.pc-qr-row{
  display:flex;
  align-items:center;
  gap:20px;
}
.pc-qr-row .pc-qr-canvas{
  border:1px solid #eee;
  width:150px;
  height:150px;
  flex-shrink:0;
}
.pc-qr-note{font-size:11px; color:#999; max-width:320px;}
#print-sheet .print-footer{
  margin-top:32px;
  font-size:11px;
  color:#aaa;
}

@media print{
  body *{visibility:hidden;}
  #print-overlay, #print-overlay *{visibility:visible;}
  #print-overlay{position:absolute; inset:0; background:#fff; padding:0;}
  #print-sheet{box-shadow:none; margin:0; max-width:none;}
  .no-print{display:none !important;}
}

/* ---- Site footer ----
   Sits on the same fixed Alpine Prism background as the rest of the page
   (no extra surface/shadow of its own - the low-poly pattern behind it
   already satisfies "weighty background" per the pattern's usage rule),
   separated only by a single hairline border to match header.top. Hidden
   in focus mode along with the other secondary chrome. */
.app-footer{
  border-top:1px solid var(--border);
  position:relative;
  z-index:1;
}
.footer-inner{
  max-width:920px;
  margin:0 auto;
  padding:28px 20px 40px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:18px;
}
.footer-brand{
  font-family: var(--font-display);
  font-weight:400;
  font-size:15px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--text-heading);
}
.footer-brand em{color:var(--accent); font-style:normal;}
.footer-tagline{
  font-size:11px;
  color:var(--text-faint);
  margin-top:4px;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.footer-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-family: var(--font-mono);
  font-size:11px;
  color:var(--text-faint);
  letter-spacing:0.02em;
  align-self: center;
}
.footer-meta .footer-sep{opacity:0.5;}
.footer-meta .footer-link{
  color:var(--text-faint);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.footer-meta .footer-link:hover{color:var(--accent); border-bottom-color:var(--accent);}

body.session-active .app-footer{display:none;}

@media (max-width:480px){
  .footer-inner{flex-direction:column; gap:14px; padding:24px 14px 32px;}
}