@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');

:root{

    --bg:#f4f4f4;
    --sheet:#f5f5f5;
    --card:#d6d6d6;

    --text:#111111;
    --subtext:#555555;

    --status-bg:#dfe7ff;
    --status-text:#355aa8;

    --primary:#5b5cff;
    --secondary:#d9d9d9;

    --icon-blue:#4a7dff;
}


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

body.dark{

    --bg:#121212;
    --sheet:#1b1b1b;
    --card:#2c2c2c;

    --text:#ffffff;
    --subtext:#b8b8b8;

    --status-bg:#24344f;
    --status-text:#a8c7ff;

    --primary:#6d7cff;
    --secondary:#333333;

    --icon-blue:#5c7dff;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:'Noto Sans SC',sans-serif;

    display:flex;
    justify-content:center;
}

body,
#itemSheet,
#settingsSheet,
.setting-card,
.about-card,
.status,
.primary,
.secondary,
.close-btn,
.footer,
.setting-subtitle,
.icon-bg{

    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease;
}

.app{
    width:min(390px,100%);
    min-height:100dvh;

    padding:20px;

    display:flex;
    flex-direction:column;
}

h1{
    font-size:42px;
    font-weight:700;
}

.status{
    margin-top:10px;

    display:inline-block;

    background:var(--status-bg);

    color:var(--status-text);

    padding:6px 12px;

    border-radius:999px;

    font-size:14px;
}

#viewer canvas{

    position:relative;

}

#viewer{

    flex:1;

    display:flex;
    align-items:center;
    justify-content:center;

    min-height:300px;

    position:relative;

    overflow: hidden;
    transition:
        background .35s ease;
    z-index:1;
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.9),
            rgba(220,230,255,.4) 60%,
            transparent 80%
        );
}

body.dark #viewer{

    background:
        radial-gradient(
            circle,
            rgba(92,125,255,.24),
            transparent 70%
        );
}
#viewer::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    border-radius:inherit;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.25),
            transparent 60%
        );

    animation:
        glow 5s ease-in-out infinite;
    
    z-index: 0;
}
body.dark #viewer::after{

    background:
        radial-gradient(
            circle,
            rgba(92,125,255,.12),
            transparent 60%
        );
    z-index: 0;
}
@keyframes glow{

    0%,100%{

        opacity:.4;
        transform:scale(1);
    }

    50%{

        opacity:.6;
        transform:scale(1.05);
    }
}

button{
    width:100%;
    height:54px;

    border:none;
    border-radius:999px;

    font-size:16px;
    font-weight:600;

    margin-top:14px;
}

.primary{
    background:var(--primary);
    color:white;
}

.secondary{
    background:var(--secondary);

    color:var(--text);
}

.actions{
    margin-top:auto;
}
 
#overlay{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.25);

    z-index: 1000;
    opacity:0;
    pointer-events:none;

    transition:.35s;
}

#itemSheet{

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    height:90dvh;

    background:var(--sheet);

    border-radius:28px 28px 0 0;

    transform:translateY(100%);

    z-index: 1001;

    transition:
        transform .45s cubic-bezier(.22,1,.36,1);

    padding:24px;

    overflow-y:auto;

    -webkit-overflow-scrolling: touch;

    box-shadow:
        0 -10px 40px rgba(0,0,0,.15);
}

#settingsSheet{

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    height:90dvh;

    z-index: 1002;

    background:var(--sheet);

    border-radius:28px 28px 0 0;

    padding:24px;

    overflow-y:auto;

    transform:translateY(100%);

    transition:
        transform .45s cubic-bezier(.22,1,.36,1);

    ;
}

#settingsSheet.show{

    transform:translateY(0);
}


.sheet-header{

    position:relative;

    margin-bottom:24px;
}

.close-btn{

    width:42px;
    height:42px;

    position:absolute;

    right:-6px;
    top:-6px;

    border:none;
    border-radius:50%;

    background:var(--card);

    font-size:26px;
    font-weight:300;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--text);

    border:1px solid #cfcfcf;

    box-shadow:
        0 3px 8px rgba(0,0,0,.18),
        0 1px 2px rgba(0,0,0,.12);
    
    transition:
        transform .15s,
        box-shadow .15s;
}

.setting-card{

    display:flex;

    align-items:center;

    gap:16px;

    background:var(--card);

    border-radius:22px;

    padding:10px;

    margin-bottom:18px;

    box-shadow:
        0 3px 6px rgba(0,0,0,.18);
}

.setting-title{

    font-size:16px;

    font-weight:700;
}

.setting-subtitle{

    margin-top:2px;

    font-size:12px;

    font-weight:400;

    color:var(--subtext);
}

.about-card{

    overflow:hidden;

    background:var(--card);

    border-radius:24px;

    box-shadow:
        0 3px 6px rgba(0,0,0,.18);
}

.about-cover{

    width:100%;

    height:180px;

    object-fit:cover;

    display:block;
}

.about-content{

    padding:14px;
}

.author{

    font-size:18px;

    font-weight:700;
}

.bili-row{

    margin-top:4px;

    display:flex;

    align-items:center;

    gap:6px;

    color:#666;

    font-size:14px;
}

.link-icon{

    width:14px;
    height:14px;
}

.footer{

    margin-top:20px;

    font-size:13px;

    color:var(--subtext);

    line-height:1.4;
}


.icon-bg{

    width:44px;
    height:44px;

    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;
}

.icon-bg img{

    width:24px;
    height:24px;

    object-fit:contain;
}

.icon-bg.neutral{

    background:#ececec;
}

.icon-bg.blue{

    background:var(--icon-blue);
}

.icon-bg .setting-icon{

    width:24px;
    height:24px;
}

.feed img{

    display:block;

    max-width:100%;
}

.feed{

    display:flex;

    flex-direction:column;

    gap:20px;
}

.card img{

    overflow:hidden;
}

.card.portrait{

    display:flex;
    gap:16px;

    align-items:flex-start;
}

.card.portrait img{

    width:96px;
    height:96px;

    border-radius:18px;

    object-fit:cover;

    flex-shrink:0;
}

.card.landscape{

    display:flex;

    flex-direction:column;
}

.card.landscape .info{

    margin-top:12px;
}

.card.landscape img{

    width:100%;

    max-height:220px;

    object-fit:cover;

    border-radius:20px;
}

.about-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;
}

.about-cover{

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;
}

.about-overlay{

    position:absolute;

    left:16px;
    right:16px;
    bottom:16px;

    color:white;
}

.author{

    font-size:20px;

    font-weight:700;

    text-shadow:
        0 2px 8px rgba(0,0,0,.5);
}

.bili-row{

    margin-top:4px;

    display:flex;

    align-items:center;

    gap:6px;

    font-size:14px;

    font-weight:400;

    color:white;

    text-shadow:
        0 2px 8px rgba(0,0,0,.5);
}

.link-icon{

    width:14px;
    height:14px;

    filter:brightness(0) invert(1);
}

.bili-row{

    cursor:pointer;

    transition:
        transform .15s,
        opacity .15s;
}

.bili-row:hover{

    opacity:.85;
}

.bili-row:active{

    transform:scale(.98);
}

#overlay.show{
    opacity:1;
    pointer-events:auto;
}

#itemSheet.show{
    transform:translateY(0);
}