.btn{display:inline-block;padding:14px 32px;font-size:.875rem;font-weight:500;text-align:center;border-radius:var(--border-radius-pill);cursor:pointer;transition:all .3s ease;border:none;font-family:var(--font-family)}.btn-primary{background-color:var(--primary-color);color:var(--text-dark);min-width:280px;font-weight:600}.btn-primary:hover{background-color:var(--primary-hover);opacity:1;transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow-primary)}.btn-primary:active{transform:translateY(0);box-shadow:none}.btn-outline{background-color:var(--bg-white);color:var(--text-dark);border:1px solid var(--border-color);min-width:280px}.btn-outline:hover{background-color:var(--bg-light);opacity:1}.btn-outline:active{background-color:var(--border-color)}.btn-outline-dark{background-color:var(--bg-white);color:var(--primary-text);border:2px solid var(--primary-color);min-width:280px}.btn-outline-dark:hover{background-color:var(--bg-cream);opacity:1}.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:var(--z-modal-bg);align-items:center;justify-content:center}.modal.active{display:flex}.modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--overlay-bg)}.modal-content{position:relative;background-color:var(--bg-white);padding:40px;border-radius:var(--radius-lg);max-width:500px;width:90%;max-height:90vh;overflow-y:auto;z-index:var(--z-modal);animation:modalSlideIn .3s ease;will-change:transform,opacity}@keyframes modalSlideIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.modal-close{position:absolute;top:16px;right:16px;font-size:1.75rem;background:0 0;border:none;cursor:pointer;color:var(--text-light);transition:color .2s ease;line-height:1}.modal-close:hover{color:var(--text-dark)}.modal-title{font-size:1.125rem;font-weight:700;text-align:center;margin-bottom:30px}.like-button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 16px;min-height:44px;min-width:44px;background:var(--bg-light);border:1px solid var(--border-color);border-radius:var(--radius-lg);cursor:pointer;transition:all .2s ease}.like-button:hover:not(.disabled){transform:scale(1.05);border-color:var(--like-border)}.like-button.liked{background:var(--like-liked-bg);border-color:var(--like-border)}.like-button.disabled{opacity:.6;cursor:not-allowed}.like-button.disabled:hover{transform:none;border-color:var(--border-color)}.like-button .like-icon{font-size:1.5rem}.like-button .like-count{font-size:.875rem;font-weight:600;color:var(--text-dark)}.form-group{margin-bottom:24px}.form-group label{display:block;font-size:.8125rem;font-weight:500;margin-bottom:8px}.required{color:var(--error-border)}.form-group input,.form-group textarea{width:100%;padding:12px 16px;font-size:.875rem;font-family:var(--font-family);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:border-color .2s ease,box-shadow .2s ease}.form-group input:focus:not(:focus-visible),.form-group textarea:focus:not(:focus-visible){outline:0;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-focus)}.form-group input:focus-visible,.form-group textarea:focus-visible{outline:2px solid var(--primary-text);outline-offset:2px}.form-group textarea{resize:vertical;min-height:150px}.checkbox-group{margin-top:20px}.checkbox-label{display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:.8125rem;line-height:1.5;min-height:44px;padding:4px 0}.checkbox-label input[type=checkbox]{width:20px;height:20px;min-width:20px;margin-top:2px;cursor:pointer;accent-color:var(--primary-color)}.checkbox-text{flex:1}.checkbox-text a{color:var(--primary-text);text-decoration:underline}.checkbox-text a:hover{opacity:.7}.form-note{font-size:.75rem;color:var(--text-light);text-align:center;margin-bottom:24px}.btn-submit{width:100%;padding:16px;font-size:.9375rem;font-weight:500;background-color:var(--primary-color);color:var(--text-dark);border:none;border-radius:var(--border-radius-pill);cursor:pointer;transition:all .3s ease}.btn-submit:hover{background-color:var(--primary-hover);transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow-primary)}.detail-close,.modal-close{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}.detail-overlay,.modal-overlay{cursor:pointer}.detail-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:var(--z-modal-bg);display:flex;justify-content:center;align-items:center}.detail-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--overlay-bg)}.detail-content{position:relative;background:var(--bg-white);border-radius:var(--radius-xl);padding:32px;max-width:600px;width:90%;max-height:90vh;overflow-y:auto;z-index:var(--z-modal)}.detail-close{position:absolute;top:16px;right:16px;background:0 0;border:none;font-size:28px;cursor:pointer;color:var(--text-gray);transition:color .2s}.detail-close:hover{color:var(--text-dark)}.detail-title{font-size:20px;font-weight:700;margin-bottom:12px;padding-inline-end:40px}.detail-category{display:inline-block;font-size:12px;color:var(--primary-color);background:var(--bg-cream);padding:6px 14px;border-radius:var(--radius-xl);margin-bottom:16px}.detail-description{font-size:15px;color:var(--text-dark);line-height:1.8;margin-bottom:24px}.detail-meta{display:flex;gap:20px;margin-bottom:20px;font-size:13px;color:var(--text-light)}.detail-actions{display:flex;justify-content:center}.detail-login-note{text-align:center;font-size:13px;color:var(--text-light)}.detail-login-note a{color:var(--primary-color);text-decoration:underline}.detail-modal.hidden,.register-modal.hidden{display:none}.register-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:var(--z-modal-bg);display:flex;justify-content:center;align-items:center}.register-content{position:relative;background:var(--bg-white);border-radius:var(--radius-xl);padding:32px;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;z-index:var(--z-modal)}.register-header{text-align:center;margin-bottom:16px}.register-icon{font-size:3rem;display:block;margin-bottom:12px}.register-title{font-size:20px;font-weight:700}@keyframes btnSpinner{to{transform:rotate(360deg)}}.btn-submitting,button.btn-submitting{position:relative;cursor:not-allowed;opacity:.85}.btn-submitting::before{content:'';display:inline-block;width:14px;height:14px;border:2px solid var(--spinner-border);border-top-color:var(--text-dark);border-radius:50%;animation:spin .7s linear infinite;margin-inline-end:8px;vertical-align:middle}.form-error-msg{display:none;color:var(--error-color);background:var(--error-bg);border:1px solid var(--error-border);border-radius:var(--radius-base);padding:12px 16px;margin:12px 0;font-size:.875rem;line-height:1.5;text-align:left}.form-error-msg.visible{display:flex;align-items:flex-start;gap:8px}.form-error-msg::before{content:'⚠️';flex-shrink:0;font-size:1rem}.field-error.field-error{border-color:var(--error-border)}.field-error-msg{color:var(--error-color);font-size:.8rem;margin-top:4px;line-height:1.4}.char-counter{text-align:right;font-size:.8rem;color:var(--text-light);margin-top:4px}.char-counter.near-limit{color:var(--error-color,#d32f2f);font-weight:500}.offline-banner{display:none;position:fixed;top:var(--header-height);left:0;right:0;background:var(--strength-weak);color:var(--toast-color);text-align:center;padding:8px 16px;font-size:.85rem;z-index:calc(var(--z-header) - 1);transition:transform .3s ease}.offline-banner.visible{display:block}.password-strength{margin-top:6px}.password-strength-bar{height:4px;background:var(--border-color);border-radius:var(--radius-xs);overflow:hidden}.password-strength-fill{height:100%;width:0;border-radius:var(--radius-xs);transition:width .3s ease,background-color .3s ease}.password-strength-fill.strength-weak{width:25%;background-color:var(--strength-weak)}.password-strength-fill.strength-fair{width:50%;background-color:var(--strength-fair)}.password-strength-fill.strength-good{width:75%;background-color:var(--strength-good)}.password-strength-fill.strength-strong{width:100%;background-color:var(--strength-strong)}.password-strength-label{font-size:.75rem;margin-top:2px;color:var(--text-light)}.toast-notification{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--toast-bg);color:var(--toast-color);padding:12px 24px;border-radius:var(--radius-base);z-index:var(--z-toast);font-size:.9rem;pointer-events:none;transition:transform .3s ease,opacity .3s ease;opacity:0;white-space:normal;max-width:90vw;overflow-wrap:break-word}.toast-notification.show{transform:translateX(-50%) translateY(0);opacity:1}input:invalid:not(:placeholder-shown):not(:focus),textarea:invalid:not(:placeholder-shown):not(:focus){border-color:var(--error-border)}input:valid:not(:placeholder-shown):not([type=checkbox]):not([type=hidden]),textarea:valid:not(:placeholder-shown){border-color:var(--valid-border)}