/* stylelint-disable selector-class-pattern, selector-id-pattern */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

:root {
  --section: #111;
  --subtext: #eee;
  --base: #111 !important;
  --card: #181818;
  --radius: 2px;
  --text: white;
  --gap: 7px;
  --accent: #a386ff;
  --background-color: var(--base) !important;
  --background-border-color: #0000 !important;
}

@font-face {
  font-family: Inter;
  font-weight: 100 900;

  src:
    local("Hiragino Sans"),
    local("Hiragino Kaku Gothic ProN"),
    local("Yu Gothic"),
    local("Meiryo"),
    local("Noto Sans CJK JP"),
    local("Noto Sans JP");
  unicode-range:
    U+3000-303F,   /* Japanese punctuation */
    U+3040-309F,   /* Hiragana */
    U+30A0-30FF,   /* Katakana */
    U+4E00-9FFF,   /* CJK Unified Ideographs */
    U+F900-FAFF,   /* CJK Compatibility Ideographs */
    U+FF00-FFEF;   /* Fullwidth Forms */
}

body,
.compose-form__highlightable,
.status__content,
.account__header__bio,
.reply-indicator__content,
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
  font-family:
    Inter,
    "Noto Sans JP",       
    "Hiragino Sans",      
    "Hiragino Kaku Gothic ProN", 
    "Yu Gothic",          
    Meiryo,             
    "Noto Sans CJK JP",  
    sans-serif !important;
}

/* Layout & Structure */
article,
.account__header {
  margin-bottom: var(--gap) !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  background: var(--card) !important;
}


.navigation-panel__logo {
  display: none !important;
}

/* Tabs & Navigation */

.column-link.active {
  color: var(--accent);
}

.column-header__wrapper.active {
  box-shadow: none;
}

.column-back-button {
  color: var(--accent);
}

/* Compose Form */
.compose-form__highlightable {
  border-radius: var(--radius);
  background: var(--card) !important;
}

.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
  background: var(--card);
}

/* Buttons */
.button {
  background: var(--accent) !important;
}

.button.button-secondary {
  border: 1px solid #0000;
  color: var(--text);
}

.button.button-secondary:active,
.button.button-secondary:focus,
.button.button-secondary:hover {
  border-color: #0000;
  color: var(--text);
}

/* Icon Buttons */
.icon-button {
  color: var(--subtext);
}

.icon-button:active,
.icon-button:focus,
.icon-button:hover {
  color: var(--subtext);
}

.icon-button.active {
  color: var(--accent);
}

.compose-form__actions .icon-button {
  color: var(--accent);
}

.compose-form__actions .icon-button:active,
.compose-form__actions .icon-button:focus,
.compose-form__actions .icon-button:hover {
  color: var(--accent);
}

/* Dropdowns & Modals */
.dropdown-button {
  border: 1px solid var(--accent);
  color: var(--accent);
}

/* Search */
.search__input {
  border: 0;
  border-radius: var(--radius);

  color: var(--subtext);

  background: var(--card);
  box-shadow: var(--radius);
}

/* Trends & Getting Started */
.trends__item__name {
  color: var(--subtext);
}

.trends__item__name a {
  color: var(--subtext);
}

.trends__item__sparkline path:first-child {
  fill: violet;
}

.getting-started__trends h4 a {
  color: var(--subtext);
}

/* Account Sections */
.account__section-headline {
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.account__section-headline > a /* stylelint-disable-line */ {
  border-radius: var(--radius);
  background: var(--section);
}

.account__header__bio .account__header__fields dt,
.account__header__bio .account__header__fields dd {
  color: var(--subtext);
}

.account__header__bio .account__header__fields a {
  color: var(--accent);
}

.account .account__display-name {
  color: var(--subtext);
}

.account__domain-pill {
  color: var(--text) !important;
  background: var(--accent) !important;
}

.account-role {
  border: 1px solid var(--accent);
  color: var(--accent);
}

/* Status Elements */
.status__display-name,
.status__prepend,
.status__relative-time {
  color: var(--subtext);
}

.status__prepend a /* stylelint-disable-line */ {
  color: var(--subtext);
}

/* Scrollable Areas */
.scrollable.scrollable--flex {
  border-radius: var(--radius);
  background: var(--section);
}

/* Hashtags */
.hashtag-bar {
  color: var(--text);
}

.hashtag-bar a /* stylelint-disable-line */ {
  background: var(--card);
}

/* Footer Links */
.link-footer p {
  color: var(--subtext);
}

.link-footer p a /* stylelint-disable-line */ {
  color: var(--subtext);
}

/* Responsive Design */
@media screen and (width >= 1175px) {
  .columns-area--mobile {
    padding: 0;
  }

  .tabs-bar__wrapper {
    top: 0 !important;
  }
}

@media screen and (width <= 1174px) {
  .layout-single-column .ui__header {
    position: fixed;

    width: 100%;
    margin-bottom: var(--gap);
    border-radius: var(--radius);

    background: var(--section);
  }

  .columns-area__panels__main {
    margin-right: calc(2 * var(--gap) + 7px);
  }

  .layout-single-column .column > .scrollable,
  .layout-single-column .tabs-bar__wrapper .column-back-button,
  .layout-single-column .tabs-bar__wrapper .column-header {
    border-radius: var(--radius) !important;
  }

  .columns-area__panels {
    margin-top: calc(55px + var(--gap));
  }

  div.columns-area__panels__pane:nth-child(3) > div:nth-child(1) {
    height: calc(100vh - 55px - var(--gap));
  }
}

@media screen and (width <= 889px) {
  .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
    width: calc(57px - var(--gap));
    padding-left: 3px !important;
  }
}

@media screen and (width <= 1174px) {
  .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
    width: calc(280px - var(--gap));
  }
}

button, a, img, .media-gallery__item, .media-gallery {
  border-radius: var(--radius) !important;
}