/* Alisan Pano — telefon / bilgisayar paneli */

:root {
	--bg: #f5f3ee;
	--card: #ffffff;
	--ink: #1d2328;
	--muted: #6b747d;
	--line: #e8e4dc;
	--brand: #1f6f5c;
	--brand-soft: #e3f0ec;
	--warn: #c9821b;
	--bad: #c2412d;
	--on-brand: #ffffff;
	--send-bg: var(--brand);
	--send-line: var(--brand);
	--send-btn: #ffffff;
	--send-btn-ink: var(--brand);
	--radius: 16px;
	--nav-h: 64px;
	color-scheme: light;
}

/*
 * Tema: varsayılan cihazın ayarı; üstteki düğme <html data-theme> ile
 * açık ya da koyuya sabitler (seçim cihazda saklanır).
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #121518;
		--card: #1b1f24;
		--ink: #eceff2;
		--muted: #949ca5;
		--line: #2a3038;
		--brand: #4fbf9f;
		--brand-soft: #1d3530;
		--warn: #e8a643;
		--bad: #ec6a55;
		--on-brand: #0d201b;
		--send-bg: var(--brand-soft);
		--send-line: var(--line);
		--send-btn: var(--brand);
		--send-btn-ink: #10231e;
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg: #121518;
	--card: #1b1f24;
	--ink: #eceff2;
	--muted: #949ca5;
	--line: #2a3038;
	--brand: #4fbf9f;
	--brand-soft: #1d3530;
	--warn: #e8a643;
	--bad: #ec6a55;
	--on-brand: #0d201b;
	--send-bg: var(--brand-soft);
	--send-line: var(--line);
	--send-btn: var(--brand);
	--send-btn-ink: #10231e;
	color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-tap-highlight-color: transparent;
}

body.has-sheet { overflow: hidden; }

button, input, select, textarea { font: inherit; color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- iskelet ---------- */

.pp { max-width: 640px; margin: 0 auto; min-height: 100vh; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px); }

.pp-top {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.pp-top__id { display: flex; align-items: center; gap: 10px; }
.pp-top__id strong { display: block; font-size: 17px; line-height: 1.2; }
.pp-top__id small { color: var(--muted); font-size: 13px; }

.pp-top__acts { display: flex; align-items: center; gap: 8px; }

.pp-theme {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--card);
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}

.pp-theme .pp-theme__sun { display: none; }
:root[data-theme="dark"] .pp-theme .pp-theme__sun { display: block; }
:root[data-theme="dark"] .pp-theme .pp-theme__moon { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .pp-theme .pp-theme__sun { display: block; }
	:root:not([data-theme="light"]) .pp-theme .pp-theme__moon { display: none; }
}

.pp-gate .pp-theme { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 14px; }

.pp-top__screen {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 999px;
	background: var(--card);
	border: 1px solid var(--line);
	color: var(--ink);
	text-decoration: none;
	font-size: 14px;
}

.pp-main { padding: 4px 16px 0; }

.pp-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	display: flex;
	justify-content: center;
	background: var(--card);
	border-top: 1px solid var(--line);
	padding-bottom: env(safe-area-inset-bottom);
}

.pp-nav button {
	flex: 1;
	max-width: 128px;
	height: var(--nav-h);
	border: 0;
	background: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	font-size: 12px;
	color: var(--muted);
	cursor: pointer;
}

.pp-nav button svg { width: 24px; height: 24px; }
.pp-nav button.is-on { color: var(--brand); font-weight: 600; }

/* ---------- kart ---------- */

.pp-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px 16px;
	margin-bottom: 14px;
}

.pp-card h2 {
	margin: 0 0 10px;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.pp-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pp-card__head h2 { margin: 0; }
.pp-pagehead { margin: 4px 0 14px; }
.pp-pagehead h1 { margin: 0; font-size: 22px; }

.pp-empty { color: var(--muted); margin: 4px 0; font-size: 15px; }
.pp-help { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.pp-ver { text-align: center; color: var(--muted); font-size: 12px; }

.pp-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 0; color: var(--muted); }
.pp-spin { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brand); animation: pp-spin 0.8s linear infinite; }
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* ---------- düğmeler ---------- */

.pp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 14px;
	border-radius: 12px;
	border: 1px solid transparent;
	background: var(--line);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

.pp-btn--primary { background: var(--brand); color: var(--on-brand); }
.pp-btn--soft { background: var(--brand-soft); color: var(--brand); min-height: 34px; padding: 0 12px; font-size: 13px; }
.pp-btn--soft svg { width: 16px; height: 16px; }
.pp-btn--danger { background: none; color: var(--bad); border-color: var(--line); }
.pp-btn--ghost { background: none; border-color: var(--line); color: var(--muted); }
.pp-btn--block { width: 100%; min-height: 48px; font-size: 16px; }
.pp-btn:disabled { opacity: 0.5; }

.pp-ibtn {
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex: none;
}

.pp-ibtn:hover { background: var(--bg); }
.pp-ibtn svg { width: 18px; height: 18px; }

/* ---------- avatar ---------- */

.pp-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	background: var(--brand);
	flex: none;
}

.pp-avatar.is-s { width: 20px; height: 20px; font-size: 10px; vertical-align: -5px; }
.pp-top .pp-avatar { width: 40px; height: 40px; font-size: 17px; }

/* ---------- mesaj gönder ---------- */

.pp-send { background: var(--send-bg); border-color: var(--send-line); color: #fff; }
.pp-send h2 { color: #fff; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.pp-chip {
	border: 0;
	border-radius: 999px;
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 14px;
	cursor: pointer;
}

.pp-chip:active { background: rgba(255, 255, 255, 0.32); }

.pp-send__form { display: flex; gap: 8px; }

.pp-send__form input {
	flex: 1;
	min-width: 0;
	height: 44px;
	border: 0;
	border-radius: 12px;
	padding: 0 12px;
	background: #fff;
	color: #1d2328;
}

.pp-send .pp-btn--primary { background: var(--send-btn); color: var(--send-btn-ink); width: 48px; padding: 0; }
.pp-send .pp-switch { color: rgba(255, 255, 255, 0.92) !important; margin-top: 10px; }


/* ---------- özet ---------- */

.pp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }

.pp-stat {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 12px;
	text-align: left;
	cursor: pointer;
}

.pp-stat b { display: block; font-size: 26px; line-height: 1.1; }
.pp-stat span { font-size: 12px; color: var(--muted); }

/* ---------- duyuru ---------- */

.pp-note { display: flex; gap: 8px; padding: 10px 0 10px 12px; border-left: 3px solid var(--brand); margin-bottom: 8px; }
.pp-note.is-imp { border-left-color: var(--warn); }
.pp-note__main { flex: 1; min-width: 0; }
.pp-note p { margin: 2px 0 4px; white-space: pre-line; }
.pp-note small { color: var(--muted); font-size: 12px; }
.pp-acts { display: flex; align-items: flex-start; }

/* ---------- liste ---------- */

.pp-list { padding-top: 6px; padding-bottom: 6px; }
.pp-list h2 { margin-top: 8px; }

.pp-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
}

.pp-item:last-child { border-bottom: 0; }
.pp-item__main { flex: 1; min-width: 0; cursor: pointer; }
.pp-item__main span { display: block; }
.pp-item__main em { font-style: normal; color: var(--muted); font-size: 14px; }
.pp-item__main small { display: block; color: var(--muted); font-size: 13px; }

.pp-check {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid var(--muted);
	background: none;
	flex: none;
	cursor: pointer;
	position: relative;
}

.pp-item.is-done .pp-check { background: var(--brand); border-color: var(--brand); }
.pp-item.is-done .pp-check::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pp-item.is-done .pp-item__main span { text-decoration: line-through; color: var(--muted); }

.pp-due { display: inline-block !important; font-size: 12px; padding: 1px 8px; border-radius: 6px; background: var(--bg); color: var(--muted); margin-top: 3px; }
.pp-due.is-late { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.pp-star { color: var(--warn); font-style: normal; }

.pp-ev__time { width: 62px; flex: none; color: var(--brand); font-weight: 600; font-size: 14px; }

.pp-alert { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pp-alert:last-child { border-bottom: 0; }
.pp-alert__ic { font-size: 22px; width: 32px; text-align: center; }
.pp-alert b { display: block; font-weight: 600; }
.pp-alert small { color: var(--muted); font-size: 12px; }

/* ---------- hızlı ekle ---------- */

.pp-quick { display: flex; gap: 8px; margin: 4px 0 12px; }

.pp-quick input {
	flex: 1;
	min-width: 0;
	height: 48px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--card);
	padding: 0 14px;
	font-size: 16px;
}

.pp-quick .pp-quick__qty { flex: 0 0 96px; }
.pp-quick .pp-btn { width: 48px; height: 48px; padding: 0; }

.pp-seg { display: flex; background: var(--line); border-radius: 12px; padding: 3px; margin-bottom: 12px; }
.pp-seg button { flex: 1; border: 0; background: none; border-radius: 9px; padding: 7px; font-size: 14px; cursor: pointer; color: var(--muted); }
.pp-seg { overflow-x: auto; scrollbar-width: none; }
.pp-seg button { white-space: nowrap; }
.pp-board { margin-left: 6px; }
.pp-seg button.is-on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }

/* ---------- formlar ---------- */

form label, .pp-form label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
form label small { font-weight: 400; }

form input:not([type=checkbox]):not([type=radio]), form select, form textarea {
	display: block;
	width: 100%;
	margin-top: 5px;
	min-height: 46px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--bg);
	padding: 10px 12px;
	font-size: 16px;
	font-weight: 400;
	color: var(--ink);
}

form textarea { resize: vertical; }
form input:focus, form select:focus, form textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
form input:disabled { opacity: 0.4; }

.pp-quick input, .pp-send__form input { margin-top: 0 !important; }

.pp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.pp-switch { display: flex !important; align-items: center; gap: 10px; font-weight: 500 !important; color: var(--ink) !important; font-size: 15px !important; cursor: pointer; }
.pp-switch input { width: 20px; height: 20px; accent-color: var(--brand); flex: none; margin: 0; }

.pp-code { font-size: 28px !important; letter-spacing: 0.2em; text-align: center; font-variant-numeric: tabular-nums; }

.pp-colors { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.pp-colors legend { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; padding: 0; }
.pp-colors label { margin: 0; }
.pp-colors input { position: absolute; opacity: 0; }
.pp-colors span { display: block; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; }
.pp-colors input:checked + span { border-color: var(--card); box-shadow: 0 0 0 2px var(--ink); }

.pp-geo { position: relative; }
.pp-loc { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 12px; margin: 0; display: grid; gap: 10px; min-width: 0; }
.pp-loc legend { padding: 0 6px; font-weight: 600; font-size: 0.9rem; }
.pp-geo__list { position: absolute; z-index: 3; left: 0; right: 0; top: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.pp-geo__list:empty { display: none; }
.pp-geo__list button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pp-geo__list small { color: var(--muted); font-weight: 400; }

/* ---------- ekran ve fotoğraflar ---------- */

.pp-dev { width: 12px; height: 12px; border-radius: 50%; background: var(--line); flex: none; margin: 0 6px; }
.pp-dev.is-on { background: #2fbf71; box-shadow: 0 0 0 4px color-mix(in srgb, #2fbf71 20%, transparent); }

.pp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 10px; }
.pp-photo { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg); }
.pp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-photo .pp-ibtn { position: absolute; right: 4px; top: 4px; width: 30px; height: 30px; background: rgba(0, 0, 0, 0.5); color: #fff; }

/* ---------- alt pencere ---------- */

.pp-sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.pp-sheet__bg { position: absolute; inset: 0; background: rgba(10, 14, 18, 0.45); opacity: 0; transition: opacity 0.2s; }

.pp-sheet__box {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: 92vh;
	overflow: auto;
	background: var(--card);
	border-radius: 20px 20px 0 0;
	padding: 6px 18px calc(18px + env(safe-area-inset-bottom));
	transform: translateY(30px);
	opacity: 0;
	transition: transform 0.22s ease-out, opacity 0.22s;
}

.pp-sheet.is-on .pp-sheet__bg { opacity: 1; }
.pp-sheet.is-on .pp-sheet__box { transform: none; opacity: 1; }

.pp-sheet__head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--card); padding: 10px 0 8px; margin-bottom: 6px; z-index: 2; }
.pp-sheet__head h2 { margin: 0; font-size: 18px; }
.pp-sheet__acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.pp-sheet__acts .pp-btn--primary { min-width: 120px; min-height: 48px; }

@media (min-width: 700px) {
	.pp-sheet { align-items: center; }
	.pp-sheet__box { border-radius: 20px; }
}

/* ---------- bildirim ---------- */

.pp-toast {
	position: fixed;
	left: 50%;
	bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);
	z-index: 30;
	transform: translate(-50%, 20px);
	opacity: 0;
	pointer-events: none;
	background: var(--ink);
	color: var(--bg);
	padding: 10px 16px;
	border-radius: 12px;
	font-size: 14px;
	max-width: calc(100% - 32px);
	transition: opacity 0.2s, transform 0.2s;
}

.pp-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.pp-toast.is-bad { background: var(--bad); color: #fff; }

.pp-noscript { padding: 20px; text-align: center; }

/* ---------- giriş ---------- */

.pp-gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.pp-gate__box { width: 100%; max-width: 380px; text-align: center; }
.pp-gate__logo svg { width: 64px; height: 64px; stroke: var(--brand); stroke-width: 2.2; }
.pp-gate h1 { margin: 8px 0 4px; font-size: 24px; }
.pp-gate__sub { color: var(--muted); margin: 0 0 22px; }
.pp-gate__form { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.pp-gate__err { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); padding: 10px 12px; border-radius: 10px; }
.pp-gate__foot { color: var(--muted); font-size: 14px; margin-top: 18px; }
.pp-gate__foot a { color: var(--brand); }

.pp-pass { position: relative; display: block; }
.pp-pass input { padding-right: 76px !important; }
.pp-pass__eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin-top: 2px; border: 0; background: none; color: var(--brand); font-weight: 600; font-size: 13px; padding: 8px; cursor: pointer; }

/* ---------- parola üret / giriş bilgileri ---------- */

.pp-genpass { display: flex; gap: 8px; align-items: center; margin-top: 5px; }
.pp-genpass input { margin-top: 0 !important; flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; }
.pp-genpass .pp-btn { min-height: 46px; flex: none; }

.pp-cred dl { margin: 0 0 14px; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: baseline; }
.pp-cred dt { color: var(--muted); font-size: 13px; font-weight: 600; }
.pp-cred dd { margin: 0; word-break: break-all; }
.pp-cred__pass { font: 600 22px/1.3 ui-monospace, Menlo, monospace; color: var(--brand); user-select: all; }
.pp-cred__acts { flex-wrap: wrap; }
.pp-btn--wa { background: #25d366; color: #0b2e17; }

/* ---------- hızlı ekleme ---------- */
.pp-quick__help { margin: -4px 2px 12px; }
.pp-item.is-pending { opacity: 0.55; }
.pp-qty { display: inline-block; font-style: normal; font-size: 13px !important; color: var(--brand) !important; background: var(--brand-soft); padding: 1px 8px; border-radius: 999px; margin-left: 4px; vertical-align: 1px; }

/* ---------- ekran tasarımı düzenleyicisi ---------- */

.pp-dev__ly { margin-top: 6px; min-height: 34px !important; padding: 4px 8px !important; font-size: 14px !important; width: auto !important; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }

.pp-ed {
	position: fixed;
	inset: 0;
	z-index: 15;
	background: var(--bg);
	display: flex;
	flex-direction: column;
	overflow: auto;
}

.pp-ed__top {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
	border-bottom: 1px solid var(--line);
	background: var(--card);
	position: sticky;
	top: 0;
	z-index: 2;
}

.pp-ed__name { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--bg); color: var(--ink); font-weight: 600; }
.pp-ed__tools { display: flex; align-items: center; gap: 12px; padding: 12px; flex-wrap: wrap; }
.pp-ed__tools .pp-help { margin: 0; }
.pp-ed__stage { padding: 0 12px calc(24px + env(safe-area-inset-bottom)); }

.pp-ed__wrap { display: flex; gap: 4px; max-width: 1130px; margin: 0 auto; }

.pp-ed__canvas {
	position: relative;
	flex: 1;
	min-width: 0;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	background-color: #0e1116;
	/* ölçü zemini: her hücre ince, her 4 hücre belirgin çizgi */
	background-image:
		linear-gradient(to right, rgba(95, 211, 176, 0.28) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(95, 211, 176, 0.28) 1px, transparent 1px),
		linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size:
		calc(400% / var(--cols)) calc(400% / var(--rows)),
		calc(400% / var(--cols)) calc(400% / var(--rows)),
		calc(100% / var(--cols)) calc(100% / var(--rows)),
		calc(100% / var(--cols)) calc(100% / var(--rows));
	box-shadow: 0 0 0 1px var(--line);
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.pp-ed__ruler { display: flex; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.pp-ed__ruler--x { max-width: 1130px; margin: 0 auto 2px; padding-left: 22px; }
.pp-ed__ruler--x span { flex: 1; }
.pp-ed__ruler--y { flex-direction: column; width: 18px; text-align: right; }
.pp-ed__ruler--y span { flex: 1; }
.pp-ed__opt { display: flex !important; align-items: center; gap: 6px; margin: 0 !important; font-size: 13px; }
.pp-ed__opt select { margin: 0 !important; min-height: 34px !important; padding: 4px 8px !important; font-size: 14px !important; width: auto !important; }

.pp-ed__size {
	position: absolute;
	left: 5px;
	top: 4px;
	font: 600 10px/1 ui-monospace, Menlo, monospace;
	color: #5fd3b0;
	background: rgba(14, 17, 22, 0.75);
	padding: 2px 4px;
	border-radius: 4px;
	pointer-events: none;
}

.pp-ed__w.is-drag .pp-ed__size { color: #0e1116; background: #5fd3b0; font-size: 12px; }

.pp-ed__w { position: absolute; padding: 1.5px; touch-action: none; cursor: grab; transition: left 0.08s, top 0.08s, width 0.08s, height 0.08s; }
.pp-ed__w.is-drag { z-index: 3; cursor: grabbing; transition: none; }

.pp-ed__wi {
	position: absolute;
	inset: 1.5px;
	border-radius: 6px;
	background: rgba(28, 36, 48, 0.92);
	border: 1.5px solid #2f3a4a;
	color: #eef1f5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	padding: 4px;
	line-height: 1.15;
}

.pp-ed__w.is-drag .pp-ed__wi { border-color: #5fd3b0; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
.pp-ed__w.is-bad .pp-ed__wi { border-color: #e5534b; background: #3a1f1f; }
.pp-ed__ic { font-size: clamp(14px, 2.4vw, 26px); }
.pp-ed__wi b { font-size: clamp(10px, 1.3vw, 14px); font-weight: 600; }
.pp-ed__wi small { font-size: clamp(9px, 1.1vw, 12px); color: #9aa4b2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pp-ed__rs {
	position: absolute;
	right: 3px;
	bottom: 3px;
	width: 22px;
	height: 22px;
	border-radius: 0 0 8px 0;
	cursor: nwse-resize;
	background: linear-gradient(135deg, transparent 50%, #5fd3b0 50%);
	opacity: 0.85;
}

.pp-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }

.pp-cat__i {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 8px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--bg);
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
}

.pp-cat__i span { font-size: 28px; }
.pp-cat__i:active { border-color: var(--brand); }

.pp-pos, .pp-multi { border: 0; padding: 0; margin: 4px 0 12px; }
.pp-pos legend, .pp-multi legend { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; padding: 0; }
.pp-row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pp-row4 label { margin-bottom: 0; }
.pp-multi .pp-switch { margin-bottom: 8px; }
.pp-color { padding: 4px !important; height: 46px; }

/* emoji / ikon seçici ve ikon kütüphanesi */
.pp-emoji { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.pp-emoji input { margin-top: 0 !important; flex: 1; min-width: 0; }
.pp-emoji .pp-btn { min-height: 46px; }
.pp-emoji__pv { width: 46px; height: 46px; flex: none; border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--bg); }
.pp-emoji__pv img, .pp-iconpick__i img, .pp-icon img { width: 70%; height: 70%; object-fit: contain; }
.pp-iconpick { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; padding: 10px; border: 1px dashed var(--line); border-radius: 12px; }
.pp-iconpick__i { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pp-iconadd { display: grid; gap: 8px; width: 100%; }
.pp-iconadd input, .pp-iconadd textarea { margin-top: 0 !important; }
.pp-iconadd a { color: var(--brand); font-weight: 600; }
.pp-iconadd-box { margin-bottom: 12px; }
.pp-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.pp-icon { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--bg); }
.pp-icon img { width: 40px; height: 40px; }
.pp-icon small { font-size: 11px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-icon .pp-ibtn { position: absolute; right: 0; top: 0; width: 28px; height: 28px; }
.pp-help a { color: var(--brand); font-weight: 600; }

.pp-dev__in { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 6px; }
.pp-dev__in select { flex: 1; min-width: 0; padding: 6px 8px; font-size: 13px; }

/* Dikey tasarım: 9:16 tuval, ekran yüksekliğine sığar */
.pp-ed__stage.is-dikey .pp-ed__wrap,
.pp-ed__stage.is-dikey .pp-ed__ruler--x { max-width: calc(min(72vh, 1000px) * 9 / 16 + 22px); }
.pp-ed__stage.is-dikey .pp-ed__canvas { aspect-ratio: 9 / 16; }
.pp-dev__in + .pp-dev__in { margin-top: 4px; }

.pp-vtag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 6px; font-size: 10px; line-height: 16px; background: var(--line); color: var(--muted); vertical-align: 1px; }

.pp-gdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; flex: none; }
.pp-gtag { font-style: normal; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; margin-left: 4px; }
.pp-gform { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pp-gform input:not([type=color]) { flex: 1 1 180px; min-width: 0; }
.pp-gform input[type=color] { flex: none; width: 48px !important; height: 44px; padding: 2px; border-radius: 10px; }
.pp-gerr { color: var(--bad) !important; }

.pp-views { display: flex; gap: 8px; margin-bottom: 12px; }
.pp-views button { flex: 1; border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 12px; padding: 10px; font-size: 15px; font-weight: 600; cursor: pointer; }
.pp-views button.is-on { background: var(--brand); border-color: transparent; color: #fff; }
.pp-meal h2 { margin: 0 0 8px; font-size: 15px; }
.pp-meal__r { display: flex !important; align-items: center; gap: 10px; margin: 6px 0 !important; }
.pp-meal__r span { width: 96px; flex: none; font-size: 13px; color: var(--muted); }
.pp-meal__r input { flex: 1; min-width: 0; margin: 0 !important; transition: box-shadow 0.3s; }
.pp-meal__r input.is-saved { box-shadow: 0 0 0 2px #2fbf71; }
.pp-stars { font-size: 13px; color: #c98a00; white-space: nowrap; }
.pp-days { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-days label { display: block !important; margin: 0 !important; }
.pp-days input { display: none; }
.pp-days span { display: inline-block; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; cursor: pointer; color: var(--muted); }
.pp-days input:checked + span { background: var(--brand); border-color: transparent; color: #fff; }

.pp-views button { padding: 9px 4px; font-size: 14px; }
.pp-kinds { display: flex; gap: 6px; margin-bottom: 4px; }
.pp-kinds label { flex: 1; display: block !important; margin: 0 !important; }
.pp-kinds input { display: none; }
.pp-kinds span { display: block; text-align: center; padding: 10px 4px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.pp-kinds input:checked + span { background: var(--brand); border-color: transparent; color: #fff; }
.pp-bkform [hidden] { display: none !important; }
.pp-bk .pp-ev__time { font-variant-numeric: tabular-nums; }