@jjlmoya/utils-alcohol 1.23.0 → 1.24.0

package/src/tool/cocktailBalancer/component.astro

@@ -394,1223 +394,4 @@ function getIngIconName(type: string): string {
     new CocktailApp();
 </script>
 
-<style>
-.balancer-app {
-    max-width: 72rem;
-    margin: 0 auto;
-    padding: 0.5rem;
-    color: #1e293b;
-}
-
-:global(.theme-dark) .balancer-app {
-    color: #f1f5f9;
-}
-
-.balancer-card {
-    background: #fff;
-    border: 1px solid #e2e8f0;
-    border-radius: 1.25rem;
-    overflow: clip;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
-}
-
-:global(.theme-dark) .balancer-card {
-    background: #0f172a;
-    border-color: #1e293b;
-}
-
-.balancer-header {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    align-items: center;
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid #e2e8f0;
-}
-
-@media (min-width: 768px) {
-    .balancer-header {
-        flex-direction: row;
-        justify-content: space-between;
-    }
-}
-
-:global(.theme-dark) .balancer-header {
-    border-color: #1e293b;
-}
-
-.balancer-title {
-    font-size: 1.25rem;
-    font-weight: 700;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin: 0;
-}
-
-.balancer-title-icon {
-    color: #6366f1;
-    font-size: 1.5rem;
-    display: flex;
-}
-
-.balancer-version {
-    font-size: 0.75rem;
-    padding: 0.25rem 0.5rem;
-    background: #e0e7ff;
-    color: #4f46e5;
-    border-radius: 9999px;
-}
-
-:global(.theme-dark) .balancer-version {
-    background: #1e1b4b;
-    color: #a5b4fc;
-}
-
-.balancer-actions {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-.btn-primary {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 1rem;
-    background: #4f46e5;
-    color: #fff;
-    border: none;
-    border-radius: 0.75rem;
-    font-weight: 700;
-    font-size: 0.875rem;
-    cursor: pointer;
-    box-shadow: 0 4px 12px rgba(99,102,241,0.3);
-    transition: background 0.2s;
-}
-
-.btn-primary:hover {
-    background: #4338ca;
-}
-
-.btn-secondary {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 1rem;
-    background: #f1f5f9;
-    color: #475569;
-    border: none;
-    border-radius: 0.75rem;
-    font-weight: 500;
-    font-size: 0.875rem;
-    cursor: pointer;
-    transition: background 0.2s;
-}
-
-:global(.theme-dark) .btn-secondary {
-    background: #1e293b;
-    color: #94a3b8;
-}
-
-.btn-secondary:hover {
-    background: #e0e7ff;
-    color: #4f46e5;
-}
-
-:global(.theme-dark) .btn-secondary:hover {
-    background: rgba(99,102,241,0.2);
-}
-
-.btn-danger {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem;
-    color: #ef4444;
-    background: none;
-    border: none;
-    border-radius: 0.75rem;
-    cursor: pointer;
-    font-weight: 700;
-    font-size: 0.875rem;
-    transition: background 0.2s;
-}
-
-.btn-danger:hover {
-    background: #fef2f2;
-}
-
-:global(.theme-dark) .btn-danger:hover {
-    background: rgba(239,68,68,0.1);
-}
-
-.btn-danger-solid {
-    background: #ef4444;
-    color: #fff;
-    border: none;
-    border-radius: 0.75rem;
-    font-weight: 700;
-    padding: 0.75rem;
-    cursor: pointer;
-    transition: background 0.2s;
-    box-shadow: 0 4px 12px rgba(239,68,68,0.3);
-}
-
-.btn-danger-solid:hover {
-    background: #dc2626;
-}
-
-.balancer-grid {
-    display: grid;
-    align-items: start;
-}
-
-@media (min-width: 1024px) {
-    .balancer-grid {
-        grid-template-columns: 7fr 5fr;
-    }
-}
-
-.recipe-column {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    padding: 1.5rem;
-}
-
-@media (min-width: 1024px) {
-    .recipe-column {
-        border-right: 1px solid #e2e8f0;
-    }
-}
-
-:global(.theme-dark) .recipe-column {
-    border-color: #1e293b;
-}
-
-.recipe-container {
-    min-height: 300px;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 4rem 1rem;
-    border: 2px dashed #e2e8f0;
-    border-radius: 1.5rem;
-    background: rgba(248,250,252,0.5);
-}
-
-:global(.theme-dark) .empty-state {
-    border-color: #334155;
-    background: rgba(30,41,59,0.5);
-}
-
-.empty-icon-wrap {
-    width: 5rem;
-    height: 5rem;
-    background: #e0e7ff;
-    color: #6366f1;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 2.5rem;
-    margin-bottom: 1rem;
-}
-
-:global(.theme-dark) .empty-icon-wrap {
-    background: rgba(99,102,241,0.2);
-}
-
-.empty-flask-icon {
-    width: 2.5rem;
-    height: 2.5rem;
-}
-
-.empty-title {
-    font-size: 1.125rem;
-    font-weight: 700;
-    color: #334155;
-    margin: 0 0 0.5rem;
-}
-
-:global(.theme-dark) .empty-title {
-    color: #e2e8f0;
-}
-
-.empty-desc {
-    color: #64748b;
-    font-size: 0.875rem;
-    margin: 0 0 1.5rem;
-    max-width: 20rem;
-    text-align: center;
-}
-
-:global(.theme-dark) .empty-desc {
-    color: #94a3b8;
-}
-
-.btn-add-first {
-    padding: 0.75rem 1.5rem;
-    font-size: 1rem;
-}
-
-.btn-add-more {
-    width: 100%;
-    padding: 1rem;
-    border: 2px dashed #cbd5e1;
-    border-radius: 1rem;
-    color: #64748b;
-    background: none;
-    cursor: pointer;
-    font-weight: 700;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    transition: all 0.2s;
-}
-
-:global(.theme-dark) .btn-add-more {
-    border-color: #334155;
-}
-
-.btn-add-more:hover {
-    border-color: #6366f1;
-    color: #6366f1;
-}
-
-.add-more-icon {
-    font-size: 1.5rem;
-}
-
-.dashboard-column {
-    display: flex;
-    flex-direction: column;
-    position: sticky;
-    top: 0;
-    background: #f8fafc;
-}
-
-:global(.theme-dark) .dashboard-column {
-    background: rgba(0,0,0,0.15);
-}
-
-.flavor-card {
-    padding: 1.5rem;
-    border-bottom: 1px solid #e2e8f0;
-    position: relative;
-    overflow: hidden;
-}
-
-:global(.theme-dark) .flavor-card {
-    border-color: #1e293b;
-}
-
-.flavor-card-accent {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background: linear-gradient(to right, #6366f1, #a855f7, #ec4899);
-}
-
-.flavor-card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 1rem;
-}
-
-.flavor-card-title {
-    font-size: 1.125rem;
-    font-weight: 700;
-    margin: 0;
-}
-
-.abv-badge {
-    padding: 0.25rem 0.75rem;
-    border-radius: 9999px;
-    background: #f1f5f9;
-    font-size: 0.75rem;
-    font-weight: 700;
-    color: #64748b;
-}
-
-:global(.theme-dark) .abv-badge {
-    background: #1e293b;
-}
-
-.radar-wrap {
-    position: relative;
-    width: 100%;
-    max-width: 280px;
-    margin: 0 auto;
-    aspect-ratio: 1;
-}
-
-.radar-svg {
-    width: 100%;
-    height: 100%;
-    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
-}
-
-.radar-bg-poly {
-    stroke: #e2e8f0;
-}
-
-:global(.theme-dark) .radar-bg-poly {
-    stroke: #334155;
-}
-
-.radar-shape {
-    fill: rgba(99,102,241,0.2);
-    stroke: #6366f1;
-    transition: all 0.7s;
-}
-
-.radar-dot {
-    fill: #4f46e5;
-    transition: all 0.7s;
-}
-
-.radar-label {
-    position: absolute;
-    font-size: 0.625rem;
-    text-transform: uppercase;
-    font-weight: 700;
-    color: #94a3b8;
-    letter-spacing: 0.05em;
-    background: #f8fafc;
-    padding: 0 2px;
-}
-
-:global(.theme-dark) .radar-label {
-    background: transparent;
-}
-
-.radar-top {
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%) translateY(-0.5rem);
-}
-
-.radar-right-top {
-    top: 35%;
-    right: 0;
-    transform: translateX(0.5rem);
-}
-
-.radar-right-bot {
-    bottom: 15%;
-    right: 0;
-    transform: translateX(0.5rem);
-}
-
-.radar-left-bot {
-    bottom: 15%;
-    left: 0;
-    transform: translateX(-0.5rem);
-}
-
-.radar-left-top {
-    top: 35%;
-    left: 0;
-    transform: translateX(-1rem);
-}
-
-.stats-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid #e2e8f0;
-    gap: 0.75rem;
-}
-
-:global(.theme-dark) .stats-grid {
-    border-color: #1e293b;
-}
-
-.stat-card {
-    padding: 0.75rem;
-    border-radius: 0.75rem;
-    border: 1px solid #e2e8f0;
-    text-align: center;
-}
-
-:global(.theme-dark) .stat-card {
-    border-color: #1e293b;
-}
-
-.stat-card-label {
-    font-size: 0.75rem;
-    color: #94a3b8;
-    text-transform: uppercase;
-    font-weight: 700;
-    margin-bottom: 0.25rem;
-}
-
-.stat-card-value {
-    font-size: 1.25rem;
-    font-weight: 900;
-    color: #334155;
-}
-
-:global(.theme-dark) .stat-card-value {
-    color: #e2e8f0;
-}
-
-.stat-value-amber {
-    color: #f59e0b;
-}
-
-.stat-card-unit {
-    font-size: 0.75rem;
-    color: #94a3b8;
-    font-weight: 400;
-    margin-left: 0.25rem;
-}
-
-.stat-card-color {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.color-swatch {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
-    border: 2px solid #f1f5f9;
-    overflow: hidden;
-    margin-top: 0.5rem;
-}
-
-:global(.theme-dark) .color-swatch {
-    border-color: #334155;
-}
-
-.color-swatch-inner {
-    width: 100%;
-    height: 100%;
-    background: transparent;
-    transition: background-color 0.5s;
-}
-
-.balance-card {
-    padding: 1.25rem 1.5rem;
-    border-bottom: 1px solid #e2e8f0;
-}
-
-:global(.theme-dark) .balance-card {
-    border-color: #1e293b;
-}
-
-.balance-card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 1.5rem;
-}
-
-.balance-card-title {
-    font-size: 0.875rem;
-    font-weight: 700;
-    color: #64748b;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    margin: 0;
-}
-
-.balance-verdict {
-    font-size: 1rem;
-    font-weight: 900;
-    color: #cbd5e1;
-}
-
-.balance-track {
-    position: relative;
-    height: 1rem;
-    background: #f1f5f9;
-    border-radius: 9999px;
-    margin: 0 0.5rem 2rem;
-}
-
-:global(.theme-dark) .balance-track {
-    background: #1e293b;
-}
-
-.balance-zone {
-    position: absolute;
-    top: 0;
-    height: 100%;
-    width: 30%;
-}
-
-.balance-zone-left {
-    left: 0;
-    background: linear-gradient(to right, rgba(132,204,22,0.2), rgba(132,204,22,0.05));
-    border-radius: 9999px 0 0 9999px;
-}
-
-.balance-zone-right {
-    right: 0;
-    background: linear-gradient(to left, rgba(245,158,11,0.2), rgba(245,158,11,0.05));
-    border-radius: 0 9999px 9999px 0;
-}
-
-.balance-center-line {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    height: 100%;
-    width: 4px;
-    background: rgba(203,213,225,0.5);
-    transform: translateX(-50%);
-}
-
-.balance-needle {
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 1.5rem;
-    height: 1.5rem;
-    background: #fff;
-    border: 4px solid #0f172a;
-    border-radius: 50%;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-    transition: left 0.5s;
-    z-index: 1;
-}
-
-:global(.theme-dark) .balance-needle {
-    background: #334155;
-    border-color: #fff;
-}
-
-.balance-labels {
-    display: flex;
-    justify-content: space-between;
-    font-size: 0.625rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    padding: 0 0.25rem;
-}
-
-.balance-lbl-acid {
-    color: #65a30d;
-}
-
-.balance-lbl-mid {
-    color: #cbd5e1;
-}
-
-.balance-lbl-sweet {
-    color: #d97706;
-}
 
-.fix-box {
-    background: #eef2ff;
-    padding: 1.25rem 1.5rem;
-    display: flex;
-    gap: 1rem;
-    border-top: 1px solid #e0e7ff;
-}
-
-:global(.theme-dark) .fix-box {
-    background: rgba(99,102,241,0.08);
-    border-color: rgba(99,102,241,0.2);
-}
-
-.fix-icon-wrap {
-    width: 2.5rem;
-    height: 2.5rem;
-    border-radius: 50%;
-    background: #e0e7ff;
-    color: #4f46e5;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.25rem;
-}
-
-:global(.theme-dark) .fix-icon-wrap {
-    background: rgba(99,102,241,0.2);
-    color: #818cf8;
-}
-
-.fix-icon {
-    width: 1.5rem;
-    height: 1.5rem;
-}
-
-.fix-title {
-    font-weight: 700;
-    color: #1e1b4b;
-    margin: 0 0 0.25rem;
-    font-size: 0.875rem;
-}
-
-:global(.theme-dark) .fix-title {
-    color: #c7d2fe;
-}
-
-.fix-text {
-    font-size: 0.875rem;
-    color: rgba(30,27,75,0.8);
-    line-height: 1.6;
-    margin: 0;
-}
-
-:global(.theme-dark) .fix-text {
-    color: #a5b4fc;
-}
-
-.modal-dialog {
-    margin: auto;
-    border: none;
-    background: transparent;
-    padding: 0;
-    width: 100%;
-    max-width: 42rem;
-    border-radius: 1.5rem;
-    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
-}
-
-.modal-dialog::backdrop {
-    background: rgba(15,23,42,0.4);
-    backdrop-filter: blur(4px);
-}
-
-.modal-dialog-wide {
-    max-width: 56rem;
-}
-
-.modal-dialog-sm {
-    max-width: 24rem;
-}
-
-.modal-body {
-    background: #fff;
-    border: 1px solid #e2e8f0;
-    border-radius: 1.5rem;
-    overflow: hidden;
-    max-height: 85vh;
-    display: flex;
-    flex-direction: column;
-}
-
-:global(.theme-dark) .modal-body {
-    background: #0f172a;
-    border-color: #1e293b;
-}
-
-.modal-header {
-    padding: 1.5rem;
-    border-bottom: 1px solid #f1f5f9;
-    background: rgba(248,250,252,0.8);
-    backdrop-filter: blur(4px);
-    position: sticky;
-    top: 0;
-    z-index: 1;
-}
-
-:global(.theme-dark) .modal-header {
-    background: rgba(15,23,42,0.8);
-    border-color: #1e293b;
-}
-
-.modal-header-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1rem;
-}
-
-.modal-header-simple {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.modal-title {
-    font-size: 1.25rem;
-    font-weight: 700;
-    margin: 0;
-}
-
-.modal-title-with-icon {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.modal-title-icon {
-    color: #6366f1;
-    width: 1.5rem;
-    height: 1.5rem;
-}
-
-.modal-close-btn {
-    padding: 0.5rem;
-    background: none;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    color: #64748b;
-    display: flex;
-    transition: background 0.2s;
-}
-
-.modal-close-btn:hover {
-    background: #f1f5f9;
-}
-
-:global(.theme-dark) .modal-close-btn:hover {
-    background: #1e293b;
-}
-
-.modal-search-wrap {
-    position: relative;
-}
-
-.modal-search-icon {
-    position: absolute;
-    left: 0.75rem;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #94a3b8;
-    width: 1.25rem;
-    height: 1.25rem;
-}
-
-.modal-search-input {
-    width: 100%;
-    padding: 0.75rem 1rem 0.75rem 2.5rem;
-    background: #fff;
-    border: 2px solid #e2e8f0;
-    border-radius: 0.75rem;
-    outline: none;
-    transition: border-color 0.2s;
-    box-sizing: border-box;
-}
-
-:global(.theme-dark) .modal-search-input {
-    background: #1e293b;
-    border-color: #334155;
-    color: #f1f5f9;
-}
-
-.modal-search-input:focus {
-    border-color: #6366f1;
-}
-
-.modal-scroll {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1rem;
-}
-
-.modal-scroll-bg {
-    background: #f8fafc;
-}
-
-:global(.theme-dark) .modal-scroll-bg {
-    background: rgba(0,0,0,0.1);
-}
-
-.ing-grid {
-    display: grid;
-    gap: 0.75rem;
-}
-
-@media (min-width: 640px) {
-    .ing-grid {
-        grid-template-columns: 1fr 1fr;
-    }
-}
-
-.ing-select-btn {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.75rem;
-    background: #f8fafc;
-    border: 1px solid transparent;
-    border-radius: 0.75rem;
-    cursor: pointer;
-    text-align: left;
-    transition: all 0.15s;
-}
-
-:global(.theme-dark) .ing-select-btn {
-    background: rgba(30,41,59,0.5);
-}
-
-.ing-select-btn:hover {
-    background: #eef2ff;
-    border-color: #c7d2fe;
-}
-
-:global(.theme-dark) .ing-select-btn:hover {
-    background: rgba(99,102,241,0.1);
-    border-color: rgba(99,102,241,0.4);
-}
-
-.ing-icon-wrap {
-    width: 2.5rem;
-    height: 2.5rem;
-    border-radius: 0.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.25rem;
-    flex-shrink: 0;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-}
-
-.ing-icon-spirit {
-    background: #e0e7ff;
-    color: #4f46e5;
-}
-
-.ing-icon-citrus {
-    background: #ecfccb;
-    color: #65a30d;
-}
-
-.ing-icon-syrup {
-    background: #fef3c7;
-    color: #d97706;
-}
-
-.ing-icon-other {
-    background: #f1f5f9;
-    color: #475569;
-}
-
-.ing-info {
-    display: flex;
-    flex-direction: column;
-}
-
-.ing-name {
-    font-weight: 700;
-    color: #334155;
-    font-size: 0.875rem;
-}
-
-:global(.theme-dark) .ing-name {
-    color: #e2e8f0;
-}
-
-.ing-select-btn:hover .ing-name {
-    color: #4f46e5;
-}
-
-:global(.theme-dark) .ing-select-btn:hover .ing-name {
-    color: #818cf8;
-}
-
-.ing-meta {
-    font-size: 0.625rem;
-    color: #94a3b8;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-top: 0.125rem;
-}
-
-.presets-grid {
-    display: grid;
-    gap: 1rem;
-    margin-bottom: 2rem;
-}
-
-@media (min-width: 768px) {
-    .presets-grid {
-        grid-template-columns: 1fr 1fr;
-    }
-}
-
-@media (min-width: 1024px) {
-    .presets-grid {
-        grid-template-columns: repeat(3, 1fr);
-    }
-}
-
-.preset-load-btn {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    padding: 1rem;
-    background: #fff;
-    border: 1px solid #e2e8f0;
-    border-radius: 0.75rem;
-    text-align: left;
-    cursor: pointer;
-    transition: all 0.15s;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-}
-
-:global(.theme-dark) .preset-load-btn {
-    background: #1e293b;
-    border-color: #334155;
-}
-
-.preset-load-btn:hover {
-    border-color: #6366f1;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-}
-
-.preset-icon-row {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    color: #6366f1;
-    margin-bottom: 0.25rem;
-}
-
-.preset-icon {
-    width: 1.25rem;
-    height: 1.25rem;
-}
-
-.preset-name {
-    font-weight: 700;
-    color: #0f172a;
-    font-size: 0.875rem;
-}
-
-:global(.theme-dark) .preset-name {
-    color: #fff;
-}
-
-.preset-desc {
-    font-size: 0.75rem;
-    color: #64748b;
-    line-height: 1.4;
-    margin: 0;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
-
-.section-heading {
-    font-size: 0.75rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    color: #94a3b8;
-    letter-spacing: 0.1em;
-    margin: 0 0 1rem;
-}
-
-.saved-section {
-    margin-bottom: 2rem;
-}
-
-.confirm-body {
-    background: #fff;
-    border: 1px solid #e2e8f0;
-    border-radius: 1.5rem;
-    padding: 1.5rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
-    text-align: center;
-}
-
-:global(.theme-dark) .confirm-body {
-    background: #0f172a;
-    border-color: #1e293b;
-}
-
-.confirm-icon-wrap {
-    width: 4rem;
-    height: 4rem;
-    border-radius: 50%;
-    background: #fef2f2;
-    color: #ef4444;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.875rem;
-    margin-bottom: 0.5rem;
-}
-
-:global(.theme-dark) .confirm-icon-wrap {
-    background: rgba(239,68,68,0.2);
-}
-
-.confirm-icon {
-    width: 2.5rem;
-    height: 2.5rem;
-}
-
-.confirm-title {
-    font-size: 1.25rem;
-    font-weight: 700;
-    margin: 0 0 0.5rem;
-}
-
-.confirm-text {
-    color: #64748b;
-    font-size: 0.875rem;
-    margin: 0;
-}
-
-:global(.theme-dark) .confirm-text {
-    color: #94a3b8;
-}
-
-.confirm-actions {
-    display: flex;
-    gap: 0.75rem;
-    width: 100%;
-    margin-top: 0.5rem;
-}
-
-.btn-confirm {
-    flex: 1;
-    padding: 0.75rem;
-}
-
-:global(.recipe-row) {
-    background: #fff;
-    border-radius: 1rem;
-    padding: 1rem;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-    border: 1px solid #f1f5f9;
-}
-
-:global(.theme-dark .recipe-row) {
-    background: #0f172a;
-    border-color: #1e293b;
-}
-
-:global(.recipe-row-top) {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 0.75rem;
-}
-
-:global(.recipe-row-info) {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-:global(.recipe-row-name) {
-    font-weight: 700;
-    color: #334155;
-}
-
-:global(.theme-dark .recipe-row-name) {
-    color: #e2e8f0;
-}
-
-:global(.recipe-row-type) {
-    font-size: 0.625rem;
-    background: #f1f5f9;
-    padding: 0.125rem 0.5rem;
-    border-radius: 0.25rem;
-    color: #64748b;
-    font-weight: 700;
-    text-transform: uppercase;
-}
-
-:global(.theme-dark .recipe-row-type) {
-    background: #1e293b;
-}
-
-:global(.recipe-row-del) {
-    opacity: 0;
-    transition: opacity 0.2s;
-}
-
-:global(.recipe-row:hover .recipe-row-del) {
-    opacity: 1;
-}
-
-:global(.recipe-row-controls) {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-}
-
-:global(.recipe-range) {
-    flex: 1;
-    height: 0.5rem;
-    border-radius: 0.5rem;
-    appearance: none;
-    cursor: pointer;
-    accent-color: #4f46e5;
-    background: #e2e8f0;
-}
-
-:global(.theme-dark .recipe-range) {
-    background: #334155;
-}
-
-:global(.recipe-number-wrap) {
-    position: relative;
-    width: 5rem;
-}
-
-:global(.recipe-number) {
-    width: 100%;
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
-    border-radius: 0.5rem;
-    padding: 0.25rem 0.5rem;
-    text-align: right;
-    font-weight: 700;
-    color: #334155;
-    font-size: 0.875rem;
-    box-sizing: border-box;
-}
-
-:global(.theme-dark .recipe-number) {
-    background: #1e293b;
-    border-color: #334155;
-    color: #e2e8f0;
-}
-
-.text-indigo-400 {
-    color: #818cf8;
-}
-
-.text-amber-400 {
-    color: #fbbf24;
-}
-
-.text-red-500 {
-    color: #ef4444;
-}
-
-.text-lime-400 {
-    color: #a3e635;
-}
-
-.text-emerald-400 {
-    color: #34d399;
-}
-
-.text-yellow-400 {
-    color: #facc15;
-}
-</style>