/* Scoped to the browser. No editor/canvas rules or geometry changes. */
.stampmaker-online-stamp-editor #template-page.smo-template-browser {
  --browser-blue:#315bfa; --browser-line:#dce4f4; --browser-muted:#637494;
  color:#152646; direction:ltr; text-align:start; padding:0 16px 16px; box-sizing:border-box;
}
.stampmaker-online-stamp-editor #template-page.smo-template-browser[dir="rtl"] { direction:rtl; }
#template-page.smo-template-browser [hidden] { display:none!important; }
/* Modern, server-rendered first paint. Legacy controls stay hidden in HTML too. */
#template-page.smo-template-browser .template-browser-boot-heading { flex:1 1 340px; width:100%; min-width:0; max-width:600px; padding-block:3px; }
#template-page.smo-template-browser .template-browser-boot-heading span,
#template-page.smo-template-browser .template-browser-boot-action,
#template-page.smo-template-browser .template-browser-boot-filters span,
#template-page.smo-template-browser .template-browser-boot-card-action { display:block; background:#eaf0fa; border-radius:8px; }
#template-page.smo-template-browser .template-browser-boot-heading span:first-child { height:32px; width:70%; margin-bottom:12px; }
#template-page.smo-template-browser .template-browser-boot-heading span:last-child { height:20px; width:95%; }
#template-page.smo-template-browser .template-browser-boot-action { width:190px; height:46px; }
#template-page.smo-template-browser .template-browser-boot-status,
#template-page.smo-template-browser .template-browser-no-script { margin:8px 4px 12px; color:var(--browser-muted); font-size:14px; line-height:1.5; }
#template-page.smo-template-browser .template-browser-boot-status a { color:#244de5; text-decoration:underline; }
#template-page.smo-template-browser .template-browser-boot-filters { display:flex; flex-wrap:wrap; gap:12px; padding:12px; margin-bottom:34px; background:#fff; border:1px solid var(--browser-line); border-radius:18px; }
#template-page.smo-template-browser .template-browser-boot-tabs { flex:1 1 340px; height:52px; }
#template-page.smo-template-browser .template-browser-boot-shapes { flex:1 1 300px; height:44px; }
#template-page.smo-template-browser .template-browser-boot-category { width:130px; height:44px; }
#template-page.smo-template-browser .template-browser-boot-card { pointer-events:none; }
#template-page.smo-template-browser .template-browser-boot-card .template-skeleton-line { min-height:14px; margin:0; }
#template-page.smo-template-browser .template-browser-boot-card-action { width:100%; height:44px; margin-top:6px; }
@media(max-width:700px) {
  #template-page.smo-template-browser[data-editor-boot] .templates-grid { --template-browser-columns:2; }
  #template-page.smo-template-browser .template-browser-boot-heading { flex:0 1 auto; width:100%; }
  #template-page.smo-template-browser .template-browser-boot-action { width:100%; }
}
#template-page.smo-template-browser .template-browser-legacy-toolbar,
#template-page.smo-template-browser .left-category-list,
#template-page.smo-template-browser .mobile-template-category-picker,
#template-page.smo-template-browser .template-bottom { display:none!important; }
#template-page.smo-template-browser .template-browser-header {
  position:static; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
  padding:18px; border:1px solid var(--browser-line); border-radius:20px; background:white; color:#152646;
  box-shadow:0 6px 20px #243b6910; min-height:0; margin:0 0 12px;
}
#template-page.smo-template-browser .template-browser-heading h1 { font-family:inherit; font-size:clamp(22px,2.1vw,29px); font-weight:800; line-height:1.2; margin:0 0 7px; color:#152646; letter-spacing:-.025em; }
#template-page.smo-template-browser .template-browser-heading p { font-size:14px; line-height:1.5; color:var(--browser-muted); margin:0; }
#template-page.smo-template-browser #new-template-btn { min-height:46px; padding:12px 20px; background:var(--browser-blue); box-shadow:none; border-radius:12px; white-space:normal; }
#template-page.smo-template-browser .template-browser-tabs { display:flex; flex:1 1 340px; gap:6px; align-items:center; padding:4px; min-width:0; max-width:100%; border-radius:14px; background:#eaf0fd; margin:0; }
#template-page.smo-template-browser .template-browser-tabs button { appearance:none; flex:1 1 auto; min-width:0; border:0; background:transparent; color:#556784; border-radius:10px; padding:10px 14px; min-height:44px; font-family:inherit; font-size:14px; font-weight:700; line-height:1.3; box-shadow:none; }
#template-page.smo-template-browser .template-browser-tabs button[aria-current="page"] { color:#244de5; background:white; box-shadow:0 2px 7px #29426a14; }
#template-page.smo-template-browser .template-browser-filters { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:12px; border:1px solid var(--browser-line); background:#fff; border-radius:18px; margin-bottom:8px; }
#template-page.smo-template-browser .template-browser-shapes { display:flex; flex-wrap:wrap; gap:5px; }
#template-page.smo-template-browser .template-browser-shapes button { display:flex; gap:7px; align-items:center; justify-content:center; min-height:44px; padding:10px 11px; border:1px solid transparent; border-radius:10px; background:#f3f6fc; color:#566b8d; font-size:12px; font-weight:700; box-shadow:none; }
#template-page.smo-template-browser .template-browser-shapes svg { width:20px; height:20px; flex:0 0 20px; fill:none; stroke:currentColor; stroke-width:1.7; }
#template-page.smo-template-browser .template-browser-shapes button[aria-pressed="true"] { background:#edf2ff; border-color:#aabafb; color:#244de5; }
#template-page.smo-template-browser .template-browser-select { display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; margin:0; color:var(--browser-muted); font-size:11px; font-weight:600; line-height:1.3; }
#template-page.smo-template-browser .template-browser-select select { width:auto; max-width:220px; min-width:130px; height:44px; padding:8px 32px 8px 12px; border:1px solid var(--browser-line); border-radius:10px; color:#243959; background-color:white; line-height:1.4; font-size:13px; font-weight:600; box-shadow:none; }
#template-page.smo-template-browser .template-browser-results { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding:0 4px 12px; font-size:13px; color:var(--browser-muted); }
#template-page.smo-template-browser #template-browser-count { margin-inline-end:auto; font-weight:700; }
#template-page.smo-template-browser .template-browser-columns { display:flex; gap:4px; align-items:center; }
#template-page.smo-template-browser .template-browser-columns span { margin-inline-end:7px; font-size:12px; }
#template-page.smo-template-browser .template-browser-columns button { width:38px; height:38px; padding:0; border:1px solid var(--browser-line); border-radius:8px; background:white; color:#536b8d; font-size:13px; box-shadow:none; }
#template-page.smo-template-browser .template-browser-columns button[aria-pressed="true"] { border-color:#91a6fc; color:#244de5; background:#edf2ff; }
#template-page.smo-template-browser .template-browser-manage { position:relative; }
#template-page.smo-template-browser .template-browser-manage summary { cursor:pointer; padding:10px; border:1px solid var(--browser-line); background:white; border-radius:9px; font-size:12px; }
#template-page.smo-template-browser .template-browser-manage-body { position:absolute; z-index:20; inset-inline-end:0; top:calc(100% + 5px); width:230px; padding:6px; background:white; border:1px solid var(--browser-line); border-radius:12px; box-shadow:0 10px 30px #172c5426; }
#template-page.smo-template-browser .template-browser-manage-body button { display:block; width:100%; text-align:start; padding:12px; min-height:44px; background:white; border:0; border-radius:8px; color:#203a62; font-size:13px; box-shadow:none; }
#template-page.smo-template-browser .templates-content { display:block; margin:0; padding:0; }
#template-page.smo-template-browser .template-list-scroll { height:auto; max-height:none; min-height:220px; overflow:visible; border:0; box-shadow:none; background:transparent; border-radius:0; backdrop-filter:none; }
#template-page.smo-template-browser .templates-grid { display:grid; grid-template-columns:repeat(var(--template-browser-columns,3),minmax(0,1fr))!important; padding:0; gap:18px; min-height:0; align-items:stretch; }
#template-page.smo-template-browser .template-browser-card { overflow:visible; position:relative; display:flex; flex-direction:column; background:white; border:1px solid var(--browser-line); border-radius:18px; padding:0; box-shadow:0 4px 14px #2c426c09; min-width:0; text-align:start; }
#template-page.smo-template-browser .template-browser-card::before { display:none; }
#template-page.smo-template-browser .template-browser-card.active { border-color:#b9c8f7; box-shadow:0 4px 14px #2c426c09; }
#template-page.smo-template-browser .template-browser-card.template-resume-card { border-color:#e7c88c; background:#fffaf0; }
#template-page.smo-template-browser .template-resume-card .template-card-image { background:#fff7e9; }
#template-page.smo-template-browser .template-card-image { position:relative; display:block; width:100%; padding:10px; margin:0; overflow:hidden; border:0; border-radius:18px 18px 0 0; background:#f8faff; box-sizing:border-box; cursor:default; }
#template-page.smo-template-browser .template-card-image .thumb { width:100%; aspect-ratio:1.12; height:auto; min-height:0; margin:0; background:white; border:0; border-radius:10px; }
#template-page.smo-template-browser .template-card-image .thumb img,#template-page.smo-template-browser .template-card-image .thumb svg { display:block; width:96%; height:96%; max-height:none; object-fit:contain; }
#template-page.smo-template-browser .template-card-copy { display:flex; flex:1; flex-direction:column; align-items:flex-start; padding:16px; gap:8px; }
#template-page.smo-template-browser .template-card-meta { margin:0; font-size:12px; color:var(--browser-muted); line-height:1.4; }
#template-page.smo-template-browser .template-card-category { border-radius:6px; background:#f0f4fc; color:#6378a0; padding:4px 7px; font-size:11px; line-height:1.4; }
#template-page.smo-template-browser .template-card-copy small { display:block; margin:0; font-size:11px; color:var(--browser-muted); line-height:1.4; }
#template-page.smo-template-browser .template-card-actions { display:flex; gap:8px; width:100%; margin-top:auto; padding-top:6px; align-items:stretch; }
#template-page.smo-template-browser .template-card-primary { border:1px solid #cbd8fa; border-radius:10px; background:#eff4ff; color:#2851df; box-shadow:none; min-height:44px; padding:11px 15px; font-size:13px; font-weight:750; line-height:1.4; white-space:normal; }
#template-page.smo-template-browser .template-card-actions > .template-card-primary { flex:1; }
#template-page.smo-template-browser .template-card-primary:hover { background:#315bfa; color:white; border-color:#315bfa; }
#template-page.smo-template-browser .template-card-menu { position:relative; }
#template-page.smo-template-browser .template-card-menu > summary { list-style:none; cursor:pointer; display:grid; place-items:center; width:44px; height:44px; background:white; border:1px solid var(--browser-line); border-radius:10px; }
#template-page.smo-template-browser .template-card-menu > summary::-webkit-details-marker { display:none; }
#template-page.smo-template-browser .template-card-menu svg { width:21px; height:21px; stroke:#587193; fill:none; stroke-width:1.8; }
#template-page.smo-template-browser .template-card-menu-body { position:absolute; bottom:calc(100% + 7px); inset-inline-end:0; z-index:15; min-width:200px; max-width:80vw; padding:5px; background:white; border:1px solid var(--browser-line); border-radius:12px; box-shadow:0 8px 24px #1a31522c; }
#template-page.smo-template-browser .template-card-menu-body button { display:block; width:100%; min-height:44px; text-align:start; background:transparent; border:0; padding:12px; color:#304d78; font-size:12px; border-radius:8px; box-shadow:none; }
#template-page.smo-template-browser .template-card-menu-body button:hover,#template-page.smo-template-browser .template-browser-manage-body button:hover { background:#f0f4fc; }
#template-page.smo-template-browser .template-card-menu-body .template-card-danger { color:#c42c49; }
#template-page.smo-template-browser .template-browser-empty { grid-column:1/-1; display:grid; place-items:center; text-align:center; min-height:230px; color:#637494; border:1px dashed #c8d4ed; border-radius:18px; background:#f9fbff; padding:30px; }
#template-page.smo-template-browser .template-browser-pagination { grid-column:1/-1; text-align:center; padding:12px; }
#template-page.smo-template-browser .template-browser-pagination button { min-height:44px; border:1px solid #cbd8f3; border-radius:10px; padding:12px 30px; background:white; color:#315bfa; font-size:13px; box-shadow:none; }
#template-page.smo-template-browser button:focus-visible,#template-page.smo-template-browser summary:focus-visible,#template-page.smo-template-browser input:focus-visible,#template-page.smo-template-browser select:focus-visible { outline:3px solid #9db2ff; outline-offset:3px; }
@media(max-width:1000px) {
  #template-page.smo-template-browser .template-browser-shapes { flex:1 1 100%; order:3; }
  #template-page.smo-template-browser .template-browser-filters { gap:10px; }
  #template-page.smo-template-browser .template-card-copy { padding:12px; }
}
@media(max-width:700px) {
  .stampmaker-online-stamp-editor #template-page.smo-template-browser { padding-inline:10px; }
  #template-page.smo-template-browser .template-browser-header { padding:18px; gap:16px; }
  #template-page.smo-template-browser .template-browser-heading h1 { font-size:23px; }
  #template-page.smo-template-browser .template-browser-header-actions { width:100%; }
  #template-page.smo-template-browser #new-template-btn { width:100%; }
  #template-page.smo-template-browser .template-browser-tabs { flex-basis:100%; width:100%; justify-content:stretch; }
  #template-page.smo-template-browser .template-browser-tabs button { flex:1; font-size:12px; padding:10px 7px; }
  #template-page.smo-template-browser .template-browser-filters { padding:12px; }
  #template-page.smo-template-browser .template-browser-shapes { justify-content:stretch; flex-wrap:nowrap; order:0; width:100%; }
  #template-page.smo-template-browser .template-browser-shapes button { flex:1; min-width:0; padding:8px 3px; font-size:10px; flex-direction:column; gap:5px; }
  #template-page.smo-template-browser .template-browser-select { flex:1; flex-direction:column; align-items:flex-start; gap:4px; }
  #template-page.smo-template-browser .template-browser-select select { width:100%; min-width:0; max-width:none; }
  #template-page.smo-template-browser .templates-grid { gap:10px; }
  #template-page.smo-template-browser .template-card-meta { font-size:11px; }
  #template-page.smo-template-browser .template-card-primary { font-size:12px; padding:10px 6px; }
  #template-page.smo-template-browser .template-card-image { padding:5px; }
  #template-page.smo-template-browser .template-browser-results { gap:8px; }
  #template-page.smo-template-browser .template-browser-owner { flex-basis:100%; }
}
@media(prefers-reduced-motion:reduce) { #template-page.smo-template-browser * { transition:none!important; } }