:root{
  --color-primary:#202954;
  --color-primary-light:#3d4b6e;
  --color-primary-dark:#1a2245;
  --color-secondary:#64b5f6;
  --color-secondary-light:#90caf9;
  --color-secondary-dark:#42a5f5;
  --color-text:#333;
  --color-text-light:#666;
  --color-text-muted:#777;
  --color-border:#e0e0e0;
  --color-border-light:#f0f0f0;
  --color-background:#fff;
  --color-surface:#f8f9fa;
  --color-surface-dark:#f5f5f5;
  --color-success:#4caf50;
  --color-warning:#ff9800;
  --color-error:#f44336;
  --color-info:#2196f3;
  --space-xs:0.25rem;
  --space-sm:0.5rem;
  --space-md:1rem;
  --space-lg:1.5rem;
  --space-xl:2rem;
  --space-xxl:3rem;
  --container-padding:var(--space-md);
  --section-spacing:var(--space-xxl);
  --font-family-primary:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono:"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  --font-size-xs:0.75rem;
  --font-size-sm:0.875rem;
  --font-size-base:1rem;
  --font-size-lg:1.125rem;
  --font-size-xl:1.25rem;
  --font-size-xxl:1.5rem;
  --font-size-xxxl:2rem;
  --font-weight-light:300;
  --font-weight-normal:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --line-height-tight:1.2;
  --line-height-normal:1.5;
  --line-height-loose:1.7;
  --border-width:1px;
  --border-width-thick:2px;
  --border-style:solid;
  
  --border-radius-sm:4px;
  --border-radius-md:8px;
  --border-radius-lg:12px;
  --border-radius-xl:16px;
  --border-radius-full:9999px;
  --shadow-xs:0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:0 1px 3px rgba(0,0,0,.1);
  --shadow-md:0 4px 6px rgba(0,0,0,.07);
  --shadow-lg:0 10px 15px rgba(0,0,0,.1);
  --shadow-xl:0 20px 25px rgba(0,0,0,.1);
  --transition-fast:150ms ease-out;
  --transition-normal:200ms ease-out;
  --transition-slow:300ms ease-out;
  --breakpoint-xs:480px;
  --breakpoint-sm:640px;
  --breakpoint-md:768px;
  --breakpoint-lg:1024px;
  --breakpoint-xl:1280px;
  --breakpoint-xxl:1536px;
  --z-base:0;
  --z-dropdown:10;
  --z-sticky:20;
  --z-fixed:30;
  --z-modal-backdrop:40;
  --z-modal:50;
  --z-popover:60;
  --z-tooltip:70;
  --z-toast:80;
  --z-max:999;
}

@media (prefers-color-scheme:dark){
  :root{
    --color-text:#e0e0e0;
    --color-text-light:#b0b0b0;
    --color-text-muted:grey;
    --color-border:#404040;
    --color-border-light:#303030;
    --color-background:#121212;
    --color-surface:#1e1e1e;
    --color-surface-dark:#2a2a2a;
  }
}

@media (prefers-reduced-motion:reduce){
  :root{
    --transition-fast:0ms;
    --transition-normal:0ms;
    --transition-slow:0ms;
  }
}

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

*{
  margin:0;
  padding:0;
}

html{
  -moz-text-size-adjust:none;
  -webkit-text-size-adjust:none;
  text-size-adjust:none;
  max-width:100vw;
  overflow-x:hidden;
  scroll-behavior:smooth;
}

ol[role=list],ul[role=list]{
  list-style:none;
}

body{
  background-color:var(--color-background);
  color:var(--color-text);
  font-family:var(--font-family-primary);
  font-size:var(--font-size-base);
  line-height:var(--line-height-normal);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  max-width:100vw;
  overflow-x:hidden;
}

button,h1,h2,h3,h4,input,label{
  line-height:var(--line-height-tight);
}

h1,h2,h3,h4{
  font-weight:var(--font-weight-semibold);
  text-wrap:balance;
}

a:not([class]){
  -webkit-text-decoration-skip:ink;
  color:currentColor;
          text-decoration-skip-ink:auto;
}

img,picture,svg{
  display:block;
  height:auto;
  max-width:100%;
}

textarea:not([rows]){
  min-height:10em;
}

:target{
  scroll-margin-block:5ex;
}

@media (prefers-reduced-motion:reduce){
  *,:after,:before{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

button,input,select,textarea{
  color:inherit;
  font:inherit;
}

button{
  background:none;
  border:none;
}

button,input[type=file]{
  cursor:pointer;
}

:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}

:focus:not(:focus-visible){
  outline:none;
}

.h1,.heading-1{
  font-size:var(--font-size-xxxl);
}

.h1,.h2,.heading-1,.heading-2{
  color:var(--color-text);
  font-weight:var(--font-weight-semibold);
  line-height:var(--line-height-tight);
  margin-bottom:var(--space-md);
}

.h2,.heading-2{
  font-size:var(--font-size-xxl);
}

.h3,.heading-3{
  font-size:var(--font-size-xl);
}

.h3,.h4,.heading-3,.heading-4{
  color:var(--color-text);
  font-weight:var(--font-weight-medium);
  line-height:var(--line-height-tight);
  margin-bottom:var(--space-sm);
}

.h4,.heading-4{
  font-size:var(--font-size-lg);
}

h1{ @apply heading-1; }

h2{ @apply heading-2; }

h3{ @apply heading-3; }

h4{ @apply heading-4; }

.text-lg{
  font-size:var(--font-size-lg);
}

.text-base,.text-lg{
  line-height:var(--line-height-normal);
}

.text-base{
  font-size:var(--font-size-base);
}

.text-sm{
  font-size:var(--font-size-sm);
}

.text-sm,.text-xs{
  line-height:var(--line-height-normal);
}

.text-xs{
  font-size:var(--font-size-xs);
}

.text-primary{
  color:var(--color-primary);
}

.text-secondary{
  color:var(--color-secondary);
}

.text-muted{
  color:var(--color-text-muted);
}

.text-light{
  color:var(--color-text-light);
}

.text-success{
  color:var(--color-success);
}

.text-warning{
  color:var(--color-warning);
}

.text-error{
  color:var(--color-error);
}

.font-light{
  font-weight:var(--font-weight-light);
}

.font-normal{
  font-weight:var(--font-weight-normal);
}

.font-medium{
  font-weight:var(--font-weight-medium);
}

.font-semibold{
  font-weight:var(--font-weight-semibold);
}

.text-left{ text-align:left; }

.text-center{ text-align:center; }

.text-right{ text-align:right; }

.leading-tight{ line-height:var(--line-height-tight); }

.leading-normal{ line-height:var(--line-height-normal); }

.leading-loose{ line-height:var(--line-height-loose); }

p{
  line-height:var(--line-height-normal);
  margin-bottom:var(--space-md);
}

p:last-child{
  margin-bottom:0;
}

ol,ul{
  margin-bottom:var(--space-md);
  padding-left:var(--space-lg);
}

li{
  margin-bottom:var(--space-xs);
}

a{
  color:var(--color-primary);
  text-decoration:none;
  transition:color var(--transition-fast);
}

a:hover{
  color:var(--color-primary-light);
  text-decoration:underline;
}

a:focus-visible{
  border-radius:var(--border-radius-sm);
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}

.truncate{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.text-wrap{
  text-wrap:wrap;
}

.text-nowrap{
  white-space:nowrap;
}

.text-balance{
  text-wrap:balance;
}

.text-pretty{
  text-wrap:pretty;
}

@media (max-width:768px){
  .h1,.heading-1{
    font-size:var(--font-size-xxl);
  }
  
  .h2,.heading-2{
    font-size:var(--font-size-xl);
  }
  
  .h3,.heading-3{
    font-size:var(--font-size-lg);
  }
}

.container{
  box-sizing:border-box;
  margin:0 auto;
  max-width:1280px;
  padding:0 var(--container-padding);
  width:100%;
}

@media (max-width:480px){
  .container{
    max-width:100%;
    overflow-x:hidden;
    padding:0 var(--space-sm);
  }
}

@media (max-width:400px){
  .container{
    padding:0 var(--space-xs);
  }
}

.container-sm{
  max-width:640px;
}

.container-md{
  max-width:768px;
}

.container-lg{
  max-width:1024px;
}

.container-xl{
  max-width:1280px;
}

.flex{
  display:flex;
}

.flex-col{
  flex-direction:column;
}

.flex-row{
  flex-direction:row;
}

.flex-wrap{
  flex-wrap:wrap;
}

.flex-nowrap{
  flex-wrap:nowrap;
}

.items-start{
  align-items:flex-start;
}

.items-center{
  align-items:center;
}

.items-end{
  align-items:flex-end;
}

.justify-start{
  justify-content:flex-start;
}

.justify-center{
  justify-content:center;
}

.justify-end{
  justify-content:flex-end;
}

.justify-between{
  justify-content:space-between;
}

.justify-around{
  justify-content:space-around;
}

.justify-evenly{
  justify-content:space-evenly;
}

.flex-1{
  flex:1 1 0%;
}

.flex-auto{
  flex:1 1 auto;
}

.flex-none{
  flex:none;
}

.grow{
  flex-grow:1;
}

.shrink{
  flex-shrink:1;
}

.shrink-0{
  flex-shrink:0;
}

.grid{
  display:grid;
}

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

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

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

.grid-cols-4{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.grid-cols-auto{
  grid-template-columns:repeat(auto-fit, minmax(0, 1fr));
}

.grid-cols-auto-sm{
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
}

.grid-cols-auto-md{
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}

.grid-cols-auto-lg{
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
}

.col-span-1{
  grid-column:span 1 / span 1;
}

.col-span-2{
  grid-column:span 2 / span 2;
}

.col-span-3{
  grid-column:span 3 / span 3;
}

.col-span-full{
  grid-column:1 /  -1;
}

.row-span-1{
  grid-row:span 1 / span 1;
}

.row-span-2{
  grid-row:span 2 / span 2;
}

.row-span-full{
  grid-row:1 /  -1;
}

.gap-0{
  gap:0;
}

.gap-xs{
  gap:var(--space-xs);
}

.gap-sm{
  gap:var(--space-sm);
}

.gap-md{
  gap:var(--space-md);
}

.gap-lg{
  gap:var(--space-lg);
}

.gap-xl{
  gap:var(--space-xl);
}

.gap-x-xs{
  -moz-column-gap:var(--space-xs);
       column-gap:var(--space-xs);
}

.gap-x-sm{
  -moz-column-gap:var(--space-sm);
       column-gap:var(--space-sm);
}

.gap-x-md{
  -moz-column-gap:var(--space-md);
       column-gap:var(--space-md);
}

.gap-x-lg{
  -moz-column-gap:var(--space-lg);
       column-gap:var(--space-lg);
}

.gap-y-xs{
  row-gap:var(--space-xs);
}

.gap-y-sm{
  row-gap:var(--space-sm);
}

.gap-y-md{
  row-gap:var(--space-md);
}

.gap-y-lg{
  row-gap:var(--space-lg);
}

.style-grid{
  display:grid;
  gap:var(--space-md);
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom:var(--space-xl);
  max-width:100%;
  overflow-x:hidden;
  width:100%;
}

@media (max-width:480px){
  .style-grid{
    gap:var(--space-sm);
    grid-template-columns:1fr;
  }
}

@media (max-width:400px){
  .style-grid{
    gap:var(--space-xs);
  }
}

@media (min-width:768px){
  .style-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (min-width:1024px){
  .style-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

.photo-grid{
  display:grid;
  gap:var(--space-sm);
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  margin-bottom:var(--space-lg);
}

@media (min-width:768px){
  .photo-grid{
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  }
}

.form-grid{
  display:grid;
  gap:var(--space-md);
}

.form-grid-2{
  grid-template-columns:1fr 1fr;
}

@media (max-width:640px){
  .form-grid-2{
    grid-template-columns:1fr;
  }
}

@media (min-width:640px){
  .sm\:grid-cols-1{ grid-template-columns:repeat(1, minmax(0, 1fr)); }
  .sm\:grid-cols-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .sm\:flex-row{ flex-direction:row; }
  .sm\:flex-col{ flex-direction:column; }
}

@media (min-width:768px){
  .md\:grid-cols-1{ grid-template-columns:repeat(1, minmax(0, 1fr)); }
  .md\:grid-cols-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .md\:flex-row{ flex-direction:row; }
  .md\:flex-col{ flex-direction:column; }
}

@media (min-width:1024px){
  .lg\:grid-cols-1{ grid-template-columns:repeat(1, minmax(0, 1fr)); }
  .lg\:grid-cols-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
  .lg\:flex-row{ flex-direction:row; }
  .lg\:flex-col{ flex-direction:column; }
}

.order-footer{
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  background-color:var(--color-background);
  border-top:var(--border-width) var(--border-style) var(--color-border-light);
  bottom:0;
  box-shadow:0 -4px 6px rgba(0,0,0,.05);
  left:0;
  padding:var(--space-sm);
  padding-bottom:max(env(safe-area-inset-bottom), var(--space-sm));
  position:fixed;
  right:0;
  z-index:1050;
}

.order-footer__container{
  align-items:center;
  display:flex;
  gap:var(--space-sm);
  justify-content:space-between;
  margin:0 auto;
  max-width:1280px;
}

.order-footer__back{
  align-items:center;
  border-radius:var(--border-radius-md);
  color:var(--color-text-muted);
  display:flex;
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-medium);
  gap:var(--space-xs);
  min-height:40px;
  padding:var(--space-sm);
  text-decoration:none;
  transition:color var(--transition-normal);
}

.order-footer__back:hover{
  background-color:var(--color-surface);
  color:var(--color-primary);
}

.order-footer__back-icon{
  height:16px;
  width:16px;
}

.order-footer__price{
  align-items:center;
  display:flex;
  flex:1;
  flex-direction:column;
  max-width:300px;
  text-align:center;
}

.order-footer__total{
  color:var(--color-primary);
  font-size:var(--font-size-lg);
  font-weight:var(--font-weight-semibold);
  line-height:var(--line-height-tight);
  margin-bottom:var(--space-xs);
}

.order-footer__description{
  color:var(--color-text-muted);
  font-size:var(--font-size-xs);
  line-height:var(--line-height-tight);
}

.order-footer__tier{
  color:var(--color-text-light);
  font-size:var(--font-size-xs);
  margin-top:2px;
}

.order-footer__continue{
  flex-shrink:0;
  min-width:140px;
}

@media (max-width:768px){
  .order-footer{
    padding:var(--space-sm);
    padding-bottom:max(env(safe-area-inset-bottom), var(--space-sm));
  }
  
  .order-footer__container{
    flex-wrap:wrap;
    gap:var(--space-sm);
  }
  
  .order-footer__back{
    font-size:var(--font-size-xs);
    order:1;
    padding:var(--space-xs) var(--space-sm);
  }
  
  .order-footer__continue{
    flex:1;
    min-width:0;
    order:2;
    width:100%;
  }
  
  .order-footer__price{
    border-top:var(--border-width) var(--border-style) var(--color-border-light);
    margin-top:var(--space-xs);
    max-width:none;
    order:3;
    padding-top:var(--space-xs);
    width:100%;
  }
  
  .order-footer__total{
    font-size:var(--font-size-lg);
  }
}

@media (max-width:480px){
  .order-footer__container{
    flex-direction:column;
    gap:var(--space-xs);
  }
  
  .order-footer__price{
    border-top:none;
    margin-top:0;
    order:1;
    padding-top:0;
  }
  
  .order-footer__continue{
    order:2;
  }
  
  .order-footer__back{
    align-self:center;
    order:3;
  }
}

.order-content{
  min-height:100vh;
  padding-bottom:calc(80px + env(safe-area-inset-bottom));
}

@media (max-width:768px){
  .order-content{
    padding-bottom:calc(120px + env(safe-area-inset-bottom));
  }
}

@media (max-width:480px){
  .order-content{
    padding-bottom:calc(140px + env(safe-area-inset-bottom));
  }
}

.footer-simple{
  background-color:var(--color-surface);
  border-top:var(--border-width) var(--border-style) var(--color-border-light);
  margin-top:var(--space-xxl);
  padding:var(--space-xl) 0;
}

.footer-simple__container{
  margin:0 auto;
  max-width:1280px;
  padding:0 var(--container-padding);
  text-align:center;
}

.footer-simple__content{
  color:var(--color-text-muted);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
}

.footer-simple__links{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-lg);
  justify-content:center;
  margin-top:var(--space-md);
}

.footer-simple__link{
  color:var(--color-text-muted);
  font-size:var(--font-size-sm);
  text-decoration:none;
  transition:color var(--transition-normal);
}

.footer-simple__link:hover{
  color:var(--color-primary);
}

@media (max-width:768px){
  .footer-simple__links{
    gap:var(--space-md);
  }
}

.security-badge{
  align-items:center;
  color:var(--color-text-muted);
  display:flex;
  font-size:var(--font-size-xs);
  gap:var(--space-xs);
  margin-top:var(--space-xs);
}

.security-badge__icon{
  color:var(--color-success);
  height:14px;
  width:14px;
}

.payment-footer{
  background-color:var(--color-surface);
  border-top:var(--border-width) var(--border-style) var(--color-border-light);
  margin-top:var(--space-xl);
  padding:var(--space-lg);
}

.payment-footer__container{
  margin:0 auto;
  max-width:600px;
  text-align:center;
}

.payment-footer__title{
  color:var(--color-text);
  font-size:var(--font-size-lg);
  font-weight:var(--font-weight-semibold);
  margin-bottom:var(--space-md);
}

.payment-footer__total{
  color:var(--color-primary);
  font-size:var(--font-size-xxl);
  font-weight:var(--font-weight-semibold);
  margin-bottom:var(--space-lg);
}

.payment-footer__button{
  margin-bottom:var(--space-md);
  max-width:300px;
  width:100%;
}

.order-footer:focus-within{
  box-shadow:0 -4px 6px rgba(0,0,0,.05),0 0 0 2px rgba(32,41,84,.1);
}

.order-footer--loading{
  opacity:.8;
  pointer-events:none;
}

.order-footer--loading .order-footer__total{
  position:relative;
}

.order-footer--loading .order-footer__total:after{
  animation:spin 1s linear infinite;
  border:2px solid var(--color-primary);
  border-radius:50%;
  border-top:2px solid transparent;
  content:"";
  height:12px;
  margin-top:-6px;
  position:absolute;
  right:-20px;
  top:50%;
  width:12px;
}

@media (prefers-reduced-motion:reduce){
  .footer-simple__link,.order-footer__back{
    transition:none;
  }
  
  @keyframes spin{
    to{
      transform:none;
    }
  }
}

.btn{
  align-items:center;
  -webkit-appearance:none;
  background:transparent;
  border:var(--border-width) var(--border-style) transparent;
  border-radius:var(--border-radius-md);
  cursor:pointer;
  display:inline-flex;
  font-family:var(--font-family-primary);
  font-size:var(--font-size-base);
  font-weight:var(--font-weight-medium);
  gap:var(--space-xs);
  justify-content:center;
  line-height:var(--line-height-tight);
  padding:var(--space-sm) var(--space-md);
  text-decoration:none;
  transition:all var(--transition-normal);
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  white-space:nowrap;
}

.btn:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}

.btn--sm{
  font-size:var(--font-size-sm);
  gap:var(--space-xs);
  padding:var(--space-xs) var(--space-sm);
}

.btn--md{
  font-size:var(--font-size-base);
  padding:var(--space-sm) var(--space-md);
}

.btn--lg{
  font-size:var(--font-size-lg);
  padding:var(--space-md) var(--space-lg);
}

.btn--lg,.btn--xl{
  gap:var(--space-sm);
}

.btn--xl{
  font-size:var(--font-size-xl);
  padding:var(--space-lg) var(--space-xl);
}

.btn--primary{
  background-color:var(--color-primary);
  border-color:var(--color-primary);
  box-shadow:var(--shadow-xs);
  color:#fff;
}

.btn--primary:hover{
  background-color:var(--color-primary-light);
  border-color:var(--color-primary-light);
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
}

.btn--primary:active{
  background-color:var(--color-primary-dark);
  border-color:var(--color-primary-dark);
  box-shadow:var(--shadow-xs);
  transform:translateY(0);
}

.btn--secondary{
  background-color:transparent;
  border-color:var(--color-primary);
  color:var(--color-primary);
}

.btn--secondary:hover{
  background-color:var(--color-primary);
  box-shadow:var(--shadow-sm);
  color:#fff;
  transform:translateY(-1px);
}

.btn--secondary:active{
  background-color:var(--color-primary-dark);
  border-color:var(--color-primary-dark);
  transform:translateY(0);
}

.btn--ghost{
  background-color:transparent;
  border-color:transparent;
  color:var(--color-primary);
}

.btn--ghost:hover{
  background-color:var(--color-surface);
  color:var(--color-primary-dark);
}

.btn--ghost:active{
  background-color:var(--color-surface-dark);
}

.btn--danger{
  background-color:var(--color-error);
  border-color:var(--color-error);
  color:#fff;
}

.btn--danger:hover{
  background-color:#d32f2f;
  border-color:#d32f2f;
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
}

.btn--disabled,.btn:disabled{
  cursor:not-allowed;
  opacity:.6;
  pointer-events:none;
}

.btn--loading{
  opacity:.8;
  pointer-events:none;
  position:relative;
}

.btn--loading .loading-spinner{
  animation:btn-spin 1s linear infinite;
}

.btn--loading span{
  margin-left:var(--space-xs);
}

.btn--success{
  border-color:var(--color-success, #4caf50);
  color:#fff;
}

.btn--success,.btn--success:hover{
  background-color:var(--color-success, #4caf50);
}

.btn--success:hover{
  transform:none;
}

@keyframes btn-spin{
  to{
    transform:rotate(1turn);
  }
}

.btn--loading:before{
  background:inherit;
  border-radius:inherit;
  bottom:0;
  content:"";
  left:0;
  opacity:.1;
  position:absolute;
  right:0;
  top:0;
  z-index:-1;
}

@keyframes loading-dots{
  0%,20%{
    color:currentColor;
  }
  50%{
    color:transparent;
  }
  80%,to{
    color:currentColor;
  }
}

.btn-group{
  border-radius:var(--border-radius-md);
  box-shadow:var(--shadow-sm);
  display:inline-flex;
}

.btn-group .btn{
  border-radius:0;
  border-right-width:0;
}

.btn-group .btn:first-child{
  border-bottom-left-radius:var(--border-radius-md);
  border-top-left-radius:var(--border-radius-md);
}

.btn-group .btn:last-child{
  border-bottom-right-radius:var(--border-radius-md);
  border-right-width:var(--border-width);
  border-top-right-radius:var(--border-radius-md);
}

.btn--upload{
  background-color:var(--color-surface);
  border:var(--border-width) dashed var(--color-border);
  color:var(--color-text);
  flex-direction:column;
  min-height:120px;
  overflow:hidden;
  padding:var(--space-lg);
  position:relative;
}

.btn--upload:hover{
  background-color:var(--color-surface-dark);
  border-color:var(--color-primary);
  color:var(--color-primary);
  transform:none;
}

.btn--upload input[type=file]{
  cursor:pointer;
  height:100%;
  left:0;
  opacity:0;
  position:absolute;
  top:0;
  width:100%;
}

.btn--continue{
  font-weight:var(--font-weight-semibold);
  min-height:48px;
  width:100%;
}

@media (max-width:768px){
  .btn--continue{
    font-size:var(--font-size-lg);
    min-height:52px;
  }
}

.btn__icon{
  align-items:center;
  display:inline-flex;
  flex-shrink:0;
  justify-content:center;
}

.btn__icon--left{
  margin-right:var(--space-xs);
}

.btn__icon--right{
  margin-left:var(--space-xs);
}

.btn--sm .btn__icon{
  height:14px;
  width:14px;
}

.btn--md .btn__icon{
  height:16px;
  width:16px;
}

.btn--lg .btn__icon{
  height:20px;
  width:20px;
}

.btn--xl .btn__icon{
  height:24px;
  width:24px;
}

@media (prefers-reduced-motion:reduce){
  .btn{
    transition:none;
  }
  
  .btn--danger:hover,.btn--primary:hover,.btn--secondary:hover,.btn:hover{
    transform:none;
  }
}

@media (max-width:768px){
  .btn{
    min-height:44px;
    min-width:44px;
  }
}

.card{
  background-color:var(--color-background);
  border:var(--border-width) var(--border-style) var(--color-border-light);
  border-radius:var(--border-radius-lg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
  transition:all var(--transition-normal);
}

.card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}

.card--elevated{
  box-shadow:var(--shadow-sm);
}

.card--elevated:hover{
  box-shadow:var(--shadow-lg);
}

.card--flat{
  background-color:var(--color-surface);
  border:none;
  box-shadow:none;
}

.card--outline{
  background-color:transparent;
  border-color:var(--color-border);
}

.style-card{
  background:var(--color-background);
  border:var(--border-width) var(--border-style) var(--color-border-light);
  border-radius:var(--border-radius-lg);
  cursor:pointer;
  min-height:320px;
  overflow:hidden;
  position:relative;
  transition:all var(--transition-normal);
}

.style-card:hover{
  border-color:var(--color-primary);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}

.style-card--selected{
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px rgba(32,41,84,.1);
}

.style-card__image{
  aspect-ratio:4 / 3;
  background-position:50%;
  background-repeat:no-repeat;
  background-size:cover;
  min-height:180px;
  overflow:hidden;
  position:relative;
}

.style-card:hover .style-card__image{ transform:none; }

.style-card__content{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:var(--space-md);
}

.style-card__title{
  color:var(--color-text);
  font-size:var(--font-size-lg);
  font-weight:var(--font-weight-semibold);
  line-height:var(--line-height-tight);
  margin-bottom:var(--space-xs);
}

.style-card__description{
  color:var(--color-text-light);
  flex:1;
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
  margin-bottom:var(--space-md);
}

.style-card__tags{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-xs);
  margin-bottom:var(--space-md);
}

.style-card__tag{
  align-items:center;
  background-color:var(--color-surface);
  border:var(--border-width) var(--border-style) var(--color-border-light);
  border-radius:var(--border-radius-full);
  color:var(--color-text-muted);
  display:inline-flex;
  font-size:var(--font-size-xs);
  font-weight:var(--font-weight-medium);
  padding:var(--space-xs) var(--space-sm);
}

.style-card__action{
  margin-top:auto;
}

.style-card__count{
  background-color:var(--color-primary);
  border-radius:var(--border-radius-full);
  box-shadow:var(--shadow-sm);
  color:#fff;
  font-size:var(--font-size-xs);
  font-weight:var(--font-weight-semibold);
  padding:var(--space-xs) var(--space-sm);
  position:absolute;
  right:var(--space-sm);
  top:var(--space-sm);
}

.style-card__thumbnails{
  background:var(--color-background);
  border:var(--border-width) var(--border-style) var(--color-border-light);
  border-radius:var(--border-radius-md);
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-xs);
  margin-top:var(--space-sm);
  padding:var(--space-sm);
  position:static;
}

.style-card__thumbnail{
  background:var(--color-background-secondary);
  border:2px solid var(--color-background);
  border-radius:var(--border-radius-sm);
  box-shadow:var(--shadow-sm);
  height:32px;
  overflow:hidden;
  position:relative;
  transition:transform var(--transition-fast);
  width:32px;
}

.style-card__thumbnail:hover{
  transform:scale(1.1);
  z-index:3;
}

.style-card__thumbnail img{
  height:100%;
  -o-object-fit:cover;
     object-fit:cover;
  width:100%;
}

.style-card__thumbnail--more{
  background:rgba(0,0,0,.7);
  font-weight:var(--font-weight-semibold);
}

.style-card__thumbnail--more,.style-card__thumbnail-remove{
  align-items:center;
  color:#fff;
  display:flex;
  font-size:var(--font-size-xs);
  justify-content:center;
}

.style-card__thumbnail-remove{
  background:var(--color-danger);
  border:none;
  border-radius:50%;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  height:18px;
  line-height:1;
  opacity:0;
  position:absolute;
  right:-4px;
  top:-4px;
  transition:opacity var(--transition-fast);
  width:18px;
}

.style-card__thumbnail:hover .style-card__thumbnail-remove{
  opacity:1;
}

.style-card__thumbnail-remove:hover{
  background:var(--color-danger-dark);
  transform:scale(1.1);
}

.photo-card{
  aspect-ratio:1;
  background-color:var(--color-surface);
  border:var(--border-width) var(--border-style) var(--color-border-light);
  border-radius:var(--border-radius-md);
  overflow:hidden;
  position:relative;
}

.photo-card img{
  height:100%;
  -o-object-fit:cover;
     object-fit:cover;
  width:100%;
}

.photo-card__overlay{
  background:linear-gradient(
    180deg,
    transparent 0,
    transparent 60%,
    rgba(0,0,0,.8)
  );
  bottom:0;
  left:0;
  opacity:0;
  position:absolute;
  right:0;
  top:0;
  transition:opacity var(--transition-normal);
}

.photo-card:hover .photo-card__overlay{
  opacity:1;
}

.photo-card__actions{
  bottom:var(--space-sm);
  display:flex;
  gap:var(--space-xs);
  opacity:0;
  position:absolute;
  right:var(--space-sm);
  transition:opacity var(--transition-normal);
}

.photo-card:hover .photo-card__actions{
  opacity:1;
}

.photo-card__remove{
  align-items:center;
  background-color:var(--color-error);
  border:none;
  border-radius:var(--border-radius-full);
  box-shadow:var(--shadow-sm);
  color:#fff;
  cursor:pointer;
  display:flex;
  font-size:var(--font-size-sm);
  height:24px;
  justify-content:center;
  opacity:0;
  position:absolute;
  right:var(--space-xs);
  top:var(--space-xs);
  transition:all var(--transition-normal);
  width:24px;
}

.photo-card:hover .photo-card__remove{
  opacity:1;
}

.photo-card__remove:hover{
  background-color:#d32f2f;
  transform:scale(1.1);
}

.summary-card{
  background-color:var(--color-surface);
  border:var(--border-width) var(--border-style) var(--color-border-light);
  border-radius:var(--border-radius-lg);
  padding:var(--space-lg);
}

.summary-card__header{
  align-items:center;
  display:flex;
  gap:var(--space-sm);
  margin-bottom:var(--space-md);
}

.summary-card__title{
  color:var(--color-text);
  font-size:var(--font-size-lg);
  font-weight:var(--font-weight-semibold);
}

.summary-card__icon{
  color:var(--color-primary);
  height:20px;
  width:20px;
}

.summary-card__content{
  space-y:var(--space-sm);
}

.summary-card__row{
  align-items:center;
  display:flex;
  justify-content:space-between;
  padding:var(--space-sm) 0;
}

.summary-card__row:not(:last-child){
  border-bottom:var(--border-width) var(--border-style) var(--color-border-light);
}

.summary-card__label{
  color:var(--color-text-light);
  font-size:var(--font-size-sm);
}

.summary-card__value{
  color:var(--color-text);
  font-size:var(--font-size-base);
  font-weight:var(--font-weight-medium);
}

.summary-card__total{
  color:var(--color-primary);
  font-size:var(--font-size-lg);
  font-weight:var(--font-weight-semibold);
}

@media (max-width:768px){
  .style-card{
    min-height:280px;
  }
  
  .style-card__image{
    aspect-ratio:4 / 3;
    background-position:50% !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    min-height:140px;
  }
  
  .style-card__content{
    padding:var(--space-sm);
  }
  
  .style-card__title{
    font-size:var(--font-size-base);
  }
  
  .style-card__description{
    font-size:var(--font-size-xs);
  }
  
  .summary-card{
    padding:var(--space-md);
  }
}

.style-card:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .card,.photo-card,.style-card{
    transition:none;
  }
  
  .card:hover,.photo-card:hover,.style-card:hover,.style-card:hover .style-card__image img{
    transform:none;
  }
}

.card--loading{
  overflow:hidden;
  position:relative;
}

.card--loading:after{
  animation:shimmer 1.5s ease-in-out infinite;
  background:linear-gradient(
    90deg,
    transparent,
    hsla(0,0%,100%,.4),
    transparent
  );
  content:"";
  height:100%;
  left:-100%;
  position:absolute;
  top:0;
  width:100%;
}

.form-group{
  margin-bottom:var(--space-md);
}

.form-group:last-child{
  margin-bottom:0;
}

.form-label{
  color:var(--color-text);
  display:block;
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-medium);
  line-height:var(--line-height-tight);
  margin-bottom:var(--space-xs);
}

.form-label--required:after{
  color:var(--color-error);
  content:" *";
}

.form-input,.form-select,.form-textarea{
  -webkit-appearance:none;
  -moz-appearance:none;
       appearance:none;
  background-color:var(--color-background);
  border:var(--border-width) var(--border-style) var(--color-border);
  border-radius:var(--border-radius-md);
  color:var(--color-text);
  font-family:var(--font-family-primary);
  font-size:var(--font-size-base);
  line-height:var(--line-height-normal);
  padding:var(--space-sm) var(--space-md);
  transition:all var(--transition-fast);
  width:100%;
}

.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(32,41,84,.1);
  outline:none;
}

.form-input::-moz-placeholder,.form-textarea::-moz-placeholder{
  color:var(--color-text-muted);
}

.form-input::placeholder,.form-textarea::placeholder{
  color:var(--color-text-muted);
}

.form-input--sm{
  font-size:var(--font-size-sm);
  padding:var(--space-xs) var(--space-sm);
}

.form-input--lg{
  font-size:var(--font-size-lg);
  padding:var(--space-md) var(--space-lg);
}

.form-textarea{
  min-height:80px;
  resize:vertical;
}

.form-textarea--lg{
  min-height:120px;
}

.form-select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-position:right var(--space-sm) center;
  background-repeat:no-repeat;
  background-size:16px 16px;
  padding-right:var(--space-xl);
}

.form-checkbox,.form-radio{
  accent-color:var(--color-primary);
  cursor:pointer;
  height:18px;
  margin-right:var(--space-sm);
  width:18px;
}

.form-check{
  align-items:flex-start;
  display:flex;
  gap:var(--space-sm);
  margin-bottom:var(--space-md);
}

.form-check:last-child{
  margin-bottom:0;
}

.form-check-label{
  color:var(--color-text);
  cursor:pointer;
  flex:1;
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
}

.form-check-label a{
  color:var(--color-primary);
  text-decoration:underline;
}

.form-check-label a:hover{
  color:var(--color-primary-light);
}

.form-input--error,.form-select--error,.form-textarea--error{
  border-color:var(--color-error);
  box-shadow:0 0 0 3px rgba(244,67,54,.1);
}

.form-input--success,.form-select--success,.form-textarea--success{
  border-color:var(--color-success);
  box-shadow:0 0 0 3px rgba(76,175,80,.1);
}

.form-error{
  color:var(--color-error);
}

.form-error,.form-help{
  display:block;
  font-size:var(--font-size-xs);
  line-height:var(--line-height-tight);
  margin-top:var(--space-xs);
}

.form-help{
  color:var(--color-text-muted);
}

.form-success{
  color:var(--color-success);
  display:block;
  font-size:var(--font-size-xs);
  line-height:var(--line-height-tight);
  margin-top:var(--space-xs);
}

.form-floating{
  position:relative;
}

.form-floating .form-input,.form-floating .form-select,.form-floating .form-textarea{
  padding-bottom:var(--space-xs);
  padding-top:var(--space-lg);
}

.form-floating .form-label{
  background-color:transparent;
  border:var(--border-width) solid transparent;
  color:var(--color-text-muted);
  height:100%;
  left:0;
  padding:var(--space-sm) var(--space-md);
  pointer-events:none;
  position:absolute;
  top:0;
  transform-origin:0 0;
  transition:all var(--transition-fast);
}

.form-floating .form-input:not(:-moz-placeholder)~.form-label,.form-floating .form-textarea:not(:-moz-placeholder)~.form-label{
  color:var(--color-primary);
  opacity:.65;
  transform:scale(.85) translateY(-.5rem) translateX(.15rem);
}

.form-floating .form-input:focus~.form-label,.form-floating .form-input:not(:placeholder-shown)~.form-label,.form-floating .form-select:focus~.form-label,.form-floating .form-textarea:focus~.form-label,.form-floating .form-textarea:not(:placeholder-shown)~.form-label{
  color:var(--color-primary);
  opacity:.65;
  transform:scale(.85) translateY(-.5rem) translateX(.15rem);
}

.form-row{
  display:flex;
  gap:var(--space-md);
  margin-bottom:var(--space-md);
}

.form-row .form-group{
  flex:1;
  margin-bottom:0;
}

@media (max-width:640px){
  .form-row{
    flex-direction:column;
    gap:0;
  }
  
  .form-row .form-group{
    margin-bottom:var(--space-md);
  }
  
  .form-row .form-group:last-child{
    margin-bottom:0;
  }
}

.form-file{
  cursor:pointer;
  display:inline-block;
  position:relative;
}

.form-file-input{
  cursor:pointer;
  height:100%;
  left:0;
  opacity:0;
  position:absolute;
  top:0;
  width:100%;
}

.form-file-label{
  align-items:center;
  background-color:var(--color-surface);
  border:var(--border-width) var(--border-style) var(--color-border);
  border-radius:var(--border-radius-md);
  color:var(--color-text);
  cursor:pointer;
  display:inline-flex;
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-medium);
  gap:var(--space-sm);
  padding:var(--space-sm) var(--space-md);
  transition:all var(--transition-normal);
}

.form-file-label:hover{
  background-color:var(--color-surface-dark);
  border-color:var(--color-primary);
}

.form-file-label:before{
  content:"📁";
  font-size:var(--font-size-base);
}

.form-section{
  border-bottom:var(--border-width) var(--border-style) var(--color-border-light);
  margin-bottom:var(--space-xl);
  padding-bottom:var(--space-xl);
}

.form-section:last-child{
  border-bottom:none;
  margin-bottom:0;
  padding-bottom:0;
}

.form-section-title{
  color:var(--color-text);
  font-size:var(--font-size-lg);
  font-weight:var(--font-weight-semibold);
  margin-bottom:var(--space-sm);
}

.form-section-description{
  color:var(--color-text-light);
  font-size:var(--font-size-sm);
  margin-bottom:var(--space-lg);
}

@media (max-width:768px){
  .form-input,.form-select,.form-textarea{
    font-size:16px;
    min-height:44px;
  }
  
  .form-checkbox,.form-radio{
    height:20px;
    margin-right:var(--space-sm);
    width:20px;
  }
}

.form-input:focus-visible,.form-select:focus-visible,.form-textarea:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}

.sr-only{
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute;
  width:1px;
  clip:rect(0, 0, 0, 0);
  border:0;
  white-space:nowrap;
}

.step-indicator{
  margin-bottom:0;
}

.step-indicator__list{
  align-items:center;
  display:flex;
  gap:var(--space-md);
  justify-content:center;
  list-style:none;
  margin-bottom:var(--space-sm);
  padding:0;
}

.step-indicator__item{
  align-items:center;
  display:flex;
  flex:1;
  flex-direction:column;
  max-width:120px;
  position:relative;
}

.step-indicator__button{
  align-items:center;
  background:none;
  border:none;
  border-radius:var(--border-radius-md);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
  min-width:80px;
  padding:var(--space-sm);
  text-align:center;
  transition:all var(--transition-normal);
}

.step-indicator__button:disabled{
  cursor:not-allowed;
  opacity:.5;
}

.step-indicator__number{
  align-items:center;
  background-color:var(--color-surface);
  border:2px solid var(--color-border);
  border-radius:var(--border-radius-full);
  color:var(--color-text-muted);
  display:flex;
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-semibold);
  height:32px;
  justify-content:center;
  position:relative;
  transition:all var(--transition-normal);
  width:32px;
  z-index:2;
}

.step-indicator__label{
  color:var(--color-text-muted);
  font-size:var(--font-size-xs);
  font-weight:var(--font-weight-medium);
  letter-spacing:.025em;
  text-transform:uppercase;
  transition:color var(--transition-normal);
}

.step-indicator__item.is-completed .step-indicator__number{
  background-color:var(--color-primary);
  border-color:var(--color-primary);
  color:#fff;
}

.step-indicator__item.is-completed .step-indicator__label{
  color:var(--color-primary);
}

.step-indicator__item.is-active .step-indicator__number{
  background-color:var(--color-primary);
  border-color:var(--color-primary);
  box-shadow:0 0 0 4px rgba(32,41,84,.1);
  color:#fff;
}

.step-indicator__item.is-active .step-indicator__label{
  color:var(--color-primary);
  font-weight:var(--font-weight-semibold);
}

.step-indicator__item:not(.is-active):not(.is-completed) .step-indicator__button:hover .step-indicator__number{
  background-color:var(--color-background);
  border-color:var(--color-primary);
}

.step-indicator__item:not(.is-active):not(.is-completed) .step-indicator__button:hover .step-indicator__label{
  color:var(--color-primary);
}

.step-indicator__item:not(:last-child):after{
  background-color:var(--color-border-light);
  content:"";
  height:2px;
  left:calc(50% + 20px);
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  transition:background-color var(--transition-normal);
  width:calc(100% - 40px);
  z-index:0;
}

.step-indicator__item.is-completed:after{
  background-color:var(--color-primary);
}

.step-indicator__progress{
  background-color:var(--color-border-light);
  height:4px;
  overflow:hidden;
  width:100%;
}

.step-indicator__fill,.step-indicator__progress{
  border-radius:var(--border-radius-full);
  position:relative;
}

.step-indicator__fill{
  background-color:var(--color-primary);
  height:100%;
  transition:width var(--transition-slow);
}

.step-indicator__fill:after{
  animation:progress-shimmer 1.5s ease-in-out infinite;
  background:linear-gradient(
    90deg,
    transparent,
    hsla(0,0%,100%,.3)
  );
  content:"";
  height:100%;
  position:absolute;
  right:0;
  top:0;
  width:20px;
}

@keyframes progress-shimmer{
  0%,to{
    opacity:0;
  }
  50%{
    opacity:1;
  }
}

@media (max-width:768px){
  .step-indicator__list{
    gap:var(--space-xs);
    margin-bottom:var(--space-md);
  }
  
  .step-indicator__item{
    max-width:60px;
  }
  
  .step-indicator__button{
    min-width:60px;
    padding:var(--space-xs);
  }
  
  .step-indicator__number{
    font-size:var(--font-size-xs);
    height:28px;
    width:28px;
  }
  
  .step-indicator__label{
    font-size:10px;
  }
  @media (max-width:480px){
    .step-indicator__label{
      display:none;
    }
  }
  .step-indicator__item:not(:last-child):after{
    left:calc(50% + 18px);
    width:calc(100% - 36px);
  }
}

.step-indicator--compact{
  margin-bottom:var(--space-lg);
}

.step-indicator--compact .step-indicator__list{
  gap:var(--space-lg);
  justify-content:flex-start;
  margin-bottom:var(--space-sm);
}

.step-indicator--compact .step-indicator__item{
  flex:none;
  max-width:none;
}

.step-indicator--compact .step-indicator__button{
  flex-direction:row;
  min-width:auto;
  padding:var(--space-xs) var(--space-sm);
}

.step-indicator--compact .step-indicator__number{
  font-size:var(--font-size-xs);
  height:20px;
  margin-right:var(--space-xs);
  width:20px;
}

.step-indicator--compact .step-indicator__label{
  font-size:var(--font-size-sm);
  text-transform:none;
}

.step-indicator--compact .step-indicator__item:not(:last-child):after{
  display:none;
}

.progress-vertical{
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
  padding-left:var(--space-lg);
  position:relative;
}

.progress-vertical:before{
  background-color:var(--color-border-light);
  bottom:0;
  content:"";
  left:16px;
  position:absolute;
  top:0;
  width:2px;
}

.progress-vertical__item{
  padding-left:var(--space-xl);
  position:relative;
}

.progress-vertical__item:before{
  background-color:var(--color-background);
  border:2px solid var(--color-border);
  border-radius:var(--border-radius-full);
  content:"";
  height:18px;
  left:-9px;
  position:absolute;
  top:6px;
  width:18px;
}

.progress-vertical__item.is-completed:before{
  background-color:var(--color-primary);
  border-color:var(--color-primary);
}

.progress-vertical__item.is-active:before{
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(32,41,84,.1);
}

@media (prefers-reduced-motion:reduce){
  .step-indicator__fill,.step-indicator__item:after,.step-indicator__label,.step-indicator__number{
    transition:none;
  }
  
  .step-indicator__fill:after{
    animation:none;
    display:none;
  }
  
  @keyframes progress-shimmer{
    to{
      opacity:0;
    }
  }
}

.step-indicator__button:focus-visible{
  border-radius:var(--border-radius-md);
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}

.photo-settings{
    width:100%;
}

.photo-settings-content{
    display:flex;
    flex-direction:column;
    gap:var(--space-xl);
}

.photo-settings-empty{
    align-items:center;
    display:flex;
    justify-content:center;
    min-height:400px;
}

.bulk-settings-card{
    background:var(--color-background-secondary);
    border:var(--border-width) var(--border-style) var(--color-border-light);
    border-radius:var(--border-radius-lg);
    margin-bottom:var(--space-xl);
    padding:var(--space-xl);
}

.bulk-settings-card .settings-card__header{
    margin-bottom:var(--space-lg);
}

.bulk-settings-card .settings-card__title{
    color:var(--color-primary);
    font-size:var(--font-size-lg);
    font-weight:var(--font-weight-semibold);
    margin-bottom:var(--space-xs);
}

.bulk-settings-card .settings-card__description{
    color:var(--color-text-muted);
    font-size:var(--font-size-sm);
}

.style-group-card{
    background:var(--color-background-primary);
    border:var(--border-width) var(--border-style) var(--color-border);
    border-radius:var(--border-radius-lg);
    padding:var(--space-xl);
    transition:var(--transition-base);
}

.style-group-card:hover{
    border-color:var(--color-primary-light);
    box-shadow:var(--shadow-sm);
}

.style-group-card .settings-card__header{
    align-items:center;
    border-bottom:var(--border-width) var(--border-style) var(--color-border-light);
    display:flex;
    justify-content:space-between;
    margin-bottom:var(--space-lg);
    padding-bottom:var(--space-md);
}

.style-group-card .settings-card__title{
    color:var(--color-text-primary);
    font-size:var(--font-size-lg);
    font-weight:var(--font-weight-semibold);
    margin:0;
}

.photo-count-badge{
    background:var(--color-primary-light);
    border-radius:var(--border-radius-full);
    color:var(--color-primary-darker);
    font-size:var(--font-size-sm);
    font-weight:var(--font-weight-medium);
    padding:var(--space-xs) var(--space-sm);
}

.photo-thumbnails{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-sm);
    margin-bottom:var(--space-lg);
}

.photo-thumbnail{
    align-items:center;
    background:var(--color-background-secondary);
    border:var(--border-width) var(--border-style) var(--color-border-light);
    border-radius:var(--border-radius-md);
    display:flex;
    height:60px;
    justify-content:center;
    overflow:hidden;
    width:60px;
}

.photo-thumbnail img{
    height:100%;
    -o-object-fit:cover;
       object-fit:cover;
    transition:var(--transition-base);
    width:100%;
}

.photo-thumbnail:hover img{
    transform:scale(1.05);
}

.photo-thumbnail--more{
    background:var(--color-background-secondary);
    border-style:dashed;
    color:var(--color-text-muted);
    font-size:var(--font-size-sm);
    font-weight:var(--font-weight-medium);
}

.settings-grid{
    align-items:start;
    display:grid;
    gap:var(--space-lg);
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    max-width:100%;
    overflow-x:hidden;
    width:100%;
}

.setting-group{
    display:flex;
    flex-direction:column;
    gap:var(--space-sm);
}

.setting-label{
    font-weight:var(--font-weight-medium);
    margin-bottom:var(--space-xs);
}

.photo-setting-input,.setting-label{
    color:var(--color-text-primary);
    font-size:var(--font-size-sm);
}

.photo-setting-input{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background:var(--color-background-primary);
    background-image:url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23666' d='m0 1 2 2 2-2z'/></svg>");
    background-position:right 12px center;
    background-repeat:no-repeat;
    background-size:12px;
    border:var(--border-width) var(--border-style) var(--color-border);
    border-radius:var(--border-radius-md);
    padding:var(--space-sm) var(--space-md);
    padding-right:36px;
    transition:var(--transition-base);
    width:100%;
}

.photo-setting-input:focus{
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px rgba(32,41,84,.1);
    outline:none;
}

.photo-setting-input:hover{
    border-color:var(--color-border-dark);
}

.setting-actions{
    align-items:flex-end;
    display:flex;
    justify-content:flex-start;
}

.bulk-apply-btn{
    white-space:nowrap;
}

.empty-state{
    max-width:400px;
    text-align:center;
}

.empty-state__icon{
    font-size:3rem;
    margin-bottom:var(--space-md);
    opacity:.6;
}

.empty-state__title{
    color:var(--color-text-primary);
    font-size:var(--font-size-xl);
    font-weight:var(--font-weight-semibold);
    margin-bottom:var(--space-sm);
}

.empty-state__description{
    color:var(--color-text-muted);
    font-size:var(--font-size-base);
    line-height:var(--line-height-relaxed);
    margin-bottom:var(--space-xl);
}

@media (min-width:769px) and (max-width:1024px){
    .settings-grid{
        gap:var(--space-lg);
        grid-template-columns:repeat(2, 1fr);
        max-width:100%;
    }
    
    .bulk-settings-card,.style-group-card{
        padding:var(--space-xl);
    }
    
    .photo-setting-input{
        padding:var(--space-md);
    }
    
    .photo-setting-input,.setting-label{
        font-size:var(--font-size-base);
    }
}

@media (max-width:768px){
    .settings-grid{
        gap:var(--space-md);
        grid-template-columns:1fr;
        max-width:100%;
        width:100%;
    }
    
    .bulk-settings-card,.style-group-card{
        padding:var(--space-lg);
    }
    
    .style-group-card .settings-card__header{
        align-items:flex-start;
        flex-direction:column;
        gap:var(--space-sm);
    }
    
    .photo-thumbnails,.setting-actions{
        justify-content:center;
    }
    
    .bulk-apply-btn,.setting-actions{
        width:100%;
    }
    .photo-setting-input{
        background-size:14px;
        border-radius:var(--border-radius-md);
        font-size:var(--font-size-base);
        min-height:44px;
        padding:var(--space-sm) var(--space-md);
        padding-right:calc(var(--space-md) + 22px);
    }
    
    .setting-label{
        font-size:var(--font-size-base);
        margin-bottom:var(--space-xs);
    }
}

@media (max-width:480px){
    .photo-settings-content{
        max-width:100%;
        overflow-x:hidden;
        width:100%;
    }
    
    .style-group-card{
        box-sizing:border-box;
        margin:0;
        padding:var(--space-md);
    }
    
    .settings-grid,.style-group-card{
        max-width:100%;
        width:100%;
    }
    
    .settings-grid{
        gap:var(--space-sm);
        grid-template-columns:1fr;
    }
    
    .photo-setting-input,.setting-group{
        max-width:100%;
        width:100%;
    }
    
    .photo-setting-input{
        -webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;
        background-color:var(--color-background-primary);
        background-position:right var(--space-md) center;
        background-size:16px;
        border:2px solid var(--color-border);
        border-radius:var(--border-radius-lg);
        box-shadow:0 1px 3px rgba(0,0,0,.1);
        box-sizing:border-box;
        cursor:pointer;
        font-size:var(--font-size-base);
        min-height:48px;
        padding:var(--space-md) var(--space-lg);
        padding-right:calc(var(--space-lg) + 24px);
        transition:all .2s ease;
    }
    
    .photo-setting-input:focus{
        border-color:var(--color-primary);
        box-shadow:0 0 0 4px rgba(32,41,84,.15),0 2px 6px rgba(0,0,0,.15);
        outline:none;
    }
    
    .photo-setting-input:active{
        box-shadow:0 1px 2px rgba(0,0,0,.15);
        transform:translateY(1px);
    }
    
    .setting-label{
        color:var(--color-text-primary);
        font-size:var(--font-size-base);
        font-weight:var(--font-weight-semibold);
        margin-bottom:var(--space-sm);
    }
    
    .photo-thumbnail{
        height:50px;
        width:50px;
    }
    
    .empty-state__title{
        font-size:var(--font-size-lg);
    }
    
    .empty-state__description{
        font-size:var(--font-size-sm);
    }
}

.photo-setting-input:disabled{
    background:var(--color-background-disabled);
    color:var(--color-text-disabled);
    cursor:not-allowed;
}

.setting-group.is-loading .photo-setting-input{
    animation:loading 1.5s infinite;
    background-image:linear-gradient(90deg, transparent, hsla(0,0%,100%,.2), transparent);
    background-repeat:no-repeat;
    background-size:200px 100%;
}

@keyframes loading{
    0%{ background-position:-200px 0; }
    to{ background-position:calc(200px + 100%) 0; }
}

.settings-grid:focus-within .setting-group:not(:focus-within){
    opacity:.7;
    transition:opacity var(--transition-base);
}

.bulk-settings-card.is-active{
    background:rgba(32,41,84,.02);
    border-color:var(--color-primary);
}

.bulk-settings-card.is-active .settings-card__title{
    color:var(--color-primary-dark);
}

.upload-overlay{
    align-items:center;
    -webkit-backdrop-filter:blur(4px);
            backdrop-filter:blur(4px);
    background:rgba(0,0,0,.8);
    bottom:0;
    display:flex;
    justify-content:center;
    left:0;
    opacity:0;
    position:fixed;
    right:0;
    top:0;
    transition:all var(--transition-normal);
    visibility:hidden;
    z-index:9999;
}

.upload-overlay.visible{
    opacity:1;
    visibility:visible;
}

.upload-overlay.hidden{
    opacity:0;
    visibility:hidden;
}

.upload-overlay__content{
    background:var(--color-background-primary);
    border-radius:var(--border-radius-xl);
    box-shadow:var(--shadow-xl);
    max-height:70vh;
    max-width:500px;
    overflow-y:auto;
    padding:var(--space-xl);
    text-align:center;
    transform:translateY(20px);
    transition:transform var(--transition-normal);
    width:90%;
}

.upload-overlay.visible .upload-overlay__content{
    transform:translateY(0);
}

.upload-overlay__icon{
    font-size:3rem;
    margin-bottom:var(--space-md);
    opacity:.8;
}

.upload-overlay__title{
    color:var(--color-text-primary);
    font-size:var(--font-size-xl);
    font-weight:var(--font-weight-semibold);
    margin-bottom:var(--space-sm);
}

.upload-overlay__message{
    color:var(--color-text-muted);
    font-size:var(--font-size-base);
    line-height:var(--line-height-relaxed);
}

.upload-overlay__message,.upload-overlay__progress{
    margin-bottom:var(--space-xl);
}

.progress-bar{
    background:var(--color-background-secondary);
    height:8px;
    margin-bottom:var(--space-md);
    overflow:hidden;
    width:100%;
}

.progress-bar,.progress-bar__fill{
    border-radius:var(--border-radius-full);
}

.progress-bar__fill{
    background:linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    height:100%;
    position:relative;
    transition:width var(--transition-base);
}

.progress-bar__fill:after{
    animation:shimmer 2s infinite;
    background:linear-gradient(90deg, transparent, hsla(0,0%,100%,.3), transparent);
    bottom:0;
    content:"";
    left:0;
    position:absolute;
    right:0;
    top:0;
}

@keyframes shimmer{
    0%{ transform:translateX(-100%); }
    to{ transform:translateX(100%); }
}

.upload-overlay__stats{
    color:var(--color-text-muted);
    font-size:var(--font-size-sm);
    font-weight:var(--font-weight-medium);
}

.upload-overlay__files{
    border-top:var(--border-width) var(--border-style) var(--color-border-light);
    max-height:300px;
    overflow-y:auto;
    padding-top:var(--space-lg);
    text-align:left;
}

.upload-file-item{
    align-items:center;
    border-bottom:var(--border-width) var(--border-style) var(--color-border-light);
    display:flex;
    justify-content:space-between;
    padding:var(--space-sm) 0;
    transition:all var(--transition-base);
}

.upload-file-item:last-child{
    border-bottom:none;
}

.upload-file-item--complete{
    opacity:.7;
}

.upload-file-item__info{
    display:flex;
    flex:1;
    flex-direction:column;
    gap:var(--space-xs);
    min-width:0;
}

.upload-file-item__name{
    color:var(--color-text-primary);
    font-size:var(--font-size-sm);
    font-weight:var(--font-weight-medium);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.upload-file-item__status{
    color:var(--color-text-muted);
    font-size:var(--font-size-xs);
}

.upload-file-item--complete .upload-file-item__status{
    color:var(--color-success);
}

.upload-file-item__progress{
    align-items:center;
    display:flex;
    gap:var(--space-sm);
    margin-left:var(--space-md);
}

.mini-progress-bar{
    background:var(--color-background-secondary);
    border-radius:var(--border-radius-full);
    height:4px;
    overflow:hidden;
    width:60px;
}

.mini-progress-bar__fill{
    background:var(--color-primary);
    border-radius:var(--border-radius-full);
    height:100%;
    transition:width var(--transition-base);
}

.mini-progress-bar__fill.indeterminate{
    animation:indeterminate-progress 1.5s linear infinite;
    background:linear-gradient(90deg, 
        transparent 0, 
        var(--color-primary) 50%, 
        transparent 100%);
    background-size:200% 100%;
}

@keyframes indeterminate-progress{
    0%{
        background-position:-100% 0;
    }
    to{
        background-position:100% 0;
    }
}

.upload-file-item--complete .mini-progress-bar__fill{
    background:var(--color-success);
}

.upload-file-item__percent{
    color:var(--color-text-muted);
    font-size:var(--font-size-xs);
    font-weight:var(--font-weight-medium);
    min-width:35px;
    text-align:right;
}

.upload-file-item--complete .upload-file-item__percent{
    color:var(--color-success);
}

@media (max-width:480px){
    .upload-overlay__content{
        max-height:80vh;
        padding:var(--space-lg);
        width:95%;
    }
    
    .upload-overlay__title{
        font-size:var(--font-size-lg);
    }
    
    .upload-overlay__message{
        font-size:var(--font-size-sm);
    }
    
    .upload-file-item{
        align-items:stretch;
        flex-direction:column;
        gap:var(--space-sm);
    }
    
    .upload-file-item__progress{
        justify-content:space-between;
        margin-left:0;
    }
    
    .mini-progress-bar{
        flex:1;
        margin-right:var(--space-sm);
    }
}

@media (prefers-reduced-motion:reduce){
    .mini-progress-bar__fill,.progress-bar__fill,.upload-overlay,.upload-overlay__content{
        transition:none;
    }
    
    .progress-bar__fill:after{
        animation:none;
    }
}

.upload-overlay__content.is-loading{
    pointer-events:none;
}

.upload-overlay--success .upload-overlay__icon,.upload-overlay--success .upload-overlay__title{
    color:var(--color-success);
}

.upload-overlay--error .upload-overlay__icon,.upload-overlay--error .upload-overlay__title{
    color:var(--color-danger);
}

.upload-overlay--error .progress-bar__fill{
    background:var(--color-danger);
}

.session-restore-modal{
    align-items:center;
    bottom:0;
    display:flex;
    justify-content:center;
    left:0;
    opacity:0;
    position:fixed;
    right:0;
    top:0;
    transition:all var(--transition-normal);
    visibility:hidden;
    z-index:10000;
}

.session-restore-modal.visible{
    opacity:1;
    visibility:visible;
}

.session-restore-modal.hidden{
    opacity:0;
    visibility:hidden;
}

.session-restore-modal__backdrop{
    -webkit-backdrop-filter:blur(4px);
            backdrop-filter:blur(4px);
    background:rgba(0,0,0,.6);
    bottom:0;
    cursor:pointer;
    left:0;
    position:absolute;
    right:0;
    top:0;
}

.session-restore-modal__content{
    background:var(--color-background-primary);
    border-radius:var(--border-radius-xl);
    box-shadow:var(--shadow-xl);
    max-height:90vh;
    max-width:520px;
    overflow-y:auto;
    position:relative;
    transform:translateY(20px) scale(.95);
    transition:transform var(--transition-normal);
    width:90%;
    z-index:1;
}

.session-restore-modal.visible .session-restore-modal__content{
    transform:translateY(0) scale(1);
}

.session-restore-modal__header{
    align-items:center;
    border-bottom:var(--border-width) var(--border-style) var(--color-border-light);
    display:flex;
    gap:var(--space-md);
    padding:var(--space-xl) var(--space-xl) var(--space-lg);
    position:relative;
}

.session-restore-modal__icon{
    color:var(--color-primary);
    flex-shrink:0;
    font-size:2rem;
}

.session-restore-modal__title{
    color:var(--color-text-primary);
    flex:1;
    font-size:var(--font-size-xl);
    font-weight:var(--font-weight-semibold);
    margin:0;
}

.session-restore-modal__close{
    align-items:center;
    background:transparent;
    border:none;
    border-radius:var(--border-radius-md);
    color:var(--color-text-muted);
    cursor:pointer;
    display:flex;
    font-size:var(--font-size-lg);
    height:32px;
    justify-content:center;
    position:absolute;
    right:var(--space-md);
    top:var(--space-md);
    transition:all var(--transition-fast);
    width:32px;
}

.session-restore-modal__close:hover{
    background:var(--color-background-secondary);
    color:var(--color-text-primary);
}

.session-restore-modal__body{
    padding:var(--space-lg) var(--space-xl);
}

.session-restore-modal__message{
    color:var(--color-text-primary);
    font-size:var(--font-size-base);
    line-height:var(--line-height-relaxed);
    margin:0 0 var(--space-lg) 0;
}

.session-restore-modal__details{
    background:var(--color-background-secondary);
    border-radius:var(--border-radius-lg);
    margin-bottom:var(--space-lg);
    padding:var(--space-lg);
}

.session-detail{
    align-items:center;
    border-bottom:var(--border-width) var(--border-style) var(--color-border-light);
    display:flex;
    justify-content:space-between;
    padding:var(--space-sm) 0;
}

.session-detail:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.session-detail__label{
    color:var(--color-text-muted);
    font-size:var(--font-size-sm);
    font-weight:var(--font-weight-medium);
}

.session-detail__value{
    color:var(--color-text-primary);
    font-size:var(--font-size-sm);
    font-weight:var(--font-weight-semibold);
    text-align:right;
}

.session-restore-modal__actions{
    background:var(--color-background-secondary);
    border-top:var(--border-width) var(--border-style) var(--color-border-light);
    display:flex;
    gap:var(--space-md);
    padding:var(--space-lg) var(--space-xl) var(--space-xl);
}

.session-start-fresh-btn{
    flex:1;
}

.session-restore-btn{
    flex:2;
}

@media (max-width:768px){
    .session-restore-modal__content{
        max-height:85vh;
        width:95%;
    }
    
    .session-restore-modal__actions,.session-restore-modal__body,.session-restore-modal__header{
        padding-left:var(--space-lg);
        padding-right:var(--space-lg);
    }
    
    .session-restore-modal__header{
        padding-bottom:var(--space-md);
        padding-top:var(--space-lg);
    }
    
    .session-restore-modal__actions{
        flex-direction:column;
        gap:var(--space-sm);
    }
    
    .session-restore-btn,.session-start-fresh-btn{
        flex:none;
        width:100%;
    }
}

@media (max-width:480px){
    .session-restore-modal__title{
        font-size:var(--font-size-lg);
    }
    
    .session-restore-modal__message{
        font-size:var(--font-size-sm);
    }
    
    .session-detail{
        align-items:flex-start;
        flex-direction:column;
        gap:var(--space-xs);
    }
    
    .session-detail__value{
        font-weight:var(--font-weight-medium);
        text-align:left;
    }
}

.session-restore-modal__content{
    animation-duration:var(--transition-normal);
    animation-fill-mode:both;
}

@keyframes modalSlideIn{
    0%{
        opacity:0;
        transform:translateY(30px) scale(.9);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes modalSlideOut{
    0%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
    to{
        opacity:0;
        transform:translateY(-30px) scale(.9);
    }
}

.session-restore-modal.visible .session-restore-modal__content{
    animation-name:modalSlideIn;
}

.session-restore-modal.hidden .session-restore-modal__content{
    animation-name:modalSlideOut;
}

.session-restore-modal__content:focus-within{
    outline:2px solid var(--color-primary);
    outline-offset:2px;
}

.session-restore-btn:focus,.session-restore-modal__close:focus,.session-start-fresh-btn:focus{
    outline:2px solid var(--color-primary);
    outline-offset:2px;
}

.session-restore-modal--loading .session-restore-modal__actions{
    opacity:.6;
    pointer-events:none;
}

.session-restore-modal--loading .session-restore-modal__icon{
    animation:spin 1s linear infinite;
}

@keyframes spin{
    0%{ transform:rotate(0deg); }
    to{ transform:rotate(1turn); }
}

@media (prefers-reduced-motion:reduce){
    .session-restore-modal,.session-restore-modal__content{
        transition:none;
    }
    
    .session-restore-modal--loading .session-restore-modal__icon,.session-restore-modal__content{
        animation:none;
    }
}

@media (prefers-contrast:high){
    .session-restore-modal__backdrop{
        -webkit-backdrop-filter:none;
                backdrop-filter:none;
        background:rgba(0,0,0,.8);
    }
    
    .session-restore-modal__content{
        border:2px solid var(--color-text-primary);
    }
    
    .session-restore-modal__details{
        border:1px solid var(--color-border);
    }
}

@media (prefers-color-scheme:dark){
    .session-restore-modal__backdrop{
        background:rgba(0,0,0,.8);
    }
}

.mobile-select-modal{
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    background:rgba(0,0,0,.4);
    bottom:0;
    display:none;
    left:0;
    opacity:0;
    position:fixed;
    right:0;
    top:0;
    transition:opacity .3s ease;
    z-index:10000;
}

.mobile-select-modal.visible{
    display:flex;
    opacity:1;
}

.mobile-select-modal__content{
    background:var(--color-background-primary);
    border-radius:var(--border-radius-xl) var(--border-radius-xl) 0 0;
    bottom:0;
    box-shadow:0 -4px 24px rgba(0,0,0,.15);
    display:flex;
    flex-direction:column;
    left:0;
    max-height:50vh;
    min-height:280px;
    position:absolute;
    right:0;
    transform:translateY(100%);
    transition:transform .3s cubic-bezier(.4, 0, .2, 1);
}

.mobile-select-modal.visible .mobile-select-modal__content{
    transform:translateY(0);
}

.mobile-select-modal__header{
    align-items:center;
    border-bottom:1px solid var(--color-border-light);
    display:flex;
    flex-shrink:0;
    justify-content:space-between;
    padding:var(--space-lg) var(--space-xl) var(--space-md);
}

.mobile-select-modal__title{
    color:var(--color-text-primary);
    font-size:var(--font-size-lg);
    font-weight:var(--font-weight-semibold);
    margin:0;
}

.mobile-select-modal__close{
    align-items:center;
    background:none;
    border:none;
    border-radius:var(--border-radius-md);
    color:var(--color-text-muted);
    cursor:pointer;
    display:flex;
    font-size:var(--font-size-xl);
    height:32px;
    justify-content:center;
    padding:var(--space-xs);
    transition:all .2s ease;
    width:32px;
}

.mobile-select-modal__close:active,.mobile-select-modal__close:hover{
    background:var(--color-background-secondary);
    color:var(--color-text-primary);
    transform:scale(.95);
}

.mobile-select-modal__options{
    flex:1;
    overflow-y:auto;
    padding:var(--space-sm) 0 var(--space-lg);
    -webkit-overflow-scrolling:touch;
}

.mobile-select-option{
    align-items:center;
    background:none;
    border:none;
    color:var(--color-text-primary);
    cursor:pointer;
    display:flex;
    font-size:var(--font-size-base);
    min-height:56px;
    padding:var(--space-lg) var(--space-xl);
    position:relative;
    text-align:left;
    transition:background-color .15s ease;
    width:100%;
}

.mobile-select-option:active,.mobile-select-option:hover{
    background:var(--color-background-secondary);
}

.mobile-select-option.selected{
    background:rgba(32,41,84,.05);
    color:var(--color-primary);
    font-weight:var(--font-weight-medium);
}

.mobile-select-option.selected:after{
    color:var(--color-primary);
    content:"✓";
    font-size:var(--font-size-lg);
    font-weight:var(--font-weight-bold);
    position:absolute;
    right:var(--space-xl);
}

.mobile-select-option:active{
    transform:scale(.98);
}

.mobile-select-modal__handle{
    background:var(--color-border-dark);
    border-radius:2px;
    flex-shrink:0;
    height:4px;
    margin:var(--space-md) auto var(--space-sm);
    width:36px;
}

.mobile-select-option:first-child{
    margin-top:0;
}

.mobile-select-option:last-child{
    margin-bottom:0;
}

.mobile-select-modal__options::-webkit-scrollbar{
    display:none;
}

.mobile-select-modal__options{
    -ms-overflow-style:none;
    scrollbar-width:none;
}

@supports (padding:max(0px)){
    .mobile-select-modal__content{
        padding-bottom:max(var(--space-lg), env(safe-area-inset-bottom));
    }
    
    .mobile-select-modal__header,.mobile-select-option{
        padding-left:max(var(--space-xl), env(safe-area-inset-left));
        padding-right:max(var(--space-xl), env(safe-area-inset-right));
    }
}

@keyframes modalSlideUp{
    0%{
        transform:translateY(100%);
    }
    to{
        transform:translateY(0);
    }
}

@keyframes modalSlideDown{
    0%{
        transform:translateY(0);
    }
    to{
        transform:translateY(100%);
    }
}

.mobile-select-modal.opening .mobile-select-modal__content{
    animation:modalSlideUp .3s cubic-bezier(.4, 0, .2, 1);
}

.mobile-select-modal.closing .mobile-select-modal__content{
    animation:modalSlideDown .3s cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme:dark){
    .mobile-select-modal{
        background:rgba(0,0,0,.6);
    }
}

@media (prefers-reduced-motion:reduce){
    .mobile-select-modal,.mobile-select-modal__content,.mobile-select-option{
        animation:none;
        transition:none;
    }
}

@media (max-width:768px){
    .select-wrapper{
        display:block;
        position:relative;
        width:100%;
    }
    
    .select-overlay{
        background:transparent;
        bottom:0;
        cursor:pointer;
        left:0;
        position:absolute;
        right:0;
        top:0;
        z-index:1;
    }
}

@media (min-width:769px){
    .select-wrapper{
        display:contents !important;
        position:static !important;
    }
    .mobile-select-modal,.select-overlay{
        display:none !important;
    }
}

.m-0{ margin:0; }

.m-xs{ margin:var(--space-xs); }

.m-sm{ margin:var(--space-sm); }

.m-md{ margin:var(--space-md); }

.m-lg{ margin:var(--space-lg); }

.m-xl{ margin:var(--space-xl); }

.m-auto{ margin:auto; }

.mt-0{ margin-top:0; }

.mt-xs{ margin-top:var(--space-xs); }

.mt-sm{ margin-top:var(--space-sm); }

.mt-md{ margin-top:var(--space-md); }

.mt-lg{ margin-top:var(--space-lg); }

.mt-xl{ margin-top:var(--space-xl); }

.mb-0{ margin-bottom:0; }

.mb-xs{ margin-bottom:var(--space-xs); }

.mb-sm{ margin-bottom:var(--space-sm); }

.mb-md{ margin-bottom:var(--space-md); }

.mb-lg{ margin-bottom:var(--space-lg); }

.mb-xl{ margin-bottom:var(--space-xl); }

.p-0{ padding:0; }

.p-xs{ padding:var(--space-xs); }

.p-sm{ padding:var(--space-sm); }

.p-md{ padding:var(--space-md); }

.p-lg{ padding:var(--space-lg); }

.p-xl{ padding:var(--space-xl); }

.px-0{ padding-left:0; padding-right:0; }

.px-xs{ padding-left:var(--space-xs); padding-right:var(--space-xs); }

.px-sm{ padding-left:var(--space-sm); padding-right:var(--space-sm); }

.px-md{ padding-left:var(--space-md); padding-right:var(--space-md); }

.px-lg{ padding-left:var(--space-lg); padding-right:var(--space-lg); }

.px-xl{ padding-left:var(--space-xl); padding-right:var(--space-xl); }

.py-0{ padding-bottom:0; padding-top:0; }

.py-xs{ padding-bottom:var(--space-xs); padding-top:var(--space-xs); }

.py-sm{ padding-bottom:var(--space-sm); padding-top:var(--space-sm); }

.py-md{ padding-bottom:var(--space-md); padding-top:var(--space-md); }

.py-lg{ padding-bottom:var(--space-lg); padding-top:var(--space-lg); }

.py-xl{ padding-bottom:var(--space-xl); padding-top:var(--space-xl); }

.block{ display:block; }

.inline-block{ display:inline-block; }

.inline{ display:inline; }

.hidden{ display:none !important; }

.relative{ position:relative; }

.absolute{ position:absolute; }

.fixed{ position:fixed; }

.sticky{ position:-webkit-sticky; position:sticky; }

.w-full{ width:100%; }

.w-auto{ width:auto; }

.h-full{ height:100%; }

.h-auto{ height:auto; }

.min-h-screen{ min-height:100vh; }

.border{ border:var(--border-width) var(--border-style) var(--color-border); }

.border-t{ border-top:var(--border-width) var(--border-style) var(--color-border); }

.border-b{ border-bottom:var(--border-width) var(--border-style) var(--color-border); }

.border-l{ border-left:var(--border-width) var(--border-style) var(--color-border); }

.border-r{ border-right:var(--border-width) var(--border-style) var(--color-border); }

.border-none{ border:none; }

.rounded{ border-radius:var(--border-radius-md); }

.rounded-sm{ border-radius:var(--border-radius-sm); }

.rounded-lg{ border-radius:var(--border-radius-lg); }

.rounded-xl{ border-radius:var(--border-radius-xl); }

.rounded-full{ border-radius:var(--border-radius-full); }

.bg-white{ background-color:var(--color-background); }

.bg-surface{ background-color:var(--color-surface); }

.bg-primary{ background-color:var(--color-primary); }

.bg-secondary{ background-color:var(--color-secondary); }

.shadow-none{ box-shadow:none; }

.shadow-xs{ box-shadow:var(--shadow-xs); }

.shadow-sm{ box-shadow:var(--shadow-sm); }

.shadow-md{ box-shadow:var(--shadow-md); }

.shadow-lg{ box-shadow:var(--shadow-lg); }

.shadow-xl{ box-shadow:var(--shadow-xl); }

.opacity-0{ opacity:0; }

.opacity-25{ opacity:.25; }

.opacity-50{ opacity:.5; }

.opacity-75{ opacity:.75; }

.opacity-100{ opacity:1; }

.z-0{ z-index:0; }

.z-10{ z-index:10; }

.z-20{ z-index:20; }

.z-30{ z-index:30; }

.z-40{ z-index:40; }

.z-50{ z-index:50; }

.cursor-pointer{ cursor:pointer; }

.cursor-not-allowed{ cursor:not-allowed; }

.overflow-hidden{ overflow:hidden; }

.overflow-auto{ overflow:auto; }

.overflow-x-hidden{ overflow-x:hidden; }

.overflow-y-hidden{ overflow-y:hidden; }

.order-page{
  min-height:100vh;
}

.order-header,.order-page{
  background-color:var(--color-background);
}

.order-header{
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:var(--border-width) var(--border-style) var(--color-border-light);
  position:-webkit-sticky;
  position:sticky;
  top:0;
  z-index:1100;
}

.order-header,.order-main{
  padding:var(--space-md) 0;
}

.order-section{
  margin-bottom:var(--space-xxl);
}

.order-title{
  margin-bottom:var(--space-xl);
  text-align:center;
}

.step-content{
  box-sizing:border-box;
  margin:0 auto;
  max-width:900px;
  overflow-x:hidden;
  padding:0 var(--container-padding);
  width:100%;
}

.step-header{
  margin-bottom:var(--space-xl);
  text-align:center;
}

.step-title{
  color:var(--color-text);
  font-size:var(--font-size-xxl);
  font-weight:var(--font-weight-semibold);
  margin-bottom:var(--space-md);
}

.step-description{
  color:var(--color-text-light);
  font-size:var(--font-size-lg);
  margin:0 auto;
  max-width:600px;
}

.upload-area{
  background-color:var(--color-surface);
  border:2px dashed var(--color-border);
  border-radius:var(--border-radius-lg);
  cursor:pointer;
  padding:var(--space-xl);
  text-align:center;
  transition:all var(--transition-normal);
}

.upload-area:hover{
  background-color:var(--color-surface-dark);
  border-color:var(--color-primary);
}

.upload-area--dragover{
  background-color:rgba(32,41,84,.05);
  border-color:var(--color-primary);
}

.processing-overlay{
  align-items:center;
  background-color:rgba(0,0,0,.5);
  bottom:0;
  display:none;
  justify-content:center;
  left:0;
  position:fixed;
  right:0;
  top:0;
  z-index:var(--z-modal);
}

.processing-overlay.active{
  display:flex;
}

.processing-content{
  background-color:var(--color-background);
  border-radius:var(--border-radius-lg);
  box-shadow:var(--shadow-xl);
  max-width:400px;
  padding:var(--space-xl);
  text-align:center;
  width:90%;
}

@media (max-width:768px){
  .order-main{
    padding:var(--space-md) 0;
  }
  
  .order-section{
    margin-bottom:var(--space-xl);
  }
  
  .step-title{
    font-size:var(--font-size-xl);
  }
  
  .step-description{
    font-size:var(--font-size-base);
  }
  
  .upload-area{
    padding:var(--space-lg);
  }
}

@media (max-width:400px){
  .step-content{
    max-width:100%;
    overflow-x:hidden;
    padding:0 var(--space-sm);
    width:100%;
  }
  
  .order-main{
    overflow-x:hidden;
    padding:var(--space-sm) 0;
  }
  
  .order-section{
    margin-bottom:var(--space-lg);
    max-width:100%;
    width:100%;
  }
  
  .step-title{
    font-size:var(--font-size-lg);
  }
  
  .step-description{
    font-size:var(--font-size-sm);
  }
  *{
    box-sizing:border-box;
  }
  *,.btn{
    max-width:100% !important;
  }
  .btn{
    word-break:break-word;
  }
  
  .form-input,.form-select{
    max-width:100% !important;
  }
}

@media print{
  .btn,.order-footer,.step-indicator{
    display:none !important;
  }
  
  .order-content{
    padding-bottom:0;
  }
  
  *{
    background:transparent !important;
    box-shadow:none !important;
    color:#000 !important;
  }
}