/* TextRU: открытка. Из прототипа (design/tools/port-card.py) + дополнения темы. */
.btn .ic{width:20px;height:20px}
.btn-s{background:var(--sunk);color:var(--ink);border:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:14px;z-index:65;display:flex;gap:8px;align-items:center;animation:toastIn .3s var(--ease);white-space:nowrap}
.toast .ic{width:18px;height:18px;color:var(--rasp)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.mk{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px;align-items:start;padding-bottom:30px}
.mk-prev{position:sticky;top:calc(var(--protoh,0px) + 76px);display:grid;grid-template-columns:minmax(0,1fr);gap:10px;justify-items:center;min-width:0}
.mk-prev canvas{display:block;width:auto;max-width:100%;max-width:min(520px,100%);max-height:70vh;object-fit:contain;height:auto;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.16);touch-action:none;cursor:grab;background:var(--sunk)}
.mk-prev canvas.dragging{cursor:grabbing}
.mk-prev .acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.mk-prev .hint{text-align:center}
.mk-ctl{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.step{min-width:0}
.step{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:14px}
.step .h3{display:flex;align-items:center;gap:8px;font-size:16px;margin-bottom:12px}
.step .h3 .no{width:24px;height:24px;border-radius:8px;background:var(--rasp-soft);color:var(--rasp);display:grid;place-items:center;font-size:13px}
.occs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.occs .chip{font-size:13px;padding:6px 11px}
.occs .chip .ic{width:16px;height:16px;color:var(--rasp)}
.occs .chip[aria-pressed="true"] .ic{color:inherit}
.occs .chip .n{font-size:11px}
.tpls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tpls button{position:relative;border:2px solid transparent;border-radius:12px;padding:0;background:none;overflow:hidden;aspect-ratio:4/5;transition:transform .2s var(--ease),border-color .2s}
.tpls button:hover{transform:translateY(-2px)}
.tpls button[aria-pressed="true"]{border-color:var(--rasp)}
.tpls button[aria-pressed="true"]::after{content:"";position:absolute;right:5px;top:5px;width:18px;height:18px;border-radius:50%;background:var(--rasp) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12l4 4 8-8' stroke='white' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat}
.tpls canvas{width:100%;height:100%;display:block}
.tpls span{position:absolute;left:0;right:0;bottom:0;font-size:11px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));padding:10px 4px 4px;text-align:center}
.form{display:grid;gap:12px}
.form label{font-size:13px;font-weight:600;display:grid;gap:6px}
.form input[type=text],.form textarea,.form select{font:inherit;font-size:15px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:10px;width:100%}
.form textarea{min-height:150px;resize:vertical;line-height:1.5}
.form textarea#c-sign{min-height:70px}
.form textarea.flash{animation:hl .6s var(--ease)}
@keyframes hl{0%{background:var(--rasp-soft);border-color:var(--rasp)}100%{background:var(--surface)}}
.txt{display:grid;gap:8px}
.txt-h{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.txt-h label{font-size:13px;font-weight:600}
.txt-src{font-size:12px;color:var(--muted);background:var(--sunk);border-radius:99px;padding:3px 9px;font-variant-numeric:tabular-nums}
.txt-src.own{color:var(--game);background:var(--game-soft)}
.txt-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center}
.txt-nav button{height:40px;border:1px solid var(--line);background:var(--surface);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:600;transition:border-color .2s,background .2s,transform .15s}
.txt-nav button:hover{border-color:var(--rasp)}
.txt-nav button:active{transform:scale(.96)}
.txt-nav .ar{width:40px;padding:0}
.txt-nav .ar .ic{width:18px;height:18px}
.txt-nav .ar.prev .ic{transform:scaleX(-1)}
.txt-nav .mid{background:var(--rasp-soft);color:var(--rasp);border-color:transparent}
.txt-nav .mid .ic{width:18px;height:18px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 11px;font-size:14px;transition:all .2s}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.range{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.range input{flex:1;accent-color:var(--rasp)}
.stickers{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.stickers button{aspect-ratio:1;border:1px solid var(--line);background:var(--sunk);border-radius:10px;font-size:22px;line-height:1;display:grid;place-items:center;transition:transform .15s}
.stickers button:hover{transform:scale(1.12) rotate(-6deg)}
.stk-tools{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}

/* Дополнения темы */
.mk{padding-bottom:40px}
.step .h3{font-family:var(--f-display);font-weight:700;margin:0 0 12px}
.mk-prev canvas{background:var(--sunk)}
.txt-src a{color:inherit}
.card-src{font-size:12px;color:var(--muted);margin:0}
.card-src a{color:var(--rasp)}
.card-more{margin:28px 0 40px}
.card-more ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
#card-app:not(.ready) .mk-ctl{opacity:.6;pointer-events:none}
@media (max-width:940px){.mk{grid-template-columns:minmax(0,1fr)}.mk-prev{position:static}}
@media (max-width:420px){.tpls{grid-template-columns:repeat(3,minmax(0,1fr))}.stickers{grid-template-columns:repeat(6,minmax(0,1fr))}}