@charset "UTF-8";
/*!
 * Rizhi Plus — 前台写作页（write.php）
 * 颜色 / 圆角 / 阴影统一走主样式变量，夜间模式自动跟随
 */

/* ============================================================
 * 1. 容器与页头
 * ============================================================ */
.rz-write{--rz-w-gap:16px}

.rz-w-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:4px 4px 14px;
}
.rz-w-head-main{min-width:0}
.rz-w-head-title{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
    font-size:19px;
    line-height:1.4;
    color:var(--text-strong);
    font-weight:700;
    letter-spacing:.2px;
}
.rz-w-head-sub{
    margin:6px 0 0;
    font-size:13px;
    color:var(--text-muted);
    line-height:1.7;
}
.rz-w-head-sub a{color:var(--text-muted);border-bottom:1px dashed transparent}
.rz-w-head-sub a:hover{color:var(--accent);border-bottom-color:rgba(var(--accent-rgb),.5)}
.rz-w-badge{
    flex-shrink:0;
    padding:1px 7px;
    border-radius:4px;
    font-size:11px;
    font-weight:400;
    line-height:18px;
    color:var(--accent);
    background:var(--accent-soft);
    border:1px solid rgba(var(--accent-rgb),.22);
}
.rz-w-head-back{
    display:inline-flex;
    align-items:center;
    gap:3px;
    flex-shrink:0;
    margin-top:2px;
    padding:4px 9px;
    border-radius:var(--radius);
    font-size:13px;
    color:var(--text-muted);
    border:1px solid transparent;
    transition:color .18s,border-color .18s,background .18s;
}
.rz-w-head-back:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.3);background:var(--accent-soft)}
.rz-w-dot{margin:0 5px;opacity:.5}

/* ============================================================
 * 2. 提示条
 * ============================================================ */
.rz-w-alert{
    margin:0 0 12px;
    padding:9px 13px;
    border-radius:var(--radius);
    font-size:13px;
    line-height:1.7;
    border:1px solid var(--border);
    background:var(--surface-soft);
    color:var(--text);
}
.rz-w-alert.is-error{color:#c0392b;background:rgba(192,57,43,.07);border-color:rgba(192,57,43,.22)}
.rz-w-alert.is-ok{color:var(--accent-dark);background:var(--accent-soft);border-color:rgba(var(--accent-rgb),.24)}

/* ============================================================
 * 3. 按钮
 * ============================================================ */
.rz-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:8px 18px;
    border-radius:var(--radius);
    border:1px solid var(--border-strong);
    background:var(--surface);
    color:var(--text);
    font-size:14px;
    font-family:inherit;
    line-height:1.5;
    cursor:pointer;
    transition:background .18s,color .18s,border-color .18s,box-shadow .18s;
    -webkit-appearance:none;
    appearance:none;
}
.rz-btn:hover{border-color:rgba(var(--accent-rgb),.45);color:var(--accent)}
.rz-btn-primary{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
    box-shadow:0 2px 8px rgba(var(--accent-rgb),.24);
}
.rz-btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.rz-btn-ghost{background:transparent}
.rz-btn-sm{padding:6px 13px;font-size:13px}
.rz-btn:disabled{opacity:.55;cursor:not-allowed}

/* ============================================================
 * 4. 标题卡 + 元信息
 * ============================================================ */
.rz-w-card{
    margin-bottom:14px;
    padding:18px 22px 14px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 1px 2px rgba(20,40,30,.04);
}
/* 特异性抬高，盖掉主样式里 input[type=text] 的边框 / 高度 */
.rz-write .rz-w-title{
    display:block;
    width:100%;
    height:auto;
    padding:0 0 10px;
    border:0;
    border-bottom:1px solid var(--border);
    border-radius:0;
    background:transparent;
    box-shadow:none;
    font-family:inherit;
    font-size:21px;
    font-weight:700;
    line-height:1.5;
    color:var(--text-strong);
    outline:none;
    transition:border-color .2s;
}
.rz-write .rz-w-title::placeholder{color:var(--text-muted);font-weight:400}
.rz-write .rz-w-title:focus{border-bottom-color:rgba(var(--accent-rgb),.55)}

.rz-w-meta{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.rz-w-row{display:flex;align-items:flex-start;gap:10px}
.rz-w-label{
    flex-shrink:0;
    width:34px;
    padding-top:5px;
    font-size:13px;
    color:var(--text-muted);
    line-height:1.6;
}

.rz-w-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.rz-w-chip{
    display:inline-flex;
    align-items:center;
    padding:3px 11px;
    border-radius:20px;
    border:1px solid var(--border-strong);
    background:var(--surface-soft);
    font-size:13px;
    line-height:1.6;
    color:var(--text-muted);
    cursor:pointer;
    user-select:none;
    transition:color .16s,border-color .16s,background .16s;
    margin-left:calc(var(--depth, 0) * 10px);
}
.rz-w-chip input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.rz-w-chip:hover{border-color:rgba(var(--accent-rgb),.5);color:var(--accent)}
.rz-w-chip input:checked+span{color:var(--accent);font-weight:500}
/* 老浏览器没有 :has 时上面那条负责文字变色，新浏览器整颗 chip 一起变色 */
.rz-w-chip:has(input:checked){
    color:var(--accent);
    background:var(--accent-soft);
    border-color:rgba(var(--accent-rgb),.45);
}
.rz-w-empty{font-size:13px;color:var(--text-muted);padding-top:5px}

.rz-write .rz-w-input{
    flex:1;
    min-width:0;
    height:auto;
    padding:6px 10px;
    border:1px solid var(--border-strong);
    border-radius:var(--radius);
    background:var(--surface);
    font-family:inherit;
    font-size:13.5px;
    line-height:1.7;
    color:var(--text);
    outline:none;
    transition:border-color .18s,box-shadow .18s;
}
.rz-write .rz-w-input::placeholder{color:var(--text-muted)}
.rz-write .rz-w-input:focus{border-color:rgba(var(--accent-rgb),.55);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1)}
.rz-write .rz-w-input:disabled{opacity:.6;cursor:not-allowed}

/* 更多设置 */
.rz-w-adv{margin-top:12px;border-top:1px dashed var(--border);padding-top:10px}
.rz-w-adv>summary{
    cursor:pointer;
    font-size:13px;
    color:var(--text-muted);
    list-style:none;
    outline:none;
    user-select:none;
}
.rz-w-adv>summary::-webkit-details-marker{display:none}
.rz-w-adv>summary::before{
    content:"+";
    display:inline-block;
    width:14px;
    font-weight:700;
    color:var(--accent);
}
.rz-w-adv[open]>summary::before{content:"−"}
.rz-w-adv>summary:hover{color:var(--accent)}
.rz-w-adv-body{
    display:flex;
    flex-wrap:wrap;
    gap:10px 16px;
    padding:12px 0 2px;
}
.rz-w-field{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);flex:1;min-width:220px}
.rz-w-field>span{flex-shrink:0;width:52px}
.rz-w-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted);cursor:pointer;user-select:none}
.rz-w-check input{accent-color:var(--accent);width:14px;height:14px;margin:0}
.rz-w-tip{margin:0;flex-basis:100%;font-size:12.5px;color:var(--text-muted);line-height:1.7}

/* ============================================================
 * 5. 编辑器
 * ============================================================ */
.rz-w-editor{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 1px 2px rgba(20,40,30,.04);
    overflow:hidden;
}
.rz-w-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:6px 10px;
    border-bottom:1px solid var(--border);
    background:var(--surface-soft);
}
.rz-w-tools{display:flex;align-items:center;flex-wrap:wrap;gap:2px;min-width:0}
.rz-w-sep{width:1px;height:15px;margin:0 5px;background:var(--border-strong);flex-shrink:0}
.rz-tool{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    white-space:nowrap;
    gap:4px;
    min-width:28px;
    height:28px;
    padding:0 6px;
    border:0;
    border-radius:4px;
    background:transparent;
    color:var(--text-muted);
    font-family:inherit;
    font-size:13px;
    line-height:1;
    cursor:pointer;
    transition:background .16s,color .16s;
}
.rz-tool:hover{background:var(--accent-soft);color:var(--accent)}
.rz-tool:active{transform:translateY(1px)}
.rz-tool b,.rz-tool i,.rz-tool s{font-size:14px;font-style:normal}
.rz-tool i{font-family:Georgia,"Times New Roman",serif;font-style:italic}
.rz-tool s{text-decoration:line-through}
.rz-tool--bili{color:var(--accent);padding:0 8px}
.rz-tool--bili .rz-tool-txt{font-size:12.5px}

.rz-w-tabs{display:flex;gap:2px;flex-shrink:0;padding:2px;border-radius:5px;background:rgba(0,0,0,.03)}
.rz-tab{
    padding:3px 12px;
    border:0;
    border-radius:4px;
    background:transparent;
    font-family:inherit;
    font-size:13px;
    color:var(--text-muted);
    cursor:pointer;
    transition:background .16s,color .16s,box-shadow .16s;
}
.rz-tab:hover{color:var(--accent)}
.rz-tab.is-on{background:var(--surface);color:var(--text-strong);font-weight:500;box-shadow:0 1px 2px rgba(20,40,30,.1)}

/* B 站视频面板 */
.rz-w-video{
    padding:11px 14px 12px;
    border-bottom:1px solid var(--border);
    background:var(--accent-soft);
}
.rz-w-video-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rz-w-video-row .rz-w-input{background:var(--surface);flex:1 1 260px}
.rz-w-video-tip{margin:7px 0 0;font-size:12.5px;color:var(--text-muted);line-height:1.7}
.rz-w-video-tip code{
    padding:1px 5px;
    border-radius:3px;
    background:rgba(var(--accent-rgb),.12);
    font-size:12px;
    color:var(--accent-dark);
}
.rz-w-video-err{margin:6px 0 0;font-size:12.5px;color:#c0392b;line-height:1.7}
.rz-w-video-err.is-ok{color:var(--accent-dark)}

/* 编辑区 / 预览 */
.rz-w-panes{position:relative}
/* textarea 自己写了 display:block，会盖掉浏览器默认的 [hidden]{display:none}，这里补回来 */
.rz-w-text[hidden],
.rz-w-preview[hidden],
.rz-w-video[hidden]{display:none !important}
.rz-w-text{
    display:block;
    width:100%;
    min-height:420px;
    padding:16px 20px;
    border:0;
    background:transparent;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"PingFang SC","Microsoft YaHei",monospace;
    font-size:14.5px;
    line-height:1.9;
    color:var(--text);
    resize:vertical;
    outline:none;
    tab-size:4;
}
.rz-w-text::placeholder{color:var(--text-muted);font-family:var(--font-family)}
.rz-w-preview{
    min-height:420px;
    padding:16px 20px;
    font-size:1em;
    overflow-wrap:break-word;
}
.rz-w-preview:empty::before{content:"空空如也，切到「编写」写点什么吧。";color:var(--text-muted);font-size:13px}
.rz-w-preview hr{border:0;border-top:1px solid var(--border);margin:20px 0}
.rz-w-preview table{width:100%;border-collapse:collapse;font-size:.95em}
.rz-w-preview th,.rz-w-preview td{border:1px solid var(--border);padding:6px 10px}
.rz-w-preview th{background:var(--surface-soft)}
.rz-w-preview pre{
    margin:14px 0;
    padding:12px 14px;
    border-radius:var(--radius);
    background:#1e2b31;
    color:#dfe9ec;
    font-size:13px;
    line-height:1.75;
    overflow:auto;
}
.rz-w-preview pre code{padding:0;background:none;color:inherit;font-size:inherit}
.rz-w-preview code{
    padding:1.5px 5px;
    border-radius:3px;
    background:rgba(0,0,0,.05);
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:.9em;
}
.rz-w-preview blockquote{
    margin:14px 0;
    padding:2px 14px;
    border-left:3px solid rgba(var(--accent-rgb),.45);
    background:var(--surface-soft);
    color:var(--text-muted);
    border-radius:0 var(--radius) var(--radius) 0;
}

/* ============================================================
 * 6. 底部操作条
 * ============================================================ */
.rz-w-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-top:14px;
    padding:10px 16px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 1px 2px rgba(20,40,30,.04);
}
.rz-w-info{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted);flex-wrap:wrap}
.rz-w-info #rz-w-count{color:var(--text-strong);font-weight:600}
.rz-w-state.is-dirty{color:#d98324}
.rz-w-state.is-saved{color:var(--accent)}
.rz-w-md-toggle{margin-left:4px;padding-left:8px;border-left:1px solid var(--border)}
.rz-w-actions{display:flex;align-items:center;gap:8px;margin-left:auto}

/* ============================================================
 * 7. 未登录 / 无权限
 * ============================================================ */
.rz-w-gate{
    max-width:460px;
    margin:36px auto 54px;
    padding:34px 30px 30px;
    text-align:center;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow-card);
}
.rz-w-gate-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    margin-bottom:14px;
    border-radius:50%;
    color:var(--accent);
    background:var(--accent-soft);
}
.rz-w-gate-title{margin:0 0 8px;font-size:17px;color:var(--text-strong);font-weight:600}
.rz-w-gate-desc{margin:0;font-size:13.5px;line-height:1.9;color:var(--text-muted)}
.rz-w-gate-actions{display:flex;justify-content:center;gap:10px;margin:20px 0 0;flex-wrap:wrap}

/* ============================================================
 * 8. 响应式
 * ============================================================ */
@media (max-width:868px){
    .rz-write{--rz-w-gap:12px}
    .rz-w-head{padding:0 2px 12px}
    .rz-w-head-title{font-size:17px}
    .rz-w-card{padding:14px 15px 12px}
    .rz-w-title{font-size:18px}
    .rz-w-row{flex-direction:column;gap:5px}
    .rz-w-label{width:auto;padding-top:0}
    .rz-w-text,.rz-w-preview{min-height:300px;padding:12px 14px}
    .rz-w-text{font-size:14px}
    .rz-toolbar{padding:5px 7px;gap:6px;flex-wrap:nowrap}
    /* 手机上工具栏单行横向滑动，比折成三行更省地方 */
    .rz-w-tools{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .rz-w-tools::-webkit-scrollbar{display:none}
    .rz-w-tabs{flex-shrink:0}
    .rz-w-foot{padding:10px 13px}
    .rz-w-actions{width:100%}
    .rz-w-actions .rz-btn{flex:1}
    .rz-w-gate{margin:20px auto 40px;padding:26px 20px 24px}
    .rz-w-tool-txt{display:none}
    .rz-tool--bili .rz-tool-txt{display:inline}
}
@media (max-width:430px){
    .rz-tool{min-width:26px;height:26px;padding:0 4px}
    .rz-w-sep{margin:0 2px}
    .rz-tool--bili{padding:0 6px}
    .rz-tool--bili .rz-tool-txt{display:none}
}