:root{--color-background: #0f1117;--color-surface: #1a1d27;--color-surface-hover: #222632;--color-text: #e4e6ed;--color-text-secondary: #9ca0ad;--color-text-muted: #6b7080;--color-accent: #6c8cff;--color-accent-hover: #8aa4ff;--color-error: #f87171;--color-success: #4ade80;--color-info: #60a5fa;--color-border: #2a2e3a;--color-border-focus: #6c8cff;--radius: 8px;--radius-sm: 4px;--transition: .15s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:1rem;line-height:1.6;color:var(--color-text);background-color:var(--color-background);min-height:100vh}h1,h2,h3,h4,h5,h6{line-height:1.3;color:var(--color-text)}a{color:var(--color-accent);text-decoration:none}a:hover{color:var(--color-accent-hover)}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}input,select,textarea{font-family:inherit;font-size:inherit;color:var(--color-text);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:.5rem .75rem;outline:none;transition:border-color var(--transition)}input:focus,select:focus,textarea:focus{border-color:var(--color-border-focus)}#root{min-height:100vh}.notification-container{position:fixed;top:1rem;right:1rem;z-index:1000;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}.notification-toast{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:var(--radius);background-color:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);min-width:280px;max-width:420px;pointer-events:auto;box-shadow:0 4px 12px #0000004d}.notification-toast--success{border-left:4px solid var(--color-success)}.notification-toast--error{border-left:4px solid var(--color-error)}.notification-toast--info{border-left:4px solid var(--color-info)}.notification-message{flex:1;font-size:.875rem;line-height:1.4}.notification-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:var(--radius-sm);color:var(--color-text-secondary);font-size:1rem;line-height:1;transition:color var(--transition),background-color var(--transition);cursor:pointer}.notification-close:hover{color:var(--color-text);background-color:var(--color-surface-hover)}.access-code-form{display:flex;flex-direction:column;gap:1rem;width:100%}.access-code-form__input-wrapper{position:relative;display:flex;align-items:center;width:100%}.access-code-form__input{width:100%;padding:.75rem 5rem .75rem 1rem;font-size:1rem;color:var(--color-text);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);outline:none;transition:border-color var(--transition)}.access-code-form__input:focus{border-color:var(--color-border-focus)}.access-code-form__input::placeholder{color:var(--color-text-muted)}.access-code-form__icon-btn{position:absolute;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;background:none;color:var(--color-text-secondary);font-size:.875rem;cursor:pointer;border-radius:var(--radius-sm);transition:color var(--transition),background-color var(--transition)}.access-code-form__icon-btn:hover:not(:disabled){color:var(--color-text);background-color:var(--color-surface-hover)}.access-code-form__icon-btn:disabled{opacity:.4;cursor:not-allowed}.access-code-form__icon-btn:nth-of-type(1){right:2.25rem}.access-code-form__icon-btn:nth-of-type(2){right:.25rem}.access-code-form__icon-btn:only-of-type{right:.25rem}.access-code-form__button{width:100%;padding:.75rem 1rem;font-size:1rem;font-weight:600;color:#fff;background-color:var(--color-accent);border:none;border-radius:var(--radius);cursor:pointer;transition:background-color var(--transition),opacity var(--transition)}.access-code-form__button:hover:not(:disabled){background-color:var(--color-accent-hover)}.access-code-form__button:disabled{opacity:.6;cursor:not-allowed}.landing-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;background-color:var(--color-background)}.landing-page__card{display:flex;flex-direction:column;align-items:center;gap:2rem;width:100%;max-width:420px;padding:3rem 2.5rem;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius)}.landing-page__brand{display:flex;flex-direction:column;align-items:center;gap:.75rem}.landing-page__icon{color:var(--color-accent)}.landing-page__heading{font-size:2rem;font-weight:700;color:var(--color-text);text-align:center;letter-spacing:-.02em}.landing-page__form-placeholder{width:100%}.expiration-selector{display:flex;flex-direction:column;gap:.5rem}.expiration-selector__label{font-size:.875rem;font-weight:600;color:var(--color-text-secondary)}.expiration-selector__select{width:100%;padding:.75rem 2.5rem .75rem 1rem;font-size:1rem;color:var(--color-text);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);outline:none;cursor:pointer;transition:border-color var(--transition);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239ca0ad' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}.expiration-selector__select:focus{border-color:var(--color-border-focus)}.expiration-selector__select:hover{border-color:var(--color-surface-hover)}.file-tab{display:flex;flex-direction:column;align-items:center;gap:1rem}.file-tab__dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:160px;padding:2rem;border:2px dashed var(--color-border);border-radius:var(--radius);background-color:var(--color-background);cursor:pointer;transition:border-color var(--transition),background-color var(--transition)}.file-tab__dropzone:hover{border-color:var(--color-text-muted)}.file-tab__dropzone--dragover{border-color:var(--color-accent);background-color:var(--color-surface-hover)}.file-tab__input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.file-tab__prompt{color:var(--color-text-muted);font-size:.875rem;text-align:center;pointer-events:none}.file-tab__preview{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%;pointer-events:none}.file-tab__preview-image{max-width:100%;max-height:200px;border-radius:var(--radius-sm);object-fit:contain}.file-tab__file-info{display:flex;flex-direction:column;align-items:center;gap:.25rem}.file-tab__file-name{color:var(--color-text);font-size:.875rem;font-weight:600;word-break:break-all;text-align:center}.file-tab__file-type{color:var(--color-text-secondary);font-size:.75rem}.image-tab{display:flex;flex-direction:column;align-items:center;gap:1rem}.image-tab__paste-area{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:160px;padding:2rem;border:2px dashed var(--color-border);border-radius:var(--radius);background-color:var(--color-background);cursor:pointer;transition:border-color var(--transition),background-color var(--transition);outline:none}.image-tab__paste-area:hover{border-color:var(--color-text-muted)}.image-tab__paste-area:focus{border-color:var(--color-accent);background-color:var(--color-surface-hover)}.image-tab__prompt{color:var(--color-text-muted);font-size:.875rem;text-align:center}.image-tab__preview{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%}.image-tab__preview-image{max-width:100%;max-height:200px;border-radius:var(--radius-sm);object-fit:contain}.share-button{width:100%;padding:.75rem 1rem;font-size:1rem;font-weight:600;color:#fff;background-color:var(--color-accent);border:none;border-radius:var(--radius);cursor:pointer;transition:background-color var(--transition),opacity var(--transition)}.share-button:hover:not(:disabled){background-color:var(--color-accent-hover)}.share-button:disabled{opacity:.6;cursor:not-allowed}.share-url-display{display:flex;align-items:center;gap:.5rem;margin-top:.75rem}.share-url-display__input{flex:1;padding:.5rem .75rem;font-family:SF Mono,Fira Code,Cascadia Code,Consolas,monospace;font-size:.875rem;color:var(--color-text);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);outline:none;min-width:0}.share-url-display__input:focus{border-color:var(--color-border-focus)}.share-url-display__copy-button{flex-shrink:0;padding:.5rem .75rem;font-size:.875rem;font-weight:500;color:#fff;background-color:var(--color-success);border:none;border-radius:var(--radius);cursor:pointer;transition:background-color var(--transition);white-space:nowrap}.share-url-display__copy-button:hover{background-color:#22c55e}.upload-tabs{display:flex;flex-direction:column}.upload-tabs__header{display:flex;gap:0;border-bottom:1px solid var(--color-border);margin-bottom:1rem}.upload-tabs__tab{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;font-size:.875rem;font-weight:600;color:var(--color-text-muted);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color var(--transition),border-color var(--transition)}.upload-tabs__tab-icon{flex-shrink:0}.upload-tabs__tab:hover{color:var(--color-text-secondary)}.upload-tabs__tab--active{color:var(--color-accent);border-bottom-color:var(--color-accent)}.upload-tabs__panel{display:none}.upload-tabs__panel--active{display:block}.upload-page{display:flex;flex-direction:column;min-height:100vh;padding:2rem;background-color:var(--color-background)}.upload-page__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--color-border)}.upload-page__heading{font-size:1.5rem;font-weight:700;color:var(--color-text)}.upload-page__brand{display:flex;align-items:center;gap:.625rem}.upload-page__header-icon{color:var(--color-accent);flex-shrink:0}.upload-page__logout-btn{padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:var(--color-text-secondary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;transition:background-color var(--transition),color var(--transition),border-color var(--transition)}.upload-page__logout-btn:hover{color:var(--color-text);background-color:var(--color-surface-hover);border-color:var(--color-text-muted)}.upload-page__content{display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:600px;margin:0 auto}.upload-page__section{padding:1.5rem;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);transition:background-color var(--transition),border-color var(--transition)}.upload-page__section--success{background-color:#4ade801a;border-color:var(--color-success)}.upload-page__section--error{background-color:#f871711a;border-color:var(--color-error)}.upload-page__section-placeholder{color:var(--color-text-muted);font-size:.875rem;text-align:center;padding:2rem 0}.upload-page__action-buttons{display:flex;gap:.75rem}.upload-page__cancel-btn{padding:.75rem 1.5rem;font-size:1rem;font-weight:600;color:var(--color-text-secondary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;transition:background-color var(--transition),color var(--transition),border-color var(--transition);white-space:nowrap}.upload-page__cancel-btn:hover:not(:disabled){color:var(--color-text);background-color:var(--color-surface-hover);border-color:var(--color-text-muted)}.upload-page__cancel-btn:disabled{opacity:.6;cursor:not-allowed}.upload-page__result{display:flex;flex-direction:column;align-items:center;gap:.75rem}.upload-page__result-image{max-width:100%;max-height:200px;border-radius:var(--radius-sm);object-fit:contain}.upload-page__result-text{font-size:.875rem;font-weight:500;margin:0;text-align:center}.upload-page__result-text--success{color:var(--color-success)}.upload-page__result-text--error{color:var(--color-error)}
