:root {
   color-scheme: light;
   font-family: Ubuntu, "Ubuntu Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   line-height: 1.5;
   --ubuntu-orange: #e95420;
   --ubuntu-orange-dark: #c34113;
   --ubuntu-aubergine: #77216f;
   --ubuntu-aubergine-dark: #2c001e;
   --ubuntu-warm-grey: #aea79f;
   --ink: #2c2c2c;
   --muted: #6b6561;
   --surface: #ffffff;
   --surface-soft: #f7f6f5;
   --border: #d8d3cf;
   --focus: #5e2750;
   --success: #0e8420;
   --success-soft: #eef8f0;
   --error: #a33125;
   --error-soft: #fff2f0;
   --warning-soft: #fff5ed;
   --shadow: 0 18px 50px rgba(44, 0, 30, 0.12);
}

* {
   box-sizing: border-box;
}

html {
   background: #f3f0ee;
}

body {
   min-height: 100vh;
   margin: 0;
   color: var(--ink);
   background:
      radial-gradient(circle at 14% 0%, rgba(233, 84, 32, 0.12), transparent 32rem),
      radial-gradient(circle at 100% 18%, rgba(119, 33, 111, 0.1), transparent 30rem),
      #f3f0ee;
}

body::before {
   content: "";
   display: block;
   height: 6px;
   background: linear-gradient(90deg, var(--ubuntu-orange), var(--ubuntu-aubergine));
}

.page-shell {
   width: min(880px, calc(100% - 32px));
   margin: 38px auto 56px;
}

.card {
   overflow: hidden;
   border: 1px solid rgba(44, 0, 30, 0.1);
   border-radius: 22px;
   background: var(--surface);
   box-shadow: var(--shadow);
}

.page-header {
   position: relative;
   padding: clamp(28px, 5vw, 48px);
   color: #ffffff;
   background: linear-gradient(135deg, var(--ubuntu-aubergine-dark) 0%, var(--ubuntu-aubergine) 58%, var(--ubuntu-orange) 140%);
}

.page-header::after {
   content: "";
   position: absolute;
   right: -110px;
   bottom: -150px;
   width: 330px;
   height: 330px;
   border: 44px solid rgba(255, 255, 255, 0.06);
   border-radius: 50%;
   pointer-events: none;
}

.eyebrow {
   position: relative;
   z-index: 1;
   margin: 0 0 7px;
   color: #f9c2ad;
   font-size: 0.76rem;
   font-weight: 800;
   letter-spacing: 0.16em;
}

.page-header h1 {
   position: relative;
   z-index: 1;
   margin: 0;
   max-width: 620px;
   font-size: clamp(2rem, 5vw, 3.25rem);
   line-height: 1.06;
   letter-spacing: -0.035em;
}

.intro {
   position: relative;
   z-index: 1;
   max-width: 650px;
   margin: 16px 0 0;
   color: rgba(255, 255, 255, 0.82);
   font-size: 1.05rem;
}

.notice,
.log-help,
form {
   margin-left: clamp(20px, 5vw, 48px);
   margin-right: clamp(20px, 5vw, 48px);
}

.notice {
   display: flex;
   gap: 15px;
   align-items: flex-start;
   margin-top: 28px;
   margin-bottom: 20px;
   border: 1px solid #f0c3ac;
   border-radius: 14px;
   padding: 16px 18px;
   background: var(--warning-soft);
}

.notice h2,
.notice p {
   margin: 0;
}

.notice h2 {
   margin-bottom: 3px;
   color: var(--ubuntu-aubergine-dark);
   font-size: 1rem;
}

.notice p,
.notice li {
   color: #5f4d44;
   font-size: 0.94rem;
}

.notice ul {
   margin: 7px 0 0;
   padding-left: 21px;
}

.notice-symbol {
   flex: 0 0 auto;
   display: grid;
   place-items: center;
   min-width: 28px;
   height: 28px;
   border-radius: 50%;
   color: #ffffff;
   background: var(--ubuntu-orange);
   font-size: 0.78rem;
   font-weight: 800;
}

.notice-success {
   border-color: #b8ddbd;
   background: var(--success-soft);
}

.notice-success .notice-symbol {
   background: var(--success);
}

.notice-success h2,
.notice-success p {
   color: #15591f;
}

.notice-error {
   border-color: #e9b7b1;
   background: var(--error-soft);
}

.notice-error .notice-symbol {
   background: var(--error);
}

.notice-error h2,
.notice-error p,
.notice-error li {
   color: #7c241b;
}

.log-help {
   margin-top: 0;
   margin-bottom: 32px;
   border: 1px solid var(--border);
   border-radius: 14px;
   background: var(--surface-soft);
}

.log-help summary {
   position: relative;
   padding: 15px 46px 15px 18px;
   color: var(--ubuntu-aubergine);
   font-weight: 700;
   cursor: pointer;
   list-style: none;
}

.log-help summary::-webkit-details-marker {
   display: none;
}

.log-help summary::after {
   content: "+";
   position: absolute;
   top: 50%;
   right: 18px;
   transform: translateY(-50%);
   font-size: 1.35rem;
   font-weight: 400;
}

.log-help[open] summary::after {
   content: "-";
}

.log-help-body {
   border-top: 1px solid var(--border);
   padding: 0 18px 17px;
   color: var(--muted);
   font-size: 0.94rem;
}

.log-help-body p {
   margin: 14px 0 0;
}

.log-help-body ul {
   margin: 10px 0 0;
   padding-left: 22px;
}

.privacy-note {
   font-size: 0.88rem;
}

form {
   margin-top: 34px;
   margin-bottom: 42px;
}

.form-section {
   min-width: 0;
   margin: 0;
   border: 0;
   border-top: 1px solid var(--border);
   padding: 30px 0 36px;
}

.form-section:first-child {
   border-top: 0;
   padding-top: 0;
}

.form-section legend {
   display: flex;
   align-items: center;
   gap: 11px;
   margin: 0 0 22px;
   padding: 0;
   color: var(--ubuntu-aubergine-dark);
   font-size: 1.2rem;
   font-weight: 800;
}

.section-number {
   display: inline-grid;
   place-items: center;
   width: 31px;
   height: 31px;
   border-radius: 50%;
   color: #ffffff;
   background: var(--ubuntu-orange);
   font-size: 0.88rem;
}

.field-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 20px;
}

.field {
   display: flex;
   min-width: 0;
   flex-direction: column;
   gap: 7px;
}

.field-full {
   grid-column: 1 / -1;
}

label {
   color: #3b3430;
   font-size: 0.94rem;
   font-weight: 700;
}

.label-row,
.field-footer,
.select-meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
}

input,
select,
textarea,
button {
   font: inherit;
}

input,
select,
textarea {
   width: 100%;
   border: 1px solid #cfc8c3;
   border-radius: 10px;
   padding: 12px 13px;
   color: var(--ink);
   background: #ffffff;
   box-shadow: 0 1px 1px rgba(44, 0, 30, 0.02);
   transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

select {
   min-height: 48px;
}

textarea {
   resize: vertical;
   line-height: 1.52;
}

#logs {
   min-height: 230px;
   font-family: "Ubuntu Mono", "DejaVu Sans Mono", Consolas, monospace;
   font-size: 0.9rem;
   tab-size: 3;
}

input:hover,
select:hover,
textarea:hover {
   border-color: #aaa09a;
}

input:focus,
select:focus,
textarea:focus {
   outline: 0;
   border-color: var(--focus);
   box-shadow: 0 0 0 3px rgba(119, 33, 111, 0.13);
}

button:focus-visible,
a:focus-visible,
summary:focus-visible {
   outline: 3px solid rgba(119, 33, 111, 0.32);
   outline-offset: 3px;
}

input::placeholder,
textarea::placeholder {
   color: #968f8a;
}

.field-help,
.field-meta {
   margin: 0;
   color: var(--muted);
   font-size: 0.83rem;
}

.field-meta {
   flex: 0 0 auto;
   text-align: right;
   font-variant-numeric: tabular-nums;
}

.app-package {
   text-align: right;
}

.status-dot {
   display: inline-block;
   width: 7px;
   height: 7px;
   margin-right: 7px;
   border-radius: 50%;
   vertical-align: 1px;
   background: var(--ubuntu-warm-grey);
}

.status-live {
   background: var(--success);
}

.status-cache {
   background: var(--ubuntu-orange);
}

.status-unavailable {
   background: var(--error);
}

.recommended-chip {
   border-radius: 999px;
   padding: 2px 8px;
   color: var(--ubuntu-orange-dark);
   background: #fff0e9;
   font-size: 0.72rem;
   font-weight: 800;
   letter-spacing: 0.02em;
}

.log-field textarea {
   border-color: #d8b09d;
   background: #fffdfc;
}

.form-section-final {
   padding-bottom: 0;
}

button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 50px;
   margin-top: 25px;
   border: 0;
   border-radius: 10px;
   padding: 12px 23px;
   color: #ffffff;
   background: var(--ubuntu-orange);
   box-shadow: 0 5px 15px rgba(233, 84, 32, 0.22);
   font-weight: 800;
   cursor: pointer;
   transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

button:hover {
   background: var(--ubuntu-orange-dark);
   box-shadow: 0 7px 18px rgba(195, 65, 19, 0.24);
   transform: translateY(-1px);
}

button:active {
   transform: translateY(0);
}

button:disabled,
select:disabled {
   cursor: not-allowed;
   opacity: 0.58;
}

button:disabled:hover {
   background: var(--ubuntu-orange);
   box-shadow: none;
   transform: none;
}

a {
   color: var(--ubuntu-aubergine);
   text-decoration-thickness: 1px;
   text-underline-offset: 2px;
}

a:hover {
   color: var(--ubuntu-orange-dark);
}

@media (max-width: 700px) {
   .page-shell {
      width: min(100% - 18px, 880px);
      margin: 9px auto 24px;
   }

   .card {
      border-radius: 16px;
   }

   .page-header {
      padding: 28px 22px 32px;
   }


   .notice,
   .log-help,
   form {
      margin-left: 18px;
      margin-right: 18px;
   }

   .field-grid {
      grid-template-columns: 1fr;
   }

   .field-full {
      grid-column: auto;
   }

   .label-row,
   .field-footer,
   .select-meta {
      align-items: flex-start;
   }

   .select-meta {
      flex-direction: column;
      gap: 3px;
   }

   .app-package {
      text-align: left;
   }

   button {
      width: 100%;
   }
}

@media (prefers-reduced-motion: reduce) {
   input,
   select,
   textarea,
   button {
      transition: none;
   }
}