owner_app/style.css

Read-only source from the unchanged 0.3.4 kit. Existing license terms apply.

:root {
  --ink: #ecf7f2;
  --muted: #a7bcb4;
  --surface: #10231f;
  --surface-2: #15302a;
  --line: #2a4b42;
  --accent: #6ee7b7;
  --accent-2: #38bdf8;
  --danger: #fca5a5;
  --gold: #fcd34d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(56,189,248,.12), transparent 30rem),
    radial-gradient(circle at 100% 18%, rgba(110,231,183,.10), transparent 34rem),
    #081512;
  font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.shell { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 64px 0 36px; }
.hero { text-align: center; margin-bottom: 28px; }
.eyebrow { color: var(--accent); font-size: .76rem; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 8px 0 12px; font-size: clamp(2.2rem, 7vw, 4.5rem); letter-spacing: -.05em; line-height: 1; }
.hero p { max-width: 720px; margin: 0 auto; color: var(--muted); font-size: 1.15rem; }
.security { display: inline-flex; gap: 9px; align-items: center; margin-top: 20px; padding: 8px 14px; border: 1px solid #2e5d50; border-radius: 999px; color: #bdf9df; background: rgba(32,88,70,.28); font-size: .9rem; }
.security span { color: var(--accent); }

.notice { margin: 26px 0; padding: 16px 18px; border-left: 4px solid var(--gold); border-radius: 8px; background: rgba(252,211,77,.08); color: #f8edc0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
.steps a { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); text-decoration: none; background: rgba(16,35,31,.65); }
.steps span, .panel-number { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); color: #062019; font-weight: 900; }

.panel { display: grid; grid-template-columns: 52px 1fr; gap: 12px; margin: 18px 0; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(21,48,42,.94), rgba(12,29,25,.96)); box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.panel.compact { grid-template-columns: 1fr; }
.panel-content.full { width: 100%; }
h2 { margin: 0 0 6px; font-size: 1.45rem; }
h3 { margin: 0 0 5px; color: var(--accent); }
.panel p { margin: 4px 0 18px; color: var(--muted); }
.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wide { grid-column: 1 / -1; }
label { display: grid; gap: 6px; margin: 12px 0; color: #cde1d9; font-weight: 700; font-size: .9rem; }
input { width: 100%; min-width: 0; padding: 12px 13px; border: 1px solid #35574e; border-radius: 9px; background: #091b17; color: var(--ink); font: inherit; }
input:focus { outline: 3px solid rgba(56,189,248,.22); border-color: var(--accent-2); }
input[type="file"] { padding: 9px; }

button { padding: 11px 15px; border: 1px solid #477367; border-radius: 9px; background: #1e4037; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
button:hover { border-color: var(--accent); transform: translateY(-1px); }
button:disabled { cursor: wait; opacity: .58; transform: none; }
button.primary { margin-top: 12px; border-color: transparent; background: var(--accent); color: #052119; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.result { margin-top: 20px; padding: 17px; border: 1px solid #356f5e; border-radius: 12px; background: rgba(4,28,22,.65); }
.result.error { border-color: #8f3c3c; background: rgba(92,26,26,.25); }
.result.error h3 { color: var(--danger); }
.hidden { display: none; }
.warning { margin-top: 14px !important; color: #fee2a6 !important; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85rem; }
.wrap { overflow-wrap: anywhere; }
pre { overflow: auto; white-space: pre-wrap; padding: 16px; border: 1px solid #2c4d44; border-radius: 10px; background: #071713; color: #d8f7ea; font: .9rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
footer { padding: 24px 0; color: #78968b; text-align: center; font-size: .85rem; }

@media (max-width: 700px) {
  .shell { padding-top: 34px; }
  .steps, .grid.two { grid-template-columns: 1fr; }
  .panel { grid-template-columns: 1fr; padding: 20px; }
}

pre { overflow-wrap: anywhere; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }