.template-gallery { color:#202321; }
.template-gallery-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:12px 0 32px; }
.template-eyebrow { font-size:10px; line-height:1.5; font-weight:650; letter-spacing:.13em; color:#747970; }
.template-gallery-heading h1 { font-size:clamp(30px,3.5vw,48px); line-height:1.1; letter-spacing:-.055em; font-weight:550; margin:14px 0; }
.template-gallery-heading p:last-child { font-size:14px; color:#787d76; }
.template-current { display:flex; align-items:center; gap:18px; padding:22px 24px; border:1px solid #dddfd9; background:#f4f5f0; border-radius:14px; }
.template-current-icon { padding:14px; border:1px solid #d8dcd1; border-radius:12px; background:#e9ecdf; }
.template-current h2 { font-size:17px; font-weight:600; margin:3px 0; }
.template-current h2 span { font-weight:400; color:#83877e; font-size:12px; }
.template-current p { font-size:12px; color:#757a70; }
.template-current-actions { margin-left:auto; display:flex; flex-wrap:wrap; gap:10px; }
.template-gallery-tools { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:32px 0 24px; }
.template-gallery-tools nav { display:flex; flex-wrap:wrap; gap:6px; }
.template-gallery-tools button { font-size:12px; padding:9px 16px; border-radius:8px; color:#737971; cursor:pointer; border:1px solid transparent; }
.template-gallery-tools button[aria-pressed=true] { background:#242923; color:#fff; }
.template-gallery-tools button:hover { border-color:#b9beb6; }
.template-gallery-tools>span { font-size:11px; color:#83877f; }
.template-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.template-card { border:1px solid #e1e3dd; border-radius:14px; overflow:hidden; background:#fff; min-width:0; }
.template-card[hidden] { display:none; }
.template-thumbnail { display:block; width:100%; text-align:left; position:relative; overflow:hidden; cursor:pointer; background:#eeefeb; padding:14px 14px 0; border-bottom:1px solid #e1e3dd; }
.template-browser-bar { display:flex; align-items:center; gap:4px; background:#fff; padding:10px; border-radius:7px 7px 0 0; }
.template-browser-bar i { width:4px; height:4px; border-radius:50%; background:#d7dad4; }
.template-browser-bar span { font-size:7px; color:#93968e; margin:auto; padding-right:18px; }
.template-mini-canvas { position:relative; overflow:hidden; background:#fff; }
.template-mini-canvas iframe { position:absolute; inset:0; border:0; transform-origin:top left; pointer-events:none; }
.template-loading { position:absolute; inset:0; display:grid; place-items:center; color:#8a9281; font-size:11px; background:#f7f8f4; }
.template-thumbnail:not([data-ready=true]) iframe { opacity:0; }
.template-thumbnail[data-ready=true] .template-loading { display:none; }
.template-hover-label { position:absolute; left:50%; bottom:20px; transform:translate(-50%,8px); white-space:nowrap; border:1px solid #fff4; background:#1b241ff2; color:#fff; padding:12px 18px; border-radius:8px; font-size:12px; opacity:0; transition:opacity .2s,transform .2s; }
.template-hover-label span { margin-left:16px; }
.template-thumbnail:hover .template-hover-label,.template-thumbnail:focus-visible .template-hover-label { opacity:1; transform:translate(-50%,0); }
.template-card-info { padding:22px; }
.template-card-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.template-card-title h2 { font-size:20px; letter-spacing:-.03em; font-weight:600; }
.template-tag { padding:4px 8px; background:#f1f2ed; border-radius:5px; color:#757b6d; font-size:9px; font-weight:500; }
.template-tag-new { background:#e9edce; color:#58642d; }
.template-card-info>p { font-size:12px; color:#7b8176; line-height:1.7; margin:12px 0 16px; min-height:60px; }
.template-features { display:flex; flex-wrap:wrap; gap:5px; min-height:36px; align-content:flex-start; }
.template-features span { font-size:9px; padding:4px 7px; border:1px solid #e9ebe5; border-radius:4px; color:#767d6f; }
.template-explore { width:100%; display:flex; justify-content:space-between; margin-top:16px; padding-top:14px; border-top:1px solid #eef0e9; font-size:11px; font-weight:600; cursor:pointer; }
.template-explore:hover { color:#5b7141; }
.template-gallery-footnote { margin:28px 0; color:#858a7f; font-size:11px; }
.template-dialog { width:calc(100vw - 40px); max-width:1700px; height:calc(100dvh - 40px); max-height:none; padding:0; border:1px solid #d6dad2; border-radius:16px; color:#252b22; background:#fff; overflow:hidden; }
.template-dialog[open] { display:flex; flex-direction:column; }
.template-dialog::backdrop { background:#151d17aa; backdrop-filter:blur(5px); }
.template-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 24px; border-bottom:1px solid #e6e9e0; }
.template-dialog-header h2 { font-size:22px; font-weight:600; letter-spacing:-.035em; }
.template-device-switch { display:flex; gap:4px; padding:4px; background:#f0f2eb; border-radius:8px; }
.template-device-switch button { font-size:12px; padding:8px 20px; border-radius:5px; cursor:pointer; }
.template-device-switch button[aria-pressed=true] { background:#fff; box-shadow:0 1px 4px #15241318; }
.template-close { width:36px; height:36px; font-size:28px; border:1px solid #e3e7dd; border-radius:8px; cursor:pointer; }
.template-dialog-options { display:flex; align-items:center; gap:24px; padding:12px 24px; }
.template-dialog-options label { display:flex; align-items:center; gap:10px; color:#7a8272; font-size:11px; }
.template-dialog-options select { color:#303a29; background:#f5f6f2; padding:8px 26px 8px 10px; border-radius:5px; border:1px solid #e4e7de; font-size:11px; }
.template-dialog-options>span { margin-left:auto; color:#7b8571; font-size:10px; }
.template-dialog-canvas { flex:1; min-height:0; overflow:hidden; display:flex; justify-content:center; align-items:flex-start; padding:16px; background:#e9ece5; background-image:radial-gradient(#9aa89144 .7px,transparent .7px); background-size:12px 12px; }
.template-dialog-frame { transform-origin:top center; flex:none; background:#fff; box-shadow:0 4px 30px #2732221a; overflow:hidden; }
.template-dialog-frame[data-device=mobile] { border-radius:22px; outline:5px solid #263020; }
.template-dialog-frame iframe { width:100%; height:100%; border:0; display:block; }
.template-dialog-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 24px; border-top:1px solid #e6e9df; }
.template-dialog-footer p { font-size:12px; color:#616c56; }
.template-dialog-footer small { display:block; font-size:10px; margin-top:4px; color:#8b9382; }
.template-dialog-footer a { white-space:nowrap; }
@media(max-width:1200px) { .template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .template-gallery-tools>span { display:none; } }
@media(max-width:700px) {
  .template-gallery-heading { display:block; }
  .template-gallery-heading>.btn-filled { margin-top:20px; }
  .template-current { flex-wrap:wrap; padding:18px; gap:12px; }
  .template-current-actions { margin-left:0; width:100%; }
  .template-current-icon { display:none; }
  .template-grid { grid-template-columns:1fr; gap:20px; }
  .template-gallery-tools button { font-size:11px; padding:8px 10px; }
  .template-dialog { width:100vw; height:100dvh; border:0; border-radius:0; }
  .template-dialog-header { padding:12px 14px; gap:10px; }
  .template-dialog-header h2 { font-size:19px; }
  .template-dialog-header .template-eyebrow { font-size:8px; }
  .template-device-switch button { padding:7px 9px; font-size:10px; }
  .template-dialog-options { padding:10px 14px; gap:8px; flex-wrap:wrap; }
  .template-dialog-options label { width:100%; justify-content:space-between; font-size:10px; }
  .template-dialog-options select { width:200px; font-size:10px; }
  .template-dialog-options>span { font-size:9px; }
  .template-dialog-footer { display:block; padding:12px 14px; }
  .template-dialog-footer p { font-size:10px; margin-bottom:10px; }
  .template-dialog-footer a { width:100%; justify-content:center; font-size:12px; }
}