/* ==========================================================
   iFruit — design tokens
   ========================================================== */
:root{
  --bezel: #6b2730;
  --bezel-edge: #8a3540;
  --bezel-shadow: #3c151b;
  --screen-bg: #000000;
  --gold: #c23b42;
  --gold-light: #e2555c;
  --gold-dark: #8a1f24;
  --text-primary: #f5f5f7;
  --text-secondary: #9a9aa4;
  --text-muted: #6c6c76;
  --hairline: rgba(255,255,255,0.08);
  --surface: rgba(255,255,255,0.05);
  --surface-strong: rgba(255,255,255,0.09);
  --danger: #e0556a;

  --c-email-1:#6fc7ff; --c-email-2:#2f86c9;
  --c-messages-1:#3fd089; --c-messages-2:#1d8a57;
  --c-contacts-1:#5fa8ec; --c-contacts-2:#2f6bb0;
  --c-bank-1:#39c98c; --c-bank-2:#157049;
  --c-jobaccent-1:#ff8a5c; --c-jobaccent-2:#d9501f;
  --c-listjob-1:#ffcf5c; --c-listjob-2:#d99a1f;
  --c-settings-1:#a7abb4; --c-settings-2:#62656d;
  --c-camera-1:#c39bf2; --c-camera-2:#8456c9;
  --c-internet-1:#5fd6e3; --c-internet-2:#239aa8;
  --c-lifeinvader-1:#9bff7a; --c-lifeinvader-2:#3f9c2e;

  --font-display: 'Quicksand', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Space Mono', monospace;
}

/* Motywy — nadpisują akcent (pasek tytułu, przyciski, plomby) */
body[data-theme="blue"]{ --gold:#4f9eea; --gold-light:#7cc0ff; --gold-dark:#2f6bb0; }
body[data-theme="pink"]{ --gold:#e8628f; --gold-light:#ff8fb3; --gold-dark:#b03f68; }
body[data-theme="green"]{ --gold:#3fb878; --gold-light:#6fdb9f; --gold-dark:#247a4d; }

*{ box-sizing: border-box; }
[hidden]{ display:none !important; }
html,body{ height:100%; }
html{
  height:100%;
  overflow:hidden;
}
body{
  margin:0;
  font-family: var(--font-body);
  background: radial-gradient(ellipse at 50% 0%, #1c0a0d 0%, #0a050a 55%, #050308 100%);
  color: var(--text-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  position:relative;
  touch-action:none;
}

.ambient-glow{ display:none; }

button{ font-family: inherit; cursor:pointer; }
input, textarea{ font-family: inherit; }

/* ==========================================================
   Phone chassis — stylizowane 1:1 na wzór telefonu z GTA Online
   ========================================================== */
.phone{
  position:relative;
  z-index:1;
  width:340px;
  height:730px;
  max-height:92vh;
  background: linear-gradient(155deg, var(--bezel-edge), var(--bezel) 55%, var(--bezel-shadow));
  border-radius:22px;
  padding:10px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.35),
    0 0 0 1px rgba(0,0,0,0.25),
    0 2px 0 rgba(255,255,255,0.12) inset;
}

.phone__notch{ display:none; }

.phone__screen{
  position:relative;
  height:100%;
  border-radius:8px;
  overflow:hidden;
  background: var(--screen-bg);
  display:flex;
  flex-direction:column;
  isolation:isolate;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
}

.phone__home{ display:none; }

/* Pasek z logo iFruit */
.brandbar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 0 4px;
}
.brandbar__mark{ width:14px; height:14px; }
.brandbar__text{
  font-family: var(--font-display); font-weight:700; font-size:14px;
  color:#fff; letter-spacing:.2px;
}

/* Pasek statusu: sygnał, pogoda, dzień, godzina, bateria */
.statusbar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2px 14px 8px;
  font-family: var(--font-body);
  font-size:13px;
  font-weight:600;
  color: #fff;
  z-index:2;
}
.statusbar__left{ display:flex; align-items:center; gap:6px; }
.statusbar__icons{ display:flex; align-items:center; gap:6px; }
.icon-signal, .icon-battery, .icon-weather{ width:16px; height:12px; fill: #fff; color: #fff; }
.icon-weather{ width:14px; height:14px; }
.statusbar__time{ font-variant-numeric: tabular-nums; }

/* ==========================================================
   Generic screen / app shell
   ========================================================== */
.screen{
  display:none;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  z-index:1;
}
.screen.is-active{ display:flex; }

.app-header{
  flex:0 0 auto;
  padding:10px 14px;
  text-align:center;
  font-family: var(--font-display);
  font-weight:700;
  font-size:18px;
  color:#fff;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-dark));
  border-top: 1px solid rgba(255,255,255,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.app-header__title{
  margin:0;
  font-family: var(--font-display);
  font-weight:700;
  font-size:18px;
  letter-spacing:.2px;
}

.app-body:not([hidden]){
  flex:1 1 auto;
  overflow-y:auto;
  padding:14px;
  -webkit-overflow-scrolling: touch;
  touch-action:pan-y;
  overscroll-behavior:contain;
}
.app-body--center:not([hidden]){
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  gap:10px;
}
.app-body--nopad{ padding:0; }

.empty-state{ text-align:center; margin-top:40px; color: var(--text-secondary); }
.empty-state__sub{ font-size:13px; color: var(--text-muted); }

/* Blokada: brak email/telefonu */
.setup-gate{
  text-align:center; padding:40px 24px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.setup-gate__icon{ font-size:34px; }
.setup-gate__title{ font-family: var(--font-display); font-weight:700; font-size:16px; margin:0; }
.setup-gate__text{ font-size:13px; color: var(--text-secondary); line-height:1.5; margin:0; }
.setup-gate__btn{
  margin-top:8px;
  border:none; border-radius:18px; padding:10px 22px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color:#fff; font-weight:700; font-size:13px;
}

/* ==========================================================
   Dolny pasek: akcje kontekstowe + nawigacja
   ========================================================== */
.actionbar{
  flex:0 0 auto;
  display:flex;
  border-top:1px solid rgba(255,255,255,0.08);
  background: #0a0a0a;
}
.actionbar__btn{
  flex:1 1 0;
  border:none; background:transparent;
  padding:9px 0;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.actionbar__btn:not(:last-child)::after{
  content:""; position:absolute; right:0; top:20%; bottom:20%;
  width:1px; background: rgba(255,255,255,0.08);
}
.actionbar__btn svg{ width:19px; height:19px; }
.actionbar__btn--refresh svg{ color:#9aa0ab; }
.actionbar__btn--plus svg{ color:#4fa8ff; }
.actionbar__btn--undo svg{ color:#e0556a; }
.actionbar__btn:active svg{ transform: scale(0.85); }

.navbar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  background: #060606;
  padding:10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
}
.navbar__btn{
  flex:1 1 0;
  border:none; background:transparent;
  display:flex; align-items:center; justify-content:center;
  color:#cfd2d8;
}
.navbar__btn svg{ width:20px; height:20px; }
.navbar__home{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 55%, var(--gold-dark) 100%);
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
  margin:0 auto;
}
.navbar__home svg{ width:16px; height:16px; color:#fff; }
.navbar__btn:active, .navbar__home:active{ transform: scale(0.88); }

/* ==========================================================
   Home screen
   ========================================================== */
#screen-home{ padding-bottom:6px; }

.app-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px 16px;
  padding:0 24px;
}
.app-icon{
  background:none; border:none; color:var(--text-primary);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition: transform .12s ease;
}
.app-icon:active{ transform: scale(0.92); }
.app-icon__glyph{
  position:relative;
  width:60px; height:60px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:
    0 5px 10px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,0,0,0.4),
    0 1px 0 rgba(255,255,255,0.35) inset;
  overflow:hidden;
}
.app-icon__glyph::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:46%;
  background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0));
  pointer-events:none;
}
.app-icon__glyph svg{ width:28px; height:28px; color:#fff; position:relative; z-index:1; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); }
.app-icon__label{
  font-size:11px; color: var(--text-secondary); font-family: var(--font-body); font-weight:600;
}

.app-icon__glyph--email{ background: linear-gradient(165deg, var(--c-email-1), var(--c-email-2)); }
.app-icon__glyph--messages{ background: linear-gradient(165deg, var(--c-messages-1), var(--c-messages-2)); }
.app-icon__glyph--contacts{ background: linear-gradient(165deg, var(--c-contacts-1), var(--c-contacts-2)); }
.app-icon__glyph--bank{ background: linear-gradient(165deg, var(--c-bank-1), var(--c-bank-2)); }
.app-icon__glyph--listjob{ background: linear-gradient(165deg, var(--c-listjob-1), var(--c-listjob-2)); }
.app-icon__glyph--settings{ background: linear-gradient(165deg, var(--c-settings-1), var(--c-settings-2)); }
.app-icon__glyph--camera{ background: linear-gradient(165deg, var(--c-camera-1), var(--c-camera-2)); }
.app-icon__glyph--internet{ background: linear-gradient(165deg, var(--c-internet-1), var(--c-internet-2)); }
.app-icon__glyph--lifeinvader{ background: linear-gradient(165deg, var(--c-lifeinvader-1), var(--c-lifeinvader-2)); }

.app-notif-dot{
  position:absolute; top:-4px; right:-4px;
  width:14px; height:14px; border-radius:50%;
  background:#ff3b30;
  border:2px solid var(--screen-bg);
  z-index:10;
}
.app-notif-dot.has-count{
  width:auto; min-width:18px; height:18px;
  border-radius:9px; padding:0 4px;
  font-size:10px; font-weight:700; color:#fff;
  display:flex; align-items:center; justify-content:center;
  top:-5px; right:-5px;
}

/* ==========================================================
   Conversation / contact lists (shared)
   ========================================================== */
.conversation-list{ list-style:none; margin:0; padding:0; }
.conversation-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 4px;
  border-bottom:1px solid var(--hairline);
  cursor:pointer;
}
.conversation-item:active{ background: var(--surface); }
.avatar{
  flex:0 0 auto;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:15px;
  color:#fff;
}
.conversation-meta{ flex:1 1 auto; min-width:0; }
.conversation-meta__top{ display:flex; justify-content:space-between; gap:8px; }
.conversation-name{ font-weight:600; font-size:14.5px; }
.conversation-time{ font-size:11px; color: var(--text-muted); font-family: var(--font-mono); flex:0 0 auto; }
.conversation-preview{
  margin:2px 0 0; font-size:13px; color: var(--text-secondary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.unread-badge{
  flex:0 0 auto;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:10px;
  background: var(--gold);
  color:#1a1306;
  font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.contact-username{ font-size:12px; color: var(--text-muted); }

/* ==========================================================
   Thread view
   ========================================================== */
#threadView{ flex-direction:column; padding:0; }
#threadView:not([hidden]){ display:flex; }
.thread-messages{
  flex:1 1 auto; overflow-y:auto;
  display:flex; flex-direction:column; gap:8px;
  padding:14px;
}
.bubble{
  max-width:75%;
  padding:9px 13px;
  border-radius:16px;
  font-size:14px; line-height:1.4;
  word-wrap:break-word;
}
.bubble--mine{
  align-self:flex-end;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color:#241a06;
  border-bottom-right-radius:5px;
}
.bubble--theirs{
  align-self:flex-start;
  background: var(--surface-strong);
  border-bottom-left-radius:5px;
}
.bubble-time{ display:block; font-size:10px; opacity:.6; margin-top:3px; font-family: var(--font-mono); }

.thread-composer{
  flex:0 0 auto;
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-top:1px solid var(--hairline);
}
.thread-composer input{
  flex:1 1 auto;
  background: var(--surface);
  border:1px solid var(--hairline);
  border-radius:20px;
  padding:10px 16px;
  color: var(--text-primary);
  font-size:14px;
  outline:none;
}
.thread-composer input:focus{ border-color: var(--gold); }
.thread-send{
  flex:0 0 auto;
  width:38px; height:38px; border-radius:50%;
  border:none;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color:#241a06;
  font-size:15px;
  display:flex; align-items:center; justify-content:center;
}

.picker-hint{ font-size:12px; color: var(--text-muted); margin:2px 4px 8px; text-transform:uppercase; letter-spacing:1px; font-family: var(--font-mono); }

/* ==========================================================
   Maze Bank
   ========================================================== */
.bank-eyebrow{ margin:0; font-size:12px; color: var(--text-muted); text-transform:uppercase; letter-spacing:1.5px; font-family: var(--font-mono); }
.bank-balance{
  margin:4px 0 14px;
  font-family: var(--font-mono); font-weight:700;
  font-size:38px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bank-claim{
  padding:13px 28px;
  border-radius:24px; border:none;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color:#241a06; font-weight:700; letter-spacing:.4px; font-size:14px;
  text-transform:uppercase;
  box-shadow: 0 8px 20px rgba(217,164,65,0.3);
}
.bank-claim:disabled{
  background: var(--surface-strong); color: var(--text-muted);
  box-shadow:none; cursor:default;
}
.bank-note{ font-size:12.5px; color: var(--text-muted); min-height:16px; }
.bank-divider{ width:100%; height:1px; background: var(--hairline); margin:20px 0 16px; }
.bank-transfer-btn{
  padding:11px 24px; border-radius:20px; border:1px solid var(--hairline);
  background: var(--surface-strong); color: var(--text-primary);
  font-size:13px; font-weight:600; letter-spacing:.3px;
  transition: background .15s, border-color .15s;
}
.bank-transfer-btn:hover{ background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.18); }
.bank-transfer-panel{ gap:0 !important; }
.bank-transfer-fields{ display:flex; flex-direction:column; gap:10px; width:100%; margin:4px 0 14px; }
.bank-transfer-input{
  width:100%; padding:12px 14px; border-radius:14px;
  border:1px solid var(--hairline); background: var(--surface-strong);
  color: var(--text-primary); font-size:14px; font-family: var(--font-body);
  box-sizing:border-box;
  transition: border-color .15s;
}
.bank-transfer-input:focus{ outline:none; border-color: var(--gold); }
.bank-transfer-input::placeholder{ color: var(--text-muted); }
.bank-transfer-actions{ display:flex; gap:10px; width:100%; margin-bottom:10px; }
.bank-transfer-cancel{
  flex:1; padding:12px; border-radius:20px; border:1px solid var(--hairline);
  background: var(--surface); color: var(--text-secondary);
  font-size:13px; font-weight:600;
}
.bank-transfer-send{
  flex:2; padding:12px; border-radius:20px; border:none;
  background: linear-gradient(135deg, var(--c-bank-1), var(--c-bank-2));
  color:#fff; font-size:13px; font-weight:700; letter-spacing:.3px;
  box-shadow: 0 6px 16px rgba(57,201,140,0.3);
}
.bank-transfer-send:disabled{ background: var(--surface-strong); color: var(--text-muted); box-shadow:none; cursor:default; }
.bank-actions-row{ display:flex; gap:10px; width:100%; }
.bank-actions-row .bank-transfer-btn{ flex:1; text-align:center; }

.bank-history-list{ list-style:none; padding:0; margin:0; width:100%; }
.bank-history-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--hairline);
  gap:12px;
}
.bank-history-item:last-child{ border-bottom:none; }
.bank-history-meta{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.bank-history-who{ font-size:13px; font-weight:600; color: var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bank-history-title{ font-size:11px; color: var(--text-secondary); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bank-history-when{ font-size:11px; color: var(--text-muted); font-family: var(--font-mono); }
.bank-history-amount{ font-family: var(--font-mono); font-size:14px; font-weight:700; white-space:nowrap; }
.bank-history-item--out .bank-history-amount{ color: var(--danger); }
.bank-history-item--in  .bank-history-amount{ color: var(--c-bank-1); }
.bank-history-empty{ padding:40px 16px; text-align:center; color: var(--text-muted); font-size:13px; list-style:none; }

.msg-photo{
  display:block; max-width:200px; width:100%; border-radius:12px;
  margin-bottom:4px; object-fit:cover; cursor:pointer;
}
.bubble--mine .msg-photo{ border-radius:12px 4px 12px 12px; }
.bubble--theirs .msg-photo{ border-radius:4px 12px 12px 12px; }

.li-post-img{
  display:block; width:100%; max-height:280px; object-fit:cover;
  border-radius:14px; margin-top:8px; cursor:pointer;
}

.email-detail__body img{
  display:block; width:100%; max-height:300px; object-fit:cover;
  border-radius:12px; margin-top:10px;
}
.email-detail-actions{
  display:flex; justify-content:flex-end;
  padding:8px 16px 0;
}
.email-delete-btn{
  padding:6px 14px; border-radius:14px; border:1px solid rgba(224,85,106,0.4);
  background:rgba(224,85,106,0.1); color:var(--danger);
  font-size:12px; font-weight:600; cursor:pointer;
  transition:background .15s;
}
.email-delete-btn:hover{ background:rgba(224,85,106,0.2); }

.email-compose{ display:flex; flex-direction:column; gap:10px; padding:14px; }
.compose-field{ display:flex; flex-direction:column; gap:4px; }
.compose-label{ font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.8px; font-family:var(--font-mono); }
.email-compose-body{
  min-height:160px; resize:vertical;
  background:var(--surface-strong); border:1px solid var(--hairline);
  border-radius:14px; padding:12px 14px;
  color:var(--text-primary); font-family:var(--font-body); font-size:14px;
  transition:border-color .15s;
}
.email-compose-body:focus{ outline:none; border-color:var(--gold); }

/* ==========================================================
   Email
   ========================================================== */
.email-detail{ padding:4px; }
.email-detail__subject{ font-family: var(--font-display); font-weight:700; font-size:17px; margin:0 0 4px; }
.email-detail__meta{ font-size:12px; color: var(--text-muted); margin:0 0 16px; }
.email-detail__meta strong{ color: var(--text-secondary); font-weight:600; }
.email-detail__body{ font-size:14px; line-height:1.6; color: var(--text-primary); white-space:pre-line; }
.email-row .avatar{ flex-shrink:0; }
.email-row.is-unread .conversation-name{ font-weight:800; }
.email-row.is-unread::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background: var(--gold); flex:0 0 auto; align-self:center; margin-right:-4px;
}

/* ==========================================================
   Lifeinvader (uses .squawk-* class names shared with the feed UI)
   ========================================================== */
.squawk-composer{
  display:flex; flex-direction:column; gap:8px;
  background: var(--surface);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:10px;
  margin-bottom:14px;
}
.squawk-composer textarea{
  resize:none; min-height:54px;
  background:transparent; border:none; outline:none;
  color: var(--text-primary); font-size:14px; line-height:1.4;
}
.squawk-composer button{
  align-self:flex-end;
  padding:7px 16px; border-radius:16px; border:none;
  background: linear-gradient(135deg, var(--c-lifeinvader-1), var(--c-lifeinvader-2));
  color:#0e2406; font-weight:700; font-size:12.5px;
}
.squawk-feed{ list-style:none; margin:0; padding:0; }
.squawk-post{ display:flex; gap:10px; padding:11px 2px; border-bottom:1px solid var(--hairline); }
.squawk-post__body{ flex:1 1 auto; min-width:0; }
.squawk-post__head{ display:flex; gap:6px; align-items:baseline; flex-wrap:wrap; }
.squawk-post__name{ font-weight:700; font-size:13.5px; }
.squawk-post__handle, .squawk-post__time{ font-size:12px; color: var(--text-muted); }
.squawk-post__text{ margin:3px 0 0; font-size:13.5px; line-height:1.45; color: var(--text-primary); }

/* ==========================================================
   Akcje (Wkręć się / Lista akcji)
   ========================================================== */
.job-composer{
  display:flex; flex-direction:column; gap:8px;
  background: var(--surface);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:12px;
  margin-bottom:16px;
}
.job-composer input[type="text"]{
  background: rgba(0,0,0,0.25); border:1px solid var(--hairline); border-radius:10px;
  padding:10px 12px; color: var(--text-primary); font-size:14px; outline:none;
}
.job-composer input[type="text"]:focus{ border-color: var(--gold); }
.job-composer__row{ display:flex; gap:8px; }
.job-composer__row select, .job-composer__row input[type="number"]{
  background: rgba(0,0,0,0.25); border:1px solid var(--hairline); border-radius:10px;
  padding:8px 8px; color: var(--text-primary); font-size:13px; outline:none;
}
.job-composer__row select{ flex:1.4 1 0; }
.job-composer__row input[type="number"]{ flex:0.8 1 0; width:0; }
.job-composer__row button{
  flex:1 1 0;
  border:none; border-radius:10px;
  background: linear-gradient(135deg, var(--c-jobaccent-1), var(--c-jobaccent-2));
  color:#2a0f02; font-weight:700; font-size:13px;
}

.job-feed{ list-style:none; margin:0 0 18px; padding:0; }
.job-card{
  background: var(--surface);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:12px;
  margin-bottom:10px;
}
.job-card__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.job-card__title{ font-weight:700; font-size:14.5px; margin:0; }
.job-card__type{
  flex:0 0 auto;
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  padding:3px 9px; border-radius:10px;
  background: linear-gradient(135deg, var(--c-jobaccent-1), var(--c-jobaccent-2));
  color:#2a0f02;
}
.job-card__meta{ font-size:12px; color: var(--text-muted); margin:4px 0 10px; }
.job-card__meta strong{ color: var(--text-secondary); }
.job-card__bottom{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.job-card__slots{ font-size:12px; color: var(--text-secondary); font-family: var(--font-mono); }
.job-card__join{
  border:none; border-radius:14px; padding:7px 16px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color:#241a06; font-weight:700; font-size:12.5px;
}
.job-card__join:disabled{ background: var(--surface-strong); color: var(--text-muted); }
.job-card__delete{
  border:none; border-radius:14px; padding:7px 14px;
  background: rgba(224,85,106,0.14); color: var(--danger); font-weight:700; font-size:12px;
}
.job-card__joiners{ font-size:11.5px; color: var(--text-muted); margin-top:6px; }

/* ==========================================================
   Aparat (Kamera)
   ========================================================== */
.camera-viewfinder{
  margin:14px; border-radius:18px; overflow:hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(160deg, #2a2f3d, #14161d);
  display:flex; align-items:flex-end; justify-content:center;
  position:relative;
}
.camera-viewfinder::before{
  content:"●  APARAT — TRYB FOTO";
  position:absolute; top:10px; left:12px;
  font-family: var(--font-mono); font-size:9px; letter-spacing:.5px;
  color: rgba(255,255,255,0.35);
}
.camera-filter-row{ display:flex; gap:8px; padding:10px; position:absolute; top:0; right:0; }
.camera-filter{
  width:30px; height:30px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.25);
  cursor:pointer;
}
.camera-filter.is-active{ border-color: var(--gold); }

.camera-shutter{
  position:absolute; bottom:14px;
  width:60px; height:60px; border-radius:50%;
  border:3px solid rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background .12s, transform .1s;
}
.camera-shutter:active{ transform:scale(0.92); background:rgba(255,255,255,0.3); }
.camera-shutter__ring{
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,0.9);
  display:block;
}

.photo-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  padding:0 14px 14px;
}
.photo-card{
  position:relative; aspect-ratio:1/1; border-radius:14px;
  overflow:hidden; box-shadow: 0 6px 14px rgba(0,0,0,0.3);
  cursor:pointer;
}
.photo-card:active{ opacity:.85; }
.photo-card__caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:18px 9px 8px; font-size:11.5px; font-weight:600;
  background: linear-gradient(0deg, rgba(0,0,0,0.65), transparent);
  color:#fff; pointer-events:none;
}
.camera-empty-hint{
  grid-column: 1 / -1; text-align:center; padding:24px;
  font-size:12px; color:var(--text-muted); font-family:var(--font-mono);
}

.camera-share-overlay{
  position:absolute; inset:0; z-index:200;
  background:rgba(0,0,0,0.72); backdrop-filter:blur(6px);
  display:flex; align-items:flex-end; justify-content:center;
}
.camera-share-modal{
  background:var(--surface-strong); border-radius:24px 24px 0 0;
  width:100%; padding:20px 20px 32px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  border-top:1px solid var(--hairline);
}
.camera-share-preview{
  width:100%; max-height:160px; object-fit:cover;
  border-radius:14px; display:block;
}
.camera-share-label{
  font-size:12px; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:1.2px; font-family:var(--font-mono); margin-bottom:-4px;
}
.camera-share-buttons{ display:flex; gap:10px; width:100%; }
.camera-share-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:12px 8px; border-radius:16px; border:1px solid var(--hairline);
  background:var(--surface); color:var(--text-primary);
  font-size:12px; font-weight:600; cursor:pointer;
  transition:background .15s;
}
.camera-share-btn:hover{ background:var(--surface-strong); }
.camera-share-btn__icon{ font-size:22px; }
.camera-share-cancel{
  width:100%; padding:13px; border-radius:20px; border:none;
  background:var(--surface); color:var(--text-secondary);
  font-size:14px; font-weight:600; cursor:pointer;
}

/* ==========================================================
   Internet — eyefind.info
   ========================================================== */
.browser{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.browser__bar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:6px;
  margin:8px 14px 0; padding:8px 12px;
  background: var(--surface); border-radius:10px;
  font-family: var(--font-mono); font-size:11.5px; color: var(--text-secondary);
}
.eyefind-overlay{
  flex:1 1 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:24px; text-align:center;
}
.eyefind-logo{
  font-family: var(--font-display); font-weight:700; font-size:30px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.eyefind-search{ display:flex; width:100%; gap:8px; }
.eyefind-search input{
  flex:1 1 auto; background: var(--surface); border:1px solid var(--hairline);
  border-radius:20px; padding:10px 16px; color: var(--text-primary);
  font-size:13px; font-family:var(--font-body);
  transition:border-color .15s;
}
.eyefind-search input:focus{ outline:none; border-color:var(--gold); }
.eyefind-search button{
  border:none; border-radius:20px; padding:10px 16px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color:#fff; font-size:12.5px; font-weight:700; cursor:pointer;
}
.eyefind-note{ font-size:12px; color: var(--text-muted); }

/* ==========================================================
   Settings
   ========================================================== */
.settings-section-title{
  font-size:12px; text-transform:uppercase; letter-spacing:1.4px;
  color: var(--gold-light); font-family: var(--font-mono);
  margin:18px 4px 8px;
}
.settings-section-title:first-of-type{ margin-top:2px; }
.settings-form{
  display:flex; flex-direction:column; gap:10px;
  background: var(--surface);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:14px;
}
.settings-submit{
  align-self:flex-start;
  padding:9px 18px; border-radius:18px; border:none;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color:#241a06; font-weight:700; font-size:13px;
}
.settings-feedback{ margin:0; font-size:12.5px; min-height:16px; color: var(--text-secondary); }
.settings-feedback.is-error{ color: var(--danger); }
.settings-feedback.is-success{ color: #5fd6a0; }

.theme-swatches{ display:flex; gap:10px; margin-top:2px; }
.theme-swatch{
  width:32px; height:32px; border-radius:50%;
  border:2px solid transparent;
  cursor:pointer;
}
.theme-swatch.is-active{ border-color: var(--text-primary); }
.theme-swatch--red{ background: linear-gradient(135deg, #e2555c, #8a1f24); }
.theme-swatch--blue{ background: linear-gradient(135deg, #7cc0ff, #2f6bb0); }
.theme-swatch--pink{ background: linear-gradient(135deg, #ff8fb3, #b03f68); }
.theme-swatch--green{ background: linear-gradient(135deg, #6fdb9f, #247a4d); }

.ringtone-row{ display:flex; gap:8px; }
.ringtone-row select{ flex:1 1 auto; }
.ringtone-preview{
  flex:0 0 auto;
  border:1px solid var(--hairline); border-radius:10px;
  background: var(--surface-strong); color: var(--text-secondary);
  font-size:12px; padding:0 12px;
}

.email-input-row{ display:flex; align-items:center; gap:0; }
.email-input-row .field__input{ border-radius:10px 0 0 10px; flex:1 1 auto; min-width:0; }
.email-input-row__suffix{
  flex:0 0 auto;
  background: var(--surface-strong);
  border:1px solid var(--hairline); border-left:none;
  border-radius:0 10px 10px 0;
  padding:10px 10px;
  font-size:12.5px; color: var(--text-muted);
  font-family: var(--font-mono);
}
#emailForm{ margin-top:10px; }

.settings-logout{
  display:block; text-align:center;
  margin:20px 0 6px;
  padding:11px; border-radius:18px;
  background: rgba(224,85,106,0.12);
  color: var(--danger); text-decoration:none; font-weight:700; font-size:13.5px;
}
.settings-disclaimer{
  text-align:center; font-size:11px; color: var(--text-muted);
  margin:16px 6px 4px; line-height:1.5;
}

/* shared field style (used in settings + auth) */
.field{ display:flex; flex-direction:column; gap:5px; }
.field__label{ font-size:11.5px; color: var(--text-secondary); }
.field__input{
  background: rgba(0,0,0,0.25);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:10px 12px;
  color: var(--text-primary);
  font-size:14px;
  outline:none;
}
.field__input:focus{ border-color: var(--gold); }
.field__input:disabled{ color: var(--text-muted); }

/* ==========================================================
   Auth (lock / login) screen
   ========================================================== */
.auth-screen{
  flex:1 1 auto;
  display:flex; flex-direction:column; align-items:center;
  padding:18px 24px 26px;
  overflow-y:auto;
  touch-action:pan-y;
  overscroll-behavior:contain;
}

.li-reply-toggle{
  display:inline-flex; align-items:center; gap:4px;
  margin-top:8px; padding:4px 10px; border-radius:12px;
  border:1px solid var(--hairline); background:transparent;
  color:var(--text-muted); font-size:11.5px; font-weight:600;
  cursor:pointer; transition:background .12s, color .12s;
}
.li-reply-toggle:hover{ background:var(--surface); color:var(--text-primary); }

.li-replies{
  margin-top:10px; padding-top:10px;
  border-top:1px solid var(--hairline);
  display:flex; flex-direction:column; gap:8px;
}

.li-reply{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px;
  font-size:12.5px; padding:4px 0;
}
.li-reply__name{ font-weight:700; color:var(--text-primary); }
.li-reply__body{ color:var(--text-secondary); flex:1 1 100%; word-break:break-word; }
.li-reply__time{ font-size:10.5px; color:var(--text-muted); font-family:var(--font-mono); margin-left:auto; }

.li-reply-composer{ display:flex; gap:6px; margin-top:8px; }
.li-reply-input{
  flex:1; background:var(--surface); border:1px solid var(--hairline);
  border-radius:16px; padding:7px 12px; color:var(--text-primary);
  font-size:12.5px; font-family:var(--font-body);
}
.li-reply-input:focus{ outline:none; border-color:var(--gold); }
.li-reply-send{
  width:32px; height:32px; border-radius:50%; border:none;
  background:var(--c-lifeinvader-1, #1877f2); color:#fff;
  font-size:14px; font-weight:700; cursor:pointer; flex-shrink:0;
}
.brand{ display:flex; flex-direction:column; align-items:center; margin:10px 0 18px; }
.brand__mark{ width:64px; height:64px; }
.brand__name{
  margin:8px 0 0;
  font-family: var(--font-display); font-weight:700; font-size:24px;
  letter-spacing:.5px;
}

.auth-card{
  width:100%;
  background: rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:22px;
  padding:18px;
  backdrop-filter: blur(6px);
}
.auth-tabs{ display:flex; gap:6px; margin-bottom:14px; background: rgba(0,0,0,0.25); border-radius:14px; padding:4px; }
.auth-tab{
  flex:1 1 0; border:none; background:transparent; color: var(--text-secondary);
  padding:9px 0; border-radius:11px; font-size:13px; font-weight:600;
}
.auth-tab.is-active{ background: var(--gold); color:#fff; }

.auth-form{ display:none; flex-direction:column; gap:11px; }
.auth-form.is-active{ display:flex; }
.auth-submit{
  margin-top:4px;
  padding:12px; border-radius:14px; border:none;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color:#fff; font-weight:700; font-size:14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.auth-error{
  background: rgba(224,85,106,0.12);
  color: var(--danger);
  border-radius:10px; padding:8px 12px;
  font-size:12.5px; margin:0 0 12px;
}
.auth-hint{ text-align:center; font-size:11.5px; color: var(--text-muted); margin:16px 0 0; }

/* ==========================================================
   Połączenia głosowe (calls.js)
   ========================================================== */
.call-overlay{
  position:absolute; inset:0; z-index:999;
  background: rgba(6,4,10,0.97);
  backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  border-radius: inherit;
}
.call-overlay__inner{
  display:flex; flex-direction:column; align-items:center;
  gap:12px; padding:32px 24px; width:100%; max-width:280px;
  text-align:center;
}
.call-overlay__avatar{
  width:80px !important; height:80px !important;
  font-size:28px !important; font-weight:700 !important;
  border-radius:50% !important;
  flex-shrink:0;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.08);
}
.call-overlay__name{
  font-family: var(--font-display);
  font-size:22px; font-weight:700;
  color: var(--text-primary);
  margin:4px 0 0;
}
.call-overlay__status{
  font-size:13px; color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing:.5px; margin:0;
}
.call-overlay__actions{
  display:flex; gap:28px; margin-top:24px; justify-content:center;
}
.call-btn{
  width:62px; height:62px; border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .12s, opacity .12s;
  flex-shrink:0;
}
.call-btn:active{ transform:scale(0.9); }
.call-btn svg{ width:26px; height:26px; }
.call-btn--accept{
  background: linear-gradient(145deg, #34c968, #20a04e);
  color:#fff;
  box-shadow: 0 6px 20px rgba(52,201,104,.45);
}
.call-btn--decline{
  background: linear-gradient(145deg, #e0556a, #b03040);
  color:#fff;
  box-shadow: 0 6px 20px rgba(224,85,106,.4);
}
.call-btn--mute{
  background: var(--surface-strong);
  color: var(--text-primary);
  border:1px solid var(--hairline);
}
.call-btn--mute.is-muted{
  background: var(--danger);
  color:#fff; border-color:transparent;
}

.contact-call-btn{
  flex-shrink:0; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--hairline);
  background: var(--surface);
  color: var(--c-bank-1);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s;
}
.contact-call-btn svg{ width:16px; height:16px; }
.contact-call-btn:hover{ background: rgba(57,201,140,0.15); }

/* ==========================================================
   Responsive — fill the viewport on real phones
   ========================================================== */
@media (max-width: 400px), (max-height: 740px){
  body{ padding:0; background:#000; }
  .phone{
    width:100vw; height:100vh; height:100dvh; max-height:none;
    border-radius:0; padding:0; box-shadow:none;
  }
  .phone__screen{ border-radius:0; height:100%; }
  .actionbar, .navbar{ position:relative; }
}