/* 02-theme.css · Couture OS 字体 & 基础主题 */

/* ── 视口容器 ── */
.viewport {
    width: 100%;
    height: 100%;
    max-width: 430px;
    background-color: var(--bg-base);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,0.15);
    font-family: 'Space Grotesk', sans-serif;
}

@media (min-width: 431px) {
    .viewport {
        border-radius: 40px;
        height: 90vh;
        max-height: 850px;
        border: 8px solid #FFF;
    }
}

/* ── 背景装饰层 ── */
.texture-noise {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
}

.architectural-light {
    position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    z-index: 0; pointer-events: none;
    background: linear-gradient(105deg,
        rgba(255,255,255,0) 20%,
        rgba(255,255,255,0.9) 35%,
        rgba(255,255,255,1) 50%,
        rgba(255,255,255,0.9) 65%,
        rgba(255,255,255,0) 80%);
    filter: blur(25px);
    animation: light-drift 20s ease-in-out infinite alternate;
}

@keyframes light-drift {
    0%   { transform: translateY(-10%) translateX(-10%) rotate(0deg); }
    100% { transform: translateY(10%)  translateX(10%)  rotate(5deg); }
}

.bg-watermark {
    position: absolute; top: 35%; left: -15%;
    font-family: 'Playfair Display', serif;
    font-size: 220px; font-weight: 900; font-style: italic;
    color: rgba(21,21,23,0.02); z-index: 2; pointer-events: none;
    transform: rotate(-90deg) translateY(-50%);
    letter-spacing: -5px;
}

/* ── 状态栏 ── */
.status-bar {
    position: relative; z-index: 10;
    display: flex; justify-content: space-between; align-items: center;
    padding: calc(env(safe-area-inset-top, 25px) + 10px) 30px 0;
    font-size: 11px; font-weight: 700;
    color: var(--ink-black); letter-spacing: 1.5px;
    font-family: 'Space Grotesk', sans-serif;
}

.status-icons {
    display: flex; gap: 8px; align-items: center;
}
.status-icons svg {
    width: 14px; height: 14px; fill: var(--ink-black);
}