#ls-sc-card {
    --lsc-bg:         #121821;
    --lsc-border:     rgba(43,108,255,0.22);
    --lsc-text:       #e8edf5;
    --lsc-muted:      #6b7f99;
    --lsc-brand:      #2b6cff;
    --lsc-ocean-top:  #04101f;
    --lsc-ocean-mid:  #091a3a;
    --lsc-ocean-bot:  #061325;
    --lsc-ocean-bord: rgba(43,108,255,0.28);
    --lsc-fill-from:  rgba(43,108,255,0.10);
    --lsc-fill-to:    rgba(43,108,255,0.20);
    --lsc-fill-bord:  rgba(43,108,255,0.45);
    --lsc-water1:     rgba(43,108,255,0.065);
    --lsc-water2:     rgba(43,108,255,0.04);
    --lsc-tick:       rgba(43,108,255,0.32);
    --lsc-tick-lbl:   rgba(107,127,153,0.65);
    --lsc-wake:       rgba(43,108,255,0.28);
    --lsc-shadow:     0 0 80px rgba(43,108,255,0.07), 0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  }

  [data-theme="light"] #ls-sc-card {
    --lsc-bg:         #ffffff;
    --lsc-border:     rgba(0,80,160,0.18);
    --lsc-text:       #1a2c3d;
    --lsc-muted:      #3a6080;
    --lsc-brand:      #0055cc;
    --lsc-ocean-top:  #4a9ed4;
    --lsc-ocean-mid:  #3488be;
    --lsc-ocean-bot:  #2272a8;
    --lsc-ocean-bord: rgba(0,80,160,0.32);
    --lsc-fill-from:  rgba(0,80,160,0.12);
    --lsc-fill-to:    rgba(0,80,160,0.24);
    --lsc-fill-bord:  rgba(0,80,160,0.50);
    --lsc-water1:     rgba(255,255,255,0.18);
    --lsc-water2:     rgba(255,255,255,0.10);
    --lsc-tick:       rgba(0,80,160,0.32);
    --lsc-tick-lbl:   rgba(20,55,90,0.60);
    --lsc-wake:       rgba(0,80,160,0.28);
    --lsc-shadow:     0 0 60px rgba(0,80,160,0.06), 0 20px 60px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
  }

  #ls-sc-card,
  #ls-sc-slider-wrap .ls-sc-ocean,
  #ls-sc-slider-wrap .ls-sc-fill {
    transition: background 1.2s ease, border-color 1.2s ease, box-shadow 1.2s ease, color 1.2s ease;
  }

  #ls-sc-card {
    position: relative; z-index: 10;
    background: var(--lsc-bg);
    border: 1px solid var(--lsc-border);
    border-radius: 28px;
    padding: clamp(28px,5vw,56px) clamp(24px,5vw,60px);
    width: min(780px, 96vw);
    margin: 0 auto 80px auto;
    box-shadow: var(--lsc-shadow);
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: var(--lsc-text);
  }
  #ls-sc-card * { box-sizing: border-box; margin: 0; padding: 0; }

  #ls-sc-card .ls-sc-header {
    display: flex; align-items: flex-start;
    justify-content: space-between;
    margin-bottom: clamp(20px,4vh,44px);
    flex-wrap: wrap; gap: 12px;
  }
  #ls-sc-card .ls-sc-title {
    font-family: 'Playfair Display', serif;
    font-weight: 900; font-size: clamp(1.3rem,3vw,2rem);
    color: var(--lsc-text); letter-spacing: -.01em; line-height: 1.1;
    transition: color 1.2s ease;
  }
  #ls-sc-card .ls-sc-title span {
    color: transparent;
    -webkit-text-stroke: 1px var(--lsc-brand);
    transition: -webkit-text-stroke 1.2s ease;
  }
  #ls-sc-card .ls-sc-subtitle {
    font-size: clamp(.72rem,1.4vw,.84rem);
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--lsc-muted); font-style: italic; margin-top: 5px;
    transition: color 1.2s ease;
  }

  #ls-sc-card .ls-sc-price-block { text-align: right; }
  #ls-sc-card .ls-sc-price-label {
    font-size: clamp(.62rem,1.1vw,.75rem);
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--lsc-muted); margin-bottom: 3px;
    transition: color 1.2s ease;
  }
  #ls-sc-card .ls-sc-price-big {
    font-family: 'Playfair Display', serif;
    font-weight: 900; font-size: clamp(2.2rem,5.5vw,3.8rem);
    line-height: 1; color: var(--lsc-text);
    transition: color 1.2s ease;
  }
  #ls-sc-card .ls-sc-price-big sup { font-size:.45em; vertical-align:super; color:var(--lsc-brand); }
  #ls-sc-card .ls-sc-price-per {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(.68rem,1.2vw,.8rem);
    color: var(--lsc-muted); letter-spacing:.08em;
    text-transform: uppercase; margin-top: 2px;
    transition: color 1.2s ease;
  }

  #ls-sc-card .ls-sc-storage-row {
    display: flex; align-items: flex-end; gap: 16px;
    margin-bottom: clamp(16px,2.5vh,28px); flex-wrap: wrap;
  }
  #ls-sc-card .ls-sc-storage-num {
    font-family: 'Playfair Display', serif;
    font-weight: 900; font-size: clamp(3rem,9vw,6rem);
    line-height: 1; color: var(--lsc-text);
    transition: color 1.2s ease;
  }
  #ls-sc-card .ls-sc-storage-num .ls-sc-unit {
    color: var(--lsc-brand); font-size:.38em; margin-left:3px;
  }
  #ls-sc-card .ls-sc-storage-desc {
    font-size: clamp(.82rem,1.7vw,1rem);
    color: var(--lsc-muted); font-style:italic;
    max-width: 240px; line-height:1.55; padding-bottom:8px;
    transition: color 1.2s ease;
  }

  #ls-sc-slider-wrap {
    position: relative; height: 96px;
    margin: 0 -2px; user-select: none; touch-action: none;
  }
  #ls-sc-slider-wrap .ls-sc-ocean {
    position: absolute;
    bottom:14px; left:2px; right:2px; height:52px;
    border-radius: 26px;
    background: linear-gradient(180deg, var(--lsc-ocean-top) 0%, var(--lsc-ocean-mid) 50%, var(--lsc-ocean-bot) 100%);
    border: 1px solid var(--lsc-ocean-bord);
    overflow: hidden;
    box-shadow: inset 0 6px 22px rgba(0,0,0,0.3);
    z-index:1;
  }
  #ls-sc-slider-wrap .ls-sc-water {
    position:absolute; inset:0; border-radius:26px; overflow:hidden;
  }
  #ls-sc-slider-wrap .ls-sc-water::before,
  #ls-sc-slider-wrap .ls-sc-water::after {
    content:''; position:absolute;
    bottom:0; left:-60%; width:220%; height:100%;
    border-radius:42%; background: var(--lsc-water1);
  }
  #ls-sc-slider-wrap .ls-sc-water::before { animation: ls-sc-roll 8s ease-in-out infinite; }
  #ls-sc-slider-wrap .ls-sc-water::after  { animation: ls-sc-roll 11s ease-in-out infinite reverse; background: var(--lsc-water2); }
  @keyframes ls-sc-roll { 0%,100%{transform:translateX(0) rotate(0deg);}50%{transform:translateX(4%) rotate(1.8deg);} }

  #ls-sc-slider-wrap .ls-sc-shine {
    position:absolute; top:3px; left:8%; right:8%; height:5px;
    border-radius:3px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.09),transparent);
    animation: ls-sc-shine 6s ease-in-out infinite;
  }
  @keyframes ls-sc-shine { 0%,100%{opacity:.4;}50%{opacity:1;} }

  #ls-sc-slider-wrap .ls-sc-fill {
    display: none;
  }

  #ls-sc-slider-wrap .ls-sc-miniwaves { position:absolute;bottom:3px;left:0;right:0;height:18px;pointer-events:none; }
  #ls-sc-slider-wrap .ls-sc-miniwaves svg { width:100%;height:100%; }
  .ls-sc-mw1 { animation:ls-sc-mw1 5s ease-in-out infinite; }
  .ls-sc-mw2 { animation:ls-sc-mw2 7s ease-in-out infinite; }
  @keyframes ls-sc-mw1 {
    0%,100%{d:path("M0,9 C60,3 120,15 180,9 C240,3 300,15 360,9 C420,3 480,15 540,9 C600,3 660,15 720,9 L720,18 L0,18 Z");}
    50%    {d:path("M0,12 C60,6 120,17 180,12 C240,6 300,17 360,12 C420,6 480,17 540,12 C600,6 660,17 720,12 L720,18 L0,18 Z");}
  }
  @keyframes ls-sc-mw2 {
    0%,100%{d:path("M0,14 C90,8 180,18 270,14 C360,8 450,18 540,14 C630,8 720,18 720,14 L720,18 L0,18 Z");}
    50%    {d:path("M0,11 C90,5 180,16 270,11 C360,5 450,16 540,11 C630,5 720,16 720,11 L720,18 L0,18 Z");}
  }

  #ls-sc-slider-input {
    position:absolute; inset:0; width:100%; height:100%;
    opacity:0; cursor:grab; z-index:5;
    -webkit-appearance:none; appearance:none; margin:0;
  }
  #ls-sc-slider-input:active { cursor:grabbing; }

  #ls-sc-wake {
    position:absolute; bottom:22px; transform:translateX(-50%);
    pointer-events:none; z-index:3; transition:left .06s linear;
  }
  #ls-sc-wake::before, #ls-sc-wake::after {
    content:''; position:absolute; border-radius:50%;
    border:1px solid var(--lsc-wake);
    animation:ls-sc-wake 1.8s ease-out infinite;
  }
  #ls-sc-wake::before { width:14px;height:5px;left:-7px;top:-2px; }
  #ls-sc-wake::after  { width:24px;height:8px;left:-12px;top:-4px;animation-delay:.5s; }
  @keyframes ls-sc-wake { 0%{opacity:.7;transform:scaleX(1);}100%{opacity:0;transform:scaleX(2.2);} }

  #ls-sc-boat {
    position:absolute; bottom:14px; transform:translateX(-50%);
    pointer-events:none; z-index:4; transition:left .06s linear;
    filter: drop-shadow(0 -10px 18px rgba(43,108,255,0.55)) drop-shadow(0 3px 8px rgba(0,0,0,0.45));
  }
  [data-theme="light"] #ls-sc-boat {
    filter: drop-shadow(0 -10px 18px rgba(0,80,160,0.40)) drop-shadow(0 3px 8px rgba(0,0,0,0.20));
  }
  #ls-sc-boat svg { width:clamp(54px,10vw,74px);height:auto;animation:ls-sc-bob 3.5s ease-in-out infinite; }
  @keyframes ls-sc-bob {
    0%,100%{transform:translateY(0) rotate(-1deg);}
    38%    {transform:translateY(-5px) rotate(1.8deg);}
    70%    {transform:translateY(-2px) rotate(-.4deg);}
  }

  #ls-sc-ticks {
    position:absolute; bottom:0; left:2px; right:2px;
    display:flex; justify-content:space-between; pointer-events:none;
  }
  #ls-sc-card .ls-sc-tick { display:flex;flex-direction:column;align-items:center;gap:2px; }
  #ls-sc-card .ls-sc-tick-line { width:1px;height:5px;background:var(--lsc-tick); }
  #ls-sc-card .ls-sc-tick-label {
    font-size:clamp(.52rem,.9vw,.66rem);
    letter-spacing:.05em;text-transform:uppercase;
    color:var(--lsc-tick-lbl);white-space:nowrap;
    transition:color 1.2s ease;
  }
  #ls-sc-card .ls-sc-tick-label:empty { display:none; }

  @media (max-width: 480px) {
  #ls-sc-card {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; 
    padding: 25px 20px !important;
    align-items: baseline !important;
    row-gap: 20px !important;
  }

  #ls-sc-card .ls-sc-header, 
  #ls-sc-card .ls-sc-storage-row {
    display: contents !important;
  }

  #ls-sc-card .ls-sc-header > div:first-child {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto 10px auto !important;
  }

  #ls-sc-card .ls-sc-storage-num {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    font-size: 3.5rem !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  #ls-sc-card .ls-sc-price-block {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: baseline !important;
  }

  #ls-sc-card .ls-sc-price-big {
    font-size: 2.2rem !important;
    line-height: 1 !important;
  }

  #ls-sc-card .ls-sc-price-small {
    display: inline !important;
    font-size: 1.2rem !important;
  }

  #ls-sc-card .ls-sc-subtitle,
  #ls-sc-card .ls-sc-storage-desc,
  #ls-sc-card .ls-sc-price-per,
  #ls-sc-card .ls-sc-price-label {
    display: none !important;
  }

  #ls-sc-slider-wrap {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    margin-top: 35px !important;
    width: 100% !important;
  }
}