/* File: /css/ss-page.css */
/* SafeShare Page Styles – MASTER FINAL v2026-03-10-06
   Scope: Content only (cards, typography, app UI)
   IMPORTANT:
   - Load AFTER /css/ss-shell.css
   - No shell/nav/footer/backdrop/sheet rules here
   - Final tuned version:
     blue-slate depth, softer mint primary, lilac secondary, less gray, lighter input tuning
*/

:root{
  --bg-0: #121923;
  --bg-1: #182230;
  --bg-2: #1f2b3a;

  --card: rgba(28,39,54,.78);
  --card-strong: rgba(36,49,67,.88);
  --card-soft: rgba(134,220,201,.08);

  --text: #f4f7fb;
  --text-soft: #dee7f0;
  --muted: #b9c5d3;
  --muted2: #9fadc0;

  --border: rgba(255,255,255,.12);
  --border-strong: rgba(255,255,255,.16);

  --accent: #86dcc9;
  --accent-2: #67ccb7;
  --accent-soft: rgba(134,220,201,.16);
  --accent-line: rgba(134,220,201,.34);

  --lilac: #cec1f5;
  --lilac-2: #e0d7fb;
  --lilac-soft: rgba(206,193,245,.12);

  --warn: #f0c98d;
  --warn-bg: rgba(240,201,141,.14);
  --ok-bg: rgba(134,220,201,.13);

  --shadow: 0 12px 28px rgba(0,0,0,.22);
  --shadow-soft: 0 7px 16px rgba(0,0,0,.14);

  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1100px;
}

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

html, body{ margin:0; padding:0; }

body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(980px 500px at 12% -10%, rgba(134,220,201,.12), transparent 58%),
    radial-gradient(860px 500px at 90% -8%, rgba(206,193,245,.08), transparent 54%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 56%, var(--bg-2) 100%);
  line-height: 1.5;
}

/* Layout (content only) */
.ss-main{
  width:min(var(--maxw), calc(100% - 24px));
  margin:18px auto 0;
  display:flex;
  flex-direction:column;
  gap:24px;
  padding-bottom:max(10px, env(safe-area-inset-bottom, 0px));
}

.ss-wrap{ min-width:0; }
.ss-section{ margin:0; padding:0; }

.ss-main > .ss-section,
.ss-main > .ss-wrap{ margin:0; }

/* Startseite: nur “nackte” Wraps (ohne Card) bekommen Innenluft */
.ss-main > section.ss-wrap:not(.ss-card){
  padding:10px 6px;
}

/* Cards */
.ss-card > :first-child{ margin-top:0; }
.ss-card > :last-child{ margin-bottom:0; }

.ss-card{
  background:
    linear-gradient(180deg, rgba(37,50,67,.95), rgba(29,40,55,.93)),
    linear-gradient(145deg, rgba(134,220,201,.045), rgba(206,193,245,.022) 42%, rgba(255,255,255,0) 74%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.04);
  padding:22px;
  min-width:0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ss-card--inner{
  background:linear-gradient(180deg, rgba(55,70,88,.78), rgba(40,54,72,.72));
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  padding:18px;
  min-width:0;
}

.ss-hero{ padding:26px; }

/* Typography */
h1,h2,h3{
  margin:0 0 10px;
  line-height:1.12;
  color: var(--text);
}
h1{
  font-size:clamp(30px,4.8vw,62px);
  letter-spacing:-.02em;
}
h2{
  font-size:clamp(24px,3.2vw,40px);
  letter-spacing:-.015em;
}
h3{
  font-size:clamp(20px,2.2vw,28px);
  letter-spacing:-.01em;
}

p,li{
  color:var(--text-soft);
  font-size:clamp(16px,1.5vw,23px);
  margin:0 0 10px;
}
ul,ol{ margin:0; padding-left:20px; }
li{ margin-bottom:6px; }

.ss-kicker{
  color:var(--muted);
  font-size:clamp(14px,1.4vw,18px);
  font-weight:700;
  margin-bottom:8px;
}

.ss-hero-kicker{
  color:#dbe4ef;
  font-size:clamp(18px,1.9vw,28px);
  font-weight:700;
}

.ss-h3{
  margin:0 0 8px;
  font-size:clamp(20px,2.2vw,28px);
  line-height:1.2;
}

.ss-label{
  display:block;
  margin:0 0 8px;
  font-size:.96rem;
  font-weight:700;
  color:var(--text);
}

.ss-muted{ color:#bac5d2; }
.ss-small{ font-size:14px; color:var(--muted2); }

/* Grids / stacks */
.ss-grid{
  display:grid;
  gap:12px;
  min-width:0;
}
.ss-grid > *{ min-width:0; }

.ss-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ss-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }

.ss-stack{
  display:grid;
  gap:12px;
  min-width:0;
}

.ss-row{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
}

/* Buttons / actions */
.ss-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Desktop: CTA-Reihe mittig */
.ss-hero .ss-actions{ justify-content:flex-start; }
@media (min-width:980px){
  .ss-hero .ss-actions{ justify-content:center; }
}

.ss-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.055);
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease, opacity .14s ease, color .14s ease;
}
.ss-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.24);
  box-shadow:var(--shadow-soft);
}

.ss-btn--primary{
  border-color: rgba(134,220,201,.46);
  background: rgba(134,220,201,.20);
  color: #f5fcfa;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.ss-btn--primary:hover{
  background: rgba(134,220,201,.28);
  border-color: rgba(134,220,201,.62);
}

/* CTA hierarchy */
.ss-btn--secondary{
  opacity:.98;
  border-color: rgba(206,193,245,.26);
}
.ss-btn--secondary:hover{
  border-color: rgba(206,193,245,.38);
  color: var(--lilac-2);
}

.ss-btn--tertiary{ opacity:.82; }

#cleanBtn{ min-width:132px; }

.ss-btn--ghost{ background:transparent; }

/* Form fields */
.ss-w-full{ width:100%; }

.ss-input{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.11);
  border-radius:12px;
  background: rgba(72,86,104,.26);
  color:var(--text);
  padding:14px;
  outline:none;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.ss-input::placeholder{
  color:#b2becc;
}
.ss-input:focus-visible{
  box-shadow: 0 0 0 3px rgba(206,193,245,.20);
  border-color: rgba(206,193,245,.36);
  background: rgba(82,97,116,.30);
}
.ss-input--lg{ min-height:220px; }
.ss-input--md{ min-height:170px; }

.ss-appField{
  display:block;
  width:100%;
}
.ss-appField > textarea{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  float:none !important;
  clear:both !important;
  position:static !important;
  min-width:0 !important;
  margin:0 !important;
  line-height:1.45;
  font-size:16px; /* iOS zoom prevention */
  padding:14px;
  border-radius:12px;
  resize:vertical;
}
#urlInput{ min-height:220px !important; }
#urlOutput{ min-height:170px !important; }
#urlInput, #urlOutput{
  grid-column:1 / -1 !important;
  flex:0 0 100% !important;
}

/* Notes */
.ss-note{
  border:1px solid rgba(134,220,201,.30);
  background: rgba(134,220,201,.10);
  border-radius:16px;
  padding:12px 14px;
  color:#e9f7f2;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.ss-warn{
  border:1px solid rgba(240,201,141,.36);
  background: var(--warn-bg);
  border-radius:16px;
  padding:12px 14px;
  color:#faead1;
}

/* Trust row */
.ss-trustRow{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem .8rem;
  font-size:.92rem;
  color:var(--text-soft);
}

.ss-trustRow li{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin:0;
  padding:0;
}

.ss-check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.15rem;
  height:1.15rem;
  border-radius:999px;
  background:rgba(134,220,201,.18);
  border:1px solid rgba(134,220,201,.34);
  color:#eaf8f3;
  font-size:.82rem;
  font-weight:800;
  line-height:1;
  flex:0 0 auto;
}

/* Details */
.ss-details{
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(57,71,89,.42);
  padding:12px 14px;
}
.ss-details > summary{
  cursor:pointer;
  font-weight:700;
  color: var(--text);
}

/* Code / mono */
code{
  display:inline-block;
  padding:.12em .45em;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(77,91,108,.34);
  color: var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:.92em;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.ss-mono,
.ss-monoBlock,
.ss-mono code,
.ss-monoBlock code,
pre{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  letter-spacing:.01em;
  min-width:0;
}

.ss-mono{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.ss-monoBlock{
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(57,71,89,.42);
  padding:12px 14px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  color: var(--text-soft);
}

pre{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:100%;
}

/* Hero media (natural, no crop) */
.ss-heroMedia{
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(37,49,67,.48);
}

.ss-heroMedia img{
  display:block;
  width:100%;
  height:auto;
}

/* App hero example: more breathing room */
.hero__proof{
  margin-top: 1.5rem;
}

.heroCard{
  padding: 1rem 1.1rem;
}

.heroCard + .heroCard,
.heroCard + .heroProofGrid,
.heroProofGrid + .heroCard{
  margin-top: 1rem;
}

.heroProofGrid{
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.hero__inner--compact{
  gap: 1rem;
  align-items: start;
}

.hero__proof--compact{
  margin-top: .5rem;
}

.heroProofGrid--compact{
  gap: .75rem;
}

.heroCard__label{
  display: block;
  margin-bottom: .55rem;
}

.heroCard__code{
  display: block;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.heroCard__note{
  margin: .7rem 0 0;
  line-height: 1.55;
}

@media (min-width: 860px){
  .heroProofGrid{
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .heroCard{
    padding: 1.05rem 1.15rem;
  }
}

@media (max-width: 680px){
  .hero__proof{
    margin-top: 1.25rem;
  }

  .heroCard{
    padding: .95rem 1rem;
  }

  .heroProofGrid{
    gap: .9rem;
  }

  .heroCard__label{
    margin-bottom: .45rem;
  }

  .heroCard__note{
    margin-top: .6rem;
  }
}

/* Pricing / nudge helper */
.ss-pricingGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.ss-plan{
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem;
  background: var(--card);
}
.ss-plan--featured{
  outline: 2px solid rgba(134,220,201,.50);
  background:
    linear-gradient(180deg, rgba(134,220,201,.09), rgba(44,58,75,.72));
}
.ss-price{
  font-size:1.5rem;
  font-weight:700;
  line-height:1.1;
  margin:.4rem 0 1rem;
  color: var(--text);
}
@media (max-width:900px){
  .ss-pricingGrid{ grid-template-columns:1fr; }
}
.ss-plan .ss-note{ line-height:1.45; }
.ss-plan .ss-note strong{ font-weight:700; }

/* Mode switch */
.ss-mode{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background: linear-gradient(180deg, rgba(63,77,96,.34), rgba(46,59,76,.30));
}
.ss-mode > .ss-label,
.ss-mode > legend{
  display:block;
  margin:0 0 10px 0;
  padding:0;
  font-size:.95rem;
  font-weight:700;
  color:var(--text);
}

.ss-radio{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  margin:0;
  border-radius:10px;
  line-height:1.35;
  color:var(--text);
  cursor:pointer;
  user-select:none;
  border:1px solid transparent;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.ss-radio + .ss-radio{ margin-top:6px; }

.ss-radio:hover{
  background:rgba(255,255,255,.04);
}
.ss-radio:focus-within{
  outline:none;
  box-shadow:0 0 0 2px rgba(206,193,245,.20);
  border-color: rgba(206,193,245,.24);
}

.ss-radio input[type="radio"]{
  -webkit-appearance:radio !important;
  appearance:radio !important;
  width:16px;
  height:16px;
  min-width:16px;
  margin:0;
  position:static !important;
  opacity:1 !important;
  clip:auto !important;
  pointer-events:auto;
  accent-color:var(--accent);
}

.ss-radio > span{
  display:inline-block;
  font-size:.95rem;
  color:var(--text);
}

.ss-radio:has(input[type="radio"]:checked){
  background: rgba(134,220,201,.14);
  border: 1px solid rgba(134,220,201,.30);
}

@supports not selector(:has(*)){
  .ss-radio input[type="radio"]:checked + span{
    font-weight:700;
  }
}

/* Utilities */
.ss-mt-6{ margin-top:6px; }
.ss-mt-8{ margin-top:8px; }
.ss-mt-10{ margin-top:10px; }
.ss-mt-12{ margin-top:12px; }
.ss-mt-14{ margin-top:14px; }
.ss-mt-16{ margin-top:16px; }

/* Responsive */
@media (max-width:980px){
  .ss-grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
  .ss-main{ width:calc(100% - 16px); margin-top:14px; }
  .ss-card{ padding:16px; border-radius:16px; }
  .ss-card--inner{ padding:14px; border-radius:14px; }
  .ss-hero{ padding:18px; }
  .ss-grid--2,.ss-grid--3{ grid-template-columns:1fr; }
  .ss-btn{ width:100%; }
  .ss-actions{ align-items:stretch; }
}
@media (max-width:640px){
  .ss-mode{ padding:10px; border-radius:12px; }
  .ss-radio{ padding:9px 10px; }
  .ss-radio > span{ font-size:.93rem; }
}

/* Ensure content links stay clickable */
.ss-main a{
  position:relative;
  z-index:1;
}

/* Content links */
.ss-main a:not(.ss-btn){
  color: var(--lilac);
  text-decoration-color: rgba(206,193,245,.42);
}
.ss-main a:not(.ss-btn):hover{
  color: var(--lilac-2);
  text-decoration-color: rgba(224,215,251,.62);
}

/* Pro visual shot */
.ss-shot{
  display:block;
  width:100%;
  height:auto;
  border-radius:18px;
  border:1px solid var(--border);
}