/*!
 * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2023 Fonticons, Inc.
 */
 @-webkit-keyframes fa-beat {

    0%,
    90% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    45% {
        -webkit-transform: scale(var(--fa-beat-scale, 1.25));
        transform: scale(var(--fa-beat-scale, 1.25))
    }
}

@keyframes fa-beat {

    0%,
    90% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    45% {
        -webkit-transform: scale(var(--fa-beat-scale, 1.25));
        transform: scale(var(--fa-beat-scale, 1.25))
    }
}

@-webkit-keyframes fa-bounce {
    0% {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0)
    }

    10% {
        -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, .9)) translateY(0);
        transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, .9)) translateY(0)
    }

    30% {
        -webkit-transform: scale(var(--fa-bounce-jump-scale-x, .9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -.5em));
        transform: scale(var(--fa-bounce-jump-scale-x, .9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -.5em))
    }

    50% {
        -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, .95)) translateY(0);
        transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, .95)) translateY(0)
    }

    57% {
        -webkit-transform: scale(1) translateY(var(--fa-bounce-rebound, -.125em));
        transform: scale(1) translateY(var(--fa-bounce-rebound, -.125em))
    }

    64% {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0)
    }

    to {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0)
    }
}

@keyframes fa-bounce {
    0% {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0)
    }

    10% {
        -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, .9)) translateY(0);
        transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, .9)) translateY(0)
    }

    30% {
        -webkit-transform: scale(var(--fa-bounce-jump-scale-x, .9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -.5em));
        transform: scale(var(--fa-bounce-jump-scale-x, .9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -.5em))
    }

    50% {
        -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, .95)) translateY(0);
        transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, .95)) translateY(0)
    }

    57% {
        -webkit-transform: scale(1) translateY(var(--fa-bounce-rebound, -.125em));
        transform: scale(1) translateY(var(--fa-bounce-rebound, -.125em))
    }

    64% {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0)
    }

    to {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0)
    }
}

@-webkit-keyframes fa-fade {
    50% {
        opacity: var(--fa-fade-opacity, .4)
    }
}

@keyframes fa-fade {
    50% {
        opacity: var(--fa-fade-opacity, .4)
    }
}

@-webkit-keyframes fa-beat-fade {

    0%,
    to {
        opacity: var(--fa-beat-fade-opacity, .4);
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
        transform: scale(var(--fa-beat-fade-scale, 1.125))
    }
}

@keyframes fa-beat-fade {

    0%,
    to {
        opacity: var(--fa-beat-fade-opacity, .4);
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
        transform: scale(var(--fa-beat-fade-scale, 1.125))
    }
}

@-webkit-keyframes fa-flip {
    50% {
        -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
        transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg))
    }
}

@keyframes fa-flip {
    50% {
        -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
        transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg))
    }
}

@-webkit-keyframes fa-shake {
    0% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg)
    }

    4% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }

    24%,
    8% {
        -webkit-transform: rotate(-18deg);
        transform: rotate(-18deg)
    }

    12%,
    28% {
        -webkit-transform: rotate(18deg);
        transform: rotate(18deg)
    }

    16% {
        -webkit-transform: rotate(-22deg);
        transform: rotate(-22deg)
    }

    20% {
        -webkit-transform: rotate(22deg);
        transform: rotate(22deg)
    }

    32% {
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg)
    }

    36% {
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg)
    }

    40%,
    to {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

@keyframes fa-shake {
    0% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg)
    }

    4% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }

    24%,
    8% {
        -webkit-transform: rotate(-18deg);
        transform: rotate(-18deg)
    }

    12%,
    28% {
        -webkit-transform: rotate(18deg);
        transform: rotate(18deg)
    }

    16% {
        -webkit-transform: rotate(-22deg);
        transform: rotate(-22deg)
    }

    20% {
        -webkit-transform: rotate(22deg);
        transform: rotate(22deg)
    }

    32% {
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg)
    }

    36% {
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg)
    }

    40%,
    to {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

:host,
:root {
    --fa-style-family-brands: "Font Awesome 6 Brands";
    --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands"
}

@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(https://www.6xiu.com/css/fontawesome/webfonts/fa-brands-400.woff2) format("woff2"), url(https://www.6xiu.com/css/fontawesome/webfonts/fa-brands-400.ttf) format("truetype")
}

:host,
:root {
    --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free"
}

@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(https://www.6xiu.com/css/fontawesome/webfonts/fa-regular-400.woff2) format("woff2"), url(https://www.6xiu.com/css/fontawesome/webfonts/fa-regular-400.ttf) format("truetype")
}

:host,
:root {
    --fa-style-family-classic: "Font Awesome 6 Free";
    --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free"
}

@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(https://www.6xiu.com/css/fontawesome/webfonts/fa-solid-900.woff2) format("woff2"), url(https://www.6xiu.com/css/fontawesome/webfonts/fa-solid-900.ttf) format("truetype")
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    font-display: block;
    font-weight: 400;
    src: url(https://www.6xiu.com/css/fontawesome/webfonts/fa-brands-400.woff2) format("woff2"), url(https://www.6xiu.com/css/fontawesome/webfonts/fa-brands-400.ttf) format("truetype")
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-display: block;
    font-weight: 900;
    src: url(https://www.6xiu.com/css/fontawesome/webfonts/fa-solid-900.woff2) format("woff2"), url(https://www.6xiu.com/css/fontawesome/webfonts/fa-solid-900.ttf) format("truetype")
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-display: block;
    font-weight: 400;
    src: url(https://www.6xiu.com/css/fontawesome/webfonts/fa-regular-400.woff2) format("woff2"), url(https://www.6xiu.com/css/fontawesome/webfonts/fa-regular-400.ttf) format("truetype")
}

@font-face {
    font-family: FontAwesome;
    font-display: block;
    src: url(https://www.6xiu.com/css/fontawesome/webfonts/fa-solid-900.woff2) format("woff2"), url(https://www.6xiu.com/css/fontawesome/webfonts/fa-solid-900.ttf) format("truetype")
}

@font-face {
    font-family: FontAwesome;
    font-display: block;
    src: url(https://www.6xiu.com/css/fontawesome/webfonts/fa-brands-400.woff2) format("woff2"), url(https://www.6xiu.com/css/fontawesome/webfonts/fa-brands-400.ttf) format("truetype")
}

@font-face {
    font-family: FontAwesome;
    font-display: block;
    src: url(https://www.6xiu.com/css/fontawesome/webfonts/fa-regular-400.woff2) format("woff2"), url(https://www.6xiu.com/css/fontawesome/webfonts/fa-regular-400.ttf) format("truetype");
    unicode-range: u+f003, u+f006, u+f014, u+f016-f017, u+f01a-f01b, u+f01d, u+f022, u+f03e, u+f044, u+f046, u+f05c-f05d, u+f06e, u+f070, u+f087-f088, u+f08a, u+f094, u+f096-f097, u+f09d, u+f0a0, u+f0a2, u+f0a4-f0a7, u+f0c5, u+f0c7, u+f0e5-f0e6, u+f0eb, u+f0f6-f0f8, u+f10c, u+f114-f115, u+f118-f11a, u+f11c-f11d, u+f133, u+f147, u+f14e, u+f150-f152, u+f185-f186, u+f18e, u+f190-f192, u+f196, u+f1c1-f1c9, u+f1d9, u+f1db, u+f1e3, u+f1ea, u+f1f7, u+f1f9, u+f20a, u+f247-f248, u+f24a, u+f24d, u+f255-f25b, u+f25d, u+f271-f274, u+f278, u+f27b, u+f28c, u+f28e, u+f29c, u+f2b5, u+f2b7, u+f2ba, u+f2bc, u+f2be, u+f2c0-f2c1, u+f2c3, u+f2d0, u+f2d2, u+f2d4, u+f2dc
}

@font-face {
    font-family: FontAwesome;
    font-display: block;
    src: url(https://www.6xiu.com/css/fontawesome/webfonts/fa-v4compatibility.woff2) format("woff2"), url(https://www.6xiu.com/css/fontawesome/webfonts/fa-v4compatibility.ttf) format("truetype");
    unicode-range: u+f041, u+f047, u+f065-f066, u+f07d-f07e, u+f080, u+f08b, u+f08e, u+f090, u+f09a, u+f0ac, u+f0ae, u+f0b2, u+f0d0, u+f0d6, u+f0e4, u+f0ec, u+f10a-f10b, u+f123, u+f13e, u+f148-f149, u+f14c, u+f156, u+f15e, u+f160-f161, u+f163, u+f175-f178, u+f195, u+f1f8, u+f219, u+f27a
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
    background-color: #f5f7fa;
    color: #333;
    line-height: 1.6;
    min-height: 100vh
}

a {
    text-decoration: none;
    color: inherit
}

ul {
    list-style: none
}

.main-content {
    padding: 30px
}

.page-title h1 {
    font-size: 24px;
    color: #1e3c72;
    font-weight: 600
}

.page-title p {
    color: #666;
    font-size: 14px;
    margin-top: 5px
}

.content-card {
    background: #fff;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05)
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee
}

.card-header h2 {
    font-size: 18px;
    color: #333
}

.card-header a {
    color: #4361ee;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px
}

.card-header a:hover {
    text-decoration: underline
}

.table-responsive {
    overflow-x: auto
}

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

thead {
    background: #f8f9fa
}

th {
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    color: #555;
    font-size: 14px;
    border-bottom: 2px solid #eee
}

td {
    padding: 15px;
    border-bottom: 1px solid #eee
}

tbody tr:hover {
    background: #f8f9fa
}

.footer {
    text-align: center;
    padding: 20px;
    color: #666;
    font-size: 14px;
    border-top: 1px solid #eee;
    margin-top: 30px
}

@media (max-width:992px) {
    .main-content {
        margin-left: 80px
    }
}

@media (max-width:768px) {
    .main-content {
        margin-left: 0
    }
}

@media (max-width:576px) {
    .content-card {
        padding: 15px
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #f5f6fa;
    color: #333;
    min-height: 100vh
}

.app {
    display: flex;
    min-height: 100vh
}

.sidebar {
    width: 240px;
    min-width: 240px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #81bcf4 0, #6b8bde 100%);
    color: #fff;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    transition: all .3s ease
}

.sidebar-menu {
    list-style: none;
    padding: 0 12px;
    flex: 1
}

.sidebar-menu li {
    margin-bottom: 4px
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: rgba(236, 245, 138, .7);
    text-decoration: none;
    border-radius: 8px;
    transition: all .2s;
    font-size: 14px
}

.sidebar-menu a.active,
.sidebar-menu a:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff
}

.sidebar-menu a.active {
    background: rgba(15, 207, 34, .2);
    color: #4fc3f7
}

.sidebar-menu .icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
    flex-shrink: 0
}

.label-text {
    color: #090909;
    text-shadow: 0 0 4px rgba(255, 255, 255, .8), 0 0 8px rgba(255, 255, 255, .6);
    font-size: large;
    font-weight: 700
}

.label-text:hover {
    color: #f4f406;
    text-shadow: 0 0 4px rgba(61, 61, 61, .8), 0 0 8px rgba(24, 24, 24, .6)
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 13px;
    color: rgba(255, 255, 255, .5)
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0
}

.topbar {
    background: #eaeaea;
    padding: 16px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8ecf1;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 16px
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 20px
}

.topbar-right .logout {
    color: #e74c3c;
    text-decoration: none;
    font-size: 14px
}

.topbar-right .logout:hover {
    text-decoration: underline;
    background: #62c2e8;
    color: #067824
}

.topbar-left .tohome {
    color: #616af0;
    text-decoration: none;
    font-size: 14px
}

.topbar-left .tohome:hover {
    text-decoration: underline;
    background: #9ef19c;
    color: #f46aeb
}

.content {
   /* padding: 30px; */
    flex: 1
}

.table-wrap {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    overflow: hidden
}

.table-wrap .title {
    padding: 16px 24px;
    font-weight: 600;
    border-bottom: 1px solid #f0f0f0;
    font-size: 16px
}

.table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px
}

.table-wrap th {
    text-align: left;
    padding: 12px 24px;
    background: #fafafa;
    color: #666;
    font-weight: 500;
    border-bottom: 1px solid #f0f0f0
}

.table-wrap td {
    padding: 12px 24px;
    border-bottom: 1px solid #f5f5f5
}

.table-wrap tr:last-child td {
    border-bottom: none
}

@media (max-width:992px) {
    .sidebar {
        width: 72px;
        min-width: 72px;
        padding: 12px 0
    }

    .sidebar-menu a {
        padding: 12px;
        justify-content: center;
        font-size: 0
    }

    .sidebar-menu a .icon {
        font-size: 20px;
        margin: 0
    }

    .sidebar-menu a .label-text {
        display: none
    }

    .sidebar-footer {
        text-align: center;
        font-size: 0;
        padding: 12px
    }

    .sidebar-footer::before {
        content: "⚙";
        font-size: 18px
    }

    .topbar {
        padding: 12px 16px
    }

    .content {
        padding: 16px
    }
}

@media (max-width:768px) {
    .app {
        flex-direction: column
    }

    .sidebar {
        width: 100%;
        min-width: unset;
        height: auto;
        position: relative;
        padding: 0;
        flex-direction: row;
        align-items: center;
        overflow-y: visible;
        flex-wrap: wrap;
        gap: 0
    }

    .sidebar-menu {
        display: flex;
        flex-wrap: wrap;
        padding: 0 8px;
        margin: 0;
        flex: 0 1 auto;
        gap: 2px
    }

    .sidebar-menu li {
        margin: 0
    }

    .sidebar-menu a {
        padding: 8px 12px;
        font-size: 13px;
        justify-content: center;
        gap: 4px;
        border-radius: 6px
    }

    .sidebar-menu a .icon {
        font-size: 16px;
        width: 20px
    }

    .sidebar-menu a .label-text {
        display: inline
    }

    .sidebar-footer {
        display: none
    }

    .topbar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 16px
    }

    .topbar-left {
        width: 100%;
        justify-content: space-between
    }

    .topbar-right {
        gap: 12px
    }

    .content {
        padding: 12px
    }

    .table-wrap {
        overflow-x: auto
    }

    .table-wrap table {
        font-size: 13px;
        min-width: 500px
    }

    .table-wrap td,
    .table-wrap th {
        padding: 8px 14px
    }
}

.icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #09fedc, #26b1bd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff
}

.icon-wrap2 {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #cdd7f2, #0d0ddc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff
}

.text {
    text-align: left
}

.btnrow1 {

    padding: 30px 80px;
    text-align: center;
   
   }
   
   
   .btnrow2 {
   
    padding: 30px 80px;
    text-align: center;
   
   }
     
   
   .btn-publish-card {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    background: linear-gradient(180deg, #f5e5a0 0%, #e8e67a 50%, #d8d15e 100%);
    color: #1a1a2e;
    border: none;
    border-radius: 16px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: all 0.1s ease;
    box-shadow: 0 6px 0 #767973, 0 8px 20px rgba(0, 0, 0, 0.15);
    border-top: 2px solid rgba(255,255,255,0.4);
    border-left: 2px solid rgba(255,255,255,0.2);
    border-right: 2px solid rgba(0,0,0,0.05);
    border-bottom: 2px solid rgba(0,0,0,0.1);
   }
   
   /* 按下效果 → 按钮被按下去 */
   .btn-publish-card:active {
    transform: translateY(4px);
    box-shadow: 
        0 2px 0 #7fb84a,
        0 4px 12px rgba(0,0,0,0.12);
   }
   
   /* 悬停效果 */
   .btn-publish-card:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 0 #7fb84a,
        0 12px 30px rgba(0,0,0,0.2);
    background: linear-gradient(180deg, #ddf7aa 0%, #c0ec82 50%, #a8e060 100%);
   }
   
   
   
   .btn-publish-card2 {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    background: linear-gradient(180deg, #2aeb0d 0%, #adffb2 50%, #b0fcaf 100%);
    color: #1a1a2e;
    border: none;
    border-radius: 16px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: all 0.1s ease;
    box-shadow: 0 6px 0 #767973, 0 8px 20px rgba(0, 0, 0, 0.15);
    border-top: 2px solid rgba(255,255,255,0.4);
    border-left: 2px solid rgba(255,255,255,0.2);
    border-right: 2px solid rgba(0,0,0,0.05);
    border-bottom: 2px solid rgba(0,0,0,0.1);
   }
   
   /* 按下效果 → 按钮被按下去 */
   .btn-publish-card2:active {
    transform: translateY(4px);
    box-shadow: 
        0 2px 0 #7fb84a,
        0 4px 12px rgba(0,0,0,0.12);
   }
   
   /* 悬停效果 */
   .btn-publish-card2:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 0 #7fb84a,
        0 12px 30px rgba(0,0,0,0.2);
    background: linear-gradient(180deg, #ddf7aa 0%, #c0ec82 50%, #a8e060 100%);
   }
   


.icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #09fedc, #26b1bd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
   }
   
   
   
   .icon-wrap2 {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #cdd7f2, #0d0ddc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
   }
   
   
   .text {
    text-align: left;
   }
   
   
   .text .sub {
    font-size: 12px;
    font-weight: 400;
    color: #999;
    display: block;
   }

   .btn-publish-with-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(238, 90, 36, 0.35);
    text-decoration: none;
    letter-spacing: 0.5px;
}

.btn-publish {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    background: linear-gradient(135deg, #4fc3f7, #29b6f6);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(41, 182, 246, 0.35);
    text-decoration: none;
    letter-spacing: 0.5px;
}

.btn-shadow {
    background-color: #10B981;
    color: white;
    border: none;
    padding: 5px 20px;
    font-size: 20px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 0 #059669;
    position: relative;
    top: 0;
}

.btn-shadow:hover {
    background-color: #0DA271;
    top: -2px;
    box-shadow: 0 6px 0 #059669;
}

.btn-shadow:active {
    top: 2px;
    box-shadow: 0 2px 0 #059669;
}