:root {
    --page-bg: #f7f8fa;
    --surface: #ffffff;
    --surface-muted: #f2f4f7;
    --ink: #17202b;
    --muted: #718096;
    --line: #e5e9ef;
    --brand: #3157d5;
    --brand-deep: #2342a8;
    --success: #147d57;
    --danger: #c53b4d;
    --shadow-sm: 0 8px 24px rgba(23, 32, 43, .05);
    --shadow-md: 0 18px 48px rgba(23, 32, 43, .09);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
    min-height: 100vh;
    padding-top: 0;
    background: var(--page-bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); transition: color .2s ease, opacity .2s ease; }
a:hover, a:focus { color: var(--brand-deep); text-decoration: none; }

:focus-visible {
    outline: 3px solid rgba(49, 87, 213, .22);
    outline-offset: 2px;
}

.container { width: calc(100% - 32px); max-width: 1180px; }

.navbar {
    min-height: 76px;
    margin-bottom: 32px;
    border: 0;
    border-bottom: 1px solid rgba(229, 233, 239, .9);
    border-radius: 0;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 24px rgba(23, 32, 43, .04);
    backdrop-filter: blur(18px);
}

.navbar-header, .navbar-collapse { min-height: 76px; }
.navbar-brand {
    height: 76px;
    padding: 25px 15px;
    color: var(--ink) !important;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.02em;
}
.navbar-brand:before {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 10px 2px 0;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 5px rgba(49, 87, 213, .1);
    content: "";
}
.navbar-default .navbar-nav > li > a {
    height: 76px;
    padding: 27px 15px 25px;
    color: var(--muted);
    font-weight: 600;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: var(--ink);
    background: transparent;
}
.navbar-default .navbar-nav > .active > a:after {
    position: absolute;
    right: 15px;
    bottom: 0;
    left: 15px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--brand);
    content: "";
}
.navbar-default .navbar-toggle { margin-top: 20px; border-color: var(--line); }
.navbar-default .navbar-toggle .icon-bar { background-color: var(--ink); }
.navbar-default .navbar-collapse { border-color: var(--line); }
.navbar-default .dropdown-menu {
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
}

.well, .panel {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.well { padding: 28px; }
.panel { overflow: hidden; }
.panel-heading {
    padding: 18px 22px;
    border-bottom: 1px solid var(--line) !important;
    background: var(--surface-muted) !important;
    color: var(--ink) !important;
}
.panel-title { font-weight: 700; }
.panel-body { padding: 24px; }
.panel-footer { border-top: 1px solid var(--line); background: var(--surface-muted); }
.panel-primary, .panel-info { border-color: var(--line); }

.form-control {
    height: 44px;
    padding: 9px 13px;
    border: 1px solid #d9dfe7;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(49, 87, 213, .12);
}
.form-group label.control-label { color: var(--muted); font-size: 13px; font-weight: 600; }

.btn {
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover, .btn:focus { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(23, 32, 43, .1); }
.btn-primary, .btn-info { border-color: var(--brand); background: var(--brand); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-info:hover, .btn-info:focus { border-color: var(--brand-deep); background: var(--brand-deep); color: #fff; }
.btn-default { border-color: var(--line); background: #fff; color: var(--ink); }
.btn-success { border-color: var(--success); background: var(--success); color: #fff; }
.btn-danger { border-color: var(--danger); background: var(--danger); color: #fff; }

.table { margin-bottom: 0; }
.table > thead > tr > th { border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.table > tbody > tr > td { border-top: 1px solid #edf0f4; vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #fbfcfd; }
.table-hover > tbody > tr:hover { background: #f2f5ff; }
.filelist .fa { margin-right: 8px; color: var(--brand); }

.pagination > li > a, .pagination > li > span { border-color: var(--line); color: var(--brand); }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover { border-color: var(--brand); background: var(--brand); }

.nav-tabs { border-bottom: 1px solid var(--line); background: #fff; }
.nav-tabs > li > a { margin: 0; border: 0 !important; color: var(--muted) !important; font-weight: 700; }
.nav-tabs > li > a:hover { background: transparent !important; color: var(--ink) !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border: 0 !important; background: transparent !important; color: var(--brand) !important; }
.nav-tabs > li.active { border-bottom: 3px solid var(--brand); background: transparent; }

.alert { border: 1px solid transparent; border-radius: 10px; box-shadow: none; }
.progress { height: 10px; margin-bottom: 10px; overflow: hidden; border-radius: 99px; background: var(--surface-muted); box-shadow: none; }
.progress .progress-bar { background: var(--brand); }

.footer { margin-top: 56px; padding: 28px 0; border-top: 1px solid var(--line); background: #fff; }
.footer p { margin: 0; color: var(--muted); }

.form-group{padding-bottom:0;margin:0 0 15px 0}
.elsetext{top:0;color:#adadad;font-size:20px}
.elseview{height:150px}
.tubiao{background-color:transparent;font-size:100px;color:#adadad;width:100px;height:100px}
.view { padding: 32px 0 48px; }
.video_view{width:100%;max-height:450px;min-height:300px}
.image_view{max-width:100%;max-height:450px;min-height:300px}
.image{max-width:100%;max-height:450px}

.login-card { max-width: 520px; margin: 32px auto 0; text-align: center; }
.login-card h5 { margin: 0 0 20px; color: var(--ink); font-size: 20px; font-weight: 700; }
.loginbtn { display: inline-flex; width: 52px; height: 52px; min-height: 52px; align-items: center; justify-content: center; margin: 8px; padding: 0; border-radius: 50%; box-shadow: var(--shadow-sm); }
.loginbtn i { padding: 0; font-size: 20px; }
.infobox { border: 1px dashed #cbd4e1; background: linear-gradient(180deg, #fff, #f8faff); }

.fileinfo-table { max-width: 80%; }
.filename{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aplayer .aplayer-pic{height:100px;width:100px}
.aplayer .aplayer-info .aplayer-music .aplayer-title{font-size:18px}
.aplayer .aplayer-info{margin-left:100px;padding:25px 7px 0 10px;height:66px;box-sizing:border-box}
.filelist>tbody>tr>td{max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}
.form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}
.searchbox{margin-top: -10px;}
.searchbox button{margin-top: 8px;}
@media (min-width:767px){.searchbox{float: right; margin-top: -8px;}}

@media (max-width: 767px) {
    body { padding-top: 0; }
    .navbar, .navbar-header, .navbar-collapse { min-height: 60px; }
    .navbar-brand { height: 60px; padding: 18px 15px; font-size: 16px; }
    .navbar-default .navbar-nav > li > a { height: auto; padding: 14px 15px; }
    .navbar-default .navbar-nav > .active > a:after { right: 15px; bottom: 4px; left: 15px; }
    .container { width: calc(100% - 24px); }
    .well { padding: 18px; }
    .well h2 { margin-top: 6px; font-size: 22px; line-height: 1.4; }
    .searchbox { float: none; display: block; margin: 16px 0 0; }
    .searchbox form { display: flex; gap: 8px; }
    .searchbox .form-control { min-width: 0; flex: 1; }
    .searchbox button { margin: 0; }
    .table-responsive { border: 0; }
    .panel-body { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
.videoplayer { height: 500px; }
@media (max-width: 991px) { .videoplayer { height: 450px; } }
@media (max-width: 767px) {
    .videoplayer { height: 400px; }
    .fileinfo-table { max-width: 100%; }
    .login-card { margin-top: 16px; }
    .loginbtn { margin: 6px; }
}

@-webkit-keyframes stretchdelay{0%,100%,40%{-webkit-transform:scaleY(.4)}20%{-webkit-transform:scaleY(1)}}@keyframes stretchdelay{0%,100%,40%{-webkit-transform:scaleY(.4);transform:scaleY(.4)}20%{-webkit-transform:scaleY(1);transform:scaleY(1)}}.colorful_loading_frame{position:fixed;top:0;left:0;z-index:99999;width:100%;height:100%;background:rgba(0,0,0,.5);color:red;text-align:center;font-size:2em}.colorful_loading{margin:25% auto;width:50px;height:60px;text-align:center;font-size:10px}.colorful_loading>i{display:inline-block;margin-right:3px;width:6px;height:100%;background-color:#fff;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out}.colorful_loading .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.colorful_loading .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.colorful_loading .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.colorful_loading .rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}