*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#0a0a0a;color:#d4d4d4;height:100vh;overflow:hidden;display:flex;flex-direction:column;position:relative}
.particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.particle{position:absolute;width:2px;height:2px;background:#333;border-radius:50%;animation:float linear infinite;opacity:0}
@keyframes float{0%{transform:translateY(100vh) scale(0);opacity:0}5%{opacity:0.6}90%{opacity:0.2}100%{transform:translateY(-10vh) scale(1.5);opacity:0}}
.topbar{height:52px;position:relative;z-index:10;border-bottom:1px solid #1e1e1e;display:flex;align-items:center;padding:0 24px;flex-shrink:0;background:#0a0a0a}
.logo{font-size:15px;font-weight:700;color:#f5f5f5;letter-spacing:-0.3px}
.body{display:flex;flex:1;overflow:hidden;position:relative;z-index:10}
.sidebar{width:260px;flex-shrink:0;border-right:1px solid #1e1e1e;display:flex;flex-direction:column;overflow-y:auto;padding:8px 0;background:#0a0a0a}
.sidebar-section{padding:20px 16px 8px;font-size:11px;font-weight:600;color:#444;letter-spacing:1px;text-transform:uppercase}
.project{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:8px;margin:2px 8px;cursor:pointer;transition:all 0.15s;user-select:none}
.project:hover{background:#131313}
.project.active{background:#1a1a1a}
.project.active .project-name{color:#fff}
.project-icon{width:36px;height:36px;border-radius:10px;background:#181818;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;transition:background 0.15s}
.project.active .project-icon{background:#222}
.project-info{flex:1;min-width:0}
.project-name{font-size:14px;font-weight:600;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color 0.15s}
.project-sub{font-size:12px;color:#3a3a3a;margin-top:2px;font-weight:500}
.project.active .project-sub{color:#555}
.content{flex:1;display:flex;flex-direction:column;overflow:hidden}
.content-header{height:52px;border-bottom:1px solid #1e1e1e;display:flex;align-items:center;padding:0 32px;gap:12px;flex-shrink:0;background:#0a0a0a}
.content-title{font-size:15px;font-weight:700;color:#fff}
.panels{flex:1;position:relative;overflow:hidden}
.panel{position:absolute;inset:0;overflow-y:auto;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateX(12px);pointer-events:none;transition:opacity 0.2s ease, transform 0.2s ease}
.panel.active{opacity:1;transform:translateX(0);pointer-events:all}
.panel.out{opacity:0;transform:translateX(-12px);pointer-events:none}
.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#333;font-size:15px;font-weight:500}
.empty-icon{font-size:36px;opacity:0.25;margin-bottom:6px}
.form-wrap{width:100%;max-width:560px}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:32px}
.preset-chip{font-size:12px;font-family:inherit;font-weight:500;color:#666;border:1px solid #1e1e1e;background:none;padding:6px 14px;border-radius:6px;cursor:pointer;transition:all 0.15s;display:inline-flex;align-items:center;gap:6px}
.preset-chip:hover{border-color:#3a3a3a;color:#aaa;background:#111}
.preset-del{font-size:15px;color:#333;line-height:1;font-weight:400}
.preset-chip:hover .preset-del{color:#777}
.preset-save{font-size:12px;font-family:inherit;font-weight:500;color:#444;border:1px dashed #1e1e1e;background:none;padding:6px 14px;border-radius:6px;cursor:pointer;transition:all 0.15s}
.preset-save:hover{border-color:#555;color:#888;background:#111}
.fields{display:flex;flex-direction:column;margin-bottom:32px}
.field{border-bottom:1px solid #141414}
.field:first-child{border-top:1px solid #141414}
.field-row{display:flex;align-items:center;padding:16px 0;gap:16px}
.field-label-wrap{display:flex;align-items:center;gap:6px;min-width:130px;flex-shrink:0}
.field-label{font-size:14px;color:#666;font-weight:500;transition:color 0.15s}
.field-input{flex:1;background:transparent;border:none;outline:none;color:#bbb;font-family:inherit;font-size:15px;font-weight:500;text-align:right;transition:color 0.15s}
.field-input:focus{color:#f0f0f0}
.field-input::placeholder{color:#282828;font-weight:400}
.field:focus-within .field-label{color:#999}
.field:focus-within .field-input{color:#f0f0f0}
.field-hint{font-size:10px;color:#333;margin-left:auto;white-space:nowrap}
.gen-btn{font-size:11px;font-family:inherit;font-weight:500;color:#444;background:none;border:1px solid #1e1e1e;padding:3px 8px;border-radius:4px;cursor:pointer;transition:all 0.15s;white-space:nowrap}
.gen-btn:hover{border-color:#3a3a3a;color:#888;background:#111}
.actions{display:flex;gap:8px}
.btn{font-family:inherit;font-size:13px;font-weight:600;padding:12px 20px;border-radius:7px;cursor:pointer;border:1px solid #1e1e1e;background:none;color:#666;transition:all 0.15s}
.btn:hover{border-color:#3a3a3a;color:#999;background:#111}
.btn-main{flex:1;background:#1f1f1f;color:#e0e0e0;border-color:#2a2a2a;font-weight:600;position:relative;overflow:hidden}
.btn-main:hover{background:#252525;border-color:#3a3a3a;color:#f5f5f5}
.btn-main:active{transform:scale(0.98)}
.btn-main:disabled{background:#141414;border-color:#141414;color:#2a2a2a;cursor:not-allowed;transform:none}
.btn-copy{background:#1a1a1a;color:#999;border-color:#222}
.btn-copy:hover{background:#202020;border-color:#3a3a3a;color:#ccc}
.datetime-row{display:flex;gap:4px;flex:1;justify-content:flex-end}
.datetime-row input{width:28px;text-align:center;padding:0;background:transparent;border:none;outline:none;color:#bbb;font-family:inherit;font-size:15px;font-weight:500}
.datetime-row input:focus{color:#f0f0f0}
.datetime-row .sep{color:#333;font-size:14px;display:flex;align-items:center}
.datetime-row select{background:transparent;border:none;outline:none;color:#bbb;font-family:inherit;font-size:13px;cursor:pointer}
.datetime-row select:focus{color:#f0f0f0}
.datetime-row select option{background:#1a1a1a;color:#bbb}
.time-scroll{display:flex;gap:4px;flex:1;justify-content:flex-end;align-items:center}
.time-scroll input{width:36px;text-align:center;padding:4px 0;background:transparent;border:1px solid #1e1e1e;border-radius:4px;outline:none;color:#bbb;font-family:inherit;font-size:15px;font-weight:500}
.time-scroll input:focus{border-color:#3a3a3a;color:#f0f0f0}
.time-scroll .time-sep{color:#333;font-size:16px;font-weight:500}
.time-scroll .time-arrows{display:flex;flex-direction:column;gap:1px}
.time-scroll .time-arrows button{display:block;width:16px;height:14px;background:transparent;border:1px solid #1e1e1e;border-radius:2px;color:#555;cursor:pointer;font-size:8px;line-height:1;padding:0;text-align:center;transition:all 0.1s}
.time-scroll .time-arrows button:hover{background:#1a1a1a;color:#aaa;border-color:#333}
.generating-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.85);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.25s ease}
.generating-overlay.show{opacity:1;pointer-events:all}
.gen-ring{width:80px;height:80px;position:relative;margin-bottom:28px}
.gen-ring-inner{position:absolute;inset:0;border:2px solid transparent;border-top-color:#555;border-right-color:#555;border-radius:50%;animation:genSpin 1.2s cubic-bezier(0.6,0.2,0.4,0.8) infinite}
.gen-ring-inner:nth-child(2){inset:10px;border-top-color:#777;border-left-color:#777;animation-duration:0.9s;animation-direction:reverse}
.gen-ring-inner:nth-child(3){inset:20px;border-bottom-color:#999;border-right-color:#999;animation-duration:0.6s}
@keyframes genSpin{to{transform:rotate(360deg)}}
.gen-text{font-size:15px;font-weight:600;color:#888;animation:genPulse 1.8s ease-in-out infinite}
@keyframes genPulse{0%,100%{opacity:0.6}50%{opacity:1}}
.gen-sub{font-size:12px;color:#444;margin-top:6px}
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.75);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s ease}
.modal-overlay.show{opacity:1;pointer-events:all}
.modal-box{background:#111;border:1px solid #222;border-radius:20px;padding:44px 40px;text-align:center;max-width:380px;width:90%;transform:translateY(20px) scale(0.95);transition:transform 0.35s cubic-bezier(0.16,1,0.3,1)}
.modal-overlay.show .modal-box{transform:translateY(0) scale(1)}
.modal-icon{font-size:52px;margin-bottom:18px}
.modal-title{font-size:20px;font-weight:700;color:#fff;margin-bottom:6px}
.modal-sub{font-size:14px;color:#777;margin-bottom:28px;line-height:1.5}
.modal-btn{font-family:inherit;font-size:14px;font-weight:600;padding:12px 36px;border-radius:8px;cursor:pointer;background:#1f1f1f;color:#e0e0e0;border:1px solid #2a2a2a;transition:all 0.15s}
.modal-btn:hover{background:#252525;border-color:#444;color:#fff}
.modal-btn:active{transform:scale(0.97)}
.toast{position:fixed;bottom:24px;right:24px;background:#141414;border:1px solid #1e1e1e;color:#888;padding:10px 20px;font-size:13px;border-radius:6px;font-weight:500;transform:translateY(60px);opacity:0;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);pointer-events:none;z-index:100}
.toast.show{transform:translateY(0);opacity:1}
.footer{height:30px;border-top:1px solid #1e1e1e;display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex-shrink:0;font-size:11px;color:#333;font-weight:500;background:#0a0a0a;position:relative;z-index:10}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px #0a0a0a inset!important;-webkit-text-fill-color:#bbb!important;caret-color:#bbb!important;transition:background-color 5000s ease-in-out 0s}
@media (max-width:768px){.sidebar{width:200px}.form-wrap{padding:0 8px}.field-row{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 0}.field-label-wrap{min-width:auto}.field-input{text-align:left;width:100%}}

/* Select styling */
select.field-input, select {
  -webkit-appearance: none;
  appearance: none;
  background: #0a0a0a;
  color: #bbb;
  cursor: pointer;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23555'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* BG preview on hover */
.bg-preview {
  position: absolute;
  width: 120px;
  height: 80px;
  border: 1px solid #333;
  border-radius: 6px;
  object-fit: cover;
  pointer-events: none;
  z-index: 50;
  display: none;
  background: #111;
}

/* BG selector */
.bg-selector { display: flex; gap: 10px; flex: 1; justify-content: flex-end; }
.bg-option { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: #666; }
.bg-option input[type="radio"] { display: none; }
.bg-option:has(input:checked) { color: #fff; }
.bg-preview { width: 24px; height: 24px; border-radius: 6px; border: 2px solid transparent; transition: all 0.15s; }
.bg-option:has(input:checked) .bg-preview { border-color: #fff; }
.bg-blue { background: linear-gradient(135deg, #1a3a5c, #0d1f33); }
.bg-red { background: linear-gradient(135deg, #5c1a1a, #330d0d); }
.bg-yellow { background: linear-gradient(135deg, #5c4a1a, #33290d); }

/* BG selector with real previews */
.bg-selector { display: flex; gap: 12px; flex: 1; justify-content: flex-end; flex-wrap: wrap; }
.bg-option { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font-size: 10px; color: #666; }
.bg-option input[type="radio"] { display: none; }
.bg-option:has(input:checked) { color: #fff; }
.bg-thumb { width: 56px; height: 40px; border-radius: 4px; border: 2px solid transparent; object-fit: cover; transition: all 0.15s; }
.bg-option:has(input:checked) .bg-thumb { border-color: #fff; }