:root{
  --bg:#171717;--panel:#090909;--row:#1b1b1b;--line:#2a2a2a;--text:#f4f4f4;
  --muted:#999;--soft:#d0d0d0;--safe:env(safe-area-inset-bottom,0px)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
.topbar{height:78px;padding:12px 22px;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:12px;position:sticky;top:0;z-index:40;background:rgba(23,23,23,.97);backdrop-filter:blur(18px);border-bottom:1px solid #242424}
.icon-btn{width:42px;height:42px;border:0;background:transparent;color:#fff;font-size:38px;line-height:1;font-weight:250;padding:0;display:grid;place-items:center}
.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand img{width:40px;height:40px;border-radius:50%;object-fit:cover}.brand b,.brand span{display:block}.brand b{font-size:22px;letter-spacing:-.025em}.brand span{font-size:11px;color:#8f8f8f;margin-top:1px}.top-spacer{width:42px}
.page{width:min(100%,860px);margin:0 auto;padding:0 0 calc(110px + var(--safe))}
.guide{padding:24px 30px 18px;border-bottom:1px solid #242424}.guide b,.guide span{display:block}.guide b{font-size:18px;font-weight:650}.guide span{font-size:13px;color:#9a9a9a;margin-top:5px;max-width:620px;line-height:1.45}
.catalog{padding-bottom:20px}.category{border-bottom:1px solid #242424}
.category-head{width:100%;height:102px;border:0;background:transparent;color:#fff;padding:0 30px;display:flex;align-items:center;justify-content:space-between;text-align:left}
.category-title{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:470;letter-spacing:-.025em}.category-icon{width:32px;text-align:center;font-size:23px;filter:saturate(.7)}.category-star{font-size:18px;color:#ddd;margin-left:4px}.chev{font-size:32px;line-height:1;color:#eee;transition:transform .2s;font-weight:300}.category.collapsed .chev{transform:rotate(180deg)}
.rail-wrap{background:#050505;padding:0 28px 28px;border-top:1px solid #151515}.category.collapsed .rail-wrap{display:none}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(255px,310px);gap:24px;overflow-x:auto;padding:20px 0 4px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}

/* Professional template mockup: one faint image, clean structure, simple pattern */
.design-card{--accent:#7f8ea3;--bgimg:none;scroll-snap-align:start;position:relative;border:0;background:#efeee9;border-radius:14px;overflow:hidden;padding:0;text-align:left;color:#171717;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 18px 42px rgba(0,0,0,.22);transition:transform .18s ease,box-shadow .18s ease;aspect-ratio:10/17;min-height:510px}
.design-card:active{transform:scale(.988)}.design-card.selected{box-shadow:0 0 0 2px #f5f5f5,0 18px 42px rgba(0,0,0,.28)}
.design-card .mock{position:absolute;inset:0;display:grid;grid-template-rows:44% 27% 29%;background:#f1f0ec;overflow:hidden}.mock-cover,.mock-agenda,.mock-content{position:relative;overflow:hidden}.slide-no{position:absolute;right:14px;top:12px;z-index:4;font-size:9px;font-weight:800;letter-spacing:.08em;color:rgba(38,38,38,.45)}
.mock-cover{display:flex;align-items:flex-end;padding:24px 20px;background:#d7d6d1;border-bottom:6px solid #050505}.mock-cover::before{content:"";position:absolute;inset:-16px;background-image:linear-gradient(rgba(20,20,20,.44),rgba(20,20,20,.56)),var(--bgimg);background-size:cover;background-position:center;filter:blur(5px) saturate(.5) contrast(.9);transform:scale(1.09)}.no-photo .mock-cover::before{background:linear-gradient(145deg,#d8d8d3,#bfc1bf);filter:none}
.mock-cover::after,.mock-agenda::before,.mock-content::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.42}.pattern-dots .mock-cover::after,.pattern-dots .mock-agenda::before,.pattern-dots .mock-content::before{background-image:radial-gradient(circle at 14px 14px,color-mix(in srgb,var(--accent) 28%,transparent) 1px,transparent 1.1px);background-size:28px 28px}.pattern-grid .mock-cover::after,.pattern-grid .mock-agenda::before,.pattern-grid .mock-content::before{background-image:linear-gradient(color-mix(in srgb,var(--accent) 16%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,transparent) 1px,transparent 1px);background-size:30px 30px}.pattern-lines .mock-cover::after,.pattern-lines .mock-agenda::before,.pattern-lines .mock-content::before{background-image:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,transparent) 0 1px,transparent 1px 22px)}
.cover-copy{position:relative;z-index:2;width:84%;padding:14px 15px 15px;border-radius:10px;background:rgba(247,246,242,.91);backdrop-filter:blur(6px);box-shadow:0 5px 20px rgba(0,0,0,.11)}.cover-kicker{display:block;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);font-weight:800;margin-bottom:8px}.cover-title{font-size:23px;line-height:1.03;font-weight:800;letter-spacing:-.035em;color:#171717}.cover-sub{display:block;margin-top:7px;font-size:9.5px;line-height:1.35;color:#686868}.cover-rule{position:absolute;z-index:2;left:20px;bottom:18px;width:42px;height:3px;border-radius:3px;background:var(--accent);opacity:.8}
.mock-agenda{background:#f8f7f3;padding:18px 18px 16px;border-bottom:6px solid #050505}.mock-agenda h4,.mock-content h4{position:relative;z-index:2;margin:0 0 11px;font-size:15px;letter-spacing:-.02em;color:#222}.agenda-lines{position:relative;z-index:2;display:grid;gap:8px}.agenda-line{display:grid;grid-template-columns:22px 1fr;align-items:center;gap:8px}.agenda-line i{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 88%,#777 12%);color:#fff;font-style:normal;font-size:8px;font-weight:800}.agenda-line span{height:7px;border-radius:5px;background:linear-gradient(90deg,#7c7c7c 0 64%,#d7d7d7 64%)}
.mock-content{padding:17px 18px 16px;background:#ebeae5}.content-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:12px;height:calc(100% - 26px)}.content-text{display:grid;align-content:start;gap:8px}.content-text span{height:7px;border-radius:6px;background:#787878}.content-text span:nth-child(2){width:86%}.content-text span:nth-child(3){width:67%}.content-text em{display:block;width:52px;height:3px;border-radius:4px;background:var(--accent);margin-top:3px}.content-photo{position:relative;border-radius:9px;overflow:hidden;background:#c2c2bf;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.content-photo::before{content:"";position:absolute;inset:-8px;background-image:linear-gradient(rgba(30,30,30,.24),rgba(30,30,30,.24)),var(--bgimg);background-size:cover;background-position:center;filter:blur(4px) saturate(.45);transform:scale(1.1)}.no-photo .content-photo::before{background:linear-gradient(145deg,#d6d6d0,#b9bab7);filter:none}.content-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,transparent 0 61%,color-mix(in srgb,var(--accent) 24%,transparent) 61% 64%,transparent 64%)}
/* Three restrained layout variants. Same professional system, slightly different composition. */
.variant-split .cover-copy{width:72%;margin-left:auto}.variant-split .cover-rule{left:auto;right:20px}.variant-split .content-grid{grid-template-columns:.88fr 1.12fr}.variant-editorial .cover-copy{width:90%;border-radius:3px 10px 10px 3px}.variant-editorial .cover-title{font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:-.02em}.variant-editorial .agenda-line i{border-radius:5px}.variant-editorial .content-photo{border-radius:3px}
.design-meta{position:absolute;z-index:5;left:12px;right:12px;bottom:11px;min-height:42px;border-radius:9px;background:rgba(31,31,31,.78);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;color:#fff}.design-meta b{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.design-meta span{font-size:12px;white-space:nowrap;color:#eee}.selected-mark{position:absolute;z-index:8;right:12px;top:12px;width:28px;height:28px;border-radius:50%;display:none;place-items:center;background:#fff;color:#111;font-weight:900}.design-card.selected .selected-mark{display:grid}

.modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.84);backdrop-filter:blur(8px);display:none;place-items:center;padding:14px}.modal.open{display:grid}.modal-card{width:min(100%,500px);max-height:94vh;overflow:auto;background:#121212;border:1px solid #303030;border-radius:18px;padding:14px;box-shadow:0 30px 90px rgba(0,0,0,.65)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 12px}.modal-head small{color:#8d8d8d;font-size:11px}.modal-head h2{margin:4px 0 0;font-size:19px}.modal-preview{height:min(67vh,720px);border-radius:12px;overflow:hidden;background:#050505;display:grid;place-items:center}.modal-preview .design-card{width:min(82%,340px);height:94%;min-height:0;aspect-ratio:auto;pointer-events:none}.modal-meta{display:flex;justify-content:space-between;color:#8e8e8e;font-size:12px;padding:12px 2px}.primary{width:100%;height:50px;border:0;border-radius:11px;background:#fff;color:#111;font-weight:750}
.selected-bar{position:fixed;z-index:60;left:50%;bottom:calc(12px + var(--safe));transform:translate(-50%,120px);width:min(calc(100% - 24px),620px);background:#222;border:1px solid #3a3a3a;border-radius:14px;padding:10px 10px 10px 14px;display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:0 20px 60px rgba(0,0,0,.55);transition:.25s}.selected-bar.show{transform:translate(-50%,0)}.selected-bar small,.selected-bar b{display:block}.selected-bar small{font-size:10px;color:#969696}.selected-bar b{font-size:13px;max-width:290px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selected-bar button{height:42px;border:0;border-radius:10px;background:#fff;color:#111;font-weight:750;padding:0 18px}.toast{position:fixed;z-index:90;left:50%;bottom:32px;transform:translate(-50%,30px);opacity:0;background:#fff;color:#111;padding:10px 15px;border-radius:10px;font-size:12px;font-weight:650;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:620px){
  .topbar{height:70px;padding:10px 18px;grid-template-columns:40px 1fr 40px}.brand img{width:36px;height:36px}.brand b{font-size:20px}.icon-btn{width:38px;height:38px;font-size:34px}
  .guide{padding:20px 26px 14px}.guide b{font-size:17px}.guide span{font-size:12px}
  .category-head{height:96px;padding:0 28px}.category-title{font-size:22px;gap:10px}.category-icon{width:28px;font-size:21px}.chev{font-size:29px}
  .rail-wrap{padding:0 18px 24px}.rail{grid-auto-columns:72vw;gap:20px;padding-top:18px}.design-card{min-height:500px}.cover-title{font-size:22px}.design-meta b{font-size:11px}
}
@media (min-width:621px){.rail{grid-auto-columns:285px}.design-card{min-height:520px}}

/* =========================
   v1.9 — refined slide previews
   ========================= */
.guide{max-width:1060px;margin:0 auto;padding-left:28px;padding-right:28px}
.catalog{max-width:1060px;margin:0 auto 110px}
.category{border-bottom:1px solid #262626}
.category-head{background:transparent}
.category:not(.collapsed) .category-head{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0))}
.rail-wrap{padding-bottom:30px}
.rail{grid-auto-columns:288px;gap:18px;scroll-snap-type:x mandatory;padding-right:38px}
.design-card{scroll-snap-align:start;min-height:522px;border:1px solid #292929;background:#080808;border-radius:16px;box-shadow:0 14px 36px rgba(0,0,0,.28)}
.design-card .mock{grid-template-rows:43% 27% 30%;background:#eee}
.slide-no{font-size:8px;background:rgba(248,248,245,.76);padding:4px 6px;border-radius:99px;color:#555;backdrop-filter:blur(8px)}

.mock-cover{padding:0;background:#d9d8d2;isolation:isolate}
.mock-cover::before{display:none}
.cover-visual{position:absolute;inset:0;overflow:hidden;background:#c8c8c4}
.cover-visual::before,.agenda-visual::before,.content-photo::before{content:"";position:absolute;inset:-16px;background-image:linear-gradient(180deg,rgba(18,18,18,.12),rgba(18,18,18,.36)),var(--bgimg);background-size:cover;background-position:center;filter:blur(5.2px) saturate(.48) contrast(.92);transform:scale(1.1)}
.cover-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(245,244,240,.96) 0 37%,rgba(245,244,240,.62) 54%,rgba(18,18,18,.10) 100%)}
.no-photo .cover-visual::before,.no-photo .agenda-visual::before,.no-photo .content-photo::before{background:linear-gradient(145deg,#d8d8d3,#bfc1bf);filter:none}
.no-photo .cover-visual::after{background:linear-gradient(120deg,rgba(247,247,244,.95),rgba(208,209,205,.72))}
.cover-copy{position:absolute;z-index:5;left:18px;bottom:20px;width:74%;padding:14px 14px 15px;background:rgba(248,247,243,.89);border:1px solid rgba(255,255,255,.62);border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,.12);backdrop-filter:blur(12px)}
.cover-kicker{font-size:8px;margin-bottom:7px;letter-spacing:.12em}.cover-title{font-size:21px;line-height:1.02}.cover-sub{font-size:8px;margin-top:7px;color:#6d6d6d}.cover-rule{left:18px;bottom:12px;width:54px;height:2px}

.mock-agenda{padding:15px 16px 14px;background:#f8f7f3;border-bottom:5px solid #090909}
.agenda-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.mock-agenda h4{margin:0;font-size:14px}.agenda-chip{font-size:8px;font-weight:800;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,#fff 90%);border:1px solid color-mix(in srgb,var(--accent) 24%,#ddd 76%);padding:4px 7px;border-radius:99px}
.agenda-body{position:relative;z-index:2;display:grid;grid-template-columns:1.24fr .76fr;gap:10px;height:calc(100% - 26px)}
.agenda-lines{gap:6px;align-content:start}.agenda-line{grid-template-columns:19px 1fr;gap:7px}.agenda-line i{width:19px;height:19px;font-size:7px}.agenda-line span{height:6px;background:linear-gradient(90deg,#747474 0 72%,#dadada 72%)}
.agenda-visual{position:relative;overflow:hidden;border-radius:8px;background:#d3d3cf;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.agenda-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,transparent 35%,color-mix(in srgb,var(--accent) 26%,transparent) 35% 38%,transparent 38%)}

.mock-content{padding:14px 16px 15px;background:#ecebe6}
.content-head{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.mock-content h4{margin:0;font-size:13.5px}.content-head>span{font-size:7px;letter-spacing:.12em;font-weight:800;color:#8a8a8a}
.content-grid{height:calc(100% - 25px);grid-template-columns:1.04fr .96fr;gap:10px}
.content-text{gap:6px}.content-text>b{display:block;width:34px;height:3px;background:var(--accent);border-radius:4px;margin-bottom:1px}.content-text>span{height:6px}.content-text>span:nth-of-type(2){width:84%}.content-text>span:nth-of-type(3){width:68%}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:3px}.mini-stats i{height:18px;border-radius:5px;background:color-mix(in srgb,var(--accent) 14%,#fff 86%);border:1px solid color-mix(in srgb,var(--accent) 18%,#ddd 82%);position:relative}.mini-stats i::after{content:"";position:absolute;left:4px;bottom:4px;width:55%;height:3px;border-radius:3px;background:color-mix(in srgb,var(--accent) 72%,#666 28%)}
.content-photo{border-radius:8px}.content-photo::after{background:linear-gradient(180deg,transparent 55%,rgba(16,16,16,.32) 100%)}.content-photo em{position:absolute;z-index:4;right:7px;bottom:7px;width:24px;height:3px;background:#fff;border-radius:4px;opacity:.85}

/* five compositions — same calm visual system, genuinely different layouts */
.variant-split .cover-visual::after{background:linear-gradient(270deg,rgba(246,245,241,.96) 0 42%,rgba(246,245,241,.50) 62%,rgba(20,20,20,.08) 100%)}
.variant-split .cover-copy{left:auto;right:18px;width:69%;text-align:left}.variant-split .cover-rule{left:auto;right:18px}.variant-split .agenda-body{grid-template-columns:.82fr 1.18fr}.variant-split .content-grid{grid-template-columns:.82fr 1.18fr}
.variant-editorial .cover-copy{width:83%;border-radius:2px 10px 10px 2px}.variant-editorial .cover-title{font-family:Georgia,"Times New Roman",serif;font-size:22px}.variant-editorial .agenda-visual{border-radius:2px 10px 10px 2px}.variant-editorial .agenda-line i{border-radius:4px}.variant-editorial .content-photo{border-radius:2px}
.variant-dashboard .cover-visual::after{background:linear-gradient(180deg,rgba(18,18,18,.08),rgba(18,18,18,.48))}.variant-dashboard .cover-copy{left:18px;right:18px;width:auto;bottom:17px;background:rgba(26,26,26,.72);border-color:rgba(255,255,255,.12)}.variant-dashboard .cover-kicker,.variant-dashboard .cover-title,.variant-dashboard .cover-sub{color:#fff}.variant-dashboard .cover-sub{opacity:.68}.variant-dashboard .agenda-body{grid-template-columns:1fr 1fr}.variant-dashboard .agenda-visual::after{background:repeating-linear-gradient(90deg,transparent 0 13px,color-mix(in srgb,var(--accent) 22%,transparent) 13px 14px)}.variant-dashboard .mini-stats i{height:22px}
.variant-cinematic .cover-copy{left:24px;bottom:22px;width:82%;background:linear-gradient(90deg,rgba(245,244,240,.94),rgba(245,244,240,.80));border-radius:14px}.variant-cinematic .cover-visual::after{background:linear-gradient(90deg,rgba(18,18,18,.04),rgba(18,18,18,.28))}.variant-cinematic .agenda-body{grid-template-columns:1.35fr .65fr}.variant-cinematic .content-grid{grid-template-columns:1.25fr .75fr}

/* patterns kept subtle */
.pattern-dots .mock-cover::after,.pattern-dots .mock-agenda::before,.pattern-dots .mock-content::before{opacity:.18}
.pattern-grid .mock-cover::after,.pattern-grid .mock-agenda::before,.pattern-grid .mock-content::before{opacity:.15}
.pattern-lines .mock-cover::after,.pattern-lines .mock-agenda::before,.pattern-lines .mock-content::before{opacity:.13}
.pattern-micro .mock-cover::after,.pattern-micro .mock-agenda::before,.pattern-micro .mock-content::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 10px 10px,color-mix(in srgb,var(--accent) 18%,transparent) .8px,transparent .9px);background-size:20px 20px;opacity:.12;pointer-events:none}
.pattern-none .mock-cover::after,.pattern-none .mock-agenda::before,.pattern-none .mock-content::before{display:none}

/* topic motifs: only thin, architectural accents; no childish clip-art */
.motif-mark{position:absolute;z-index:3;display:block;pointer-events:none;color:var(--accent);opacity:.72}
.cover-visual .motif-mark{right:16px;top:18px;width:86px;height:86px}.agenda-visual .motif-mark,.content-photo .motif-mark{left:50%;top:50%;width:62px;height:62px;transform:translate(-50%,-50%);opacity:.48}
.motif-mark::before,.motif-mark::after{content:"";position:absolute;box-sizing:border-box}
/* Uzbekistan: arch + tile */
.motif-uzbek .motif-mark::before{left:12px;top:15px;width:62px;height:52px;border:2px solid currentColor;border-bottom:0;border-radius:40px 40px 4px 4px}
.motif-uzbek .motif-mark::after{left:25px;top:28px;width:36px;height:36px;border:1px solid currentColor;transform:rotate(45deg);opacity:.62}
/* Physics: orbit */
.motif-phys .motif-mark::before{inset:17px 7px;border:1.6px solid currentColor;border-radius:50%;transform:rotate(26deg);box-shadow:0 0 0 1px transparent}
.motif-phys .motif-mark::after{inset:7px 17px;border:1.6px solid currentColor;border-radius:50%;transform:rotate(-26deg)}
/* Biology: leaf/cell */
.motif-bio .motif-mark::before{left:14px;top:14px;width:38px;height:57px;border:1.6px solid currentColor;border-radius:100% 0 100% 0;transform:rotate(-15deg)}
.motif-bio .motif-mark::after{right:9px;bottom:12px;width:25px;height:25px;border:1.6px solid currentColor;border-radius:50%;box-shadow:-21px -15px 0 -8px currentColor}
/* Business: clean rising bars */
.motif-biz .motif-mark::before{left:10px;bottom:14px;width:12px;height:24px;background:currentColor;box-shadow:20px -10px 0 currentColor,40px -27px 0 currentColor,60px -41px 0 currentColor;opacity:.65}
.motif-biz .motif-mark::after{left:9px;top:19px;width:70px;height:38px;border-top:1.6px solid currentColor;transform:skewY(-24deg);transform-origin:left top}
/* Accounting: ledger */
.motif-acc .motif-mark::before{inset:12px;border:1.5px solid currentColor;background:repeating-linear-gradient(0deg,transparent 0 12px,currentColor 12px 13px);opacity:.66}
.motif-acc .motif-mark::after{left:35px;top:12px;bottom:12px;border-left:1.5px solid currentColor}
/* Language: quotation/editorial */
.motif-lang .motif-mark::before{content:"“";left:8px;top:-4px;font:700 76px/1 Georgia,serif;color:currentColor;opacity:.55}
.motif-lang .motif-mark::after{right:8px;bottom:9px;width:44px;height:2px;background:currentColor;box-shadow:0 -9px 0 currentColor,0 -18px 0 currentColor;opacity:.42}
/* Art */
.motif-art .motif-mark::before{inset:12px;border:1.5px solid currentColor;transform:rotate(6deg)}
.motif-art .motif-mark::after{left:28px;top:28px;width:31px;height:31px;border:1.5px solid currentColor;border-radius:50% 45% 55% 42%;transform:rotate(-18deg)}
/* Code */
.motif-code .motif-mark::before{content:"</>";left:8px;top:24px;font:700 28px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:currentColor;letter-spacing:-3px}
.motif-code .motif-mark::after{left:12px;top:14px;width:62px;height:52px;border:1px solid currentColor;border-radius:7px}
/* Career */
.motif-career .motif-mark::before{left:9px;bottom:14px;width:66px;height:42px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor}
.motif-career .motif-mark::after{right:10px;top:16px;width:46px;height:46px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(-14deg)}
/* Design */
.motif-design .motif-mark::before{left:9px;top:9px;width:30px;height:30px;border:1.5px solid currentColor;box-shadow:34px 22px 0 -1px transparent,34px 22px 0 0 currentColor}
.motif-design .motif-mark::after{left:24px;top:38px;width:28px;height:28px;border:1.5px solid currentColor;border-radius:50%}
/* Psychology */
.motif-psych .motif-mark::before{inset:12px;border:1.5px solid currentColor;border-radius:50% 46% 48% 52%}
.motif-psych .motif-mark::after{left:31px;top:21px;width:25px;height:35px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;border-radius:0 0 0 16px}
/* Robot */
.motif-robot .motif-mark::before{inset:18px;border:1.5px solid currentColor;border-radius:8px}
.motif-robot .motif-mark::after{left:7px;top:28px;width:72px;height:28px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;box-shadow:18px -17px 0 -13px currentColor,50px 21px 0 -13px currentColor}
/* Tech */
.motif-tech .motif-mark::before{inset:19px;border:1.5px solid currentColor;border-radius:5px;box-shadow:0 -13px 0 -11px currentColor,0 13px 0 -11px currentColor,13px 0 0 -11px currentColor,-13px 0 0 -11px currentColor}
.motif-tech .motif-mark::after{left:35px;top:35px;width:16px;height:16px;background:currentColor;opacity:.42}
/* Medical */
.motif-med .motif-mark::before{left:35px;top:14px;width:16px;height:58px;background:currentColor;border-radius:3px;opacity:.55}
.motif-med .motif-mark::after{left:14px;top:35px;width:58px;height:16px;background:currentColor;border-radius:3px;opacity:.55}
/* Travel */
.motif-travel .motif-mark::before{left:11px;top:48px;width:64px;border-top:1.6px dashed currentColor;transform:rotate(-18deg)}
.motif-travel .motif-mark::after{right:12px;top:17px;width:18px;height:24px;border:1.5px solid currentColor;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
/* Pedagogy */
.motif-ped .motif-mark::before{left:10px;top:24px;width:31px;height:40px;border:1.5px solid currentColor;border-radius:3px 0 0 3px;transform:skewY(7deg)}
.motif-ped .motif-mark::after{right:10px;top:24px;width:31px;height:40px;border:1.5px solid currentColor;border-radius:0 3px 3px 0;transform:skewY(-7deg)}
/* Kids: restrained geometric star/circle */
.motif-kids .motif-mark::before{left:17px;top:17px;width:52px;height:52px;border:1.5px solid currentColor;border-radius:50%}
.motif-kids .motif-mark::after{left:37px;top:8px;width:12px;height:70px;border-left:1.5px solid currentColor;transform:rotate(42deg)}
/* Simple */
.motif-simple .motif-mark::before{left:15px;top:24px;width:56px;height:2px;background:currentColor;box-shadow:0 12px 0 currentColor,0 24px 0 currentColor;opacity:.5}

.design-meta{background:rgba(24,24,24,.82);border:1px solid rgba(255,255,255,.08);min-height:44px}.design-meta b{font-size:11.5px}.design-meta span{font-size:11px;color:#ddd}
.modal-preview .design-card{width:min(86%,350px);height:96%}

@media(max-width:620px){
  .guide{padding-left:24px;padding-right:24px}.catalog{max-width:none}.category-head{height:90px;padding:0 24px}.rail-wrap{padding-left:16px;padding-right:16px}.rail{grid-auto-columns:74vw;gap:16px;padding-right:26px}.design-card{min-height:512px}.cover-copy{left:16px;bottom:18px}.cover-title{font-size:20px}.category-title{font-size:21px}
}

/* ================= V2.0: five genuinely different template families ================= */
.v2-card{background:#0c0c0c;aspect-ratio:10/17;min-height:520px}
.v2-card .v2-preview{position:absolute;inset:0 0 50px;display:grid;grid-template-rows:40% 29% 31%;background:#0a0a0a;gap:6px}
.v2-sheet{position:relative;overflow:hidden;background:#f4f1ea;color:#161616}
.v2-bg,.data-bg,.cinema-bg,.photo-thumb,.content-visual,.editorial-image,.ed-circle,.ed-photo,.academic-frame{position:absolute;background-image:var(--bgimg);background-size:cover;background-repeat:no-repeat}
.bg-top{background-position:center 14%}.bg-mid{background-position:center 52%}.bg-low{background-position:center 86%}
.no-photo .v2-bg,.no-photo .data-bg,.no-photo .cinema-bg,.no-photo .photo-thumb,.no-photo .content-visual,.no-photo .editorial-image,.no-photo .ed-circle,.no-photo .ed-photo,.no-photo .academic-frame{background-image:linear-gradient(135deg,#ddd,#aaa)}
.v2-card h3,.v2-card h4,.v2-card p{margin:0}.v2-card small{font-size:8px;letter-spacing:.12em;font-weight:800}.v2-card h3{line-height:1.02}.v2-card h4{line-height:1.05}

/* 1 — photo hero / brochure */
.hero-photo .v2-bg{inset:0;filter:saturate(.75) contrast(.95)}.v2-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.48))}
.hero-label{position:absolute;top:14px;left:14px;color:white;font-size:8px;letter-spacing:.12em;text-transform:uppercase;font-weight:800}
.hero-card{position:absolute;left:14px;right:14px;bottom:14px;padding:12px 13px;background:rgba(248,246,240,.93);border-left:4px solid var(--accent)}.hero-card small{color:var(--accent)}.hero-card h3{font-size:21px;margin-top:5px}.hero-card i{display:block;width:40px;height:2px;background:var(--accent);margin:8px 0}.hero-card p{font-size:8px;color:#666}
.photo-agenda{display:grid;grid-template-columns:44px 1fr 34%;background:#f4f1ea}.agenda-number{display:grid;place-items:center;background:var(--accent);color:#fff;font:800 22px/1 Georgia,serif}.photo-thumb{right:0;top:0;bottom:0;width:34%;filter:saturate(.55);opacity:.86}.photo-agenda-copy{padding:13px 10px 10px}.photo-agenda-copy small{color:var(--accent)}.photo-agenda-copy h4{font:700 16px/1.05 Georgia,serif;margin:3px 0 9px}.list-row{display:grid;grid-template-columns:20px 1fr;gap:6px;align-items:center;margin:5px 0}.list-row b{font-size:7px;color:var(--accent)}.list-row span{height:4px;background:#b7b3aa;border-radius:3px}.photo-content{display:grid;grid-template-columns:58% 42%;background:#efece4}.content-copy{padding:13px 12px}.content-copy small{color:var(--accent)}.content-copy h4{font-size:15px;margin:4px 0 9px}.content-copy>span{display:block;height:5px;background:#9e9990;border-radius:4px;margin:6px 0}.content-copy>span.short{width:68%}.accent-pill{display:inline-block;margin-top:6px;padding:4px 6px;background:var(--accent);color:#fff;font-size:7px;font-weight:800}.content-visual{right:0;top:0;bottom:0;width:42%;filter:saturate(.6)}

/* 2 — editorial magazine */
.editorial-preview .v2-sheet{background:#f7f4ee}.editorial-cover{display:grid;grid-template-columns:42px 1fr 38%}.editorial-index{padding:14px 0;text-align:center;font:700 24px/1 Georgia,serif;color:var(--accent);border-right:1px solid #d8d2c8}.editorial-copy{padding:18px 12px}.editorial-copy small{color:#777}.editorial-copy h3{font:700 20px/1.02 Georgia,serif;margin:8px 0 9px}.editorial-copy p{font-size:8px;color:#777}.editorial-copy i{display:block;width:28px;height:1px;background:var(--accent);margin-top:10px}.editorial-image{right:0;top:0;bottom:0;width:38%;filter:saturate(.45) contrast(.92)}
.editorial-agenda{padding:12px 14px}.ed-head{display:flex;align-items:baseline;gap:8px}.ed-head small{color:var(--accent)}.ed-head h4{font:700 16px/1 Georgia,serif}.ed-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px;width:72%}.ed-grid div{border-top:1px solid #bdb7ad;padding-top:5px}.ed-grid b{font:700 13px/1 Georgia,serif;color:var(--accent)}.ed-grid span{display:block;height:4px;background:#aaa49b;margin-top:4px;width:80%}.ed-circle{width:62px;height:62px;border-radius:50%;right:12px;bottom:12px;filter:saturate(.35);box-shadow:0 0 0 5px #eee7dc}
.editorial-content{display:grid;grid-template-rows:52% 48%}.ed-photo{left:0;right:0;top:0;height:52%;filter:saturate(.42);background-position:center 78%}.ed-bottom{position:absolute;left:0;right:0;bottom:0;height:48%;padding:10px 14px;background:#f7f4ee}.ed-bottom small{color:var(--accent)}.ed-bottom h4{font:700 15px/1 Georgia,serif;margin:3px 0 7px}.ed-bottom p{height:4px;background:#a9a39a;margin:5px 0;width:90%}.ed-bottom p.short{width:58%}

/* 3 — dark data dashboard */
.data-preview .v2-sheet{background:#101318;color:#f4f7fa}.data-cover{padding:16px}.data-bg{inset:0;filter:blur(1px) saturate(.55) brightness(.45);transform:scale(1.03)}.data-overlay{position:absolute;inset:0;background:radial-gradient(circle at 78% 18%,color-mix(in srgb,var(--accent) 48%,transparent),transparent 36%),linear-gradient(180deg,rgba(5,7,10,.1),rgba(5,7,10,.85))}.data-cover>*:not(.data-bg):not(.data-overlay){position:relative;z-index:2}.data-cover small{color:#cbd7df}.data-cover h3{font-size:23px;margin-top:10px;max-width:88%}.kpis{position:absolute!important;left:16px;right:16px;bottom:13px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.kpis b{padding:7px 4px;border:1px solid color-mix(in srgb,var(--accent) 45%,#2c3440 55%);background:rgba(12,16,22,.72);text-align:center;font-size:11px;color:white}
.data-agenda{padding:13px;background:#0d1116}.data-title{display:flex;gap:8px;align-items:baseline}.data-title small{color:var(--accent)}.data-title h4{font-size:15px}.data-cards{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.data-cards div{border:1px solid #28313c;background:#151b22;padding:8px}.data-cards b{font-size:9px;color:var(--accent)}.data-cards i{display:block;height:4px;background:#53606d;margin-top:6px;width:75%}
.data-content{display:grid;grid-template-columns:68% 32%;padding:12px;background:#11161d}.chart-area small{color:var(--accent)}.chart-area h4{font-size:15px;margin:3px 0 9px}.bars{height:58px;display:flex;align-items:flex-end;gap:5px;border-left:1px solid #39434e;border-bottom:1px solid #39434e;padding:0 0 3px 5px}.bars i{width:12%;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 40%,#18212b 60%))}.bars i:nth-child(1){height:38%}.bars i:nth-child(2){height:68%}.bars i:nth-child(3){height:48%}.bars i:nth-child(4){height:86%}.bars i:nth-child(5){height:62%}.data-side{border-left:1px solid #2c3540;padding-left:8px}.data-side b{font-size:18px;color:white}.data-side span{display:block;height:4px;background:#4b5662;margin:7px 0}.mini-ring{width:36px;height:36px;border-radius:50%;border:6px solid #29323c;border-top-color:var(--accent);margin-top:8px}

/* 4 — clean academic / report */
.academic-preview .v2-sheet{background:#fbfaf6}.academic-cover{padding:18px 16px 14px}.academic-band{position:absolute;left:0;top:0;bottom:0;width:9px;background:var(--accent)}.academic-copy{width:64%;position:relative;z-index:2}.academic-copy small{color:var(--accent)}.academic-copy h3{font-size:20px;margin:10px 0 8px}.academic-copy p{font-size:8px;color:#777}.academic-frame{right:14px;top:20px;width:28%;height:56%;border:4px solid white;box-shadow:0 0 0 1px #d4d0c7;filter:saturate(.35)}.paper-lines{position:absolute;left:18px;right:18px;bottom:15px;height:20px;background:repeating-linear-gradient(0deg,#d8d5ce 0 1px,transparent 1px 7px);opacity:.7}
.academic-agenda{padding:12px 16px;background:#f3f1eb}.academic-head{display:flex;align-items:baseline;gap:8px}.academic-head small{color:var(--accent)}.academic-head h4{font-size:16px}.academic-list{margin-top:8px}.academic-list div{display:grid;grid-template-columns:18px 1fr;gap:8px;padding:6px 0;border-bottom:1px solid #d4d0c8}.academic-list b{font-size:8px;color:var(--accent)}.academic-list span{height:4px;background:#a8a49c;margin-top:2px;width:82%}.side-note{position:absolute;right:10px;top:12px;font-size:7px;letter-spacing:.15em;color:#aaa;transform:rotate(90deg);transform-origin:right top}
.academic-content{padding:12px 14px;display:grid;grid-template-columns:1.2fr .8fr;gap:9px;background:#fbfaf6}.academic-table{border:1px solid #d3cfc7;background:white}.table-head{padding:6px;background:color-mix(in srgb,var(--accent) 10%,#fff 90%);font-size:7px;font-weight:800;color:var(--accent)}.table-row{display:grid;grid-template-columns:1fr 30%;gap:6px;padding:7px;border-top:1px solid #e4e0da}.table-row span,.table-row i{height:4px;background:#b8b2aa}.academic-callout{align-self:center;border-left:3px solid var(--accent);padding-left:8px}.academic-callout b{font-size:10px}.academic-callout span{display:block;height:4px;background:#aaa49c;margin:6px 0}.academic-callout span.short{width:60%}

/* 5 — cinematic / visual storytelling */
.cinema-preview .v2-sheet{background:#0c0c0c;color:white}.cinema-bg{inset:0;filter:saturate(.68) contrast(1.05)}.cinema-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04) 18%,rgba(0,0,0,.76) 100%)}.cinema-copy{position:absolute;z-index:2;left:16px;right:16px;bottom:15px}.cinema-copy small{color:#eee}.cinema-copy h3{font-size:22px;margin:6px 0}.cinema-copy p{font-size:8px;color:#d0d0d0}
.cinema-agenda .cinema-bg{filter:saturate(.45) brightness(.52)}.cinema-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.18))}.timeline-title{position:absolute;z-index:2;top:13px;left:14px}.timeline-title small{color:var(--accent)}.timeline-title h4{font-size:15px;margin-top:3px}.timeline{position:absolute;z-index:2;left:15px;right:15px;bottom:20px;display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:center}.timeline i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent);font-style:normal;font-size:8px;font-weight:800}.timeline span{height:2px;background:rgba(255,255,255,.55)}
.cinema-content .cinema-bg{filter:saturate(.42) brightness(.63)}.cinema-veil.soft{background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.55))}.glass-card{position:absolute;z-index:2;right:12px;top:14px;bottom:14px;width:62%;padding:12px;background:rgba(245,245,241,.88);color:#151515;backdrop-filter:blur(5px)}.glass-card small{color:var(--accent)}.glass-card h4{font:700 15px/1 Georgia,serif;margin:5px 0 8px}.glass-card p{height:4px;background:#8f8b83;margin:6px 0}.glass-card p.short{width:66%}.glass-card b{position:absolute;right:10px;bottom:8px;color:var(--accent);font-size:18px}

.v2-card .design-meta{background:rgba(20,20,20,.9);border-radius:0;left:0;right:0;bottom:0;min-height:50px;padding:0 12px}.v2-card .selected-mark{top:10px;right:10px}.modal-preview .v2-card{height:96%;width:min(86%,350px)}
@media(max-width:620px){.v2-card{min-height:520px}.v2-card .v2-preview{inset-bottom:50px}}