.breadcrumb-trail-generator{min-height:auto;padding:2rem}.breadcrumb-trail-generator__container{max-width:var(--tool-container-max-width, 1600px);margin:0 auto}.breadcrumb-trail-generator__header{text-align:center;margin-bottom:2rem}.breadcrumb-trail-generator__header h1{font-size:2.5rem;font-weight:700;margin-bottom:.5rem;color:var(--gray-800)}.breadcrumb-trail-generator__header p{color:var(--gray-500);font-size:1.1rem}.breadcrumb-trail-generator__content{display:grid;grid-template-columns:1fr 350px;gap:var(--tool-content-gap, 2rem);margin-bottom:2rem}.breadcrumb-trail-generator__preview-section h3,.breadcrumb-trail-generator__controls h3,.breadcrumb-trail-generator__output h3{font-size:1.25rem;font-weight:600;margin-bottom:1rem;color:var(--gray-800)}.breadcrumb-trail-generator__preview{background:var(--gray-50);border:2px solid #d1d5db;border-radius:12px;padding:2rem;min-height:120px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px #0000001a}.preview-breadcrumb{width:100%}.items-editor{background:var(--white);border-radius:12px;padding:1.5rem;margin-top:1rem;box-shadow:0 1px 3px #0000001a}.items-editor h4{font-size:1rem;font-weight:600;margin-bottom:1rem;color:var(--gray-800)}.item-row{display:flex;gap:.5rem;margin-bottom:.75rem;align-items:center}.item-input{flex:1;padding:.5rem .75rem;border:1px solid var(--gray-300);border-radius:6px;font-size:.875rem}.item-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6366f11a}.current-button{padding:.5rem .75rem;background:var(--gray-100);border:1px solid var(--gray-200);border-radius:6px;font-size:.75rem;cursor:pointer;transition:all .2s}.current-button:hover{background:var(--gray-200)}.current-button.active{background:var(--primary);border-color:var(--primary);color:var(--white)}.remove-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#fee2e2;border:none;border-radius:6px;color:#dc2626;font-size:1.25rem;cursor:pointer;transition:all .2s}.remove-button:hover{background:#fecaca}.add-item-button{width:100%;padding:.625rem;background:var(--gray-100);border:1px dashed var(--gray-300);border-radius:6px;font-size:.875rem;color:var(--gray-500);cursor:pointer;transition:all .2s}.add-item-button:hover{background:var(--gray-200);border-color:var(--gray-400);color:var(--gray-700)}.breadcrumb-trail-generator__controls{background:var(--white);border-radius:12px;padding:1.5rem;box-shadow:0 1px 3px #0000001a;max-height:none;overflow-y:auto}.control-group{margin-bottom:1.25rem}.control-group:last-child{margin-bottom:0}.control-group>label{display:block;font-size:.875rem;font-weight:500;color:var(--gray-700);margin-bottom:.5rem}.control-group input[type=text],.control-group select{width:100%;padding:.625rem .875rem;border:1px solid var(--gray-300);border-radius:6px;font-size:.875rem;transition:border-color .2s,box-shadow .2s}.control-group input[type=text]:focus,.control-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6366f11a}.control-group input[type=range]{width:100%;height:6px;border-radius:3px;background:var(--gray-200);outline:none;-webkit-appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--primary);cursor:pointer}.preset-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.preset-button{padding:.375rem .75rem;background:var(--gray-100);border:1px solid var(--gray-200);border-radius:6px;font-size:.75rem;cursor:pointer;transition:all .2s}.preset-button:hover{background:var(--gray-200);border-color:var(--gray-300)}.checkbox-label{display:flex;align-items:center;gap:.5rem;font-size:1rem;color:var(--gray-900);cursor:pointer}.checkbox-label input[type=checkbox]{width:16px;height:16px;border-radius:4px;accent-color:var(--gray-900)}.color-inputs{display:flex;flex-wrap:wrap;gap:.75rem}.color-input{display:flex;flex-direction:column;align-items:center;gap:.25rem}.color-input label{font-size:1rem;color:var(--gray-900);font-weight:600;margin-bottom:.5rem;line-height:1.5;letter-spacing:.3px}.color-input input[type=color]{width:40px;height:32px;border:1px solid var(--gray-300);border-radius:6px;cursor:pointer;padding:2px}.breadcrumb-trail-generator__output{background:var(--white);border-radius:12px;padding:1.5rem;box-shadow:0 1px 3px #0000001a}.output-section{margin-bottom:1.5rem}.output-section:last-child{margin-bottom:0}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.output-header span{font-size:.875rem;font-weight:500;color:var(--gray-700)}.copy-button{padding:.375rem .75rem;background:var(--primary);color:var(--white);border:none;border-radius:6px;font-size:.75rem;cursor:pointer;transition:background .2s}.copy-button:hover{background:var(--primary)}.copy-button.copied{background:var(--success)}.code-block{background:var(--gray-800);color:var(--gray-200);padding:1rem;border-radius:8px;font-size:.8rem;overflow-x:auto;white-space:pre-wrap;word-break:break-word;max-height:300px;overflow-y:auto}.control-panel{background-color:#1f2937f2!important;border:2px solid var(--gray-400)!important;border-radius:6px}[data-theme=dark] .control-section{background-color:#1f2937e6!important;border-color:var(--gray-400)!important;border-width:2px}[data-theme=dark] .control-group input,[data-theme=dark] .control-group select,[data-theme=dark] .control-group textarea{background-color:#0f172acc!important;border:2px solid var(--gray-500)!important;color:var(--text-primary)}[data-theme=dark] .control-group label{display:block;color:var(--gray-900);font-size:1rem;margin-bottom:.5rem;font-weight:600;line-height:1.5;letter-spacing:.3px}@media (max-width: 1023px){.breadcrumb-trail-generator__content{grid-template-columns:1fr}.breadcrumb-trail-generator__controls{max-height:none}}@media (max-width: 640px){.breadcrumb-trail-generator{padding:1rem}.breadcrumb-trail-generator__header h1{font-size:1.75rem}.breadcrumb-trail-generator__preview{padding:0;border:2px solid #d1d5db;padding:1rem;background:#f9fafb;box-shadow:0 1px 3px #0000001a}.item-row{flex-wrap:wrap}.item-input{min-width:100px}}