/*==================================================
ROOMI 2.0 Forum System
allforumstyle.css V3 FINAL

Creator Forum
Trade Forum
Family Forum

==================================================*/



/*==================================================
ROOT
==================================================*/

:root{

    /*==============================
    Color
    ==============================*/

    --forum-primary: var(--roomi-purple);

    --forum-secondary: var(--roomi-title-purple);

    --forum-dark: var(--roomi-dark-purple);

    --forum-bg: rgba(255,255,255,.78);

    --forum-card: #ffffff;

    --forum-border: rgba(255,255,255,.35);

    --forum-line: #ececec;

    --forum-text: #444;

    --forum-text-light: #777;

    --forum-shadow:

        0 10px 28px rgba(0,0,0,.08);

    --forum-shadow-hover:

        0 16px 34px rgba(0,0,0,.12);

    --forum-radius:22px;

    --forum-radius-small:14px;

    --forum-transition:.28s;

}



/*==================================================
RESET
==================================================*/

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



img{

    max-width:100%;

    display:block;

}



button{

    font-family:inherit;

}



input,
select,
textarea{

    font-family:inherit;

}



a{

    color:inherit;

    text-decoration:none;

}



ul{

    list-style:none;

}



/*==================================================
BODY
==================================================*/

body{

    font-family:

        "Zen Maru Gothic",

        sans-serif;

    color:var(--forum-text);

    line-height:1.8;

}



/*==================================================
Typography
==================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    line-height:1.4;

    color:#333;

}



p{

    color:var(--forum-text-light);

}



strong{

    font-weight:700;

}



/*==================================================
Selection
==================================================*/

::selection{

    background:

        rgba(143,198,255,.35);

}



/*==================================================
Scrollbar
==================================================*/

::-webkit-scrollbar{

    width:10px;

}



::-webkit-scrollbar-track{

    background:#f5f5f5;

}



::-webkit-scrollbar-thumb{

    background:#d8b5ff;

    border-radius:20px;

}



::-webkit-scrollbar-thumb:hover{

    background:#b98bf5;

}



/*==================================================
Animation
==================================================*/

@keyframes forumFade{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:none;

    }

}



@keyframes forumPop{

    from{

        transform:scale(.95);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}



@keyframes forumRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



/*==================================================
Utility
==================================================*/

.flex{

    display:flex;

}



.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}



.space-between{

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.text-center{

    text-align:center;

}



.hidden{

    display:none;

}



.show{

    display:block;

}



.mt10{

    margin-top:10px;

}



.mt20{

    margin-top:20px;

}



.mt30{

    margin-top:30px;

}



.mb10{

    margin-bottom:10px;

}



.mb20{

    margin-bottom:20px;

}



.mb30{

    margin-bottom:30px;

}
/*==================================================
Forum Layout
==================================================*/

.forum-page{

    width:min(1400px,94%);

    margin:40px auto 80px;

    animation:forumFade .35s ease;

}


.forum-layout{

    display:grid;

    grid-template-columns:minmax(0,2.7fr) minmax(280px,.95fr);

    gap:28px;

    align-items:start;

}


.forum-content{

    min-width:0;

}


.forum-sidebar{

    display:flex;

    flex-direction:column;

    gap:22px;

    min-width:0;

}



/*==================================================
Forum Card
==================================================*/

.forum-card{

    background:var(--forum-card);

    border-radius:var(--forum-radius);

    box-shadow:var(--forum-shadow);

    overflow:hidden;

    transition:var(--forum-transition);

}


.forum-card:hover{

    box-shadow:var(--forum-shadow-hover);

}



/*==================================================
Breadcrumb
==================================================*/

.breadcrumb{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:24px;

    font-size:14px;

    color:#777;

}


.breadcrumb a{

    transition:.25s;

}


.breadcrumb a:hover{

    color:var(--forum-primary);

}


.breadcrumb .current{

    color:var(--forum-dark);

    font-weight:700;

}



/*==================================================
Hero
==================================================*/

.forum-hero{

    background:rgba(255,255,255,.82);

    border-radius:28px;

    padding:38px 30px;

    margin-bottom:26px;

    text-align:center;

    box-shadow:var(--forum-shadow);

    backdrop-filter:blur(10px);

    overflow:hidden;

    position:relative;

}


.forum-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.35),

            rgba(255,255,255,0)

        );

    pointer-events:none;

}


.forum-title{

    position:relative;

    z-index:2;

}


.forum-title h1{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    font-size:46px;

    color:var(--forum-dark);

    margin-bottom:12px;

}


.forum-title p{

    max-width:760px;

    margin:auto;

    font-size:16px;

    color:#666;

}



/*==================================================
Forum Section Title
==================================================*/

.section-title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:18px;

}


.section-title h2{

    font-size:24px;

    color:var(--forum-dark);

}


.section-title small{

    color:#888;

}



/*==================================================
Glass Card
==================================================*/

.glass-card{

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(8px);

    border:1px solid rgba(255,255,255,.4);

    border-radius:20px;

    box-shadow:var(--forum-shadow);

}



/*==================================================
Divider
==================================================*/

.forum-divider{

    height:1px;

    background:#ececec;

    margin:24px 0;

}



/*==================================================
Content Spacing
==================================================*/

.forum-block{

    margin-bottom:28px;

}
/*==================================================
Toolbar
==================================================*/

.forum-toolbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    margin-bottom:26px;

    padding:18px 22px;

    background:rgba(255,255,255,.82);

    border-radius:20px;

    box-shadow:var(--forum-shadow);

    backdrop-filter:blur(8px);

}



/*==================================================
Toolbar Left / Right
==================================================*/

.toolbar-left{

    flex:1;

    min-width:0;

}


.toolbar-right{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:12px;

    flex-wrap:wrap;

}



/*==================================================
Search
==================================================*/

.forum-search{

    display:flex;

    align-items:center;

    width:100%;

    max-width:560px;

}


.forum-search input{

    flex:1;

    min-width:0;

    height:46px;

    padding:0 18px;

    border:2px solid #e6e6e6;

    border-right:none;

    border-radius:12px 0 0 12px;

    background:#fff;

    color:var(--forum-text);

    font-size:15px;

    transition:.25s;

}


.forum-search input:focus{

    outline:none;

    border-color:var(--forum-primary);

}


.forum-search input::placeholder{

    color:#999;

}


.forum-search button{

    width:54px;

    height:46px;

    border:none;

    border-radius:0 12px 12px 0;

    background:var(--forum-primary);

    color:#fff;

    cursor:pointer;

    transition:.25s;

}


.forum-search button:hover{

    background:var(--forum-secondary);

}



/*==================================================
Sort
==================================================*/

.forum-sort{

    min-width:150px;

    height:46px;

    padding:0 16px;

    border:2px solid #e6e6e6;

    border-radius:12px;

    background:#fff;

    color:#555;

    font-size:15px;

    cursor:pointer;

    transition:.25s;

}


.forum-sort:hover{

    border-color:var(--forum-primary);

}


.forum-sort:focus{

    outline:none;

    border-color:var(--forum-primary);

}



/*==================================================
Button
==================================================*/

.btn-post,
.btn-normal{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:46px;

    padding:0 22px;

    border:none;

    border-radius:12px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:var(--forum-transition);

}



/*==================================================
Primary Button
==================================================*/

.btn-post{

    background:linear-gradient(
        135deg,
        var(--forum-primary),
        var(--forum-secondary)
    );

    color:#fff;

}


.btn-post:hover{

    transform:translateY(-2px);

    box-shadow:var(--forum-shadow-hover);

}



/*==================================================
Secondary Button
==================================================*/

.btn-normal{

    background:#fff;

    border:2px solid #e6e6e6;

    color:#555;

}


.btn-normal:hover{

    border-color:var(--forum-primary);

    color:var(--forum-primary);

}



/*==================================================
Toolbar Badge
==================================================*/

.toolbar-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:22px;

    height:22px;

    padding:0 8px;

    border-radius:999px;

    background:#ff5d8f;

    color:#fff;

    font-size:12px;

    font-weight:700;

}



/*==================================================
Quick Action
==================================================*/

.quick-action{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}


.quick-action a{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:10px 14px;

    border-radius:10px;

    background:#fff;

    color:#666;

    transition:.25s;

}


.quick-action a:hover{

    background:var(--forum-primary);

    color:#fff;

}

/*==================================================
Forum Category
==================================================*/

.forum-table{

    display:flex;

    flex-direction:column;

    gap:18px;

}


.forum-row{

    display:grid;

    grid-template-columns:

        minmax(0,3fr)

        minmax(80px,.8fr)

        minmax(80px,.8fr)

        minmax(180px,1.2fr);

    align-items:center;

    gap:18px;

    padding:18px 22px;

    background:var(--forum-card);

    border-radius:18px;

    box-shadow:var(--forum-shadow);

    transition:var(--forum-transition);

    overflow:hidden;

}


.forum-row:hover{

    transform:translateY(-3px);

    box-shadow:var(--forum-shadow-hover);

}



/*==================================================
Forum Left
==================================================*/

.col-forum{

    display:flex;

    align-items:center;

    gap:18px;

    min-width:0;

}



/*==================================================
Forum Icon
==================================================*/

.forum-icon{

    width:58px;

    height:58px;

    border-radius:16px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    background:linear-gradient(

        135deg,

        rgba(143,198,255,.18),

        rgba(147,77,204,.12)

    );

}



/*==================================================
Forum Info
==================================================*/

.forum-info{

    min-width:0;

}


.forum-info h3{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:20px;

    color:var(--forum-dark);

    margin-bottom:6px;

}


.forum-info p{

    font-size:14px;

    color:#777;

}



/*==================================================
Count
==================================================*/

.col-topic,
.col-reply{

    text-align:center;

}


.count-number{

    display:block;

    font-size:20px;

    font-weight:700;

    color:var(--forum-primary);

}


.count-label{

    display:block;

    margin-top:3px;

    font-size:12px;

    color:#888;

}



/*==================================================
Last Post
==================================================*/

.col-last{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:3px;

    min-width:0;

}


.last-user{

    font-weight:700;

    color:var(--forum-dark);

}


.last-time{

    font-size:13px;

    color:#888;

}



/*==================================================
Badge
==================================================*/

.forum-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:4px 10px;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

    white-space:nowrap;

}


.badge-hot{

    background:#fff2f6;

    color:#ff5b92;

}


.badge-new{

    background:#eefcf3;

    color:#29a45c;

}


.badge-notice{

    background:#fff6d8;

    color:#bb7b00;

}



/*==================================================
Forum Description Link
==================================================*/

.forum-info a{

    transition:.25s;

}


.forum-info a:hover{

    color:var(--forum-primary);

}



/*==================================================
Sticky
==================================================*/

.forum-row.sticky{

    border-left:5px solid #ffc54d;

}



/*==================================================
Lock
==================================================*/

.forum-row.locked{

    opacity:.72;

}


.forum-row.locked:hover{

    opacity:1;

}



/*==================================================
Category Card
==================================================*/

.category-card{

    background:rgba(255,255,255,.82);

    border-radius:22px;

    padding:24px;

    box-shadow:var(--forum-shadow);

}



/*==================================================
Mini Description
==================================================*/

.category-description{

    margin-top:6px;

    font-size:13px;

    color:#888;

}

/*==================================================
Article Table
==================================================*/

.article-table{

    display:flex;

    flex-direction:column;

    background:var(--forum-card);

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--forum-shadow);

}



/*==================================================
Article Header
==================================================*/

.article-header{

    display:grid;

    grid-template-columns:

        minmax(0,2.8fr)

        minmax(90px,.9fr)

        minmax(70px,.7fr)

        minmax(70px,.7fr)

        minmax(170px,1.2fr);

    align-items:center;

    gap:18px;

    padding:16px 22px;

    background:linear-gradient(

        135deg,

        var(--forum-primary),

        var(--forum-secondary)

    );

    color:#fff;

    font-weight:700;

    font-size:14px;

}


.article-header>div{

    text-align:center;

}


.article-header>div:first-child{

    text-align:left;

}



/*==================================================
Article Row
==================================================*/

.article-row{

    display:grid;

    grid-template-columns:

        minmax(0,2.8fr)

        minmax(90px,.9fr)

        minmax(70px,.7fr)

        minmax(70px,.7fr)

        minmax(170px,1.2fr);

    align-items:center;

    gap:18px;

    padding:18px 22px;

    border-top:1px solid var(--forum-line);

    transition:var(--forum-transition);

    width:100%;

    overflow:hidden;

}


.article-row:hover{

    background:#fcf8ff;

    transform:translateX(4px);

}



/*==================================================
Title
==================================================*/

.article-title{

    display:flex;

    align-items:center;

    gap:12px;

    min-width:0;

}


.article-icon{

    width:34px;

    height:34px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    background:#f5f6fb;

    font-size:18px;

}


.article-subject{

    flex:1;

    min-width:0;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    font-size:15px;

    font-weight:700;

    color:var(--forum-text);

}


.article-row:hover .article-subject{

    color:var(--forum-primary);

}



/*==================================================
Tag
==================================================*/

.article-tag{

    flex-shrink:0;

    padding:4px 10px;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

}



/*==================================================
Author
==================================================*/

.article-author{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    text-align:center;

    font-weight:600;

    color:#666;

}



/*==================================================
Reply / View
==================================================*/

.article-reply,
.article-view{

    text-align:center;

    font-weight:700;

    color:var(--forum-primary);

}



/*==================================================
Last Reply
==================================================*/

.article-last{

    display:flex;

    flex-direction:column;

    gap:2px;

    min-width:0;

}


.article-last strong{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:var(--forum-dark);

}


.article-last span{

    font-size:12px;

    color:#888;

}



/*==================================================
Pinned
==================================================*/

.article-row.pinned{

    background:#fffdf4;

    border-left:4px solid #ffc94a;

}



/*==================================================
Hot
==================================================*/

.article-row.hot .article-subject::after{

    content:" HOT";

    margin-left:8px;

    color:#ff4f88;

    font-size:11px;

    font-weight:700;

}



/*==================================================
New
==================================================*/

.article-row.new .article-subject::after{

    content:" NEW";

    margin-left:8px;

    color:#2ca55d;

    font-size:11px;

    font-weight:700;

}



/*==================================================
Lock
==================================================*/

.article-row.locked{

    opacity:.65;

}


.article-row.locked:hover{

    opacity:1;

}



/*==================================================
Unread
==================================================*/

.article-row.unread{

    background:#fffafc;

}



/*==================================================
Article Divider
==================================================*/

.article-row:last-child{

    border-bottom:none;

}
/*==================================================
Sidebar
==================================================*/

.forum-sidebar{

    display:flex;

    flex-direction:column;

    gap:22px;

}


/*==================================================
Sidebar Card
==================================================*/

.sidebar-card{

    background:var(--forum-card);

    border-radius:20px;

    padding:22px;

    box-shadow:var(--forum-shadow);

    transition:var(--forum-transition);

}


.sidebar-card:hover{

    box-shadow:var(--forum-shadow-hover);

}


/*==================================================
Sidebar Title
==================================================*/

.sidebar-card h3{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

    font-size:18px;

    color:var(--forum-dark);

}



/*==================================================
Sidebar List
==================================================*/

.sidebar-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}


.sidebar-list li{

    border-bottom:1px dashed #ececec;

    padding-bottom:12px;

}


.sidebar-list li:last-child{

    border-bottom:none;

    padding-bottom:0;

}



/*==================================================
Sidebar Link
==================================================*/

.sidebar-list a{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:14px;

    transition:.25s;

}


.sidebar-list a:hover{

    color:var(--forum-primary);

}



/*==================================================
Sidebar Text
==================================================*/

.sidebar-list a{

    font-size:14px;

    line-height:1.6;

}



/*==================================================
Sidebar Meta
==================================================*/

.sidebar-list span{

    flex-shrink:0;

    font-size:12px;

    color:#999;

    white-space:nowrap;

}



/*==================================================
Popular Article
==================================================*/

.popular-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:24px;

    height:24px;

    border-radius:50%;

    background:var(--forum-primary);

    color:#fff;

    font-size:12px;

    font-weight:700;

}



/*==================================================
Tag Cloud
==================================================*/

.tag-cloud{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}


.tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:7px 14px;

    border-radius:999px;

    background:#f5f7ff;

    color:#666;

    font-size:13px;

    transition:.25s;

    cursor:pointer;

}


.tag:hover{

    background:var(--forum-primary);

    color:#fff;

}



/*==================================================
Online User
==================================================*/

.online-list{

    display:flex;

    flex-direction:column;

    gap:10px;

}


.online-list li{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;

}


.online-count{

    margin-top:18px;

    padding-top:16px;

    border-top:1px dashed #ececec;

    font-size:14px;

    color:#777;

}


.online-count strong{

    color:var(--forum-primary);

}



/*==================================================
Mini Button
==================================================*/

.sidebar-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    margin-top:18px;

    padding:11px;

    border-radius:12px;

    background:var(--forum-primary);

    color:#fff;

    font-weight:700;

    transition:.25s;

}


.sidebar-btn:hover{

    background:var(--forum-secondary);

}



/*==================================================
Small Notice
==================================================*/

.sidebar-notice{

    padding:14px;

    border-radius:12px;

    background:#fff7ea;

    border-left:4px solid #ffc54a;

    font-size:13px;

    line-height:1.8;

    color:#777;

}

/*==================================================
Post
==================================================*/

.post-card{

    background:var(--forum-card);

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--forum-shadow);

}



/*==================================================
Post Header
==================================================*/

.post-header{

    padding:28px 30px;

    border-bottom:1px solid var(--forum-line);

}


.post-title{

    margin-bottom:18px;

    font-size:30px;

    font-weight:700;

    line-height:1.5;

    color:var(--forum-dark);

}



/*==================================================
Meta
==================================================*/

.post-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    font-size:14px;

    color:#777;

}


.post-meta span{

    display:flex;

    align-items:center;

    gap:6px;

}



/*==================================================
Author
==================================================*/

.post-author{

    display:flex;

    gap:22px;

    align-items:center;

    padding:24px 30px;

    background:#fafcff;

    border-bottom:1px solid var(--forum-line);

}



/*==================================================
Avatar
==================================================*/

.author-avatar{

    width:88px;

    height:88px;

    border-radius:50%;

    overflow:hidden;

    flex-shrink:0;

    border:3px solid var(--forum-primary);

}


.author-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}



/*==================================================
Author Info
==================================================*/

.author-info{

    flex:1;

    min-width:0;

}


.author-name{

    font-size:22px;

    font-weight:700;

    color:var(--forum-dark);

    margin-bottom:8px;

}


.author-role{

    display:inline-flex;

    align-items:center;

    padding:4px 12px;

    border-radius:999px;

    background:#eef5ff;

    color:var(--forum-primary);

    font-size:12px;

    font-weight:700;

    margin-bottom:14px;

}


.author-detail{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    font-size:14px;

    color:#777;

}



/*==================================================
Post Content
==================================================*/

.post-content{

    padding:36px;

    font-size:17px;

    line-height:2;

    color:var(--forum-text);

    word-break:break-word;

}


.post-content p{

    margin-bottom:22px;

}



/*==================================================
Image
==================================================*/

.post-content img{

    display:block;

    max-width:100%;

    margin:22px auto;

    border-radius:16px;

    box-shadow:var(--forum-shadow);

    transition:.25s;

}


.post-content img:hover{

    transform:scale(1.02);

}



/*==================================================
Heading
==================================================*/

.post-content h2{

    margin:34px 0 18px;

    color:var(--forum-dark);

}


.post-content h3{

    margin:28px 0 16px;

    color:var(--forum-dark);

}



/*==================================================
List
==================================================*/

.post-content ul,
.post-content ol{

    margin-bottom:20px;

    padding-left:26px;

}


.post-content li{

    margin-bottom:10px;

}



/*==================================================
Quote
==================================================*/

.post-content blockquote{

    margin:28px 0;

    padding:18px 22px;

    border-left:5px solid var(--forum-primary);

    background:#f8fbff;

    color:#666;

    border-radius:10px;

}



/*==================================================
Code
==================================================*/

.post-content pre{

    overflow:auto;

    margin:24px 0;

    padding:22px;

    border-radius:14px;

    background:#272822;

    color:#f8f8f2;

}


.post-content code{

    font-family:

        Consolas,

        monospace;

}



/*==================================================
Attachment
==================================================*/

.post-attachment{

    padding:24px 30px;

    border-top:1px dashed var(--forum-line);

}


.post-attachment h4{

    margin-bottom:14px;

    color:var(--forum-dark);

}


.post-file{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 0;

}



/*==================================================
Action
==================================================*/

.post-action{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    padding:24px 30px;

    border-top:1px solid var(--forum-line);

}


.post-action button{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border:none;

    border-radius:10px;

    background:#f5f7fb;

    cursor:pointer;

    transition:.25s;

}


.post-action button:hover{

    background:var(--forum-primary);

    color:#fff;

}
/*==================================================
Reply System
==================================================*/

.reply-section{

    margin-top:36px;

}



/*==================================================
Reply Title
==================================================*/

.reply-title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:20px;

}


.reply-title h2{

    font-size:24px;

    color:var(--forum-dark);

}


.reply-count{

    font-size:14px;

    color:#888;

}



/*==================================================
Reply Card
==================================================*/

.reply-card{

    display:flex;

    gap:18px;

    margin-bottom:20px;

    padding:22px;

    background:var(--forum-card);

    border-radius:18px;

    box-shadow:var(--forum-shadow);

    transition:var(--forum-transition);

}


.reply-card:hover{

    box-shadow:var(--forum-shadow-hover);

}



/*==================================================
Reply Avatar
==================================================*/

.reply-avatar{

    width:72px;

    height:72px;

    flex-shrink:0;

    border-radius:50%;

    overflow:hidden;

    border:3px solid var(--forum-primary);

}


.reply-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}



/*==================================================
Reply Body
==================================================*/

.reply-body{

    flex:1;

    min-width:0;

}



/*==================================================
Reply Header
==================================================*/

.reply-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:14px;

    margin-bottom:14px;

}


.reply-user{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

}


.reply-name{

    font-size:17px;

    font-weight:700;

    color:var(--forum-dark);

}


.reply-role{

    padding:4px 10px;

    border-radius:999px;

    background:#eef5ff;

    color:var(--forum-primary);

    font-size:12px;

    font-weight:700;

}


.reply-floor{

    font-size:13px;

    color:#999;

}


.reply-time{

    font-size:13px;

    color:#999;

}



/*==================================================
Reply Content
==================================================*/

.reply-content{

    font-size:16px;

    line-height:1.9;

    color:var(--forum-text);

    word-break:break-word;

}


.reply-content p{

    margin-bottom:16px;

}



/*==================================================
Reply Image
==================================================*/

.reply-content img{

    display:block;

    max-width:100%;

    margin:18px auto;

    border-radius:14px;

    box-shadow:var(--forum-shadow);

}



/*==================================================
Reply Quote
==================================================*/

.reply-content blockquote{

    margin:18px 0;

    padding:16px 20px;

    border-left:4px solid var(--forum-primary);

    background:#f8fbff;

    border-radius:10px;

    color:#666;

}



/*==================================================
Reply Footer
==================================================*/

.reply-footer{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:18px;

}


.reply-footer button{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:8px 14px;

    border:none;

    border-radius:10px;

    background:#f4f6fb;

    color:#666;

    cursor:pointer;

    transition:.25s;

}


.reply-footer button:hover{

    background:var(--forum-primary);

    color:#fff;

}



/*==================================================
Reply Editor
==================================================*/

.reply-editor{

    margin-top:34px;

    padding:26px;

    background:var(--forum-card);

    border-radius:20px;

    box-shadow:var(--forum-shadow);

}


.reply-editor h3{

    margin-bottom:18px;

    color:var(--forum-dark);

}



/*==================================================
Textarea
==================================================*/

.reply-editor textarea{

    width:100%;

    min-height:180px;

    resize:vertical;

    padding:18px;

    border:2px solid #e6e6e6;

    border-radius:14px;

    font-family:inherit;

    font-size:15px;

    line-height:1.8;

    transition:.25s;

}


.reply-editor textarea:focus{

    outline:none;

    border-color:var(--forum-primary);

}



/*==================================================
Reply Toolbar
==================================================*/

.reply-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;

    margin-top:18px;

}


.reply-tools{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}


.reply-tools button{

    padding:10px 14px;

    border:none;

    border-radius:10px;

    background:#f5f7fb;

    cursor:pointer;

    transition:.25s;

}


.reply-tools button:hover{

    background:#eceffd;

}



/*==================================================
Submit
==================================================*/

.reply-submit{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 24px;

    border:none;

    border-radius:12px;

    background:linear-gradient(

        135deg,

        var(--forum-primary),

        var(--forum-secondary)

    );

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}


.reply-submit:hover{

    transform:translateY(-2px);

    box-shadow:var(--forum-shadow-hover);

}



/*==================================================
Empty Reply
==================================================*/

.reply-empty{

    padding:70px 20px;

    text-align:center;

    background:var(--forum-card);

    border-radius:18px;

    box-shadow:var(--forum-shadow);

    color:#999;

}

/*==================================================
Forum UI Components
==================================================*/


/*==================================================
Pagination
==================================================*/

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin:40px 0;

}


.pagination a,
.pagination span{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:44px;

    height:44px;

    padding:0 14px;

    border-radius:12px;

    background:#fff;

    border:2px solid #e9e9e9;

    color:#666;

    font-weight:700;

    transition:var(--forum-transition);

}


.pagination a:hover{

    background:var(--forum-primary);

    border-color:var(--forum-primary);

    color:#fff;

}


.pagination .active{

    background:var(--forum-primary);

    border-color:var(--forum-primary);

    color:#fff;

}


.pagination .disabled{

    opacity:.45;

    cursor:not-allowed;

}



/*==================================================
Alert
==================================================*/

.forum-alert{

    padding:18px 20px;

    border-radius:16px;

    margin-bottom:22px;

    border-left:5px solid transparent;

}


.alert-info{

    background:#eef8ff;

    border-left-color:#58a6ff;

}


.alert-success{

    background:#eefcf3;

    border-left-color:#37b24d;

}


.alert-warning{

    background:#fff8e8;

    border-left-color:#ffb84d;

}


.alert-error{

    background:#fff2f3;

    border-left-color:#ff5d73;

}



/*==================================================
Forum Notice
==================================================*/

.forum-notice{

    display:flex;

    gap:14px;

    align-items:flex-start;

    padding:18px 22px;

    margin-bottom:24px;

    border-radius:18px;

    background:#fff8ea;

    border-left:5px solid #ffc54a;

}


.notice-icon{

    font-size:22px;

    flex-shrink:0;

}


.notice-content{

    flex:1;

}


.notice-content h4{

    margin-bottom:6px;

    color:var(--forum-dark);

}


.notice-content p{

    color:#666;

}



/*==================================================
Search Result
==================================================*/

.search-result{

    margin-bottom:20px;

    padding:14px 18px;

    border-radius:14px;

    background:#f7fbff;

    color:#666;

}



/*==================================================
Empty State
==================================================*/

.empty-state{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:16px;

    padding:80px 20px;

    border-radius:20px;

    background:var(--forum-card);

    box-shadow:var(--forum-shadow);

    text-align:center;

}


.empty-state h3{

    color:var(--forum-dark);

}


.empty-state p{

    color:#888;

}



/*==================================================
Loading
==================================================*/

.loading-box{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:20px;

    padding:80px 20px;

}


.loading-spinner{

    width:52px;

    height:52px;

    border:5px solid #ececec;

    border-top-color:var(--forum-primary);

    border-radius:50%;

    animation:forumRotate .8s linear infinite;

}



/*==================================================
Back Button
==================================================*/

.back-button{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:24px;

    color:var(--forum-primary);

    font-weight:700;

    transition:.25s;

}


.back-button:hover{

    transform:translateX(-4px);

}



/*==================================================
Scroll Top
==================================================*/

.scroll-top{

    position:fixed;

    right:28px;

    bottom:28px;

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:linear-gradient(

        135deg,

        var(--forum-primary),

        var(--forum-secondary)

    );

    color:#fff;

    font-size:20px;

    cursor:pointer;

    box-shadow:var(--forum-shadow);

    transition:var(--forum-transition);

    z-index:999;

}


.scroll-top:hover{

    transform:translateY(-4px);

    box-shadow:var(--forum-shadow-hover);

}



/*==================================================
Status Badge
==================================================*/

.status-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:4px 10px;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

}


.status-open{

    background:#eefcf3;

    color:#2f9e44;

}


.status-close{

    background:#fff2f3;

    color:#d6336c;

}


.status-lock{

    background:#f3f4f6;

    color:#666;

}



/*==================================================
Divider
==================================================*/

.forum-divider{

    width:100%;

    height:1px;

    background:#ececec;

    margin:28px 0;

}

/*==================================================
ROOMI Motion System
==================================================*/


/*==================================================
Global Transition
==================================================*/

.forum-row,
.article-row,
.sidebar-card,
.forum-card,
.post-card,
.reply-card,
.pagination a,
.pagination span,
.btn-post,
.btn-normal,
.reply-submit,
.sidebar-btn,
.tag,
.article-tag{

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        background-color .25s ease,

        color .25s ease,

        border-color .25s ease,

        opacity .25s ease;

}



/*==================================================
Hover Lift
==================================================*/

.hover-lift:hover{

    transform:translateY(-4px);

    box-shadow:var(--forum-shadow-hover);

}



/*==================================================
Hover Scale
==================================================*/

.hover-scale:hover{

    transform:scale(1.03);

}



/*==================================================
Forum Card Hover
==================================================*/

.forum-card:hover,
.sidebar-card:hover,
.post-card:hover{

    transform:translateY(-3px);

}



/*==================================================
Article Hover
==================================================*/

.article-row:hover{

    transform:

        translateX(5px);

}



/*==================================================
Reply Hover
==================================================*/

.reply-card:hover{

    transform:translateY(-2px);

}



/*==================================================
Button Hover
==================================================*/

.btn-post:hover,
.reply-submit:hover,
.sidebar-btn:hover{

    transform:

        translateY(-2px);

}



/*==================================================
Button Active
==================================================*/

.btn-post:active,
.btn-normal:active,
.reply-submit:active,
.sidebar-btn:active{

    transform:scale(.97);

}



/*==================================================
Tag Hover
==================================================*/

.tag:hover,
.article-tag:hover{

    transform:translateY(-2px);

}



/*==================================================
Image Hover
==================================================*/

.post-content img:hover,
.reply-content img:hover{

    transform:scale(1.02);

}



/*==================================================
Fade In
==================================================*/

.fade-in{

    animation:

        forumFade

        .45s ease;

}



/*==================================================
Pop In
==================================================*/

.pop-in{

    animation:

        forumPop

        .35s ease;

}



/*==================================================
Slide Up
==================================================*/

@keyframes forumSlideUp{

    from{

        opacity:0;

        transform:

            translateY(20px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


.slide-up{

    animation:

        forumSlideUp

        .45s ease;

}



/*==================================================
Pulse
==================================================*/

@keyframes forumPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}


.pulse{

    animation:

        forumPulse

        1.2s infinite;

}



/*==================================================
Badge Glow
==================================================*/

.badge-hot{

    animation:

        forumPulse

        2.5s infinite;

}



/*==================================================
Loading
==================================================*/

.loading-spinner{

    animation:

        forumRotate

        .8s linear infinite;

}



/*==================================================
Blink
==================================================*/

@keyframes forumBlink{

    0%{

        opacity:1;

    }

    50%{

        opacity:.45;

    }

    100%{

        opacity:1;

    }

}


.blink{

    animation:

        forumBlink

        1.5s infinite;

}



/*==================================================
Focus Ring
==================================================*/

input:focus,
textarea:focus,
select:focus{

    box-shadow:

        0 0 0 4px

        rgba(143,198,255,.18);

}



/*==================================================
Scroll Reveal
==================================================*/

.reveal{

    opacity:0;

    transform:

        translateY(20px);

}


.reveal.active{

    opacity:1;

    transform:none;

    transition:

        .45s ease;

}



/*==================================================
Tooltip
==================================================*/

.tooltip{

    position:relative;

}


.tooltip::after{

    content:attr(data-tooltip);

    position:absolute;

    bottom:120%;

    left:50%;

    transform:

        translateX(-50%);

    padding:6px 10px;

    border-radius:8px;

    background:#333;

    color:#fff;

    font-size:12px;

    white-space:nowrap;

    opacity:0;

    pointer-events:none;

    transition:.2s;

}


.tooltip:hover::after{

    opacity:1;

}



/*==================================================
Disable Animation
==================================================*/

.no-animation{

    animation:none !important;

    transition:none !important;

}

/*==================================================
Desktop Optimization
V3 FINAL
==================================================*/


/*==================================================
Ultra Wide
2560+
==================================================*/

@media (min-width:2200px){

    .forum-page{

        max-width:1700px;

    }

}


/*==================================================
Desktop
1600~2199
==================================================*/

@media (min-width:1600px){

    .forum-layout{

        grid-template-columns:

            minmax(0,3fr)

            340px;

    }

}


/*==================================================
Standard Desktop
1400~1599
==================================================*/

@media (max-width:1599px){

    .forum-page{

        width:min(96%,1450px);

    }

}


/*==================================================
Notebook
1366~1439
==================================================*/

@media (max-width:1439px){

    .forum-layout{

        grid-template-columns:

            minmax(0,2.6fr)

            300px;

        gap:22px;

    }


    .forum-title h1{

        font-size:40px;

    }


    .forum-title p{

        font-size:15px;

    }

}


/*==================================================
1366 Notebook
==================================================*/

@media (max-width:1366px){

    .forum-page{

        width:96%;

    }


    .forum-toolbar{

        padding:16px 18px;

    }


    .forum-search{

        max-width:480px;

    }


    .article-header,

    .article-row{

        grid-template-columns:

            minmax(0,2.5fr)

            90px

            70px

            70px

            150px;

    }

}


/*==================================================
1280 Desktop
==================================================*/

@media (max-width:1280px){

    .forum-layout{

        grid-template-columns:

            minmax(0,2.4fr)

            280px;

    }


    .forum-hero{

        padding:30px 24px;

    }


    .forum-title h1{

        font-size:36px;

    }


    .article-header,

    .article-row{

        gap:14px;

        padding:16px 18px;

    }


    .article-icon{

        width:30px;

        height:30px;

        font-size:16px;

    }


    .sidebar-card{

        padding:18px;

    }

}


/*==================================================
Desktop Hover Only
==================================================*/

@media (hover:hover){

    .forum-row:hover{

        transform:translateY(-3px);

    }

    .article-row:hover{

        transform:translateX(4px);

    }

    .sidebar-card:hover{

        transform:translateY(-2px);

    }

}


/*==================================================
Desktop Fine Tune
==================================================*/

@media (min-width:1200px){

    .post-content{

        font-size:17px;

        line-height:2;

    }


    .reply-content{

        font-size:16px;

    }

}


/*==================================================
Large Monitor Spacing
==================================================*/

@media (min-width:1800px){

    .forum-page{

        margin-top:50px;

    }


    .forum-toolbar{

        margin-bottom:30px;

    }


    .pagination{

        margin:50px 0;

    }

}

/*==================================================
Tablet RWD
1024px ~ 769px
==================================================*/

@media (max-width:1024px){

    /*=========================================
    Page
    =========================================*/

    .forum-page{

        width:96%;

        margin:28px auto 60px;

    }


    /*=========================================
    Layout
    =========================================*/

    .forum-layout{

        grid-template-columns:1fr;

        gap:24px;

    }


    .forum-sidebar{

        order:2;

    }


    .forum-content{

        order:1;

    }


    /*=========================================
    Hero
    =========================================*/

    .forum-hero{

        padding:28px 22px;

    }


    .forum-title h1{

        font-size:34px;

    }


    .forum-title p{

        font-size:15px;

    }


    /*=========================================
    Toolbar
    =========================================*/

    .forum-toolbar{

        flex-direction:column;

        align-items:stretch;

        gap:16px;

    }


    .toolbar-left,

    .toolbar-right{

        width:100%;

    }


    .toolbar-right{

        justify-content:space-between;

    }


    .forum-search{

        max-width:none;

    }


    .forum-sort{

        flex:1;

        min-width:0;

    }


    .btn-post{

        flex-shrink:0;

    }


    /*=========================================
    Forum Category
    =========================================*/

    .forum-row{

        grid-template-columns:

            minmax(0,2.4fr)

            80px

            80px

            150px;

    }


    .forum-icon{

        width:50px;

        height:50px;

        font-size:24px;

    }


    .forum-info h3{

        font-size:18px;

    }


    /*=========================================
    Article Table
    =========================================*/

    .article-header,

    .article-row{

        grid-template-columns:

            minmax(0,2.5fr)

            80px

            70px

            70px

            140px;

        gap:12px;

        padding:16px;

    }


    .article-subject{

        font-size:14px;

    }


    .article-last{

        font-size:12px;

    }


    /*=========================================
    Sidebar
    =========================================*/

    .sidebar-card{

        padding:18px;

    }


    .sidebar-card h3{

        font-size:17px;

    }


    /*=========================================
    Post
    =========================================*/

    .post-header,

    .post-author,

    .post-content,

    .post-action,

    .post-attachment{

        padding:24px;

    }


    .post-title{

        font-size:26px;

    }


    .author-avatar{

        width:72px;

        height:72px;

    }


    /*=========================================
    Reply
    =========================================*/

    .reply-card{

        padding:18px;

    }


    .reply-avatar{

        width:60px;

        height:60px;

    }


    .reply-editor{

        padding:22px;

    }


    /*=========================================
    Pagination
    =========================================*/

    .pagination{

        gap:8px;

    }


    .pagination a,

    .pagination span{

        min-width:40px;

        height:40px;

    }


    /*=========================================
    Scroll Top
    =========================================*/

    .scroll-top{

        width:48px;

        height:48px;

        right:20px;

        bottom:20px;

    }

}



/*==================================================
Tablet Portrait
900px 以下
==================================================*/

@media (max-width:900px){

    .forum-title h1{

        font-size:30px;

    }


    .forum-title p{

        font-size:14px;

    }


    .toolbar-right{

        flex-wrap:wrap;

    }


    .forum-sort{

        width:100%;

    }


    .btn-post{

        width:100%;

        justify-content:center;

    }


    .reply-toolbar{

        flex-direction:column;

        align-items:stretch;

    }


    .reply-tools{

        justify-content:center;

    }


    .reply-submit{

        width:100%;

        justify-content:center;

    }
}

/*==================================================
Mobile RWD
768px 以下
==================================================*/

@media (max-width:768px){

/*=========================================
Page
=========================================*/

.forum-page{

    width:95%;

    margin:20px auto 40px;

}


/*=========================================
Hero
=========================================*/

.forum-hero{

    padding:22px 18px;

    border-radius:18px;

}


.forum-title h1{

    font-size:28px;

    flex-wrap:wrap;

}


.forum-title p{

    font-size:14px;

    line-height:1.7;

}


/*=========================================
Breadcrumb
=========================================*/

.breadcrumb{

    font-size:13px;

    gap:6px;

}


/*=========================================
Toolbar
=========================================*/

.forum-toolbar{

    padding:16px;

}


.forum-search{

    flex-direction:column;

    gap:10px;

}


.forum-search input{

    width:100%;

    border-radius:12px;

    border-right:2px solid #e6e6e6;

}


.forum-search button{

    width:100%;

    border-radius:12px;

}


.toolbar-right{

    flex-direction:column;

    gap:10px;

}


.forum-sort{

    width:100%;

}


.btn-post{

    width:100%;

}


/*=========================================
Forum Category
=========================================*/

.forum-row{

    grid-template-columns:1fr;

    gap:14px;

}


.col-topic,

.col-reply,

.col-last{

    text-align:left;

}


.col-last{

    border-top:1px dashed #ececec;

    padding-top:10px;

}


/*=========================================
Article Table
=========================================*/

.article-header{

    display:none;

}


.article-row{

    grid-template-columns:1fr;

    gap:10px;

    padding:18px;

}


.article-title{

    flex-wrap:wrap;

}


.article-subject{

    width:100%;

    white-space:normal;

    overflow:visible;

    text-overflow:unset;

    line-height:1.6;

}


.article-author,

.article-reply,

.article-view,

.article-last{

    display:flex;

    justify-content:space-between;

    align-items:center;

    text-align:left;

    font-size:13px;

    padding-top:6px;

    border-top:1px dashed #ececec;

}


.article-author::before{

    content:"作者";

    font-weight:700;

}


.article-reply::before{

    content:"回覆";

    font-weight:700;

}


.article-view::before{

    content:"瀏覽";

    font-weight:700;

}


.article-last::before{

    content:"最後回覆";

    font-weight:700;

}


/*=========================================
Sidebar
=========================================*/

.sidebar-card{

    padding:16px;

}


.tag-cloud{

    gap:8px;

}


.tag{

    font-size:12px;

}


/*=========================================
Post
=========================================*/

.post-header,

.post-author,

.post-content,

.post-action,

.post-attachment{

    padding:18px;

}


.post-title{

    font-size:22px;

}


.post-author{

    flex-direction:column;

    align-items:center;

    text-align:center;

}


.author-detail{

    justify-content:center;

}


.author-avatar{

    width:64px;

    height:64px;

}


/*=========================================
Reply
=========================================*/

.reply-card{

    flex-direction:column;

}


.reply-avatar{

    width:58px;

    height:58px;

}


.reply-header{

    flex-direction:column;

    gap:8px;

}


.reply-footer{

    justify-content:center;

}


.reply-editor{

    padding:18px;

}


.reply-editor textarea{

    min-height:140px;

}


/*=========================================
Pagination
=========================================*/

.pagination{

    gap:6px;

}


.pagination a,

.pagination span{

    min-width:36px;

    height:36px;

    font-size:13px;

}


/*=========================================
Scroll Top
=========================================*/

.scroll-top{

    width:44px;

    height:44px;

    right:16px;

    bottom:16px;

    font-size:18px;

}

}



/*==================================================
Small Phone
480px 以下
==================================================*/

@media (max-width:480px){

.forum-title h1{

    font-size:24px;

}


.post-title{

    font-size:20px;

}


.article-icon{

    width:28px;

    height:28px;

    font-size:15px;

}


.reply-tools{

    flex-wrap:wrap;

    justify-content:center;

}


.reply-tools button{

    flex:1;

}

}

/*==================================================
Small Mobile Optimization
430px 以下
==================================================*/

@media (max-width:430px){

/*=========================================
Page
=========================================*/

.forum-page{

    width:94%;

    margin:16px auto 32px;

}


/*=========================================
Hero
=========================================*/

.forum-hero{

    padding:18px 16px;

    border-radius:16px;

}


.forum-title h1{

    font-size:24px;

    line-height:1.4;

    gap:8px;

}


.forum-title p{

    margin-top:8px;

    font-size:13px;

    line-height:1.7;

}


/*=========================================
Breadcrumb
=========================================*/

.breadcrumb{

    font-size:12px;

    gap:5px;

    margin-bottom:16px;

}


/*=========================================
Toolbar
=========================================*/

.forum-toolbar{

    padding:14px;

    border-radius:16px;

}


.forum-search input{

    height:42px;

    padding:0 14px;

    font-size:14px;

}


.forum-search button{

    height:42px;

    font-size:14px;

}


.forum-sort{

    height:42px;

    font-size:14px;

}


.btn-post{

    height:42px;

    font-size:14px;

}


/*=========================================
Forum Row
=========================================*/

.forum-row{

    padding:16px;

    border-radius:16px;

}


.col-forum{

    gap:12px;

}


.forum-icon{

    width:42px;

    height:42px;

    font-size:20px;

    border-radius:12px;

}


.forum-info h3{

    font-size:16px;

}


.forum-info p{

    font-size:13px;

}


/*=========================================
Article
=========================================*/

.article-row{

    padding:16px;

}


.article-title{

    gap:8px;

}


.article-icon{

    width:28px;

    height:28px;

    font-size:15px;

}


.article-tag{

    padding:3px 8px;

    font-size:10px;

}


.article-subject{

    font-size:14px;

    line-height:1.6;

}


.article-author,
.article-reply,
.article-view,
.article-last{

    font-size:12px;

}


/*=========================================
Sidebar
=========================================*/

.sidebar-card{

    padding:15px;

    border-radius:16px;

}


.sidebar-card h3{

    font-size:16px;

}


.sidebar-list{

    gap:10px;

}


.sidebar-list a{

    font-size:13px;

}


.sidebar-list span{

    font-size:11px;

}


.tag{

    padding:6px 10px;

    font-size:11px;

}


/*=========================================
Post
=========================================*/

.post-header{

    padding:18px 16px;

}


.post-title{

    font-size:20px;

}


.post-meta{

    gap:10px;

    font-size:12px;

}


.post-author{

    padding:18px 16px;

}


.author-avatar{

    width:56px;

    height:56px;

}


.author-name{

    font-size:18px;

}


.author-role{

    font-size:11px;

}


.author-detail{

    gap:10px;

    font-size:12px;

}


.post-content{

    padding:18px 16px;

    font-size:15px;

    line-height:1.9;

}


.post-content blockquote{

    padding:14px 16px;

}


.post-content pre{

    padding:14px;

    font-size:13px;

}


.post-action{

    padding:16px;

    gap:8px;

}


.post-action button{

    flex:1;

    justify-content:center;

}


/*=========================================
Reply
=========================================*/

.reply-card{

    padding:16px;

    border-radius:16px;

}


.reply-avatar{

    width:52px;

    height:52px;

}


.reply-name{

    font-size:15px;

}


.reply-role{

    font-size:11px;

}


.reply-floor,

.reply-time{

    font-size:12px;

}


.reply-content{

    font-size:15px;

}


.reply-footer{

    gap:8px;

}


.reply-footer button{

    flex:1;

    justify-content:center;

    padding:10px;

}


.reply-editor{

    padding:16px;

}


.reply-editor textarea{

    min-height:120px;

    padding:14px;

    font-size:14px;

}


.reply-toolbar{

    gap:10px;

}


.reply-tools{

    width:100%;

    justify-content:center;

}


.reply-tools button{

    flex:1;

    min-width:44px;

}


/*=========================================
Pagination
=========================================*/

.pagination{

    gap:5px;

}


.pagination a,
.pagination span{

    min-width:34px;

    height:34px;

    font-size:12px;

}


/*=========================================
Scroll Top
=========================================*/

.scroll-top{

    width:40px;

    height:40px;

    right:12px;

    bottom:12px;

    font-size:16px;

}

}



/*==================================================
Very Small Device
360px 以下
==================================================*/

@media (max-width:360px){

    .forum-title h1{

        font-size:22px;

    }

    .forum-info h3{

        font-size:15px;

    }

    .post-title{

        font-size:18px;

    }

    .post-content{

        font-size:14px;

    }

    .reply-content{

        font-size:14px;

    }

    .btn-post{

        font-size:13px;

    }

    .forum-search input,
    .forum-search button,
    .forum-sort{

        font-size:13px;

    }

}

/*==================================================
ROOMI Forum Framework
V3 FINAL PATCH
==================================================*/


/*==================================================
Universal Box Model
==================================================*/

html{

    scroll-behavior:smooth;

}


*{

    box-sizing:border-box;

}



/*==================================================
Media
==================================================*/

img,
video,
iframe{

    max-width:100%;

    height:auto;

}


table{

    width:100%;

    border-collapse:collapse;

}



/*==================================================
Overflow Protection
==================================================*/

.forum-page,
.forum-layout,
.forum-content,
.forum-sidebar,
.article-table,
.post-card,
.reply-card{

    min-width:0;

}


.article-title,
.article-subject,
.author-name,
.reply-name,
.sidebar-list a{

    min-width:0;

    overflow-wrap:anywhere;

}



/*==================================================
Touch Improve
==================================================*/

button,
a,
input,
select,
textarea{

    -webkit-tap-highlight-color:transparent;

}


button{

    touch-action:manipulation;

}



/*==================================================
Text Rendering
==================================================*/

body{

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

}



/*==================================================
Selection
==================================================*/

::selection{

    background:

        rgba(143,198,255,.35);

    color:#222;

}



/*==================================================
Focus Visible
==================================================*/

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{

    outline:3px solid rgba(143,198,255,.45);

    outline-offset:2px;

}



/*==================================================
Disable Image Drag
==================================================*/

img{

    user-select:none;

    -webkit-user-drag:none;

}



/*==================================================
Reduced Motion
==================================================*/

@media (prefers-reduced-motion:reduce){

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}



/*==================================================
Print
==================================================*/

@media print{

body{

    background:#fff;

}


.header,
.footer,
.scroll-top,
.reply-editor,
.forum-toolbar,
.forum-sidebar{

    display:none !important;

}


.forum-page{

    width:100%;

    margin:0;

}


.post-card{

    box-shadow:none;

    border:1px solid #ddd;

}

}



/*==================================================
Dark Mode Reserved
(Disabled)
==================================================*/

/*

@media (prefers-color-scheme:dark){

:root{

    --forum-card:#242424;

    --forum-bg:#1c1c1c;

    --forum-text:#f2f2f2;

}

}

*/



/*==================================================
Future Components Reserved
==================================================*/

/*

.notification-card{}

.poll-box{}

.market-item{}

.guild-widget{}

.live-chat{}

*/



/*==================================================
Developer Note

ROOMI 2.0 Forum Framework

Shared By

Creator Forum
Trade Forum
Family Forum

Version

V3 FINAL

==================================================*/