/* my-templates.css - My Templates Page - Matches dashboard.css orange theme */

.dashboard-page{background:#0a0a0a; color:#fff; min-height:100vh; font-family:Inter, sans-serif;}

.manage-top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:18px;}
.manage-stats{display:flex; gap:10px; flex-wrap:wrap;}
.m-stat{background:#121212; border:1px solid #1e1e1e; border-radius:12px; padding:10px 16px; display:flex; flex-direction:column; min-width:70px;}
.m-stat strong{font-size:18px; font-weight:800;}
.m-stat span{font-size:10px; color:#666; text-transform:uppercase; letter-spacing:.08em; margin-top:2px;}

.templates{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:16px;}

.template-card{background:#121212; border:1px solid #1e1e1e; border-radius:14px; overflow:hidden; transition:.2s; position:relative;}
.template-card:hover{border-color:rgba(255,114,0,.3); transform:translateY(-2px);}
.template-card.premium-card{border:1px solid rgba(255,114,0,.4)!important;}

.card-top{padding:14px 16px 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.card-top .tag{font-size:10px; font-weight:700; padding:4px 8px; border-radius:20px; background:#1e1e1e; color:#888; letter-spacing:.05em;}
.card-top .tag.html{background:rgba(255,87,34,.12); color:#ff5722;}
.card-top .tag.css{background:rgba(33,150,243,.12); color:#2196f3;}
.card-top .tag.js{background:rgba(255,235,59,.12); color:#ffeb3b;}
.card-top .tag.tailwind{background:rgba(6,182,212,.12); color:#06b6d4;}
.card-top .tag.react{background:rgba(97,218,251,.12); color:#61dafb;}
.card-top h2{flex:1; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-left:4px;}
.live-dot{display:flex; align-items:center; gap:4px; font-size:10px; color:#00e676; background:rgba(0,230,118,.1); padding:3px 8px; border-radius:20px; border:1px solid rgba(0,230,118,.15);}
.live-dot span{width:6px; height:6px; background:#00e676; border-radius:50%; display:inline-block; animation:pulse 2s infinite;}
.private-dot{font-size:10px; color:#666; background:#1e1e1e; padding:3px 8px; border-radius:20px; border:1px solid #2a2a2a;}
@keyframes pulse{0%{opacity:1} 50%{opacity:.4} 100%{opacity:1}}

.card-body{padding:14px 16px 16px;}
.card-body p{font-size:12px; color:#888; line-height:1.4; height:32px; overflow:hidden; margin-bottom:10px;}
.meta-line{display:flex; gap:12px; font-size:11px; color:#555; margin-bottom:12px;}
.meta-line span{display:flex; align-items:center; gap:4px;}

pre.code{background:#0a0a0a; border:1px solid #1e1e1e; border-radius:8px; padding:10px 12px; font-size:11px; color:#aaa; max-height:120px; overflow:auto; white-space:pre-wrap; word-break:break-all; font-family:'JetBrains Mono', monospace;}

.actions{display:flex; gap:8px; margin-top:12px;}
.btn{flex:1; background:#1e1e1e; border:1px solid #2a2a2a; color:#ccc; padding:8px 12px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; transition:.2s; display:flex; align-items:center; justify-content:center; gap:6px;}
.btn:hover{background:#252525; border-color:#333; color:#fff;}
.btn.copy-btn{background:#ff7200; border-color:#ff7200; color:#000;}
.btn.copy-btn:hover{background:#ff8c1a;}
.btn.preview-btn{background:#1e1e1e;}

.btn-danger{background:#1a0f0f!important; border-color:#3a1a1a!important; color:#ff5f56!important;}
.btn-danger:hover{background:#ff5f56!important; color:#fff!important;}

.empty-state{text-align:center; padding:60px 20px; background:#0e0e0e; border:1px dashed rgba(255,255,255,0.1); border-radius:16px; grid-column:1/-1;}
.empty-state i{font-size:40px; color:#222; margin-bottom:14px; display:block;}
.empty-state p{color:#666; font-size:13px;}

.categories{display:flex; gap:6px; flex-wrap:wrap;}
.category-btn{background:#121212; border:1px solid #1e1e1e; color:#666; padding:6px 14px; border-radius:20px; font-size:12px; cursor:pointer; transition:.2s;}
.category-btn.active, .category-btn:hover{background:#ff7200; border-color:#ff7200; color:#000;}

.premium-badge{background:linear-gradient(135deg,#ff7200,#ff9f43); color:#fff; font-size:10px; padding:3px 8px; border-radius:20px; font-weight:700; margin-left:6px;}

/* Modals - match dashboard */
.modal-backdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:999; align-items:center; justify-content:center; padding:20px;}
.modal-backdrop.active{display:flex;}
.modal{background:#151515; border:1px solid #222; border-radius:16px; padding:24px; width:100%; max-width:420px; max-height:90vh; overflow:auto; position:relative;}
.modal.create-modal{max-width:560px;}
.modal.preview-modal-large{max-width:900px; width:95%; padding:0; overflow:hidden; background:#0a0a0a;}
.modal-close{position:absolute; top:14px; right:14px; background:#1e1e1e; border:1px solid #2a2a2a; color:#fff; width:32px; height:32px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.modal h2{font-size:18px; margin-bottom:6px;}
.modal-sub{font-size:12px; color:#666; margin-bottom:18px;}
.modal label{display:block; font-size:12px; color:#999; margin-bottom:12px;}
.modal label input, .modal label select, .modal label textarea{width:100%; background:#0a0a0a; border:1px solid #222; color:#fff; padding:10px 12px; border-radius:8px; margin-top:6px; font-size:13px; outline:none;}
.modal label input:focus, .modal label textarea:focus, .modal label select:focus{border-color:#ff7200;}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.publish-row{display:flex; justify-content:space-between; align-items:center; background:#0a0a0a; border:1px solid #1e1e1e; padding:12px; border-radius:10px; margin-top:12px;}
.switch-label{display:flex; align-items:center; gap:10px; cursor:pointer;}
.switch{width:36px; height:20px; background:#2a2a2a; border-radius:20px; position:relative; transition:.2s; display:inline-block;}
.switch:before{content:''; position:absolute; width:16px; height:16px; background:#fff; border-radius:50%; top:2px; left:2px; transition:.2s;}
input:checked + .switch{background:#ff7200;}
input:checked + .switch:before{transform:translateX(16px);}
.switch-label input{display:none;}
.public-badge{background:rgba(0,230,118,.1); color:#00e676; border:1px solid rgba(0,230,118,.15); padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600;}

.preview-header{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#121212; border-bottom:1px solid #1e1e1e;}
.preview-tabs{display:flex; align-items:center; gap:6px;}
.dot{width:10px; height:10px; border-radius:50%;}
.dot.red{background:#ff5f56;} .dot.yellow{background:#ffbd2e;} .dot.green{background:#27c93f;}
.preview-iframe{width:100%; height:500px; border:none; background:#fff;}
.preview-footer{display:flex; justify-content:space-between; padding:10px 16px; background:#121212; border-top:1px solid #1e1e1e;}

.primary-btn{background:#ff7200; color:#000; border:none; padding:10px 16px; border-radius:8px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:6px; font-size:13px; transition:.2s;}
.primary-btn:hover{background:#ff8c1a;}
.primary-btn.large{padding:12px 20px; font-size:14px;}

.dashboard-toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(100px); background:#1a1a1a; border:1px solid #2a2a2a; color:#fff; padding:10px 18px; border-radius:30px; font-size:13px; z-index:9999; transition:.3s; opacity:0;}
.dashboard-toast.show{transform:translateX(-50%) translateY(0); opacity:1;}

.admin-only{display:none!important;}
.admin-only.show{display:flex!important;}
#editPremiumRow.admin-only.show{display:flex!important;}

.result-text{font-size:12px; color:#666; margin:14px 0;}

@media(max-width:700px){
	.templates{grid-template-columns:minmax(0,1fr)}
	.manage-stats{width:100%}
	.m-stat{flex:1 1 calc(50% - 10px);min-width:0}
	.row-2{grid-template-columns:1fr}
	.modal.preview-modal-large{height:92vh}
}

:root{--orange:#ff8738;--bg:#0b0e14;--panel:#121722;--panel-2:#191f2c;--border:rgba(207,218,238,.1);--border2:rgba(207,218,238,.18);--text:#f4f6fb;--muted:#929caf}
.dashboard-page{background:radial-gradient(ellipse at 75% -15%,rgba(255,135,56,.08),transparent 38%),var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.m-stat,.template-card,.empty-state,.modal,.publish-row{background:linear-gradient(145deg,rgba(24,30,42,.96),rgba(17,22,32,.96));border-color:var(--border);border-radius:16px}
.template-card{box-shadow:0 12px 32px rgba(0,0,0,.12)}
.template-card:hover{border-color:rgba(255,135,56,.42);box-shadow:0 16px 38px rgba(0,0,0,.24);transform:translateY(-3px)}
.card-top .tag{background:rgba(255,255,255,.055);border:1px solid var(--border)}
.card-body pre.code,.modal label input,.modal label select,.modal label textarea{background:#0c111a;border-color:var(--border);border-radius:11px}
.btn{border-color:var(--border);border-radius:10px;background:rgba(255,255,255,.045)}
.btn.copy-btn,.primary-btn{background:linear-gradient(120deg,#ff9a51,#ff7928);border-color:transparent;color:#24140b}
.btn.copy-btn:hover,.primary-btn:hover{background:linear-gradient(120deg,#ffad72,#ff8b45);transform:translateY(-1px)}
.category-btn{background:rgba(255,255,255,.045);border-color:var(--border);border-radius:10px;color:#a6afc0}
.category-btn.active,.category-btn:hover{background:rgba(255,135,56,.15);border-color:rgba(255,135,56,.4);color:#ffb27b}
.modal-backdrop{background:rgba(3,5,9,.78);backdrop-filter:blur(12px)}
:focus-visible{outline:2px solid #ffab70;outline-offset:3px}

/* 🔒 PREMIUM LOCK - BLOCK SELECT */
.premium-locked{ user-select:none!important; -webkit-user-select:none!important; }
.locked-code{filter:blur(6px)!important; opacity:0.35!important; user-select:none!important; pointer-events:none!important;}
.premium-locked *::selection{background:transparent!important}