.cc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    max-width: 1000px;
    margin: 0 auto 120px;
  }
  
  .cc-group { border: none; padding: 0; margin: 0; }
  .cc-group legend { font-size: clamp(32px, 3vw, 40px); font-weight: 700; color: var(--ink); margin-bottom: 8px; line-height: 1.1; letter-spacing: -0.025em; }
  .cc-help { font-size: 1.125rem; color: var(--secondary); margin-bottom: 32px; margin-top: 0; }
  
  .cc-tools { display: flex; flex-direction: column; gap: 16px; }
  .cc-field { 
    display: block; 
    background: var(--surface); 
    border-radius: 12px; 
    padding: 12px 20px; 
    cursor: text;
    border: 2px solid transparent;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .cc-field:focus-within { border-color: var(--accent); background: var(--ground); }
  .cc-label { display: block; font-size: 0.875rem; color: var(--secondary); margin-bottom: 4px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
  .cc-input { display: flex; align-items: center; font-family: 'Oswald', sans-serif; font-size: 1.5rem; color: var(--ink); font-weight: 500; }
  .cc-input input { border: none; background: transparent; width: 100%; font-family: inherit; font-size: inherit; color: inherit; outline: none; padding: 0 8px; -moz-appearance: textfield; min-height: 48px; }
  .cc-input input::-webkit-outer-spin-button, .cc-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .cc-affix { color: var(--secondary); }
  
  .cc-add { 
    background: transparent; 
    border: 2px dashed var(--secondary); 
    color: var(--secondary); 
    padding: 16px; 
    border-radius: 12px; 
    font-family: 'Inter', sans-serif; 
    font-weight: 600; 
    font-size: 1rem;
    cursor: pointer; 
    transition: all 0.2s ease;
    min-height: 56px;
  }
  .cc-add:hover, .cc-add:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }

  .cc-out {
    background: var(--surface);
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: sticky;
    top: 40px;
  }
  
  .cost-label { font-size: 0.875rem; color: var(--secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
  .cost-val { font-family: 'Oswald', sans-serif; font-weight: 700; line-height: 1; letter-spacing: -0.025em; transition: color 0.3s ease; }
  .cost-period { font-size: 1rem; color: var(--secondary); margin-top: 4px; }
  
  .right-now .cost-val { font-size: clamp(56px, 6vw, 96px); color: var(--amber); }
  .right-now .cost-val.is-zero { color: var(--ink); }
  .with-us .cost-val { font-size: clamp(40px, 4vw, 56px); color: var(--accent); }
  
  .cc-lines { 
    list-style: none; 
    padding: 24px 0 0 0; 
    margin: 24px 0 0 0; 
    border-top: 2px solid var(--surface-elevated); 
  }
  .cc-lines li { 
    display: flex; 
    justify-content: space-between; 
    padding: 8px 0; 
    font-size: 1rem; 
    color: var(--secondary);
  }
  .cc-lines li:last-child { color: var(--ink); font-weight: 600; border-top: 1px solid var(--surface-elevated); margin-top: 8px; padding-top: 16px; }
  
  .cc-horizon { margin-top: 12px; display: flex; align-items: center; }
  .cc-horizon span { 
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
  }
  .right-now .cc-horizon span { background: color-mix(in srgb, var(--amber) 15%, transparent); color: color-mix(in srgb, var(--amber) 60%, var(--ink)); }
  .with-us .cc-horizon span { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
  
  .cc-verdict { font-family: 'Oswald', sans-serif; font-size: 1.5rem; color: var(--success); margin: 0; padding-top: 24px; border-top: 2px solid var(--surface-elevated); }
  .cc-assume { font-size: 0.75rem; color: var(--secondary); margin: 8px 0 0 0; }

  @media (max-width: 899px) {
    .cc-grid { 
      display: flex; 
      flex-direction: column; 
      gap: 32px; 
    }
    .cc-out {
      position: sticky;
      bottom: 0;
      top: auto;
      z-index: 10;
      box-shadow: 0 -8px 24px color-mix(in srgb, var(--ink) 8%, transparent);
      padding: 24px;
      gap: 16px;
      border-radius: 16px 16px 0 0;
      margin: 0 -24px;
      border-top: 3px solid var(--amber);
    }
    
    .cc-lines, .with-us, .cc-verdict, .cc-assume { display: none; }
    .right-now { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
    .right-now .cost-val { font-size: 32px; }
    .right-now .cost-label { width: 100%; margin-bottom: 4px; }
    .cc-horizon { margin: 0; }
  }