/* Lenci · the shell shared by /locations, /looks and /commercial (workstream D). Builds on studio.css tokens (canvas, panels, energy
   gradient, Sora / Inter / Cairo) and follows memory.css: top bar → a centred shell → glass cards. Logical properties throughout so
   Arabic (dir=rtl) mirrors without overrides; 360 px phones keep one column and no horizontal scroll. Prefix: pl- */
:root { --pl: linear-gradient(135deg, #22d3ee 0%, #8b5cf6 55%, #d946ef 100%); --pl-h: linear-gradient(90deg, #a5f3fc 0%, #c9b8ff 55%, #f5c2ff 100%); --glass: linear-gradient(180deg, rgba(23,23,35,.9), rgba(14,14,22,.94)); --ok: #86efac; --bad: #fca5a5; --ok-bg: rgba(52,211,153,.14); --bad-bg: rgba(248,113,113,.15); }
html, body { height: auto; min-height: 100%; }
body { overflow: auto; overflow-x: hidden; background: radial-gradient(1100px 650px at 85% -10%, rgba(34,211,238,.09), transparent 60%), radial-gradient(900px 600px at -10% 100%, rgba(139,92,246,.08), transparent 60%), var(--canvas); }
.pl-app { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); min-height: 100vh; height: auto; }
.pl-app .muted, .pl-app .muted * { color: var(--muted); }
.pl-app a.ghost, .pl-app a.primary { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ghost.small, .pl-app .ghost.small { padding: 5px 10px; font-size: 11px; }
.primary.small { padding: 8px 14px; font-size: 11.5px; border-radius: 10px; }
.ghost.danger { color: #fecaca; } .ghost.danger:hover { border-color: #ef4444; color: #fee2e2; }
button.busy, .primary.busy { opacity: .55; cursor: progress; }
.pl-app .chip { text-transform: none; letter-spacing: 0; font-size: 11.5px; padding: 6px 11px; }

/* top bar */
.pl-brand { text-decoration: none; color: inherit; }
.pl-sep { color: var(--muted); font-size: 18px; line-height: 1; margin-top: -2px; }
.pl-wordmark { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; line-height: 1; background: var(--pl-h); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-pro { color: #bdf3fb; border-color: rgba(34,211,238,.5); background: linear-gradient(180deg, rgba(34,211,238,.14), rgba(139,92,246,.08)); }
.pl-back::before { content: ""; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-inline-end: 2px; flex: none; }
[dir="rtl"] .pl-back::before { transform: rotate(-135deg); }
.pl-hint { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 90; display: none; margin: 0; padding: 10px 16px; border-radius: 12px; background: rgba(18,18,28,.96); border: 1px solid var(--line-2); color: var(--ink); font-size: 12.5px; max-width: min(92vw, 520px); pointer-events: none; white-space: normal; }
.pl-hint.toast { display: block; }

/* shell + cards */
.pl-shell { width: 100%; max-width: 1240px; margin: 0 auto; padding: 22px 24px 70px; display: grid; gap: 18px; align-content: start; min-width: 0; }
.pl-shell.pl-two { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.pl-main, .pl-side { min-width: 0; display: grid; gap: 18px; align-content: start; }
.pl-card { min-width: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--glass); box-shadow: var(--edge), 0 14px 34px rgba(0,0,0,.3); padding: 18px 20px; display: grid; gap: 14px; align-content: start; animation: plIn .35s var(--ease) both; }
@keyframes plIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pl-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pl-card-head > div { min-width: 0; flex: 1 1 200px; }
.pl-card h2, .pl-h2 { margin: 0; font-family: var(--display); font-size: 15.5px; letter-spacing: -.01em; }
.pl-h1 { margin: 0; font-family: var(--display); font-size: 24px; letter-spacing: -.02em; line-height: 1.15; }
.pl-sub { margin: 4px 0 0; max-width: 70ch; font-size: 13.5px; }
.pl-kicker { margin: 0; font-family: var(--display); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
[dir="rtl"] .pl-kicker { letter-spacing: 0; }
.pl-section { display: grid; gap: 12px; min-width: 0; }
.pl-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pl-count { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* fields */
.pl-field { display: grid; gap: 8px; min-width: 0; align-content: start; }
.pl-label { font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: 8px; }
[dir="rtl"] .pl-label { letter-spacing: 0; }
.pl-label output, .pl-label b { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.pl-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pl-in { width: 100%; min-width: 0; box-sizing: border-box; font: 500 13.5px/1.45 var(--latin); color: var(--ink); background: rgba(255,255,255,.04); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px; outline: none; transition: border-color var(--t), box-shadow var(--t); }
[dir="rtl"] .pl-in { font-family: var(--arabic); }
.pl-in:focus { border-color: rgba(168,85,247,.7); box-shadow: 0 0 0 3px rgba(139,92,246,.22); }
textarea.pl-in { resize: vertical; min-height: 58px; }
select.pl-in { appearance: none; -webkit-appearance: none; padding-inline-end: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3b6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }
[dir="rtl"] select.pl-in { background-position: left 10px center; }
select.pl-in option { background: #14141c; color: var(--ink); }
.pl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.pl-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-width: 0; }
.pl-row > .pl-in { flex: 1 1 160px; width: auto; }
.pl-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pl-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.pl-check input { width: 16px; height: 16px; accent-color: #8b5cf6; }
input[type="range"].pl-range { width: 100%; accent-color: #8b5cf6; }
.pl-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-width: 0; }
.pl-actions .pl-grow { flex: 1 1 auto; }
.pl-cost { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.25); color: #fff; letter-spacing: 0; text-transform: none; }
.ghost .pl-cost { background: rgba(255,255,255,.07); color: var(--muted); }
.pl-status { margin: 0; min-height: 18px; font-size: 12.5px; color: var(--muted); }
.pl-status.err { color: var(--bad); } .pl-status.ok { color: var(--ok); }
.pl-note { margin: 0; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; color: #fde68a; background: rgba(245,176,65,.12); border: 1px solid rgba(245,176,65,.4); }
.pl-prompt summary { cursor: pointer; font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
[dir="rtl"] .pl-prompt summary { letter-spacing: 0; }
.pl-prompt pre, .pl-pre { margin: 8px 0 0; white-space: pre-wrap; word-break: break-word; font: 12px/1.55 var(--mono); color: var(--muted); background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; max-height: 220px; overflow: auto; direction: ltr; text-align: left; }

/* tiles (pickers) and cards (saved items) */
.pl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; min-width: 0; }
.pl-tile { position: relative; min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel-3); text-align: start; isolation: isolate; cursor: pointer; display: grid; transition: border-color var(--t), transform var(--t) var(--ease), box-shadow var(--t); color: var(--ink); font: inherit; }
.pl-tile:hover { border-color: rgba(255,255,255,.22); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(168,85,247,.35), 0 8px 20px rgba(0,0,0,.4); }
.pl-tile[aria-pressed="true"] { border-color: transparent; box-shadow: 0 0 0 1px rgba(217,70,239,.3), 0 0 22px rgba(139,92,246,.38); }
.pl-tile[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; background: var(--energy); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.pl-tile .pl-plate { aspect-ratio: 4 / 3; width: 100%; display: block; position: relative; background: linear-gradient(180deg, #4e5a7a 0 var(--hz, 60%), #2b2a33 var(--hz, 60%)); }
.pl-tile .pl-plate::after { content: ""; position: absolute; left: 0; right: 0; top: var(--hz, 60%); height: 1px; background: rgba(255,255,255,.35); }
.pl-tile img, .pl-tile canvas { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--panel-2); }
.pl-tile span { display: block; padding: 7px 9px 8px; font-family: var(--display); font-size: 10.5px; font-weight: 600; line-height: 1.3; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-tile.pl-tile-wide { grid-column: span 2; }
.pl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; min-width: 0; }
.pl-item { min-width: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--glass); display: grid; grid-template-rows: auto minmax(0, 1fr); transition: border-color var(--t), box-shadow var(--t); }
.pl-item:hover { border-color: rgba(255,255,255,.16); }
.pl-item-media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--panel-2); border: 0; padding: 0; cursor: pointer; overflow: hidden; }
.pl-item-media img, .pl-item-media canvas, .pl-item-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-item-media .pl-item-badge { position: absolute; inset-inline-start: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; font-family: var(--display); font-size: 10px; font-weight: 700; background: rgba(10,10,15,.72); color: #fff; backdrop-filter: blur(6px); }
.pl-item-body { padding: 10px 12px 12px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.pl-item-title { margin: 0; font-family: var(--display); font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.pl-item-title input { width: 100%; }
.pl-item-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.pl-c { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .02em; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); color: var(--ink); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pl-c.cat { color: #e4dcff; background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.32); }
.pl-c.tag { color: var(--muted); font-weight: 600; }
.pl-c.ok { color: var(--ok); background: var(--ok-bg); border-color: rgba(52,211,153,.35); }
.pl-item-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; }
.pl-item-acts .ghost, .pl-item-acts .primary { min-height: 30px; }
.pl-empty, .pl-gate { position: relative; display: grid; justify-items: center; text-align: center; gap: 10px; padding: 36px 20px; border: 1px dashed var(--line-2); border-radius: 18px; background: rgba(255,255,255,.02); }
.pl-gate { border-style: solid; background: var(--glass); }
.pl-empty h3, .pl-gate h2 { margin: 0; font-family: var(--display); font-size: 16px; letter-spacing: -.01em; }
.pl-empty p, .pl-gate p { margin: 0; max-width: 56ch; font-size: 13px; }
.pl-orb { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6, transparent 40%), var(--pl); box-shadow: 0 0 36px rgba(139,92,246,.4); }
.pl-skel { height: 86px; border-radius: 16px; background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.07), rgba(255,255,255,.03)); background-size: 200% 100%; animation: plSk 1.2s linear infinite; }
@keyframes plSk { to { background-position: -200% 0; } }

/* toast + modal sheet */
.pl-toast { position: fixed; bottom: 22px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 95; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(18,18,28,.97); border: 1px solid var(--line-2); color: var(--ink); font-size: 13px; max-width: min(92vw, 540px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
[dir="rtl"] .pl-toast { transform: translateX(50%); }
.pl-toast .pl-toast-act { border: 0; background: transparent; color: #d6c9ff; font: 600 12.5px var(--display); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; white-space: nowrap; }
.pl-sheet .modal-card { width: min(100%, 560px); display: grid; gap: 14px; }
.pl-sheet .modal-card.wide { width: min(100%, 900px); }
.pl-sheet-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

@media (max-width: 980px) { .pl-shell.pl-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .pl-shell { padding: 14px 14px 60px; gap: 14px; } .pl-h1 { font-size: 21px; } .pl-card { padding: 14px; border-radius: 16px; } }
@media (max-width: 560px) {
  .pl-pro, .pl-back span, .pl-app .arabic { display: none; }
  .pl-back { padding: 7px 9px; }
  .pl-tiles { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .pl-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pl-grid2 { grid-template-columns: minmax(0, 1fr); }
  .modal { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { .pl-card, .pl-skel { animation: none !important; } }
/* Arabic: the module name is already Arabic in the wordmark, so the bilingual second copy is not shown (as billing.css / design.css) */
html[lang="ar"] .pl-app .brand .arabic { display: none; }