:root {
    --bg-color: #0F0F10;
    --text-color: #FFFFFF;
    --accent-red: #DC4345;
    --accent-yellow: #FFD93D;
    --accent-green: #91CC75;
    --accent-flesh: #FEE3D4;
    --panel-bg: #1A1A1C;
    --border-color: #333;
    --font-primary: 'Inter', 'Noto Sans SC', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header & Controls */
.control-panel {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(15, 15, 16, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.brand-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-home-unified {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 8px;
    min-width: 36px;
    border-radius: 18px;
    color: #888;
    background: rgba(255,255,255,0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    text-decoration: none;
    overflow: hidden;
}

.btn-home-unified .text {
    max-width: 0;
    opacity: 0;
    display: inline-block;
    white-space: nowrap;
    margin-left: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    vertical-align: middle;
}

.btn-home-unified:hover {
    color: var(--accent-red);
    background: rgba(220, 67, 69, 0.1);
    border-color: var(--accent-red);
    padding-right: 16px;
}

.btn-home-unified:hover .text {
    max-width: 80px;
    opacity: 1;
    margin-left: 8px;
}

.brand h1 {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.brand h1 .highlight {
    background: linear-gradient(135deg, #91CC75 0%, #FFD93D 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand .subtitle {
    font-size: 0.8rem;
    color: #666;
    font-weight: 400;
    margin-left: 0.5rem;
    text-transform: uppercase;
}

.inputs {
    display: flex;
    gap: 2rem;
    flex: 1;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.input-group label {
    font-size: 0.7rem;
    color: #888;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.input-group input {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border-color);
    color: var(--text-color);
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 900;
    padding: 0.25rem 0;
    width: 200px;
    outline: none;
    transition: border-color 0.3s;
}

.input-group input:focus {
    border-color: var(--accent-red);
}

.actions {
    display: flex;
    gap: 1rem;
}

.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    font-family: var(--font-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn.secondary {
    background: var(--panel-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.btn.secondary:hover {
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
}

.btn.secondary.active {
    background: var(--accent-yellow);
    color: var(--bg-color);
    border-color: var(--accent-yellow);
}

/* Gallery Grid */
.gallery {
    padding: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 2rem;
    flex: 1;
    width: 100%; /* Ensure gallery doesn't overflow */
    max-width: 100vw; /* Prevent horizontal scroll */
}

.design-card {
    position: relative;
    background: var(--panel-bg);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.design-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-red);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* The wrapper handles the aspect ratio and cropping for the preview */
.canvas-wrapper {
    width: 100%;
    /* Default 2.35:1 aspect ratio */
    aspect-ratio: 2.35 / 1;
    background: #000;
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Inset shadow for paper thickness feel */
    box-shadow: inset 0 0 40px rgba(0,0,0,0.5); 
}

/* The canvas itself fits within the wrapper */
canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* Ensure canvas is behind the shadow if we were using a pseudo-element, 
       but since shadow is on wrapper and canvas is child, shadow might be covered by canvas background?
       Actually, inset shadow on parent is covered by opaque child.
       We need an overlay for the shadow or put the shadow on a pseudo-element of the wrapper that sits on top.
    */
}

.canvas-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.2);
    pointer-events: none;
    z-index: 10;
}

/* 1:1 Focus Mode */
/* body.preview-mode .gallery {} - Adjust grid for square items if needed, but keeping width is fine */

body.preview-mode .canvas-wrapper {
    /* Force 1:1 Aspect Ratio container */
    aspect-ratio: 1 / 1;
}

body.preview-mode canvas {
    /* Zoom the canvas so the center fits the 1:1 container */
    /* Since original is 2.35:1, we scale it up horizontally */
    /* 2.35 / 1 = 235% width. But we want the center 1000px of the 2350px image to fill the view. */
    /* Actually, object-fit: cover on the canvas with the aspect-ratio change on wrapper handles the crop if we center it. */
    width: 235%; /* 2.35 * 100% */
    height: 100%;
    transform: translateX(-28.7%); /* (235% - 100%) / 2 / 235% * 100% ... simplified: move left to center */
    /* Math: We have a window of width W. Content is 2.35W. We want center.
       Shift left by (2.35W - W) / 2 = 0.675W. 
       0.675 / 2.35 = 0.2872... -> 28.7% */
}

/* Hover Overlay for Download */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none; /* Let clicks pass through to card */
}

.design-card:hover .overlay {
    opacity: 1;
}

.download-hint {
    color: white;
    font-weight: 700;
    border: 2px solid white;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}

.card-meta {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
}

.scheme-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: #888;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--accent-green);
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 9999; /* Ensure it's on top */
    opacity: 0; /* Default hidden */
    pointer-events: none; /* Prevent clicks when hidden */
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    /* 强制重置 HTML 和 Body 的宽度限制 */
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
        position: relative; /* 辅助定位 */
        margin: 0;
        padding: 0;
    }

    .app-container {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* 强制画廊容器不超出屏幕 */
    .gallery {
        padding: 1rem;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        width: 100%;
        max-width: 100%; /* 使用百分比而非 vw，避免滚动条影响 */
        box-sizing: border-box;
        overflow: hidden; /* 剪裁溢出内容 */
        margin: 0;
    }

    /* 强制图片容器适应宽度 */
    .canvas-wrapper {
        width: 100%;
        max-width: 100%;
    }

    /* 修复可能撑开宽度的输入框 */
    .input-group input {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 修复控制面板 */
    .control-panel {
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        padding: 1rem;
        gap: 1rem;
        position: relative;
    }

    /* Toast 位置微调，防止遮挡 */
    .toast {
        width: 80%; /* 限制宽度 */
        left: 50%;
        bottom: 3rem; /* 稍微抬高 */
        white-space: nowrap;
        text-align: center;
        padding: 0.75rem 1rem;
    }
    
    /* 品牌标题自适应 */
    .brand-group {
        width: 100%;
        flex-wrap: wrap; /* 允许换行 */
    }
    
    .brand h1 {
        font-size: 1.2rem;
        word-break: break-all; /* 防止长单词撑开 */
    }
}