:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#0d1117;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-bg: #050505;--color-surface: #121212;--color-primary: #00f3ff;--color-secondary: #bc13fe;--color-accent: #0aff0a;--color-text: #e0e0e0;--color-text-dim: #a0a0a0;--font-mono: "Fira Code", monospace}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background-color:var(--color-bg);color:var(--color-text);overflow-x:hidden}#root{width:100%;max-width:1280px;margin:0 auto;padding:2rem;text-align:center}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:var(--color-surface);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}.timeline-container{margin-bottom:3rem;width:100%;max-width:1200px;position:relative;height:min-content;min-height:140px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;margin:0 auto 3rem;overflow:visible}.timeline-line{position:absolute;top:40px;left:30px;right:30px;height:2px;background:#ffffff1a;z-index:0}.timeline-item{z-index:1;display:flex;flex-direction:column;align-items:center;position:relative;cursor:pointer;width:60px}.timeline-icon-box{width:32px;height:32px;background:var(--color-bg);border:2px solid var(--color-primary);border-radius:50%;margin-bottom:.8rem;box-shadow:0 0 10px #00f3ff80;display:flex;align-items:center;justify-content:center;color:var(--color-primary);font-size:.9rem;z-index:2}.timeline-label{position:absolute;top:45px;font-size:.7rem;color:var(--color-text-dim);font-family:var(--font-mono);text-align:center;width:100px;line-height:1.2;word-wrap:break-word}.timeline-tooltip{position:absolute;bottom:50px;left:50%;transform:translate(-50%);background:#141414f2;border:1px solid var(--color-primary);border-radius:8px;padding:.8rem 1.2rem;min-width:200px;width:max-content;max-width:300px;text-align:center;z-index:100;box-shadow:0 5px 20px #00000080;pointer-events:none}@media(max-width:768px){.timeline-container{justify-content:space-between;padding:0 10px;min-height:100px;gap:0;overflow:visible}.timeline-line{left:10px;right:10px}.timeline-item{width:40px}.timeline-icon-box{width:24px;height:24px;font-size:.65rem;margin-bottom:.5rem}.timeline-label{font-size:.5rem;width:50px;top:35px}.timeline-tooltip{min-width:120px;max-width:180px;padding:.5rem .8rem;bottom:40px}.timeline-tooltip span{font-size:.65rem!important}}@media(min-width:769px){.timeline-tooltip-mobile{display:none!important}}.admin-container{min-height:100vh;background-color:var(--color-bg);color:var(--color-text);padding-bottom:5rem;font-family:Inter,system-ui,sans-serif}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg);color:var(--color-text)}.login-box{background-color:var(--color-surface);padding:2rem;border-radius:.5rem;box-shadow:0 0 20px #00f3ff1a;width:100%;max-width:28rem;border:1px solid rgba(255,255,255,.1)}.login-icon{display:flex;justify-content:center;margin-bottom:1.5rem;color:var(--color-primary)}.login-title{text-align:center;font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;color:var(--color-primary);text-shadow:0 0 5px rgba(0,243,255,.5)}.form-group{margin-bottom:1rem}.form-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:var(--color-text)}.form-input{width:100%;padding:.75rem;border-radius:.25rem;background-color:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#fff;outline:none;transition:all .2s}.form-input:focus{border-color:var(--color-primary);box-shadow:0 0 10px #00f3ff33}.form-hint{font-size:.75rem;color:var(--color-text-dim);margin-top:.25rem}.error-msg{color:#ef4444;font-size:.875rem;margin-bottom:1rem;background-color:#ef44441a;padding:.5rem;border-radius:.25rem;border:1px solid rgba(239,68,68,.2)}.btn-primary{width:100%;background-color:var(--color-primary);color:#000;font-weight:700;padding:.75rem 1rem;border-radius:.25rem;border:none;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .2s;text-transform:uppercase;letter-spacing:1px}.btn-primary:hover{background-color:#00c2cc;box-shadow:0 0 15px #00f3ff66}.btn-primary:disabled{opacity:.7;cursor:not-allowed;filter:grayscale(1)}.admin-nav{background-color:var(--color-surface);border-bottom:1px solid rgba(255,255,255,.1);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;position:sticky;top:0;z-index:10}.nav-title{font-size:1.25rem;font-weight:700;color:var(--color-primary);text-shadow:0 0 5px rgba(0,243,255,.3)}@media(max-width:600px){.admin-nav{flex-direction:column;align-items:stretch;padding:.75rem 1rem;gap:.5rem}.nav-title{text-align:center;font-size:1.1rem}}.btn-logout{color:#ef4444;font-size:.875rem;background:none;border:1px solid #ef4444;padding:.25rem .75rem;border-radius:4px;cursor:pointer;transition:all .2s}.btn-logout:hover{background-color:#ef44441a;box-shadow:0 0 10px #ef444433}.btn-publish{background-color:#10b98126;color:#10b981;font-size:.875rem;font-weight:700;border:1px solid #10b981;padding:.4rem 1rem;border-radius:4px;cursor:pointer;display:flex;align-items:center;transition:all .2s}.btn-publish:hover{background-color:#10b981;color:#000;box-shadow:0 0 15px #10b98166}.btn-publish:disabled{opacity:.5;cursor:not-allowed}.content-container{max-width:1200px;margin:0 auto;padding:2rem}.loading-overlay{position:fixed;inset:0;background-color:#000000b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:50}.loading-box{background-color:var(--color-surface);padding:1.5rem;border-radius:.5rem;box-shadow:0 0 20px #00000080;display:flex;align-items:center;color:var(--color-text);border:1px solid var(--color-primary)}.alert-error{background-color:#ef44441a;border:1px solid #ef4444;color:#ef4444;padding:.75rem 1rem;border-radius:.25rem;margin-bottom:1rem}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:1rem}.section-title{font-size:1.5rem;font-weight:700;color:#fff}.btn-add{background-color:var(--color-secondary);color:#fff;padding:.5rem 1rem;border-radius:.25rem;border:none;cursor:pointer;display:flex;align-items:center;transition:all .2s;font-weight:700}.btn-add:hover{background-color:#a010d6;box-shadow:0 0 15px #bc13fe66}.admin-tabs{display:flex;gap:1rem;margin-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.1)}.tab-btn{background:transparent;color:var(--color-text-dim);border:none;padding:.75rem 1.5rem;font-size:1rem;font-weight:700;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;margin-bottom:-1px}.tab-btn:hover{color:#fff}.tab-btn.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.category-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:2rem}.category-card{background-color:var(--color-surface);border-radius:.5rem;overflow:hidden;border:1px solid rgba(255,255,255,.1);transition:transform .2s,box-shadow .2s}.category-card:hover{border-color:var(--color-primary);box-shadow:0 0 15px #00f3ff1a}.card-header{background-color:#ffffff08;padding:1rem;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center}.header-left{display:flex;align-items:center;gap:1rem}.category-thumb{width:3rem;height:3rem;object-fit:cover;border-radius:50%;border:2px solid var(--color-primary)}.category-title{font-weight:700;font-size:1.25rem;color:var(--color-primary)}.action-buttons{display:flex;gap:.5rem}.btn-icon{padding:.5rem;border:none;background:#ffffff0d;border-radius:4px;cursor:pointer;font-size:1rem;transition:all .2s}.btn-edit{color:var(--color-primary)}.btn-edit:hover{background-color:#00f3ff1a}.btn-delete{color:#f05}.btn-delete:hover{background-color:#ff00551a}.card-body{padding:1.5rem}.templates-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.templates-title{font-weight:600;color:var(--color-text);font-size:1rem}.btn-small{font-size:.8rem;padding:.25rem .75rem;background-color:#00f3ff1a;color:var(--color-primary);border-radius:.25rem;border:1px solid var(--color-primary);cursor:pointer;display:flex;align-items:center;transition:all .2s}.btn-small:hover{background-color:var(--color-primary);color:#000}.template-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}@media(min-width:768px){.template-grid{grid-template-columns:repeat(4,1fr)}}@media(min-width:1024px){.template-grid{grid-template-columns:repeat(6,1fr)}}.template-item{position:relative;border:1px solid rgba(255,255,255,.1);border-radius:.25rem;padding:.5rem;transition:all .2s;background-color:#0003}.template-item:hover{border-color:var(--color-secondary);box-shadow:0 0 10px #bc13fe33;transform:translateY(-2px)}.template-img-box{aspect-ratio:1 / 1;background-color:#ffffff0d;margin-bottom:.5rem;border-radius:.25rem;overflow:hidden;display:flex;align-items:center;justify-content:center}.template-img{width:100%;height:100%;object-fit:contain}.template-name{text-align:center;font-size:.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--color-text-dim)}.template-item:hover .template-name{color:#fff}.template-actions{position:absolute;top:.5rem;right:.5rem;display:none;gap:.25rem;background-color:#000c;border-radius:.25rem;padding:.25rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.template-item:hover .template-actions{display:flex}.modal-overlay{position:fixed;inset:0;background-color:#000c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem}.modal-box{background-color:#1a1a1a;padding:2rem;padding-bottom:0;border-radius:.5rem;width:100%;max-width:32rem;border:1px solid var(--color-primary);box-shadow:0 0 30px #00f3ff26;color:var(--color-text);max-height:90vh;overflow-y:auto;display:flex;flex-direction:column}.modal-box form{display:flex;flex-direction:column;flex:1;overflow-y:auto;padding-bottom:1rem}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:1rem}.modal-title{font-size:1.5rem;font-weight:700;color:#fff}.input-group{margin-bottom:1.5rem}.input-label{display:block;color:var(--color-primary);font-size:.875rem;font-weight:700;margin-bottom:.5rem}.input-field{width:100%;border:1px solid rgba(255,255,255,.2);padding:.75rem;border-radius:.25rem;background-color:#0000004d;color:#fff;transition:all .2s}.input-field:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 10px #00f3ff33}.modal-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:1rem;padding:1rem 0;position:sticky;bottom:0;background-color:#1a1a1a;border-top:1px solid rgba(255,255,255,.1)}.btn-cancel{background-color:transparent;padding:.5rem 1.5rem;border-radius:.25rem;border:1px solid rgba(255,255,255,.2);color:var(--color-text);cursor:pointer;transition:all .2s}.btn-cancel:hover{background-color:#ffffff1a;color:#fff}.btn-save{background-color:var(--color-primary);color:#000;padding:.5rem 2rem;border-radius:.25rem;border:none;cursor:pointer;font-weight:700;transition:all .2s}.btn-save:hover{background-color:#00c2cc;box-shadow:0 0 15px #00f3ff66}.uploader-label{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;background-color:#ffffff0d;border:2px dashed rgba(255,255,255,.2);border-radius:.5rem;cursor:pointer;transition:all .2s;color:var(--color-text-dim)}.uploader-label:hover{background-color:#ffffff14;border-color:var(--color-primary);color:var(--color-primary)}