/* =========================================================
   Base CSS (Ultra Clean)
   仅使用主题 token：
   --bg --text --muted --muted2 --line --line2
   允许：--shadow --image-brightness
   保留：--red --green --blue（提示）/ --baidu --yyw（品牌）
   ========================================================= */


/* =========================================================
   1. Fonts
   ========================================================= */
@font-face {
  font-family: 'EnglishFont';
  src: url('/assets/fonts/Rubik-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'EnglishFont';
  src: url('/assets/fonts/Rubik-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}


/* =========================================================
   2. Reset / Global
   ========================================================= */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  font-family: 'EnglishFont', 'Microsoft Yahei', 'Simsun', sans-serif;
  font-weight: 400;
  transition: background-color .25s ease, color .25s ease;
  place-content: center;
  align-content: center;
}

/* 兼容旧 iOS / 老 WebView */
html, body {
  margin: 0;
}

body {
  flex-direction: column;
  font-size: 14px;
}

.page {
  display: flex;
  flex-direction: column;
  flex: 1;               /* 占满 body 剩余空间 */
}

.inner {
  flex: 1;               /* 占满 .page 剩余空间 */
  display: flex;
  flex-direction: column;
}

#main {
  flex: 1;               /* 占满 .inner 剩余空间 */
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  overflow-y: auto;      /* 滚动区域 */
}


body::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

html[data-sidebar="open"] main {
  margin-right: -75px;
}

img {
  max-width: 100%;
  height: auto;
  filter: brightness(var(--image-brightness));
}

svg {
  width: 13px;
  height: auto;
  stroke-width: 2px;
}

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

a:hover {
  color: var(--blue);
}


/* =========================================================
   3. Layout Shell
   ========================================================= */

#main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

main {
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--line2);
  min-height: 400px;
  min-width: 0;
  width: calc(100% - 130px);
  flex: 1 1 auto;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  text-align: left;
  transition:
    flex .3s cubic-bezier(.4, 0, .2, 1),
    margin-right .3s;
}

    html {
        background: linear-gradient(315deg, black, #1d1d1d);
        color: var(--text);
    }

    html[data-theme="dark"] {
        color-scheme: dark;
    }

    html[data-theme="light"] {
        color-scheme: light;
    }

    body {
        color: var(--text);
    }
    
    /* 全站灰度模式 */
    html.grayscale {
        filter: grayscale(100%);
    }

    /* 防止图片变灰（可选） */
    html.grayscale img {
        filter: grayscale(0%);
    }
    

    html[data-traditional-pending="true"] body {
        visibility: hidden;
    }


/* 注意：旧设备若 main 异常，可考虑删掉 width: calc(100% - 130px)，改用纯 flex */

.content {
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  box-sizing: border-box;
  -ms-overflow-style: none;
  scrollbar-width: none;
  border-radius: 15px;
  padding: 24px 20px 40px;
}

.content::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.content > :first-child {
  margin-top: 0;
}

.content > :last-child {
  margin-bottom: 0;
}

.inner > header,
.page > footer {
  flex: 0 0 auto;
}

.edge-shadow {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  z-index: 1;
}

.achievement-title {}


/* =========================================================
   4. Typography
   ========================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text);
  line-height: 1.25;
}

h1 {
  font-size: 1.5rem;
  margin-bottom: 5px;
  display: flex;
  gap: 5px;
}

h2 { font-size: 1.375rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: .875rem; }

@media (max-width: 768px) {
  h1 { font-size: 1.375rem; }
  h2 { font-size: 1.25rem; }
}

p {
  margin-bottom: 8px;
  line-height: 1.5em;
  text-align: justify;
}

small {
  color: var(--muted2);
}

.site_subtitle {
  font-weight: 500;
  letter-spacing: 1px;
  white-space: nowrap;
}

h3 span.site_subtitle {
  margin-left: 10px;
}


/* =========================================================
   6. Common Utilities / Icons
   ========================================================= */
.icon {
  display: flex;
}

.feather-icon {
  width: 15px;
}

.icon-shape {
  fill: currentColor;
}

#user svg {
  margin-right: 0;
  width: 3.8em;
  height: 3.8em;
  color: var(--muted2);
  border-radius: 50%;
  stroke-width: 1.2px;
}

.z-btn {
  display: flex;
  align-items: center;
  gap: 5px;
}

.z-btn form{
  margin: 0;
}

#toggleBtn {
  display: flex;
      align-items: flex-start;
    gap: 10px;
    flex-direction: column;
}

.disabled {
  background: var(--line2);
}


/* =========================================================
   7. Common Page IDs
   ========================================================= */
/*
#home,
#drama,
#credit,
#music,
#detail,
#collab-detail,
#profile,
#dashboard,
#ranking,
#feedback-corrections,
#feedback-page,
#admin-users,
#admin-dramas,
#edit-drama,
#edit-credit,
#edit-music,
#create-drama,
#create-credit,
#create-music,
#login,
#register,
#verify,
#set,
#uploadPoster,
#uploadPhoto,
#password,
#add-credit-to-drama,
#edit-credit-in-drama,
#add-music-to-drama,
#edit-music-in-drama,
#achievement-page,
#drama-life-page,
#personality-page {
  padding: 30px;
  border-radius: 15px;
}
*/

#drama,
#credit,
#dashboard,
#login,
#register,
#verify,
#resources,
#resource-detail,
.home-info,
.login-info,
.register-info,
.password-info {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 100%;
  height: auto;
}

.login-info form,
.register-info form,
.search form,
.password-info form {
  width: 180px;
}


/* =========================================================
   8. Nav / User Info
   ========================================================= */
nav {
  display: grid;
  gap: 30px;
}

nav.active {
  margin-top: 30px;
  margin-left: 0;
}

nav a svg.feather-icon {
  width: 16px;
  margin-right: 3px;
  color: inherit;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
}

nav ul li a,
nav ul li span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  font-size: 13px;
}

nav ul li.active a {
  color: var(--blue);
  font-weight: bold;
}

nav ul li.active a svg {
  stroke: var(--blue);
}

nav ul li span svg {
  width: 15px;
}

.user {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}

.loginfo {
  display: grid;
    margin-top: 5px;
    justify-items: center;
    gap: 5px;
}


/* =========================================================
   9. Buttons / Actions
   ========================================================= */
button,
.button,
a.btn {
  display: flex;
  align-items: center;
  gap: 3px;
  width: max-content;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
  color: var(--bg);
  background: var(--text);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.btn:hover {
  background: var(--green);
  color: var(--bg);
}

a.btn.left  { border-radius: 10px 0 0 10px; }
a.btn.right { border-radius: 0 10px 10px 0; }

td a.btn {
  border: none;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.mc-icon {
  display: flex;
  transition: transform .3s ease, opacity .3s ease;
}

.action-btn.active .mc-icon {
  transform: scale(1.1);
  opacity: .9;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-only {
  display: flex;
    gap: 15px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}

.admin-only a {
  color: var(--muted2);
  display: flex;
  gap: 5px;
}


/* =========================================================
   10. Forms
   ========================================================= */

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 20px 0;
  gap: 10px;
}

.mb {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

input::placeholder,
textarea::placeholder{
  color: var(--muted2);
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

input[readonly] {
  background: var(--line2) !important;
  border-left: none;
}

input[type="text"],
input[type="submit"],
input[type="button"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="file"],
input[type="url"],
textarea {
  width: 100%;
  color: var(--text);
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 10px 12px;
  cursor: pointer;
  display: inline-block;
  margin-left: -1px;
  line-height: 1.5;
  border-radius: 10px;
  font-family: unset;
}

select {
  width: 100%;
  margin: 0 -1px;
  padding: 15px 10px;
  border: 1px solid var(--line);
  background: var(--line2);
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select::-ms-expand {
  display: none;
}

/* autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
  -webkit-text-fill-color: var(--text) !important;
}


/* =========================================================
   11. Tables / Quote / Code
   ========================================================= */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th,
td {
  padding: 10px;
  text-align: left;
  border: 1px solid var(--line);
}

th,
td:first-child {
  background: var(--line2);
}

blockquote {
  margin: 20px 0;
  padding: 10px 20px;
  background: var(--line2);
  border-left: 5px solid var(--line);
}

pre,
code {
  background: var(--line2);
  padding: 5px;
  border-radius: 0;
  margin-bottom: 20px;
  font-family: 'Courier New', monospace;
}

pre {
  overflow: auto;
}


/* =========================================================
   12. Cards / Data Blocks
   ========================================================= */
.card-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 10px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(222px, 1fr));
  gap: 5px;
}

.card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 10px;
}

.card:hover{
  background: var(--bg);
  border: 1px solid var(--line);
}

#profile-data {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 20px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.value{
    font-weight: bold;
    font-size: 14px;
}

.value2{
    font-size: 13px; 
}

.values {
  display: flex;
  gap: 10px;
}

.value,
.value2 {
  display: flex;
  align-items: center;
  gap: 5px;
}


.label {
  color: var(--muted2);
  font-size: 12px;
}

.play,
.mda {
  color: var(--muted2);
}

a.edit {
  font-size: 12px;
}

a.edit svg {
  stroke-width: 1px;
}

.award {
  margin-left: 5px;
  background: var(--text);
  color: var(--bg);
  padding: 2px 3px;
  font-size: 11px;
  border-radius: 3px;
}


/* =========================================================
   13. Search / List
   ========================================================= */
.search {
  position: relative;
}

.search input[type="text"] {
  border-radius: 10px;
}

.search-button {
  padding: 8px 16px;
  background: var(--text);
  color: var(--bg);
  border: none;
  cursor: pointer;
}

.search-results {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 15px;
  background: var(--text);
  color: var(--bg);
  margin: 10px 0;
}

.statistic {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.statistic svg {
  margin-right: 5px;
}

.tags {
  display: flex;
  gap: 5px;
  font-size: 11px;
}

.sort-options {
  margin: 20px 0 10px;
}

.sort-options a {
  margin-right: 10px;
  cursor: pointer;
  text-decoration: underline;
}

.sort-options a.active {
  font-weight: 700;
  color: var(--text);
}

.date {
  display: flex;
}

.list-img {
  width: 100%;
  height: 0;
  padding-bottom: 145%;
  position: relative;
}

.drama_list_poster,
.credit_list_photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  filter: brightness(var(--image-brightness));
}

.home .drama_list_poster {
  border-radius: 0;
}

.producer {
  color: var(--muted2);
  font-size: .9em;
}


/* =========================================================
   14. Record-style List
   ========================================================= */
.drama-grid,
.credit-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.drama-item,
.credit-item {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 10px 0;
}

.list-img {
  width: 50px;
  padding-bottom: 70px;
  flex-shrink: 0;
}

.drama-list-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drama-list-info h3,
.credit-list-info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.list-info {
  display: flex;
  flex-direction: row;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.year-divider {
  padding: 18px 0 8px;
  margin-top: 6px;
  border-top: 1px solid var(--line);
}

.year-divider h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .04em;
}

.year-divider .list-info {
  font-size: 12px;
  color: var(--muted2);
}


/* =========================================================
   15. Pagination
   ========================================================= */
.pagination {
  display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}

.desktop-pagination {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 15px;
}

.desktop-pagination li a {
  color: var(--muted);
  cursor: pointer;
}

.desktop-pagination li.active a {
  font-weight: 600;
  color: var(--text);
  border-color: var(--muted2);
}

.mobile-pagination .btn,
.mobile-pagination select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
}

.mobile-pagination .btn.disabled {
  opacity: .4;
  pointer-events: none;
}


/* =========================================================
   16. Detail / Credit
   ========================================================= */
.base-info {
  display: flex;
  flex-direction: row;
  gap: 15px;
  margin-bottom: 20px;
}

.subscript {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  font-size: 13px;
}

.tag li:first-child,
.listGenre span:first-child,
.occupation li:first-child {
  background: var(--text);
  color: var(--bg);
}

.details-info {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.title-head {
  display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}

.title-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
}

.title-head .site_subtitle {
  font-size: 12px;
}

.record-acc__body{
    margin: 15px 0;
}

.drama-credit-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  line-height: 1.2;
}

.drama-credit-photo {
  width: 60px;
  height: 60px;
}

.drama-credit-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--line);
  border-radius: 15%;
}

.credit_photo,
.drama_poster {
  border-radius: 10px;
  border: 1px solid var(--line);
  filter: brightness(var(--image-brightness));
}


/* =========================================================
   17. Messages / Tips / State
   ========================================================= */
.message-box {
  padding: 20px;
  border-radius: 5px;
  display: inline-block;
  color: var(--bg);
  font-size: 18px;
}

.success,
#message .success svg {
  color: var(--green);
}

.error,
#message .error svg {
  color: var(--red);
}

.warning,
#message .warning svg {
  color: var(--orange);
}

.info,
#message .info svg {
  color: var(--blue);
}

.timer {
  font-size: 13px;
  color: var(--text);
  margin-top: 6px;
}

.tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--text);
  font-size: larger;
}

.tip svg {
  width: 45px;
}

.message {
  height: 100%;
  display: grid;
  place-content: center;
  text-align: center;
}

.empty-state {
  color: var(--muted2);
}


/* =========================================================
   18. Confirm Modal
   ========================================================= */
   body.modal-open {
    overflow: hidden;
}
.confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.confirm-box {
  width: 300px;
  background: var(--bg);
  padding: 35px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  font-size: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.confirm-content{
  place-items: center;
   padding-right: 32px;
}

.confirm-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.confirm-ok,
.confirm-cancel {
  padding: 12px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  border: 1px solid var(--line);
 
}

.confirm-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    color: #666;
    z-index: 10;
    display: none;
    padding: 0;
}

.confirm-close:hover {

}

.confirm-content {
    padding-right: 32px;
}



/* =========================================================
   20. Rating
   ========================================================= */
.rating,
.detail-rating {
  display: flex;
  align-items: center;
  margin-left: 5px;
  font-size: 13px;
  color: var(--text);
}

.no-rating {
  margin-left: 5px;
  font-size: 13px;
}


/* =========================================================
   21. Record Detail Page
   ========================================================= */
.record-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 15px;
}

.record-poster {
  width: 100px;
  height: 145px;
  display: block;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: center / cover no-repeat;
  flex: 0 0 auto;
}

.record-title {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.record-title h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.25;
  color: var(--text);
}

.record-subline .dot {
  color: var(--muted2);
  margin: 0 5px;
}

.record-index {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 8px 10px;
}

.record-inline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.record-inline li {
  margin: 0;
  padding: 3px 8px;
  color: var(--bg);
  background: var(--text);
  border-radius: 6px;
  font-size: 12px;
}

.record-kv {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.record-kv li {
  display: flex;
  color: var(--text);
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line2);
}

.record-kv li strong {
  display: inline-block;
  width: 50px;
  flex: 0 0 50px;
  font-weight: 500;
  color: var(--muted2);
}

#synopsis {
  margin: 0;
  color: var(--text);
}

/* 去掉默认三角 */
.record-acc__sum {
  list-style: none;
}

.record-acc__sum::-webkit-details-marker {
  display: none;
}

.record-acc__sum::marker {
  content: '';
}

.record-acc__sum {
  list-style: none;
  cursor: pointer;
}

.record-acc__sum .title-head,
.record-acc__sum h3,
.record-acc__sum .site_subtitle {
  cursor: pointer;
}

/* =========================================================
   22. UI Links / Pills / Buttons
   ========================================================= */
.ui-link,
.ui-pill,
.ui-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  text-decoration: none;
  transition: all .18s ease;
}

.ui-link {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
}

.ui-link:hover {
  color: var(--muted);
}

.ui-pill {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

.ui-pill:hover {
  background: var(--text);
  color: var(--bg);
  transform: translateY(-1px);
}

.ui-pill:active {
  transform: translateY(0);
}

.ui-btn {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

.ui-btn:hover {
  background: var(--text);
  color: var(--bg);
}

.ui-btn:disabled,
.ui-link:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.ui-pill svg,
.ui-link svg,
.ui-btn svg {
  width: 12px;
  height: 12px;
  opacity: .72;
}


/* =========================================================
   23. Play Links
   ========================================================= */
#sec-play .record-acc__body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#sec-play .play-links__hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted2);
}

@media (max-width: 640px) {
  #sec-play .play-links {
    gap: 8px;
  }

  #sec-play .ui-pill {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }
}


/* =========================================================
   24. Low-end Device Compatibility Helpers
   说明：
   旧设备 flex-gap 可能失效，需要 margin 回退
   你可以给关键容器额外加 .no-flex-gap
   ========================================================= */
.no-flex-gap > * {
  margin-right: 10px;
  margin-bottom: 10px;
}

.no-flex-gap {
  margin-right: -10px;
  margin-bottom: -10px;
}

/* 常见容器回退建议（按需启用）
   例如：
   <div class="action-buttons no-flex-gap"></div>
   <div class="play-links no-flex-gap"></div>
*/
.credit-drama-poster{
    width:56px;flex:0 0 56px;
}
.credit-drama-poster img{
    width:56px;height:72px;border-radius:4px;border:1px solid var(--line);object-fit:cover;
}

.feedback-link{
    margin-top: 10px;
}


.record-acc__sum {
  cursor: pointer;
  transition: opacity .2s ease;
}

.record-acc:not(.is-open) .record-acc__sum {
  opacity: .72;
}

.record-acc__body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height .32s ease,
    opacity .2s ease,
    transform .28s ease;
}

.record-acc.is-open .record-acc__body {
  max-height: 1200px;
  opacity: 1;
  transform: translateY(0);
}