.cuisine-new-container,
.cuisine-edit-container {max-width: 500px;margin: 0 auto;padding: 20px}
.cuisine-form-header {text-align: center;margin-bottom: 24px}
.cuisine-form-header h1 {font-size: 1.5rem;font-weight: 700;color: #1c1e21;margin: 0 0 8px 0;display: flex;align-items: center;justify-content: center;gap: 8px}
.cuisine-form-header h1::before {content: "";display: inline-block;width: 28px;height: 28px;background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);border-radius: 50%;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2'%3E%3C/path%3E%3Cpath d='M7 2v20'%3E%3C/path%3E%3Cpath d='M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3'%3E%3C/path%3E%3Cpath d='M18 22V15'%3E%3C/path%3E%3C/svg%3E");background-repeat: no-repeat;background-position: center;background-size: 16px}
.cuisine-form-description {color: #606770;font-size: 0.9rem;margin: 0;line-height: 1.5}
.cuisine-form {background: #fff;border-radius: 12px;padding: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);display: flex;flex-direction: column;gap: 20px}
.cuisine-photo-section {margin-bottom: 0}
.cuisine-photo-preview {width: 100%;aspect-ratio: 4 / 3;max-height: 280px;background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);border: 2px dashed #dee2e6;border-radius: 12px;display: flex;align-items: center;justify-content: center;cursor: pointer;overflow: hidden;transition: border-color 0.2s, background 0.2s}
.cuisine-photo-preview:hover {border-color: #1877f2;background: linear-gradient(135deg, #f0f7ff 0%, #e3f2fd 100%)}
.cuisine-photo-img {width: 100%;height: 100%;object-fit: cover}
.cuisine-photo-placeholder {display: flex;flex-direction: column;align-items: center;gap: 12px;color: #868e96;padding: 20px}
.cuisine-photo-placeholder svg {color: #adb5bd;width: 48px;height: 48px}
.cuisine-photo-placeholder span {font-size: 0.9rem;font-weight: 500}
.cuisine-form .form-field {display: flex;flex-direction: column;gap: 6px}
.cuisine-form .form-field label {font-size: 0.85rem;font-weight: 600;color: #495057}
.cuisine-form .form-field input[type="text"],
.cuisine-form .form-field textarea {width: 100%;padding: 12px 14px;border: 1px solid #dee2e6;border-radius: 8px;font-size: 1rem;font-family: inherit;transition: border-color 0.2s, box-shadow 0.2s;box-sizing: border-box;background: #fff}
.cuisine-form .form-field input[type="text"]:focus,
.cuisine-form .form-field textarea:focus {outline: none;border-color: #1877f2;box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.1)}
.cuisine-form .form-field input[type="text"]::placeholder,
.cuisine-form .form-field textarea::placeholder {color: #adb5bd}
.cuisine-form .form-field textarea {resize: vertical;min-height: 120px}
.cuisine-ingredients-section {background: #f8f9fa;border-radius: 10px;padding: 16px;border: 1px solid #e9ecef}
.ingredients-section-label {font-size: 0.9rem;font-weight: 600;color: #495057;margin: 0 0 4px 0;display: block}
.ingredients-hint {font-size: 0.8rem;color: #868e96;margin: 0 0 16px 0}
.cuisine-ingredients-list {display: flex;flex-direction: column;gap: 10px;margin-bottom: 12px}
.cuisine-ingredient-row {display: flex;gap: 8px;align-items: center;background: #fff;padding: 8px;border-radius: 8px;border: 1px solid #e9ecef}
.ingredient-name-field {flex: 2;min-width: 0}
.ingredient-amount-field {flex: 1;min-width: 80px}
.cuisine-ingredient-row input[type="text"] {width: 100%;padding: 10px 12px;border: 1px solid #dee2e6;border-radius: 6px;font-size: 0.9rem;font-family: inherit;transition: border-color 0.2s, box-shadow 0.2s;box-sizing: border-box;background: #fff}
.cuisine-ingredient-row input[type="text"]:focus {outline: none;border-color: #1877f2;box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.1)}
.cuisine-ingredient-row input[type="text"]::placeholder {color: #adb5bd;font-size: 0.85rem}
.remove-ingredient-button {flex-shrink: 0;width: 36px;height: 36px;border: none;background: #f8f9fa;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;color: #868e96;transition: color 0.2s, background 0.2s}
.remove-ingredient-button:hover {color: #dc3545;background: #fee2e2}
.remove-ingredient-button svg {width: 18px;height: 18px}
.add-ingredient-button {display: flex;align-items: center;justify-content: center;gap: 6px;width: 100%;padding: 12px;border: 2px dashed #dee2e6;border-radius: 8px;background: #fff;color: #606770;font-size: 0.9rem;font-weight: 500;cursor: pointer;transition: border-color 0.2s, color 0.2s, background 0.2s}
.add-ingredient-button:hover {border-color: #1877f2;color: #1877f2;background: #f0f7ff}
.cuisine-form .form-actions {margin-top: 4px}
.cuisine-form .btn.btn-primary {width: 100%;padding: 14px 20px;background: linear-gradient(135deg, #1877f2 0%, #166fe5 100%);border: none;border-radius: 8px;color: #fff;font-size: 1rem;font-weight: 600;cursor: pointer;transition: background 0.2s, transform 0.1s, box-shadow 0.2s}
.cuisine-form .btn.btn-primary:hover {background: linear-gradient(135deg, #166fe5 0%, #1565d8 100%);box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3)}
.cuisine-form .btn.btn-primary:active {transform: scale(0.98)}
.cuisine-new-container .back-link,
.cuisine-edit-container .back-link {display: flex;align-items: center;justify-content: center;gap: 6px;margin-top: 16px;padding: 12px;color: #606770;text-decoration: none;font-size: 0.9rem;border-radius: 8px;transition: background 0.2s, color 0.2s}
.cuisine-new-container .back-link:hover,
.cuisine-edit-container .back-link:hover {background: #f0f2f5;color: #1c1e21}
@media (max-width: 768px) {.cuisine-new-container,
.cuisine-edit-container {padding: 16px}
.cuisine-form {padding: 16px}
.cuisine-photo-preview {max-height: 250px}}
@media (max-width: 480px) {.cuisine-new-container,
.cuisine-edit-container {padding: 12px}
.cuisine-form-header h1 {font-size: 1.3rem}
.cuisine-form-header h1::before {width: 24px;height: 24px;background-size: 14px}
.cuisine-form {padding: 14px;gap: 16px;border-radius: 10px}
.cuisine-photo-preview {aspect-ratio: 1 / 1;max-height: 220px;border-radius: 10px}
.cuisine-photo-placeholder svg {width: 40px;height: 40px}
.cuisine-photo-placeholder span {font-size: 0.85rem}
.cuisine-form .form-field input[type="text"],
.cuisine-form .form-field textarea {padding: 10px 12px;font-size: 16px}
.cuisine-form .form-field textarea {min-height: 100px}
.cuisine-ingredients-section {padding: 12px}
.cuisine-ingredient-row {flex-wrap: wrap;gap: 8px;padding: 10px}
.ingredient-name-field {flex: 1 1 calc(100% - 44px);order: 1}
.ingredient-amount-field {flex: 1 1 100%;order: 3;min-width: 100%}
.remove-ingredient-button {order: 2;width: 32px;height: 32px}
.cuisine-ingredient-row input[type="text"] {padding: 10px 12px;font-size: 16px}
.add-ingredient-button {padding: 10px;font-size: 0.85rem}
.cuisine-form .btn.btn-primary {padding: 12px 16px;font-size: 1rem}
.cuisine-new-container .back-link,
.cuisine-edit-container .back-link {padding: 10px;font-size: 0.85rem}}
@media (max-width: 360px) {.cuisine-new-container,
.cuisine-edit-container {padding: 10px}
.cuisine-form {padding: 12px}
.cuisine-form-header h1 {font-size: 1.2rem}
.cuisine-photo-preview {max-height: 180px}}
.cuisine-thumbnail-button {position: absolute;bottom: 12px;right: 12px;display: flex;align-items: center;gap: 6px;padding: 6px 10px 6px 6px;background: rgba(0, 0, 0, 0.7);backdrop-filter: blur(4px);border: none;border-radius: 8px;cursor: pointer;z-index: 10;transition: background 0.2s, transform 0.2s}
.cuisine-thumbnail-button:hover {background: rgba(0, 0, 0, 0.85);transform: scale(1.03)}
.cuisine-thumbnail-image {width: 36px;height: 36px;border-radius: 6px;overflow: hidden;flex-shrink: 0}
.cuisine-thumb-img {width: 100%;height: 100%;object-fit: cover}
.cuisine-thumbnail-count {position: absolute;top: -4px;left: 36px;background: #e67e22;color: #fff;font-size: 0.7rem;font-weight: 700;padding: 2px 5px;border-radius: 10px;line-height: 1}
.cuisine-thumbnail-label {display: flex;align-items: center;gap: 4px;color: #fff;font-size: 0.75rem;font-weight: 600;white-space: nowrap}
.cuisine-thumbnail-label svg {width: 12px;height: 12px;flex-shrink: 0}
.cuisine-add-button {text-decoration: none;border: 1px dashed rgba(255, 255, 255, 0.5)}
.cuisine-add-button:hover {border-color: rgba(255, 255, 255, 0.8)}
.cuisine-thumbnail-add-icon {width: 36px;height: 36px;border-radius: 6px;display: flex;align-items: center;justify-content: center;background: rgba(255, 255, 255, 0.15);color: #fff;flex-shrink: 0}
.cuisine-thumbnail-add-icon svg {width: 20px;height: 20px}
.cuisine-modal {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.9);z-index: 9999;display: flex;align-items: center;justify-content: center;opacity: 1;transition: opacity 0.3s ease}
.cuisine-modal.hidden {display: none}
.cuisine-modal.cuisine-modal-opening {animation: cuisineModalFadeIn 0.3s ease forwards}
.cuisine-modal.cuisine-modal-closing {animation: cuisineModalFadeOut 0.2s ease forwards}
@keyframes cuisineModalFadeIn {from {opacity: 0}
to {opacity: 1}}
@keyframes cuisineModalFadeOut {from {opacity: 1}
to {opacity: 0}}
.cuisine-modal-content {position: relative;width: 100%;max-width: 500px;height: 85vh;max-height: 700px;margin: 20px;background: #fff;border-radius: 16px;display: flex;flex-direction: column;overflow: hidden;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3)}
.cuisine-modal-close {position: absolute;top: 12px;right: 12px;width: 36px;height: 36px;background: rgba(0, 0, 0, 0.5);border: none;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;z-index: 10;transition: background 0.2s}
.cuisine-modal-close:hover {background: rgba(0, 0, 0, 0.7)}
.cuisine-modal-close svg {color: #fff}
.cuisine-slides-container {position: relative;flex: 1;min-height: 0;overflow: hidden}
.cuisine-slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s;display: flex;flex-direction: column;overflow: hidden}
.cuisine-slide.active {position: relative;opacity: 1;visibility: visible}
.cuisine-modal-image-wrapper {width: 100%;height: 50%;flex-shrink: 0;overflow: hidden;background: #f0f0f0}
.cuisine-modal-image {width: 100%;height: 100%;object-fit: cover}
.cuisine-modal-info {padding: 16px 20px;flex: 1;min-height: 0;overflow-y: auto;overflow-x: hidden;-webkit-overflow-scrolling: touch}
.cuisine-modal-title {font-size: 1.3rem;font-weight: 700;color: #1c1e21;margin: 0 0 16px 0;line-height: 1.4}
.cuisine-modal-description {margin-bottom: 16px;padding: 12px;background: #f8f9fa;border-radius: 8px}
.cuisine-modal-description p {font-size: 0.95rem;color: #444;line-height: 1.6;margin: 0;white-space: pre-wrap;word-break: break-word}
.cuisine-modal-ingredients {margin-bottom: 16px}
.cuisine-modal-ingredients h4 {font-size: 0.9rem;font-weight: 600;color: #1c1e21;margin: 0 0 10px 0;display: flex;align-items: center;gap: 6px}
.cuisine-modal-ingredients h4 svg {color: #e67e22}
.cuisine-modal-ingredients ul {list-style: none;margin: 0;padding: 0}
.cuisine-modal-ingredients li {display: flex;justify-content: space-between;align-items: center;padding: 8px 0;border-bottom: 1px solid #e4e6eb;font-size: 0.9rem}
.cuisine-modal-ingredients li:last-child {border-bottom: none}
.cuisine-modal-ingredients .ingredient-name {color: #1c1e21}
.cuisine-modal-ingredients .ingredient-amount {color: #65676b}
.cuisine-modal-actions {display: flex;gap: 10px;margin-top: 16px;padding-top: 16px;border-top: 1px solid #e4e6eb}
.cuisine-modal-action-button {display: inline-flex;align-items: center;gap: 6px;padding: 10px 16px;border-radius: 8px;font-size: 0.9rem;font-weight: 500;color: #606770;text-decoration: none;background: #f0f2f5;transition: background 0.2s, color 0.2s, transform 0.2s}
.cuisine-modal-action-button:hover {background: #e4e6eb;color: #1c1e21;transform: translateY(-1px)}
.cuisine-modal-delete-button:hover {background: #fee2e2;color: #dc3545}
.cuisine-modal-add-button {display: flex;align-items: center;justify-content: center;gap: 6px;margin: 12px 16px;padding: 10px 20px;background: #f0f7ff;border: 1px dashed #1877f2;border-radius: 8px;color: #1877f2;font-size: 0.85rem;font-weight: 600;text-decoration: none;transition: background 0.2s}
.cuisine-modal-add-button:hover {background: #e3f2fd}
.cuisine-nav-button {position: fixed;top: 50%;transform: translateY(-50%);width: 40px;height: 40px;background: rgba(255, 255, 255, 0.9);border: none;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;z-index: 10000;transition: background 0.2s;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15)}
.cuisine-nav-button:hover {background: #fff}
.cuisine-nav-button svg {color: #1c1e21}
.cuisine-nav-prev {left: 12px}
.cuisine-nav-next {right: 12px}
.cuisine-thumbnail-nav {flex-shrink: 0;background: #f8f9fa;border-top: 1px solid #e4e6eb;padding: 12px 16px}
.cuisine-thumbnail-nav-inner {display: flex;gap: 8px;justify-content: center;align-items: center;overflow-x: auto;padding-bottom: 4px;scrollbar-width: none;-ms-overflow-style: none}
.cuisine-thumbnail-nav-inner::-webkit-scrollbar {display: none}
.cuisine-thumbnail-nav-item {flex-shrink: 0;width: 48px;height: 48px;padding: 0;border: 2px solid #e4e6eb;border-radius: 8px;background: none;cursor: pointer;overflow: hidden;transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s}
.cuisine-thumbnail-nav-item:hover {border-color: #ccc}
.cuisine-thumbnail-nav-item.active {border-color: #e67e22;box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.2)}
.cuisine-thumbnail-nav-item img {width: 100%;height: 100%;object-fit: cover}
.cuisine-slide-counter {text-align: center;margin-top: 8px;font-size: 0.75rem;font-weight: 600;color: #65676b}
@media (max-width: 768px) {.cuisine-modal-content {margin: 10px;max-width: calc(100% - 20px);height: 90vh;max-height: none;border-radius: 12px}
.cuisine-nav-prev {left: 8px}
.cuisine-nav-next {right: 8px}
.cuisine-thumbnail-nav {padding: 10px 12px}
.cuisine-thumbnail-nav-item {width: 44px;height: 44px}
.cuisine-modal-add-button {margin: 10px 12px}}
@media (max-width: 480px) {.cuisine-thumbnail-button {bottom: 8px;right: 8px;padding: 5px 8px 5px 5px}
.cuisine-thumbnail-image {width: 32px;height: 32px}
.cuisine-thumbnail-count {left: 30px;font-size: 0.65rem}
.cuisine-thumbnail-label {font-size: 0.7rem}
.cuisine-thumbnail-label svg {width: 10px;height: 10px}
.cuisine-modal-content {margin: 10px;border-radius: 12px}
.cuisine-modal-close {top: 8px;right: 8px;width: 32px;height: 32px}
.cuisine-modal-close svg {width: 20px;height: 20px}
.cuisine-nav-button {width: 36px;height: 36px}
.cuisine-nav-button svg {width: 20px;height: 20px}
.cuisine-modal-title {font-size: 1.15rem}
.cuisine-modal-info {padding: 12px 16px}
.cuisine-modal-description {padding: 10px}
.cuisine-modal-description p {font-size: 0.9rem}
.cuisine-modal-ingredients h4 {font-size: 0.85rem}
.cuisine-modal-ingredients li {font-size: 0.85rem;padding: 6px 0}
.cuisine-modal-actions {flex-wrap: wrap}
.cuisine-modal-action-button {padding: 8px 12px;font-size: 0.85rem}
.cuisine-modal-add-button {margin: 8px 10px;padding: 8px 16px;font-size: 0.8rem}
.cuisine-thumbnail-nav {padding: 8px 10px}
.cuisine-thumbnail-nav-item {width: 40px;height: 40px;border-radius: 6px}
.cuisine-slide-counter {font-size: 0.7rem;margin-top: 6px}}