:root{--g-preview-bar-height:60px;--g-preview-bg:#0f172a;--g-preview-surface:#1e293b;--g-preview-text:#f8fafc;--g-preview-muted:#94a3b8;--g-preview-accent:#6366f1;--g-preview-accent-hover:#4f46e5;--g-preview-border:hsla(0,0%,100%,.1)}body.gravisain-frame-preview-active{background-color:#0b0f19!important;height:100vh!important;margin:0!important;overflow:hidden!important;padding:0!important;width:100vw!important}.gravisain-preview-bar{align-items:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(15,23,42,.9);border-bottom:1px solid var(--g-preview-border);box-sizing:border-box;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,sans-serif;height:var(--g-preview-bar-height);justify-content:space-between;left:0;padding:0 1.25rem;position:fixed;right:0;top:0;z-index:999999}.gravisain-preview-bar *{box-sizing:border-box}.gravisain-preview-bar .preview-bar-left{align-items:center;display:flex;gap:1rem;min-width:240px}.gravisain-preview-bar .preview-bar-left .back-link{align-items:center;border:1px solid transparent;border-radius:6px;color:var(--g-preview-muted);display:inline-flex;font-size:.875rem;font-weight:500;gap:.5rem;padding:.4rem .75rem;text-decoration:none;transition:all .2s ease}.gravisain-preview-bar .preview-bar-left .back-link:hover{background:hsla(0,0%,100%,.06);border-color:var(--g-preview-border);color:#fff}.gravisain-preview-bar .preview-bar-left .back-link svg{height:16px;width:16px}.gravisain-preview-bar .preview-bar-left .template-meta{align-items:center;display:flex;gap:.5rem}.gravisain-preview-bar .preview-bar-left .template-meta .template-title{color:var(--g-preview-text);font-size:.95rem;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gravisain-preview-bar .preview-bar-left .template-meta .template-badge{border-radius:999px;font-size:.6875rem;font-weight:700;letter-spacing:.05em;padding:2px 8px;text-transform:uppercase}.gravisain-preview-bar .preview-bar-left .template-meta .template-badge.badge-free{background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);color:#34d399}.gravisain-preview-bar .preview-bar-left .template-meta .template-badge.badge-pro{background:rgba(99,102,241,.2);border:1px solid rgba(99,102,241,.4);color:#a5b4fc}.gravisain-preview-bar .preview-bar-left .template-meta .template-badge.badge-featured{background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);color:#fbbf24}.gravisain-preview-bar .preview-bar-center{align-items:center;display:flex;justify-content:center}.gravisain-preview-bar .preview-bar-center .device-switcher{background:var(--g-preview-surface);border:1px solid var(--g-preview-border);border-radius:8px;display:flex;gap:2px;padding:4px}.gravisain-preview-bar .preview-bar-center .device-switcher .device-btn{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--g-preview-muted);cursor:pointer;display:flex;justify-content:center;outline:none;padding:6px 12px;transition:all .2s ease}.gravisain-preview-bar .preview-bar-center .device-switcher .device-btn svg{height:18px;width:18px}.gravisain-preview-bar .preview-bar-center .device-switcher .device-btn:hover{background:hsla(0,0%,100%,.05);color:#fff}.gravisain-preview-bar .preview-bar-center .device-switcher .device-btn.active{background:var(--g-preview-accent);box-shadow:0 1px 3px rgba(0,0,0,.3);color:#fff}.gravisain-preview-bar .preview-bar-right{align-items:center;display:flex;gap:.75rem;justify-content:flex-end;min-width:240px}.gravisain-preview-bar .preview-bar-right .remove-frame-btn{align-items:center;border:1px solid var(--g-preview-border);border-radius:6px;color:var(--g-preview-muted);display:inline-flex;font-size:.8125rem;font-weight:500;gap:.35rem;padding:.4rem .75rem;text-decoration:none;transition:all .2s ease}.gravisain-preview-bar .preview-bar-right .remove-frame-btn:hover{background:hsla(0,0%,100%,.06);color:#fff}.gravisain-preview-bar .preview-bar-right .remove-frame-btn svg{height:14px;width:14px}.gravisain-preview-bar .preview-bar-right .buy-btn{align-items:center;background:linear-gradient(135deg,#6366f1,#4f46e5);border-radius:6px;box-shadow:0 2px 4px rgba(79,70,229,.3);color:#fff;display:inline-flex;font-size:.8125rem;font-weight:600;gap:.4rem;padding:.45rem 1rem;text-decoration:none;transition:all .2s ease}.gravisain-preview-bar .preview-bar-right .buy-btn:hover{background:linear-gradient(135deg,#4f46e5,#4338ca);box-shadow:0 4px 8px rgba(79,70,229,.4);transform:translateY(-1px)}.gravisain-preview-bar .preview-bar-right .buy-btn svg{height:14px;width:14px}.gravisain-preview-viewport{align-items:center;background:#0f172a;bottom:0;display:flex;justify-content:center;left:0;overflow:hidden;position:fixed;right:0;top:var(--g-preview-bar-height);transition:padding .3s ease}.gravisain-preview-viewport .iframe-container{background:#fff;display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative;transition:width .35s cubic-bezier(.4,0,.2,1),height .35s cubic-bezier(.4,0,.2,1),box-shadow .35s ease,border-radius .35s ease;width:100%}.gravisain-preview-viewport .iframe-container.mode-desktop{border-radius:0;box-shadow:none;height:100%;width:100%}.gravisain-preview-viewport .iframe-container.mode-tablet{border:8px solid #1e293b;border-radius:12px;box-shadow:0 25px 50px -12px rgba(0,0,0,.7);height:calc(100% - 40px);width:768px}.gravisain-preview-viewport .iframe-container.mode-mobile{border:10px solid #1e293b;border-radius:24px;box-shadow:0 25px 50px -12px rgba(0,0,0,.7);height:calc(100% - 40px);width:375px}.gravisain-preview-viewport .iframe-container iframe{background:#fff;border:none;display:block;height:100%;width:100%}.gravisain-preview-viewport .iframe-container .iframe-loading-overlay{align-items:center;background:#fff;bottom:0;display:flex;flex-direction:column;justify-content:center;left:0;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease;z-index:10}.gravisain-preview-viewport .iframe-container .iframe-loading-overlay.is-hidden{opacity:0;pointer-events:none;visibility:hidden}.gravisain-preview-viewport .iframe-container .iframe-loading-overlay .spinner{animation:g-spin .8s linear infinite;border:3px solid #e2e8f0;border-radius:50%;border-top:3px solid var(--g-preview-accent);height:36px;margin-bottom:12px;width:36px}.gravisain-preview-viewport .iframe-container .iframe-loading-overlay p{color:#64748b;font-size:.875rem;font-weight:500;margin:0}@keyframes g-spin{to{transform:rotate(1turn)}}@media(max-width:768px){.gravisain-preview-bar{padding:0 .75rem}.gravisain-preview-bar .preview-bar-left .template-meta,.gravisain-preview-bar .preview-bar-right .remove-frame-btn{display:none}.gravisain-preview-bar .preview-bar-left,.gravisain-preview-bar .preview-bar-right{min-width:auto}}.gravisain-showcase-container{box-sizing:border-box;width:100%}.gravisain-showcase-container .template-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:40px}.gravisain-showcase-container .template-filters .filter-btn{align-items:center;background:#fff;border:1px solid #cbd5e1;border-radius:99px;color:#475569;display:inline-flex;font-size:.9rem;font-weight:600;padding:8px 20px;text-decoration:none;transition:all .2s ease}.gravisain-showcase-container .template-filters .filter-btn:hover{background:#f1f5f9;border-color:#94a3b8;color:#0f172a}.gravisain-showcase-container .template-filters .filter-btn.active{background:#4f46e5;border-color:#4f46e5;box-shadow:0 4px 6px -1px rgba(79,70,229,.25);color:#fff}.gravisain-showcase-container .templates-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.gravisain-showcase-container .templates-grid.columns-2{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}.gravisain-showcase-container .templates-grid.columns-3{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.gravisain-showcase-container .templates-grid.columns-4{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.gravisain-showcase-container .templates-grid .template-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,.05),0 2px 4px -1px rgba(0,0,0,.03);display:flex;flex-direction:column;overflow:hidden;position:relative;transition:transform .3s ease,box-shadow .3s ease}.gravisain-showcase-container .templates-grid .template-card:hover{box-shadow:0 12px 20px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);transform:translateY(-4px)}.gravisain-showcase-container .templates-grid .template-card:hover .card-thumbnail img{transform:scale(1.04)}.gravisain-showcase-container .templates-grid .template-card .card-thumbnail{background:#f1f5f9;display:block;overflow:hidden;padding-top:66.66%;position:relative}.gravisain-showcase-container .templates-grid .template-card .card-thumbnail img{height:100%;left:0;object-fit:cover;position:absolute;top:0;transition:transform .35s ease;width:100%}.gravisain-showcase-container .templates-grid .template-card .card-thumbnail .thumbnail-placeholder{align-items:center;color:#94a3b8;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.gravisain-showcase-container .templates-grid .template-card .card-thumbnail .card-badge{border-radius:99px;font-size:.72rem;font-weight:700;letter-spacing:.5px;padding:4px 10px;position:absolute;right:12px;text-transform:uppercase;top:12px;z-index:2}.gravisain-showcase-container .templates-grid .template-card .card-thumbnail .card-badge.badge-free{background:#ecfdf5;border:1px solid #a7f3d0;color:#059669}.gravisain-showcase-container .templates-grid .template-card .card-thumbnail .card-badge.badge-pro{background:#eef2ff;border:1px solid #c7d2fe;color:#4f46e5}.gravisain-showcase-container .templates-grid .template-card .card-thumbnail .card-badge.badge-featured{background:#fffbeb;border:1px solid #fde68a;color:#d97706}.gravisain-showcase-container .templates-grid .template-card .card-body{display:flex;flex:1;flex-direction:column;padding:24px}.gravisain-showcase-container .templates-grid .template-card .card-body .category-tag{color:#4f46e5;display:block;font-size:.75rem;font-weight:700;letter-spacing:1px;margin-bottom:8px;text-decoration:none;text-transform:uppercase}.gravisain-showcase-container .templates-grid .template-card .card-body .card-title{font-size:1.25rem;font-weight:700;line-height:1.4;margin:0 0 12px}.gravisain-showcase-container .templates-grid .template-card .card-body .card-title a{color:#0f172a;text-decoration:none;transition:color .2s}.gravisain-showcase-container .templates-grid .template-card .card-body .card-title a:hover{color:#4f46e5}.gravisain-showcase-container .templates-grid .template-card .card-body .card-actions{display:flex;gap:10px;margin-top:auto;padding-top:16px}.gravisain-showcase-container .templates-grid .template-card .card-body .card-actions .btn-details{background:#f8fafc;border:1px solid #cbd5e1;border-radius:6px;color:#334155;flex:1;font-size:.9rem;font-weight:600;padding:10px;text-align:center;text-decoration:none;transition:background .2s}.gravisain-showcase-container .templates-grid .template-card .card-body .card-actions .btn-details:hover{background:#e2e8f0}.gravisain-showcase-container .templates-grid .template-card .card-body .card-actions .btn-demo{background:#4f46e5;border:1px solid #4f46e5;border-radius:6px;color:#fff;flex:1;font-size:.9rem;font-weight:600;padding:10px;text-align:center;text-decoration:none;transition:background .2s}.gravisain-showcase-container .templates-grid .template-card .card-body .card-actions .btn-demo:hover{background:#4338ca}.gravisain-showcase-container .archive-pagination{margin-top:40px;text-align:center}.gravisain-showcase-container .archive-pagination .page-numbers{display:inline-flex;gap:6px;list-style:none;margin:0;padding:0}.gravisain-showcase-container .archive-pagination .page-numbers a,.gravisain-showcase-container .archive-pagination .page-numbers span{background:#fff;border:1px solid #cbd5e1;border-radius:6px;color:#334155;font-size:.9rem;font-weight:600;padding:8px 14px;text-decoration:none;transition:all .2s}.gravisain-showcase-container .archive-pagination .page-numbers a:hover,.gravisain-showcase-container .archive-pagination .page-numbers span:hover{background:#f1f5f9}.gravisain-showcase-container .archive-pagination .page-numbers a.current,.gravisain-showcase-container .archive-pagination .page-numbers span.current{background:#4f46e5;border-color:#4f46e5;color:#fff}@media(max-width:768px){.gravisain-showcase-container .templates-grid,.gravisain-showcase-container .templates-grid.columns-2,.gravisain-showcase-container .templates-grid.columns-3,.gravisain-showcase-container .templates-grid.columns-4{gap:20px}}@media(max-width:640px){.gravisain-showcase-container{box-sizing:border-box!important;margin-left:-18px!important;margin-right:-18px!important;max-width:none!important;width:auto!important}.gravisain-showcase-container .template-filters{display:flex!important;flex-wrap:nowrap!important;gap:8px!important;justify-content:flex-start!important;margin-bottom:20px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:4px 6px 14px!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;-ms-overflow-style:none!important}.gravisain-showcase-container .template-filters::-webkit-scrollbar{-webkit-appearance:none!important;background:transparent!important;display:none!important;height:0!important;width:0!important}.gravisain-showcase-container .template-filters .filter-btn{flex:0 0 auto!important;font-size:.85rem!important;line-height:1.2!important;padding:8px 18px!important;white-space:nowrap!important}.gravisain-showcase-container .templates-grid,.gravisain-showcase-container .templates-grid.columns-2,.gravisain-showcase-container .templates-grid.columns-3,.gravisain-showcase-container .templates-grid.columns-4{box-sizing:border-box!important;gap:20px!important;grid-template-columns:1fr!important;padding:0 4px!important;width:100%!important}.gravisain-showcase-container .templates-grid .template-card{border-radius:14px!important;box-shadow:0 4px 12px rgba(0,0,0,.06)!important;box-sizing:border-box!important;max-width:100%!important;width:100%!important}.gravisain-showcase-container .templates-grid .template-card .card-thumbnail{padding-top:58%!important}.gravisain-showcase-container .templates-grid .template-card .card-thumbnail .card-badge{font-size:.68rem!important;padding:3px 8px!important;right:10px!important;top:10px!important}.gravisain-showcase-container .templates-grid .template-card .card-body{padding:16px 14px!important}.gravisain-showcase-container .templates-grid .template-card .card-body .category-tag{font-size:.72rem!important;letter-spacing:.8px!important;margin-bottom:6px!important}.gravisain-showcase-container .templates-grid .template-card .card-body .card-title{font-size:1.15rem!important;line-height:1.35!important;margin:0 0 14px!important}.gravisain-showcase-container .templates-grid .template-card .card-body .card-actions{display:flex!important;gap:8px!important;margin-top:auto!important;padding-top:12px!important}.gravisain-showcase-container .templates-grid .template-card .card-body .card-actions .btn-demo,.gravisain-showcase-container .templates-grid .template-card .card-body .card-actions .btn-details{align-items:center!important;border-radius:7px!important;box-sizing:border-box!important;display:inline-flex!important;flex:1 1 50%!important;font-size:.85rem!important;font-weight:600!important;justify-content:center!important;line-height:1.2!important;min-width:0!important;padding:9px 6px!important;text-align:center!important;white-space:nowrap!important}}
