/* YARNMATES_UI_REFRESH_V2 */
body.ym-ui {
    --cream:#f7f4ef; --paper:#fffefa; --pink:#ba557b;
    --soft-pink:#f6e5ed; --purple:#643247; --deep-purple:#482236;
    --lavender:#f1e8ed; --gold:#b18643; --green:#527261;
    --ink:#302b2c; --muted:#70676b; --border:#e5ddd7;
    --shadow:0 8px 24px rgba(53,36,43,.045);
    background:var(--cream); color:var(--ink);
    font-size:15px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
}
body.ym-ui *,body.ym-ui *::before,body.ym-ui *::after {
    box-sizing:border-box;
}
body.ym-ui h1,body.ym-ui h2,body.ym-ui h3 {
    text-wrap:balance; letter-spacing:-.035em;
}
body.ym-ui h1 { font-size:clamp(30px,3.2vw,46px); line-height:1.12; }
body.ym-ui h2 { line-height:1.2; }
body.ym-ui p { text-wrap:pretty; }
body.ym-ui a { text-underline-offset:4px; }
body.ym-ui :is(button,input,select,textarea) { font:inherit; }
body.ym-ui :is(a,button,input,select,textarea):focus-visible {
    outline:3px solid #b66887; outline-offset:4px;
}
body.ym-ui button:disabled { opacity:.55; cursor:wait; }
body.ym-ui [hidden] { display:none !important; }

/* One workspace frame. */
body.ym-ui .app-shell {
    display:grid; grid-template-columns:244px minmax(0,1fr);
    min-height:100dvh; background:#f7f4ef;
}
body.ym-ui .app-shell > :is(main,.ym-v2-main) {
    min-width:0; padding:26px 34px 110px;
}
body.ym-ui .sidebar {
    position:sticky; top:0; height:100dvh; overflow-y:auto;
    padding:18px 14px; color:#44343c; background:#fffdf9;
    border-right:1px solid #e5ddd7; box-shadow:none;
}
body.ym-ui .sidebar > .mimistitch-sidebar-logo {
    padding:8px 14px 20px; min-height:110px;
}
body.ym-ui .sidebar > .mimistitch-sidebar-logo img {
    width:184px; max-width:100%; height:auto;
}
body.ym-ui .sidebar nav { display:grid; gap:4px; }
body.ym-ui .sidebar nav a {
    min-height:44px; padding:11px 14px; color:#65515c;
    background:transparent; border:1px solid transparent;
    border-radius:11px; font-size:14px; font-weight:600;
    transform:none; box-shadow:none;
}
body.ym-ui .sidebar nav a:hover {
    color:#482236; background:#f4ecef; transform:none;
}
body.ym-ui .sidebar nav a[aria-current="page"] {
    color:#fff; background:#643247; border-color:#643247;
    box-shadow:0 4px 12px rgba(100,50,71,.12);
}
body.ym-ui .sidebar nav a small { display:none; }
body.ym-ui .sidebar-account {
    margin-top:auto; padding-top:24px;
}
body.ym-ui .sidebar-footer {
    background:#f5eee9; color:#44343c; padding:14px;
}
body.ym-ui .sidebar-footer small { color:#70676b; }
body.ym-ui .profile-avatar { background:#ead7e0; color:#643247; }
body.ym-ui .logout-button {
    width:100%; margin-top:10px; min-height:42px;
    border:1px solid #e5ddd7; border-radius:10px;
    background:transparent; color:#643247;
}
body.ym-ui :is(.topbar,.ym-v2-bar) {
    display:flex; align-items:center; gap:16px;
    min-height:70px; margin:0 0 28px; padding:0 0 18px;
    border-bottom:1px solid #e5ddd7;
    background:transparent; box-shadow:none;
}
body.ym-ui .ym-v2-bar .ym-v2-bar-label { flex:1; }
body.ym-ui .ym-v2-bar a {
    color:#643247; text-decoration:none; font-weight:700;
}
body.ym-ui .ym-v2-bar small {
    display:block; color:#70676b; font-size:12px;
}
body.ym-ui .ym-v2-content {
    max-width:1240px; margin:auto; min-width:0;
}
body.ym-ui .ym-v2-content > :is(main,div,section) {
    max-width:100%; margin-left:0; margin-right:0;
}
body.ym-ui .ym-v2-content > main { padding:0; }
body.ym-ui .ym-stash-content { max-width:1240px; }

/* Clear action hierarchy, without glossy gradients. */
body.ym-ui :is(.primary-button,.ym13-btn-primary,.ym-button-primary,
.live-track-projects,.ym-top-track-primary,.ym-card-action,.ym-beta-submit) {
    display:inline-flex; align-items:center; justify-content:center;
    gap:8px; min-height:44px; padding:11px 18px;
    border:1px solid #643247; border-radius:11px;
    background:#643247; color:#fff; font-weight:700;
    text-decoration:none; box-shadow:0 3px 8px rgba(100,50,71,.09);
    transition:background .15s,transform .15s;
}
body.ym-ui :is(.primary-button,.ym13-btn-primary,.ym-card-action):hover {
    background:#482236; transform:translateY(-1px);
}
body.ym-ui :is(.live-start-project,.ym-top-track-secondary,
.ym-secondary-button,.ym-button-secondary,.ym-pattern-back,
.ym-pattern-edit,.back-button,.functional-back) {
    display:inline-flex; align-items:center; gap:8px;
    min-height:42px; padding:10px 16px; background:#fffefa;
    color:#643247; border:1px solid #dfd4d9;
    border-radius:11px; font-weight:600; text-decoration:none;
}
body.ym-ui :is(.icon-button,.menu-button,.ym-mobile-menu) {
    border:1px solid #e5ddd7; background:#fffefa;
    color:#643247; border-radius:11px; min-height:44px;
}
body.ym-ui :is(.live-tracking-actions,.ym-top-tracking-actions) {
    display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;
}
body.ym-ui .eyebrow { color:#80586b; letter-spacing:.12em; }
body.ym-ui .hero {
    background:#643247; border-radius:22px; box-shadow:none;
}
body.ym-ui .hero h3 { color:#fff; }
body.ym-ui .hero p { color:#f4e7ed; }

/* Shared surfaces for the existing page components. */
body.ym-ui :is(
.native-form-card,.functional-card,.auth-card,.composer-card,
.project-card,.native-project-card,.ym-library-card,.ym-yarn-card,
.ym-tracker-card,.ym-tracker-progress-card,.ym-pro-card,
.ym-studio-card,.ym-pattern-box,.ym-stash-form-card,.ym-blog-card,
.ym-admin-panel,.ym-stat,.ym-report,.ym-detail-card,
.ym-user-card,.ym-feedback-row,.marketplace-card,.upgrade-card,
.ym-counter-card,.ym-row-card,.ym-beta-card,.ym-video-editor-card
) {
    background:#fffefa; border:1px solid #e5ddd7;
    border-radius:18px; box-shadow:var(--shadow);
}
body.ym-ui :is(.ym-library-card,.ym-yarn-card,.ym-blog-card) {
    overflow:hidden; transition:border-color .15s,box-shadow .15s;
}
body.ym-ui :is(.ym-library-card,.ym-yarn-card,.ym-blog-card):hover {
    border-color:#ccb1bf; box-shadow:0 10px 24px rgba(53,36,43,.075);
}
body.ym-ui :is(.ym-library-card-body,.ym-yarn-card-body,.ym-blog-card-body) {
    padding:24px;
}
body.ym-ui :is(.ym-project-color-bar) { height:7px; }
body.ym-ui :is(.ym-chip,.status-pill,.ym-tag,.ym-project-status) {
    border-radius:7px; font-size:12px; padding:5px 9px;
}
body.ym-ui :is(.ym-project-library,.ym-yarn-grid,.ym-blog-grid) {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
    gap:22px;
}
body.ym-ui :is(.ym-empty-state,.empty-state,.ym-blog-empty,.ym-admin-empty) {
    padding:44px 24px; border:1px dashed #d9c9d0;
    background:#fffefa; border-radius:18px; text-align:center;
}
body.ym-ui :is(.ym-project-facts,.ym-tracker-grid) { gap:18px; }
body.ym-ui .ym-project-facts article {
    border:1px solid #e5ddd7; background:#fffefa; border-radius:13px;
}
body.ym-ui :is(.ym-progress-track,.ym-progress-bar) {
    overflow:hidden; background:#ece4e8; border-radius:999px;
}
body.ym-ui :is(.ym-progress-fill,.ym-progress-bar > div) {
    background:#527261; border-radius:999px;
}

/* Forms retain their original fields, actions and CSRF tokens. */
body.ym-ui input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
body.ym-ui :is(select,textarea) {
    min-height:46px; border:1px solid #d8cec8;
    border-radius:10px; background:#fff; color:#302b2c;
    padding:11px 13px; box-shadow:none; max-width:100%;
}
body.ym-ui :is(input,textarea)::placeholder { color:#91858c; }
body.ym-ui textarea { min-height:120px; line-height:1.65; }
body.ym-ui :is(input[type="checkbox"],input[type="radio"]) {
    accent-color:#643247;
}
body.ym-ui input[type="file"]::file-selector-button {
    border:0; border-radius:7px; background:#eee3e9;
    color:#643247; padding:8px 12px; margin-right:12px;
    font:inherit; font-weight:600; cursor:pointer;
}
body.ym-ui :is(label,.ym-field label) { color:#51434a; }
body.ym-ui .ym-stash-content form {
    border-color:#e5ddd7; background:#fffefa; box-shadow:none;
}
body.ym-ui :is(.ym-row-controls,.ym-project-actions) form {
    margin:0; padding:0; border:0; background:transparent; box-shadow:none;
}
body.ym-ui table { background:#fffefa; font-size:14px; }
body.ym-ui th {
    background:#f0ebe6; color:#68515c; font-size:12px;
    letter-spacing:.04em; font-weight:700;
}
body.ym-ui td { border-color:#eee6e0; }
body.ym-ui tbody tr:hover { background:#fbf7f3; }
body.ym-ui .ym13-large-yarn-dot {
    display:inline-block; width:32px; height:32px; border-radius:50%;
    border:3px solid white; box-shadow:0 0 0 1px #e5ddd7;
}
body.ym-ui .ym13-library-layout {
    display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px;
}
body.ym-ui .ym13-filter-panel {
    padding:18px; border:1px solid #e5ddd7; border-radius:15px;
    background:#fffefa; align-self:start;
}
body.ym-ui .ym13-filter-group { margin-top:22px; }
body.ym-ui .ym13-filter-group label {
    display:flex; align-items:center; gap:9px; margin:12px 0;
}
body.ym-ui .ym13-library-toolbar {
    display:flex; justify-content:space-between; gap:16px;
    align-items:center; margin-bottom:16px;
}
body.ym-ui .ym13-library-toolbar select { width:auto; }
body.ym-ui .ym13-table-wrap { overflow-x:auto; }
body.ym-ui .ym13-tabs button.active {
    background:#643247; border-color:#643247; color:white;
}

/* A quieter sign-in page with clear password controls. */
body.ym-ui .auth-page { background:#f7f1f3; }
body.ym-ui .auth-card {
    padding:36px; border-radius:22px;
    box-shadow:0 18px 48px rgba(71,43,56,.08);
}
body.ym-ui .auth-card h2 { margin-bottom:24px; }
body.ym-ui .auth-card .primary-button { width:100%; background:#643247; }
body.ym-ui .ym-password-toggle {
    display:inline-flex; padding:5px 0; margin-top:5px;
    min-height:32px; border:0; background:transparent;
    color:#643247; font-size:13px; font-weight:600;
}
body.ym-ui .ym-file-note {
    font-size:13px; color:#70676b; margin:8px 0;
}
body.ym-ui .ym-file-preview {
    display:block; max-width:180px; max-height:180px;
    margin:12px 0; border-radius:12px; object-fit:cover;
}
body.ym-ui .ym-result-note {
    padding:16px; border-radius:12px; background:#f3ecef; color:#643247;
}

/* Public navigation and editorial pages. */
body.ym-ui .ym-ui-public-nav {
    display:flex; align-items:center; justify-content:space-between;
    gap:20px; max-width:1200px; margin:auto; padding:18px 24px;
    border-bottom:1px solid #e5ddd7;
}
body.ym-ui .ym-ui-public-nav img { width:150px; height:78px; object-fit:contain; }
body.ym-ui .ym-ui-public-nav nav { display:flex; flex-wrap:wrap; gap:8px; }
body.ym-ui .ym-ui-public-nav a {
    color:#643247; text-decoration:none; font-weight:600;
}
body.ym-ui .ym-ui-public-nav nav a:hover {
    background:#f2e8ed; color:#482236; transform:none;
}
body.ym-ui :is(.ym-blog-page,.ym-article-page) {
    max-width:1120px; margin:32px auto; padding:0 24px;
}
body.ym-ui .ym-article-body {
    max-width:760px; font-size:17px; line-height:1.85;
}
body.ym-ui .ym-article-image { max-width:100%; border-radius:18px; }
body.ym-ui .site-footer {
    padding:24px; border-top:1px solid #e5ddd7;
    background:#f7f4ef; color:#70676b; font-size:12px;
}
body.ym-ui :is(.ym-floating-feedback,.ym-floating-admin) {
    border:1px solid #d9c9d0; box-shadow:0 4px 14px rgba(53,36,43,.08);
}
body.ym-ui .ym-floating-feedback { background:#643247; }
body.ym-ui .ym-landing .ym-brand img { min-width:150px; }
body.ym-ui .ym-landing .ym-feature-card {
    border:1px solid #e5ddd7; box-shadow:var(--shadow);
}
body.ym-ui .ym-menu-overlay {
    display:none; position:fixed; inset:0; z-index:119;
    background:rgba(32,24,28,.35); border:0; border-radius:0;
    padding:0; width:100%; height:100%;
}

/* Phone layouts and accessible tap targets. */
@media(max-width:1000px) {
    body.ym-ui .app-shell { grid-template-columns:220px minmax(0,1fr); }
    body.ym-ui .app-shell > :is(main,.ym-v2-main) { padding:22px 22px 110px; }
    body.ym-ui .topbar { flex-wrap:wrap; }
    body.ym-ui .top-actions { margin-left:0; }
    body.ym-ui .ym13-library-layout { grid-template-columns:1fr; }
}
@media(min-width:761px) {
    body.ym-ui .sidebar { transform:none !important; }
    body.ym-ui .ym-menu-overlay { display:none !important; }
}
@media(max-width:760px) {
    body.ym-ui .app-shell { display:block; }
    body.ym-ui .app-shell > :is(main,.ym-v2-main) { padding:18px 16px 110px; }
    body.ym-ui .sidebar {
        position:fixed; top:0; left:0; bottom:0; width:264px;
        max-width:85vw; z-index:120; height:100dvh;
        transform:translateX(-105%) !important;
        transition:transform .2s ease;
    }
    body.ym-ui .sidebar:is(.open,.ym-nav-open) {
        transform:translateX(0) !important;
    }
    body.ym-ui.ym-menu-open .ym-menu-overlay { display:block; }
    body.ym-ui :is(.menu-button,.ym-mobile-menu) {
        display:inline-flex; align-items:center; justify-content:center;
        width:44px; flex-shrink:0;
    }
    body.ym-ui .ym-v2-bar { gap:10px; }
    body.ym-ui .ym-v2-bar small { display:none; }
    body.ym-ui :is(.ym-library-header,.ym-tracker-header,.native-page-header) {
        flex-wrap:wrap; gap:14px;
    }
    body.ym-ui :is(.ym-project-library,.ym-yarn-grid,.ym-blog-grid) {
        grid-template-columns:1fr;
    }
    body.ym-ui .auth-page { padding:24px 18px; }
    body.ym-ui .auth-brand h1 { font-size:36px; }
    body.ym-ui .auth-card { padding:26px 22px; }
    body.ym-ui .ym-ui-public-nav { padding:12px 16px; gap:10px; flex-wrap:wrap; }
    body.ym-ui .ym-ui-public-nav nav { gap:4px; }
    body.ym-ui .ym-ui-public-nav nav a { padding:9px; }
    body.ym-ui .ym13-table-wrap table { min-width:720px; }
    body.ym-ui .hero { padding:26px; }
    body.ym-ui .hero-art { opacity:.16; pointer-events:none; }
    body.ym-ui :is(input,select,textarea) { font-size:16px !important; }
    body.ym-ui .ym-floating-feedback { bottom:12px; right:12px; }
    body.ym-ui .ym-floating-admin { bottom:62px; right:12px; }
}
@media(prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    body.ym-ui *,body.ym-ui *::before,body.ym-ui *::after {
        transition:none !important; animation:none !important;
    }
}