/* ════════════════════════════════════════════════════
   GelirGider — Mobil (PWA) tasarım
   ERP mobil tasarım dili: ink app bar, drawer, bottom tab,
   kartlar, bottom-sheet, pull-to-refresh, safe-area.
   ════════════════════════════════════════════════════ */
:root {
  --ink: #0e0f12;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #0f172a;
  --text-2: #64748b;
  --muted: #94a3b8;
  --border: #e9edf2;
  --accent: #111827;
  --green: #16a34a;
  --green-deep: #15803d;
  --green-soft: #dcfce7;
  --red: #dc2626;
  --red-soft: #fee2e2;
  --amber: #b45309;
  --amber-soft: #fef3c7;
  --blue: #2563eb;
  --blue-soft: #dbeafe;
  --violet: #7c3aed;
  --violet-soft: #ede9fe;
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.05);
  --radius: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), 10px);
  --appbar-h: 50px;
  --tabbar-h: 58px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; background: var(--bg); }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, system-ui, sans-serif;
  font-size: 15px; line-height: 1.4; -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain; touch-action: manipulation;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom));
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.tnum { font-variant-numeric: tabular-nums; }

/* ── App bar ── */
.m-appbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border); padding-top: var(--safe-top); }
.m-appbar-inner { height: var(--appbar-h); display: flex; align-items: center; justify-content: center; padding: 0 16px; position: relative; }
.m-appbar-title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; text-align: center; }
.m-appbar #mLoad { position: absolute; left: 58px; top: 50%; transform: translateY(-50%); }
.m-appbar-act { position: relative; width: 36px; height: 36px; border: none; background: var(--surface-2); color: var(--text); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.m-appbar-act:active { background: var(--border); }
.m-appbar-act.m-menu-btn { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
.m-appbar-acts { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; }

/* ── Layout ── */
.m-main { padding: calc(var(--safe-top) + var(--appbar-h) + 12px) 14px 22px; max-width: 640px; margin: 0 auto; }
.sec-mark { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 22px 2px 10px; }
.m-section-title { font-size: 13px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; margin: 18px 2px 10px; display: flex; align-items: center; justify-content: space-between; }

/* ── Greeting ── */
.m-greet { font-size: 18px; font-weight: 500; color: var(--text); letter-spacing: -.01em; margin: 2px 2px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-greet b { font-weight: 800; }

/* ── Hero (flat ink) ── */
.m-hero { background: var(--ink); color: #fff; border-radius: 18px; padding: 18px; margin-bottom: 14px; position: relative; overflow: hidden; }
.h-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.h-cap { font-size: 10px; font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,.5); text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.h-num { font-size: 33px; font-weight: 800; letter-spacing: -.03em; margin-top: 8px; line-height: 1; }
.h-num.neg { color: #fca5a5; }
.h-pct { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: #fff; background: rgba(255,255,255,.14); padding: 6px 12px; border-radius: 999px; }
.h-bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,.16); margin: 18px 0 11px; overflow: hidden; }
.h-bar span { display: block; height: 100%; background: #fff; border-radius: 999px; }
.h-meta { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.6); }
.h-meta b { color: #fff; font-weight: 700; }
.h-meta .inc { color: #4ade80; }
.h-meta .exp { color: #f87171; }

/* ── KPI grid ── */
.m-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.m-kpi .ico { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 8px; }
.m-kpi .k { font-size: 12px; color: var(--text-2); }
.m-kpi .v { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-top: 2px; }
.m-kpi .sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.ico.g { background: var(--green-soft); color: var(--green); }
.ico.r { background: var(--red-soft); color: var(--red); }
.ico.b { background: var(--blue-soft); color: var(--blue); }
.ico.a { background: var(--amber-soft); color: var(--amber); }
.ico.p { background: var(--violet-soft); color: var(--violet); }
.ico.s { background: #e2e8f0; color: #475569; }

/* ── Quick actions ── */
.m-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 4px; }
.m-quick button { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 6px; text-align: center; box-shadow: var(--shadow); display: block; font-family: inherit; }
.m-quick button:active { opacity: .65; }
.m-quick button .qi { width: 40px; height: 40px; margin: 0 auto 6px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.m-quick button .ql { font-size: 11px; font-weight: 600; color: var(--text-2); }

/* ── Card / list ── */
.m-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.m-card + .m-card { margin-top: 12px; }
.m-list-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--border); }
.m-list-head .t { font-size: 13px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.m-list-head .c { font-size: 11px; color: var(--muted); font-weight: 600; }
.m-list-row { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--border); }
.m-list-row:last-child { border-bottom: none; }
.m-list-row .av { width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; background: var(--surface-2); color: var(--text-2); }
.m-list-row .main { flex: 1; min-width: 0; }
.m-list-row .t1 { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-list-row .t2 { font-size: 12px; color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-list-row .right { text-align: right; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.m-list-row .amt { font-size: 15px; font-weight: 700; }
.m-list-row .amt.inc { color: var(--green); }
.m-list-row .amt.exp { color: var(--text); }
.m-list-row.tap:active { background: var(--surface-2); }
.m-row-del { width: 30px; height: 30px; border: none; border-radius: 9px; background: var(--red-soft); color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto; }
.m-list-add { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 13px; border: none; background: transparent; color: var(--green-deep); font-weight: 700; font-size: 14px; border-top: 1px dashed var(--border); }
.m-list-add:active { background: var(--surface-2); }

/* ── Badges ── */
.m-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.m-badge.green { background: var(--green-soft); color: var(--green); }
.m-badge.red { background: var(--red-soft); color: var(--red); }

/* ── Chips / search ── */
.m-chips { display: flex; gap: 7px; overflow-x: auto; padding: 1px 0 3px; -webkit-overflow-scrolling: touch; }
.m-chips::-webkit-scrollbar { display: none; }
.m-chip { flex: 0 0 auto; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 600; padding: 8px 15px; border-radius: 999px; }
.m-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.m-search { width: 100%; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 11px 14px; font-size: 15px; color: var(--text); margin-bottom: 10px; }
.m-search:focus { outline: none; border-color: var(--accent); }

/* ── Category distribution ── */
.m-cat { padding: 12px 15px; border-bottom: 1px solid var(--border); }
.m-cat:last-child { border-bottom: none; }
.m-cat-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.m-cat-ic { width: 28px; height: 28px; border-radius: 9px; background: var(--surface-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto; }
.m-cat-nm { font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-cat-amt { font-size: 13.5px; font-weight: 700; }
.m-cat-amt .p { font-size: 11px; color: var(--muted); font-weight: 600; margin-left: 3px; }
.m-cat-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.m-cat-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), #22c55e); }

/* ── Month list row ── */
.m-month { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--border); }
.m-month:last-child { border-bottom: none; }
.m-month .mm { width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto; background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.m-month.pos .mm { background: var(--green-soft); color: var(--green-deep); }
.m-month.neg .mm { background: var(--red-soft); color: var(--red); }
.m-month .main { flex: 1; min-width: 0; }
.m-month .t1 { font-size: 14.5px; font-weight: 700; }
.m-month .t2 { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.m-month .right { text-align: right; }
.m-month .net { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.m-month.pos .net { color: var(--green); }
.m-month.neg .net { color: var(--red); }
.m-month .pct { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* ── Aylık akış (mini bar chart) ── */
.m-flow { display: flex; align-items: flex-end; justify-content: space-between; gap: 3px; height: 132px; padding: 14px 12px 8px; }
.m-flow .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.m-flow .bars { display: flex; align-items: flex-end; gap: 2px; height: 96px; }
.m-flow .bars i { width: 6px; border-radius: 3px 3px 0 0; display: block; }
.m-flow .bars .bi-inc { background: var(--green); }
.m-flow .bars .bi-exp { background: #fca5a5; }
.m-flow .lb { font-size: 8.5px; color: var(--muted); font-weight: 600; }
.m-flow-legend { display: flex; gap: 16px; justify-content: center; padding: 0 0 12px; font-size: 11px; color: var(--text-2); }
.m-flow-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ── Market rate cards ── */
.m-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-rate { display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px; box-shadow: var(--shadow); }
.m-rate .ri { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 auto; }
.m-rate .rv { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.m-rate .rk { font-size: 11px; color: var(--text-2); margin-top: 1px; }

/* ── States ── */
.m-empty { text-align: center; color: var(--muted); font-size: 14px; padding: 40px 20px; }
.m-empty i { font-size: 30px; display: block; margin-bottom: 10px; opacity: .5; }
.m-spin { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: mspin .7s linear infinite; }
@keyframes mspin { to { transform: rotate(360deg); } }

/* ── Bottom tab bar ── */
.m-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(255,255,255,.96); backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--border); display: flex; padding-bottom: var(--safe-bottom);
  box-shadow: 0 -2px 12px rgba(15,23,42,.04); }
.m-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--tabbar-h); color: var(--muted); font-size: 10px; font-weight: 600;
  border: 0; outline: none; background: transparent; -webkit-appearance: none; appearance: none;
  padding: 5px 0 0; margin: 0; font-family: inherit; position: relative; transition: color .15s; touch-action: manipulation; }
.m-tab i { font-size: 20px; line-height: 1; transition: transform .15s; }
.m-tab.active { color: var(--green-deep); }
.m-tab.active i { transform: translateY(-1px); }
.m-tab.active::before { content: ''; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--green-deep); }
.m-tab:active { opacity: .6; }

/* ── FAB ── */
.m-fab { position: fixed; right: 18px; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px); z-index: 55;
  width: 54px; height: 54px; border-radius: 17px; border: none; background: var(--ink); color: #fff;
  font-size: 24px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(15,23,42,.28); }
.m-fab:active { transform: scale(.94); }

/* ── Bottom sheet ── */
.m-sheet-ov { position: fixed; inset: 0; z-index: 90; background: rgba(8,10,14,.45); opacity: 0; pointer-events: none; transition: opacity .22s; }
.m-sheet-ov.show { opacity: 1; pointer-events: auto; }
.m-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; background: var(--bg); border-radius: 22px 22px 0 0; max-height: 92vh; transform: translateY(101%); transition: transform .28s cubic-bezier(.32,.72,0,1); display: flex; flex-direction: column; }
.m-sheet.show { transform: none; }
.m-sheet-grip { width: 38px; height: 4px; border-radius: 999px; background: var(--border); margin: 9px auto 2px; flex: 0 0 auto; }
.m-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 12px; flex: 0 0 auto; }
.m-sheet-head h3 { font-size: 16px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.m-sheet-close { width: 30px; height: 30px; border: none; background: var(--surface-2); border-radius: 9px; font-size: 16px; color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.m-sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px 16px calc(24px + var(--safe-bottom)); }
.kv { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 13.5px; border-bottom: 1px solid var(--border); }
.kv:last-child { border-bottom: none; }
.kv span { color: var(--text-2); flex: 0 0 auto; }
.kv b { font-weight: 700; text-align: right; }

/* ── Form ── */
.m-form { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; }
.m-form label { font-size: 11px; font-weight: 700; color: var(--text-2); margin-top: 12px; text-transform: uppercase; letter-spacing: .3px; }
.m-inp { width: 100%; box-sizing: border-box; height: 48px; padding: 0 13px; border: 1.5px solid var(--border); border-radius: 12px; font-size: 16px; font-family: inherit; background: var(--surface); color: var(--ink); outline: none; -webkit-appearance: none; appearance: none; }
select.m-inp { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 36px; }
.m-inp:focus { border-color: var(--ink); }
.m-inp-row { display: flex; gap: 9px; }
.m-inp-row > * { flex: 1; min-width: 0; }
.m-submit { margin-top: 20px; height: 52px; border: none; border-radius: 14px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.m-submit:disabled { opacity: .6; }
.m-submit:active { opacity: .9; }
.m-submit.danger { background: var(--red); }
.m-del-link { border: none; background: transparent; color: var(--red); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }

/* ── Override grid (ay bazlı özel tutar) ── */
.ov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 4px; }
.ov-cell .ovl { font-size: 10px; color: var(--muted); font-weight: 600; margin: 0 0 3px 2px; }
.ov-cell .m-inp { height: 42px; font-size: 14px; padding: 0 10px; }
.ov-cell .m-inp.set { border-color: var(--green); background: var(--green-soft); }

/* ── Icon picker ── */
.ic-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; margin-top: 6px; }
.ic-pick { height: 46px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text-2); display: flex; align-items: center; justify-content: center; font-size: 19px; }
.ic-pick.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ── Profil ── */
.prof-head { display: flex; align-items: center; gap: 13px; padding: 4px 2px 18px; }
.prof-av { width: 56px; height: 56px; border-radius: 17px; background: var(--ink); color: #fff; font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.prof-name { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.prof-role { font-size: 12.5px; color: var(--text-2); margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.prof-link { display: flex; align-items: center; gap: 13px; width: 100%; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 13px; padding: 14px 15px; font-size: 15px; font-weight: 600; font-family: inherit; margin-bottom: 10px; box-shadow: var(--shadow); }
.prof-link > i:first-child { font-size: 18px; color: var(--text-2); }
.prof-link span { flex: 1; text-align: left; }
.prof-link .c { color: var(--muted); font-size: 13px; font-weight: 600; }
.prof-link.danger { color: var(--red); }
.prof-link.danger > i:first-child { color: var(--red); }
.prof-link:active { background: var(--surface-2); }

/* ── Pull-to-refresh ── */
.m-ptr { position: fixed; top: calc(var(--safe-top) + var(--appbar-h) - 14px); left: 50%; z-index: 40; transform: translateX(-50%);
  width: 34px; height: 34px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .15s; }
.m-ptr.ready, .m-ptr.on { opacity: 1; }
.m-ptr.on .m-spin { animation: mspin .7s linear infinite; }
.m-ptr .m-spin { animation: none; }
.m-ptr.ready .m-spin { transform: rotate(180deg); }

/* ── Drawer ── */
.m-drawer-ov { position: fixed; inset: 0; z-index: 95; background: rgba(8,10,14,.45); opacity: 0; pointer-events: none; transition: opacity .22s; }
.m-drawer-ov.show { opacity: 1; pointer-events: auto; }
.m-drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 96; width: 80%; max-width: 310px; background: var(--surface);
  transform: translateX(-101%); transition: transform .3s cubic-bezier(.32,.72,0,1); display: flex; flex-direction: column;
  box-shadow: 2px 0 30px rgba(15,23,42,.18); padding-top: var(--safe-top); }
.m-drawer.show { transform: none; }
.m-drawer-head { display: flex; align-items: center; gap: 12px; padding: 20px 18px 18px; border-bottom: 1px solid var(--border); }
.m-drawer-logo { width: 46px; height: 46px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 21px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.m-drawer-name { font-size: 17px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-drawer-sub { font-size: 12px; color: var(--text-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-drawer-nav { flex: 1; overflow-y: auto; padding: 10px 12px; }
.m-nav-item { display: flex; align-items: center; gap: 14px; width: 100%; border: none; background: transparent; padding: 13px; border-radius: 13px; font-size: 15px; font-weight: 600; color: var(--text); text-align: left; font-family: inherit; }
.m-nav-item i { font-size: 19px; width: 24px; text-align: center; color: var(--text-2); flex: 0 0 auto; }
.m-nav-item:active { background: var(--surface-2); }
.m-nav-item.active { background: var(--ink); color: #fff; }
.m-nav-item.active i { color: #fff; }
.m-nav-sep { height: 1px; background: var(--border); margin: 10px 14px; }
.m-drawer-foot { padding: 12px 16px calc(16px + var(--safe-bottom)); border-top: 1px solid var(--border); }
.m-drawer-logout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; border: 1px solid var(--border); background: var(--surface); color: var(--red); border-radius: 13px; font-weight: 700; font-size: 14px; font-family: inherit; }
.m-drawer-logout:active { background: var(--red-soft); }

/* ── Toast ── */
.m-toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px); transform: translateX(-50%) translateY(20px); background: var(--accent); color: #fff; padding: 11px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; opacity: 0; transition: .25s; z-index: 100; box-shadow: var(--shadow); pointer-events: none; max-width: 88%; text-align: center; }
.m-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── SPA sections ── */
.m-sec { display: none; animation: secIn .22s ease; }
.m-sec.active { display: block; }
@keyframes secIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Skeleton ── */
.sk { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 8px; }
.sk::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: shimmer 1.25s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.sk-line { height: 13px; margin: 7px 0; }
.sk-card { height: 86px; border-radius: var(--radius); margin-bottom: 10px; }
.sk-hero { height: 150px; border-radius: 18px; margin-bottom: 14px; }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--border); }
.sk-row .sk { flex: 1; }