/* Lenci · Websites (/sites). Builds on studio.css tokens; logical properties so Arabic mirrors by itself.
   Layout: top bar → list | the new-site form | the editor (fields + a live preview iframe; the preview folds under the fields on phones). */
html.st-page, html.st-page body { height: auto; min-height: 100%; }
html.st-page body { overflow: auto; overflow-x: hidden; background: radial-gradient(1000px 600px at 90% -10%, rgba(34,211,238,.10), transparent 60%), radial-gradient(800px 500px at -10% 100%, rgba(139,92,246,.08), transparent 60%), var(--canvas); }
.st-app { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 100vh; height: auto; }
.st-app .muted, .st-app .muted * { color: var(--muted); }
.st-app a.ghost { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ghost.small, .st-app .ghost.small { padding: 5px 10px; font-size: 11px; }
.ghost.danger { color: #fecaca; } .ghost.danger:hover { border-color: #ef4444; }
button.busy { opacity: .55; cursor: progress; }
.st-brand { text-decoration: none; color: inherit; }
.st-sep { color: var(--muted); font-size: 18px; line-height: 1; margin-top: -2px; }
.st-wordmark { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -.02em; line-height: 1; background: linear-gradient(90deg, #9ae6f7, #c9b8ff 52%, #e9a8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-pro { color: #bdf3fb; border-color: rgba(34,211,238,.5); background: linear-gradient(180deg, rgba(34,211,238,.16), rgba(139,92,246,.08)); }
.st-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"] .st-back::before { transform: rotate(-135deg); }
.st-main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 22px 20px 90px; min-width: 0; display: grid; gap: 16px; align-content: start; }
.st-gate { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 46px 22px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(180deg, rgba(23,23,35,.9), rgba(14,14,22,.94)); }
.st-gate h1 { margin: 0; font-family: var(--display); font-size: 28px; letter-spacing: -.02em; }
.st-gate p { margin: 0; max-width: 56ch; color: var(--muted); }
.st-orb { width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6, transparent 40%), var(--energy); box-shadow: 0 0 40px rgba(34,211,238,.4); margin-bottom: 6px; }
.st-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.st-head > div:first-child { min-width: 0; flex: 1 1 320px; display: grid; gap: 6px; justify-items: start; }
.st-head h1 { margin: 0; font-family: var(--display); font-size: 26px; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.st-head p { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 70ch; overflow-wrap: anywhere; }
.st-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.st-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.st-tile { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, rgba(23,23,35,.9), rgba(14,14,22,.94)); color: inherit; text-align: start; font: inherit; cursor: pointer; padding: 0; min-width: 0; }
.st-tile:hover { border-color: rgba(255,255,255,.16); }
.st-tile-img { aspect-ratio: 16 / 10; background: var(--panel-2); display: grid; place-items: center; color: var(--dim); overflow: hidden; }
.st-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-tile-body { padding: 12px 14px 14px; display: grid; gap: 6px; min-width: 0; }
.st-tile h3 { margin: 0; font: 600 15px/1.3 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); min-width: 0; }
.st-meta code { font-family: var(--mono); font-size: 11px; direction: ltr; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.st-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 700 10.5px/1.3 var(--display); letter-spacing: .03em; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); white-space: nowrap; }
.st-badge.on { color: #86efac; background: rgba(52,211,153,.14); border-color: rgba(52,211,153,.35); }
.st-badge.off { color: var(--muted); }
.st-empty { grid-column: 1 / -1; display: grid; justify-items: center; text-align: center; gap: 10px; padding: 40px 20px; border: 1px dashed var(--line-2); border-radius: 20px; color: var(--muted); }
.st-form, .st-editor-main { display: grid; gap: 14px; align-content: start; min-width: 0; }
.st-card { display: grid; gap: 12px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, rgba(23,23,35,.9), rgba(14,14,22,.94)); min-width: 0; }
.st-card h2 { margin: 0; font: 600 15.5px/1.3 var(--display); }
.st-card > p { margin: 0; font-size: 12.5px; }
.st-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.st-field { display: grid; gap: 5px; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.st-in, .st-ta { width: 100%; min-width: 0; border: 1px solid var(--line-2); border-radius: 11px; background: rgba(8,8,14,.7); color: var(--ink); padding: 9px 12px; font: inherit; font-size: 13.5px; font-weight: 400; }
.st-ta { min-height: 72px; resize: vertical; }
select.st-in { cursor: pointer; 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 11px center; background-size: 14px; text-overflow: ellipsis; } /* .st-in's background shorthand drops studio.css's arrow: put it back */
[dir="rtl"] select.st-in { background-position: left 11px center; }
.st-profile small { font-weight: 400; font-size: 11.5px; }
.st-in:focus, .st-ta:focus { outline: none; border-color: rgba(167,139,250,.75); box-shadow: 0 0 0 3px rgba(139,92,246,.22); }
.st-color { width: 56px; height: 36px; padding: 2px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(8,8,14,.7); }
.st-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(0,0,0,.35); max-width: 100%; justify-self: start; }
.st-seg button { border: 0; background: transparent; color: var(--muted); padding: 6px 14px; border-radius: 999px; font: 600 12px/1.2 var(--display); white-space: nowrap; cursor: pointer; }
.st-seg button[aria-checked="true"] { color: #fff; background: var(--active); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.st-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.st-shot { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 2px solid transparent; background: var(--panel-2); padding: 0; cursor: pointer; }
.st-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-shot[aria-pressed="true"] { border-color: #a78bfa; box-shadow: 0 0 0 2px rgba(139,92,246,.35); }
.st-shot b { position: absolute; top: 6px; inset-inline-start: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font: 800 11px/1 var(--latin); color: #1a1205; background: linear-gradient(135deg, #f5d08a, #f5b041); }
.st-shot:not([aria-pressed="true"]) b { display: none; }
.st-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 12.5px; }
.st-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.st-status { margin: 0; font-size: 12.5px; color: var(--muted); min-height: 1.4em; overflow-wrap: anywhere; }
.st-status.bad { color: #fecaca; } .st-status.ok { color: #86efac; }
.st-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 46%); gap: 16px; align-items: start; }
.st-preview-wrap { position: sticky; top: 16px; display: grid; gap: 8px; min-width: 0; }
.st-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 12px/1.2 var(--display); color: var(--muted); }
.st-preview { width: 100%; height: min(72vh, 760px); border: 1px solid var(--line); border-radius: 18px; background: #0a0a0f; }
.st-lang-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.st-sections { display: grid; gap: 10px; }
.st-sections h3 { margin: 6px 0 0; font: 600 12px/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
[dir="rtl"] .st-sections h3 { letter-spacing: 0; }
.st-product { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: start; }
.st-product img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line-2); }
.st-product > div { display: grid; gap: 6px; min-width: 0; }
.st-note { margin: 0; padding: 9px 12px; border-radius: 12px; background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.3); font-size: 12.5px; overflow-wrap: anywhere; }
.st-note.ok { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.35); color: #bbf7d0; }
.st-note code { font-family: var(--mono); font-size: 11.5px; direction: ltr; unicode-bidi: embed; }
.st-toast { position: fixed; bottom: 80px; 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; }
.st-toast.show { display: block; }
.st-skel { height: 120px; border-radius: 18px; background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.07), rgba(255,255,255,.03)); background-size: 200% 100%; animation: stSk 1.2s linear infinite; }
@keyframes stSk { to { background-position: -200% 0; } }
@media (max-width: 900px) { .st-editor { grid-template-columns: minmax(0, 1fr); } .st-preview-wrap { position: static; } .st-preview { height: 60vh; } }
@media (max-width: 640px) { .st-main { padding: 14px 12px 90px; } .st-grid2 { grid-template-columns: minmax(0, 1fr); } .st-card { padding: 14px; } .st-head .st-acts { width: 100%; } .st-head .st-acts > * { flex: 1 1 auto; } .st-seg { display: flex; } .st-seg button { flex: 1 1 0; padding: 6px 8px; font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .st-skel { animation: none; } }