1|     1|* { box-sizing: border-box; }
     2|     2|
     3|     3|:root {
     4|     4|  --bg-1: #07111f;
     5|     5|  --bg-2: #0d1b2f;
     6|     6|  --bg-3: #13233d;
     7|     7|  --text: #eef4ff;
     8|     8|  --muted: #b6c2d9;
     9|     9|  --line: rgba(255, 255, 255, 0.16);
    10|    10|  --line-strong: rgba(255, 255, 255, 0.24);
    11|    11|  --glass: rgba(255, 255, 255, 0.08);
    12|    12|  --glass-strong: rgba(255, 255, 255, 0.14);
    13|    13|  --glass-soft: rgba(255, 255, 255, 0.05);
    14|    14|  --shadow: 0 18px 45px rgba(3, 10, 24, 0.35);
    15|    15|  --shadow-soft: 0 10px 30px rgba(3, 10, 24, 0.2);
    16|    16|  --primary: #79a8ff;
    17|    17|  --primary-strong: #4f83ff;
    18|    18|  --success: #4ade80;
    19|    19|  --danger: #fb7185;
    20|    20|  --warning: #fbbf24;
    21|    21|  --radius: 22px;
    22|    22|}
    23|    23|
    24|    24|html {
    25|    25|  min-height: 100%;
    26|    26|  background:
    27|    27|    radial-gradient(circle at top left, rgba(94, 234, 212, 0.14), transparent 32%),
    28|    28|    radial-gradient(circle at top right, rgba(129, 140, 248, 0.20), transparent 28%),
    29|    29|    radial-gradient(circle at bottom center, rgba(59, 130, 246, 0.16), transparent 34%),
    30|    30|    linear-gradient(135deg, var(--bg-1), var(--bg-2) 45%, var(--bg-3));
    31|    31|}
    32|    32|
    33|    33|body {
    34|    34|  margin: 0;
    35|    35|  min-height: 100dvh;
    36|    36|  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    37|    37|  color: var(--text);
    38|    38|  background: transparent;
    39|    39|}
    40|    40|
    41|    41|body::before,
    42|    42|body::after {
    43|    43|  content: '';
    44|    44|  position: fixed;
    45|    45|  inset: auto;
    46|    46|  width: 30vw;
    47|    47|  height: 30vw;
    48|    48|  min-width: 220px;
    49|    49|  min-height: 220px;
    50|    50|  border-radius: 999px;
    51|    51|  filter: blur(28px);
    52|    52|  pointer-events: none;
    53|    53|  opacity: 0.5;
    54|    54|  z-index: 0;
    55|    55|}
    56|    56|
    57|    57|body::before {
    58|    58|  top: -10vw;
    59|    59|  left: -8vw;
    60|    60|  background: rgba(45, 212, 191, 0.18);
    61|    61|}
    62|    62|
    63|    63|body::after {
    64|    64|  right: -10vw;
    65|    65|  bottom: -10vw;
    66|    66|  background: rgba(99, 102, 241, 0.2);
    67|    67|}
    68|    68|
    69|    69|.layout {
    70|    70|  position: relative;
    71|    71|  z-index: 1;
    72|    72|  display: grid;
    73|    73|  grid-template-columns: 340px 1fr;
    74|    74|  min-height: 100dvh;
    75|    75|  gap: 18px;
    76|    76|  padding: 18px;
    77|    77|}
    78|    78|
    79|    79|.glass-panel {
    80|    80|  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.06));
    81|    81|  border: 1px solid var(--line);
    82|    82|  box-shadow: var(--shadow);
    83|    83|  backdrop-filter: blur(22px) saturate(145%);
    84|    84|  -webkit-backdrop-filter: blur(22px) saturate(145%);
    85|    85|}
    86|    86|
    87|    87|.sidebar {
    88|    88|  border-radius: 28px;
    89|    89|  padding: 22px;
    90|    90|  overflow: auto;
    91|    91|  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
    92|    92|  border: 1px solid var(--line);
    93|    93|  box-shadow: var(--shadow);
    94|    94|  backdrop-filter: blur(24px) saturate(150%);
    95|    95|  -webkit-backdrop-filter: blur(24px) saturate(150%);
    96|    96|}
    97|    97|
    98|    98|.sidebar-head {
    99|    99|  display: flex;
   100|   100|  justify-content: space-between;
   101|   101|  align-items: flex-start;
   102|   102|  gap: 16px;
   103|   103|}
   104|   104|
   105|   105|.sidebar-head h1 {
   106|   106|  margin: 0;
   107|   107|  font-size: 26px;
   108|   108|  line-height: 1.1;
   109|   109|  letter-spacing: -0.03em;
   110|   110|}
   111|   111|
   112|   112|.sidebar-actions {
   113|   113|  display: flex;
   114|   114|  gap: 10px;
   115|   115|  flex-wrap: wrap;
   116|   116|  justify-content: flex-end;
   117|   117|}
   118|   118|
   119|   119|.main {
   120|   120|  display: flex;
   121|   121|  flex-direction: column;
   122|   122|  min-width: 0;
   123|   123|  gap: 14px;
   124|   124|}
   125|   125|
   126|   126|.toolbar {
   127|   127|  display: flex;
   128|   128|  justify-content: space-between;
   129|   129|  align-items: flex-start;
   130|   130|  gap: 18px;
   131|   131|  padding: 18px 20px;
   132|   132|  border-radius: var(--radius);
   133|   133|}
   134|   134|
   135|   135|.toolbar-info {
   136|   136|  display: flex;
   137|   137|  flex-direction: column;
   138|   138|  gap: 4px;
   139|   139|}
   140|   140|
   141|   141|.eyebrow {
   142|   142|  color: rgba(255, 255, 255, 0.72);
   143|   143|  font-size: 12px;
   144|   144|  letter-spacing: 0.16em;
   145|   145|  text-transform: uppercase;
   146|   146|}
   147|   147|
   148|   148|#current-title {
   149|   149|  font-size: 24px;
   150|   150|  letter-spacing: -0.03em;
   151|   151|}
   152|   152|
   153|   153|.actions {
   154|   154|  display: flex;
   155|   155|  gap: 10px;
   156|   156|  flex-wrap: wrap;
   157|   157|  justify-content: flex-end;
   158|   158|}
   159|   159|
   160|   160|button {
   161|   161|  appearance: none;
   162|   162|  border: 1px solid rgba(255, 255, 255, 0.18);
   163|   163|  border-radius: 14px;
   164|   164|  padding: 10px 15px;
   165|   165|  cursor: pointer;
   166|   166|  color: var(--text);
   167|   167|  font-weight: 600;
   168|   168|  letter-spacing: 0.01em;
   169|   169|  background: linear-gradient(180deg, rgba(125, 167, 255, 0.34), rgba(91, 127, 245, 0.22));
   170|   170|  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 24px rgba(29, 78, 216, 0.16);
   171|   171|  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
   172|   172|}
   173|   173|
   174|   174|button:hover {
   175|   175|  transform: translateY(-1px);
   176|   176|  background: linear-gradient(180deg, rgba(137, 180, 255, 0.42), rgba(92, 133, 255, 0.28));
   177|   177|  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 14px 28px rgba(29, 78, 216, 0.22);
   178|   178|}
   179|   179|
   180|   180|button.ghost {
   181|   181|  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.07));
   182|   182|  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--shadow-soft);
   183|   183|}
   184|   184|
   185|   185|button.ghost:hover {
   186|   186|  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.1));
   187|   187|}
   188|   188|
   189|   189|button.danger {
   190|   190|  background: linear-gradient(180deg, rgba(251, 113, 133, 0.36), rgba(225, 29, 72, 0.24));
   191|   191|}
   192|   192|
   193|   193|button.danger:hover {
   194|   194|  background: linear-gradient(180deg, rgba(251, 113, 133, 0.44), rgba(225, 29, 72, 0.3));
   195|   195|}
   196|   196|
   197|   197|button:disabled {
   198|   198|  opacity: 0.5;
   199|   199|  cursor: not-allowed;
   200|   200|  transform: none;
   201|   201|}
   202|   202|
   203|   203|button.is-loading {
   204|   204|  position: relative;
   205|   205|  padding-left: 36px;
   206|   206|}
   207|   207|
   208|   208|button.is-loading::before {
   209|   209|  content: '';
   210|   210|  position: absolute;
   211|   211|  left: 14px;
   212|   212|  top: 50%;
   213|   213|  width: 12px;
   214|   214|  height: 12px;
   215|   215|  margin-top: -6px;
   216|   216|  border-radius: 999px;
   217|   217|  border: 2px solid rgba(255, 255, 255, 0.28);
   218|   218|  border-top-color: rgba(255, 255, 255, 0.95);
   219|   219|  animation: spin .75s linear infinite;
   220|   220|}
   221|   221|
   222|   222|.mobile-action-bar, .mobile-input-bar, .mobile-shortcuts { display: none; }
   223|   223|
   224|   224|.status-cards {
   225|   225|  display: grid;
   226|   226|  gap: 12px;
   227|   227|  margin: 18px 0 20px;
   228|   228|}
   229|   229|
   230|   230|.status-card {
   231|   231|  border-radius: 18px;
   232|   232|  padding: 14px;
   233|   233|  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
   234|   234|}
   235|   235|
   236|   236|.status-card.online {
   237|   237|  border-color: rgba(74, 222, 128, 0.32);
   238|   238|  box-shadow: 0 18px 36px rgba(22, 101, 52, 0.14);
   239|   239|}
   240|   240|
   241|   241|.status-card.offline {
   242|   242|  border-color: rgba(251, 113, 133, 0.26);
   243|   243|  box-shadow: 0 18px 36px rgba(127, 29, 29, 0.14);
   244|   244|}
   245|   245|
   246|   246|.status-card-top {
   247|   247|  display: flex;
   248|   248|  justify-content: space-between;
   249|   249|  align-items: center;
   250|   250|  gap: 12px;
   251|   251|  margin-bottom: 8px;
   252|   252|}
   253|   253|
   254|   254|.status-badge {
   255|   255|  display: inline-flex;
   256|   256|  align-items: center;
   257|   257|  gap: 6px;
   258|   258|  padding: 4px 10px;
   259|   259|  border-radius: 999px;
   260|   260|  font-size: 12px;
   261|   261|  border: 1px solid rgba(255, 255, 255, 0.12);
   262|   262|  background: rgba(255, 255, 255, 0.08);
   263|   263|}
   264|   264|
   265|   265|.status-badge.online {
   266|   266|  color: #d1fae5;
   267|   267|  background: rgba(34, 197, 94, 0.18);
   268|   268|}
   269|   269|
   270|   270|.status-badge.offline {
   271|   271|  color: #ffe4e6;
   272|   272|  background: rgba(244, 63, 94, 0.16);
   273|   273|}
   274|   274|
   275|   275|.status-summary {
   276|   276|  margin-top: 8px;
   277|   277|  color: rgba(255, 255, 255, 0.88);
   278|   278|}
   279|   279|
   280|   280|.server {
   281|   281|  margin-bottom: 16px;
   282|   282|  padding: 14px;
   283|   283|  border-radius: 20px;
   284|   284|}
   285|   285|
   286|   286|.server h3 {
   287|   287|  margin: 0 0 10px;
   288|   288|  font-size: 15px;
   289|   289|}
   290|   290|
   291|   291|.app {
   292|   292|  border-radius: 16px;
   293|   293|  padding: 14px;
   294|   294|  margin-top: 10px;
   295|   295|  cursor: pointer;
   296|   296|  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05));
   297|   297|  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
   298|   298|  box-shadow: var(--shadow-soft);
   299|   299|}
   300|   300|
   301|   301|.app:hover {
   302|   302|  transform: translateY(-1px);
   303|   303|  border-color: rgba(255, 255, 255, 0.24);
   304|   304|  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.07));
   305|   305|}
   306|   306|
   307|   307|.app.active {
   308|   308|  border-color: rgba(121, 168, 255, 0.64);
   309|   309|  background: linear-gradient(180deg, rgba(121, 168, 255, 0.22), rgba(121, 168, 255, 0.1));
   310|   310|  box-shadow: 0 18px 32px rgba(79, 131, 255, 0.18);
   311|   311|}
   312|   312|
   313|   313|.app-title {
   314|   314|  font-weight: 700;
   315|   315|  margin-bottom: 6px;
   316|   316|}
   317|   317|
   318|   318|.muted {
   319|   319|  color: var(--muted);
   320|   320|  font-size: 13px;
   321|   321|}
   322|   322|
   323|   323|.hidden {
   324|   324|  display: none !important;
   325|   325|}
   326|   326|
   327|   327|#busy-state {
   328|   328|  color: #dbeafe;
   329|   329|}
   330|   330|
   331|   331|.terminal-shell {
   332|   332|  flex: 1;
   333|   333|  min-height: 56vh;
   334|   334|  padding: 14px;
   335|   335|  border-radius: 24px;
   336|   336|  overflow: hidden;
   337|   337|  background: linear-gradient(180deg, rgba(5, 12, 24, 0.76), rgba(5, 10, 20, 0.58));
   338|   338|}
   339|   339|
   340|   340|#terminal .xterm {
   341|   341|  height: 100%;
   342|   342|}
   343|   343|
   344|   344|.modal {
   345|   345|  position: fixed;
   346|   346|  inset: 0;
   347|   347|  background: rgba(4, 10, 22, 0.42);
   348|   348|  display: flex;
   349|   349|  align-items: center;
   350|   350|  justify-content: center;
   351|   351|  padding: 20px;
   352|   352|}
   353|   353|
   354|   354|.modal.hidden { display: none; }
   355|   355|
   356|   356|.modal-card {
   357|   357|  width: min(1000px, 100%);
   358|   358|  max-height: 90vh;
   359|   359|  border-radius: 28px;
   360|   360|  padding: 18px;
   361|   361|  display: flex;
   362|   362|  flex-direction: column;
   363|   363|  gap: 12px;
   364|   364|}
   365|   365|
   366|   366|.modal-head {
   367|   367|  display: flex;
   368|   368|  justify-content: space-between;
   369|   369|  align-items: center;
   370|   370|}
   371|   371|
   372|   372|.modal-toolbar {
   373|   373|  display: flex;
   374|   374|  gap: 8px;
   375|   375|  flex-wrap: wrap;
   376|   376|}
   377|   377|
   378|   378|#config-editor {
   379|   379|  width: 100%;
   380|   380|  min-height: 60vh;
   381|   381|  resize: vertical;
   382|   382|  background: rgba(4, 10, 20, 0.58);
   383|   383|  color: var(--text);
   384|   384|  border: 1px solid var(--line-strong);
   385|   385|  border-radius: 18px;
   386|   386|  padding: 16px;
   387|   387|  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   388|   388|  font-size: 13px;
   389|   389|  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
   390|   390|}
   391|   391|
   392|   392|#config-editor:focus,
   393|   393|.mobile-input-bar input:focus {
   394|   394|  outline: none;
   395|   395|  border-color: rgba(121, 168, 255, 0.66);
   396|   396|  box-shadow: 0 0 0 4px rgba(121, 168, 255, 0.12);
   397|   397|}
   398|   398|
   399|   399|.modal-actions {
   400|   400|  display: flex;
   401|   401|  justify-content: flex-end;
   402|   402|}
   403|   403|
   404|   404|@media (max-width: 900px) {
   405|   405|  .layout {
   406|   406|    grid-template-columns: 1fr;
   407|   407|    padding: 12px;
   408|   408|    gap: 12px;
   409|   409|  }
   410|   410|
   411|   411|  .sidebar {
   412|   412|    border-radius: 24px;
   413|   413|    max-height: none;
   414|   414|    padding: 16px;
   415|   415|  }
   416|   416|
   417|   417|  .sidebar-head {
   418|   418|    flex-direction: column;
   419|   419|    align-items: stretch;
   420|   420|  }
   421|   421|
   422|   422|  .sidebar-actions {
   423|   423|    justify-content: stretch;
   424|   424|  }
   425|   425|
   426|   426|  .sidebar-actions button {
   427|   427|    flex: 1;
   428|   428|  }
   429|   429|
   430|   430|  .toolbar {
   431|   431|    position: sticky;
   432|   432|    top: 0;
   433|   433|    z-index: 5;
   434|   434|    flex-direction: column;
   435|   435|    align-items: stretch;
   436|   436|    padding: 16px;
   437|   437|  }
   438|   438|
   439|   439|  .actions {
   440|   440|    display: grid;
   441|   441|    grid-template-columns: repeat(2, minmax(0, 1fr));
   442|   442|    width: 100%;
   443|   443|  }
   444|   444|
   445|   445|  .actions button { width: 100%; }
   446|   446|
   447|   447|  .terminal-shell {
   448|   448|    min-height: 50vh;
   449|   449|    padding: 10px;
   450|   450|  }
   451|   451|
   452|   452|  .modal {
   453|   453|    padding: 10px;
   454|   454|  }
   455|   455|
   456|   456|  .modal-card {
   457|   457|    max-height: 95dvh;
   458|   458|    padding: 14px;
   459|   459|  }
   460|   460|
   461|   461|  #config-editor {
   462|   462|    min-height: 45vh;
   463|   463|    font-size: 12px;
   464|   464|  }
   465|   465|}
   466|   466|
   467|   467|@media (max-width: 520px) {
   468|   468|  .mobile-shortcuts {
   469|   469|    display: grid;
   470|   470|    grid-template-columns: repeat(2, minmax(0, 1fr));
   471|   471|    gap: 8px;
   472|   472|    padding: 2px 2px 0;
   473|   473|  }
   474|   474|
   475|   475|  .mobile-shortcuts button,
   476|   476|  .mobile-action-bar button,
   477|   477|  .mobile-input-bar button {
   478|   478|    min-height: 44px;
   479|   479|  }
   480|   480|
   481|   481|  .mobile-input-bar {
   482|   482|    display: grid;
   483|   483|    grid-template-columns: 1fr auto;
   484|   484|    gap: 8px;
   485|   485|    padding: 12px;
   486|   486|    border-radius: 20px;
   487|   487|    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.07));
   488|   488|    border: 1px solid var(--line);
   489|   489|    box-shadow: var(--shadow-soft);
   490|   490|    backdrop-filter: blur(18px) saturate(145%);
   491|   491|    -webkit-backdrop-filter: blur(18px) saturate(145%);
   492|   492|  }
   493|   493|
   494|   494|  .mobile-input-bar input {
   495|   495|    width: 100%;
   496|   496|    min-width: 0;
   497|   497|    background: rgba(4, 10, 20, 0.56);
   498|   498|    color: var(--text);
   499|   499|    border: 1px solid var(--line-strong);
   500|   500|    border-radius: 14px;
   501|

/* ========== Toast 通知系统 ========== */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: 420px;
  padding: 14px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.07));
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: toastSlideIn 0.3s ease-out;
  transform-origin: top right;
}

.toast.toast-hidden {
  animation: toastSlideOut 0.25s ease-in forwards;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
  }
}

.toast-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.toast.success .toast-icon {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.toast.error .toast-icon {
  background: rgba(251, 113, 133, 0.2);
  color: #fb7185;
}

.toast.warning .toast-icon {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.toast.info .toast-icon {
  background: rgba(121, 168, 255, 0.2);
  color: #79a8ff;
}

.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--text);
}

.toast-message {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

.toast-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.15s;
}

.toast-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text);
}

/* ========== 终端标签页 ========== */
.terminal-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.terminal-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
  user-select: none;
}

.terminal-tab:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
}

.terminal-tab.active {
  background: linear-gradient(180deg, rgba(121, 168, 255, 0.25), rgba(121, 168, 255, 0.12));
  border-color: rgba(121, 168, 255, 0.4);
}

.terminal-tab-close {
  margin-left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0.6;
  transition: all 0.15s;
}

.terminal-tab-close:hover {
  opacity: 1;
  background: rgba(251, 113, 133, 0.3);
}

.terminal-tab.active .terminal-tab-close:hover {
  background: rgba(251, 113, 133, 0.4);
}

/* ========== 移动端优化 ========== */
@media (max-width: 900px) {
  .terminal-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  
  .terminal-tab {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 13px;
  }
}

@media (max-width: 520px) {
  /* 基础字体和布局 */
  body { 
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
  }
  
  .layout {
    padding: 8px;
    gap: 8px;
  }
  
  .sidebar {
    border-radius: 18px;
    padding: 12px;
  }
  
  .sidebar-head h1 {
    font-size: 20px;
  }
  
  .sidebar-head p.muted {
    font-size: 13px;
  }
  
  /* 顶部按钮改为纵向排列 */
  .sidebar-actions {
    flex-direction: column;
    gap: 6px;
  }
  
  .sidebar-actions button {
    width: 100%;
    min-height: 44px;
  }
  
  /* 移动端快捷按钮 */
  .mobile-shortcuts button,
  .mobile-action-bar button,
  .mobile-input-bar button {
    min-height: 48px;
    font-size: 15px;
    font-weight: 500;
  }
  
  /* 移动端输入栏 */
  .mobile-input-bar input {
    padding: 12px 14px;
    font-size: 15px;
  }
  
  /* 工具栏适配 */
  .toolbar {
    padding: 12px;
    flex-direction: column;
    align-items: stretch;
  }
  
  .toolbar-info {
    margin-bottom: 12px;
  }
  
  .toolbar-info .eyebrow {
    font-size: 12px;
  }
  
  .toolbar-info strong {
    font-size: 18px;
  }
  
  .toolbar-info .muted {
    font-size: 13px;
  }
  
  /* 状态卡片单列显示 */
  .status-cards { 
    grid-template-columns: 1fr; 
  }
  
  /* 按钮网格适配 */
  .actions { 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 8px;
    width: 100%;
  }
  
  .actions button { 
    width: 100%; 
    min-height: 44px;
    padding: 12px 14px;
    font-size: 14px;
  }
  
  button { 
    padding: 12px 14px; 
    font-size: 14px;
    min-height: 44px;
  }
  
  /* 应用卡片适配 */
  .app-card {
    padding: 12px;
  }
  
  .app-card .app-name {
    font-size: 15px;
  }
  
  /* 模态框适配 */
  .modal-toolbar { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 8px;
  }
  
  .modal-toolbar button { 
    width: 100%; 
    min-height: 44px;
  }
  
  .modal-card {
    padding: 16px;
    border-radius: 20px;
  }
  
  .modal-head strong {
    font-size: 17px;
  }
  
  #config-editor {
    font-size: 13px;
    min-height: 50vh;
  }
  
  /* Toast 移动端适配 */
  .toast-container {
    top: 0;
    right: 0;
    left: 0;
    padding: 10px;
    max-height: 40vh;
    overflow-y: auto;
  }
  
  .toast {
    min-width: auto;
    max-width: none;
    width: 100%;
    padding: 12px 14px;
  }
  
  .toast-title {
    font-size: 15px;
  }
  
  .toast-message {
    font-size: 13px;
  }
  
  /* 终端标签页移动端适配 */
  .terminal-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    margin-top: 8px;
    padding-top: 8px;
  }
  
  .terminal-tab {
    flex-shrink: 0;
    padding: 10px 16px;
    font-size: 14px;
    min-height: 40px;
  }
}