@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root{--brand-blue:#4C6FFF;--brand-blue-500:#4C6FFF;--brand-blue-600:#3E5BFF;--brand-blue-700:#324AD8;--neutral-900:#0F172A;--accent:#FFB422;--bg:#F6F7FB;--surface:#FFFFFF;--surface-2:#FAFBFF;--border:#E2E4EA;--text:#0B1220;--text-muted:#5F6A7A;--radius-8:8px;--radius-12:12px;--radius-16:16px;--shadow:0 2px 8px rgba(17,24,39,0.06);--shadow-lg:0 10px 30px rgba(17,24,39,0.12)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 20% 0%, #F0F2FF 0%, #F8F9FC 30%, #FBFBFD 100%);color:var(--text);font:14px/1.65 'Inter',system-ui,-apple-system,Segoe UI,Roboto}
.app{display:grid;grid-template-columns:280px 1fr;grid-template-rows:72px 1fr;grid-template-areas:'topbar topbar' 'sidebar content';height:100vh}
.topbar{grid-area:topbar;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.8);backdrop-filter:saturate(1.25) blur(8px);border-bottom:1px solid var(--border);padding:0 20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:600}
.brand-logo{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#4C6FFF,#6F8BFF);box-shadow:0 6px 12px rgba(76,111,255,.25)}
.workspace-switch{display:flex;align-items:center;gap:8px;color:var(--text-muted)}
.top-tabs{display:flex;gap:8px}
.top-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;color:var(--text-muted);transition:all .2s ease}
.top-tab:hover{background:#F2F5FF;color:var(--brand-blue)}
.top-tab.active{background:linear-gradient(90deg, #EEF2FF 0%, #E9EDFF 100%);color:var(--brand-blue);font-weight:600;box-shadow:0 6px 14px rgba(76,111,255,.18)}
.top-actions{display:flex;align-items:center;gap:12px}
.search{display:flex;align-items:center;gap:8px;background:#F4F6FB;border:1px solid var(--border);border-radius:12px;padding:8px 14px}
.search input{border:0;background:transparent;outline:none;color:var(--text)}
.avatar{width:32px;height:32px;border-radius:50%;background:#DDD;box-shadow:var(--shadow)}
.sidebar{grid-area:sidebar;background:var(--surface);border-right:1px solid var(--border);padding:14px 10px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--text-muted);cursor:pointer;transition:background .2s ease,color .2s ease}
.nav-item.active{background:#EEF2FF;color:var(--brand-blue);font-weight:600;border-left:3px solid var(--brand-blue)}
.nav-item:hover{background:#F6F8FF;color:var(--text)}
.content{grid-area:content;padding:20px;overflow:auto}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:18px;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.grid{display:grid;grid-gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:14px;border:1px solid var(--border);background:transparent;color:#000;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease}
.btn:hover{background:#F6F8FF}
.btn.primary{background:linear-gradient(90deg,var(--brand-blue-600),var(--brand-blue-500));color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(76,111,255,.28)}
.btn.primary:hover{box-shadow:0 14px 28px rgba(76,111,255,.34);transform:translateY(-1px)}
.btn.primary:active{transform:translateY(0)}
.btn.ghost{background:transparent}
.btn.small{padding:6px 10px;border-radius:10px;font-size:13px}
.btn.icon{width:36px;height:36px;padding:0;border-radius:10px}
.input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #D1D5DB;background:#fff;outline:none;transition:box-shadow .18s ease,border-color .18s ease}
.input:focus{border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(76,111,255,0.25)}
.input:focus-visible{border-color:var(--brand-blue)}
.modal-backdrop{position:fixed;inset:0;background:rgba(10,15,25,.45);display:none;align-items:center;justify-content:center}
.modal{background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);width:560px;max-width:92vw;border:1px solid var(--border);transform:translateY(8px) scale(.98);opacity:0;transition:transform .2s ease,opacity .2s ease}
.modal.visible{transform:translateY(0) scale(1);opacity:1}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border)}
.modal-body{padding:16px}
.modal-footer{padding:16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.toast{position:fixed;right:16px;bottom:16px;background:#0B1220;color:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:12px 14px;transform:translateY(20px);opacity:0;transition:transform .25s ease,opacity .25s ease}
.toast.show{transform:translateY(0);opacity:1}
.projects-card{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
.projects-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.projects-thumb{height:160px;background:#F3F4F6}
.projects-body{padding:14px}

.brand-grid.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:16px}
.template-card{border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.template-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.template-thumb{height:160px;background:#F3F4F6;background-size:cover;background-position:center}
.template-meta{padding:12px}
.template-title{font-weight:600;text-transform:capitalize}
.swatch{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow)}
.font-item{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--border)}
.table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--border);border-radius:16px}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:14px}
.table tr:last-child td{border-bottom:0}
@media(max-width:1024px){.app{grid-template-columns:80px 1fr}.nav-item span.label{display:none}}
@media(max-width:768px){.app{grid-template-columns:1fr;grid-template-rows:60px auto}.sidebar{position:fixed;top:60px;bottom:0;left:0;width:280px;transform:translateX(-100%);transition:transform .2s ease;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(8px)}.sidebar.open{transform:translateX(0)}.top-tabs{display:none}}

.skeleton{position:relative;overflow:hidden;background:#EFF2F7;border-radius:12px}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);animation:shimmer 1.2s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}