: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;
   --ink: #2c2c2c;
   --muted: #6b6561;
   --surface: #ffffff;
   --surface-soft: #f7f6f5;
   --border: #d8d3cf;
   --error: #a33125;
   --error-soft: #fff2f0;
   --warning-soft: #fff5ed;
   --shadow: 0 18px 50px rgba(44, 0, 30, 0.12);
}

* {
   box-sizing: border-box;
}

html {
   background: #f3f1ef;
}

body {
   margin: 0;
   color: var(--ink);
   background:
      radial-gradient(circle at top right, rgba(233, 84, 32, 0.08), transparent 35rem),
      #f3f1ef;
}

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

a:focus-visible {
   outline: 3px solid var(--ubuntu-orange);
   outline-offset: 3px;
}

.page-shell {
   width: min(980px, 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);
}

.overview-card {
   margin-bottom: 24px;
}

.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: 700px;
   font-size: clamp(2rem, 5vw, 3.25rem);
   line-height: 1.06;
   letter-spacing: -0.035em;
}

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

.overview-meta {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 1px;
   background: var(--border);
}

.overview-meta > div {
   min-width: 0;
   padding: 18px 20px;
   background: var(--surface);
}

.meta-label {
   display: block;
   margin-bottom: 4px;
   color: var(--muted);
   font-size: 0.78rem;
   font-weight: 800;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}

.overview-meta strong {
   display: block;
   overflow-wrap: anywhere;
   color: var(--ubuntu-aubergine-dark);
   font-size: 1rem;
}

.notice {
   display: flex;
   gap: 15px;
   align-items: flex-start;
   margin: 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 {
   color: #5f4d44;
   font-size: 0.94rem;
}

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

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

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

.app-card {
   margin-top: 24px;
}

.app-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   padding: 26px 30px 20px;
}

.app-header h2 {
   margin: 0;
   color: var(--ubuntu-aubergine-dark);
   font-size: clamp(1.45rem, 3vw, 2rem);
   letter-spacing: -0.025em;
}

.package-name {
   margin: 4px 0 0;
   color: var(--muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 0.84rem;
   overflow-wrap: anywhere;
}

.store-link {
   flex: 0 0 auto;
   border: 1px solid var(--ubuntu-orange);
   border-radius: 999px;
   padding: 8px 14px;
   color: var(--ubuntu-orange-dark);
   font-size: 0.88rem;
   font-weight: 800;
   text-decoration: none;
}

.store-link:hover {
   color: #ffffff;
   background: var(--ubuntu-orange);
}

.reaction-grid {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 12px;
   padding: 0 30px 26px;
}

.reaction-card {
   position: relative;
   min-width: 0;
   overflow: hidden;
   border: 1px solid var(--border);
   border-radius: 15px;
   padding: 16px 17px;
   background: var(--surface-soft);
}

.reaction-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 5px;
   height: 100%;
   background: linear-gradient(var(--ubuntu-aubergine), var(--ubuntu-orange));
}

.reaction-label {
   display: block;
   margin-bottom: 3px;
   color: var(--muted);
   font-size: 0.8rem;
   font-weight: 800;
   letter-spacing: 0.05em;
   text-transform: uppercase;
}

.reaction-card strong {
   color: var(--ubuntu-aubergine-dark);
   font-size: 1.9rem;
   line-height: 1;
}

.app-warning {
   margin: 0 30px 24px;
   border-left: 4px solid var(--ubuntu-orange);
   padding: 10px 13px;
   color: #69463a;
   background: var(--warning-soft);
   font-size: 0.9rem;
}

.reviews-section {
   border-top: 1px solid var(--border);
   padding: 24px 30px 30px;
}

.section-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   margin-bottom: 16px;
}

.section-heading h3 {
   margin: 0;
   color: var(--ubuntu-aubergine-dark);
   font-size: 1.18rem;
}

.section-heading span {
   display: inline-grid;
   min-width: 30px;
   height: 30px;
   place-items: center;
   border-radius: 999px;
   padding: 0 10px;
   color: #ffffff;
   background: var(--ubuntu-orange);
   font-size: 0.82rem;
   font-weight: 800;
}

.review-list {
   display: grid;
   gap: 12px;
}

.review-item {
   border: 1px solid var(--border);
   border-radius: 14px;
   padding: 17px 18px;
   background: #ffffff;
}

.review-header {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 16px;
}

.review-header strong {
   color: var(--ubuntu-aubergine-dark);
}

.review-header time,
.review-version {
   color: var(--muted);
   font-size: 0.84rem;
}

.review-version {
   margin: 2px 0 10px;
}

.review-text {
   margin: 0;
   color: #3f3935;
   overflow-wrap: anywhere;
}

.empty-state {
   margin: 0;
   border: 1px dashed var(--border);
   border-radius: 14px;
   padding: 18px;
   color: var(--muted);
   background: var(--surface-soft);
   text-align: center;
}

@media (max-width: 760px) {
   .overview-meta,
   .reaction-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .app-header,
   .review-header {
      align-items: flex-start;
   }

   .review-header {
      flex-direction: column;
      gap: 2px;
   }
}

@media (max-width: 500px) {
   .page-shell {
      width: min(100% - 20px, 980px);
      margin-top: 10px;
   }

   .card {
      border-radius: 16px;
   }

   .overview-meta,
   .reaction-grid {
      grid-template-columns: 1fr 1fr;
   }

   .app-header {
      flex-direction: column;
      padding: 22px 20px 18px;
   }

   .reaction-grid {
      padding: 0 20px 22px;
   }

   .reviews-section {
      padding: 22px 20px 24px;
   }

   .app-warning {
      margin-right: 20px;
      margin-left: 20px;
   }
}