.notification-banner-generator{max-width:var(--tool-container-max-width, 1600px);margin:0 auto;padding:24px}.notification-banner-generator .generator-header{text-align:center;margin-bottom:32px}.notification-banner-generator .generator-header h1{font-size:2rem;color:var(--gray-800);margin:0 0 8px}.notification-banner-generator .generator-header p{color:var(--gray-500);margin:0;font-size:1.1rem}.notification-banner-generator .generator-layout{display:grid;grid-template-columns:var(--tool-controls-width, 420px) 1fr;gap:24px}@media (max-width: 1023px){.notification-banner-generator .generator-layout{grid-template-columns:1fr}}.notification-banner-generator .controls-panel{background:var(--white);border-radius:12px;box-shadow:0 1px 3px #0000001a;padding:20px;height:fit-content;max-height:none;overflow-y:auto}.notification-banner-generator .control-section{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--gray-200)}.notification-banner-generator .control-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.notification-banner-generator .control-section h3{font-size:1.15rem;font-weight:700;color:var(--gray-900);margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid var(--primary);letter-spacing:.03em}.notification-banner-generator .preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.notification-banner-generator .preset-btn{padding:10px 12px;border:none;border-radius:8px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s;text-align:center}.notification-banner-generator .preset-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.notification-banner-generator .control-row{margin-bottom:14px;display:flex;flex-direction:column;gap:6px}.notification-banner-generator .control-row:last-child{margin-bottom:0}.notification-banner-generator .control-row label{font-size:.85rem;font-weight:500;color:var(--gray-600)}.notification-banner-generator .control-row input[type=text],.notification-banner-generator .control-row input[type=number],.notification-banner-generator .control-row select,.notification-banner-generator .control-row textarea{padding:10px 12px;border:1px solid var(--gray-300);border-radius:8px;font-size:.875rem;transition:border-color .2s,box-shadow .2s}.notification-banner-generator .control-row input[type=text]:focus,.notification-banner-generator .control-row input[type=number]:focus,.notification-banner-generator .control-row select:focus,.notification-banner-generator .control-row textarea:focus{outline:none;border-color:var(--info-color);box-shadow:0 0 0 3px #3b82f61a}.notification-banner-generator .control-row textarea{resize:vertical;min-height:60px}.notification-banner-generator .control-row input[type=range]{flex:1;height:6px;-webkit-appearance:none;background:var(--gray-200);border-radius:3px;cursor:pointer}.notification-banner-generator .control-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--info-color);border-radius:50%;cursor:pointer;transition:background .2s}.notification-banner-generator .control-row input[type=range]::-webkit-slider-thumb:hover{background:#2563eb}.notification-banner-generator .range-value{font-size:.85rem;font-weight:600;color:var(--info-color);min-width:36px;text-align:right}.notification-banner-generator .control-row.checkbox-row{flex-direction:row;align-items:center}.notification-banner-generator .control-row.checkbox-row label{display:flex;align-items:center;gap:8px;cursor:pointer}.notification-banner-generator .control-row.checkbox-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--info-color);cursor:pointer}.notification-banner-generator .time-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.notification-banner-generator .time-input{display:flex;flex-direction:column;gap:4px}.notification-banner-generator .time-input label{font-size:.75rem;color:var(--gray-500);text-align:center}.notification-banner-generator .time-input input{padding:8px;border:1px solid var(--gray-300);border-radius:6px;font-size:1rem;text-align:center;font-weight:600}.notification-banner-generator .color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}.notification-banner-generator .color-grid:last-child{margin-bottom:0}.notification-banner-generator .color-item{display:flex;flex-direction:column;gap:4px}.notification-banner-generator .color-item label{font-size:.75rem;color:var(--gray-500);text-align:center}.notification-banner-generator .color-item input[type=color]{width:100%;height:36px;border:1px solid var(--gray-300);border-radius:6px;cursor:pointer;padding:2px}.notification-banner-generator .preview-panel{display:flex;flex-direction:column;gap:24px}.notification-banner-generator .preview-panel h3{font-size:1rem;font-weight:600;color:var(--gray-700);margin:0 0 16px}.notification-banner-generator .preview-container{background:#f9fafb;border:2px solid #d1d5db;border-radius:12px;box-shadow:0 1px 3px #0000001a;overflow:hidden;position:relative}.notification-banner-generator .preview-banner{display:flex;align-items:center;position:relative;z-index:10}.notification-banner-generator .preview-banner.bottom{position:absolute;bottom:0;left:0;right:0}.notification-banner-generator .preview-banner-content{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%}.notification-banner-generator .preview-banner-icon{flex-shrink:0;width:20px;height:20px}.notification-banner-generator .preview-banner-icon svg{width:100%;height:100%;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.notification-banner-generator .preview-banner-message{margin:0}.notification-banner-generator .preview-banner-link{font-weight:600;transition:opacity .2s;white-space:nowrap}.notification-banner-generator .preview-banner-link:hover{opacity:.8}.notification-banner-generator .preview-banner-countdown{display:flex;align-items:center;gap:8px;margin-left:12px}.notification-banner-generator .preview-countdown-timer{display:flex;gap:4px}.notification-banner-generator .preview-countdown-unit{padding:4px 8px;background:#f9fafb;border:2px solid #d1d5db;border-radius:4px;font-weight:700;min-width:32px;text-align:center;box-shadow:0 1px 3px #0000001a}.notification-banner-generator .preview-banner-close{position:absolute;right:16px;top:50%;transform:translateY(-50%);background:#f9fafb;border:2px solid #d1d5db;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;opacity:.8;transition:opacity .2s;box-shadow:0 1px 3px #0000001a}.notification-banner-generator .preview-banner-close:hover{opacity:1}.notification-banner-generator .preview-banner-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}.notification-banner-generator .preview-page{padding:20px;min-height:250px;background:#f9fafb;box-shadow:0 1px 3px #0000001a}.notification-banner-generator .preview-page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.notification-banner-generator .preview-logo{width:80px;height:28px;background:#f9fafb;border:2px solid #d1d5db;border-radius:6px}.notification-banner-generator .preview-nav{display:flex;gap:12px}.notification-banner-generator .preview-nav span{width:60px;height:12px;background:var(--gray-300);border-radius:4px}.notification-banner-generator .preview-page-content{display:flex;flex-direction:column;gap:16px}.notification-banner-generator .preview-hero{height:100px;background:#f9fafb;border:2px solid #d1d5db;border-radius:8px}.notification-banner-generator .preview-text-lines{display:flex;flex-direction:column;gap:8px}.notification-banner-generator .preview-text-lines span{height:12px;background:var(--gray-200);border-radius:4px}.notification-banner-generator .preview-text-lines span:nth-child(1){width:100%}.notification-banner-generator .preview-text-lines span:nth-child(2){width:90%}.notification-banner-generator .preview-text-lines span:nth-child(3){width:75%}.notification-banner-generator .output-section{background:var(--white);border-radius:12px;box-shadow:0 1px 3px #0000001a;padding:20px}.notification-banner-generator .output-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.notification-banner-generator .output-tab{padding:10px 16px;background:var(--gray-100);border:none;border-radius:8px;font-size:.85rem;font-weight:500;color:var(--gray-700);cursor:pointer;transition:all .2s}.notification-banner-generator .output-tab:hover{background:var(--gray-200)}.notification-banner-generator .output-tab.download-btn{background:var(--info-color);color:var(--white)}.notification-banner-generator .output-tab.download-btn:hover{background:#2563eb}.notification-banner-generator .code-output{background:var(--gray-800);color:var(--gray-200);padding:16px;border-radius:8px;overflow-x:auto;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.8rem;line-height:1.6;max-height:400px;margin:0}.notification-banner-generator .code-output code{white-space:pre}.notification-banner-generator .tips-section{background:#fefce8;border:1px solid #fef08a;border-radius:12px;padding:20px}.notification-banner-generator .tips-section h3{color:#854d0e;margin:0 0 12px;font-size:1rem}.notification-banner-generator .tips-section ul{margin:0;padding-left:20px;color:#713f12}.notification-banner-generator .tips-section li{margin-bottom:8px;line-height:1.6}.notification-banner-generator .tips-section li:last-child{margin-bottom:0}.notification-banner-generator .tips-section strong{color:#854d0e}.notification-banner-generator .controls-panel::-webkit-scrollbar{width:6px}.notification-banner-generator .controls-panel::-webkit-scrollbar-track{background:transparent}.notification-banner-generator .controls-panel::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:3px}.notification-banner-generator .controls-panel::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}.control-panel{background-color:#1f2937f2!important;border:2px solid var(--gray-400)!important;border-radius:6px}[data-theme=dark] .control-section{background-color:#1f2937e6!important;border-color:var(--gray-400)!important;border-width:2px}[data-theme=dark] .control-group input,[data-theme=dark] .control-group select,[data-theme=dark] .control-group textarea{background-color:#0f172acc!important;border:2px solid var(--gray-500)!important;color:var(--text-primary)}[data-theme=dark] .control-group label{display:block;color:var(--gray-900);font-size:1rem;margin-bottom:.5rem;font-weight:600;line-height:1.5;letter-spacing:.3px}@media (max-width: 768px){.notification-banner-generator{padding:16px}.notification-banner-generator .generator-header h1{font-size:1.5rem}.notification-banner-generator .controls-panel{max-height:none}.notification-banner-generator .preset-grid{grid-template-columns:1fr}.notification-banner-generator .color-grid{grid-template-columns:repeat(2,1fr)}.notification-banner-generator .output-tabs{flex-direction:column}.notification-banner-generator .output-tab{width:100%;text-align:center}}