@media (max-width: 700px) {
  :root {
    --mobile-bg: #ffffff;
    --mobile-card: #ffffff;
    --mobile-soft: #f6f8fa;
    --mobile-text: #07111f;
    --mobile-muted: #75818b;
    --mobile-line: #e5eaee;
    --mobile-green: #007a67;
    --mobile-green-soft: #e7f5f2;
    --mobile-nav-h: 74px;
  }

  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    background: var(--mobile-bg) !important;
    color: var(--mobile-text) !important;
  }

  body[data-current-view] .app-shell,
  body[data-current-view] .main,
  body[data-current-view] .view {
    width: 100% !important;
    max-width: 430px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
    background: var(--mobile-bg) !important;
  }

  body[data-current-view] .main {
    min-height: 100dvh !important;
    padding: 0 16px calc(var(--mobile-nav-h) + 22px + env(safe-area-inset-bottom)) !important;
  }

  body[data-current-view] .view.active {
    padding-bottom: calc(var(--mobile-nav-h) + 18px + env(safe-area-inset-bottom)) !important;
  }

  body[data-current-view] .app-shell > aside.sidebar,
  body[data-current-view] aside.sidebar,
  body[data-current-view] nav.nav-list,
  body[data-current-view] .ref-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body[data-current-view] nav.ref-bottom-nav,
  html body[data-current-view="home"] #homeView > .ref-home > nav.ref-bottom-nav,
  html body[data-current-view="home"] #homeView .ref-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  body[data-current-view] .mobile-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9000 !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    align-items: center !important;
    width: 100vw !important;
    height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)) !important;
    padding: 7px 8px calc(8px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid var(--mobile-line) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 -8px 22px rgba(15, 31, 45, 0.06) !important;
  }

  body[data-current-view] .mobile-bottom-nav button {
    min-width: 0 !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #8a959d !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body[data-current-view] .mobile-bottom-nav button i {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    flex: 0 0 22px !important;
  }

  body[data-current-view="home"] .mobile-bottom-nav [data-go-view="home"],
  body[data-current-view="create"] .mobile-bottom-nav [data-go-view="create"],
  body[data-current-view="aesthetic"] .mobile-bottom-nav [data-go-view="aesthetic"],
  body[data-current-view="works"] .mobile-bottom-nav [data-go-view="works"],
  body[data-current-view="tasks"] .mobile-bottom-nav [data-go-view="tasks"],
  body[data-current-view="assets"] .mobile-bottom-nav [data-go-view="assets"],
  body[data-current-view="mine"] .mobile-bottom-nav [data-go-view="mine"] {
    color: var(--mobile-green) !important;
    background: var(--mobile-green-soft) !important;
  }

  body[data-current-view="create"] #createView,
  body[data-current-view="works"] #worksView,
  body[data-current-view="tasks"] #tasksView,
  body[data-current-view="assets"] #assetsView,
  body[data-current-view="mine"] #mineView {
    padding: 14px 0 0 !important;
  }

  html body[data-current-view="create"] main.main #createView.view.active,
  html body[data-current-view="create"] #createView.view.active {
    width: calc(100vw - 32px) !important;
    max-width: 398px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 14px 0 0 !important;
  }

  html body[data-current-view="create"] #createView > .section-close-bar {
    width: 100% !important;
    max-width: 358px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 auto 10px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body[data-current-view="create"] #createView > .section-close-bar h1,
  html body[data-current-view="create"] #createView > .section-close-bar strong,
  html body[data-current-view="create"] #createView > .section-close-bar span {
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    color: var(--mobile-text) !important;
  }

  html body[data-current-view="create"] #createView > .section-close-bar button {
    width: auto !important;
    min-width: 58px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    border: 1px solid var(--mobile-line) !important;
    background: var(--mobile-card) !important;
    color: var(--mobile-text) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  html body[data-current-view="create"] #createView .workspace-grid,
  html body[data-current-view="create"] #createView .form-panel,
  html body[data-current-view="create"] #createView section.panel.form-panel,
  html body[data-current-view="create"] #createView form#createForm {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body[data-current-view="create"] #createView form#createForm > .desktop-create-type {
    order: 1 !important;
  }

  html body[data-current-view="create"] #createView form#createForm > .desktop-create-basic {
    order: 2 !important;
  }

  html body[data-current-view="create"] #createView form#createForm > .desktop-create-style {
    order: 3 !important;
  }

  html body[data-current-view="create"] #createView form#createForm > #advancedCreateFields {
    order: 4 !important;
  }

  html body[data-current-view="create"] #createView form#createForm > .desktop-create-note {
    order: 5 !important;
  }

  html body[data-current-view="create"] #createView form#createForm > .form-actions {
    order: 6 !important;
  }

  body[data-current-view="create"] #createView form#createForm,
  body[data-current-view="create"] #createView form#createForm.form-stack {
    width: 100% !important;
    display: grid !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-type,
  html body[data-current-view="create"] #createView .desktop-create-basic,
  html body[data-current-view="create"] #createView .desktop-create-style,
  html body[data-current-view="create"] #createView #advancedCreateFields,
  html body[data-current-view="create"] #createView .desktop-create-note {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body[data-current-view="create"] #createView form#createForm > .desktop-create-section.desktop-create-type,
  html body[data-current-view="create"] #createView .desktop-create-section.desktop-create-type,
  html body[data-current-view="create"] #createView .desktop-create-type {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding: 14px !important;
  }

  body[data-current-view="create"] #createView .desktop-create-section,
  body[data-current-view="create"] #createView form#createForm > label,
  body[data-current-view="create"] #createView form#createForm > .field-group,
  body[data-current-view="create"] #createView form#createForm > .advanced-create-grid,
  body[data-current-view="create"] #createView form#createForm > .extra-text-field,
  body[data-current-view="create"] #createView form#createForm > .project-name-field {
    width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid var(--mobile-line) !important;
    border-radius: 12px !important;
    background: var(--mobile-card) !important;
    box-shadow: none !important;
  }

  body[data-current-view="create"] #createView .category-tabs,
  body[data-current-view="create"] #createView .field-group,
  body[data-current-view="create"] #createView .advanced-create-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-type .category-tabs {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 76px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 0 0 2px !important;
    scrollbar-width: none !important;
  }

  html body[data-current-view="create"] #createView form#createForm .desktop-create-type .category-tabs,
  html body[data-current-view="create"] #createView form#createForm > .desktop-create-type .category-tabs {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-type .category-tabs::-webkit-scrollbar {
    display: none !important;
  }

  body[data-current-view="create"] #createView .category-card,
  html body[data-current-view="create"] #createView .desktop-create-type .category-card {
    width: 100% !important;
    flex: 0 0 148px !important;
    min-width: 148px !important;
    max-width: 148px !important;
    min-height: 62px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
    gap: 5px !important;
    padding: 10px 8px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  html body[data-current-view="create"] #createView form#createForm .desktop-create-type .category-tabs > button.category-card,
  html body[data-current-view="create"] #createView form#createForm .desktop-create-type .category-tabs > .category-card {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-type .category-card .module-icon {
    grid-area: auto !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-type .category-card strong {
    grid-area: auto !important;
    display: block !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  html body[data-current-view="create"] #createView .desktop-create-type .category-card .category-intro {
    display: none !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-current-view="create"] #createView input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  body[data-current-view="create"] #createView textarea,
  body[data-current-view="create"] #createView select,
  body[data-current-view="create"] #createView button.ios-choice-trigger {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  body[data-current-view="create"] #createView textarea {
    min-height: 98px !important;
  }

  body[data-current-view="create"] #createView .primary-button,
  body[data-current-view="create"] #createView button[type="submit"] {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 12px !important;
  }

  html[data-theme="dark"] {
    --mobile-bg: #0e1117;
    --mobile-card: #171b23;
    --mobile-soft: #10151d;
    --mobile-text: #f4f7fb;
    --mobile-muted: #98a2b3;
    --mobile-line: rgba(255, 255, 255, 0.12);
    --mobile-green-soft: rgba(0, 150, 136, 0.22);
  }

  html[data-theme="dark"] body[data-current-view] .mobile-bottom-nav {
    background: rgba(14, 17, 23, 0.96) !important;
    border-top-color: rgba(255, 255, 255, 0.10) !important;
  }

  html[data-theme="dark"] body[data-current-view] .mobile-bottom-nav button {
    color: #98a2b3 !important;
  }

  html[data-theme="dark"] body[data-current-view="home"] .mobile-bottom-nav [data-go-view="home"],
  html[data-theme="dark"] body[data-current-view="create"] .mobile-bottom-nav [data-go-view="create"],
  html[data-theme="dark"] body[data-current-view="aesthetic"] .mobile-bottom-nav [data-go-view="aesthetic"],
  html[data-theme="dark"] body[data-current-view="works"] .mobile-bottom-nav [data-go-view="works"],
  html[data-theme="dark"] body[data-current-view="tasks"] .mobile-bottom-nav [data-go-view="tasks"],
  html[data-theme="dark"] body[data-current-view="assets"] .mobile-bottom-nav [data-go-view="assets"],
  html[data-theme="dark"] body[data-current-view="mine"] .mobile-bottom-nav [data-go-view="mine"] {
    color: #5eead4 !important;
    background: rgba(0, 150, 136, 0.22) !important;
  }
}

@media screen and (max-width: 900px) {
  html body[data-current-view="create"] #createView form#createForm label.project-name-field > span:first-child,
  html body[data-current-view="create"] #createView form#createForm label:has(#adStyle) > span:first-child {
    font-size: 13px !important;
    color: #334155 !important;
    white-space: nowrap !important;
  }

  html body[data-current-view="create"] #createView form#createForm label.project-name-field > span:first-child::before,
  html body[data-current-view="create"] #createView form#createForm label:has(#adStyle) > span:first-child::before {
    content: "" !important;
    display: none !important;
  }
}

.inline-action-notice {
  display: block;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #d8e0e8;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
}

.inline-action-notice[hidden] {
  display: none !important;
}

.inline-action-notice[data-type="success"] {
  border-color: #99d8ca;
  background: #edfdf8;
  color: #047857;
}

.inline-action-notice[data-type="error"] {
  border-color: #fecaca;
  background: #fff1f2;
  color: #b42318;
}

.mobile-mine-menu button.hidden-field,
body[data-current-view="mine"] .mobile-mine-menu button.hidden-field {
  display: none !important;
}

body[data-current-view="mine"] #mineView #adminPanel:not(.hidden-field) {
  display: grid !important;
  gap: 12px !important;
}