/* Base styles */
        html {
          font-size: var(--font-size-base);
          font-family: var(--font-family-base);
          line-height: var(--line-height-normal);
          color: var(--color-text);
          background-color: var(--color-background);
          -webkit-font-smoothing: antialiased;
          box-sizing: border-box;
        }
        
        body {
          margin: 0;
          padding: 0;
        }
        
        *,
        *::before,
        *::after {
          box-sizing: inherit;
        }
        
        /* Typography */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          margin: 0;
          font-weight: var(--font-weight-semibold);
          line-height: var(--line-height-tight);
          color: var(--color-text);
          letter-spacing: var(--letter-spacing-tight);
        }
        
        h1 {
          font-size: var(--font-size-4xl);
        }
        h2 {
          font-size: var(--font-size-3xl);
        }
        h3 {
          font-size: var(--font-size-2xl);
        }
        h4 {
          font-size: var(--font-size-xl);
        }
        h5 {
          font-size: var(--font-size-lg);
        }
        h6 {
          font-size: var(--font-size-md);
        }
        
        p {
          margin: 0 0 var(--space-16) 0;
        }
        
        a {
          color: var(--color-primary);
          text-decoration: none;
          transition: color var(--duration-fast) var(--ease-standard);
        }
        
        a:hover {
          color: var(--color-primary-hover);
        }
        
        /* Buttons */
        .btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: var(--space-8) var(--space-16);
          border-radius: var(--radius-base);
          font-size: var(--font-size-base);
          font-weight: 500;
          line-height: 1.5;
          cursor: pointer;
          transition: all var(--duration-normal) var(--ease-standard);
          border: none;
          text-decoration: none;
          position: relative;
        }
        
        .btn:focus-visible {
          outline: none;
          box-shadow: var(--focus-ring);
        }
        
        .btn--primary {
          background: var(--color-primary);
          color: var(--color-btn-primary-text);
        }
        
        .btn--primary:hover {
          background: var(--color-primary-hover);
        }
        
        .btn--primary:active {
          background: var(--color-primary-active);
        }
        
        .btn--secondary {
          background: var(--color-secondary);
          color: var(--color-text);
        }
        
        .btn--secondary:hover {
          background: var(--color-secondary-hover);
        }
        
        .btn--secondary:active {
          background: var(--color-secondary-active);
        }
        
        .btn--outline {
          background: transparent;
          border: 1px solid var(--color-border);
          color: var(--color-text);
        }
        
        .btn--outline:hover {
          background: var(--color-secondary);
        }
        
        .btn--sm {
          padding: var(--space-4) var(--space-12);
          font-size: var(--font-size-sm);
          border-radius: var(--radius-sm);
        }
        
        .btn--lg {
          padding: var(--space-10) var(--space-20);
          font-size: var(--font-size-lg);
          border-radius: var(--radius-md);
        }
        
        .btn--full-width {
          width: 100%;
        }
        
        .btn:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
        
        /* Form elements */
        .form-control {
          display: block;
          width: 100%;
          padding: var(--space-8) var(--space-12);
          font-size: var(--font-size-md);
          line-height: 1.5;
          color: var(--color-text);
          background-color: var(--color-surface);
          border: 1px solid var(--color-border);
          border-radius: var(--radius-base);
          transition: border-color var(--duration-fast) var(--ease-standard),
            box-shadow var(--duration-fast) var(--ease-standard);
        }
        
        textarea.form-control {
          font-family: var(--font-family-base);
          font-size: var(--font-size-base);
        }
        
        select.form-control {
          padding: var(--space-8) var(--space-12);
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          background-image: var(--select-caret-light);
          background-repeat: no-repeat;
          background-position: right var(--space-12) center;
          background-size: 16px;
          padding-right: var(--space-32);
        }
        
        .form-control:focus {
          border-color: var(--color-primary);
          outline: var(--focus-outline);
        }
        
        .form-label {
          display: block;
          margin-bottom: var(--space-8);
          font-weight: var(--font-weight-medium);
          font-size: var(--font-size-sm);
        }
        
        .form-group {
          margin-bottom: var(--space-16);
        }
        
        /* Card component */
        .card {
          background-color: var(--color-surface);
          border-radius: var(--radius-lg);
          border: 1px solid var(--color-card-border);
          box-shadow: var(--shadow-sm);
          overflow: hidden;
          transition: box-shadow var(--duration-normal) var(--ease-standard);
        }
        
        .card:hover {
          box-shadow: var(--shadow-md);
        }
        
        .card__body {
          padding: var(--space-16);
        }
        
        .card__header,
        .card__footer {
          padding: var(--space-16);
          border-bottom: 1px solid var(--color-card-border-inner);
        }
        
        /* Container: uses shared.css .container (960px) */
        
        /* Utility classes */
        .flex {
          display: flex;
        }
        .flex-col {
          flex-direction: column;
        }
        .items-center {
          align-items: center;
        }
        .justify-center {
          justify-content: center;
        }
        .justify-between {
          justify-content: space-between;
        }
        .gap-4 {
          gap: var(--space-4);
        }
        .gap-8 {
          gap: var(--space-8);
        }
        .gap-16 {
          gap: var(--space-16);
        }
        
        .m-0 {
          margin: 0;
        }
        .mt-8 {
          margin-top: var(--space-8);
        }
        .mb-8 {
          margin-bottom: var(--space-8);
        }
        .mx-8 {
          margin-left: var(--space-8);
          margin-right: var(--space-8);
        }
        .my-8 {
          margin-top: var(--space-8);
          margin-bottom: var(--space-8);
        }
        
        .p-0 {
          padding: 0;
        }
        .py-8 {
          padding-top: var(--space-8);
          padding-bottom: var(--space-8);
        }
        .px-8 {
          padding-left: var(--space-8);
          padding-right: var(--space-8);
        }
        .py-16 {
          padding-top: var(--space-16);
          padding-bottom: var(--space-16);
        }
        .px-16 {
          padding-left: var(--space-16);
          padding-right: var(--space-16);
        }
        
        .block {
          display: block;
        }
        .hidden {
          display: none;
        }

        /* Custom styles for this app */
        .page {
            display: none;
        }

        .page.active {
            display: block;
        }

        .welcome-hero {
            text-align: center;
            padding: 60px 0;
            background: var(--color-bg-1);
            border-radius: var(--radius-lg);
            margin-bottom: var(--space-32);
        }

        .asset-type-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--space-16);
            margin: var(--space-24) 0;
        }

        .asset-type-card {
            background: var(--color-surface);
            border: 2px solid var(--color-card-border);
            border-radius: var(--radius-lg);
            padding: var(--space-20);
            cursor: pointer;
            transition: all var(--duration-normal) var(--ease-standard);
        }

        .asset-type-card:hover {
            border-color: var(--color-primary);
            box-shadow: var(--shadow-lg);
        }

        .asset-type-card h3 {
            color: var(--color-primary);
            margin-bottom: var(--space-8);
        }

        .asset-type-card p {
            color: var(--color-text-secondary);
            margin: 0;
        }

        /* breadcrumb: uses shared.css styles */

        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--space-16);
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: var(--space-12);
            margin-top: var(--space-24);
            padding-top: var(--space-16);
            border-top: 1px solid var(--color-border);
        }

        .asset-list {
            margin-top: var(--space-24);
        }

        .asset-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-16);
            border: 1px solid var(--color-card-border);
            border-radius: var(--radius-base);
            margin-bottom: var(--space-8);
            background: var(--color-surface);
        }

        .asset-info {
            flex: 1;
        }

        .asset-actions {
            display: flex;
            gap: var(--space-8);
        }

        .summary-card {
            background: var(--color-bg-3);
            padding: var(--space-20);
            border-radius: var(--radius-lg);
            margin-bottom: var(--space-24);
        }

        .error-text {
            color: var(--color-error);
            font-size: var(--font-size-sm);
            margin-top: var(--space-4);
        }

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

        .spinner {
            border: 3px solid var(--color-secondary);
            border-top: 3px solid var(--color-primary);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .loading-content {
            background: var(--color-surface);
            padding: var(--space-32);
            border-radius: var(--radius-lg);
            text-align: center;
        }

        /* Footer responsive - email button */
        @media (max-width: 768px) {
            .feedback-btn {
                font-size: 13px !important;
                padding: 10px 16px !important;
                word-break: break-all;
                max-width: 100%;
            }
        }

        /* Breadcrumb navigation */
        .breadcrumb {
            margin-bottom: var(--space-24);
            padding: var(--space-12) 0;
        }

        .breadcrumb a {
            color: var(--color-primary);
            text-decoration: none;
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            display: inline-flex;
            align-items: center;
            transition: all var(--duration-fast) var(--ease-standard);
        }

        .breadcrumb a:hover {
            color: var(--color-primary-hover);
            transform: translateX(-2px);
        }