@keyframes loading {
    to {
        -webkit-transform: rotate(360deg)
    }
}

@-webkit-keyframes loading {
    to {
        transform: rotate(360deg)
    }
}

html {
    overflow-y: scroll
}

body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",SimSun,sans-serif;
    color: #666;
    line-height: 1.8;
    background: #ededed;
    -webkit-transition: background-color .5s;
    transition: background-color .5s;
    -webkit-font-smoothing: antialiased
}

*,:after,:before {
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

::selection {
    color: #fff;
    background: #a5a5a5
}

::-moz-selection {
    color: #fff;
    background: #a5a5a5
}

.container {
    width: 85%;
    margin: 0 auto;
    position: relative
}

.column {
    float: left;
    padding: 0 15px;
    position: relative
}

.column:first-child {
    padding-left: 0
}

.column:last-child {
    padding-right: 0
}

.column.col-1 { width: 8.333% }
.column.col-2 { width: 16.666% }
.column.col-3 { width: 25% }
.column.col-4 { width: 33.333% }
.column.col-5 { width: 41.666% }
.column.col-6 { width: 50% }
.column.col-7 { width: 58.333% }
.column.col-8 { width: 66.666% }
.column.col-9 { width: 75% }
.column.col-10 { width: 83.333% }
.column.col-11 { width: 91.666% }
.column.col-12 { width: 100% }
.column.offset-by-1 { margin-left: 8.333% }
.column.offset-by-2 { margin-left: 16.666% }
.column.offset-by-3 { margin-left: 25% }
.column.offset-by-4 { margin-left: 33.333% }
.column.offset-by-5 { margin-left: 41.666% }
.column.offset-by-6 { margin-left: 50% }
.column.offset-by-7 { margin-left: 58.333% }
.column.offset-by-8 { margin-left: 66.666% }
.column.offset-by-9 { margin-left: 75% }
.column.offset-by-10 { margin-left: 83.333% }
.column.offset-by-11 { margin-left: 91.666% }

.row,form,p { margin-bottom: 30px }

#menu li:last-child,.row:last-child,form .row:last-child,form:last-child,h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child,p:last-child {
    margin-bottom: 0
}

.clearfix::after,.container::after,.row::after {
    content: '';
    display: block;
    clear: both
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

a.link { color: #333 }
a.link:hover { text-decoration: underline solid #333 }

h1,h2,h3,h4,h5,h6 {
    font-weight: 400;
    font-style: normal;
    color: #111;
    margin-bottom: 15px
}

h1 { font-size: 50px }
h2 { font-size: 42px }
h3 { font-size: 36px }
h4 { font-size: 30px }
h5 { font-size: 24px }
h6 { font-size: 18px }

.headline .title.project-title,form .row { margin-bottom: 30px }

input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select {
    width: 100%;
    height: 46px;
    line-height: 26px;
    font-family: inherit;
    font-size: inherit;
    padding: 0 15px;
    color: #333;
    background: #fff;
    border-radius: 0;
    -webkit-appearance: none
}

img,textarea { max-width: 100% }

button,input[type=button],input[type=reset],input[type=submit],textarea {
    height: 46px;
    font-family: inherit;
    font-size: inherit;
    border-radius: 0;
    -webkit-appearance: none
}

textarea {
    width: 100%;
    line-height: 26px;
    background: #fff;
    min-height: 120px;
    color: #333;
    padding: 15px
}

select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="12" viewBox="0 0 9 12"><path fill="#5e6c75" d="M0.722,4.823L-0.01,4.1,4.134-.01,4.866,0.716Zm7.555,0L9.01,4.1,4.866-.01l-0.732.726ZM0.722,7.177L-0.01,7.9,4.134,12.01l0.732-.726Zm7.555,0L9.01,7.9,4.866,12.01l-0.732-.726Z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 1rem center
}

button,input[type=button],input[type=reset],input[type=submit] {
    text-transform: uppercase;
    padding: 0 15px;
    cursor: pointer;
    color: #fff;
    background: #444;
    -webkit-transition: .2s;
    transition: .2s
}

button:hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover {
    background-color: #2d2d2d
}

#menu li .submenu li a,label { font-family: inherit; font-size: 14px }
label {
    display: block;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 15px;
    cursor: pointer
}

img { vertical-align: middle }
.float-left { float: left }
.float-right { float: right }

#site-main {
    max-width: 1200px;
    margin: 50px auto;
    background: #fff
}

#main-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    background: rgba(20,21,22,.7);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

#main-overlay.nav-open {
    opacity: 1;
    visibility: visible
}

.headline {
    text-align: center;
    padding: 130px 0
}

.headline-content {
    max-width: 650px;
    margin: 0 auto
}

.headline .title {
    font-size: 30px;
    color: #444;
    margin-bottom: 15px
}

.headline .title:last-child { margin-bottom: 0 }

.search-bar { padding: 40px 0 70px }

.search-tab {
    max-width: 470px;
    height: 33px;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #e9e9e9;
    -webkit-tap-highlight-color: transparent
}

.search-tab span {
    height: 32px;
    padding: 0 8px;
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    opacity: .6;
    color: #444;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in
}

.search-tab span.active,.search-tab span:hover {
    opacity: 1;
    border-color: #838383
}

.search-form input[type=search] {
    max-width: 470px;
    width: 74%;
    background: #f5f5f5;
    overflow: hidden
}

.search-form input[type=submit] {
    max-width: 130px;
    width: 26%
}

.works { background: #f7f7f7 }

.work-link,.work-link .tab span { -webkit-transition: all .2s ease-in }

.work-link {
    min-height: 500px;
    font-size: 16px;
    opacity: 0;
    padding: 40px 0 45px;
    transition: all .2s ease-in-out
}

.work-link .container { width: 80% }

.work-link .tab {
    max-width: 780px;
    margin: 0 auto;
    padding-bottom: 19px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    -webkit-tap-highlight-color: transparent
}

.work-link .tab span {
    padding: 4px 24px;
    display: inline-block;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: all .2s ease-in
}
.work-link .tab.sortable-tabs span { cursor: move; }
.work-link .tab span.tab-dragging { opacity: 0.6; }

.work-link .info ul.sortable-links .link-item { cursor: move; }
.work-link .info ul .link-item.link-dragging { opacity: 0.6; }

.work-link .info a:hover,.work-link .tab span.active,.work-link .tab span:hover {
    background: #e5e5e5;
    color: #333
}

.work-link .info ul {
    line-height: 32px;
    list-style: none;
    overflow: hidden
}

.work-link .info li {
    width: 12.5%;
    padding: 9px 0;
    float: left;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    justify-content: center;
    overflow: hidden
}
.work-link .info li a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-link .info li:first-child { color: #999 }
.work-link .info a {
    padding: 0 16px;
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in
}
.work-link .info .edit-icon {
    flex-shrink: 0;
    margin-left: 4px;
    color: #999;
    cursor: pointer;
    font-size: 12px;
}
.work-link .info .edit-icon:hover { color: #444; }

/* 管理后台扩展样式 */
.admin-body { background: #f5f5f5; }
.admin-body #site-main { margin-top: 5px; }
.admin-container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.admin-header {
    background: #fff;
    padding: 16px 0;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.admin-header-inner { display: flex; justify-content: space-between; align-items: center; min-height: 36px; }
.admin-title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; color: #222; }
.admin-nav { display: flex; align-items: center; gap: 20px; }
.admin-nav a { color: #555; font-size: 14px; text-decoration: none; }
.admin-nav a:hover { color: #111; }
.admin-main { padding: 24px 0 40px; }
.admin-content-section { background: #fff; padding: 24px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.admin-toolbar { margin-bottom: 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.toolbar-btn { padding: 0 14px; height: 34px; min-height: 34px; font-size: 13px; font-family: inherit; text-transform: none; background: #2d2d2d; color: #fff; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; vertical-align: middle; }
.toolbar-btn:hover { background: #1a1a1a; }
.toolbar-btn-danger { background: #c62828; color: #fff; }
.toolbar-btn-danger:hover { background: #b71c1c; }
.toolbar-divider { width: 1px; height: 18px; background: #ccc; margin: 0 4px; flex-shrink: 0; }
.toolbar-file-input { position: absolute; width: 0; height: 0; opacity: 0; overflow: hidden; }
.toolbar-result { font-size: 13px; color: #666; margin-left: 8px; }
.admin-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 12px; }
.admin-table th, .admin-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid #eee; line-height: 1.4; }
.admin-table th { background: #f7f7f7; color: #333; font-weight: 600; font-size: 12px; vertical-align: top; }
.admin-table .th-filter { padding-bottom: 4px; }
.admin-table .th-filter span { display: block; margin-bottom: 4px; }
.admin-table .th-filter-select { width: 100%; max-width: 120px; padding: 2px 6px; font-size: 11px; height: 24px; border: 1px solid #ddd; background: #fff; }
.admin-table .th-filter-input { width: 100%; max-width: 140px; padding: 2px 6px; font-size: 11px; height: 24px; border: 1px solid #ddd; box-sizing: border-box; }
.admin-table tr:hover { background: #fafafa; }
.admin-table a { color: #444; }
.admin-table a:hover { text-decoration: underline; }
.admin-table .col-url { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-form .row { margin-bottom: 15px; }
.admin-form label { margin-bottom: 5px; font-size: 12px; }
.admin-form input, .admin-form select { height: 40px; }
.admin-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 100; align-items: center; justify-content: center; }
.admin-modal.show { display: flex; }
.admin-modal-inner { background: #f5f5f5; padding: 30px; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; }
.cate-combo { position: relative; display: flex; align-items: stretch; }
.cate-combo input { flex: 1; }
.admin-form .cate-btn { width: 36px; min-width: 36px; height: 40px; padding: 0; background: #e5e5e5; border: 1px solid #ccc; cursor: pointer; font-size: 12px; color: #555; margin-left: 2px; }
.cate-btn:hover { background: #ddd; }
.cate-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 36px; max-height: 200px; overflow-y: auto; background: #fff; border: 1px solid #ccc; z-index: 10; box-shadow: 0 4px 8px rgba(0,0,0,.15); }
.cate-dropdown.show { display: block; }
.cate-dropdown .cate-opt { padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.cate-dropdown .cate-opt:hover { background: #f0f0f0; }
.cate-row .column { margin-bottom: 0; }
.cate-row .column .cate-combo { max-width: 100%; }
.desc-row { display: flex; gap: 8px; }
.desc-row input { flex: 1; }
.btn-fetch-desc { width: 56px; min-width: 56px; height: 40px; padding: 0; background: #e5e5e5; border: 1px solid #ccc; cursor: pointer; font-size: 13px; color: #555; }
.btn-fetch-desc:hover { background: #ddd; }
.btn-fetch-desc:disabled { cursor: not-allowed; opacity: 0.7; }
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: normal; }
.checkbox-label input[type="checkbox"] { width: auto; height: auto; }
.admin-modal h3 { margin: 0 0 20px; font-size: 20px; }
.msg { padding: 10px 15px; margin-bottom: 15px; border-radius: 0; }
.msg.ok { background: #e8f5e9; color: #2e7d32; }
.msg.err { background: #ffebee; color: #c62828; }
.btn-sm { padding: 4px 12px; height: auto; font-size: 14px; }
.btn-danger { background: #c62828; }
.btn-danger:hover { background: #b71c1c; }
.btn-ghost { background: #e0e0e0; color: #555; }
.btn-ghost:hover { background: #d0d0d0; }
.btn-hide { background: #9e9e9e; color: #fff; }
.btn-hide:hover { background: #757575; }
.btn-show { background: #43a047; color: #fff; }
.btn-show:hover { background: #388e3c; }
.toast-bubble { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 10px 20px; border-radius: 20px; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 9999; white-space: nowrap; animation: toastIn 0.25s ease; }
.toast-bubble.ok { background: #43a047; color: #fff; }
.toast-bubble.err { background: #c62828; color: #fff; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

.pagination-wrap { margin-top: 12px; font-size: 14px; color: #666; }
.pagination-wrap .pagination-btn { margin: 0 4px; padding: 4px 10px; font-size: 13px; border: 1px solid #ccc; background: #fff; cursor: pointer; border-radius: 4px; color: #333; }
.pagination-wrap .pagination-btn:hover:not(:disabled) { background: #f5f5f5; }
.pagination-wrap .pagination-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.pagination-wrap .pagination-num { display: inline-block; margin: 0 2px; padding: 4px 8px; font-size: 13px; border: 1px solid transparent; background: transparent; cursor: pointer; border-radius: 4px; color: #333; }
.pagination-wrap .pagination-num.cur { background: #1976d2; color: #fff; border-color: #1976d2; cursor: default; }
.pagination-wrap .pagination-num:not(.cur):hover { background: #e3f2fd; }

/* ========== 移动端响应式（与 old 一致）========== */
@media screen and (max-width: 1024px) {
    .container { width: 90% }
    #site-main { margin: 0 }
}

@media screen and (max-width: 768px) {
    .container { width: 70% }
    .column { width: 100%!important; margin: 0 0 30px!important; padding: 0 }
    .column:last-child { margin-bottom: 0 }
    .headline-content { max-width: 100% }
    .search-bar { padding-bottom: 60px }
    .search-tab span { font-size: 15px }
    .work-link { padding: 30px 0; font-size: 14px }
    .work-link .container { width: 85% }
    .work-link .tab { padding-bottom: 9px }
    .work-link .tab span { padding: 2px 12px }
    form .row, form .row .column { margin-bottom: 15px!important }
    form .row .column:last-child, form .row:last-child { margin-bottom: 0!important }
    /* 管理后台 */
    .admin-container { padding: 0 16px }
    .admin-header-inner { flex-wrap: wrap }
    .admin-content-section { padding: 16px }
    .admin-toolbar { flex-direction: row; gap: 8px }
    .toolbar-divider { height: 14px }
    .admin-table { display: block; overflow-x: auto }
    .admin-table th, .admin-table td { padding: 6px 8px; font-size: 12px }
    .admin-table .col-url { max-width: 180px }
}

@media screen and (max-width: 480px) {
    .container { width: 90% }
    .headline { padding: 60px 0 }
    .search-bar { padding: 30px 0 50px }
    .search-tab span { font-size: 14px }
    .search-form input[type=search],
    .search-form input[type=submit] { max-width: none }
    .search-form input[type=search] { width: 65% }
    .search-form input[type=submit] { width: 33% }
    /* 小屏 Tab：与 old 一致，无背景，用底部边框表示激活 */
    .work-link .tab span {
        padding: 0 0 4px;
        border-bottom: 2px solid transparent
    }
    .work-link .tab span.active,
    .work-link .tab span:hover {
        background: 0 0;
        border-bottom: 2px solid #838383
    }
    .work-link .info ul {
        padding: 6px 0;
        border-bottom: 1px solid #eaeaea
    }
    .work-link .info ul:last-child { border-bottom: none }
    .work-link .info li {
        width: 25%;
        padding: 0
    }
    /* 管理后台 */
    .admin-title { font-size: 18px }
    .admin-table th, .admin-table td { padding: 5px 6px; font-size: 11px }
    .admin-table .col-url { max-width: 120px }
    .admin-modal-inner { padding: 20px; width: 95% }
}