/* Design v2: type (IBM Plex Sans Arabic, self-hosted), tokens, surfaces, controls, rail, tab bar, sheets, collection screen */
/* =====================================================================
   Design v2 — the look. Layered on top of the rules
   above: same screens, same buttons in the same places, a calmer and more
   premium surface. Delete this block to go back to the old look.
   ===================================================================== */

/* ---------- type: IBM Plex Sans Arabic, self-hosted (app/fonts, OFL) ---------- */
@font-face{font-family:"AZM Plex";font-weight:400;font-display:swap;src:url(../fonts/plex-ar-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"AZM Plex";font-weight:500;font-display:swap;src:url(../fonts/plex-ar-500.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"AZM Plex";font-weight:600;font-display:swap;src:url(../fonts/plex-ar-600.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"AZM Plex";font-weight:700;font-display:swap;src:url(../fonts/plex-ar-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"AZM Plex";font-weight:400;font-display:swap;src:url(../fonts/plex-la-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"AZM Plex";font-weight:500;font-display:swap;src:url(../fonts/plex-la-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"AZM Plex";font-weight:600;font-display:swap;src:url(../fonts/plex-la-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"AZM Plex";font-weight:700;font-display:swap;src:url(../fonts/plex-la-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokens ---------- */
:root{
  --ink:#13213A; --ink-soft:#34465F; --paper:#F2F3EE; --card:#FFFFFF;
  --nile:#11704F; --nile-tint:#E2F1EA; --brass:#B08436; --brass-tint:#F7EEDB;
  --clay:#B23C2A; --clay-tint:#FBE8E3; --line:#E0E3DA; --line-soft:#ECEEE8;
  --muted:#586374; --gold:#D6B46C;
  --r:12px; --r-lg:18px;
  --sh-1:0 1px 2px rgba(19,33,58,.05), 0 1px 3px rgba(19,33,58,.04);
  --sh-2:0 2px 8px rgba(19,33,58,.06), 0 12px 32px rgba(19,33,58,.08);
  --focus:0 0 0 3px rgba(17,112,79,.18);
}
body, body.ltr{ font-family:"AZM Plex","Noto Sans Arabic","Segoe UI",Tahoma,-apple-system,BlinkMacSystemFont,sans-serif; font-size:15px; line-height:1.55; background:var(--paper) }
.num{ font-feature-settings:"tnum" 1, "lnum" 1 }
h1,h2,h3,h4{ letter-spacing:-.01em }
:focus-visible{ outline:none; box-shadow:var(--focus); border-radius:10px }

/* ---------- surfaces ---------- */
.panel{ border:0; border-radius:var(--r-lg); box-shadow:var(--sh-1); margin-bottom:16px }
.panel > h3{ padding:15px 18px; font-size:15px; font-weight:700; border-bottom:1px solid var(--line-soft) }
.panel > h3 small{ font-size:12.5px }
.pbody{ padding:15px 18px }
.empty{ padding:34px 18px; font-size:14px; line-height:1.7 }

/* ---------- the Overview hero: the month at a glance ---------- */
.ledger{ position:relative; border:0; border-radius:22px; padding:22px 22px 18px; margin-bottom:16px; color:#fff; overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%, #24406A 0%, rgba(36,64,106,0) 55%), linear-gradient(160deg,#1A2C4A 0%,#13213A 55%,#0D182B 100%);
  box-shadow:0 10px 30px rgba(13,24,43,.28) }
.ledger-head{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:4px 12px; margin-bottom:16px }
.ledger-head .lbl{ grid-column:1 / -1; order:3 }
.ledger-head .big{ font-size:38px; font-weight:700; color:#fff; letter-spacing:-.025em }
.ledger-head .cur{ color:var(--gold); font-size:16px }
.ledger-head .lbl{ color:rgba(255,255,255,.72); font-size:13.5px }
.hero-rate{ text-align:end; line-height:1.1 }
.hero-rate b{ display:block; font-size:30px; font-weight:700; color:#fff; letter-spacing:-.02em }
.hero-rate span{ font-size:12px; color:rgba(255,255,255,.66) }
.ledger .fxsel{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:100px; padding:3px 10px; font-size:13px; font-weight:600; min-height:0; box-shadow:none }
.ledger .fxsel option{ color:#13213A }
.ledger .fxline{ margin-top:12px; font-size:12px; color:rgba(255,255,255,.66); display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center }
.ledger .fxline .btn{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.25); box-shadow:none }
.ledger .bar{ height:30px; border-radius:11px; background:rgba(255,255,255,.1); gap:2px }
.ledger .bar span{ border-radius:8px; font-size:11.5px }
.ledger .bar .s-paid{ background:#157A58 } .ledger .bar .s-adv{ background:#5CC29A; color:#0B2C20 }
.ledger .bar .s-waived{ background:#6F63A0; color:#fff } .ledger .bar .s-part{ background:var(--gold); color:#3A2A08 } .ledger .bar .s-due{ background:rgba(255,255,255,.16); color:#fff }
.ledger .legend{ color:rgba(255,255,255,.78); gap:8px 16px }
.ledger .legend i{ border-radius:50%; width:8px; height:8px }

/* ---------- stat tiles ---------- */
.stats{ gap:10px; background:none; border:0; border-radius:0; overflow:visible; margin-bottom:16px }
.stat{ border-radius:16px; box-shadow:var(--sh-1); padding:14px 16px; position:relative }
.stat .v{ font-size:21px }
.stat .k{ font-size:12.5px; margin-top:3px }
.stat.good::before,.stat.warn::before,.stat.bad::before{ content:""; position:absolute; top:14px; inset-inline-end:14px; width:8px; height:8px; border-radius:50% }
.stat.good::before{ background:var(--nile) } .stat.warn::before{ background:var(--brass) } .stat.bad::before{ background:var(--clay) }

/* ---------- controls ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; padding:8px 14px; border-radius:11px;
  border:1px solid var(--line); background:var(--card); font-size:13px; font-weight:600; box-shadow:0 1px 1px rgba(19,33,58,.03) }
.btn:hover{ border-color:#C9CEC3; background:#FBFBF9 }
.btn.primary{ background:linear-gradient(180deg,#1C2F50,#13213A); border-color:#13213A; color:#fff; box-shadow:0 2px 6px rgba(19,33,58,.22) }
.btn.primary:hover{ background:linear-gradient(180deg,#223961,#172845) }
.btn.ghost{ background:transparent; border-color:var(--line); box-shadow:none; color:var(--ink-soft); font-weight:500 }
.btn.ghost:hover{ background:var(--line-soft) }
#mQuick{ display:block; text-align:center; line-height:1.35; border-radius:16px; min-height:64px }
.btn.sm{ min-height:32px; padding:5px 11px; font-size:12.5px; border-radius:10px }
select,input[type=text],input[type=search],input[type=number],input[type=date],input[type=email],input[type=password],input[type=tel],textarea{
  border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--card); transition:border-color .15s, box-shadow .15s }
select:focus,input:focus,textarea:focus{ outline:none; border-color:var(--nile); box-shadow:var(--focus) }
.field{ margin-bottom:14px }
.field label{ font-size:13px; font-weight:500; color:var(--ink-soft); margin-bottom:6px }
.choice{ gap:8px }
.choice button{ border-radius:12px; min-height:46px; background:var(--card); font-weight:500 }
.choice button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; font-weight:700; box-shadow:0 2px 6px rgba(19,33,58,.2) }
.check{ border-radius:12px; background:var(--card) }
.check:has(input:checked){ border-color:var(--nile); background:var(--nile-tint); color:#0B4A35 }
.seg{ background:var(--line-soft); border:0; padding:3px; gap:2px; border-radius:100px }
.seg button{ border-radius:100px; padding:6px 14px; font-size:13px; font-weight:500 }
.seg button[aria-pressed="true"]{ background:var(--card); color:var(--ink); font-weight:700; box-shadow:0 1px 3px rgba(19,33,58,.14) }
.pill{ border:1px solid var(--line-soft); background:var(--card); padding:6px 12px; font-size:12.5px }
.chip{ border:0; background:var(--card); box-shadow:var(--sh-1); padding:8px 14px; font-weight:500 }
.chip.on{ background:var(--ink); color:#fff; box-shadow:0 2px 8px rgba(19,33,58,.22) }
.tag{ padding:3px 10px; font-size:11.5px; font-weight:600; letter-spacing:.01em }
.linkish{ text-decoration-color:#B8BFC9 }

/* search field with a magnifier */
#fQ, #pQ, #mapPropQ{ padding-inline-start:38px; background-repeat:no-repeat; background-size:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-position:calc(100% - 12px) center }
body.ltr #fQ, body.ltr #pQ, body.ltr #mapPropQ{ background-position:12px center }
.psearch{ margin-bottom:16px }
#pQ, #mapPropQ{ -webkit-appearance:none; appearance:none }
#pQ::-webkit-search-cancel-button, #mapPropQ::-webkit-search-cancel-button{ -webkit-appearance:none; height:18px; width:18px; margin-inline-start:6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23667085'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm4.7 12.3-1.4 1.4L12 13.4l-3.3 3.3-1.4-1.4 3.3-3.3-3.3-3.3 1.4-1.4 3.3 3.3 3.3-3.3 1.4 1.4-3.3 3.3z'/%3E%3C/svg%3E") center/18px no-repeat; }

/* ---------- tables ---------- */
th{ background:transparent; font-size:11.5px; font-weight:600; letter-spacing:.02em; padding:10px 16px; border-bottom:1px solid var(--line-soft) }
td{ padding:12px 16px }
tbody tr:hover{ background:#F8F9F6 }
.minibar{ height:7px; border-radius:99px } .minibar i{ border-radius:99px }

/* ---------- cards (collection, requests) ---------- */
.ucards{ gap:12px }
.ucard{ border:0; border-radius:18px; padding:16px; box-shadow:var(--sh-1); border-inline-start:4px solid var(--line); transition:box-shadow .15s, transform .15s }
.ucard:hover{ box-shadow:var(--sh-2) }
.ucard h4{ font-size:15.5px; line-height:1.4 }
.ucard .sub{ font-size:12.5px; margin-bottom:10px }
.ucard .rent{ font-size:21px; letter-spacing:-.015em; margin-bottom:10px }
.ucard .meta{ font-size:12.5px; line-height:1.7 }
.ucard .btnrow{ gap:8px }
.tkreply{ background:#F3F5F0; border-radius:12px; padding:10px 12px }

/* ---------- app bar and tools ---------- */
.appbar{ background:rgba(242,243,238,.86); border-bottom:1px solid transparent; transition:border-color .2s }
.appbar.compact{ border-bottom-color:var(--line) }
.appbar .big{ font-size:28px; font-weight:700 }
.appbar select{ background:var(--card); border-color:var(--line-soft); box-shadow:var(--sh-1); font-size:13.5px; padding:7px 12px }
.appbar .btn.sm{ box-shadow:var(--sh-1); border-color:var(--line-soft) }
.tools{ gap:8px; margin-bottom:16px }
#collPill{ flex-wrap:wrap; row-gap:2px; white-space:normal; line-height:1.5 }
.pc{ white-space:nowrap; display:inline-block }
.pc + .pc::before{ content:"·"; margin-inline:7px; color:#B8BFC9 }
.content{ max-width:1200px }

/* ---------- desktop side rail ---------- */
.rail{ background:linear-gradient(180deg,#172947 0%,#101C33 100%) }
.nav button{ border-radius:11px; padding:10px 12px; color:#C3CEDA; font-weight:500 }
.nav button:hover{ background:rgba(255,255,255,.07) }
.nav button[aria-current="true"]{ background:rgba(255,255,255,.12); color:#fff; font-weight:700 }
.nav button[aria-current="true"] .dot{ background:var(--gold) }
.nav .badge{ margin-inline-start:auto; background:var(--clay); color:#fff; border-radius:100px; font-size:11px; font-weight:700; min-width:20px; height:20px; line-height:20px; padding:0 6px; text-align:center }
.brand .rule{ background:var(--gold) }

/* ---------- phone: tab bar ---------- */
.tabbar{ background:rgba(255,255,255,.8); box-shadow:0 -1px 0 rgba(19,33,58,.06), 0 -8px 24px rgba(19,33,58,.05) }
.tabbar button{ padding:6px 2px 5px; gap:2px; font-size:10.5px; color:#5B6679 }
.tabbar svg{ box-sizing:border-box; width:54px; height:30px; padding:3px 15px; border-radius:100px; transition:background .18s ease }
.tabbar button[aria-current="true"]{ color:var(--ink) }
.tabbar button[aria-current="true"] svg{ background:var(--nile-tint); color:var(--nile-ink); stroke-width:1.9 }
.tabbar .badge{ top:3px; left:50%; margin-left:6px; transform:none; min-width:17px; height:17px; line-height:17px; padding:0 5px;
  font-size:10px; text-align:center; box-shadow:0 0 0 2px #fff }

/* ---------- sheets ---------- */
.scrim{ background:rgba(13,24,43,.42) }
.modal{ border-radius:20px; box-shadow:0 24px 60px rgba(13,24,43,.3) }
.modal header{ padding:18px 20px 2px }
.modal header h3{ font-size:19px; font-weight:700 }
.modal .body{ padding:16px 20px }
.modal .foot{ padding:12px 20px 20px; position:sticky; bottom:0; background:linear-gradient(180deg,rgba(255,255,255,0),#fff 22%) }
.setrow{ padding:13px 18px; font-size:14.5px }
.setrow .k{ color:var(--muted) }
@media(max-width:900px){
  .modal{ border-radius:24px 24px 0 0 }
  .modal .foot{ padding-bottom:calc(var(--safe-b) + 14px) }
  .modal .foot .btn{ min-height:50px; font-size:15px; border-radius:14px }
  .btn{ min-height:40px }
  .btn.sm{ min-height:34px }
  .ucard .btnrow .btn.primary{ flex:1 1 auto; min-height:44px; font-size:14px }
  .content{ padding-top:16px }
  .ledger{ padding:20px 18px 16px; border-radius:20px }
  .ledger-head .big{ font-size:32px }
  .hero-rate b{ font-size:26px }
  .stats{ gap:8px }
  .tools .pill{ flex:0 1 auto }
  .tools #collPill{ flex:1 1 100%; justify-content:center; text-align:center }
}

/* ---------- toast above the tab bar on phones ---------- */
.toast{ border-radius:14px; padding:12px 16px; background:#13213A; box-shadow:0 12px 30px rgba(13,24,43,.3) }
@media(max-width:900px){ .toast{ inset-inline:14px; bottom:calc(var(--tabh) + var(--safe-b) + 14px); max-width:none; text-align:center } }

/* ---------- sign-in screen ---------- */
.gate{ background:radial-gradient(120% 90% at 100% 0%, #24406A 0%, rgba(36,64,106,0) 60%), linear-gradient(160deg,#1A2C4A,#0D182B) }
.gate .box{ border-radius:22px; padding:26px; box-shadow:0 24px 60px rgba(0,0,0,.35) }
.gate h1{ font-size:22px }
/* ---------- collection screen: chips, summary, compact cards, the green "money in" button ---------- */
.btn.go{ background:linear-gradient(180deg,#178A62,#11704F); border-color:#11704F; color:#fff; box-shadow:0 2px 6px rgba(17,112,79,.28) }
.btn.go:hover{ background:linear-gradient(180deg,#1A9669,#137A56) }
.ctools #fQ{ flex:2 1 220px; min-width:0 }
.ctools select{ flex:1 1 160px; min-width:0 }
.cchips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px }
.cchip{ border:1px solid var(--line); background:var(--card); border-radius:100px; padding:7px 13px; min-height:40px; font-size:14px; font-weight:500; color:var(--ink) }
.cchip .num{ color:var(--muted); font-weight:600; margin-inline-start:2px }
.cchip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; font-weight:700 }
.cchip[aria-pressed="true"] .num{ color:rgba(255,255,255,.75) }
.cchip-unpaid:not([aria-pressed="true"]){ border-color:#E7B9B0; color:var(--clay-ink) }
.cchip-unpaid:not([aria-pressed="true"]) .num{ color:var(--clay-ink) }
.cchip-unpaid[aria-pressed="true"]{ background:var(--clay); border-color:var(--clay) }
.csum{ background:var(--card); border-radius:16px; box-shadow:var(--sh-1); padding:12px 16px; margin:0 0 14px }
.csum:empty{ display:none }
.csum-row{ display:flex; align-items:baseline; gap:10px; font-size:13.5px; color:var(--muted) }
.csum-row b{ color:var(--ink) }
.csum-pc{ font-size:20px; font-weight:700; min-width:52px }
.csum-bar{ height:6px; border-radius:6px; background:var(--line-soft); overflow:hidden; margin:6px 0 10px }
.csum-bar:last-child{ margin-bottom:2px }
.csum-bar i{ display:block; height:100%; background:var(--ink-soft); border-radius:6px }
.ucard.cc{ padding:12px 14px }
.ucards:has(.cc){ gap:10px }
.cc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px }
.cc-top h4{ margin:0 }
.cc-top .tag{ flex:none }
.ucard.cc .sub{ margin:1px 0 4px }
.cc-amt{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-bottom:2px }
.ucard.cc .rent{ margin:0; font-size:18px }
.cc-note{ font-size:12.5px; color:var(--muted) }
.cc-flags{ display:inline-flex; gap:6px; margin-inline-start:auto }
.ucard.cc .meta{ margin-top:2px; line-height:1.55 }
.ucard.cc .meta:empty{ display:none }
.callbtn{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px 6px 10px; border-radius:100px; min-height:34px;
  background:var(--nile-tint); color:var(--nile-ink); font-size:13px; font-weight:600; text-decoration:none; border:1px solid #C9E2D6; margin-inline-end:10px }
.callbtn svg{ flex:none }
.callbtn .num{ font-weight:500; color:var(--ink-soft) }
.callbtn:active{ transform:scale(.97); background:#D3E9DE }
.cc-line{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 0; margin:6px 0 2px; font-size:12.5px; color:var(--muted) }
.cc-end{ white-space:nowrap }
.cc-done{ color:var(--ink); font-weight:500 }
.cc-go{ width:100%; margin-top:10px; min-height:44px; font-size:15px; font-weight:700; border-radius:13px }
.cc-act{ margin-top:8px }
@media(max-width:900px){ .ctools #fQ{ flex:1 1 100% } .ctools select{ flex:1 1 0 } }
/* ---------- property photos ---------- */
.pgal{ position:relative; margin:0 auto 14px; width:min(100%,540px); border-radius:18px; overflow:hidden; background:#0E1A2C; box-shadow:var(--sh-1); aspect-ratio:4/5 }
.pgal-track{ display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain }
.pgal-track::-webkit-scrollbar{ display:none }
.pgal-track img{ flex:0 0 100%; width:100%; height:100%; object-fit:cover; scroll-snap-align:center; cursor:zoom-in; user-select:none; -webkit-user-select:none }
.pgal-dots{ position:absolute; bottom:12px; inset-inline:0; display:flex; justify-content:center; gap:6px; pointer-events:none }
.pgal-dots i{ width:7px; height:7px; border-radius:7px; background:rgba(255,255,255,.55); transition:width .2s, background .2s }
.pgal-dots i.on{ width:18px; background:#fff }
.pgal-edit{ position:absolute; top:12px; inset-inline-end:12px; display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:100px;
  background:rgba(14,26,44,.62); color:#fff; font-size:13px; font-weight:600; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18) }
.pgal-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:100%; min-height:120px; margin:0 0 14px;
  border:1.5px dashed var(--line); border-radius:18px; background:var(--card); color:var(--ink); font-weight:600; font-size:14.5px }
.pgal-empty svg{ width:26px; height:26px; color:var(--nile-ink) }
.pgal-empty small{ color:var(--muted); font-weight:400; font-size:12.5px }
.pview{ position:fixed; inset:0; z-index:200; background:#05090F }
.pview-track{ display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none }
.pview-track::-webkit-scrollbar{ display:none }
.pview-slide{ flex:0 0 100%; display:flex; align-items:center; justify-content:center; scroll-snap-align:center; padding:56px 0 calc(var(--safe-b) + 48px) }
.pview-slide img{ max-width:100%; max-height:100%; object-fit:contain }
.pview-x{ position:absolute; top:calc(env(safe-area-inset-top) + 10px); inset-inline-end:14px; z-index:2; width:44px; height:44px; border-radius:44px;
  background:rgba(255,255,255,.14); color:#fff; font-size:28px; line-height:1 }
.pview-n{ position:absolute; bottom:calc(var(--safe-b) + 16px); inset-inline:0; text-align:center; color:rgba(255,255,255,.8); font-size:13px }
.pm-add{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; margin:0 0 14px; font-weight:700; cursor:pointer }
.pm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px }
.pm-tile{ border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; background:var(--card) }
.pm-img{ position:relative; aspect-ratio:4/5; background:#0E1A2C }
.pm-img img{ width:100%; height:100%; object-fit:cover; display:block }
.pm-main{ position:absolute; top:8px; inset-inline-start:8px; padding:3px 10px; border-radius:100px; background:var(--nile); color:#fff; font-size:11.5px; font-weight:700 }
.pm-acts{ display:flex; flex-wrap:wrap; gap:6px; padding:10px }
.pm-del{ color:var(--clay-ink); margin-inline-start:auto }
.crop{ position:fixed; inset:0; z-index:210; background:#0B1322; color:#fff; display:flex; flex-direction:column; padding-bottom:var(--safe-b) }
.crop-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:calc(env(safe-area-inset-top) + 10px) 14px 10px }
.crop-bar .btn.ghost{ color:#fff; border-color:rgba(255,255,255,.25); background:transparent }
.crop-ttl{ text-align:center; line-height:1.3 } .crop-ttl small{ display:block; opacity:.7; font-size:12px }
.crop-stage{ position:relative; flex:1; overflow:hidden; touch-action:none; cursor:grab }
.crop-stage img{ position:absolute; left:0; top:0; transform-origin:0 0; max-width:none; user-select:none; -webkit-user-select:none; pointer-events:none }
.crop-frame{ position:absolute; border:2px solid #fff; border-radius:6px; box-shadow:0 0 0 9999px rgba(11,19,34,.66); pointer-events:none }
.crop-frame::before, .crop-frame::after{ content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.22); pointer-events:none }
.crop-frame::before{ inset:0 33.33%; border-top:0; border-bottom:0 } .crop-frame::after{ inset:33.33% 0; border-left:0; border-right:0 }
.crop-ctl{ display:flex; align-items:center; gap:10px; padding:12px 18px 4px; max-width:560px; width:100%; margin:0 auto }
.crop-ctl input[type=range]{ flex:1; accent-color:#2FB383 }
.crop-ctl .btn{ color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2) }
.crop-ctl .muted{ color:rgba(255,255,255,.6) }
.crop-hint{ text-align:center; font-size:12.5px; opacity:.6; margin:4px 16px 12px }
.pname{ display:inline-flex; align-items:center; gap:8px }
.pthumb{ width:30px; height:38px; border-radius:6px; object-fit:cover; flex:none; box-shadow:0 0 0 1px var(--line-soft) }
.plist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px }
.pcard{ display:block; width:100%; text-align:start; padding:0; background:none; border:0; color:var(--ink); cursor:pointer }
.pcard-img{ position:relative; aspect-ratio:4/5; border-radius:20px; overflow:hidden; background:#0E1A2C; box-shadow:var(--sh-1) }
.pcard-img img{ width:100%; height:100%; object-fit:cover; display:block }
.pcard-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.35) }
.pcard-ph svg{ width:56px; height:56px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round }
.pcard-occ{ position:absolute; top:12px; inset-inline-end:12px; padding:5px 11px; border-radius:100px; background:rgba(14,26,44,.66); color:#fff; font-size:13px; font-weight:700; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px) }
.pcard-chips{ position:absolute; bottom:0; inset-inline-start:0; padding:9px 16px; border-start-end-radius:16px; background:rgba(14,26,44,.78); color:#fff; font-size:13.5px; font-weight:600 }
.pcard-info{ padding:10px 4px 2px; display:flex; flex-direction:column; gap:2px }
.pcard-info b{ font-size:17px }
.pcard-info small{ color:var(--muted); font-size:13.5px }
.pcard:active{ opacity:.8 }
.mappop-img{ display:block; width:100%; max-width:170px; aspect-ratio:4/5; object-fit:cover; border-radius:10px; margin:0 auto 8px }
@media(prefers-reduced-motion:reduce){ .ucard,.tabbar svg,select,input,textarea{ transition:none } }
.rcok{ width:68px; height:68px; border-radius:50%; background:var(--nile-tint); color:var(--nile-ink); display:flex; align-items:center; justify-content:center; margin:6px auto 12px }
.rcamt{ font-size:30px; font-weight:700; letter-spacing:-.02em; margin:4px 0 12px }
.hidebtn{ display:inline-flex; align-items:center; gap:6px }
.hidebtn.on{ background:var(--brass-tint); color:var(--brass-ink); border-color:var(--brass-tint) }