/* =========================================================
   JOHNCMS — WHITE + ORANGE PREMIUM UI
   Clean / Modern / Responsive
   Existing JohnCMS classes preserved
   ========================================================= */

:root{
    --bg:#f4f6f8;
    --bg2:#ffffff;
    --card:#ffffff;
    --card2:#f8fafc;
    --line:#e5e9ef;
    --line2:#d5dce5;
    --text:#20252b;
    --muted:#7a8592;
    --accent:#ff8c00;
    --accent2:#ff9f2d;
    --danger:#e53935;
    --success:#16a673;
    --shadow:0 4px 18px rgba(20,30,45,.07);
}

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

*{
    box-sizing:border-box;
}

html{
    margin:0;
    padding:0;
    background:var(--bg);
}

body{
    max-width:700px;
    margin:0 auto;
    padding:0;
    background:var(--bg);
    color:var(--text);
    font:14px/1.55 Arial,"Segoe UI",sans-serif;
}

a{
    color:#e87500;
    text-decoration:none;
    transition:all .2s ease;
}

a:hover{
    color:var(--accent);
    text-decoration:none;
}

img{
    max-width:100%;
    height:auto;
    padding:0;
    border:0;
    vertical-align:middle;
}

p{
    margin:7px 0;
}

h1,
h2,
h3,
h4,
h5,
h6{
    margin:0;
    padding:0;
    color:var(--text);
}

/* =========================================================
   HEADER / LOGO / FOOTER
   ========================================================= */

.header,
.footer,
.logo{
    color:#fff;
    border:0;
}

.header{
    min-height:56px;
    padding:11px 13px;
    background:linear-gradient(135deg,#ff8c00,#ff9f2d)!important;
    border-bottom:1px solid #e67b00;
    box-shadow:0 3px 12px rgba(255,140,0,.18);
}

.logo{
    background:#fff!important;
    background-image:none!important;
    color:var(--text);
    border-radius:0;
}

.logo a{
    color:var(--text);
}

.footer{
    margin-top:8px;
    padding:14px 12px;
    background:#ffffff!important;
    color:var(--muted);
    border-top:1px solid var(--line);
}

/* =========================================================
   TOP MENU
   ========================================================= */

.topmenu{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    margin:7px 5px;
    padding:8px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:var(--shadow);
}

.topmenu a{
    display:inline-block;
    padding:9px 13px;
    background:#f8fafc;
    border:1px solid var(--line);
    border-radius:9px;
    color:#343b44;
    font-size:12px;
    font-weight:700;
}

.topmenu a:hover{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(255,140,0,.20);
}

/* =========================================================
   PANELS
   ========================================================= */

.menu,
.rmenu,
.fmenu,
.bmenu,
.gmenu,
.list1,
.list2,
.user,
.news,
.maintxt{
    margin:0 5px 7px;
    padding:11px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:var(--shadow);
}

.list1,
.list2{
    border-top-left-radius:0;
    border-top-right-radius:0;
}

.phdr{
    margin:7px 5px 0;
    padding:11px 13px;
    background:linear-gradient(135deg,#ff8c00,#ff9f2d);
    border:1px solid #ec8100;
    border-bottom:0;
    border-radius:12px 12px 0 0;
    color:#fff;
    font-weight:700;
    box-shadow:0 3px 10px rgba(255,140,0,.12);
}

.phdr h3{
    color:#fff;
    font-size:15px;
}

.phdr a{
    color:#fff;
}

.hdr{
    margin:5px 5px 0;
    padding:9px 11px;
    background:#fff7ed;
    border:1px solid #ffd9ad;
    border-radius:10px;
    color:#c86600;
    font-weight:700;
}

/* =========================================================
   CUSTOM MENU LINKS
   ========================================================= */

.ffa{
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 8px;
    border-bottom:1px solid var(--line);
    color:var(--text);
    border-radius:8px;
}

.ffa:last-child{
    border-bottom:0;
}

.ffa:hover{
    background:#fff7ed;
    color:#e87500;
    padding-left:12px;
}

.ffa i{
    width:28px;
    text-align:center;
    color:var(--accent);
}

.count{
    margin-left:auto;
    padding:3px 8px;
    background:#fff3e3;
    border:1px solid #ffd7aa;
    border-radius:7px;
    color:#df7000;
    font-size:11px;
    font-weight:700;
}

/* =========================================================
   FORMS
   ========================================================= */

form{
    margin:0;
    padding:0;
    font-size:14px;
}

input,
select,
textarea{
    max-width:100%;
    background:#fff;
    color:var(--text);
    border:1px solid var(--line2);
    border-radius:9px;
    outline:none;
    font:inherit;
    transition:all .2s ease;
}

input{
    padding:9px 10px;
}

select{
    width:100%;
    padding:9px 10px;
}

textarea{
    width:98%;
    min-height:110px;
    margin:3px 0;
    padding:10px;
    resize:vertical;
}

input::placeholder,
textarea::placeholder{
    color:#a4adb8;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(255,140,0,.10);
}

input[type="checkbox"],
input[type="radio"]{
    accent-color:var(--accent);
}

input[type="submit"],
button{
    padding:9px 15px;
    margin:2px 0;
    background:linear-gradient(135deg,#ff8c00,#ff9f2d);
    border:0;
    border-radius:9px;
    color:#fff;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:all .2s ease;
    box-shadow:0 3px 8px rgba(255,140,0,.16);
}

input[type="submit"]:hover,
button:hover{
    background:linear-gradient(135deg,#f57c00,#ff9800);
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 5px 12px rgba(255,140,0,.22);
}

/* =========================================================
   SEARCH
   ========================================================= */

.jc-search-form{
    display:flex;
    gap:7px;
}

.jc-search-form input[type="text"]{
    flex:1;
    min-width:0;
}

.jc-search-form input[type="submit"]{
    white-space:nowrap;
}

/* =========================================================
   TABLES
   ========================================================= */

table{
    max-width:100%;
    border-collapse:collapse;
}

table.desc{
    width:100%;
    margin-top:6px;
    border-top:1px solid var(--line);
    font-size:12px;
}

table.desc td{
    padding:5px;
    color:var(--muted);
}

table.desc td.caption{
    width:1%;
    text-align:right;
    color:#8a949f;
    white-space:nowrap;
}

/* =========================================================
   PAGINATION
   ========================================================= */

.currentpage,
a.pagenav{
    display:inline-block;
    margin:2px;
    padding:7px 10px;
    background:#fff;
    border:1px solid var(--line2);
    border-radius:8px;
    color:#4b5560;
    text-decoration:none;
    box-shadow:0 2px 5px rgba(20,30,45,.04);
}

.currentpage{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
    font-weight:700;
    box-shadow:0 3px 8px rgba(255,140,0,.18);
}

a.pagenav:hover{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
}

/* =========================================================
   TMN
   ========================================================= */

.tmn{
    display:flex;
    gap:7px;
    margin:6px 5px;
    padding:0;
    background:transparent;
    text-align:center;
}

.tmn a{
    flex:1;
    padding:10px 6px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:9px;
    color:#454d56;
    box-shadow:var(--shadow);
}

.tmn a:hover{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
}

/* =========================================================
   STATUS / MESSAGES
   ========================================================= */

.alarm{
    margin:5px;
    padding:8px 10px;
    background:#fff1f1;
    border:1px solid #ffc9c9;
    border-radius:8px;
    color:#d93636;
    font-weight:700;
}

.gray{
    color:var(--muted);
}

.status{
    color:#c87519;
    font-size:12px;
    font-weight:700;
}

.func{
    margin:5px 0;
    padding:5px 8px;
    border-left:3px solid var(--accent);
    color:var(--muted);
    font-size:12px;
}

.greply{
    padding:5px 8px;
    border-left:3px solid var(--success);
    color:#11966a;
}

.reply{
    padding:5px 8px;
    border-left:3px solid var(--danger);
    color:#d93636;
}

.quote{
    padding:7px 9px;
    border-left:3px solid #aab4c0;
    background:#f5f7f9;
    color:#737e89;
    border-radius:0 7px 7px 0;
}

.sub{
    margin-top:6px;
    padding-top:6px;
    border-top:1px dashed var(--line2);
    font-size:12px;
}

/* =========================================================
   BB CODE / SPOILER / CODE
   ========================================================= */

.bbpopup{
    margin-top:4px;
}

.bbpopup a{
    display:inline-block;
    width:12px;
    height:12px;
    margin:1px;
    border:1px solid #9aa5b0;
    vertical-align:middle;
}

.bblist{
    padding:3px 0 3px 12px;
    color:var(--muted);
}

.phpcode{
    margin-top:5px;
    padding:8px;
    overflow:auto;
    background:#f5f7f9;
    border:1px solid var(--line2);
    border-radius:8px;
    color:#303842;
    font-family:monospace;
}

.spoilerhead{
    margin-top:4px;
    padding:7px 9px;
    background:#fff7ed;
    border:1px solid #ffd9ad;
    border-radius:8px 8px 0 0;
    color:#c86600;
    font-size:12px;
    font-weight:700;
}

.spoilerbody{
    margin-bottom:4px;
    padding:8px;
    background:#fff;
    border:1px solid #ffd9ad;
    border-top:0;
    border-radius:0 0 8px 8px;
    color:var(--muted);
}

/* =========================================================
   IMAGES / ICON
   ========================================================= */

.icon{
    padding:2px 5px 2px 1px;
    vertical-align:middle;
}

/* =========================================================
   SITEMAP
   ========================================================= */

.sitemap{
    height:0;
    overflow:auto;
    font-size:10px;
}

/* =========================================================
   FOOTER HELPERS
   ========================================================= */

.end{
    padding:10px;
    text-align:center;
    color:var(--muted);
}

.left{
    float:left;
}

/* =========================================================
   EXTRA PREMIUM EFFECTS
   ========================================================= */

.menu > a,
.rmenu > a,
.fmenu > a,
.bmenu > a,
.gmenu > a{
    transition:all .2s ease;
}

.menu > a:hover,
.rmenu > a:hover,
.fmenu > a:hover,
.bmenu > a:hover,
.gmenu > a:hover{
    color:var(--accent);
}

hr{
    height:1px;
    margin:8px 0;
    border:0;
    background:var(--line);
}

strong,
b{
    color:inherit;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:600px){

    body{
        width:100%;
        max-width:100%;
        font-size:14px;
    }

    .header{
        min-height:52px;
        padding:9px 10px;
    }

    .topmenu{
        margin:5px;
        gap:5px;
        padding:7px;
    }

    .topmenu a{
        padding:8px 10px;
        font-size:11px;
    }

    .menu,
    .rmenu,
    .fmenu,
    .bmenu,
    .gmenu,
    .list1,
    .list2,
    .user,
    .news,
    .maintxt{
        margin-left:5px;
        margin-right:5px;
    }

    .phdr{
        margin-left:5px;
        margin-right:5px;
    }

    .tmn{
        gap:5px;
    }

    .tmn a{
        padding:9px 4px;
        font-size:12px;
    }

    .jc-search-form{
        flex-direction:row;
    }

    input,
    select{
        max-width:100%;
    }

    textarea{
        width:100%;
    }
}

@media (max-width:380px){

    .topmenu a{
        flex:1 1 calc(50% - 5px);
        text-align:center;
    }

    .tmn a{
        font-size:11px;
    }

    .ffa{
        padding:9px 6px;
    }

    .phdr{
        padding:10px;
    }

    .menu,
    .rmenu,
    .fmenu,
    .bmenu,
    .gmenu,
    .list1,
    .list2,
    .user,
    .news,
    .maintxt{
        padding:9px;
    }
}