/* My templates board: two horizontal rows + iOS-style folders. Colours come from the host page (--wine, --gold, --line, --muted). */
#mytemplates #mtGrid, #mytemplates #mtEmpty, #mytemplates #mtDocs { display: none !important; }
.mt-empty[hidden] { display: none; }
.mtb-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mtb-bar .muted { font-size: 13px; }
.mtb-sec { margin-top: 26px; }
.mtb-sec h3 { font: 800 11px var(--sans, system-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #786e6b); margin: 0; display: flex; align-items: center; gap: 8px; }
.mtb-sec h3 b { font: 700 10.5px var(--sans, system-ui); background: var(--cream, #f1e9e1); color: #6b5a52; border-radius: 99px; padding: 2px 8px; letter-spacing: 0; }
.mtb-rowwrap { position: relative; }
.mtb-row { display: flex; gap: 16px; overflow-x: auto; padding: 14px 22px 24px; margin: 0 -22px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #d8c9be transparent; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 40px), transparent 100%); }
.mtb-card { flex: 0 0 auto; width: min(262px, 76vw); scroll-snap-align: start; animation: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .3s cubic-bezier(.3, 1.45, .5, 1), box-shadow .25s, opacity .2s; }
.mtb-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px #582c3a26; }
.mtb-card.mtb-src { opacity: .22; transform: scale(.96); }
.mtb-card.merge { transform: scale(1.06); box-shadow: 0 0 0 3px #c79c5e88, 0 18px 40px #582c3a30; }
.mtb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; }
.mtb-actions .btn { margin-top: 0; padding: 8px 14px; font-size: 12.5px; }
.mtb-actions .mt-del { align-self: auto; margin-top: 0; }
.mtb-actions .mt-del:first-of-type { margin-left: auto; }
.mtb-empty { flex: 0 0 auto; width: min(262px, 76vw); min-height: 130px; border: 2px dashed #e0d3c6; border-radius: 16px; background: #fffdfb; color: var(--muted, #786e6b); font: 600 13px var(--sans, system-ui); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; text-align: center; padding: 14px; }
.mtb-empty span { font-size: 24px; color: var(--gold, #c79c5e); line-height: 1; }
.mtb-empty:hover { border-color: var(--gold, #c79c5e); background: #fff8ee; }
.mtb-empty.hint { cursor: default; border-style: solid; border-color: #efe4d8; }
.mtb-empty.hint:hover { background: #fffdfb; border-color: #efe4d8; }
.mtb-arrow { position: absolute; top: 46%; transform: translateY(-50%); z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line, #e2d6cb); background: #fffffff0; box-shadow: 0 6px 18px #2b1a2224; font-size: 22px; line-height: 1; cursor: pointer; color: #4d2434; }
.mtb-arrow.l { left: -8px; } .mtb-arrow.r { right: -8px; }
.mtb-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
@media (hover: none) { .mtb-arrow { display: none; } }

/* folder tile */
.mt-folder { flex: 0 0 auto; width: 150px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; outline: none; scroll-snap-align: start; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.mtf-box { width: 122px; height: 122px; border-radius: 30px; padding: 15px; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px;
  background: linear-gradient(150deg, #ffffffe6, #f3e4d0d9); border: 1px solid #e6d6c2; box-shadow: 0 10px 26px #582c3a1f, inset 0 1px 0 #fff; transition: transform .5s cubic-bezier(.3, 1.45, .5, 1), box-shadow .3s, opacity .2s; }
.mt-folder:hover .mtf-box, .mt-folder:focus-visible .mtf-box { transform: scale(1.05); box-shadow: 0 14px 32px #582c3a2b, inset 0 1px 0 #fff; }
.mt-folder:focus-visible .mtf-box { outline: 2px solid var(--wine, #612f42); outline-offset: 3px; }
.mt-folder.hot .mtf-box { transform: scale(1.2); box-shadow: 0 0 0 4px #c79c5e55, 0 20px 40px #582c3a36; }
.mt-folder.mt-open .mtf-box { opacity: 0; }
.mtf-box i { border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 800 9px var(--sans, system-ui); font-style: normal; letter-spacing: .05em; }
.mtf-box i.k-pdf { background: #612f4222; color: #612f42; } .mtf-box i.k-tpl { background: #c79c5e38; color: #8a6428; font-size: 12px; } .mtf-box i.k-none { background: #0000000a; border: 1px dashed #0000001f; }
.mtf-name { font: 700 13px var(--sans, system-ui); max-width: 140px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtf-count { font-size: 11px; color: var(--muted, #786e6b); margin-top: -6px; }
@keyframes mtJelly { 0% { transform: scale(1, 1); } 16% { transform: scale(1.2, .82); } 34% { transform: scale(.9, 1.14); } 52% { transform: scale(1.07, .95); } 70% { transform: scale(.98, 1.03); } 100% { transform: scale(1, 1); } }
.mt-folder.jelly .mtf-box { animation: mtJelly .8s both; }

/* the floating copy that follows the pointer */
.mtb-ghost { position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; transform-origin: center; will-change: transform; }
.mtb-ghost .mtb-card { margin: 0; transform: scale(1.07) rotate(var(--tilt, 0deg)); box-shadow: 0 28px 56px #3a1f2a55; opacity: 1; cursor: grabbing; transition: transform .26s cubic-bezier(.3, 1.45, .5, 1); }
body.mtb-dragging, body.mtb-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }

/* opened folder */
.mt-sheet { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 18px; }
.mt-backdrop { position: absolute; inset: 0; background: #2b1a2266; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mt-panel { position: relative; width: min(800px, 100%); max-height: 86vh; display: flex; flex-direction: column; background: linear-gradient(160deg, #fffdfb, #f8efe4); border: 1px solid #e6d6c2; border-radius: 30px; box-shadow: 0 40px 90px #2b1a2260; overflow: hidden; }
.mtp-head { display: flex; align-items: center; gap: 10px; padding: 20px 22px 8px; }
.mtp-name { flex: 1; min-width: 0; font: 400 28px var(--display, Georgia, serif); border: 1px solid transparent; background: transparent; border-radius: 12px; padding: 4px 10px; color: inherit; }
.mtp-name:hover, .mtp-name:focus { border-color: #e2d6cb; background: #fff; outline: none; }
.mtp-count { font-size: 12.5px; white-space: nowrap; }
.mtp-x { width: 38px; height: 38px; border-radius: 50%; border: 0; background: #0000000d; font-size: 22px; line-height: 1; cursor: pointer; color: #4d2434; }
.mtp-x:hover { background: #0000001a; }
.mtp-body { padding: 8px 22px 26px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; }
.mtp-body .mtb-card { width: auto; }
.mtp-empty { grid-column: 1 / -1; text-align: center; padding: 44px 10px; color: var(--muted, #786e6b); line-height: 1.6; }

/* Move menu */
.mtb-menu { position: fixed; z-index: 1800; background: #fff; border: 1px solid var(--line, #e2d6cb); border-radius: 14px; box-shadow: 0 18px 44px #2b1a2240; padding: 6px; min-width: 200px; max-width: 280px; transform-origin: top left; }
.mtb-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 9px; font: 600 13px var(--sans, system-ui); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtb-menu button:hover, .mtb-menu button:focus { background: var(--cream, #f1e9e1); outline: none; }
@media (max-width: 640px) { .mtp-name { font-size: 22px; } .mt-panel { border-radius: 24px; } .mtp-del { display: none; } }
@media (prefers-reduced-motion: reduce) { .mt-folder.jelly .mtf-box { animation: none; } .mtb-card, .mtf-box { transition: none; } }

/* polish after review */
.mtb-row { padding-left: 24px; padding-right: 40px; scroll-padding-left: 24px; margin-left: -24px; margin-right: -24px; }
.mtb-arrow.l { left: -22px; } .mtb-arrow.r { right: -22px; }
.mtb-arrow { width: 40px; height: 40px; background: #fff; border-color: #d8c9be; box-shadow: 0 8px 22px #2b1a2230; }
.mtb-card { width: min(272px, 76vw); }
.mtb-empty { width: min(272px, 76vw); }
.mtb-actions { flex-wrap: nowrap; gap: 6px; }
.mtb-actions .btn { padding: 8px 12px; white-space: nowrap; }
.mtb-actions .mt-del { padding: 6px 4px; font-size: 11.5px; white-space: nowrap; flex: none; }
.mtb-actions .mt-del[data-act=menu] { margin-left: auto; color: #6b5a52; }
.mtb-actions .mt-del[data-act=del] { margin-left: 0; color: #a5424d; }
.mtb-actions .mt-del[data-act=del]:hover { color: #8a2f3a; }
.mtp-body .mtb-actions { flex-wrap: wrap; }
.mtp-count { order: 0; margin-left: 2px; }
.mtp-del { color: #a5424d; border-color: #e7c9cc; background: #fff; }
.mtp-del:hover { background: #fbeeee; }
.mtp-x { background: #4d24341a; width: 40px; height: 40px; }
.mtp-head { padding: 22px 24px 10px; }
.mtp-body { padding: 10px 24px 28px; }
.mt-card .kicker { color: #a87b3a; }
.mt-card { overflow: visible; }
.mtb-row { padding-top: 18px; padding-bottom: 30px; }
.mtb-sec { margin-top: 18px; }
.mtb-bar { margin-bottom: -4px; }
.mt-folder.has-more .mtf-count { color: #6b5a52; }

.mtf-box i { overflow: hidden; padding: 4px; }
.mtf-box i b { font: 700 8.5px/1.15 var(--sans, system-ui); letter-spacing: 0; text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.mtf-box i.k-empty { background: transparent; }
.mt-folder { padding-left: 0; }
.mtb-row { padding-right: 56px; }
.mtb-arrow.r { right: -10px; }
.mtb-meta-fix, .mt-meta { min-height: 2.9em; }

/* round 3 */
.mtf-box i b { word-break: normal; overflow-wrap: break-word; hyphens: auto; font-size: 8px; -webkit-line-clamp: 3; }
.mt-folder { width: 122px; align-items: flex-start; }
.mtf-name, .mtf-count { align-self: stretch; text-align: left; max-width: 122px; }
.mtb-row[data-zone=folders] { gap: 22px; }
.mtb-arrow.r { right: 6px; top: 40%; box-shadow: 0 8px 22px #2b1a2240; }
.mtb-arrow.l { left: 6px; top: 40%; }

.mtf-box { padding: 12px; gap: 6px; }
.mtf-box i { padding: 3px; border-radius: 9px; }
.mtf-box i b { font-size: 7.5px; line-height: 1.2; overflow-wrap: normal; word-break: keep-all; hyphens: none; -webkit-line-clamp: 4; }

.mtf-box i b { overflow-wrap: anywhere; }

.mtf-box i b { font-size: 8px !important; overflow-wrap: normal; word-break: normal; }