body,
body.dark {
 background: #191d23;
 color: #f1f1f1;
 font-family: sans-serif;
 margin: 0;
 padding: 0;
}
body.light {
 background: #f3f7ff;
 color: #191d23;
}
.container {
 max-width: 520px;
 margin: 30px auto 0 auto;
 background: #23272f;
 border-radius: 12px;
 box-shadow: 0 4px 16px #0007;
 padding: 24px;
}
body.light .container {
 background: #fff;
 color: #222;
}
.header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 background: #20232b;
 padding: 10px 20px;
 border-radius: 0 0 14px 14px;
 margin-bottom: 18px;
 box-shadow: 0 4px 12px #0006;
}
body.light .header {
 background: #e9efff;
 color: #222;
 box-shadow: 0 4px 12px #b6c6dd22;
}
.site-title {
 font-size: 2rem;
 letter-spacing: 1px;
 margin: 0;
}
.header-right {
 display: flex;
 align-items: center;
 gap: 15px;
}
.user-name {
 font-weight: bold;
 color: #a9cfff;
}
body.light .user-name {
 color: #3e6fd9;
}
.theme-toggle {
 background: none;
 border: none;
 font-size: 1.5rem;
 color: #ffe;
 cursor: pointer;
}
body.light .theme-toggle {
 color: #111;
}
.main-card {
 background: #23272f;
 border-radius: 12px;
 box-shadow: 0 4px 16px #0005;
 padding: 24px;
 max-width: 900px;
 margin: 0 auto;
}
body.light .main-card {
 background: #fff;
 color: #23272f;
 box-shadow: 0 4px 16px #c6dafb33;
}
.links-table {
 width: 100%;
 border-collapse: collapse;
 margin-bottom: 18px;
 font-size: 1.07em;
}
.links-table tr {
 transition: background 0.15s;
}
.links-table tr:hover {
 background: #20242c;
}
body.light .links-table tr:hover {
 background: #e6f0ff;
}
.links-table td {
 padding: 7px 5px;
 border-bottom: 1px solid #232b36;
 vertical-align: top;
}
body.light .links-table td {
 border-bottom: 1px solid #e0e8f7;
}
.links-table a {
 color: #82baff;
 text-decoration: none !important;
 transition: color 0.15s;
}
body.light .links-table a {
 color: #386ee8;
}
.links-table a:hover {
 color: #ffe066;
 text-decoration: underline;
}
body.light .links-table a:hover {
 color: #efaf00;
}
.edit-btn,
.delete-btn {
 font-size: 1.2em;
 text-decoration: none;
 margin-left: 8px;
 opacity: 0.85;
 transition: color 0.15s, opacity 0.15s;
 background: none;
 border: none;
 cursor: pointer;
}
.edit-btn {
 color: #ffecb3;
}
.delete-btn {
 color: #ffbdbd;
}
.edit-btn:hover {
 color: #ffe066;
 opacity: 1;
}
.delete-btn:hover {
 color: #ff4d4f;
 opacity: 1;
}
.tags-list {
 display: flex;
 flex-wrap: wrap;
 gap: 7px;
 margin-bottom: 14px;
}
.tag-button {
 display: inline-block;
 padding: 5px 13px;
 background: #273049;
 color: #a9cfff;
 border-radius: 16px;
 font-size: 0.95em;
 text-decoration: none !important;
 transition: background 0.15s, color 0.15s;
 border: none;
 cursor: pointer;
}
.tag-button:hover {
 background: #6689ff;
 color: #fff;
}
body.light .tag-button {
 background: #e9efff;
 color: #3e6fd9;
}
body.light .tag-button:hover {
 background: #b3cfff;
 color: #fff;
}
.tags-spoiler summary,
.filter-spoiler summary {
 cursor: pointer;
 color: #99c4fa;
 margin-bottom: 5px;
 font-size: 1em;
 padding: 2px 8px;
 border-radius: 7px;
 min-height: 20px;  /* добавь если хочешь фикс */
 line-height: 1.0;  /* регулируй если нужно */
 background: #232b3c;
 display: inline-block;
 opacity: 0.84;
 user-select: none;
 transition: color 0.14s, background 0.16s;
}
.tags-spoiler[open] summary,
.filter-spoiler[open] summary {
 color: #ffe066;
 background: #1b2535;
 opacity: 1;
}
body.light .tags-spoiler summary,
body.light .filter-spoiler summary {
 color: #386ee8;
 background: #f4f7fd;
}
body.light .tags-spoiler[open] summary,
body.light .filter-spoiler[open] summary {
 color: #a98600;
 background: #dce3ef;
}
.tag-row {
 display: flex;
 gap: 8px;
 max-width: 450px;
 margin-bottom: 16px;
}
#tag-input,
#tag-select {
 border: 1px solid #aaa;
 border-radius: 7px;
 padding: 7px;
 background: #22252b;
 color: #fff;
}
body.light #tag-input,
body.light #tag-select {
 background: #fff;
 color: #111;
 border: 1px solid #b6c6dd;
}
#add-tags-btn {
 padding: 7px 15px;
 background: #669aff;
 color: #fff;
 border: none;
 border-radius: 7px;
 cursor: pointer;
}
#add-tags-btn:hover {
 background: #3e7ede;
}
.auth-block {
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 320px;
}
.auth-card {
 background: #1b1f26;
 padding: 30px 28px 24px 28px;
 border-radius: 12px;
 box-shadow: 0 6px 24px #0009;
 min-width: 320px;
}
body.light .auth-card {
 background: #fff;
 box-shadow: 0 6px 24px #9cb5e055;
}
.auth-title {
 font-size: 1.4em;
 font-weight: bold;
 margin-bottom: 12px;
 letter-spacing: 1px;
 text-align: center;
}
.login-form input[type="text"],
.login-form input[type="password"] {
 width: 100%;
 background: #22252b;
 color: #fff;
 border: 1px solid #35373b;
 border-radius: 6px;
 padding: 8px;
 margin-bottom: 13px;
 outline: none;
 transition: border-color 0.2s;
}
body.light .login-form input[type="text"],
body.light .login-form input[type="password"] {
 background: #fff;
 color: #222;
 border: 1px solid #b6c6dd;
}
.login-form button {
 width: 100%;
}
.vkid-login-btn {
 margin-top: 11px;
 display: flex;
 justify-content: center;
}
.exit-settings {
 display: inline-block;
 margin-top: 10px;
 color: #82baff;
 text-decoration: none;
 font-size: 1.05em;
 text-align: center;
}
.exit-settings:hover {
 color: #fff;
 text-decoration: none;
}
.note {
 font-size: 0.93em;
 color: #8ba0c6;
 background: #181b22;
 border-radius: 6px;
 padding: 7px 10px;
 margin-top: 13px;
 line-height: 1.5;
}
body.light .note {
 color: #567ac0;
 background: #eaf1fa;
}
.link-date {
 display: block;
 margin-top: 2px;
 font-size: 0.82em;
 color: #626d81;
 font-weight: 400;
 opacity: 0.65;
 line-height: 1.2;
}
body.light .link-date {
 color: #9aadc0;
}
a {
 text-decoration: none;
 color: #82baff;
 transition: color 0.15s;
}
a:hover,
a:focus {
 color: #ffe066;
 text-decoration: underline;
}
.pagination {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 6px;
 margin: 20px 0;
}
.pagination a,
.pagination strong {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 36px;
 height: 36px;
 font-size: 1.1em;
 background: #2d3240;
 color: #a9cfff;
 border-radius: 50%;
 text-decoration: none;
 border: none;
 transition: background 0.18s, color 0.18s, box-shadow 0.18s;
 box-shadow: 0 2px 6px #0002;
}
body.light .pagination a,
body.light .pagination strong {
 background: #e9efff;
 color: #2d3240;
 box-shadow: 0 2px 6px #b6c6dd33;
}
.pagination strong {
 background: #7fb3ff;
 color: #23272f;
 font-weight: bold;
 box-shadow: 0 2px 8px #2266bb22;
}
body.light .pagination strong {
 background: #386ee8;
 color: #fff;
 box-shadow: 0 2px 8px #899fd722;
}
.pagination a:hover {
 background: #99c4fa;
 color: #23272f;
 box-shadow: 0 4px 12px #669aff22;
}
body.light .pagination a:hover {
 background: #aac6ff;
 color: #174ab7;
}
@media (max-width: 1020px) {
 .container,
 .main-card {
  max-width: 99vw;
  padding: 4vw 1vw;
 }
 .links-table td {
  font-size: 0.98em;
 }
 .tag-row {
  max-width: 100vw;
  flex-direction: column;
 }
 .auth-card {
  min-width: 0;
  width: 97vw;
 }
}
@media (max-width: 650px) {
 .main-card {
  max-width: 100vw;
  padding: 6vw 3vw;
 }
 .links-table td {
  font-size: 0.98em;
 }
 .tag-row {
  max-width: 100vw;
  flex-direction: column;
 }
 .pagination a,
 .pagination strong {
  min-width: 32px;
  height: 32px;
  font-size: 1em;
 }
}
.add-link-form-block, .edit-link-form-block {
 background: #20232b;
 border-radius: 13px;
 box-shadow: 0 4px 14px #0005;
 padding: 30px 26px 24px 26px;
 margin: 28px auto 30px auto;
 max-width: 700px;
}
body.light .add-link-form-block,
body.light .edit-link-form-block {
 background: #f8faff;
 box-shadow: 0 4px 14px #b6c6dd33;
}
.form-title {
 font-size: 1.35em;
 color: #c6e4ff;
 margin-bottom: 18px;
 font-weight: 600;
 letter-spacing: 1px;
}
body.light .form-title {
 color: #386ee8;
}
.form-row {
 margin-bottom: 15px;
 display: flex;
 flex-direction: row;
 gap: 0;
}
.big-input, .tag-select {
 width: 100%;
 font-size: 1.1em;
 padding: 13px 12px;
 border-radius: 7px;
 border: 1px solid #35373b;
 background: #22252b;
 color: #fff;
 transition: border 0.19s;
}
body.light .big-input, body.light .tag-select {
 background: #fff;
 color: #222;
 border: 1px solid #b6c6dd;
}
.big-input:focus, .tag-select:focus {
 border-color: #669aff;
}
.tag-select {
 min-height: 44px;
 max-height: 160px;
}
.big-submit-btn,
.save-order-btn {
 width: 100%;
 padding: 13px 0;
 font-size: 1.13em;
 border-radius: 7px;
 background: linear-gradient(90deg,#72b6ff,#2d3240 120%);
 color: #fff;
 border: none;
 font-weight: 500;
 cursor: pointer;
 transition: background 0.15s;
}
.big-submit-btn:hover,
.save-order-btn:hover {
 background: linear-gradient(90deg,#348bf7,#4e76a5 100%);
}
body.light .big-submit-btn,
body.light .save-order-btn {
 background: linear-gradient(90deg,#386ee8,#b5cbff 120%);
 color: #fff;
}
body.light .big-submit-btn:hover,
body.light .save-order-btn:hover {
 background: linear-gradient(90deg,#b5cbff,#386ee8 100%);
 color: #fff;
}
.tags-admin-list {
 list-style: none;
 padding: 0;
 margin: 0 0 18px 0;
}
.tags-admin-list li {
 margin: 0 0 9px 0;
 display: flex;
 align-items: center;
 gap: 16px;
 padding: 10px 0 7px 0;
 border-bottom: 1px solid #232b36;
 justify-content: space-between;
}
.tags-admin-list li:last-child {
 border-bottom: none;
}
body.light .tags-admin-list li {
 border-bottom: 1px solid #e0e8f7;
}
.period-filter-form {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 9px;
 background: #232b36;
 padding: 8px 16px 4px 16px;
 border-radius: 10px;
 margin-bottom: 18px;
 min-width: 260px;
}
body.light .period-filter-form {
 background: #f4f8ff;
}
.period-filter-form input[type="date"] {
 background: #191d23;
 color: #fff;
 border: 1px solid #35373b;
 border-radius: 7px;
 padding: 6px;
}
body.light .period-filter-form input[type="date"] {
 background: #fff;
 color: #191d23;
 border: 1px solid #b6c6dd;
}
.period-filter-form button {
 padding: 6px 18px;
 border-radius: 7px;
 background: #669aff;
 color: #fff;
 border: none;
 cursor: pointer;
 transition: background 0.16s;
}
.period-filter-form button:hover {
 background: #3e7ede;
}
.block-order-form {
 margin: 38px 0 30px 0;
 padding-top: 12px;
 border-top: 1px solid #292e3a;
}
body.light .block-order-form {
 border-top: 1px solid #d6deeb;
}
.block-order-select {
 width: 100%;
 margin-bottom: 11px;
 padding: 8px 13px;
 border-radius: 7px;
 background: #22252b;
 color: #fff;
 border: 1px solid #35373b;
 font-size: 1em;
}
body.light .block-order-select {
 background: #fff;
 color: #174ab7;
 border: 1px solid #b6c6dd;
}
.manage-tags-link {
 display: block;
 margin: 32px 0 10px 0;
 color: #82baff;
 font-size: 1.12em;
 text-align: center;
 text-decoration: none !important;
}
.manage-tags-link:hover { color: #fff; }
body.light .manage-tags-link {
 color: #386ee8;
}
body.light .manage-tags-link:hover {
 color: #222;
}
.period-quick-center {
 display: flex;
 justify-content: center;
 align-items: flex-start;
 margin-bottom: 18px;
}
.period-quick-buttons {
 display: flex;
 flex-wrap: wrap;
 gap: 7px;
 margin: 14px 0 4px 0;
 justify-content: center;
}
.period-quick-buttons button {
 background: #171b22;
 color: #b4cae8;
 border: 1px solid #283245;
 border-radius: 7px;
 padding: 4px 12px;
 font-size: 0.98em;
 cursor: pointer;
 transition: background 0.13s, color 0.13s;
 margin-bottom: 2px;
 white-space: nowrap;
}
.period-quick-buttons button:hover {
 background: #33435d;
 color: #fff;
}
body.light .period-quick-buttons button {
 background: #e9efff;
 color: #386ee8;
 border: 1px solid #b6c6dd;
}
body.light .period-quick-buttons button:hover {
 background: #aac6ff;
 color: #222;
}
.header-right a[title="Настройки"],
.header-right a[title="Выйти"] {
 text-decoration: none !important;
 color: #ffe !important;
 border: none;
 background: none;
 font-size: 1.34em;
 padding: 0 2px;
 transition: color 0.15s;
}
.header-right a[title="Настройки"]:hover,
.header-right a[title="Выйти"]:hover,
.header-right a[title="Настройки"]:focus,
.header-right a[title="Выйти"]:focus {
 color: #ffe066 !important;
 text-decoration: none !important;
}
body.light .header-right a[title="Настройки"],
body.light .header-right a[title="Выйти"] {
 color: #222 !important;
}
body.light .header-right a[title="Настройки"]:hover,
body.light .header-right a[title="Выйти"]:hover,
body.light .header-right a[title="Настройки"]:focus,
body.light .header-right a[title="Выйти"]:focus {
 color: #efaf00 !important;
}









.profile-settings-card {
 background: #20232b;
 border-radius: 13px;
 box-shadow: 0 4px 14px #0005;
 padding: 28px 32px 32px 32px;
 margin: 36px auto 30px auto;
 max-width: 500px;
 min-width: 310px;
}
body.light .profile-settings-card {
 background: #f8faff;
 box-shadow: 0 4px 14px #b6c6dd33;
}
.profile-table {
 width: 100%;
 border-collapse: separate;
 border-spacing: 0 10px;
 margin-bottom: 20px;
}
.profile-table td {
 padding: 0 8px 0 0;
 vertical-align: middle;
}
.profile-table label {
 color: #a9cfff;
 font-weight: 500;
 font-size: 1.01em;
 white-space: nowrap;
}
body.light .profile-table label {
 color: #386ee8;
}
.profile-table input[type="text"],
.profile-table input[type="email"],
.profile-table input[type="password"] {
 width: 100%;
 font-size: 1.07em;
 padding: 11px 10px;
 border-radius: 7px;
 border: 1px solid #35373b;
 background: #22252b;
 color: #fff;
}
body.light .profile-table input[type="text"],
body.light .profile-table input[type="email"],
body.light .profile-table input[type="password"] {
 background: #fff;
 color: #222;
 border: 1px solid #b6c6dd;
}
.profile-table input[readonly] {
 background: #20232b;
 color: #888;
 border: 1px dashed #333a;
 opacity: 0.8;
 cursor: not-allowed;
}
.big-submit-btn, .save-order-btn {
 width: 100%;
 padding: 13px 0;
 margin-top: 0;
 font-size: 1.13em;
 border-radius: 7px;
 background: linear-gradient(90deg,#72b6ff,#2d3240 120%);
 color: #fff;
 border: none;
 font-weight: 500;
 cursor: pointer;
 transition: background 0.15s;
}
.big-submit-btn:hover, .save-order-btn:hover {
 background: linear-gradient(90deg,#348bf7,#4e76a5 100%);
}
body.light .big-submit-btn, body.light .save-order-btn {
 background: linear-gradient(90deg,#386ee8,#b5cbff 120%);
 color: #fff;
}
body.light .big-submit-btn:hover, body.light .save-order-btn:hover {
 background: linear-gradient(90deg,#b5cbff,#386ee8 100%);
 color: #fff;
}
.block-order-form {
 margin: 38px 0 30px 0;
 padding-top: 12px;
 border-top: 1px solid #292e3a;
}
body.light .block-order-form {
 border-top: 1px solid #d6deeb;
}
.block-order-select {
 width: 100%;
 margin-bottom: 11px;
 padding: 8px 13px;
 border-radius: 7px;
 background: #22252b;
 color: #fff;
 border: 1px solid #35373b;
 font-size: 1em;
}
body.light .block-order-select {
 background: #fff;
 color: #174ab7;
 border: 1px solid #b6c6dd;
}
.manage-tags-link {
 display: block;
 margin: 32px 0 10px 0;
 color: #82baff;
 font-size: 1.12em;
 text-align: center;
 text-decoration: none !important;
}
.manage-tags-link:hover { color: #fff; }
body.light .manage-tags-link {
 color: #386ee8;
}
body.light .manage-tags-link:hover {
 color: #222;
}
.exit-settings {
 display: block;
 margin: 20px 0 8px 0;
 text-align: center;
 font-size: 1.07em;
}
.profile-settings-card .note {
 margin: 16px 0 0 0;
}






.auth-block {
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 370px;
 width: 100%;
}

.auth-card {
 background: #23272f;
 border-radius: 15px;
 box-shadow: 0 6px 22px #0006;
 padding: 36px 34px 26px 34px;
 min-width: 340px;
 max-width: 440px;
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
}

body.light .auth-card {
 background: #f8faff;
 box-shadow: 0 6px 22px #b6c6dd33;
}

.auth-title {
 font-size: 1.6em;
 font-weight: bold;
 letter-spacing: 1px;
 color: #c6e4ff;
 margin-bottom: 22px;
 text-align: center;
}
body.light .auth-title {
 color: #386ee8;
}

.login-form {
 width: 100%;
 display: flex;
 flex-direction: column;
 gap: 12px;
 margin-bottom: 12px;
}

.login-form input[type="text"],
.login-form input[type="password"] {
 width: 100%;
 background: #22252b;
 color: #fff;
 border: 1px solid #35373b;
 border-radius: 7px;
 padding: 12px 13px;
 font-size: 1.13em;
 outline: none;
 transition: border-color 0.19s, background 0.14s;
}
body.light .login-form input[type="text"],
body.light .login-form input[type="password"] {
 background: #fff;
 color: #222;
 border: 1px solid #b6c6dd;
}

.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
 border-color: #7fb3ff;
}

.login-form button {
 width: 100%;
 padding: 12px 0;
 font-size: 1.1em;
 border-radius: 8px;
 background: linear-gradient(90deg,#72b6ff,#2d3240 120%);
 box-shadow: 0 2px 10px #3383d720;
 border: none;
 color: #fff;
 font-weight: 500;
 letter-spacing: 1px;
 cursor: pointer;
 transition: background 0.17s, box-shadow 0.13s;
}
.login-form button:hover {
 background: linear-gradient(90deg,#348bf7,#4e76a5 100%);
 box-shadow: 0 6px 18px #3383d75a;
}
body.light .login-form button {
 background: linear-gradient(90deg,#386ee8,#b5cbff 120%);
 color: #fff;
}
body.light .login-form button:hover {
 background: linear-gradient(90deg,#b5cbff,#386ee8 100%);
 color: #fff;
}

.vkid-login-btn {
 margin-top: 15px;
 display: flex;
 justify-content: center;
 width: 100%;
}

@media (max-width: 500px) {
 .auth-card {
  min-width: 0;
  max-width: 99vw;
  padding: 24px 4vw 20px 4vw;
 }
}







.login-form {
 width: 100%;
 display: flex;
 flex-direction: column;
 gap: 12px;
 align-items: stretch;
}

.login-form button {
 width: 100%;
 display: block;
 margin: 0 auto;
 padding: 12px 0;
 font-size: 1.1em;
 border-radius: 8px;
 background: linear-gradient(90deg,#72b6ff,#2d3240 120%);
 box-shadow: 0 2px 10px #3383d720;
 border: none;
 color: #fff;
 font-weight: 500;
 letter-spacing: 1px;
 cursor: pointer;
 transition: background 0.17s, box-shadow 0.13s;
}








.profile-form .big-submit-btn,
.profile-form button[type="submit"] {
 width: 100%;
 display: block;
 margin: 16px 0 0 0;
 padding: 13px 0;
 font-size: 1.13em;
 border-radius: 7px;
 background: linear-gradient(90deg,#72b6ff,#2d3240 120%);
 color: #fff;
 border: none;
 font-weight: 500;
 cursor: pointer;
 transition: background 0.15s;
 box-sizing: border-box;
}







.login-form input[type="text"],
.login-form input[type="password"],
.login-form button {
 width: 100%;
 box-sizing: border-box;
}

.profile-table input,
.profile-table button {
 width: 100%;
 box-sizing: border-box;
}



.login-form button,
.profile-form .big-submit-btn,
.profile-table .big-submit-btn,
.profile-form button[type="submit"] {
 width: 100%;
 display: block;
 margin: 16px 0 0 0;
 padding: 13px 0;
 font-size: 1.13em;
 border-radius: 7px;
 background: linear-gradient(90deg,#72b6ff,#2d3240 120%);
 color: #fff;
 border: none;
 font-weight: 500;
 cursor: pointer;
 transition: background 0.15s, box-shadow 0.13s, color 0.13s;
 box-sizing: border-box;
}

.login-form button:hover,
.profile-form .big-submit-btn:hover,
.profile-table .big-submit-btn:hover,
.profile-form button[type="submit"]:hover {
 background: linear-gradient(90deg,#348bf7,#4e76a5 100%);
 color: #fff;
 box-shadow: 0 6px 18px #3383d75a;
}







.profile-table input[type="text"],
.profile-table input[type="email"],
.profile-table input[type="password"],
.profile-table .big-submit-btn,
.profile-form .big-submit-btn,
.profile-table button[type="submit"] {
 box-sizing: border-box;
 width: 100%;
}




.profile-table .big-submit-btn,
.profile-form .big-submit-btn {
 padding: 11px 10px; /* такие же, как у инпутов */
 margin-top: 0;
}










.auth-card {
  max-width: 340px;
  min-width: 310px;
  margin: 0 auto;
}

.login-form input[type="text"],
.login-form input[type="password"],
.login-form button {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 10px;
  margin-bottom: 13px;
}

.login-form button {
  margin-bottom: 0;
}

.vkid-login-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
}
.vkid-login-btn iframe {
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 7px;
}




.fancy-filter {
  background: #232e3c;
  border-radius: 13px;
  box-shadow: 0 2px 16px #0a0d11a0;
  padding: 20px 24px 16px 24px;
  margin-bottom: 22px;
  border: 1.5px solid #2e3c50;
  transition: box-shadow 0.22s;
}

.fancy-filter[open] {
  box-shadow: 0 8px 32px #11447766;
}

.fancy-filter summary {
  font-size: 1.16em;
  font-weight: 600;
  color: #a8c4f2;
  padding: 6px 0;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: color 0.13s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fancy-filter summary:hover {
  color: #ffe066;
}

.calendar-ico {
  font-size: 1.18em;
  margin-right: 4px;
}

.period-filter-form-fancy {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 12px 0 0 0;
  flex-wrap: wrap;
}

.date-label {
  font-size: 1em;
  color: #a9cfff;
  display: flex;
  align-items: center;
  gap: 7px;
}

.period-filter-form-fancy input[type="date"] {
  background: #181e27;
  color: #fff;
  border: 1px solid #35405c;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 1.05em;
  margin-left: 3px;
  transition: border-color 0.18s;
}
.period-filter-form-fancy input[type="date"]:focus {
  border-color: #7fb3ff;
}

.date-search-btn {
  background: linear-gradient(90deg,#72b6ff,#4267c7 120%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 22px;
  font-size: 1.08em;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1.5px 10px #3383d740;
  transition: background 0.15s, box-shadow 0.13s;
}
.date-search-btn:hover {
  background: linear-gradient(90deg,#348bf7,#4e76a5 100%);
  box-shadow: 0 5px 20px #3383d759;
}

.period-quick-buttons-fancy {
  display: flex;
  gap: 9px;
  margin: 13px 0 0 0;
}
.period-quick-buttons-fancy button {
  background: #22314b;
  color: #a9cfff;
  border: none;
  border-radius: 7px;
  padding: 7px 18px;
  font-size: 0.97em;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.16s, color 0.13s, box-shadow 0.18s;
  box-shadow: 0 2px 10px #1a233740;
}
.period-quick-buttons-fancy button:hover {
  background: #7fb3ff;
  color: #222a34;
  box-shadow: 0 6px 18px #3383d780;
}