/* ========================================
   XFORUM DESIGN SYSTEM
   组件类承载重复结构，工具类负责局部微调。
======================================== */

/* =========================
   ROOT VARIABLES
========================= */
:root{
    /* Colors */
    --bg:#f5f7fb;
    --panel:#fff;
    --soft:#f1f5f9;
    --hover:#e8edf5;
    --border:#dbe2ea;

    --text:#0f172a;
    --text-bg:#0f172a;
    --sub:#475569;
    --muted:#94a3b8;
    --muted-light:#e2e8f0;

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --primary-light:#dbeafe;
    --danger:#dc2626;
    --danger-dark:#b91c1c;
    --danger-light:#fee2e2;
    --success:#16a34a;
    --success-light:#dcfce7;
    --warning:#ca8a04;
    --warning-light:#fef9c3;

    /* Border Radius */
    --radius:8px;
    --radius-sm:4px;
    --radius-lg:12px;
    --radius-full:999px;

    /* Shadows */
    --shadow-sm:0 1px 2px rgba(0,0,0,.04);
    --shadow-lg:0 8px 24px rgba(0,0,0,.1);

    /* Spacing */
    --space-0:0;
    --space-0-5:2px;
    --space-1:4px;
    --space-1-5:6px;
    --space-2:8px;
    --space-2-5:10px;
    --space-3:12px;
    --space-3-5:14px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-8:32px;
    --space-10:40px;
    --space-12:48px;

    /* Layout */
    --control-height:36px;
    --header-height:56px;
    --container:1100px;
}

.dark{
    color-scheme:dark;

    --bg:#111315;
    --panel:#181b20;
    --soft:#20242b;
    --hover:#2a2f38;
    --border:#343a45;

    --text:#f4f4f5;
    --text-bg:#0b0d10;
    --sub:#c2c8d0;
    --muted:#8b95a3;
    --muted-light:#3f4652;

    --primary:#60a5fa;
    --primary-dark:#3b82f6;
    --primary-light:#1e3a5f;
    --danger:#f87171;
    --danger-dark:#ef4444;
    --danger-light:#4a1f26;
    --success:#4ade80;
    --success-light:#183b25;
    --warning:#facc15;
    --warning-light:#423913;

    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow-lg:0 8px 24px rgba(0,0,0,.5);
}

/* =========================
   RESET
========================= */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button,input,textarea,select{font:inherit}
h1,h2,h3,h4,h5,h6,p,ul,ol{margin:0}

/* =========================
   DISPLAY
========================= */
.hidden{display:none!important}
.block{display:block}
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}

/* =========================
   FLEX
========================= */
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1}
.items-start{align-items:flex-start}
.items-center{align-items:center}
.justify-end{justify-content:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}

/* =========================
   GRID
========================= */
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* =========================
   GAP
========================= */
.gap-1{gap:var(--space-1)}
.gap-2{gap:var(--space-2)}
.gap-3{gap:var(--space-3)}
.gap-4{gap:var(--space-4)}

/* =========================
   WIDTH & HEIGHT
========================= */
.w-auto{width:auto}
.w-full{width:100%}
.min-w-0{min-width:0}
.max-w-full{max-width:100%}

.h-full{height:100%}
.min-h-screen{min-height:100vh}

/* =========================
   PADDING
========================= */
.p-2{padding:var(--space-2)}
.p-3{padding:var(--space-3)}
.p-4{padding:var(--space-4)}

.px-2{padding-left:var(--space-2);padding-right:var(--space-2)}
.px-3{padding-left:var(--space-3);padding-right:var(--space-3)}

.py-1{padding-top:var(--space-1);padding-bottom:var(--space-1)}
.py-2{padding-top:var(--space-2);padding-bottom:var(--space-2)}
.py-8{padding-top:var(--space-8);padding-bottom:var(--space-8)}

.pt-3{padding-top:var(--space-3)}
.pt-5{padding-top:var(--space-5)}
.pt-6{padding-top:var(--space-6)}

.pb-6{padding-bottom:var(--space-6)}

.pl-4{padding-left:var(--space-4)}
.pl-5{padding-left:var(--space-5)}

/* =========================
   MARGIN
========================= */
.mx-auto{margin-left:auto;margin-right:auto}

.mx-1{margin-left:var(--space-1);margin-right:var(--space-1)}

.my-4{margin-top:var(--space-4);margin-bottom:var(--space-4)}

.mt-1{margin-top:var(--space-1)}
.mt-2{margin-top:var(--space-2)}
.mt-3{margin-top:var(--space-3)}
.mt-4{margin-top:var(--space-4)}
.mt-6{margin-top:var(--space-6)}

.mb-1{margin-bottom:var(--space-1)}
.mb-2{margin-bottom:var(--space-2)}
.mb-3{margin-bottom:var(--space-3)}
.mb-4{margin-bottom:var(--space-4)}
.mb-6{margin-bottom:var(--space-6)}

/* =========================
   TEXT
========================= */
.text-xs{font-size:11px}
.text-sm{font-size:12px}
.text-lg{font-size:16px}
.text-xl{font-size:18px}
.text-2xl{font-size:20px}

.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}

.text-left{text-align:left}
.text-center{text-align:center}

.leading-normal{line-height:1.5}
.leading-relaxed{line-height:1.625}

.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-nowrap{white-space:nowrap}

/* =========================
   TEXT COLOR
========================= */
.text-text{color:var(--text)}
.text-primary{color:var(--primary)}
.text-danger{color:var(--danger)}
.text-success{color:var(--success)}
.text-warning{color:var(--warning)}
.text-sub{color:var(--sub)}
.text-muted{color:var(--muted)}
.text-white{color:#fff}

/* =========================
   BACKGROUND
========================= */
.bg-panel{background-color:var(--panel)}
.bg-soft{background-color:var(--soft)}
.bg-primary{background-color:var(--primary)}
.bg-primary-light{background-color:var(--primary-light)}
.bg-danger-light{background-color:var(--danger-light)}
.bg-success-light{background-color:var(--success-light)}
.bg-warning-light{background-color:var(--warning-light)}
.bg-muted-light{background-color:var(--muted-light)}
.bg-text{background-color:var(--text-bg)}

/* =========================
   BORDER
========================= */
.border{border:1px solid var(--border)}
.border-0{border:0}
.border-t{border-top:1px solid var(--border)}
.border-b{border-bottom:1px solid var(--border)}

.border-primary{border-color:var(--primary)}

/* =========================
   BORDER RADIUS
========================= */
.rounded-sm{border-radius:var(--radius-sm)}
.rounded{border-radius:var(--radius)}
.rounded-lg{border-radius:var(--radius-lg)}
.rounded-full{border-radius:var(--radius-full)}

.rounded-t{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}

/* =========================
   OVERFLOW
========================= */
.overflow-hidden{overflow:hidden}

/* =========================
   CURSOR
========================= */
.cursor-pointer{cursor:pointer}

/* =========================
   OPACITY
========================= */
.opacity-50{opacity:0.5}

/* =========================
   INTERACTIVE
========================= */
.select-all{user-select:all}

/* =========================
   TRANSITION
========================= */
.transition-colors{transition:color 0.15s ease,background-color 0.15s ease,border-color 0.15s ease}
.transition-transform{transition:transform 0.15s ease}
.rotate-90{transform:rotate(90deg)}

/* =========================
   LAYOUT UTILITIES
========================= */
.container{width:min(var(--container),100%);margin-left:auto;margin-right:auto}

/* =========================
   OBJECT FIT
========================= */
.object-cover{object-fit:cover}

/* =========================
   VISIBILITY
========================= */
.invisible{visibility:hidden}

/* =========================
   COMPONENTS
========================= */
.card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
}
.card-lg{border-radius:var(--radius-lg)}
.card-clip{overflow:hidden}
.card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-3);
    padding:var(--space-3-5) var(--space-4);
    border-bottom:1px solid var(--border);
}
.card-header-col{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:var(--space-3);
    padding:var(--space-3-5) var(--space-4);
    border-bottom:1px solid var(--border);
}
.card-body{padding:var(--space-4)}
.card-body-flush{padding:0}
.page-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 280px;
    gap:var(--space-4);
}
.main-stack{
    display:flex;
    flex-direction:column;
    gap:var(--space-4);
    min-width:0;
}
.sidebar-stack{
    display:flex;
    flex-direction:column;
    gap:var(--space-4);
}
.list-stack{display:flex;flex-direction:column}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-1-5);
    height:var(--control-height);
    padding:0 var(--space-4);
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--panel);
    color:var(--text);
    font-size:14px;
    font-weight:500;
    line-height:1;
    white-space:nowrap;
    cursor:pointer;
    transition:color .15s ease,background-color .15s ease,border-color .15s ease,transform .15s ease;
}
.btn:hover{background:var(--hover)}
.btn:active{transform:scale(.98)}
.btn:disabled,.btn.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.btn-soft{background:var(--soft);border-color:var(--border);color:var(--text)}
.btn-soft:hover{background:var(--hover)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover{background:var(--danger-dark);border-color:var(--danger-dark)}
.btn-ghost{border-color:transparent;background:transparent;color:var(--sub)}
.btn-ghost:hover{background:var(--hover);color:var(--text)}
.btn-sm{height:30px;padding:0 var(--space-3);font-size:12px}
.btn-block{width:100%}
.btn-icon{width:var(--control-height);padding:0}

.form-group,.form-field{display:flex;flex-direction:column;gap:var(--space-1-5)}
.form-field{margin-bottom:var(--space-4)}
.form-field-lg{margin-bottom:var(--space-6)}
.form-label{font-size:12px;font-weight:500;color:var(--text)}
.form-label-block{display:block;margin-bottom:var(--space-1-5)}
.form-section{
    margin-bottom:var(--space-4);
    padding:var(--space-4);
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--soft);
}
.form-section-title{font-size:12px;font-weight:500;color:var(--text);margin-bottom:var(--space-4)}
.form-control{
    width:100%;
    max-width:500px;
    height:var(--control-height);
    min-height:var(--control-height);
    padding:0 var(--space-3);
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--panel);
    color:var(--text);
    font-size:14px;
    line-height:1.5;
    transition:border-color .15s ease,background-color .15s ease,color .15s ease;
}
.form-control:focus{outline:none;border-color:var(--primary)}
textarea.form-control{
    max-width:100%;
    height:auto;
    min-height:120px;
    padding:var(--space-3);
    resize:vertical;
    line-height:1.6;
}

.alert{
    display:none;
}
#site-tip{
    display:none;
    position:fixed;
    top:24px;
    left:50%;
    transform:translateX(-50%) translateY(-20px);
    z-index:9999;
    opacity:0;
    transition:all .3s ease;
}
.site-tip-panel{
    padding:10px 16px;
    border-radius:var(--radius);
    box-shadow:0 10px 30px rgba(0,0,0,.16);
    color:#fff;
    font-size:13px;
    font-weight:600;
}
.site-tip-danger{background:var(--danger)}
.site-tip-success{background:var(--success)}

.form-actions{
    display:flex;
    justify-content:flex-end;
    gap:var(--space-3);
}
.badge{
    display:inline-flex;
    align-items:center;
    gap:var(--space-1);
    padding:var(--space-0-5) var(--space-2);
    border-radius:var(--radius-full);
    font-size:11px;
    font-weight:500;
    line-height:1.4;
}
.badge-xs{padding:var(--space-0-5) var(--space-1-5);font-size:10px}
.badge-soft{background:var(--soft);color:var(--sub)}
.badge-primary{background:var(--primary-light);color:var(--primary)}
.badge-success{background:var(--success-light);color:var(--success)}
.badge-danger{background:var(--danger-light);color:var(--danger)}
.badge-warning{background:var(--warning-light);color:var(--warning)}
.badge-credit{padding-top:var(--space-2);padding-bottom:var(--space-2)}
.rank-badge{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:var(--space-5);
    height:var(--space-5);
    border-radius:var(--radius-sm);
    background:var(--soft);
    color:var(--muted);
    font-size:11px;
    font-weight:600;
}
.rank-badge.hot{background:var(--primary-light);color:var(--primary)}
.rank-badge.success{background:var(--success-light);color:var(--success)}

.pill-nav{padding:var(--space-2)}
.pill-nav-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pill-nav-item{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-2);
    padding:var(--space-2) var(--space-4);
    border-radius:var(--radius-full);
    background:var(--soft);
    color:var(--sub);
    font-size:12px;
    font-weight:500;
    transition:color .15s ease,background-color .15s ease,box-shadow .15s ease;
}
.pill-nav-item:hover{background:var(--hover);color:var(--text)}
.pill-nav-item.active{background:var(--primary);color:#fff;font-weight:600;box-shadow:var(--shadow-sm)}
.pill-nav-count{font-size:11px;color:var(--muted)}
.pill-nav-item.active .pill-nav-count{color:rgba(255,255,255,.7)}

.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse}
.table th{
    text-align:left;
    padding:var(--space-2) var(--space-4);
    font-size:12px;
    font-weight:600;
    color:var(--muted);
    border-bottom:1px solid var(--border);
    background:var(--soft);
}
.table td{
    padding:var(--space-3) var(--space-4);
    border-bottom:1px solid var(--border);
}
.table tr:hover td{background:var(--hover)}
.table-empty{
    padding:var(--space-8) var(--space-4)!important;
    text-align:center;
    color:var(--muted);
}

.modal{
    position:fixed;
    inset:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.5);
}
.modal-panel{
    width:100%;
    max-width:400px;
    margin:0 var(--space-4);
    overflow:hidden;
    border-radius:var(--radius-lg);
    background:var(--panel);
    box-shadow:var(--shadow-lg);
}
.modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    border-bottom:1px solid var(--border);
}
.modal-body{padding:var(--space-4)}
.modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    border-top:1px solid var(--border);
    background:var(--soft);
}
.modal-close{
    border:0;
    background:transparent;
    color:var(--muted);
    font-size:20px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
}
.modal-close:hover{color:var(--text)}

.avatar{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    overflow:hidden;
    border-radius:var(--radius-full);
    background:var(--primary-light);
    color:var(--muted);
    font-weight:600;
}
.avatar-sm{width:32px;height:32px;font-size:12px}
.avatar-md{width:40px;height:40px;font-size:14px}
.avatar-lg{width:56px;height:56px;font-size:18px}
.avatar-xl{width:64px;height:64px;font-size:20px}

.thread-item,.list-link{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    padding:var(--space-3);
    border-bottom:1px solid var(--border);
    transition:background-color .15s ease,color .15s ease;
}
.thread-item:last-child,.list-link:last-child{border-bottom:0}
.thread-item:hover,.list-link:hover{background:var(--hover)}
.list-link-sm{padding:var(--space-2)}
.list-link-pad{padding-left:var(--space-4);padding-right:var(--space-4)}
.thread-item--compact{gap:var(--space-2)}
.thread-item-body{flex:1;min-width:0}
.thread-item-title{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--space-2);
}
.thread-item-subject{min-width:0}
.thread-item-badge,.thread-item-avatar{flex-shrink:0}
.thread-item-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--space-2);
    margin-top:var(--space-1);
    color:var(--muted);
    font-size:12px;
}
.thread-item-meta span{
    display:inline-flex;
    align-items:center;
    gap:3px;
    min-width:0;
}
.thread-meta-icon{
    width:12px;
    height:12px;
    flex-shrink:0;
    opacity:.55;
}
.thread-item-meta--compact{gap:var(--space-3)}
.thread-item-stats{
    display:flex;
    align-items:center;
    gap:var(--space-4);
    flex-shrink:0;
    font-size:12px;
}
.thread-item-stat{text-align:center}
.thread-item-chevron{
    width:var(--space-4);
    height:var(--space-4);
    flex-shrink:0;
    color:var(--muted);
}

.empty-state{padding:var(--space-8);text-align:center;color:var(--muted)}
.empty-state-sm{padding:var(--space-6)}
.toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    flex-wrap:wrap;
    padding:var(--space-3);
    border-bottom:1px solid var(--border);
}
.filter-link{
    padding:var(--space-1-5) var(--space-3);
    border-radius:var(--radius);
    color:var(--sub);
    font-size:12px;
    transition:color .15s ease,background-color .15s ease;
}
.filter-link:hover{background:var(--hover);color:var(--text)}
.filter-link.active{background:var(--primary-light);color:var(--primary)}
.section-footer{
    padding:var(--space-4);
    border-top:1px solid var(--border);
}
.auth-shell{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding-top:var(--space-8);
    padding-bottom:var(--space-8);
}
.site-header{
    height:var(--header-height);
    background:var(--panel);
    border-bottom:1px solid var(--border);
}
.site-brand{display:flex;align-items:center;gap:var(--space-2);font-size:16px;font-weight:700;color:var(--primary)}
.site-brand-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    background:#e9f8ef;
    box-shadow:0 4px 12px rgba(15,118,110,.18);
}
.site-brand-mark img{display:block;width:100%;height:100%;object-fit:cover}
.site-nav{display:flex;align-items:center;gap:var(--space-1)}
.site-nav-link{
    display:flex;
    align-items:center;
    gap:var(--space-1);
    padding:var(--space-1-5) var(--space-3);
    border-radius:var(--radius);
    color:var(--sub);
    transition:color .15s ease,background-color .15s ease;
}
.site-nav-link:hover{background:var(--hover);color:var(--text)}
.site-nav-link.active{background:var(--primary-light);color:var(--primary)}
.nav-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:16px;
    height:16px;
    padding:0 var(--space-1);
    border-radius:var(--radius-full);
    background:var(--primary);
    color:#fff;
    font-size:11px;
    line-height:1;
}
.mobile-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:50;
    background:var(--panel);
    border-top:1px solid var(--border);
}
.mobile-nav-list{display:flex;justify-content:space-around;height:56px}
.mobile-nav-link{
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--space-0-5);
    color:var(--muted);
    transition:color .15s ease;
}
.mobile-nav-link:hover,.mobile-nav-link.active{color:var(--primary)}
.pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-1);
    flex-wrap:wrap;
    padding:var(--space-4) 0;
}
.pagination-list{display:flex;align-items:center;gap:var(--space-1);flex-wrap:wrap}
.pagination-item,.pagination-ellipsis{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:var(--space-8);
    height:var(--space-8);
    padding:0 var(--space-2);
    border-radius:var(--radius);
    font-size:12px;
}
.pagination-item{color:var(--sub);transition:color .15s ease,background-color .15s ease}
.pagination-item:hover{background:var(--hover);color:var(--text)}
.pagination-item.active{background:var(--primary);color:#fff}
.pagination-ellipsis{color:var(--muted)}

.site-footer{
    color:var(--sub);
    border-top:1px solid var(--border);
    background:transparent;
}
.site-footer-panel{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:var(--space-3);
    padding:var(--space-4) 0;
    background:transparent;
    text-align:left;
}
.site-footer-main{display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.site-footer-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);width:100%;min-width:0}
.site-footer-brand{display:flex;align-items:center;justify-content:flex-start;gap:var(--space-3);min-width:0}
.site-footer-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    flex-shrink:0;
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    background:#e9f8ef;
    box-shadow:0 5px 14px rgba(15,118,110,.14);
}
.site-footer-mark img{display:block;width:100%;height:100%;object-fit:cover}
.site-footer-title{color:var(--text);font-weight:700;font-size:14px;line-height:1.25}
.site-footer-copy{color:var(--muted);font-size:12px;line-height:1.4}
.site-footer-desc{max-width:560px;color:var(--sub);font-size:12px;line-height:1.5}
.site-footer-qr{
    width:86px;
    height:86px;
    flex:0 0 86px;
    padding:var(--space-1-5);
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
    box-shadow:var(--shadow-sm);
}
.site-footer-qr img{display:block;width:100%;height:100%;object-fit:contain}
.app-reply-card{scroll-margin-top:calc(var(--header-height) + var(--space-4))}
.app-reply-prompt{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    padding:var(--space-4);
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:linear-gradient(135deg,var(--panel) 0%,var(--soft) 100%);
}
.app-reply-prompt-page{margin-top:var(--space-2)}
.app-reply-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    flex-shrink:0;
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    background:#e9f8ef;
    box-shadow:0 6px 18px rgba(15,118,110,.16);
}
.app-reply-icon img{display:block;width:100%;height:100%;object-fit:cover}
.app-reply-content{flex:1;min-width:0}
.app-reply-content h3{font-size:16px;font-weight:700;color:var(--text);margin-bottom:var(--space-1)}
.app-reply-content p{color:var(--sub);font-size:13px;line-height:1.7}
.app-reply-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);flex-wrap:wrap;flex-shrink:0}

/* =========================
   MINIMAL COMPONENTS
   (通用工具类扩展)
========================= */

/* Sizing */
.w-2{width:var(--space-2)}
.w-3\.5{width:var(--space-3-5)}
.w-4{width:var(--space-4)}
.w-5{width:var(--space-5)}
.w-6{width:var(--space-6)}
.w-7{width:28px}
.w-8{width:var(--space-8)}
.w-10{width:var(--space-10)}
.w-12{width:var(--space-12)}
.w-16{width:64px}
.w-20{width:80px}
.w-24{width:96px}

.min-w-50{min-width:200px}

.max-w-md{max-width:400px}
.max-w-xl{max-width:600px}

.h-2{height:var(--space-2)}
.h-3\.5{height:var(--space-3-5)}
.h-4{height:var(--space-4)}
.h-5{height:var(--space-5)}
.h-6{height:var(--space-6)}
.h-7{height:28px}
.h-8{height:var(--space-8)}
.h-10{height:var(--space-10)}
.h-12{height:var(--space-12)}

.min-h-30{min-height:120px}
.min-h-40{min-height:160px}
.min-h-50{min-height:200px}

/* Spacing aliases for Tailwind-like decimal class names */
.gap-0\.5{gap:var(--space-0-5)}
.px-1\.5{padding-left:var(--space-1-5);padding-right:var(--space-1-5)}
.py-0\.5{padding-top:var(--space-0-5);padding-bottom:var(--space-0-5)}
.py-1\.5{padding-top:var(--space-1-5);padding-bottom:var(--space-1-5)}
.mt-0\.5{margin-top:var(--space-0-5)}
.ml-2{margin-left:var(--space-2)}

/* Text */
.font-mono{font-family:'Consolas','Monaco',monospace}
.text-white\/70{color:rgba(255,255,255,.7)}
.text-gray-400{color:#9ca3af}
.text-amber-300{color:#fbbf24}

/* Background */
.bg-black\/20{background-color:rgba(0,0,0,.2)}

/* Border */
.border-border{border-color:var(--border)}
.border-l-3{border-left:3px solid var(--border)}
.border-white\/8{border-color:rgba(255,255,255,.08)}
.border-white\/10{border-color:rgba(255,255,255,.1)}

/* Layout */
.flex-shrink-0{flex-shrink:0}
.list-disc{list-style:disc}
.list-decimal{list-style:decimal}

/* Child state */
.last\:mb-0:last-child{margin-bottom:0}

/* Pseudo-class variants */
.hover\:bg-hover:hover{background-color:var(--hover)}
.hover\:text-primary:hover{color:var(--primary)}
.hover\:text-white:hover{color:#fff}
.hover\:underline:hover{text-decoration:underline}

/* Animation */
.animate-highlight{
    animation:highlight-fade 2.6s ease;
}
@keyframes highlight-fade{
    0%,30%{background-color:var(--success-light)}
    100%{background-color:transparent}
}

/* =========================
   MOBILE RESPONSIVE
========================= */
@media (max-width:768px){
    body{padding-bottom:56px}
    .page-grid{grid-template-columns:repeat(1,minmax(0,1fr))}
    .sidebar-stack{display:none!important}
    .hide-mobile{display:none!important}
    .app-reply-prompt{align-items:flex-start;flex-direction:column}
    .app-reply-actions{width:100%;justify-content:flex-start}
    .app-reply-actions .btn{width:100%}
    .site-footer-panel{gap:var(--space-3)}
    .site-footer-head{align-items:flex-start;flex-direction:column;gap:var(--space-2)}
    .site-footer-head .btn{width:auto}
}

@media (min-width:769px){
    .mobile-only{display:none!important}
}