/* The Cloud Is MY Computer - standalone shell */
:root {
  --cloud-bg: #061a0d;
  --cloud-panel: #111816;
  --cloud-panel-2: #0c2514;
  --cloud-ink: #e4f2e6;
  --cloud-muted: #99bfa1;
  --cloud-accent: #9ee8aa;
  --cloud-accent-2: #80e898;
  --cloud-border: #245c32;
  --cloud-border-2: #3a8848;
  --cloud-danger: #ffb7b7;
  --cloud-shadow: 0 10px 24px rgba(0,0,0,.22);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--cloud-bg);
}

body.cloud-body {
  min-height: 100vh;
  margin: 0;
  color: var(--cloud-ink);
  font: 14px/1.55 "Trebuchet MS", Verdana, Arial, sans-serif;
  background:
    radial-gradient(circle at 18% 8%, rgba(126,232,255,.14), transparent 34%),
    radial-gradient(circle at 84% 12%, rgba(148,240,176,.11), transparent 30%),
    linear-gradient(180deg, #07111d 0%, #06101a 44%, #050b12 100%);
  background-attachment: fixed;
}

a { color: var(--cloud-accent); }
a:hover { color: #d5fbff; }

.cloud-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 44px;
}

.cloud-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 20px;
}

.cloud-brand {
  color: var(--cloud-ink);
  text-decoration: none;
}

.cloud-brand-title {
  display: block;
  font-size: 27px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 2px 12px rgba(126,232,255,.18);
}

.cloud-brand-subtitle {
  display: block;
  color: var(--cloud-muted);
  font-size: 12px;
  margin-top: 4px;
}

.cloud-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cloud-card,
.cloud-panel,
.cloud-file-card {
  border: 1px solid var(--cloud-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    linear-gradient(180deg, var(--cloud-panel-2), var(--cloud-panel));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--cloud-shadow);
}

.cloud-card,
.cloud-panel {
  border-radius: 8px;
  padding: 18px;
}

.cloud-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: stretch;
}

.cloud-hero h1,
.cloud-card h1,
.cloud-card h2,
.cloud-panel h2,
.cloud-panel h3 {
  margin: 0 0 8px;
  color: #eaffff;
}

.cloud-hero h1 {
  font-size: 34px;
  line-height: 1.08;
}

.cloud-muted,
.cloud-meta {
  color: var(--cloud-muted);
}

.cloud-meta {
  font-size: 12px;
}

.cloud-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
}

.cloud-actions,
.cloud-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cloud-button,
button.cloud-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 8px 13px;
  border: 1px solid #2b8eb0;
  border-top-color: #79dff4;
  border-radius: 5px;
  color: #041019;
  font: bold 13px/1.3 "Trebuchet MS", Verdana, Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.65), rgba(255,255,255,.15) 49%, rgba(0,0,0,.04) 50%, rgba(0,0,0,.12)),
    linear-gradient(to bottom, #92f1ff, #45bfd8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px rgba(0,0,0,.25);
}

.cloud-button:hover {
  filter: brightness(1.07);
  text-decoration: none;
}

.cloud-button.secondary {
  color: #eaffff;
  border-color: #31536b;
  border-top-color: #52728b;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.09), rgba(255,255,255,.03)),
    linear-gradient(to bottom, #182c40, #0e1d2b);
}

.cloud-button.danger {
  color: #fff5f5;
  border-color: #8e3a3a;
  border-top-color: #d57979;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,.03)),
    linear-gradient(to bottom, #873535, #441717);
}

.cloud-input,
.cloud-select,
.cloud-textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #284b66;
  border-radius: 5px;
  color: var(--cloud-ink);
  background: rgba(2,9,16,.78);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.28);
}

.cloud-input::placeholder {
  color: #698299;
}

.cloud-label {
  display: grid;
  gap: 5px;
  color: #cde6f2;
  font-weight: 700;
  font-size: 12px;
}

.cloud-drop {
  display: grid;
  min-height: 190px;
  place-items: center;
  margin: 14px 0;
  padding: 18px;
  border: 2px dashed #366c8c;
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  text-align: center;
  cursor: pointer;
}

.cloud-drop.is-drag {
  border-color: var(--cloud-accent);
  background: rgba(126,232,255,.08);
}

.cloud-file-list {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.cloud-file-card {
  border-radius: 7px;
  padding: 12px;
  overflow: hidden;
}

.cloud-file-head {
  display: flex;
  gap: 10px;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cloud-file-title {
  min-width: 0;
  margin: 0;
  color: #f7fcff;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.cloud-preview {
  display: grid;
  place-items: center;
  min-height: 160px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  background: rgba(0,0,0,.24);
  overflow: hidden;
}

.cloud-preview img,
.cloud-preview video,
.cloud-preview audio,
.cloud-preview iframe {
  width: 100%;
  max-width: 100%;
}

.cloud-preview img,
.cloud-preview video {
  max-height: 68vh;
  object-fit: contain;
}

.cloud-preview iframe {
  height: 420px;
  border: 0;
  background: #fff;
}

.cloud-progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid #284b66;
  background: rgba(0,0,0,.28);
}

.cloud-progress > span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--cloud-accent), var(--cloud-accent-2));
  transition: width .12s ease;
}

.cloud-status {
  min-height: 20px;
  margin-top: 10px;
  color: var(--cloud-muted);
}

.cloud-result {
  display: none;
  margin-top: 14px;
}

.cloud-result.is-visible {
  display: block;
}

.cloud-share-url {
  display: block;
  margin: 8px 0;
  padding: 9px 10px;
  border: 1px solid #284b66;
  border-radius: 5px;
  background: rgba(0,0,0,.25);
  color: #eaffff;
  font-family: Consolas, "Liberation Mono", monospace;
  overflow-wrap: anywhere;
}

.cloud-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 8px;
  margin: 12px 0 16px;
}

.cloud-share-list {
  display: grid;
  gap: 10px;
}

.cloud-share-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--cloud-border);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
}

.cloud-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #366c8c;
  color: #d9f8ff;
  background: rgba(126,232,255,.08);
  font-size: 11px;
  font-weight: 700;
}

.cloud-lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(0,0,0,.84);
}

.cloud-lightbox.is-open {
  display: grid;
}

.cloud-lightbox img {
  max-width: 95vw;
  max-height: 90vh;
  border-radius: 6px;
  box-shadow: var(--cloud-shadow);
}

@media (max-width: 860px) {
  .cloud-shell { width: min(100% - 24px, 1180px); padding-top: 14px; }
  .cloud-topbar,
  .cloud-hero,
  .cloud-grid,
  .cloud-share-row {
    grid-template-columns: 1fr;
  }
  .cloud-topbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .cloud-toolbar { grid-template-columns: 1fr; }
  .cloud-actions .cloud-button,
  .cloud-actions button,
  .cloud-row .cloud-button,
  .cloud-row button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .cloud-shell { width: min(100% - 18px, 1180px); }
  .cloud-brand-title { font-size: 22px; }
  .cloud-hero h1 { font-size: 25px; }
  .cloud-card,
  .cloud-panel { padding: 13px; }
}

/* GSOP green Cloud theme. Cloud remains standalone, but no longer has a separate blue visual system. */
html {
  background: var(--cloud-bg);
}

body.cloud-body {
  color: var(--cloud-ink);
  background:
    linear-gradient(to bottom, rgba(255,255,255,.045) 0, rgba(0,0,0,.14) 74px, rgba(0,0,0,0) 220px),
    linear-gradient(180deg, #123818 0%, #082810 34%, #061a0d 100%);
  background-attachment: fixed;
}

a { color: var(--cloud-accent); }
a:hover { color: #d5ffdc; }

.cloud-shell {
  width: min(calc(100% - 32px), 1180px);
  padding: 18px 0 44px;
}

.cloud-topbar {
  min-height: 58px;
  margin: 0 0 16px;
  padding: 8px 14px;
  position: sticky;
  top: 0;
  z-index: 1000;
  border: 1px solid var(--cloud-border);
  border-bottom: 3px solid #0a2410;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,.055) 50%, rgba(0,0,0,.08) 51%, rgba(0,0,0,.20)),
    linear-gradient(to bottom, #2e6e36 0%, #1e5224 50%, #184620 51%, #0e3214 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px rgba(0,0,0,.45);
}

.cloud-brand {
  color: #d0ffda;
}

.cloud-brand:hover {
  text-decoration: none;
}

.cloud-brand-title {
  color: #d0ffda;
  font-size: 23px;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

.cloud-brand-subtitle {
  color: rgba(200,255,210,.72);
}

.cloud-card,
.cloud-panel,
.cloud-file-card,
.cloud-share-row {
  color: var(--cloud-ink);
  border-color: var(--cloud-border);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)),
    linear-gradient(180deg, var(--cloud-panel) 0%, #0b1710 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--cloud-shadow);
}

.cloud-card,
.cloud-panel {
  padding: 16px;
}

.cloud-card h1,
.cloud-card h2,
.cloud-panel h2,
.cloud-panel h3,
.cloud-hero h1,
.cloud-file-title {
  color: #eafbed;
  text-shadow: 0 1px 1px rgba(0,0,0,.55);
}

.cloud-muted,
.cloud-meta {
  color: var(--cloud-muted);
}

.cloud-hero,
.cloud-grid {
  gap: 16px;
}

.cloud-button,
button.cloud-button {
  color: #07230d;
  border: 1px solid #1e7030;
  border-top-color: #96d9a0;
  border-left-color: #68bf76;
  border-bottom: 2px solid #0e4018;
  border-radius: 4px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,.18) 49%, rgba(0,0,0,.04) 50%, rgba(0,0,0,.10)),
    linear-gradient(to bottom, #b8eac0 0%, #75c982 49%, #54ad62 50%, #2e8040 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 3px 6px rgba(0,0,0,.22);
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

.cloud-button.secondary {
  color: #d2f7d8;
  border-color: var(--cloud-border-2);
  border-top-color: #62b76f;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,.04) 49%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.18)),
    linear-gradient(to bottom, #245d30, #12381d);
  text-shadow: 0 1px 1px rgba(0,0,0,.75);
}

.cloud-button.danger {
  color: #fff2f2;
  border-color: #8b2020;
  border-top-color: #e06060;
  border-left-color: #c04040;
  border-bottom-color: #501010;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,.05) 49%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.18)),
    linear-gradient(to bottom, #b94747, #6f2020);
  text-shadow: 0 1px 1px rgba(0,0,0,.7);
}

.cloud-input,
.cloud-select,
.cloud-textarea {
  color: var(--cloud-ink);
  border-color: #397446;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    #081d0f;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
}

.cloud-input::placeholder {
  color: #73997b;
}

.cloud-label {
  color: #cdebd2;
}

.cloud-drop {
  border-color: #4f9a5d;
  background: linear-gradient(to bottom, rgba(255,255,255,.045), rgba(255,255,255,.02));
}

.cloud-drop.is-drag {
  border-color: var(--cloud-accent-2);
  background: rgba(128,232,152,.08);
}

.cloud-file-list {
  gap: 12px;
}

.cloud-file-card {
  padding: 14px;
}

.cloud-file-head {
  gap: 12px;
}

.cloud-preview {
  border-color: rgba(158,232,170,.18);
  background: #07170d;
}

.cloud-preview img,
.cloud-preview video,
.cloud-preview audio,
.cloud-preview iframe {
  background: #07170d;
  border-radius: 4px;
}

.cloud-progress {
  border-color: var(--cloud-border);
  background: rgba(0,0,0,.35);
}

.cloud-progress > span {
  background: linear-gradient(90deg, var(--cloud-accent), var(--cloud-accent-2));
}

.cloud-share-url {
  color: #d5ffdc;
  border-color: rgba(158,232,170,.26);
  background: rgba(0,0,0,.28);
}

.cloud-toolbar {
  border-top-color: var(--cloud-border);
}

.cloud-badge {
  color: #07300f;
  border-color: #57a965;
  border-top-color: #96d9a0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,.15) 49%, rgba(0,0,0,.04) 50%, rgba(0,0,0,.10)),
    linear-gradient(to bottom, #b8eac0, #75c982);
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

.cloud-lightbox {
  background: rgba(3,12,6,.86);
}

@media (max-width: 760px) {
  .cloud-shell {
    width: min(calc(100% - 24px), 1180px);
  }

  .cloud-topbar,
  .cloud-hero,
  .cloud-grid,
  .cloud-share-row,
  .cloud-file-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .cloud-topbar {
    flex-direction: column;
  }

  .cloud-nav,
  .cloud-actions,
  .cloud-row {
    align-items: stretch;
  }

  .cloud-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
    width: 100%;
  }

  .cloud-actions .cloud-button,
  .cloud-actions button,
  .cloud-row .cloud-button,
  .cloud-row button,
  .cloud-nav .cloud-button {
    width: 100%;
    min-height: 44px;
  }

  .cloud-actions .cloud-button,
  .cloud-actions button,
  .cloud-row .cloud-button,
  .cloud-row button {
    min-height: 44px;
  }

  .cloud-input,
  .cloud-select,
  .cloud-search {
    min-height: 44px;
  }
}

/* Shared GSOP 2008 palette; Cloud controls keep their existing button treatment. */
:root {
  --cloud-bg: #031b0c;
  --cloud-panel: #152019;
  --cloud-panel-2: #0b2a17;
  --cloud-ink: #f1f1e7;
  --cloud-muted: #bdc9ba;
  --cloud-accent: #f0d574;
  --cloud-accent-2: #d9b53b;
  --cloud-border: #796524;
  --cloud-border-2: #b99630;
  --cloud-shadow: 0 10px 24px rgba(0,0,0,.28);
}

html,
body.cloud-body {
  color-scheme: dark;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.055) 0, rgba(255,255,255,.015) 38px, rgba(0,0,0,.16) 76px, transparent 220px),
    linear-gradient(180deg, #1a4a29 0%, #0b361d 24%, #062714 58%, #031b0c 100%);
  background-attachment: fixed;
}

.cloud-card,
.cloud-panel,
.cloud-file-card,
.cloud-share-row {
  color: var(--cloud-ink);
  border-color: var(--cloud-border);
  background:
    linear-gradient(180deg, rgba(240,213,116,.075) 0, rgba(255,255,255,.025) 34px, rgba(0,0,0,.025) 35px),
    linear-gradient(180deg, var(--cloud-panel) 0%, #0a1710 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), var(--cloud-shadow);
}

.cloud-preview,
.cloud-share-url,
.cloud-progress {
  border-color: var(--cloud-border);
  background: rgba(4, 20, 9, .62);
}

.cloud-preview iframe {
  background: #07180c;
}

.cloud-input,
.cloud-select,
.cloud-textarea,
.cloud-search {
  color: #15371e;
  border-color: #a88b2c;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.28) 22px),
    linear-gradient(180deg, #fffef8, #ecefe3);
  box-shadow: inset 0 2px 4px rgba(27,50,31,.18), inset 0 1px 0 #fff;
}

.cloud-select option {
  color: #15371e;
  background: #fffef8;
}

.cloud-input::placeholder,
.cloud-textarea::placeholder,
.cloud-search::placeholder { color: #687b69; opacity: 1; }

.cloud-topbar { border-color: var(--cloud-border); border-bottom-color: #8b7428; }
.cloud-brand,
.cloud-brand-title { color: #fffdf3; }
.cloud-brand-subtitle { color: #e7cb68; }
.cloud-label { color: #f1f1e7; }
.cloud-share-url { color: #fff3bd; border-color: rgba(217,181,59,.38); }
.cloud-card h1,
.cloud-card h2,
.cloud-panel h2,
.cloud-panel h3,
.cloud-hero h1,
.cloud-file-title { color: var(--cloud-accent); }
.cloud-progress { border-color: var(--cloud-border-2); }
.cloud-progress > span {
  background: linear-gradient(to bottom, #f3df86, #d9b53b 50%, #b88f20 51%, #8b6b16);
}

/* Secondary controls retain the existing green button appearance. */
.cloud-button.secondary {
  color: #d2f7d8;
  border-color: #3a8848;
  border-top-color: #62b76f;
}

@media (max-width: 480px) {
  .cloud-shell {
    width: min(calc(100% - 18px), 1180px);
  }

  .cloud-brand-title {
    font-size: 21px;
  }

  .cloud-card,
  .cloud-panel,
  .cloud-file-card {
    padding: 12px;
  }
}