/* ============================================================
   2026 报名后台 - 现代简洁专业设计系统
   仅作用于 2026/baoming 视图，通过 header 引入
   ============================================================ */

:root{
    --c-primary:        #1f4e9a;
    --c-primary-dark:   #143570;
    --c-primary-light:  #3a6fd8;
    --c-accent:         #e8a23e;
    --c-bg:             #f4f6fb;
    --c-surface:        #ffffff;
    --c-border:         #e6e9f0;
    --c-text:           #1f2733;
    --c-text-sub:       #5b6675;
    --c-text-muted:     #98a1b2;
    --c-success:        #2e9e63;
    --c-danger:         #d6453d;
    --c-warning:        #e8a23e;
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(20,40,80,.06);
    --shadow:    0 4px 18px rgba(20,40,80,.08);
    --shadow-lg: 0 12px 40px rgba(20,40,80,.14);
}

/* ---------- base ---------- */
html{ font-size:62.5%; }
body{
    font-family:"PingFang SC","Microsoft YaHei UI","Microsoft YaHei",Helvetica,Arial,sans-serif;
    background:var(--c-bg);
    color:var(--c-text);
    font-size:1.4rem;
    line-height:1.6;
    margin:0;
}
a{ color:var(--c-primary); text-decoration:none; transition:color .15s; }
a:hover{ color:var(--c-primary-light); }

/* ---------- top nav ---------- */
.topbar{
    background:linear-gradient(90deg,var(--c-primary-dark) 0%,var(--c-primary) 55%,var(--c-primary-light) 100%);
    box-shadow:var(--shadow);
    position:sticky;
    top:0;
    z-index:100;
}
.topbar-inner{
    max-width:1200px;
    margin:0 auto;
    display:flex;
    align-items:center;
    min-height:64px;
    padding:0 20px;
}
.topbar-brand{
    color:#fff;
    font-size:2rem;
    font-weight:700;
    letter-spacing:.5px;
    white-space:nowrap;
    padding-right:28px;
    margin-right:8px;
    border-right:1px solid rgba(255,255,255,.22);
    display:flex;
    align-items:center;
    gap:10px;
}
.topbar-brand .year-badge{
    font-size:1.2rem;
    background:var(--c-accent);
    color:#fff;
    padding:2px 8px;
    border-radius:999px;
    font-weight:600;
}
.topbar-menu{
    display:flex;
    align-items:center;
    gap:2px;
    flex:1;
    flex-wrap:wrap;
}
.topbar-menu .nav-item{
    position:relative;
}
.topbar-menu .nav-link{
    display:block;
    color:rgba(255,255,255,.88);
    padding:8px 14px;
    border-radius:var(--radius-sm);
    font-size:1.45rem;
    white-space:nowrap;
    cursor:pointer;
}
.topbar-menu .nav-link:hover,
.topbar-menu .nav-item.open .nav-link{
    background:rgba(255,255,255,.15);
    color:#fff;
}
.topbar-menu .nav-link .caret{
    font-size:1rem;
    margin-left:4px;
    opacity:.8;
}
.topbar-menu .dropdown{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:200px;
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow-lg);
    padding:6px;
    margin-top:4px;
    z-index:200;
}
.topbar-menu .nav-item.open .dropdown{ display:block; }
.topbar-menu .dropdown a{
    display:block;
    padding:9px 14px;
    color:var(--c-text);
    border-radius:var(--radius-sm);
    font-size:1.4rem;
}
.topbar-menu .dropdown a:hover{
    background:var(--c-bg);
    color:var(--c-primary);
}
.topbar-user{
    color:rgba(255,255,255,.9);
    font-size:1.35rem;
    white-space:nowrap;
    display:flex;
    align-items:center;
    gap:12px;
}
.topbar-user .uname{ font-weight:600; color:#fff; }
.topbar-user a{ color:rgba(255,255,255,.85); }
.topbar-user a:hover{ color:#fff; }
.topbar-toggle{ display:none; background:none;border:none;color:#fff;font-size:2.2rem;cursor:pointer;}
.nav-mobile-user{ display:none; }

/* ---------- page container ---------- */
.container.page{
    max-width:1200px;
    width:auto;
    background:transparent;
    border:0;
    padding:28px 20px 60px;
    margin:0 auto;
}
.page-card{
    background:var(--c-surface);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    border:1px solid var(--c-border);
    padding:30px 36px;
    margin-bottom:24px;
}
.page-title{
    font-size:2.4rem;
    font-weight:700;
    color:var(--c-primary-dark);
    margin:0 0 6px;
}
.page-subtitle{
    color:var(--c-text-sub);
    font-size:1.4rem;
    margin:0 0 20px;
}
.section-title{
    font-size:1.7rem;
    font-weight:600;
    color:var(--c-text);
    margin:24px 0 14px;
    padding-left:10px;
    border-left:4px solid var(--c-primary);
}

/* ---------- buttons (override amazeui colors) ---------- */
.am-btn{
    border-radius:var(--radius-sm)!important;
    font-size:1.4rem!important;
    transition:all .15s;
}
.am-btn-primary{
    background:var(--c-primary)!important;
    border-color:var(--c-primary)!important;
}
.am-btn-primary:hover{ background:var(--c-primary-dark)!important; border-color:var(--c-primary-dark)!important; }
.am-btn-secondary{ background:var(--c-primary-light)!important;border-color:var(--c-primary-light)!important; }
.am-btn-warning{ background:var(--c-accent)!important;border-color:var(--c-accent)!important;color:#fff!important; }
.am-btn-default{ background:#fff!important;border-color:var(--c-border)!important;color:var(--c-text)!important; }
.am-btn-danger{ background:var(--c-danger)!important;border-color:var(--c-danger)!important; }
.am-btn-block{ border-radius:var(--radius-sm)!important; }

/* ---------- forms ---------- */
.am-form input[type="text"],
.am-form input[type="password"],
.am-form input[type="email"],
.am-form input[type="number"],
.am-form select,
.am-form textarea,
.am-form-field{
    border:1px solid var(--c-border)!important;
    border-radius:var(--radius-sm)!important;
    padding:8px 12px!important;
    font-size:1.4rem!important;
    background:#fff!important;
    box-shadow:none!important;
    transition:border-color .15s, box-shadow .15s;
}
.am-form input:focus,.am-form select:focus,.am-form textarea:focus,.am-form-field:focus{
    border-color:var(--c-primary-light)!important;
    box-shadow:0 0 0 3px rgba(58,111,216,.12)!important;
}
.am-form label{ color:var(--c-text-sub); font-weight:500; }

/* ---------- 团队成员联想输入 ---------- */
.gp-wrap{ position:relative; }
.gp-suggest{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:60;
    background:#fff;
    border:1px solid var(--c-border);
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow);
    max-height:220px;
    overflow:auto;
    display:none;
}
.gp-suggest .gp-item{
    padding:10px 14px;
    font-size:1.4rem;
    cursor:pointer;
    color:var(--c-text);
}
.gp-suggest .gp-item:hover,
.gp-suggest .gp-item.on{ background:#f3f7ff;color:var(--c-primary); }
.gp-suggest .gp-empty{ padding:10px 14px;font-size:1.3rem;color:var(--c-text-muted); }

/* ---------- tables ---------- */
.am-table{
    border:1px solid var(--c-border);
    border-radius:var(--radius);
    overflow:hidden;
    background:#fff;
}
.am-table>thead>tr>th,
.am-table>tbody>tr>td{
    border-top:0!important;
    border-bottom:1px solid var(--c-border)!important;
    padding:12px 14px!important;
    vertical-align:middle!important;
    font-size:1.35rem;
}
.am-table>thead>tr>th{
    background:#f7f9fd;
    color:var(--c-primary-dark);
    font-weight:600;
    white-space:nowrap;
}
.am-table>tbody>tr:hover{ background:#f9fbff; }
.am-table>tbody>tr:last-child>td{ border-bottom:0!important; }

/* tag / badge */
.tag{
    display:inline-block;
    padding:2px 10px;
    border-radius:999px;
    font-size:1.2rem;
    line-height:1.8;
    background:#eef2fa;
    color:var(--c-primary);
}
.tag-success{ background:#e6f6ed;color:var(--c-success); }
.tag-muted{ background:#eef0f4;color:var(--c-text-muted); }
.tag-warning{ background:#fdf2e0;color:#b97816; }

/* ---------- alert ---------- */
.am-alert{
    border-radius:var(--radius-sm)!important;
    border:0!important;
    padding:12px 16px!important;
}
.am-alert-danger{ background:#fdeceb;color:var(--c-danger); }
.am-alert-success{ background:#e6f6ed;color:var(--c-success); }

/* ---------- login ---------- */
.login-wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#143570 0%,#1f4e9a 55%,#3a6fd8 100%);
    padding:20px;
}
.login-card{
    background:#fff;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    width:100%;
    max-width:880px;
    display:flex;
    overflow:hidden;
}
.login-aside{
    flex:0 0 42%;
    background:linear-gradient(160deg,var(--c-primary-dark),var(--c-primary));
    color:#fff;
    padding:48px 36px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.login-aside h1{ color:#fff;font-size:2.6rem;font-weight:700;margin:0 0 16px; }
.login-aside p{ color:rgba(255,255,255,.85);font-size:1.4rem;line-height:1.9; }
.login-aside .contact{ margin-top:30px;font-size:1.3rem;color:rgba(255,255,255,.8);border-top:1px solid rgba(255,255,255,.2);padding-top:18px; }
.login-main{ flex:1;padding:48px 44px; }
.login-main h2{ font-size:2.2rem;color:var(--c-primary-dark);margin:0 0 6px; }
.login-main .tip{ color:var(--c-text-sub);margin:0 0 28px;font-size:1.35rem; }

/* ---------- home entry cards ---------- */
.entry-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}
.entry-card{
    display:block;
    background:#fff;
    border:1px solid var(--c-border);
    border-radius:var(--radius-lg);
    padding:32px 28px;
    text-align:center;
    transition:transform .18s, box-shadow .18s, border-color .18s;
    color:var(--c-text);
}
.entry-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow);
    border-color:var(--c-primary-light);
    color:var(--c-text);
}
.entry-card .ico{
    width:64px;height:64px;
    margin:0 auto 18px;
    border-radius:18px;
    display:flex;align-items:center;justify-content:center;
    font-size:0;color:#fff;
    background:url(../img/jb2.jpg) center/cover no-repeat;
}
.entry-card .ico.c1,.entry-card .ico.c2,.entry-card .ico.c3{ background:url(../img/jb2.jpg) center/cover no-repeat; }
.entry-card:hover .ico{ background-image:url(../img/jb1.jpg); }
.entry-card h3{ font-size:1.9rem;margin:0 0 8px;color:var(--c-primary-dark); }
.entry-card p{ color:var(--c-text-sub);font-size:1.35rem;margin:0 0 20px;min-height:42px; }
.entry-card .go{
    display:inline-block;
    padding:8px 26px;
    border-radius:999px;
    background:var(--c-primary);
    color:#fff;
    font-size:1.4rem;
}
.entry-card:hover .go{ background:var(--c-primary-dark);color:#fff; }

/* ---------- individual two-column ---------- */
.award-layout{ display:grid;grid-template-columns:640px 1fr;gap:24px;align-items:start; }
.award-list .award-item{
    display:block;
    padding:16px 20px;
    border:1px solid var(--c-border);
    border-radius:var(--radius);
    margin-bottom:12px;
    scroll-margin-top:84px;
    background:#fff;
    color:var(--c-text);
    transition:all .15s;
}
.award-list .award-item:hover{ border-color:var(--c-primary-light);box-shadow:var(--shadow-sm); }
.award-list .award-item.on{ border-color:var(--c-primary);background:#f3f7ff; }
.award-list .award-item h3{ margin:0 0 6px;font-size:1.7rem;color:var(--c-primary-dark);font-weight:600; }
.award-list .award-item .meta{ color:var(--c-text-sub);font-size:1.35rem; }
.award-list .award-item .meta b{ color:var(--c-primary);font-size:1.6rem;margin:0 3px; }

.member-panel{
    background:#fff;
    border:1px solid var(--c-border);
    border-radius:var(--radius);
    padding:18px;
    position:sticky;
    top:84px;
}
.member-panel>h3{
    margin:0 0 14px;
    text-align:center;
    font-size:1.6rem;
    color:var(--c-primary-dark);
    padding-bottom:12px;
    border-bottom:1px solid var(--c-border);
}
.member-card{
    display:flex;
    gap:14px;
    padding:12px 0;
    border-bottom:1px solid var(--c-border);
}
.member-card:last-child{ border-bottom:0; }
.member-card img{ width:72px;height:90px;object-fit:cover;border-radius:6px;border:1px solid var(--c-border); }
.member-card .mc-info{ flex:1;min-width:0; }
.member-card .mc-name{ font-weight:600;color:var(--c-text);margin-bottom:4px; }
.member-card .mc-no{ font-size:1.25rem;color:var(--c-text-muted);margin-bottom:8px; }
.member-card .mc-act{ display:flex;gap:8px;align-items:center; }
.member-card .mc-act .am-btn{
    padding:5px 16px;
    font-size:1.3rem;
    line-height:1.4;
    border-radius:999px;
    white-space:nowrap;
}
.member-card .mc-act .am-btn-primary{
    background:var(--c-primary)!important;
    border-color:var(--c-primary)!important;
    color:#fff;
}
.member-card .mc-act .am-btn-primary:hover{ background:var(--c-primary-dark)!important;border-color:var(--c-primary-dark)!important;color:#fff; }
.member-card .mc-act .am-btn-default{
    background:#fff!important;
    border:1px solid var(--c-danger)!important;
    color:var(--c-danger)!important;
}
.member-card .mc-act .am-btn-default:hover{ background:var(--c-danger)!important;color:#fff!important; }

/* ---------- multi-record list (director/social) ---------- */
.record-list{ margin-top:18px; }
.record-card{
    border:1px solid var(--c-border);
    border-radius:var(--radius);
    padding:16px 20px;
    margin-bottom:12px;
    background:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
}
.record-card .rc-main{ flex:1;min-width:0; }
.record-card .rc-title{ font-weight:600;font-size:1.55rem;color:var(--c-text);margin-bottom:4px; }
.record-card .rc-sub{ color:var(--c-text-sub);font-size:1.3rem; }
.record-card .rc-act{ display:flex;gap:8px;flex-shrink:0; }

.form-section{
    background:#fafbfe;
    border:1px solid var(--c-border);
    border-radius:var(--radius);
    padding:22px 24px;
    margin-top:22px;
}
.form-section .fs-head{
    font-size:1.6rem;font-weight:600;color:var(--c-primary-dark);margin-bottom:16px;
}
.char-counter{ font-size:1.25rem;color:var(--c-text-muted);text-align:right;margin-top:4px; }

/* ---------- utility ---------- */
.toolbar{ display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:18px; }
.toolbar .left{ display:flex;gap:10px;flex-wrap:wrap;align-items:center; }
.mt{ margin-top:16px; }
.mt-lg{ margin-top:28px; }
.text-center{ text-align:center; }
hr{ border:0;border-top:1px solid var(--c-border);margin:22px 0; }

/* ---------- sticky bottom action bar ---------- */
.page-bottombar{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:90;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:12px 20px;
    background:rgba(255,255,255,.96);
    border-top:1px solid var(--c-border);
    box-shadow:0 -2px 12px rgba(20,40,80,.08);
    backdrop-filter:saturate(180%) blur(8px);
}
.page-bottombar a{
    display:inline-block;
    padding:9px 28px;
    min-width:120px;
    text-align:center;
    border-radius:999px;
    border:1px solid var(--c-border);
    background:#fff;
    color:var(--c-text);
    font-size:1.45rem;
    font-weight:500;
    transition:all .15s;
}
.page-bottombar a:hover{
    border-color:var(--c-primary-light);
    color:var(--c-primary);
    background:#f3f7ff;
}
.page-bottombar a.on{
    background:var(--c-primary);
    border-color:var(--c-primary);
    color:#fff;
}
.page-bottombar a.on:hover{
    background:var(--c-primary-dark);
    color:#fff;
}
/* 内容区底部留白，避免被吸底栏遮挡 */
.container.page{ padding-bottom:90px; }

/* 手机端悬浮添加按钮（桌面端隐藏，桌面端用面板内的添加按钮即可） */
.fab-add{
    display:none;
    position:fixed;
    right:18px;
    bottom:78px;
    z-index:88;
    padding:13px 22px;
    background:var(--c-primary);
    color:#fff;
    border-radius:999px;
    font-size:1.5rem;
    font-weight:600;
    box-shadow:0 6px 18px rgba(31,78,154,.38);
    text-decoration:none;
}
.fab-add:active{ background:var(--c-primary-dark); }

/* 奖项专属申报说明 */
.award-notice{
    background:#f3f7ff;
    border:1px solid #d6e2fb;
    border-left:4px solid var(--c-primary);
    color:var(--c-primary-dark);
    padding:10px 16px;
    border-radius:8px;
    font-size:1.35rem;
    line-height:1.7;
    margin-bottom:16px;
}

/* ---------- responsive ---------- */
@media (max-width: 980px){
    .entry-grid{ grid-template-columns:1fr; }
    .award-layout{ grid-template-columns:1fr; }
    /* 手机/平板：已报分析师面板置顶，奖项列表下移，避免申报内容沉底 */
    .award-list{ order:2; }
    .member-panel{ order:1; position:static; }
    .fab-add{ display:block; }
    .login-card{ flex-direction:column;max-width:480px; }
    .login-aside{ flex:none;padding:32px; }
    .topbar-toggle{ display:block; }
    .topbar-menu{
        display:none;
        position:absolute;top:64px;left:0;right:0;
        background:var(--c-primary-dark);
        flex-direction:column;
        align-items:stretch;
        padding:10px;
    }
    .topbar-menu.show{ display:flex; }
    .topbar-menu .dropdown{ position:static;box-shadow:none;background:rgba(255,255,255,.08);border-radius:6px;margin:4px 0; }
    .topbar-menu .dropdown a{ color:#fff; }
    /* 手机端顶栏仅保留退出按钮，隐藏用户名 */
    .topbar-user .uname{ display:none; }
    .topbar-user{ display:flex; }
    .topbar-user a{
        display:inline-block;
        padding:6px 14px;
        border:1px solid rgba(255,255,255,.4);
        border-radius:999px;
        font-size:1.3rem;
    }
    /* 折叠菜单底部的手机端用户区 */
    .nav-mobile-user{
        display:flex;justify-content:space-between;align-items:center;
        margin-top:8px;padding:12px 14px;
        border-top:1px solid rgba(255,255,255,.18);
        color:rgba(255,255,255,.9);font-size:1.35rem;
    }
    .nav-mobile-user a{ color:#fff; }
    /* 手机端底部操作栏按钮均分 */
    .page-bottombar{ gap:6px;padding:10px; }
    .page-bottombar a{ min-width:0;flex:1;padding:9px 6px;font-size:1.3rem; }
}

/* ---------- 手机端：已报分析师卡片适配，避免被撑爆 ---------- */
@media (max-width: 560px){
    .page-card{ padding:20px 14px; }
    .member-panel{ padding:12px; }
    .member-card{
        flex-wrap:wrap;
        gap:10px;
        padding:10px 0;
    }
    .member-card img{
        flex:none;
        width:52px;height:64px;
    }
    .member-card .mc-info{ flex:1;min-width:0; }
    .member-card .mc-name{ word-break:break-all; }
    .member-card .mc-act{
        width:100%;
        justify-content:flex-end;
        padding-top:2px;
    }
    .member-card .mc-act .am-btn{ padding:6px 16px; }

    /* 证书基本信息：表格改为卡片式展示（照片居上，信息两列） */
    .baseinfo .am-table{ display:block; }
    .baseinfo .am-table tr{ display:flex; flex-wrap:wrap; }
    .baseinfo .am-table td{ border:0!important; padding:6px 8px!important; }
    .baseinfo .am-table td[rowspan]{
        width:100%;
        display:flex;
        justify-content:center;
        padding:0 8px 10px!important;
    }
    .baseinfo .am-table td:not([rowspan]){ width:50%;box-sizing:border-box; }

    /* 申报输入框：手机端放大字号、加大内边距 */
    .am-form input[type="text"],
    .am-form input[type="password"],
    .am-form input[type="email"],
    .am-form input[type="number"],
    .am-form textarea{
        font-size:1.6rem!important;
        padding:12px 14px!important;
    }
    .am-form label{ font-size:1.5rem; }
    /* 手机端表单项整行显示，避免半行挤压 */
    .am-u-sm-4,.am-u-sm-6{ width:100%;float:none; }
    /* 旧版统计/列表页（container jxsbe）固定 1100px 宽，手机端改为自适应 */
    .container.jxsbe{
        width:auto;
        max-width:100%;
        margin:0;
        padding:16px 8px;
        background:transparent;
        border:0;
    }
    .jxsbe{ padding:0; }
}

/* ---------- materials ---------- */
.material-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}
.material-item{
    display:flex;
    align-items:center;
    gap:16px;
    background:#fff;
    border:1px solid var(--c-border);
    border-radius:var(--radius);
    padding:16px 20px;
    transition:border-color .15s, box-shadow .15s;
    color:var(--c-text);
}
.material-item:hover{
    border-color:var(--c-primary-light);
    box-shadow:var(--shadow-sm);
}
.material-preview{
    display:flex;
    align-items:center;
    gap:16px;
    flex:1;
    min-width:0;
    color:inherit;
    text-decoration:none;
}
.material-icon{
    flex:none;
    width:44px;height:44px;
    border-radius:8px;
    background:var(--c-primary);
    color:#fff;
    font-size:1.1rem;
    font-weight:700;
    display:flex;align-items:center;justify-content:center;
}
.material-info{
    flex:1;
    min-width:0;
}
.material-info h4{
    margin:0 0 4px;
    font-size:1.6rem;
    color:var(--c-primary-dark);
    font-weight:600;
}
.material-info p{
    margin:0 0 4px;
    font-size:1.3rem;
    color:var(--c-text-sub);
}
.material-meta{
    font-size:1.2rem;
    color:var(--c-text-sub);
}
.material-dl{
    flex:none;
    padding:6px 20px;
    border-radius:999px;
    background:var(--c-primary);
    color:#fff;
    font-size:1.3rem;
}
.material-item:hover .material-dl{ background:var(--c-primary-dark); }
.material-form{
    margin-top:20px;
}
.form-row{
    margin-bottom:16px;
}
.form-label{
    display:block;
    margin-bottom:6px;
    font-size:1.4rem;
    color:var(--c-primary-dark);
    font-weight:600;
}
.form-label .req{ color:#e74c3c; }
.form-input{
    width:100%;
    max-width:600px;
    padding:8px 14px;
    border:1px solid var(--c-border);
    border-radius:var(--radius);
    font-size:1.4rem;
}
.form-input:focus{
    border-color:var(--c-primary);
    outline:none;
}
.form-file{
    font-size:1.4rem;
}
.form-hint{
    margin-left:10px;
    font-size:1.2rem;
    color:var(--c-text-sub);
}
.form-row-inline{
    display:flex;
    align-items:flex-end;
    flex-wrap:wrap;
}
.form-switch{
    display:inline-flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    user-select:none;
}
.form-switch input{ display:none; }
.switch-track{
    width:42px;
    height:22px;
    border-radius:11px;
    background:#ccc;
    position:relative;
    transition:background .2s;
    flex-shrink:0;
}
.switch-thumb{
    position:absolute;
    top:2px;
    left:2px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#fff;
    transition:left .2s;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.form-switch input:checked + .switch-track{ background:var(--c-primary); }
.form-switch input:checked + .switch-track .switch-thumb{ left:22px; }
.switch-text{ font-size:1.3rem;color:var(--c-text-sub); }
.tag{ display:inline-block;padding:2px 10px;border-radius:999px;font-size:1.1rem;font-weight:600; }
.tag-on{ background:#e6f7ed;color:#2e9e63; }
.tag-off{ background:#f0f0f0;color:#999; }