:root{
    color-scheme: light dark;

    --bg:#efefef;
    --text:#3d2c22;
    --muted:#7a6558;

    --card:#f7f7f7;
    --card-border:#ddcfbf;
    --shadow:0 12px 28px rgba(84,56,30,0.08);

    --accent-bg:#fff1c9;
    --accent-border:#e2be6c;
    --accent-text:#6f4a00;

    --warn-bg:#ff8e8e;
    --warn-border:#c95a5a;
    --warn-text:#7a2f22;

    --btn-bg:#f2c66d;
    --btn-bg-hover:#e9b851;
    --btn-text:#5b3a00;

    --link:#9a5a00;
    --line:#e8dccd;
}

@media (prefers-color-scheme: dark){
    :root{
        --bg:#2a2a2a;
        --text:#f2e6d7;
        --muted:#c7b29d;

        --card:#363636;
        --card-border:#4c3c33;
        --shadow:0 12px 28px rgba(0,0,0,0.28);

        --accent-bg:#5a4622;
        --accent-border:#b78a38;
        --accent-text:#ffe1a0;

        --warn-bg:#883333;
        --warn-border:#cf8f83;
        --warn-text:#ffd9d0;

        --btn-bg:#c89238;
        --btn-bg-hover:#d8a44b;
        --btn-text:#24170a;

        --link:#ffcb7a;
        --line:#4a3c34;
    }
}
@media (max-width:700px){
    .sub-form-row{
        display:block;
    }
    .sub-input{
        width:100%;
        margin-bottom:10px;
    }
    .sub-btn{
        width:100%;
    }
}    

*{box-sizing:border-box;}
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Arial,sans-serif;
}
.wrap{
    position:relative;
    padding:32px 20px;
    max-width:860px;
    margin:0 auto;
}
h1{
    margin:0 0 30px 0;
    font-size:30px;
    text-align:center;
}
.card{
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:18px;
    padding:20px 22px;
    margin-bottom:16px;
    box-shadow:var(--shadow);
}
.warn{
    background:var(--warn-bg);
    border-color:var(--warn-border);
    color:var(--warn-text);
}
.err{
    background:var(--warn-bg);
    border-color:var(--warn-border);
    color:var(--warn-text);
}
.note{
    background:var(--accent-bg);
    border-color:var(--accent-border);
    color:var(--accent-text);
}
.subscribe-box{
    line-height:1.7;
    padding-right:120px;
}    
.install-box{
    line-height:1.7;
    padding-right:120px;
}    
.install-box li{
    color:var(--text);
}    
.install-box li[data-hint]{
    cursor:pointer;
}

.install-box li[data-hint]:hover{
    border-bottom:1px dashed currentColor;
    display:inline;
}
.hint-popup{
    position:absolute;
    z-index:9999;
    display:none;
    padding:8px;
    border:1px solid var(--card-border);
    border-radius:12px;
    background:var(--card);
    box-shadow:var(--shadow);
    max-width:min(92vw, 520px);
    max-height:70vh;
    overflow:auto;
}

.hint-popup img{
    display:block;
    max-width:100%;
    max-height:calc(80vh - 16px);
    border-radius:8px;
    cursor:zoom-in;
    transition:transform .12s ease, max-width .12s ease, max-height .12s ease;
}

.hint-popup.zoomed{
    max-width:min(96vw, 1200px);
    max-height:92vh;
    overflow:auto;
}

.hint-popup.zoomed img{
    max-width:none;
    max-height:none;
    cursor:zoom-out;
}

.sub-form-text{
    margin-bottom:12px;
    line-height:1.6;
}
.sub-form-row{
    display:flex;
    gap:10px;
    align-items:center;
}
.sub-input{
    flex:1 1 auto;
    min-width:0;
    height:46px;
    padding:0 14px;
    border-radius:12px;
    border:1px solid var(--card-border);
    background: #CCC;
    color: #333;
    font-size:16px;
}
.sub-btn{
    height:46px;
    padding:0 20px;
    cursor:pointer;
}    
.meta{
    margin:0;
    padding:0;
    list-style:none;
}

.label_main{
    display:inline-block;
    width:250px;
    color:var(--muted);
}

.meta li{
    margin:0 0 10px 0;
    line-height:1.5;
}

.label{
    display:inline-block;
    width:110px;
    color:var(--muted);
}

.block-title{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--muted);
    margin:0 0 12px 0;
}    

.current-version-card .version-head{
    margin-bottom:10px;
}
.current-version-card .version-side{
    min-width:110px;
}
.current-version-card .current-version-main{
    padding-top:2px;
}
.current-version-card .version-media{
    margin:10px 0 0 0;
    text-align:center;
}
.current-version-card .video-link{
    margin:0 4px 6px 4px;
}

.version-badge{
    display:inline-block;
    padding:5px 11px;
    border-radius:999px;
    background:var(--accent-bg);
    border:1px solid var(--accent-border);
    color:var(--accent-text);
    font-weight:bold;
    vertical-align:middle;
}
.version-badge-history{
    background:transparent;
    border-color:transparent;
    box-shadow:none;
}
.version-head{
    font-size:18px;
    font-weight:bold;
    line-height:1.45;
    margin:0 0 10px 0;
}
.version-row{
    display:table;
    width:100%;
    table-layout:fixed;
}
.version-main{
    display:table-cell;
    vertical-align:top;
}
.version-side{
    display:table-cell;
    width:128px;
    vertical-align:top;
    padding:2px 16px 0 0;
    text-align:center;
}
.version-media{
    margin-top:10px;
    text-align:center;
}
.video-link{
    display:inline-block;
    min-width:34px;
    height:34px;
    line-height:34px;
    padding:0 10px;
    border-radius:10px;
    background:var(--accent-bg);
    border:1px solid var(--accent-border);
    color:var(--accent-text);
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    margin:0 3px 6px 3px;
}
.video-link-youtube{
    background:var(--warn-bg);
    border-color:var(--warn-border);
    color:var(--warn-text);
}
.video-link-vk{
    background:#3d536f;
    border-color:#587391;
    color:#dbe9ff;
}
.version-head{
    font-size:18px;
    font-weight:bold;
    line-height:1.45;
    margin:0 0 10px 0;
    word-wrap:break-word;
}
.version-main .list{
    margin-top:0;
}    
.list{
    margin:10px 0 0 0;
    padding:0;
    list-style:none;
}
.list li{
    position:relative;
    margin:0 0 8px 0;
    padding-left:30px;
    line-height:1.55;
}
.change-mark{
    position:absolute;
    left:0;
    top:0;
    width:22px;
    text-align:center;
    font-weight:bold;
}
.change-add{ color:#5d9b63; }
.change-del{ color:#b86a62; }
.change-edit{ color:#b88a3b; }
.change-warn{ color:#d08a00; }
.version-head .change-mark{
    position:static;
    display:inline-block;
    width:auto;
    margin-right:8px;
}
.btn-wrap{
    text-align:center;
}
.btn{
    display:inline-block;
    padding:13px 26px;
    border-radius:12px;
    background:var(--btn-bg);
    border:1px solid var(--accent-border);
    color:var(--btn-text);
    text-decoration:none;
    font-weight:bold;
    font-size:16px;
    box-shadow:0 6px 14px rgba(120,85,20,0.12);
}
.btn:hover{
    background:var(--btn-bg-hover);
}
.btn-expired{
    pointer-events:none;
    opacity:0.55;
}
.history-item{
    padding:14px 0;
    border-top:1px solid var(--line);
}
.history-item:first-child{
    border-top:none;
    padding-top:0;
}
a{
    color:var(--link);
}

/* btnlist styles */
.btnlist-card{
    padding:0;
    overflow:hidden;
}

.btnlist-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:18px 22px;
    cursor:pointer;
}

.btnlist-head:hover{
    background:rgba(0,0,0,0.03);
}

.btnlist-title{
    min-width:0;
    flex:1 1 auto;
}

.btnlist-title-text{
    display:inline;
    font-size:20px;
    margin:0;
    word-wrap:break-word;
}

.btnlist-toggle{
    min-width:34px;
    text-align:center;
    padding-left:0;
    padding-right:0;
}

.btnlist-media{
    flex:0 0 auto;
    white-space:nowrap;
}

.btnlist-body{
    border-top:1px solid var(--line);
    padding:18px 22px 20px 22px;
}

.btnlist-meta{
    margin-bottom:10px;
    color:var(--muted);
}

.btnlist-desc{
    line-height:1.65;
    margin-bottom:8px;
}

.btnlist-funcs{
    margin-top:6px;
}

.btnlist-func{
    margin:0 0 10px 0;
    padding:12px 14px;
    border:1px solid var(--card-border);
    border-radius:12px;
    background:rgba(0,0,0,0.02);
}

.btnlist-func-name{
    font-weight:bold;
    margin-bottom:6px;
}

.btnlist-func-tip{
    color:var(--muted);
    line-height:1.55;
}

code{
    padding:2px 6px;
    border-radius:6px;
    background:rgba(0,0,0,0.08);
}

.btnlist-mainhint{
    line-height:1.65;
    margin-bottom:10px;
    font-weight:bold;
}

.btnlist-subhead{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
}

.btnlist-subtoggle{
    display:inline-block;
    width:18px;
    text-align:center;
    font-weight:bold;
    color:var(--muted);
}

.btnlist-subbody{
    padding:8px 0 0 28px;
}

.btnlist-action{
    margin-top:8px;
    color:var(--muted);
}

.btnlist-head{
    display:flex;
    justify-content:space-between;
    align-items:stretch;
    gap:16px;
    padding:18px 22px;
    cursor:pointer;
}

.btnlist-title{
    min-width:0;
    flex:1 1 30%;
    display:flex;
    align-items:center;
}

.btnlist-title-line{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    width:100%;
}

.btnlist-title-text{
    display:block;
    font-size:20px;
    margin:0;
    word-wrap:break-word;
    overflow-wrap:break-word;
}

.btnlist-head-right{
    flex:1 1 70%;
    min-width:0;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    gap:12px;
}

.btnlist-head-hint{
    flex:1 1 auto;
    min-width:0;
    padding:10px 12px;
    border:1px solid var(--card-border);
    border-radius:12px;
    background:rgba(0,0,0,0.03);
    color:var(--muted);
    line-height:1.5;
    text-align:left;
    overflow-wrap:break-word;
    word-wrap:break-word;
}

.btnlist-media{
    flex:0 0 auto;
    white-space:nowrap;
    text-align:right;
}

@media (max-width:700px){
    .btnlist-head{
        display:block;
    }

    .btnlist-title{
        display:block;
        margin-bottom:10px;
    }

    .btnlist-head-right{
        display:block;
    }

    .btnlist-head-hint{
        margin-bottom:10px;
    }

    .btnlist-media{
        text-align:left;
    }
}
/* end btnlist */

.site-stats-panel{
    position:fixed;
    top:14px;
    left:14px;
    z-index:10000;
    padding:10px 12px;
    border:1px solid var(--card-border);
    border-radius:14px;
    background:var(--card);
    box-shadow:var(--shadow);
    min-width:150px;
    max-width:280px;
    text-align:center;
}

.site-stats-panel b{
    font-size:24px;    
}

.site-stats-title{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--muted);
    margin-bottom:8px;
}

.site-stats-row{
    line-height:1.45;
    margin-top:6px;
}

.site-stats-label{
    color:var(--muted);
}

.site-stats-sub{
    color:var(--muted);
    font-size:12px;
}

.lang-switch-panel{
    position:fixed;
    top:14px;
    right:14px;
    z-index:10000;
    gap:8px;
    padding:8px;
    border:1px solid var(--card-border);
    border-radius:14px;
    background:var(--card);
    box-shadow:var(--shadow);
}

.lang-switch-link{
    display:block;
    min-width:46px;
    padding:8px 10px;
    border:1px solid var(--card-border);
    border-radius:10px;
    background:rgba(0,0,0,0.03);
    color:var(--text);
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    line-height:1.2;
}

.lang-switch-link:hover{
    background:rgba(0,0,0,0.08);
}

.lang-switch-link.active{
    background:var(--accent-bg);
    border-color:var(--accent-border);
    color:var(--accent-text);
}

@media (max-width:1100px){
    .lang-switch-panel{
        top:8px;
        right:8px;
        padding:6px;
        gap:6px;
    }

    .lang-switch-link{
        min-width:42px;
        padding:7px 8px;
        font-size:13px;
    }
    .site-stats-panel{
        top:auto;
        bottom:8px;
        left:8px;
        right:auto;
        padding:8px 10px;
        min-width:170px;
        max-width:200px;
        font-size:13px;
    }

    .site-stats-title{
        font-size:11px;
        margin-bottom:6px;
    }

    .site-stats-sub{
        font-size:11px;
    }    
}