:root {
    --radius: .625rem;
    --radius-xl: calc(var(--radius) * 1.4);
    --radius-2xl: calc(var(--radius) * 1.8);
    --radius-3xl: calc(var(--radius) * 2.2);
    --radius-4xl: calc(var(--radius) * 2.6);

    
    --background: 255 255 255;
    --foreground: 26 25 23;          
    --card: 255 255 255;
    --card-foreground: 26 25 23;
    --popover: 255 255 255;
    --primary: 59 91 219;           
    --primary-foreground: 255 255 255;
    --secondary: 241 240 236;       
    --secondary-foreground: 26 25 23;
    --muted: 246 245 242;           
    --muted-foreground: 111 108 102;
    --accent: 241 240 236;
    --accent-foreground: 26 25 23;
    --destructive: 201 42 46;       
    --destructive-foreground: 255 255 255;
    --border: 235 233 228;          
    --input: 235 233 228;
    --ring: 59 91 219;
    --like: 255 90 95;             
    --success: 43 196 138;         
    --warning: 227 166 69;         
}

.dark {
    --background: 18 18 17;        
    --foreground: 236 235 231;     
    --card: 27 26 24;             
    --card-foreground: 236 235 231;
    --popover: 27 26 24;
    --primary: 112 136 255;       
    --primary-foreground: 18 18 17;
    --secondary: 38 37 35;        
    --secondary-foreground: 236 235 231;
    --muted: 27 26 24;
    --muted-foreground: 155 152 143;
    --accent: 38 37 35;
    --accent-foreground: 236 235 231;
    --destructive: 255 90 95;
    --destructive-foreground: 255 255 255;
    --border: 42 41 38;           
    --input: 42 41 38;
    --ring: 112 136 255;
    --like: 255 90 95;
    --success: 18 162 111;       
    --warning: 227 166 69;
}

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                 "Noto Sans CJK SC", sans-serif;
    background: rgb(var(--background));
    color: rgb(var(--foreground));
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color .25s ease, color .25s ease;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb {
    background: rgb(var(--muted-foreground) / .25);
    border-radius: 999px;
}
::-webkit-scrollbar-track { background: transparent; }

::selection { background: rgb(var(--primary) / .18); }

@keyframes dp-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.45) rotate(-6deg); }
    70%  { transform: scale(.92); }
    100% { transform: scale(1); }
}
.dp-pop { animation: dp-pop .45s cubic-bezier(.34,1.56,.64,1) both; }

@keyframes dp-dip {
    0%   { transform: translateY(0) }
    40%  { transform: translateY(3px) scale(.97) }
    100% { transform: translateY(0) }
}
.dp-dip { animation: dp-dip .35s ease both; }

@keyframes dp-shimmer {
    0%   { background-position: 200% 0 }
    100% { background-position: -200% 0 }
}
.dp-skeleton {
    background: linear-gradient(90deg,
        rgb(var(--muted)) 25%,
        rgb(var(--muted-foreground) / .10) 50%,
        rgb(var(--muted)) 75%);
    background-size: 200% 100%;
    animation: dp-shimmer 1.6s linear infinite;
}

@keyframes dp-caret {
    0%, 49%  { opacity: 1 }
    50%, 100% { opacity: 0 }
}
.dp-caret { animation: dp-caret 1.1s step-end infinite; }

@keyframes dp-reveal {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dp-reveal { opacity: 0; }
.dp-reveal.in { animation: dp-reveal .55s cubic-bezier(.16,1,.3,1) both; }

.dp-feed-mask {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

@keyframes dp-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}
.dp-breathe { animation: dp-breathe 3.2s ease-in-out infinite; }

.dp-pill {
    box-shadow: 0 4px 12px rgb(0 0 0 / .08);
}
.dark .dp-pill { box-shadow: 0 4px 16px rgb(0 0 0 / .5); }

.dp-card-hover { transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease; }
.dp-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgb(26 25 23 / .07);
}
.dark .dp-card-hover:hover { box-shadow: 0 10px 30px rgb(0 0 0 / .45); }

.dp-safe-b { padding-bottom: max(env(safe-area-inset-bottom), 0px); }

.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }