@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --primary:#22C55E;
  --primary-dark:#16A34A;
  --primary-tint:#DCFCE7;
  --navy:#0F1E3D;
  --navy-dark:#0B1526;
  --ink:#1A1A2E;
  --ink-soft:#6B7280;
  --ink-faint:#9CA3AF;
  --line:#E5E7EB;
  --card:#FFFFFF;
  --paper:#F7F8FA;
  --success:#16A34A;
  --success-tint:#DCFCE7;
  --info:#3B82F6;
  --info-tint:#DBEAFE;
  --purple:#8B5CF6;
  --purple-tint:#EDE9FE;
  --warning:#D97706;
  --warning-tint:#FEF3C7;
  --danger:#DC2626;
  --danger-tint:#FEE2E2;
}
*{box-sizing:border-box;}
svg:not([width]){width:20px;height:20px;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--paper);
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  height:100%;
  overflow:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;}

.app-shell{
  max-width:480px;
  margin:0 auto;
  height:100%;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;background:var(--card);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.topbar .brand{display:flex;align-items:center;gap:8px;}
.topbar .brand .mark{
  width:32px;height:32px;border-radius:10px 10px 10px 3px;background:linear-gradient(135deg,var(--navy) 0%,var(--primary) 100%);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;
}
.topbar .brand .word{font-size:19px;font-weight:800;color:var(--navy);}
.topbar .brand .word b{color:var(--primary);font-weight:800;}
.topbar-icon-btn{
  width:38px;height:38px;border-radius:10px;border:none;background:transparent;
  display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;position:relative;
}
.topbar-icon-btn:hover{background:var(--paper);}
.topbar-badge{
  position:absolute;top:2px;right:2px;background:var(--primary);color:#fff;
  font-size:9.5px;font-weight:700;min-width:15px;height:15px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
}
.topbar-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--primary-tint);}

/* ---------- shared layout ---------- */
.screen{display:none;flex:1;flex-direction:column;min-height:0;}
.screen.active{display:flex;}
.screen-scroll{flex:1;overflow-y:auto;padding:16px 20px 24px;}
.screen-scroll::-webkit-scrollbar{width:0;}
.page-title{font-size:22px;font-weight:800;margin:4px 0 16px;color:var(--navy);}

.back-row{display:flex;align-items:center;gap:10px;padding:14px 20px 0;}
.back-btn{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--card);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);flex:0 0 auto;
}
.back-btn:hover{background:var(--paper);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;
  border-radius:12px;padding:13px 18px;font-family:inherit;font-weight:700;font-size:14.5px;
  cursor:pointer;transition:transform .1s ease,background .15s ease;
}
.btn:active{transform:scale(.98);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-ghost{background:transparent;color:var(--primary);border:1.5px solid var(--primary);}
.btn-ghost:hover{background:var(--primary-tint);}
.btn-dark{background:var(--navy);color:#fff;}
.btn-block{width:100%;}
.btn-small{padding:8px 12px;font-size:12.5px;border-radius:9px;}
.link-btn{background:none;border:none;color:var(--primary);font-weight:700;font-size:13.5px;cursor:pointer;padding:0;}

/* ---------- fields ---------- */
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;}
.field input,.field textarea,.field select{
  width:100%;border:1.5px solid var(--line);background:var(--card);border-radius:11px;
  padding:12px 14px;font-family:inherit;font-size:14.5px;color:var(--ink);resize:none;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint);}
.input-icon-row{position:relative;}
.input-icon-row svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-faint);}
.input-icon-row input{padding-left:40px;}

.role-toggle{display:flex;gap:8px;margin-bottom:16px;}
.role-toggle button{flex:1;padding:11px;border-radius:11px;border:1.5px solid var(--line);background:var(--card);cursor:pointer;font-weight:700;font-size:13px;color:var(--ink-soft);}
.role-toggle button.active{border-color:var(--primary);background:var(--primary-tint);color:var(--primary-dark);}

.chip-select{display:flex;flex-wrap:wrap;gap:8px;}
.chip-select .chip-opt{padding:8px 13px;border-radius:20px;border:1.5px solid var(--line);background:var(--card);font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
.chip-select .chip-opt.selected{border-color:var(--primary);background:var(--primary-tint);color:var(--primary-dark);}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:22px 0 12px;}
.section-title h3{font-size:16px;}
.section-title .see-all{font-size:12.5px;font-weight:700;color:var(--primary);cursor:pointer;display:flex;align-items:center;gap:2px;}

/* ---------- home hero ---------- */
.loc-search-row{display:flex;gap:10px;margin-bottom:16px;}
.location-pill{
  display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:10px 12px;color:var(--primary);flex:0 0 auto;max-width:44%;
}
.location-pill .loc-text{display:flex;flex-direction:column;line-height:1.2;overflow:hidden;}
.location-pill .loc-text small{font-size:10px;color:var(--ink-soft);font-weight:500;}
.location-pill .loc-text strong{font-size:12.5px;color:var(--navy);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.location-pill svg:last-child{color:var(--ink-faint);flex:0 0 auto;}
.search-pill{
  flex:1;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:0 14px;cursor:pointer;color:var(--ink-faint);font-size:13.5px;
}

.hero-banner{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-dark) 100%);
  border-radius:18px;padding:22px 20px;color:#fff;margin-bottom:20px;position:relative;overflow:hidden;
}
.hero-banner h2{font-size:23px;line-height:1.3;margin-bottom:14px;font-weight:800;}
.hero-banner h2 b{color:var(--primary);}
.hero-features{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.hero-features .hf{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#E4E9F2;font-weight:500;}
.hero-cta{background:var(--primary);}
.hero-cta:hover{background:var(--primary-dark);}

.ad-banner{display:block;width:100%;border-radius:14px;overflow:hidden;margin:0 0 16px;cursor:pointer;border:1px solid var(--line);}
.ad-banner img{width:100%;display:block;max-height:100px;object-fit:cover;}

.chip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.chip{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 8px;text-align:center;cursor:pointer;}
.chip:hover{border-color:var(--primary);}
.chip .chip-icon{
  width:44px;height:44px;border-radius:12px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:20px;
}
.chip .chip-title{font-size:12px;font-weight:700;color:var(--ink);}

.how-it-works-row{display:flex;align-items:flex-start;gap:4px;overflow-x:auto;padding-bottom:4px;}
.how-it-works-row::-webkit-scrollbar{height:0;}
.how-step{display:flex;flex-direction:column;align-items:center;text-align:center;width:112px;flex:0 0 auto;}
.how-step .num-icon{
  width:48px;height:48px;border-radius:50%;background:var(--primary-tint);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;font-size:19px;flex:0 0 auto;margin-bottom:8px;
}
.how-step .txt strong{display:block;font-size:12.5px;margin-bottom:2px;}
.how-step .txt span{font-size:11px;color:var(--ink-soft);line-height:1.35;}
.how-arrow{flex:0 0 auto;color:var(--ink-faint);margin-top:20px;}

.pro-card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:150px;cursor:pointer;}
.pro-card:hover{border-color:var(--primary);}
.pro-card .photo-wrap{position:relative;width:100%;height:110px;background:var(--primary-tint);}
.pro-card .photo-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.pro-card .verified-dot{
  position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--primary);
  color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid #fff;
}
.pro-card .body{padding:10px 12px 12px;}
.pro-card .name{font-size:13px;font-weight:700;}
.pro-card .role{font-size:11px;color:var(--ink-soft);margin-bottom:4px;}
.pro-card .rating{font-size:11.5px;color:var(--warning);font-weight:700;}
.pro-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;}
.pro-scroll::-webkit-scrollbar{height:0;}

.feature-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 8px;margin-top:20px;}
.fs-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;}
.fs-item span{font-size:10px;color:var(--ink-soft);font-weight:600;line-height:1.3;}

/* ---------- status pills ---------- */
.pill{font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:4px;text-transform:none;}
.pill.pending,.pill.awaiting_approval{background:var(--warning-tint);color:var(--warning);}
.pill.accepted,.pill.in_progress{background:var(--info-tint);color:var(--info);}
.pill.done{background:var(--success-tint);color:var(--success);}
.pill.canceled,.pill.rejected{background:var(--danger-tint);color:var(--danger);}

.badge-featured{font-size:9.5px;font-weight:800;background:var(--primary);color:#fff;padding:2px 7px;border-radius:6px;margin-left:6px;text-transform:uppercase;}
.badge-verified{font-size:10px;font-weight:700;background:var(--success-tint);color:var(--success);padding:3px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:4px;}

/* ---------- filter tabs ---------- */
.filter-tabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:14px;padding-bottom:2px;}
.filter-tabs::-webkit-scrollbar{height:0;}
.filter-tabs button{
  flex:0 0 auto;padding:9px 14px;border-radius:20px;border:1.5px solid var(--line);background:var(--card);
  font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:5px;
}
.filter-tabs button.active{background:var(--primary);border-color:var(--primary);color:#fff;}

.search-filter-row{display:flex;gap:10px;margin-bottom:14px;}
.search-filter-row .search-box{
  flex:1;display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--line);
  border-radius:11px;padding:10px 12px;
}
.search-filter-row .search-box input{border:none;background:transparent;outline:none;font-family:inherit;font-size:13.5px;width:100%;}
.search-filter-row .filter-btn{
  display:flex;align-items:center;gap:6px;background:var(--card);border:1.5px solid var(--line);border-radius:11px;
  padding:10px 14px;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;
}

/* ---------- request / job cards ---------- */
.req-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;cursor:pointer;}
.req-card:hover{border-color:var(--primary);}
.req-card .row1{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px;}
.req-card .title{font-weight:700;font-size:14.5px;}
.req-card .meta-row{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);margin-bottom:4px;}
.req-card .provider-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:10px;border-top:1px solid var(--line);}
.req-card .provider-row .who{display:flex;align-items:center;gap:8px;}
.req-card .provider-row .avatar-sm{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--primary-tint);}
.req-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto;}

/* ---------- ticket (proposals) ---------- */
.ticket{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px;}
.ticket-row{display:flex;gap:12px;align-items:flex-start;}
.avatar{width:52px;height:52px;border-radius:14px;background:linear-gradient(145deg,var(--navy),var(--navy-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex:0 0 auto;object-fit:cover;}
.ticket-info{flex:1;min-width:0;}
.ticket-info .name-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ticket-info .name{font-weight:700;font-size:15px;}
.stars{color:var(--warning);font-size:12.5px;font-weight:600;margin-top:2px;}
.ticket-divider{border-top:1.5px dashed var(--line);margin:14px 0 12px;}
.ticket-meta{display:flex;justify-content:space-between;align-items:baseline;}
.ticket-meta .price{font-size:20px;font-weight:800;color:var(--navy);}
.ticket-meta .prazo{font-size:12px;color:var(--ink-soft);}
.ticket-actions{display:flex;gap:10px;margin-top:14px;}
.ticket-actions .btn{flex:1;padding:11px;font-size:13px;}

/* ---------- how it works / stat grids ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.stat-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.stat-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 10px;text-align:center;}
.stat-box .icon{width:38px;height:38px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:16px;}
.stat-box .num{font-size:17px;font-weight:800;color:var(--navy);}
.stat-box .lab{font-size:10.5px;color:var(--ink-soft);margin-top:2px;line-height:1.3;}
.stat-box .delta{font-size:10.5px;font-weight:700;margin-top:3px;}
.stat-box .delta.up{color:var(--success);}
.stat-box .delta.down{color:var(--danger);}

/* ---------- shortcuts grid ---------- */
.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.shortcut-card{
  display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:12px;cursor:pointer;
}
.shortcut-card:hover{border-color:var(--primary);}
.shortcut-card .icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 auto;}
.shortcut-card .txt strong{display:block;font-size:12.5px;}
.shortcut-card .txt span{font-size:10.5px;color:var(--ink-soft);}

.list-item{
  display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid var(--line);cursor:pointer;
}
.list-item:last-child{border-bottom:none;}
.list-item .icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto;}
.list-item .txt{flex:1;min-width:0;}
.list-item .txt strong{display:block;font-size:13.5px;}
.list-item .txt span{font-size:11.5px;color:var(--ink-soft);}
.list-item .chev{color:var(--ink-faint);flex:0 0 auto;}

/* ---------- profile hero ---------- */
.profile-hero{display:flex;align-items:center;gap:16px;padding:6px 0 18px;}
.profile-hero .avatar-wrap{position:relative;flex:0 0 auto;}
.profile-hero .avatar-lg{width:74px;height:74px;border-radius:50%;object-fit:cover;background:var(--primary-tint);border:2px solid var(--line);}
.profile-hero .cam-btn{
  position:absolute;bottom:-2px;right:-2px;width:26px;height:26px;border-radius:50%;background:var(--primary);
  color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid #fff;cursor:pointer;
}
.profile-hero .info h3{font-size:18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.profile-hero .role-badge{font-size:11px;font-weight:700;background:var(--primary-tint);color:var(--primary-dark);padding:3px 10px;border-radius:20px;}
.profile-hero .contact-line{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft);margin-top:4px;}

.verified-card{
  display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:16px;margin-bottom:20px;
}
.verified-card .icon{width:44px;height:44px;border-radius:50%;background:var(--primary-tint);color:var(--primary);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.verified-card .txt{flex:1;}
.verified-card .txt strong{display:flex;align-items:center;gap:6px;font-size:14px;}
.verified-card .txt span{font-size:12px;color:var(--ink-soft);line-height:1.4;}

/* provider dark hero (dashboard) */
.provider-hero-dark{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-dark) 100%);border-radius:18px;
  padding:18px;color:#fff;margin-bottom:16px;
}
.provider-hero-dark .top-row{display:flex;align-items:center;gap:12px;}
.provider-hero-dark .avatar-lg{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.3);}
.provider-hero-dark .info{flex:1;}
.provider-hero-dark .info h3{font-size:16px;color:#fff;}
.provider-hero-dark .info span{font-size:12px;color:#C9D2E0;}
.provider-hero-dark .level{text-align:right;}
.provider-hero-dark .level .lab{font-size:10px;color:#9FB0CC;}
.provider-hero-dark .level .val{font-size:13px;font-weight:800;color:var(--primary);}
.provider-hero-dark .mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);}
.provider-hero-dark .mini-stats .m{text-align:center;}
.provider-hero-dark .mini-stats .m .n{font-size:14px;font-weight:800;}
.provider-hero-dark .mini-stats .m .l{font-size:9.5px;color:#9FB0CC;margin-top:2px;line-height:1.3;}

.earnings-summary-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px;}
.earnings-summary-card .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px;}
.earnings-summary-card .grid3 .g-lab{font-size:11px;color:var(--ink-soft);}
.earnings-summary-card .grid3 .g-val{font-size:16px;font-weight:800;color:var(--navy);margin-top:2px;}

.coin-promo-banner{
  background:linear-gradient(135deg,#3A2E0F 0%,#1A1408 100%);border-radius:16px;padding:18px;color:#fff;margin-bottom:16px;
}
.coin-promo-banner strong{display:block;font-size:15px;margin-bottom:4px;}
.coin-promo-banner p{font-size:12px;color:#D8CBAE;margin:0 0 12px;line-height:1.4;}

/* ---------- payment ---------- */
.pay-summary{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:18px;}
.pay-summary .pay-total-label{font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;}
.pay-summary .pay-total{font-size:32px;font-weight:800;color:var(--navy);margin:4px 0 0;}
.pay-method{display:flex;align-items:center;gap:12px;background:var(--card);border:1.5px solid var(--line);border-radius:13px;padding:13px 14px;margin-bottom:10px;cursor:pointer;}
.pay-method.selected{border-color:var(--primary);background:var(--primary-tint);}
.pay-method .pm-name{font-weight:600;font-size:14px;flex:1;}
.pay-method .pm-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;}
.pay-method.selected .pm-dot{border-color:var(--primary);background:var(--primary);box-shadow:inset 0 0 0 3px var(--primary-tint);}
.fee-note{display:flex;gap:8px;background:var(--info-tint);border-radius:12px;padding:11px 12px;font-size:12px;color:var(--navy);line-height:1.45;margin-bottom:18px;}
.qr-box{text-align:center;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:16px;}
.qr-box a{word-break:break-all;font-size:11px;color:var(--primary);}

.summary-list{margin:20px 0;}
.summary-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.summary-row span:first-child{color:var(--ink-soft);}
.summary-row span:last-child{font-weight:700;text-align:right;}
.confirm-hero{text-align:center;padding:20px 4px 10px;}
.confirm-check{width:60px;height:60px;border-radius:50%;background:var(--success-tint);color:var(--success);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.confirm-hero h2{font-size:19px;margin:0 0 6px;}
.confirm-hero p{color:var(--ink-soft);font-size:13px;margin:0;font-weight:400;}

/* ---------- messages ---------- */
.convo-card{display:flex;gap:12px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line);cursor:pointer;position:relative;}
.convo-card:hover{background:var(--paper);border-radius:12px;}
.convo-card .avatar{width:48px;height:48px;font-size:15px;border-radius:50%;flex:0 0 auto;}
.convo-text{flex:1;min-width:0;}
.convo-text .top-row{display:flex;justify-content:space-between;align-items:baseline;}
.convo-text .cname{font-weight:700;font-size:14px;}
.convo-text .ctime{font-size:11px;color:var(--ink-faint);}
.convo-text .cpreview{font-size:12.5px;color:var(--ink-soft);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.unread-badge{background:var(--primary);color:#fff;font-size:10.5px;font-weight:700;min-width:18px;height:18px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px;}

.chat-service-card{
  display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;margin:0 20px 14px;
}
.chat-service-card .icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto;}
.chat-service-card .txt strong{display:block;font-size:13px;}
.chat-service-card .txt .meta-line{font-size:11px;color:var(--ink-soft);display:flex;align-items:center;gap:6px;margin-top:3px;flex-wrap:wrap;}

.chat-body{flex:1 1 auto;overflow-y:auto;padding:14px 20px;display:flex;flex-direction:column;gap:10px;}
.bubble{max-width:78%;padding:10px 13px;border-radius:16px;font-size:13.5px;line-height:1.4;}
.bubble.them{background:var(--card);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px;}
.bubble.me{background:var(--primary-tint);color:var(--ink);align-self:flex-end;border-bottom-right-radius:4px;}
.bubble img{max-width:100%;border-radius:10px;display:block;margin-top:4px;}
.bubble-time{font-size:10px;color:var(--ink-faint);margin-top:3px;}
.chat-input-row{display:flex;gap:8px;align-items:center;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--card);flex:0 0 auto;}
.chat-input-row input{flex:1;border:1.5px solid var(--line);border-radius:22px;padding:10px 16px;font-family:inherit;font-size:13.5px;outline:none;}
.chat-input-row input:focus{border-color:var(--primary);}
.chat-icon-btn{width:38px;height:38px;border-radius:50%;background:var(--paper);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;color:var(--ink-soft);}
.send-btn{width:40px;height:40px;border-radius:50%;background:var(--primary);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;color:#fff;}
.send-btn:hover{background:var(--primary-dark);}

/* ---------- bottom nav ---------- */
.toolbox-nav{
  flex:0 0 auto;display:flex;background:var(--card);border-top:1px solid var(--line);
  padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px));position:sticky;bottom:0;
}
.toolbox-nav .slot{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;
  color:var(--ink-faint);cursor:pointer;background:transparent;border:none;font-family:inherit;
}
.toolbox-nav .slot.active{color:var(--primary);}
.toolbox-nav .slot svg{width:21px;height:21px;}
.toolbox-nav .slot span{font-size:10px;font-weight:600;}
.toolbox-nav .slot.raised{color:var(--primary-dark);}
.toolbox-nav .slot.raised .fab{
  width:50px;height:50px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-top:-24px;
  box-shadow:0 8px 18px -6px rgba(34,197,94,.6);border:3px solid var(--card);
}
.toolbox-nav .slot.raised .fab svg{width:22px;height:22px;}
.toolbox-nav .slot.raised span{margin-top:1px;}

.upload-box{border:1.5px dashed var(--line);border-radius:14px;padding:20px 14px;text-align:center;color:var(--ink-faint);font-size:13px;cursor:pointer;position:relative;}
.upload-box:hover{border-color:var(--primary);color:var(--primary-dark);}
.upload-box input{position:absolute;inset:0;opacity:0;cursor:pointer;}

.empty-state{text-align:center;padding:40px 24px;color:var(--ink-faint);}
.empty-state .glyph{font-size:32px;margin-bottom:10px;display:block;}
.empty-state p{font-size:13px;line-height:1.5;margin:0;}

.error-msg{color:var(--danger);font-size:12.5px;margin-top:8px;min-height:16px;}
.divider-or{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--ink-faint);font-size:11px;text-transform:uppercase;}
.divider-or::before,.divider-or::after{content:"";flex:1;height:1px;background:var(--line);}
.link-row{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:14px;}
.link-row a{color:var(--primary);font-weight:700;text-decoration:none;cursor:pointer;}

/* ---------- login ---------- */
.screen[data-screen="login"] .login-hero{
  background:var(--navy);color:#fff;padding:50px 24px 40px;text-align:center;border-radius:0 0 40% 40% / 0 0 30px 30px;
  position:relative;overflow:hidden;
}
.screen[data-screen="login"] .login-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:26px;background:var(--paper);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;transform:scaleX(1.4);
}
.screen[data-screen="login"] .login-mark{
  width:64px;height:64px;border-radius:18px 18px 18px 5px;background:linear-gradient(135deg,#3B6FE0 0%,var(--primary) 100%);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;
}
.screen[data-screen="login"] .login-mark span{color:#fff;font-weight:800;font-size:26px;}
.screen[data-screen="login"] .login-word{font-size:26px;font-weight:800;}
.screen[data-screen="login"] .login-word b{color:var(--primary);}
.screen[data-screen="login"] .login-tagline{font-size:12px;color:#C9D2E0;font-style:italic;margin-top:4px;}
.login-wrap{padding:8px 24px 24px;}
.login-wrap h1{font-size:22px;text-align:center;margin-bottom:4px;}
.login-wrap p.sub{text-align:center;color:var(--ink-soft);font-size:13.5px;margin:0 0 20px;font-weight:400;}

@media (max-width:480px){
  .app-shell{max-width:100%;}
}