:root{--primary-color: #4a90e2;--error-color: #e74c3c;--success-color: #2ecc71;--border-radius: 8px;--device-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)}.content-wrapper{display:flex;width:100%}.notification-form{flex:1;background-color:#fff;padding:2rem;box-shadow:var(--device-shadow);h1{padding-bottom:1rem}}.categories{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:.25rem .5rem;padding-top:.5rem;opacity:1;transform:translateY(0);transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;height:auto}.categories.hiding{opacity:0;transform:translateY(8px);pointer-events:none}.category{width:100%;display:flex;align-items:center;justify-content:center;padding:.5rem 1rem;border-radius:100vmax;background-color:var(--category-color-000);line-height:1.15;.name{text-transform:capitalize;font-weight:500;color:var(--category-color-900)}&:hover{background-color:var(--category-color-500);color:#fff;cursor:pointer;.name,.icon{color:#fff}}}.category-radio{position:absolute;opacity:0;width:0;height:0}.category-radio:checked+.category{background-color:var(--category-color-500);color:#fff;.name,.icon{color:#fff}}.categories .icon{display:inline-flex;align-items:center;justify-content:center;border-radius:.5rem;color:var(--category-color-900);font-size:1.25rem;margin-right:.5rem;flex-shrink:0}.category-section{margin-bottom:1.5rem;position:relative;transition:margin-bottom .3s cubic-bezier(.4,0,.2,1)}.category-section.expanded{margin-bottom:2rem}.selected-category{display:none;flex-direction:column;gap:1rem;margin-top:.5rem;opacity:0;transform:translateY(-8px);transition:all .25s cubic-bezier(.4,0,.2,1);position:relative}.selected-category.showing{opacity:1;transform:translateY(0)}.selected-wrapper-row{display:flex;align-items:center;gap:1rem;margin-top:.5rem}.selected-wrapper{display:flex;align-items:center;padding:.5rem 1rem;border-radius:100vmax;background-color:var(--selected-color-500);color:#fff}.selected-icon{margin-right:.5rem}.selected-name{text-transform:capitalize}.change-button{background:none;border:none;color:var(--primary-color);padding:0;font-size:.875rem;cursor:pointer}.change-button:hover{color:#357abd;background:none}.form-group{margin-bottom:1.5rem}label{display:block;margin-bottom:.5rem;font-weight:500;color:#2c3e50}input[type=text],input[type=url],textarea{width:100%;padding:.75rem;border:2px solid #e2e8f0;border-radius:var(--border-radius);font-size:1rem;transition:border-color .2s ease}textarea{resize:vertical;min-height:80px;font-family:inherit;line-height:1.5}input[type=text]:focus,input[type=url]:focus,textarea:focus{border-color:var(--primary-color);outline:none}button[type=submit]{background-color:var(--primary-color);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:var(--border-radius);font-size:1rem;cursor:pointer;transition:all .2s ease;min-width:120px}button[type=submit] i{margin-right:.5rem}button[type=submit]:hover{background-color:#357abd}button[type=submit]:disabled{background-color:var(--gray-400);cursor:not-allowed}.status{margin-top:1rem;padding:1rem;border-radius:var(--border-radius);display:none}.status.success{background-color:#e3fcef;color:var(--success-color);display:block}.status.error{background-color:#fde8e8;color:var(--error-color);display:block}.loader{display:none}.button-container{display:flex;align-items:center;margin-bottom:5rem;button{margin-left:auto}}.preview-container{position:sticky;top:5rem;flex:1;height:fit-content;background-color:#fff;margin:2rem;padding:2rem;border-radius:var(--border-radius);box-shadow:var(--device-shadow);p{font-size:medium;margin-bottom:1rem}h2{margin-top:0;margin-bottom:.5rem;font-size:1.25em}}.browser-bar{background-color:#f1f5f9;padding:.5rem;border-radius:.5rem .5rem 0 0;display:flex;align-items:center;gap:1rem}.browser-actions{display:flex;gap:.5rem}.browser-actions span{width:12px;height:12px;border-radius:50%;background-color:#e2e8f0}.browser-address{flex:1;background-color:#fff;padding:.25rem .5rem;border-radius:.25rem;font-size:.875rem;color:#64748b}.notifications{display:flex;flex-direction:column;gap:10px;width:100%}.notification{position:relative;padding:1rem 1rem 1rem 4rem;margin-left:-10px;margin-right:-10px;cursor:pointer;border-radius:12px;transition:background-color .3s;display:flex;align-items:center;background-color:#0000;text-decoration:none;color:inherit}.notification:hover{background-color:var(--category-color-100);text-decoration:none;color:inherit}.notification-icon{color:#fff;position:absolute;top:1em;left:10px;width:2.5em;height:2.5em;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:var(--category-color-400)}.notification-content{flex:1}.notification-title{font-size:1.25em;padding-right:5em;margin:0;font-weight:700}.notification-timestamp{font-size:.875em;line-height:1.5;position:absolute;top:1em;right:1em;color:#777}.notification-cta{font-size:.875em;font-weight:600;opacity:1;transition:opacity .3s;display:inline-flex;align-items:center;color:var(--category-color-900);gap:.3em;min-height:0;.external-link-icon{width:1em;height:1em;vertical-align:middle;fill:currentColor}}.notification-cta:empty{margin-top:0;display:none}@media (max-width: 480px){.notification-title{font-size:1em}.notification-description{font-size:.875em}}@media (max-width: 1200px){.button-container{margin-bottom:0}.content-wrapper{flex-direction:column;.preview-container{position:unset;margin:unset;border-radius:unset;border-top:1px solid var(--gray-200)}}.preview-container{padding-bottom:5rem}}.topic-info{margin-top:.5rem;font-size:.875rem;color:#64748b}.form-content{transition:transform .25s cubic-bezier(.4,0,.2,1);transform:translateY(0)}.form-content.shifting{transform:translateY(8px)}.toast{position:fixed;top:1rem;right:1rem;padding:1rem;border-radius:.5rem;background:#fff;box-shadow:0 4px 12px #00000026;display:flex;flex-direction:column;min-width:300px;max-width:400px;transform:translate(120%);transition:transform .3s ease;z-index:1000}.toast.show{transform:translate(0)}.toast.success{border-left:4px solid var(--green-500, #22c55e)}.toast.error{border-left:4px solid var(--red-500, #ef4444)}.toast-content{display:flex;align-items:flex-start;gap:.75rem}.toast .success-icon,.toast .error-icon{display:none;font-size:1.25rem}.toast.success .success-icon{display:block;color:var(--green-500, #22c55e)}.toast.error .error-icon{display:block;color:var(--red-500, #ef4444)}.toast-message{flex:1;font-size:.875rem;line-height:1.4}.toast-progress{position:absolute;bottom:0;left:0;height:3px;width:100%;background:#e5e7eb;border-radius:0 0 .5rem .5rem}.toast.success .toast-progress:after,.toast.error .toast-progress:after{content:"";position:absolute;height:100%;width:100%;transform:scaleX(0);transform-origin:left;animation:progress 3s linear forwards}.toast.success .toast-progress:after{background:var(--green-500, #22c55e)}.toast.error .toast-progress:after{background:var(--red-500, #ef4444)}@keyframes progress{to{transform:scaleX(1)}}.youtube-tools,.tiktok-tools{background-color:#f8f9fa;border-radius:var(--border-radius);padding:1rem;margin-bottom:.5rem}.youtube-tools .form-group,.tiktok-tools .form-group{margin-bottom:0}.youtube-tools{border-left:4px solid var(--red-500)}.tiktok-tools{border-left:4px solid #000000}.youtube-input-wrapper,.tiktok-input-wrapper{display:flex;gap:.5rem;align-items:center}.youtube-input-wrapper input,.tiktok-input-wrapper input{flex:1}.fetch-button{background-color:var(--red-500);color:#fff;border:none;padding:.75rem 1rem;border-radius:var(--border-radius);font-size:.875rem;cursor:pointer;transition:background-color .2s ease;white-space:nowrap;min-width:120px}.fetch-button:hover{background-color:#dc2626}.fetch-button.tiktok-button{background-color:#000}.fetch-button.tiktok-button:hover{background-color:#333}.fetch-button:disabled{background-color:var(--gray-400);cursor:not-allowed}.fetch-button i{margin-right:.5rem}.notification-link{display:flex;gap:1rem;align-items:flex-start;text-decoration:none;color:inherit;padding:1rem;border-radius:.5rem;background-color:#fff;box-shadow:0 1px 3px #0000001a}.notification-content{flex:1;min-width:0}.notification-title{font-size:1rem;font-weight:600;margin:0 0 .5rem}p.notification-description{font-size:1rem;color:#4a5568;margin:0;margin-bottom:.5rem}.notification-timestamp{font-size:.75rem;color:#718096;flex-shrink:0}.notification{--category-color-000: var(--blue-000);--category-color-100: var(--blue-100);--category-color-200: var(--blue-200);--category-color-400: var(--blue-400);--category-color-900: var(--blue-900)}.image-upload-container{margin-top:.5rem}.image-preview-container{width:100%}.image-preview-container .image-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:1rem}.image-preview-container .image-preview-wrapper{position:relative;aspect-ratio:1;border-radius:.5rem;overflow:hidden;background-color:var(--gray-100)}.image-preview{width:100%;height:100%;object-fit:cover}.image-preview-wrapper .remove-image{position:absolute;top:.5rem;right:.5rem;background-color:#fff;color:var(--error-color);border:none;border-radius:50%;width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000001a;opacity:1;transform:scale(1);padding:0;margin:0;z-index:2}.remove-image:hover{background-color:var(--error-color);color:#fff;box-shadow:0 2px 4px #0003}.remove-image i{font-size:.875rem;line-height:1;display:block}.upload-button{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:2px dashed var(--gray-300);border-radius:8px;cursor:pointer;transition:all .2s ease;background-color:var(--gray-50);color:var(--gray-600);height:100%;padding:0}.upload-button:hover{border-color:var(--primary-color);background-color:var(--gray-100);color:var(--primary-color)}.upload-button i{font-size:1.5rem}.upload-button span{font-size:.875rem;text-align:center;font-weight:500}.upload-button input[type=file]{display:none}.upload-progress-container{margin-top:1rem;background-color:var(--gray-100);border-radius:.5rem;overflow:hidden;position:relative}.upload-progress-bar{height:4px;background-color:var(--primary-color);width:0;transition:width .3s ease}.upload-progress-text{padding:.5rem;font-size:.875rem;color:var(--gray-600);text-align:center}.notification-photo-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px;margin-bottom:10px;max-width:100%;&.single-photo{grid-template-columns:1fr;max-width:34rem;margin-left:0;.gallery-item{position:relative;width:100%;height:0;overflow:hidden;&.portrait-image{padding-bottom:calc(100% / var(--aspect-ratio))}&:not(.portrait-image){padding-bottom:calc(100% / var(--aspect-ratio))}img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}}}}.gallery-item{position:relative;aspect-ratio:1 / 1;overflow:hidden;border-radius:8px}.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.gallery-item:hover img{transform:scale(1.05)}.gallery-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0009;color:#fff;display:flex;justify-content:center;align-items:center;font-size:1.5em;font-weight:700;z-index:2}.gallery-item img{position:relative;z-index:1}@media (max-width: 480px){.notification-photo-gallery{grid-template-columns:repeat(2,1fr)}.content-wrapper{flex-direction:column}.notification-form{padding:1.5rem 1.5rem 8rem}.preview-container{margin:1rem;padding:1.5rem;position:static}.button-container{margin-top:3rem;margin-bottom:2rem}.button-container button{width:100%;padding:1rem 1.5rem;font-size:1rem;min-height:48px}.form-group input,.form-group textarea{padding:1rem;font-size:1rem}.form-group{margin-bottom:2rem}.category,.fetch-button{padding:1rem;font-size:1rem;min-height:48px}.change-button{padding:.5rem 1rem;font-size:1rem;min-height:32px}.upload-button{padding:1rem;font-size:1rem;min-height:48px}}