/* =========================================================
   THALAMUS CAT
   REGISTRÁCIA

   CAT-SK-01
   CAT-STYLE-03
   CAT-CANVAS-02

   • slovenské rozhranie
   • rovnaký štýl ako register.css
   • mliečno-béžová firemná paleta
   • THALAMUS RADIANT HEX
   • desktop / tablet / mobile
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

  --cat-bg:
    #f7f4f0;

  --cat-bg-light:
    #fbfaf8;

  --cat-bg-card:
    rgba(
      255,
      253,
      250,
      0.90
    );


  --cat-text:
    #493329;

  --cat-text-soft:
    #725d50;

  --cat-text-muted:
    #98857a;


  --cat-accent:
    #c79a72;

  --cat-accent-hover:
    #b98962;

  --cat-accent-dark:
    #9a6b4d;

  --cat-accent-soft:
    #ead8c8;


  --cat-border:
    rgba(
      153,
      112,
      82,
      0.22
    );

  --cat-border-strong:
    rgba(
      153,
      112,
      82,
      0.38
    );


  --cat-shadow:
    rgba(
      79,
      55,
      42,
      0.12
    );

  --cat-shadow-soft:
    rgba(
      79,
      55,
      42,
      0.07
    );


  --cat-danger:
    #a74335;

  --cat-danger-bg:
    rgba(
      169,
      67,
      53,
      0.08
    );
}


/* =========================================================
   RESET
   ========================================================= */

* {
  margin:
    0;

  padding:
    0;

  box-sizing:
    border-box;
}


/* =========================================================
   HTML / BODY
   ========================================================= */

html,
body {
  width:
    100%;

  min-height:
    100%;

  font-family:
    "Manrope",
    "Segoe UI",
    Arial,
    sans-serif;

  color:
    var(--cat-text);

  background:
    var(--cat-bg);

  overflow-x:
    hidden;

  overflow-y:
    auto;
}


html {
  background:
    #f7f4f0;
}


body {
  min-height:
    100vh;

  background:
    linear-gradient(
      180deg,
      #fcfbf9 0%,
      #f8f5f1 52%,
      #f4f0eb 100%
    );
}


/* =========================================================
   CANVAS
   ========================================================= */

#gnarus-network {
  position:
    fixed;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  z-index:
    0;

  opacity:
    0.90;

  filter:
    none;

  pointer-events:
    none;
}


/* =========================================================
   LIGHT OVERLAY
   ========================================================= */

body::before {
  content:
    "";

  position:
    fixed;

  inset:
    0;

  z-index:
    1;

  pointer-events:
    none;

  background:
    rgba(
      250,
      248,
      245,
      0.10
    );
}


/* =========================================================
   BACK BUTTON
   ========================================================= */

.back-button {
  position:
    fixed;

  top:
    20px;

  left:
    20px;

  z-index:
    5;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    42px;

  padding:
    10px
    16px;

  color:
    var(--cat-accent-dark);

  background:
    rgba(
      255,
      253,
      250,
      0.88
    );

  border:
    1px solid
    var(--cat-border);

  border-radius:
    11px;

  box-shadow:
    0 10px 24px
      var(--cat-shadow-soft);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  text-decoration:
    none;

  font-size:
    13px;

  font-weight:
    800;

  line-height:
    1.2;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}


.back-button:hover {
  color:
    #7e5238;

  background:
    rgba(
      255,
      253,
      250,
      0.97
    );

  border-color:
    var(--cat-border-strong);

  transform:
    translateY(-1px);

  box-shadow:
    0 13px 28px
      rgba(
        79,
        55,
        42,
        0.10
      );
}


.back-button:focus-visible {
  outline:
    3px solid
    rgba(
      190,
      148,
      112,
      0.30
    );

  outline-offset:
    3px;
}


/* =========================================================
   PAGE WRAPPER
   ========================================================= */

.meditation-page {
  position:
    relative;

  z-index:
    2;

  width:
    100%;

  min-height:
    100vh;

  padding:
    62px
    20px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


/* =========================================================
   MAIN CARD
   ========================================================= */

.meditation-container {
  position:
    relative;

  width:
    560px;

  max-width:
    100%;

  margin:
    0 auto;

  padding:
    42px
    42px
    34px;

  color:
    var(--cat-text);

  background:
    var(--cat-bg-card);

  border:
    1px solid
    var(--cat-border);

  border-radius:
    24px;

  box-shadow:
    0 28px 70px
      var(--cat-shadow),

    0 8px 22px
      var(--cat-shadow-soft);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  text-align:
    center;
}


/* =========================================================
   BRAND
   ========================================================= */

.register-brand {
  width:
    100%;

  margin-bottom:
    24px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;
}


.register-logo-text {
  margin-bottom:
    10px;

  color:
    var(--cat-text);

  font-size:
    29px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.075em;
}


.register-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  max-width:
    100%;

  padding:
    5px
    9px;

  color:
    #765746;

  background:
    rgba(
      248,
      241,
      235,
      0.90
    );

  border:
    1px solid
    rgba(
      190,
      148,
      112,
      0.42
    );

  border-radius:
    3px;

  font-size:
    8px;

  font-weight:
    700;

  line-height:
    1.3;

  letter-spacing:
    0.10em;

  text-align:
    center;
}


/* =========================================================
   TITLE
   ========================================================= */

.med-title {
  margin-bottom:
    10px;

  color:
    var(--cat-text);

  font-size:
    27px;

  font-weight:
    800;

  line-height:
    1.2;
}


/* =========================================================
   SUBTITLE
   ========================================================= */

.med-subtitle {
  max-width:
    440px;

  margin:
    0 auto 27px;

  color:
    var(--cat-text-soft);

  font-size:
    15px;

  line-height:
    1.5;
}


/* =========================================================
   FORM
   ========================================================= */

form {
  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    18px;

  text-align:
    left;
}


/* =========================================================
   FORM FIELD
   ========================================================= */

.form-field {
  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


/* =========================================================
   LABEL
   ========================================================= */

.field-label {
  color:
    var(--cat-text);

  font-size:
    13px;

  font-weight:
    700;

  line-height:
    1.3;
}


/* =========================================================
   TEXT INPUT
   ========================================================= */

input[type="text"] {
  width:
    100%;

  height:
    48px;

  padding:
    0
    16px;

  color:
    var(--cat-text);

  background:
    rgba(
      255,
      255,
      255,
      0.88
    );

  border:
    1px solid
    rgba(
      157,
      119,
      90,
      0.28
    );

  border-radius:
    11px;

  outline:
    none;

  font-family:
    inherit;

  font-size:
    15px;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}


input[type="text"]::placeholder {
  color:
    #a38f83;

  opacity:
    1;
}


input[type="text"]:hover {
  border-color:
    rgba(
      157,
      119,
      90,
      0.45
    );
}


input[type="text"]:focus {
  background:
    #ffffff;

  border-color:
    var(--cat-accent);

  box-shadow:
    0 0 0 4px
    rgba(
      199,
      154,
      114,
      0.13
    );
}


/* =========================================================
   AVATAR UPLOAD
   ========================================================= */

.avatar-upload {
  width:
    100%;

  padding:
    22px;

  color:
    var(--cat-text-soft);

  background:
    rgba(
      250,
      247,
      243,
      0.72
    );

  border:
    1px dashed
    rgba(
      157,
      119,
      90,
      0.42
    );

  border-radius:
    16px;

  text-align:
    left;
}


/* =========================================================
   AVATAR LABEL
   ========================================================= */

.avatar-label {
  display:
    block;

  margin-bottom:
    7px;

  color:
    var(--cat-text);

  font-size:
    14px;

  font-weight:
    800;

  line-height:
    1.35;
}


/* =========================================================
   AVATAR HELP
   ========================================================= */

.avatar-help {
  margin-bottom:
    14px;

  color:
    var(--cat-text-muted);

  font-size:
    12px;

  line-height:
    1.45;
}


/* =========================================================
   FILE INPUT
   ========================================================= */

.avatar-upload input[type="file"] {
  width:
    100%;

  min-height:
    46px;

  padding:
    8px;

  color:
    var(--cat-text-soft);

  background:
    rgba(
      255,
      255,
      255,
      0.88
    );

  border:
    1px solid
    rgba(
      157,
      119,
      90,
      0.28
    );

  border-radius:
    10px;

  font-family:
    inherit;

  font-size:
    13px;

  cursor:
    pointer;
}


.avatar-upload input[type="file"]::file-selector-button {
  margin-right:
    12px;

  padding:
    9px
    13px;

  color:
    #ffffff;

  background:
    var(--cat-accent);

  border:
    1px solid
    var(--cat-accent-hover);

  border-radius:
    8px;

  font-family:
    inherit;

  font-size:
    12px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    background 0.18s ease;
}


.avatar-upload input[type="file"]::file-selector-button:hover {
  background:
    var(--cat-accent-hover);
}


/* =========================================================
   AVATAR PREVIEW
   ========================================================= */

#avatarPreview {
  display:
    block;

  width:
    112px;

  height:
    112px;

  margin:
    20px auto 0;

  object-fit:
    cover;

  border:
    4px solid
    rgba(
      255,
      253,
      250,
      0.96
    );

  border-radius:
    50%;

  box-shadow:
    0 12px 28px
    rgba(
      79,
      55,
      42,
      0.16
    );
}


/* =========================================================
   ERROR
   ========================================================= */

.error-message {
  margin-top:
    12px;

  color:
    var(--cat-danger);

  font-size:
    13px;

  font-weight:
    700;

  line-height:
    1.4;
}


.server-error {
  margin:
    0;

  padding:
    11px
    13px;

  color:
    var(--cat-danger);

  background:
    var(--cat-danger-bg);

  border:
    1px solid
    rgba(
      169,
      67,
      53,
      0.18
    );

  border-radius:
    10px;

  text-align:
    left;
}


/* =========================================================
   PRIMARY BUTTONS
   ========================================================= */

.save-btn,
.continue-button {
  width:
    100%;

  min-height:
    48px;

  padding:
    13px
    20px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #ffffff;

  background:
    var(--cat-accent);

  border:
    1px solid
    var(--cat-accent-hover);

  border-radius:
    11px;

  box-shadow:
    0 12px 26px
    rgba(
      105,
      73,
      51,
      0.17
    );

  font-family:
    inherit;

  font-size:
    15px;

  font-weight:
    800;

  line-height:
    1.2;

  text-decoration:
    none;

  cursor:
    pointer;

  transition:
    background 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}


.save-btn:hover,
.continue-button:hover {
  background:
    var(--cat-accent-hover);

  transform:
    translateY(-1px);

  box-shadow:
    0 15px 30px
    rgba(
      105,
      73,
      51,
      0.22
    );
}


.save-btn:active,
.continue-button:active {
  transform:
    translateY(0);
}


/* =========================================================
   GENERATED KEY SECTION
   ========================================================= */

.download-key {
  margin-top:
    30px;

  padding-top:
    25px;

  border-top:
    1px solid
    rgba(
      153,
      112,
      82,
      0.14
    );

  text-align:
    center;
}


/* =========================================================
   KEY TITLE
   ========================================================= */

.key-section-title {
  margin-bottom:
    8px;

  color:
    var(--cat-text);

  font-size:
    19px;

  font-weight:
    800;

  line-height:
    1.3;
}


/* =========================================================
   KEY INSTRUCTION
   ========================================================= */

.key-instruction {
  margin-bottom:
    14px;

  color:
    var(--cat-text-soft);

  font-size:
    13px;

  line-height:
    1.45;
}


/* =========================================================
   KEY DISPLAY
   ========================================================= */

.key-id-display {
  margin-bottom:
    16px;

  padding:
    14px;

  color:
    var(--cat-text);

  background:
    rgba(
      255,
      255,
      255,
      0.88
    );

  border:
    1px solid
    rgba(
      157,
      119,
      90,
      0.28
    );

  border-radius:
    10px;

  font-family:
    Consolas,
    "Courier New",
    monospace;

  font-size:
    14px;

  font-weight:
    800;

  line-height:
    1.45;

  word-break:
    break-all;

  user-select:
    all;
}


/* =========================================================
   SECONDARY BUTTONS
   ========================================================= */

.copy-button {
  width:
    100%;

  min-height:
    44px;

  margin-top:
    10px;

  padding:
    11px
    16px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--cat-accent-dark);

  background:
    rgba(
      249,
      242,
      236,
      0.92
    );

  border:
    1px solid
    rgba(
      190,
      148,
      112,
      0.42
    );

  border-radius:
    10px;

  box-shadow:
    none;

  font-family:
    inherit;

  font-size:
    13px;

  font-weight:
    800;

  line-height:
    1.2;

  text-align:
    center;

  text-decoration:
    none;

  cursor:
    pointer;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}


.copy-button:hover {
  color:
    #7e5238;

  background:
    #f4e8dd;

  border-color:
    rgba(
      171,
      125,
      88,
      0.56
    );

  transform:
    translateY(-1px);
}


.secondary-button {
  margin-top:
    10px;
}


/* =========================================================
   CONTINUE FORM
   ========================================================= */

.continue-form {
  margin-top:
    14px;
}


/* =========================================================
   KEY WARNING
   ========================================================= */

.key-warning {
  margin-top:
    16px;

  color:
    var(--cat-text-muted);

  font-size:
    11px;

  line-height:
    1.45;
}


/* =========================================================
   FOOTER
   ========================================================= */

.meditation-footer {
  margin-top:
    24px;

  padding-top:
    18px;

  color:
    var(--cat-text-muted);

  border-top:
    1px solid
    rgba(
      153,
      112,
      82,
      0.12
    );

  font-size:
    10px;

  font-weight:
    500;

  line-height:
    1.45;

  letter-spacing:
    0.025em;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (
  min-width: 521px
) and (
  max-width: 900px
) {

  .meditation-page {
    min-height:
      100svh;

    padding:
      74px
      18px
      42px;
  }


  .meditation-container {
    width:
      540px;

    padding:
      38px
      36px
      31px;

    border-radius:
      22px;
  }


  .register-logo-text {
    font-size:
      27px;
  }


  .med-title {
    font-size:
      25px;
  }


  .med-subtitle {
    margin-bottom:
      25px;

    font-size:
      14px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 520px) {

  html,
  body {
    min-height:
      100%;
  }


  body {
    min-height:
      100svh;

    background:
      linear-gradient(
        180deg,
        #fcfbf9 0%,
        #f5f1ec 100%
      );
  }


  #gnarus-network {
    opacity:
      0.82;
  }


  body::before {
    background:
      rgba(
        250,
        248,
        245,
        0.13
      );
  }


  .back-button {
    position:
      relative;

    top:
      auto;

    left:
      auto;

    width:
      calc(100% - 28px);

    max-width:
      420px;

    min-height:
      40px;

    margin:
      16px auto 0;

    padding:
      9px
      14px;

    font-size:
      12px;
  }


  .meditation-page {
    min-height:
      auto;

    padding:
      16px
      14px
      28px;
  }


  .meditation-container {
    width:
      100%;

    max-width:
      420px;

    padding:
      31px
      20px
      27px;

    border-radius:
      20px;

    backdrop-filter:
      blur(10px);

    -webkit-backdrop-filter:
      blur(10px);
  }


  .register-brand {
    margin-bottom:
      20px;
  }


  .register-logo-text {
    margin-bottom:
      9px;

    font-size:
      24px;

    letter-spacing:
      0.065em;
  }


  .register-badge {
    padding:
      5px
      7px;

    font-size:
      7px;

    letter-spacing:
      0.075em;
  }


  .med-title {
    margin-bottom:
      8px;

    font-size:
      23px;
  }


  .med-subtitle {
    margin-bottom:
      22px;

    font-size:
      14px;
  }


  form {
    gap:
      15px;
  }


  .field-label {
    font-size:
      12px;
  }


  input[type="text"] {
    height:
      46px;

    padding:
      0
      14px;

    font-size:
      14px;

    border-radius:
      10px;
  }


  .avatar-upload {
    padding:
      18px
      15px;

    border-radius:
      14px;
  }


  .avatar-label {
    font-size:
      13px;
  }


  .avatar-help {
    font-size:
      11px;
  }


  .avatar-upload input[type="file"] {
    font-size:
      12px;
  }


  #avatarPreview {
    width:
      100px;

    height:
      100px;

    margin-top:
      17px;
  }


  .save-btn,
  .continue-button {
    min-height:
      46px;

    padding:
      12px
      16px;

    font-size:
      14px;

    border-radius:
      10px;
  }


  .download-key {
    margin-top:
      25px;

    padding-top:
      22px;
  }


  .key-section-title {
    font-size:
      18px;
  }


  .key-id-display {
    padding:
      12px;

    font-size:
      13px;
  }


  .copy-button {
    min-height:
      42px;

    font-size:
      12px;
  }


  .meditation-footer {
    margin-top:
      20px;

    padding-top:
      16px;

    font-size:
      9px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

  .back-button {
    width:
      calc(100% - 20px);

    margin-top:
      10px;
  }


  .meditation-page {
    padding:
      12px
      10px
      20px;
  }


  .meditation-container {
    padding:
      26px
      16px
      23px;

    border-radius:
      18px;
  }


  .register-logo-text {
    font-size:
      21px;
  }


  .register-badge {
    font-size:
      6.5px;
  }


  .med-title {
    font-size:
      21px;
  }


  .med-subtitle {
    margin-bottom:
      19px;

    font-size:
      13px;
  }


  input[type="text"] {
    height:
      44px;

    font-size:
      13px;
  }


  .avatar-upload {
    padding:
      16px
      13px;
  }


  .save-btn,
  .continue-button {
    min-height:
      44px;

    font-size:
      13px;
  }

}


/* =========================================================
   LOW DESKTOP / LANDSCAPE
   ========================================================= */

@media (
  max-height: 760px
) and (
  min-width: 769px
) {

  .meditation-page {
    align-items:
      flex-start;

    padding-top:
      34px;

    padding-bottom:
      36px;
  }


  .meditation-container {
    padding:
      30px
      40px
      26px;
  }


  .register-brand {
    margin-bottom:
      18px;
  }


  .register-logo-text {
    font-size:
      25px;

    margin-bottom:
      8px;
  }


  .med-title {
    font-size:
      24px;
  }


  .med-subtitle {
    margin-bottom:
      20px;
  }


  input[type="text"] {
    height:
      44px;
  }


  .avatar-upload {
    padding:
      18px;
  }


  #avatarPreview {
    width:
      96px;

    height:
      96px;
  }


  .save-btn,
  .continue-button {
    min-height:
      44px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  input,
  button,
  a,
  .save-btn,
  .copy-button,
  .continue-button,
  .back-button {
    transition:
      none;
  }

}