*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --top:#1c2128;--top-b:#2d3748;
  --bg:#f4f2ef;--bg2:#eceae6;
  --card:#fff;--cb:#e4e0d8;
  --acc:#1a73e8;--acc2:#1557b0;--acc-l:#e8f0fe;
  --grn:#0f9d58;--grn-l:rgba(15,157,88,.1);
  --purple:#7c3aed;--purple-l:rgba(124,58,237,.1);
  --amber:#d97706;--amber-l:rgba(217,119,6,.1);
  --red:#dc2626;--red-l:rgba(220,38,38,.1);
  --txt:#1a1a1a;--txt2:#3a3a3a;--txt3:#6b6b6b;--txt4:#9b9b9b;
  --font-ui:'Nunito Sans',sans-serif;--font-s:'Nunito Sans',sans-serif;--font-m:'Nunito Sans',sans-serif;
  --r:8px;--r2:12px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06);
  --shadow-h:0 4px 12px rgba(0,0,0,.12),0 8px 32px rgba(0,0,0,.08);
}
html,body{min-height:100%;font-family:var(--font-ui);background:var(--bg);color:var(--txt);font-size:14px;overflow-x:hidden}
body{display:flex;flex-direction:column}

/* ══ TOPBAR ══ */
.topbar{background:var(--top);border-bottom:1px solid var(--top-b);display:flex;align-items:center;padding:0 28px;min-height:54px;gap:14px;position:sticky;top:0;z-index:100;flex-shrink:0;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none}
.logo-mark{width:32px;height:32px;background:var(--acc);border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:var(--font-s);font-size:16px;font-weight:700;color:#fff;box-shadow:0 2px 10px rgba(26,115,232,.4);flex-shrink:0}
.logo-name{font-family:var(--font-s);font-size:17px;font-weight:600;color:#fff}
.logo-name span{color:rgba(255,255,255,.38)}
.top-nav{display:flex;gap:2px;margin-left:4px;flex-wrap:wrap}
.tnav-btn{background:none;border:none;color:rgba(255,255,255,.55);font-family:var(--font-ui);font-size:13px;font-weight:500;padding:5px 12px;border-radius:6px;cursor:pointer;transition:all .15s}
.tnav-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.tnav-btn.on{color:#fff;background:rgba(255,255,255,.13)}
.top-search{flex:1;max-width:460px;margin:0 auto;position:relative;min-width:180px}
.top-search input{width:100%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:#fff;font-family:var(--font-ui);font-size:13px;padding:7px 14px 7px 38px;border-radius:22px;outline:none;transition:all .18s}
.top-search input::placeholder{color:rgba(255,255,255,.4)}
.top-search input:focus{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}
.top-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.45;pointer-events:none}
.top-r{display:flex;align-items:center;gap:8px}
.top-icon-btn{background:none;border:none;width:34px;height:34px;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);transition:all .16s}
.top-icon-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;cursor:pointer;border:2px solid rgba(255,255,255,.2);flex-shrink:0}

/* ══ LAYOUT ══ */
.layout{display:flex;flex:1;min-height:0;min-width:0}

/* ══ SIDEBAR ══ */
.sidebar{width:220px;flex-shrink:0;padding:24px 0;border-right:1px solid var(--cb);background:var(--card);position:sticky;top:54px;height:calc(100vh - 54px);overflow-y:auto}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:var(--cb);border-radius:2px}
.sb-section{margin-bottom:24px;padding:0 14px}
.sb-lbl{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--txt4);margin-bottom:7px;padding:0 6px}
.sb-btn{width:100%;display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r);border:none;background:none;font-family:var(--font-ui);font-size:13px;font-weight:500;color:var(--txt3);cursor:pointer;transition:all .14s;text-align:left}
.sb-btn:hover{background:var(--bg);color:var(--txt)}
.sb-btn.on{background:var(--acc-l);color:var(--acc2);font-weight:600}
.sb-btn .sb-ic{width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.sb-btn .sb-cnt{margin-left:auto;font-size:11px;color:var(--txt4);font-family:var(--font-m)}
.sb-sep{height:1px;background:var(--cb);margin:10px 14px}
/* App pills */
.app-pills{display:flex;gap:6px;padding:0 14px;flex-wrap:wrap}
.app-pill{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;border:1.5px solid var(--cb);background:var(--card);font-size:12px;font-weight:500;color:var(--txt3);cursor:pointer;transition:all .14s;white-space:nowrap}
.app-pill:hover{border-color:currentColor}
.app-pill.on-doc{border-color:var(--acc);background:var(--acc-l);color:var(--acc2)}
.app-pill.on-sheet{border-color:var(--grn);background:var(--grn-l);color:var(--grn)}
.app-pill.on-form{border-color:var(--purple);background:var(--purple-l);color:var(--purple)}

/* ══ MAIN ══ */
.main{flex:1;padding:28px 28px 56px;overflow-y:auto;min-width:0}

/* Category header */
.cat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.cat-title-group{display:flex;align-items:center;gap:10px}
.cat-title{font-family:var(--font-s);font-size:20px;font-weight:600;color:var(--txt)}
.cat-count{font-size:12px;color:var(--txt4);background:var(--bg2);border-radius:10px;padding:2px 8px;font-family:var(--font-m)}
.sort-row{display:flex;align-items:center;gap:8px}
.sort-sel{background:var(--card);border:1px solid var(--cb);color:var(--txt2);font-family:var(--font-ui);font-size:12.5px;padding:5px 10px;border-radius:var(--r);outline:none;cursor:pointer}
.view-btns{display:flex;gap:2px;background:var(--bg2);border:1px solid var(--cb);border-radius:var(--r);padding:2px}
.vbtn{width:30px;height:28px;background:none;border:none;border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--txt4);transition:all .14s}
.vbtn:hover{color:var(--txt)}
.vbtn.on{background:var(--card);color:var(--acc);box-shadow:0 1px 4px rgba(0,0,0,.08)}

/* Featured row */
.section-lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.section-lbl::after{content:'';flex:1;height:1px;background:var(--cb)}

/* ══ TEMPLATE CARD (GRID) ══ */
.tmpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:16px;margin-bottom:36px}
.tc{background:var(--card);border:1.5px solid var(--cb);border-radius:var(--r2);overflow:hidden;cursor:pointer;transition:all .2s;position:relative}
.tc:hover{border-color:#c0bbb4;box-shadow:var(--shadow-h);transform:translateY(-2px)}
.tc:hover .tc-actions{opacity:1}
.tc-thumb{height:170px;display:flex;flex-direction:column;padding:14px 12px;gap:4px;border-bottom:1px solid var(--cb);position:relative;overflow:hidden;background:linear-gradient(160deg,#f9f8f5,#f2eeea)}
/* App colour bars */
.tc-thumb.doc{background:linear-gradient(160deg,#f9f8f5,#f0eee9)}
.tc-thumb.sheet{background:linear-gradient(160deg,#f1fbf5,#e6f4ec)}
.tc-thumb.form{background:linear-gradient(160deg,#f5f0ff,#ede6fb)}
/* thumb lines */
.tl{border-radius:2px;background:#e4e0d8;height:7px}
.tl.ht{height:11px;background:#ccc7bf}
.tl.hm{height:8px;background:#d8d3cc}
.tl.w100{width:100%}.tl.w90{width:90%}.tl.w80{width:80%}.tl.w70{width:70%}.tl.w60{width:60%}.tl.w50{width:50%}.tl.w40{width:40%}.tl.w30{width:30%}
.tl-gap{height:7px}
/* sheet thumb helpers */
.s-row{display:flex;gap:3px;margin-bottom:3px}
.s-cell{height:10px;flex:1;border-radius:2px;background:#dde;border:1px solid #d0d0d8}
.s-cell.h{background:#c8daf8;border-color:#b0caee}
.s-cell.g{background:#c8f0da;border-color:#a8ddb8}
.s-cell.v{background:#e8e4de;border-color:#d4cfc8}
/* form thumb helpers */
.f-field{height:14px;border-bottom:2px solid #c0b8d8;margin-bottom:8px}
.f-radio{display:flex;align-items:center;gap:5px;margin-bottom:5px}
.f-radio-dot{width:8px;height:8px;border-radius:50%;border:2px solid #b0a8cc;flex-shrink:0}
.f-radio-dot.filled{background:#7c3aed;border-color:#7c3aed}
.f-radio-line{height:6px;border-radius:2px;background:#ddd;flex:1}
/* app badge on thumb */
.tc-app-badge{position:absolute;top:8px;right:8px;font-size:9px;font-weight:700;padding:2px 6px;border-radius:8px;text-transform:uppercase;letter-spacing:.04em}
.tc-app-badge.doc{background:rgba(26,115,232,.13);color:#1557b0}
.tc-app-badge.sheet{background:rgba(15,157,88,.13);color:#0a6b3a}
.tc-app-badge.form{background:rgba(124,58,237,.13);color:#5b21b6}
/* premium badge */
.tc-pro{position:absolute;top:8px;left:8px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:8px;letter-spacing:.04em}
/* thumb icon decoration */
.tc-thumb-icon{position:absolute;bottom:10px;left:12px;font-size:20px;opacity:.18}
/* info */
.tc-info{padding:11px 13px}
.tc-name{font-size:13px;font-weight:600;color:var(--txt);margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-meta{font-size:11px;color:var(--txt4);display:flex;align-items:center;gap:6px}
.tc-app-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.tc-actions{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.tca{width:26px;height:26px;background:rgba(255,255,255,.92);border:1px solid var(--cb);border-radius:5px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;transition:all .13s;backdrop-filter:blur(4px)}
.tca:hover{background:#fff;border-color:#aaa}

/* LIST VIEW */
.tmpl-list{display:flex;flex-direction:column;margin-bottom:36px}
.tli{display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--card);border:1px solid var(--cb);border-bottom:none;cursor:pointer;transition:background .14s;position:relative;flex-wrap:wrap}
.tli:first-child{border-radius:var(--r2) var(--r2) 0 0}
.tli:last-child{border-bottom:1px solid var(--cb);border-radius:0 0 var(--r2) var(--r2)}
.tli:only-child{border-radius:var(--r2);border-bottom:1px solid var(--cb)}
.tli:hover{background:#faf9f7}
.tli-icon{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.tli-name{flex:1;min-width:180px;font-size:13.5px;font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tli-meta{display:flex;align-items:center;gap:14px;flex-shrink:1;flex-wrap:wrap;font-size:12px;color:var(--txt4);min-width:0}
.tli-tag{padding:2px 8px;border-radius:8px;font-size:10.5px;font-weight:600}
.tli-actions{display:flex;gap:4px;opacity:0;transition:opacity .13s}
.tli:hover .tli-actions{opacity:1}
.tlia{width:28px;height:28px;background:none;border:1px solid transparent;border-radius:5px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;color:var(--txt4);transition:all .12s}
.tlia:hover{background:var(--bg2);border-color:var(--cb);color:var(--txt)}

/* ══ PREVIEW MODAL ══ */
.modal-bg{display:none;position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.45);align-items:center;justify-content:center;padding:20px}
.modal-bg.open{display:flex;animation:fdIn .15s ease}
.modal{background:#fff;border:1px solid var(--cb);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.2);width:min(820px,100%);max-width:100%;max-height:90vh;display:flex;overflow:hidden;animation:si .18s ease}
.modal-left{width:380px;flex-shrink:0;background:linear-gradient(160deg,#f9f8f5,#f0eee9);display:flex;align-items:center;justify-content:center;padding:24px;border-right:1px solid var(--cb);position:relative;overflow:hidden}
.modal-left.sheet-bg{background:linear-gradient(160deg,#f1fbf5,#e6f4ec)}
.modal-left.form-bg{background:linear-gradient(160deg,#f5f0ff,#ede6fb)}
.modal-preview-large{width:100%;max-width:300px;background:#fff;border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,.12);padding:18px 16px;display:flex;flex-direction:column;gap:5px}
.modal-right{flex:1;display:flex;flex-direction:column;padding:0;overflow:hidden}
.modal-rinner{flex:1;overflow-y:auto;padding:28px 28px 24px}
.modal-rinner::-webkit-scrollbar{width:4px}
.modal-rinner::-webkit-scrollbar-thumb{background:var(--cb);border-radius:2px}
.modal-app-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:12px;font-size:11.5px;font-weight:600;margin-bottom:12px}
.modal-app-badge.doc{background:var(--acc-l);color:var(--acc2)}
.modal-app-badge.sheet{background:var(--grn-l);color:#0a6b3a}
.modal-app-badge.form{background:var(--purple-l);color:#5b21b6}
.modal-title{font-family:var(--font-s);font-size:22px;font-weight:700;color:var(--txt);margin-bottom:7px;line-height:1.25}
.modal-desc{font-size:13.5px;color:var(--txt3);line-height:1.65;margin-bottom:20px}
.modal-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.m-tag{background:var(--bg2);border:1px solid var(--cb);color:var(--txt3);font-size:11.5px;padding:3px 9px;border-radius:12px}
.modal-features{margin-bottom:20px}
.modal-feat-lbl{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt4);margin-bottom:8px}
.modal-feat-item{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--txt2);margin-bottom:6px}
.modal-feat-item svg{color:var(--grn);flex-shrink:0}
.modal-footer{padding:16px 28px;border-top:1px solid var(--cb);display:flex;gap:10px;align-items:center;flex-shrink:0;flex-wrap:wrap}
.use-btn{background:var(--acc);border:none;color:#fff;font-family:var(--font-ui);font-size:14px;font-weight:600;padding:9px 22px;border-radius:var(--r);cursor:pointer;transition:background .16s;display:flex;align-items:center;gap:6px}
.use-btn:hover{background:var(--acc2)}
.use-btn.green{background:var(--grn)}
.use-btn.green:hover{background:#0a8043}
.use-btn.purple{background:var(--purple)}
.use-btn.purple:hover{background:#6d28d9}
.prev-btn{background:var(--bg);border:1.5px solid var(--cb);color:var(--txt2);font-family:var(--font-ui);font-size:13px;font-weight:500;padding:8px 16px;border-radius:var(--r);cursor:pointer;transition:all .15s}
.prev-btn:hover{border-color:#aaa;color:var(--txt)}
.modal-close-btn{background:none;border:none;font-size:20px;cursor:pointer;color:var(--txt4);padding:4px;border-radius:4px;line-height:1;position:absolute;top:16px;right:16px}
.modal-close-btn:hover{color:var(--txt);background:var(--bg)}

/* Empty state */
.empty{text-align:center;padding:64px 24px;color:var(--txt3)}
.empty-icon{font-size:42px;margin-bottom:12px;opacity:.55}
.empty-t{font-family:var(--font-s);font-size:18px;font-weight:600;color:var(--txt2);margin-bottom:6px}
.empty-s{font-size:13px;line-height:1.6}

/* Toast */
.toast{position:fixed;bottom:22px;right:22px;background:var(--top);color:#fff;font-size:12.5px;padding:10px 16px;border-radius:9px;box-shadow:0 4px 20px rgba(0,0,0,.28);opacity:0;transform:translateY(8px);transition:all .27s;z-index:1000;pointer-events:none;display:flex;align-items:center;gap:8px;font-family:var(--font-ui)}
.toast.show{opacity:1;transform:translateY(0)}
.toast.ok{border-left:3px solid #4ade80}
.toast.err{border-left:3px solid #f87171}
.toast.info{border-left:3px solid #60a5fa}

@keyframes si{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes fdIn{from{opacity:0}to{opacity:1}}

/* Responsive */
@media(max-width:980px){
  .topbar{padding:12px 18px}
  .top-search{order:3;flex-basis:100%;max-width:none;margin:0}
  .layout{min-height:auto}
}

@media(max-width:820px){
  .sidebar{display:none}
  .main{padding:22px 18px 42px}
  .modal{flex-direction:column}
  .modal-left{width:100%;height:160px}
}

@media(max-width:640px){
  .cat-header{align-items:flex-start}
  .sort-row{width:100%;justify-content:space-between;flex-wrap:wrap}
  .tmpl-grid{grid-template-columns:1fr}
  .tli{align-items:flex-start}
  .tli-actions{opacity:1}
  .modal-bg{padding:12px}
  .modal-rinner{padding:22px 18px 18px}
  .modal-footer{padding:14px 18px 18px}
}