/* ============================================================
DESIGN2CLOTHES — Global Stylesheet
Based on design2clothes.pen design system
Stack: Bootstrap 5 + Font Awesome 6 + Custom
============================================================ */
/* ------------------------------------------------------------
1. GOOGLE FONTS
------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* ------------------------------------------------------------
2. DESIGN TOKENS — CSS Custom Properties
------------------------------------------------------------ */
:root {
/* --- Background Colors --- */
--clr-bg-root: #121212; /* page background */
--clr-bg-panel: #1B1B1B; /* main panels / cards */
--clr-bg-panel-alt: #171717; /* center canvas panel */
--clr-bg-subpanel: #242424; /* inner sub-panels (model, garment...) */
--clr-bg-input: #1A1A1A; /* inputs, selects, textareas */
--clr-bg-item: #202020; /* list items / dropdown rows */
--clr-bg-item-alt: #262626; /* inactive tabs */
--clr-bg-edit: #2A2A2A; /* small icon buttons */
--clr-bg-dark-btn: #242424; /* secondary dark buttons */
--clr-bg-viewport: #101010; /* canvas viewport */
/* --- Border / Stroke Colors --- */
--clr-border: #2C2C2C; /* outer panel borders */
--clr-border-input: #363636; /* input/select borders */
--clr-border-btn: #3A3A3A; /* secondary btn borders */
--clr-border-upload: #393939; /* upload zone border */
/* --- Accent Colors --- */
--clr-accent-orange: #FF6A00; /* primary CTA / apply btn */
--clr-accent-purple: #6F2CFF; /* active tabs / generate btn */
/* --- Text Colors --- */
--clr-text-primary: #F2F2F2; /* headings / brand */
--clr-text-secondary: #B8B8B8; /* labels, descriptions */
--clr-text-muted: #8E8E8E; /* placeholder text */
--clr-text-dim: #AFAFAF; /* subtle labels */
--clr-text-soft: #D8D8D8; /* asset names */
--clr-text-tag: #A0A0A0; /* file type badges */
--clr-text-on-dark: #D9D9D9; /* on dark buttons */
--clr-text-on-orange: #121212; /* text on orange buttons */
--clr-text-on-purple: #F7F2FF; /* text on purple buttons */
/* --- Radius --- */
--radius-xs: 8px;
--radius-sm: 10px;
--radius-md: 12px;
--radius-lg: 14px;
--radius-xl: 18px;
--radius-xxl: 22px;
--radius-pill: 9999px;
/* --- Spacing Base --- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
/* --- Typography --- */
--font-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--fs-xs: 11px;
--fs-sm: 12px;
--fs-md: 13px;
--fs-base: 14px;
--fs-lg: 16px;
--fs-xl: 20px;
--fs-2xl: 24px;
--fs-3xl: 30px;
--fs-4xl: 34px;
/* --- Transitions --- */
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--transition-slow: 400ms ease;
}
/* ------------------------------------------------------------
3. RESET & BASE
------------------------------------------------------------ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-base);
font-size: var(--fs-base);
font-weight: 500;
color: var(--clr-text-primary);
background-color: var(--clr-bg-root);
line-height: 1.5;
min-height: 100vh;
}
a {
color: var(--clr-accent-orange);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover { color: #ff8533; }
::selection {
background: rgba(111, 44, 255, 0.35);
color: var(--clr-text-primary);
}
/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--clr-bg-panel); }
::-webkit-scrollbar-thumb { background: #3A3A3A; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }
/* ------------------------------------------------------------
4. LAYOUT — App Shell
------------------------------------------------------------ */
.app-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
padding: var(--sp-6);
gap: var(--sp-5);
}
/* --- Topbar / Header --- */
.app-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
padding: 0 var(--sp-1);
flex-shrink: 0;
}
.app-brand {
font-size: var(--fs-4xl);
font-weight: 700;
color: var(--clr-text-primary);
letter-spacing: -0.5px;
line-height: 1;
}
/* --- Dashboard Row --- */
.dash-row {
display: flex;
gap: var(--sp-4);
height: 180px;
}
/* --- Canvas Shell (3-column) --- */
.canvas-shell {
display: flex;
gap: var(--sp-4);
flex: 1;
}
.canvas-left { width: 290px; flex-shrink: 0; }
.canvas-center { flex: 1; min-width: 0; }
.canvas-right { width: 340px; flex-shrink: 0; }
/* --- Footer --- */
.app-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-3) var(--sp-4);
font-size: var(--fs-xs);
color: var(--clr-text-muted);
border-top: 1px solid var(--clr-border);
flex-shrink: 0;
}
.app-footer a {
color: var(--clr-text-dim);
}
/* ------------------------------------------------------------
5. PANEL / CARD
------------------------------------------------------------ */
.panel {
background: var(--clr-bg-panel);
border: 1px solid var(--clr-border);
border-radius: var(--radius-xl);
padding: var(--sp-4);
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.panel--alt {
background: var(--clr-bg-panel-alt);
}
.panel--dark {
background: var(--clr-bg-root);
border-color: transparent;
}
/* Sub-panel (inner card inside left/right) */
.subpanel {
background: var(--clr-bg-subpanel);
border-radius: var(--radius-md);
padding: var(--sp-3);
display: flex;
flex-direction: column;
gap: 10px;
}
/* Panel title */
.panel-title {
font-size: var(--fs-xl);
font-weight: 600;
color: var(--clr-text-primary);
line-height: 1.2;
}
.panel-title--sm {
font-size: var(--fs-base);
font-weight: 600;
color: #F0F0F0;
}
.panel-label {
font-size: var(--fs-md);
font-weight: 600;
color: var(--clr-text-dim);
}
/* ------------------------------------------------------------
6. TYPOGRAPHY UTILITIES
------------------------------------------------------------ */
.text-primary { color: var(--clr-text-primary) !important; }
.text-secondary { color: var(--clr-text-secondary) !important; }
.text-muted-d { color: var(--clr-text-muted) !important; }
.text-dim { color: var(--clr-text-dim) !important; }
.text-orange { color: var(--clr-accent-orange) !important; }
.text-purple { color: var(--clr-accent-purple) !important; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fs-xs { font-size: var(--fs-xs); }
.fs-sm { font-size: var(--fs-sm); }
.fs-md { font-size: var(--fs-md); }
.fs-base { font-size: var(--fs-base); }
.fs-lg { font-size: var(--fs-lg); }
/* ------------------------------------------------------------
7. BUTTONS
------------------------------------------------------------ */
.btn-d2c {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
font-family: var(--font-base);
font-weight: 700;
border: none;
cursor: pointer;
transition: all var(--transition-base);
white-space: nowrap;
user-select: none;
border-radius: var(--radius-pill);
text-decoration: none;
}
.btn-d2c:focus-visible {
outline: 2px solid var(--clr-accent-purple);
outline-offset: 3px;
}
/* Size variants */
.btn-d2c--sm { height: 34px; padding: 0 14px; font-size: var(--fs-sm); }
.btn-d2c--md { height: 44px; padding: 0 20px; font-size: var(--fs-base); }
.btn-d2c--lg { height: 46px; padding: 0 28px; font-size: var(--fs-lg); }
.btn-d2c--xl { height: 56px; padding: 0 36px; font-size: 18px; }
.btn-d2c--full { width: 100%; }
/* Orange — Primary CTA */
.btn-orange {
background: var(--clr-accent-orange);
color: var(--clr-text-on-orange);
}
.btn-orange:hover {
background: #e85f00;
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(255, 106, 0, 0.35);
}
.btn-orange:active { transform: translateY(0); }
/* Purple — Generate / Active */
.btn-purple {
background: var(--clr-accent-purple);
color: var(--clr-text-on-purple);
}
.btn-purple:hover {
background: #5a20d4;
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(111, 44, 255, 0.35);
}
.btn-purple:active { transform: translateY(0); }
/* Dark — Secondary */
.btn-dark {
background: var(--clr-bg-dark-btn);
color: var(--clr-text-on-dark);
border: 1px solid var(--clr-border-btn);
}
.btn-dark:hover {
background: #2E2E2E;
border-color: #555;
}
/* Ghost / Outline */
.btn-ghost {
background: transparent;
color: var(--clr-text-secondary);
border: 1px solid var(--clr-border-btn);
}
.btn-ghost:hover {
background: var(--clr-bg-subpanel);
color: var(--clr-text-primary);
border-color: #555;
}
/* Danger */
.btn-danger {
background: #C0392B;
color: #fff;
}
.btn-danger:hover {
background: #a93226;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(192, 57, 43, 0.35);
}
/* Success */
.btn-success {
background: #27AE60;
color: #fff;
}
.btn-success:hover {
background: #219952;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(39, 174, 96, 0.3);
}
/* Icon-only button */
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--clr-bg-edit);
border: 1px solid var(--clr-border-btn);
border-radius: var(--radius-pill);
width: 34px;
height: 34px;
color: var(--clr-text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.btn-icon:hover {
background: #363636;
color: var(--clr-text-primary);
}
/* Loading spinner for buttons */
.btn-d2c.is-loading {
pointer-events: none;
opacity: 0.7;
}
.btn-d2c.is-loading::after {
content: '';
width: 16px; height: 16px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.7s linear infinite;
margin-left: var(--sp-2);
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ------------------------------------------------------------
8. TABS
------------------------------------------------------------ */
.tabs-d2c {
display: flex;
gap: var(--sp-2);
height: 36px;
background: var(--clr-bg-item-alt);
border-radius: var(--radius-xl);
padding: 3px;
}
.tab-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-xl);
font-size: var(--fs-sm);
font-weight: 600;
color: #BBBBBB;
background: transparent;
border: none;
cursor: pointer;
transition: all var(--transition-base);
white-space: nowrap;
padding: 0 10px;
}
.tab-item:hover {
color: var(--clr-text-primary);
background: rgba(255,255,255,0.05);
}
.tab-item.active--purple {
background: var(--clr-accent-purple);
color: var(--clr-text-on-purple);
}
.tab-item.active--orange {
background: var(--clr-accent-orange);
color: var(--clr-text-on-orange);
}
/* Tab content panels */
.tab-pane { display: none; }
.tab-pane.active { display: block; }
/* ------------------------------------------------------------
9. FORM CONTROLS
------------------------------------------------------------ */
/* --- Shared Field Base --- */
.field-d2c {
width: 100%;
font-family: var(--font-base);
font-size: var(--fs-xs);
font-weight: 500;
color: var(--clr-text-secondary);
background: var(--clr-bg-input);
border: 1px solid var(--clr-border-input);
border-radius: var(--radius-sm);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
outline: none;
appearance: none;
-webkit-appearance: none;
}
.field-d2c::placeholder {
color: var(--clr-text-muted);
}
.field-d2c:focus {
border-color: var(--clr-accent-purple);
box-shadow: 0 0 0 3px rgba(111, 44, 255, 0.18);
color: var(--clr-text-primary);
}
.field-d2c:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* --- Input --- */
.input-d2c {
height: 44px;
padding: 0 12px;
line-height: 44px;
}
.input-d2c--sm {
height: 34px;
padding: 0 10px;
}
/* Input with icon prefix */
.input-wrap {
position: relative;
display: block;
}
.input-wrap .input-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--clr-text-muted);
pointer-events: none;
font-size: 14px;
}
.input-wrap .field-d2c {
padding-left: 36px;
}
.input-wrap .input-icon-right {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--clr-text-muted);
font-size: 12px;
}
/* --- Textarea --- */
.textarea-d2c {
padding: 12px;
resize: vertical;
min-height: 80px;
line-height: 1.5;
font-size: var(--fs-xs);
}
/* --- Select --- */
.select-d2c {
height: 44px;
padding: 0 32px 0 12px;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23AFAFAF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
.select-d2c option,
.select-d2c optgroup {
background: var(--clr-bg-subpanel);
color: var(--clr-text-secondary);
}
/* --- Form Label --- */
.form-label-d2c {
display: block;
font-size: var(--fs-sm);
font-weight: 600;
color: var(--clr-text-secondary);
margin-bottom: 6px;
}
/* --- Form Group --- */
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
/* --- Form Row (inline) --- */
.form-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
height: 40px;
padding: 0 10px;
background: var(--clr-bg-input);
border-radius: var(--radius-sm);
}
.form-row__label {
font-size: var(--fs-xs);
font-weight: 500;
color: var(--clr-text-secondary);
}
.form-row__value {
font-size: var(--fs-xs);
font-weight: 600;
color: var(--clr-text-soft);
}
/* --- Range Slider --- */
.range-d2c {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
background: var(--clr-border-input);
border-radius: 2px;
outline: none;
cursor: pointer;
}
.range-d2c::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--clr-accent-purple);
cursor: pointer;
box-shadow: 0 0 0 3px rgba(111, 44, 255, 0.2);
transition: box-shadow var(--transition-fast);
}
.range-d2c::-webkit-slider-thumb:hover {
box-shadow: 0 0 0 5px rgba(111, 44, 255, 0.3);
}
.range-d2c::-moz-range-thumb {
width: 16px; height: 16px;
border-radius: 50%;
background: var(--clr-accent-purple);
border: none;
cursor: pointer;
}
/* --- Checkbox --- */
.check-d2c {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: var(--fs-base);
color: var(--clr-text-secondary);
user-select: none;
}
.check-d2c input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 18px; height: 18px;
border: 1px solid var(--clr-border-input);
border-radius: 5px;
background: var(--clr-bg-input);
cursor: pointer;
flex-shrink: 0;
transition: all var(--transition-fast);
position: relative;
}
.check-d2c input[type="checkbox"]:checked {
background: var(--clr-accent-purple);
border-color: var(--clr-accent-purple);
}
.check-d2c input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 5px; top: 2px;
width: 5px; height: 9px;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg);
}
/* --- Radio --- */
.radio-d2c {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: var(--fs-base);
color: var(--clr-text-secondary);
user-select: none;
}
.radio-d2c input[type="radio"] {
-webkit-appearance: none;
appearance: none;
width: 18px; height: 18px;
border: 1px solid var(--clr-border-input);
border-radius: 50%;
background: var(--clr-bg-input);
cursor: pointer;
flex-shrink: 0;
transition: all var(--transition-fast);
position: relative;
}
.radio-d2c input[type="radio"]:checked {
border-color: var(--clr-accent-purple);
}
.radio-d2c input[type="radio"]:checked::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 8px; height: 8px;
border-radius: 50%;
background: var(--clr-accent-purple);
}
/* --- Toggle Switch --- */
.toggle-d2c {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: var(--fs-base);
color: var(--clr-text-secondary);
user-select: none;
}
.toggle-d2c input[type="checkbox"] {
display: none;
}
.toggle-track {
width: 42px; height: 24px;
background: var(--clr-bg-subpanel);
border: 1px solid var(--clr-border-input);
border-radius: 12px;
position: relative;
transition: background var(--transition-base);
flex-shrink: 0;
}
.toggle-track::after {
content: '';
position: absolute;
top: 3px; left: 3px;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--clr-text-muted);
transition: all var(--transition-base);
}
.toggle-d2c input:checked + .toggle-track {
background: var(--clr-accent-purple);
border-color: var(--clr-accent-purple);
}
.toggle-d2c input:checked + .toggle-track::after {
left: 21px;
background: #fff;
}
/* ------------------------------------------------------------
10. FILE UPLOAD / DROP ZONE
------------------------------------------------------------ */
.upload-zone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-2);
min-height: 120px;
background: rgba(71, 71, 71, 0.3);
border: 1px dashed var(--clr-border-upload);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all var(--transition-base);
text-align: center;
padding: var(--sp-4);
}
.upload-zone:hover,
.upload-zone.drag-over {
border-color: var(--clr-accent-purple);
background: rgba(111, 44, 255, 0.07);
}
.upload-zone i {
font-size: 24px;
color: var(--clr-text-muted);
margin-bottom: var(--sp-1);
}
.upload-zone p {
font-size: var(--fs-md);
font-weight: 500;
color: #A6A6A6;
line-height: 1.4;
}
.upload-zone input[type="file"] { display: none; }
/* ------------------------------------------------------------
11. ASSET LIST ITEM
------------------------------------------------------------ */
.asset-list {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.asset-item {
display: flex;
align-items: center;
justify-content: space-between;
height: 54px;
padding: 0 12px;
background: var(--clr-bg-subpanel);
border-radius: var(--radius-sm);
transition: background var(--transition-fast);
cursor: pointer;
}
.asset-item:hover { background: #2E2E2E; }
.asset-item--active {
outline: 1px solid var(--clr-accent-purple);
}
.asset-item__name {
font-size: var(--fs-sm);
font-weight: 500;
color: var(--clr-text-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.asset-item__badge {
font-size: var(--fs-xs);
font-weight: 600;
color: var(--clr-text-tag);
flex-shrink: 0;
margin-left: var(--sp-2);
}
/* ------------------------------------------------------------
12. DROPDOWN (custom)
------------------------------------------------------------ */
.dropdown-d2c {
position: relative;
}
.dropdown-trigger {
display: flex;
align-items: center;
justify-content: space-between;
height: 44px;
padding: 0 12px;
background: var(--clr-bg-input);
border: 1px solid var(--clr-border-input);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: var(--fs-xs);
font-weight: 500;
color: var(--clr-text-secondary);
user-select: none;
transition: border-color var(--transition-fast);
}
.dropdown-trigger:hover { border-color: #555; }
.dropdown-menu-d2c {
position: absolute;
top: calc(100% + 4px);
left: 0; right: 0;
background: var(--clr-bg-input);
border: 1px solid var(--clr-border-input);
border-radius: var(--radius-sm);
overflow: hidden;
z-index: 100;
display: none;
}
.dropdown-d2c.open .dropdown-menu-d2c { display: block; }
.dropdown-option {
display: flex;
align-items: center;
height: 30px;
padding: 0 10px;
font-size: var(--fs-xs);
font-weight: 500;
color: var(--clr-text-secondary);
background: var(--clr-bg-item);
cursor: pointer;
transition: background var(--transition-fast);
}
.dropdown-option:hover { background: var(--clr-bg-subpanel); color: var(--clr-text-primary); }
.dropdown-option.selected { font-weight: 600; color: var(--clr-text-primary); }
/* ------------------------------------------------------------
13. VIEWPORT / CANVAS AREA
------------------------------------------------------------ */
.design-viewport {
background: var(--clr-bg-viewport);
border: 1px solid #2E2E2E;
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: var(--sp-5) 0;
min-height: 400px;
position: relative;
overflow: hidden;
}
.viewport-label {
font-size: var(--fs-md);
font-weight: 500;
color: var(--clr-text-secondary);
position: absolute;
bottom: var(--sp-4);
}
/* ------------------------------------------------------------
14. BADGES / TAGS
------------------------------------------------------------ */
.badge-d2c {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: var(--radius-pill);
font-size: var(--fs-xs);
font-weight: 600;
line-height: 1;
}
.badge-purple { background: rgba(111, 44, 255, 0.2); color: #a880ff; }
.badge-orange { background: rgba(255, 106, 0, 0.2); color: #FF8C35; }
.badge-success { background: rgba(39, 174, 96, 0.2); color: #4fd17c; }
.badge-danger { background: rgba(192, 57, 43, 0.2); color: #e57161; }
.badge-muted { background: var(--clr-bg-subpanel); color: var(--clr-text-dim); }
/* File type badge */
.file-badge {
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: 5px;
letter-spacing: 0.3px;
}
.file-badge--svg { background: rgba(111, 44, 255, 0.15); color: #a880ff; }
.file-badge--png { background: rgba(255, 106, 0, 0.15); color: #FF8C35; }
.file-badge--jpg { background: rgba(39, 174, 96, 0.15); color: #4fd17c; }
/* ------------------------------------------------------------
15. ALERTS / TOAST
------------------------------------------------------------ */
.alert-d2c {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border-radius: var(--radius-md);
font-size: var(--fs-base);
font-weight: 500;
}
.alert-d2c i { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
.alert-info { background: rgba(111, 44, 255, 0.12); color: #c0a0ff; border: 1px solid rgba(111,44,255,0.2); }
.alert-success { background: rgba(39, 174, 96, 0.12); color: #6ee09a; border: 1px solid rgba(39,174,96,0.2); }
.alert-warning { background: rgba(255, 106, 0, 0.12); color: #ffa04d; border: 1px solid rgba(255,106,0,0.2); }
.alert-danger { background: rgba(192, 57, 43, 0.12); color: #e57161; border: 1px solid rgba(192,57,43,0.2); }
/* Toast notification */
.toast-container {
position: fixed;
bottom: 24px; right: 24px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.toast-d2c {
min-width: 260px;
padding: 12px 16px;
background: var(--clr-bg-panel);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
box-shadow: 0 8px 32px rgba(0,0,0,0.6);
display: flex;
align-items: center;
gap: 10px;
font-size: var(--fs-base);
font-weight: 500;
color: var(--clr-text-primary);
animation: slideUp var(--transition-base) ease;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ------------------------------------------------------------
16. MODALS
------------------------------------------------------------ */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.75);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
transition: all var(--transition-base);
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-d2c {
background: var(--clr-bg-panel);
border: 1px solid var(--clr-border);
border-radius: var(--radius-xl);
padding: var(--sp-6);
max-width: 520px;
width: 90%;
transform: translateY(20px) scale(0.97);
transition: transform var(--transition-base);
}
.modal-overlay.active .modal-d2c {
transform: translateY(0) scale(1);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--sp-5);
}
.modal-title {
font-size: var(--fs-xl);
font-weight: 700;
color: var(--clr-text-primary);
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: var(--sp-2);
margin-top: var(--sp-5);
}
/* ------------------------------------------------------------
17. SPINNER / LOADING
------------------------------------------------------------ */
.spinner-d2c {
width: 32px; height: 32px;
border: 3px solid var(--clr-border);
border-top-color: var(--clr-accent-purple);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.spinner-d2c--sm { width: 18px; height: 18px; border-width: 2px; }
.spinner-d2c--lg { width: 48px; height: 48px; border-width: 4px; }
/* Progress bar */
.progress-d2c {
height: 4px;
border-radius: 2px;
background: var(--clr-border);
overflow: hidden;
}
.progress-bar-d2c {
height: 100%;
border-radius: 2px;
background: var(--clr-accent-purple);
transition: width var(--transition-slow);
}
/* ------------------------------------------------------------
18. DIVIDER
------------------------------------------------------------ */
.divider-d2c {
height: 1px;
background: var(--clr-border);
flex-shrink: 0;
}
/* ------------------------------------------------------------
19. UTILITIES
------------------------------------------------------------ */
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.flex-1 { flex: 1; }
.w-full { width: 100%; }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
/* ------------------------------------------------------------
20. RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1200px) {
.canvas-right { width: 280px; }
}
@media (max-width: 992px) {
.canvas-shell { flex-direction: column; }
.canvas-left, .canvas-right { width: 100%; }
.dash-row { height: auto; flex-direction: column; }
}
@media (max-width: 576px) {
.app-wrapper { padding: var(--sp-3); gap: var(--sp-3); }
.app-brand { font-size: 24px; }
}
/* ============================================================
21. APP-SPECIFIC COMPONENTS (index.php)
============================================================ */
/* --- Step Indicator (topbar) --- */
.step-indicator {
display: flex;
align-items: center;
gap: 6px;
}
.step-pip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
background: var(--clr-bg-subpanel);
border: 1px solid var(--clr-border);
color: var(--clr-text-muted);
transition: all var(--transition-base);
cursor: default;
}
.step-pip.active {
background: var(--clr-accent-purple);
border-color: var(--clr-accent-purple);
color: #fff;
}
.step-pip.done {
background: rgba(39, 174, 96, 0.15);
border-color: #27AE60;
color: #4fd17c;
}
.step-sep {
font-size: 9px;
color: var(--clr-border-btn);
}
/* Step badge (mini label inside panels) */
.step-badge {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 2px 7px;
border-radius: 10px;
background: rgba(111, 44, 255, 0.15);
color: #a880ff;
flex-shrink: 0;
}
/* --- Project Info (dash-row) --- */
.project-title {
font-size: 22px;
font-weight: 700;
color: var(--clr-text-primary);
line-height: 1.2;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.project-desc {
font-size: var(--fs-base);
font-weight: 500;
color: var(--clr-text-secondary);
line-height: 1.5;
flex: 1;
}
/* h-100 helper for flex panels */
.h-100 { flex: 1; overflow-y: auto; }
/* --- Empty Hint --- */
.empty-hint {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: var(--sp-5);
color: var(--clr-text-muted);
text-align: center;
font-size: var(--fs-md);
}
.empty-hint i { font-size: 28px; opacity: 0.4; }
/* --- Predefined Model Grid --- */
.predefined-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.predefined-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 10px 6px;
background: var(--clr-bg-input);
border: 1px solid var(--clr-border-input);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition-fast);
font-size: 10px;
font-weight: 600;
color: var(--clr-text-secondary);
text-align: center;
}
.predefined-item i { font-size: 20px; color: var(--clr-text-muted); }
.predefined-item:hover {
border-color: var(--clr-accent-purple);
background: rgba(111, 44, 255, 0.08);
color: var(--clr-text-primary);
}
.predefined-item:hover i { color: var(--clr-accent-purple); }
.predefined-item.selected {
border-color: var(--clr-accent-purple);
background: rgba(111, 44, 255, 0.12);
color: var(--clr-text-on-purple);
}
.predefined-item.selected i { color: var(--clr-accent-purple); }
/* --- Color picker input --- */
.color-input-d2c {
-webkit-appearance: none;
appearance: none;
width: 28px; height: 28px;
border-radius: 50%;
border: 2px solid var(--clr-border-btn);
padding: 0;
cursor: pointer;
background: none;
flex-shrink: 0;
}
.color-input-d2c::-webkit-color-swatch-wrapper { padding: 0; }
.color-input-d2c::-webkit-color-swatch { border: none; border-radius: 50%; }
/* --- Canvas / Viewport --- */
.design-viewport { flex: 1; min-height: 440px; }
.viewport-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
color: var(--clr-text-muted);
text-align: center;
padding: 24px;
}
.viewport-empty > i { font-size: 64px; opacity: 0.08; }
.viewport-empty > p { font-size: var(--fs-base); font-weight: 500; }
.viewport-steps {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
}
.vs-step {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
color: var(--clr-text-muted);
opacity: 0.5;
}
.vs-step.active { opacity: 1; color: var(--clr-text-secondary); }
.vs-step.done { opacity: 1; color: #4fd17c; }
.vs-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--clr-bg-subpanel);
border: 1px solid var(--clr-border);
font-size: 10px;
font-weight: 700;
}
.vs-arrow { font-size: 9px; color: var(--clr-border); }
/* Canvas layers (model + artwork overlay) */
.viewport-content {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.canvas-layers {
position: relative;
display: inline-block;
}
.layer-model {
display: block;
max-height: 420px;
max-width: 100%;
border-radius: var(--radius-md);
}
.layer-artwork {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
max-width: 60%;
pointer-events: none;
}
/* Loading overlay */
.viewport-loading {
position: absolute;
inset: 0;
background: rgba(16,16,16,0.85);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
border-radius: var(--radius-lg);
backdrop-filter: blur(4px);
}
.viewport-loading p {
font-size: var(--fs-base);
font-weight: 600;
color: var(--clr-text-secondary);
}
/* Apply prompt wrap */
.apply-prompt-wrap { flex-shrink: 0; }
/* --- Export Panel (right) --- */
.export-thumb {
height: 140px;
background: var(--clr-bg-viewport);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--clr-text-muted);
font-size: 12px;
overflow: hidden;
flex-shrink: 0;
}
.export-thumb i { font-size: 36px; opacity: 0.15; }
.export-thumb img { width: 100%; height: 100%; object-fit: cover; }
.export-meta {
display: flex;
flex-direction: column;
gap: 4px;
}
.export-meta-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
padding: 4px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
color: var(--clr-text-secondary);
}
.export-meta-row span:first-child { color: var(--clr-text-muted); }
.export-meta-row i { margin-right: 5px; width: 12px; }
/* Resolution radio list */
.resolution-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.res-option {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--transition-fast);
font-size: 12px;
font-weight: 600;
color: var(--clr-text-secondary);
}
.res-option:hover { background: var(--clr-bg-subpanel); }
.res-option input[type="radio"] { accent-color: var(--clr-accent-orange); }
.res-option small { font-weight: 400; color: var(--clr-text-muted); margin-left: 4px; }
.format-row {
display: flex;
gap: 4px;
}
.format-row .res-option { flex: 1; justify-content: center; padding: 6px; }
/* Export status */
.export-status {
font-size: 12px;
font-weight: 500;
color: var(--clr-text-secondary);
text-align: center;
padding: 6px;
}
/* --- API / Status indicator (footer) --- */
.api-status {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
}
.api-status--idle i { color: var(--clr-text-muted); }
.api-status--working i { color: var(--clr-accent-orange); animation: pulse 1s ease infinite; }
.api-status--done i { color: #4fd17c; }
.api-status--error i { color: #e57161; }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
