@import url('https://fonts.googleapis.com/css2?family=Amaranth:ital,wght@0,400;0,700;1,400&family=Cinzel:wght@600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Lato:wght@300;400;700&display=swap');

/* ── VARIABLES ────────────────────────────────────────────────────────────── */
:root {
    --ryou-bg:        #2a2318;
    --ryou-bg2:       #1e1a12;
    --ryou-parchment: #c9b68a;
    --ryou-parch-lt:  #e0ccA0;
    --ryou-parch-dk:  #a8916a;
    --ryou-scroll-bg: #d4be92;
    --ryou-header-bg: #2c3e50;
    --ryou-header-bg2:#1a2634;
    --ryou-gold:      #c9a84c;
    --ryou-gold-lt:   #f0d080;
    --ryou-purple:    #6b4c8a;
    --ryou-purple-lt: #9b7cbf;
    --ryou-red:       #8b2020;
    --ryou-red-lt:    #c94040;
    --ryou-green:     #2d6a2d;
    --ryou-green-lt:  #4caf50;
    --ryou-border:    #8a7040;
    --ryou-text-dark: #1a1208;
    --ryou-text-lt:   #f0e8d0;
    --ryou-radius:    6px;
    --ryou-shadow:    0 4px 20px rgba(0,0,0,0.5);
}

/* ── BASE WRAP ───────────────────────────────────────────────────────────── */
.ryou-wrap {
    font-family: 'Amaranth', sans-serif;
    font-size: 20px;
    line-height: 1.6;
    color: var(--ryou-text-dark);
    margin: 1rem 0;
}

/* ── SCROLL TITLE (pergamino header) ─────────────────────────────────────── */
.ryou-scroll-title {
    display: flex;
    align-items: center;
    background: var(--ryou-header-bg);
    border-radius: var(--ryou-radius) var(--ryou-radius) 0 0;
    padding: 1rem 1rem;
    position: relative;
    margin-bottom: 0;
    min-height: 60px;
}
.ryou-scroll-heading {
    font-family: 'Amaranth', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--ryou-text-lt);
    text-align: center;
    flex: 1;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
    letter-spacing: .05em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ryou-scroll-ornament {
    width: 36px; height: 36px;
    background: var(--ryou-bg2);
    border: 3px solid var(--ryou-parch-dk);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── SUBCATEGORY WRAP ────────────────────────────────────────────────────── */
.ryou-subcategory-wrap {
    background: var(--ryou-scroll-bg);
    border: 2px solid var(--ryou-border);
    border-radius: var(--ryou-radius);
    margin: 1.5rem 0;
    box-shadow: var(--ryou-shadow);
    overflow: hidden;
}
.ryou-subcat-img { width: 100%; max-height: 364px; overflow: hidden; }
.ryou-subcat-img img { width: 100%; object-fit: cover; display: block; }
.ryou-subcat-desc {
    background: var(--ryou-parch-lt);
    padding: .9rem 1.2rem;
    font-family: 'Amaranth', sans-serif;
    font-size: 20px;
    border-bottom: 1px solid var(--ryou-border);
}

/* ── STORE WRAP ──────────────────────────────────────────────────────────── */
.ryou-store-wrap { background: var(--ryou-scroll-bg); border: 2px solid var(--ryou-border); border-radius: var(--ryou-radius); box-shadow: var(--ryou-shadow); overflow: hidden; }
.ryou-store-header-img img { width: 100%; max-height: 416px; object-fit: cover; display: block; }
.ryou-store-description { padding: 1rem 1.2rem; background: var(--ryou-parch-lt); font-family: 'Amaranth', sans-serif; font-size: 20px; border-bottom: 1px solid var(--ryou-border); }

/* ── BALANCE BAR ─────────────────────────────────────────────────────────── */
.ryou-balance-bar {
    display: flex; flex-wrap: wrap; gap: .6rem;
    padding: .6rem 1rem;
    background: var(--ryou-bg2);
    border-bottom: 2px solid var(--ryou-border);
}
.ryou-balance-item {
    display: flex; align-items: center; gap: .3rem;
    background: rgba(201,168,76,.15);
    border: 1px solid var(--ryou-gold);
    border-radius: 20px;
    padding: .25rem .7rem;
}
.ryou-balance-amount { font-family: 'Amaranth', sans-serif; color: var(--ryou-gold-lt); font-weight: 700; font-size: 20px; }
.ryou-balance-name   { color: #ddd; font-family: 'Amaranth', sans-serif; font-size: 18px; }
.ryou-coin-img { width: 15px !important; height: 15px !important; object-fit: contain; vertical-align: middle; }

/* ── PRODUCT CARD ────────────────────────────────────────────────────────── */
.ryou-products-list { padding: 1rem; }
.ryou-product-card {
    background: var(--ryou-parch-lt);
    border: 1px solid var(--ryou-parch-dk);
    border-radius: var(--ryou-radius);
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition: transform .18s, box-shadow .18s;
}
.ryou-product-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.ryou-product-inner {
    display: block;
    padding: 0;
}
.ryou-product-img {
    flex-shrink: 0;
    width: 100%;
    background: var(--ryou-bg2);
    display: flex; align-items: center; justify-content: center;
    padding: .6rem;
}
.ryou-product-img img { max-width: 100%; max-height: 140px; object-fit: contain; display:block; }
.ryou-product-body { padding: .6rem .8rem; }

.ryou-product-name {
    font-family: 'Amaranth', sans-serif;
    font-size: 26px;
    font-weight: 700;
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: var(--ryou-purple);
    color: #fff;
    padding: .3rem .9rem;
    margin: 0 0 .5rem;
    border-radius: 0;
    letter-spacing: .03em;
}
.ryou-product-desc {
    font-family: 'Amaranth', sans-serif;
    font-size: 20px;
    color: #3a2e1a;
    margin: .5rem 0 .7rem;
    line-height: 1.5;
}

.ryou-product-meta { background: rgba(0,0,0,.06); border-radius: 4px; padding: .5rem .8rem; margin-bottom: .6rem; }
.ryou-meta-row { display: flex; align-items: baseline; gap: .5rem; font-family: 'Amaranth', sans-serif; font-size: 16px; margin-bottom: .25rem; }
.ryou-meta-label { font-weight: 700; color: #4a3820; min-width: 90px; flex-shrink: 0; }

.ryou-prices { display: flex; flex-wrap: wrap; gap: .4rem; }
.ryou-price-option {
    display: inline-flex; align-items: center; gap: .25rem;
    background: rgba(201,168,76,.2); border: 1px solid var(--ryou-gold);
    border-radius: 4px; padding: .1rem .5rem; font-weight: 700; font-size: .85rem;
}
.ryou-no-purchase { color: var(--ryou-red-lt); font-style: italic; font-size: .88rem; }

.ryou-field-block { margin-top: .7rem; }
.ryou-field-block--with-icon { display: flex; align-items: flex-start; gap: .6rem; }
.ryou-field-icon { flex-shrink: 0; width: 16px; height: 16px; object-fit: contain; vertical-align: middle; }
.ryou-field-label {
    display: block; font-family: 'Amaranth', sans-serif; font-weight: 700; color: #4a3820; font-size: 16px; margin-bottom: .2rem;
}
.ryou-field-value {
    background: rgba(255,255,255,.35); border-radius: 4px;
    padding: .35rem .6rem; font-family: 'Amaranth', sans-serif; font-size: 16px; color: #2a1e0a;
}
.ryou-field-value ul { margin: .3rem 0 .3rem 1.4rem; padding: 0; }
.ryou-field-value li { margin-bottom: .2rem; }
.ryou-field-value p { margin: .2rem 0; }

/* ── BUY ACTIONS ────────────────────────────────────────────────────────── */
.ryou-buy-actions { margin-top: .7rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ryou-currency-select {
    background: var(--ryou-bg2); color: var(--ryou-text-lt);
    border: 1px solid var(--ryou-gold); border-radius: 4px;
    padding: .3rem .5rem; font-size: .82rem;
}

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.ryou-btn {
    display: inline-block; border: none; cursor: pointer;
    font-family: 'Amaranth', sans-serif; font-weight: 700;
    border-radius: 4px; transition: filter .15s, transform .1s;
    padding: .6rem 1.6rem; font-size: 20px;
}
.ryou-btn:hover:not(:disabled) { filter: brightness(1.12); transform: scale(1.03); }
.ryou-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ryou-btn--sm { padding: .3rem .8rem; font-size: 16px; }
.ryou-btn--buy     { background: var(--ryou-gold); color: var(--ryou-bg2); width: 100%; text-align: center; padding: .8rem 1.6rem; font-size: 20px; margin-top: .5rem; }
.ryou-btn--sell    { background: var(--ryou-green); color: #fff; }
.ryou-btn--discard { background: var(--ryou-red); color: #fff; }
.ryou-btn--claim   { background: var(--ryou-purple); color: #fff; }

/* ── PROFILE WRAP ────────────────────────────────────────────────────────── */
.ryou-profile-wrap {
    background: var(--ryou-scroll-bg);
    border: 2px solid var(--ryou-border);
    border-radius: var(--ryou-radius);
    box-shadow: var(--ryou-shadow);
    overflow: hidden;
}
.ryou-profile-header {
    display: flex; align-items: center; gap: 1rem;
    background: var(--ryou-header-bg); padding: 1rem 1.2rem;
    border-bottom: 2px solid var(--ryou-border);
}
.ryou-avatar img { border-radius: 50%; border: 2px solid var(--ryou-gold); }
.ryou-profile-name { font-family: 'Cinzel', serif; color: var(--ryou-text-lt); font-size: 1.2rem; margin: 0 0 .4rem; }

/* ── TABS ────────────────────────────────────────────────────────────────── */
.ryou-tabs {
    display: flex; flex-wrap: wrap;
    background: var(--ryou-bg);
    border-bottom: 2px solid var(--ryou-border);
}
.ryou-tab {
    background: none; border: none; cursor: pointer;
    font-family: 'Lato', sans-serif; font-weight: 700;
    color: #aaa; font-size: .88rem;
    padding: .65rem 1.2rem;
    border-bottom: 3px solid transparent;
    transition: color .2s, border-color .2s;
}
.ryou-tab:hover  { color: var(--ryou-parchment); }
.ryou-tab.active { color: var(--ryou-gold-lt); border-bottom-color: var(--ryou-gold); }

.ryou-tab-content { display: none; padding: 1.2rem; }
.ryou-tab-content.active { display: block; max-height: 600px; overflow-y: auto; }
.ryou-section-title {
    font-family: 'Cinzel', serif; font-size: 1rem;
    color: #4a3820; border-bottom: 1px solid var(--ryou-parch-dk);
    padding-bottom: .4rem; margin-bottom: 1rem;
}

/* ── ACTIONS LIST ────────────────────────────────────────────────────────── */
.ryou-actions-list { display: flex; flex-direction: column; gap: .8rem; }
.ryou-action-item {
    display: flex; justify-content: space-between; align-items: flex-start;
    background: var(--ryou-parch-lt); border: 1px solid var(--ryou-parch-dk);
    border-radius: var(--ryou-radius); padding: .8rem 1rem; gap: 1rem; flex-wrap: wrap;
    font-family: 'Amaranth', sans-serif; font-size: 16px;
}
.ryou-action-info strong { display: block; color: #1a1208; margin-bottom: .15rem; font-size: 16px; }
.ryou-action-info p { margin: 0 0 .3rem; font-size: 16px; color: #5a4830; }
.ryou-action-currency { font-size: 16px; color: #7a6040; display: flex; align-items: center; gap: .25rem; }
.ryou-action-right { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; flex-shrink: 0; }

.ryou-badge {
    display: inline-block; background: rgba(0,0,0,.07);
    border: 1px solid var(--ryou-green); color: var(--ryou-green);
    border-radius: 20px; padding: .15rem .6rem; font-family: 'Amaranth', sans-serif; font-size: 14px; font-weight: 700;
}
.ryou-badge--sub  { border-color: var(--ryou-red-lt); color: var(--ryou-red-lt); }
.ryou-badge--free { border-color: var(--ryou-purple-lt); color: var(--ryou-purple); }

.ryou-claim-form { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.ryou-input {
    background: var(--ryou-bg2); color: var(--ryou-text-lt);
    border: 1px solid var(--ryou-border); border-radius: 4px;
    padding: .3rem .6rem; font-family: 'Amaranth', sans-serif; font-size: 16px; width: 170px;
    outline: none; transition: border-color .2s;
}
.ryou-input:focus { border-color: var(--ryou-gold); }
.ryou-input::placeholder { color: #777; }

/* ── INVENTORY ───────────────────────────────────────────────────────────── */
.ryou-inventory-list { display: flex; flex-direction: column; gap: .8rem; max-height: 500px; overflow-y: auto; padding-right: .3rem; }
/* ── INVENTORY CARD — compact row layout ─────────────────────────────── */
.ryou-inv-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: .7rem;
    align-items: center;
    background: var(--ryou-parch-lt); border: 1px solid var(--ryou-parch-dk);
    border-radius: var(--ryou-radius); padding: .5rem .7rem; overflow: hidden;
}
.ryou-inv-left {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    overflow: hidden;
}
.ryou-inv-img img { width: 44px; height: 44px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.ryou-inv-info { display: flex; flex-direction: column; min-width: 0; }
.ryou-inv-name { font-family: 'Amaranth', sans-serif; font-size: 13px; font-weight: 700; margin: 0; color: #1a1208; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ryou-inv-qty { font-family: 'Amaranth', sans-serif; font-size: 13px; color: #5a4830; margin: 0; }
.ryou-inv-qty-num { color: #1a1208; font-weight: 700; }
.ryou-inv-right {
    display: flex;
    align-items: stretch;
    gap: .4rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}
.ryou-inv-action-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    background: rgba(0,0,0,.04);
    border: 1px solid var(--ryou-parch-dk);
    border-radius: 4px;
    padding: .3rem .4rem;
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-family: 'Amaranth', sans-serif;
}
.ryou-inv-action-box .ryou-inv-action-top {
    display: flex;
    align-items: center;
    gap: .25rem;
    justify-content: center;
}
.ryou-inv-action-box label { display: none; }
.ryou-inv-action-box input[type=number] {
    width: 40px; padding: .1rem .2rem; font-family: 'Amaranth', sans-serif; font-size: 12px;
    border: 1px solid var(--ryou-border); border-radius: 3px; background: #fff; color: #000;
    text-align: center;
}
.ryou-inv-action-label { font-family: 'Amaranth', sans-serif; font-size: 12px; color: #4a3820; font-weight: 700; white-space: nowrap; }
.ryou-inv-action-row { display: flex; align-items: center; gap: .3rem; }
.ryou-inv-sell-total { font-family: 'Amaranth', sans-serif; font-size: 12px; color: #3a6a3a; white-space: nowrap; }
.ryou-inv-buy-total  { font-family: 'Amaranth', sans-serif; font-size: 12px; color: #4a3820; white-space: nowrap; }
.ryou-tag { background: var(--ryou-purple); color: #fff; border-radius: 3px; padding: .1rem .4rem; font-family: 'Amaranth', sans-serif; font-size: 12px; display: inline-block; }
.ryou-sell-options { display: flex; flex-wrap: wrap; gap: .3rem; }
.ryou-inv-body { flex: 1; }
.ryou-inv-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

/* ── TABLE ───────────────────────────────────────────────────────────────── */
.ryou-table-wrap { overflow-x: auto; max-height: 400px; overflow-y: auto; border-radius: 4px; }
.ryou-table { width: 100%; border-collapse: collapse; font-family: 'Amaranth', sans-serif; font-size: 14px; }
.ryou-table th { text-align: left; color: #4a3820; font-weight: 700; border-bottom: 2px solid var(--ryou-parch-dk); padding: .5rem .6rem; background: rgba(0,0,0,.05); font-size: 14px; }
.ryou-table td { padding: .45rem .6rem; border-bottom: 1px solid rgba(138,112,64,.2); vertical-align: middle; font-size: 14px; }
.ryou-table tr:last-child td { border-bottom: none; }
.ryou-pos { color: #1a6b1a; font-weight: 700; text-shadow: 0 0 3px rgba(255,255,255,.8); }
.ryou-neg { color: var(--ryou-red-lt); font-weight: 700; }

/* ── PUBLIC PROFILE ──────────────────────────────────────────────────────── */
.ryou-public-profiles { background: var(--ryou-scroll-bg); border: 2px solid var(--ryou-border); border-radius: var(--ryou-radius); padding: 1rem; }
.ryou-public-search { margin-bottom: .8rem; }
.ryou-search-input {
    width: 100%; padding: .5rem .8rem;
    border: 1px solid var(--ryou-border); border-radius: 4px;
    font-family: 'Lato', sans-serif; font-size: .9rem;
    background: var(--ryou-parch-lt); color: var(--ryou-text-dark);
}
.ryou-player-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.ryou-player-btn {
    background: var(--ryou-header-bg); color: var(--ryou-text-lt);
    border: 1px solid var(--ryou-border); border-radius: 4px;
    padding: .3rem .8rem; cursor: pointer; font-size: .85rem;
    transition: background .15s;
}
.ryou-player-btn:hover, .ryou-player-btn.active { background: var(--ryou-purple); border-color: var(--ryou-purple-lt); }
.ryou-loading { color: #888; text-align: center; padding: 2rem; font-style: italic; }

/* ── TOAST ───────────────────────────────────────────────────────────────── */
.ryou-toast {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
    background: var(--ryou-bg); color: var(--ryou-text-lt);
    border: 2px solid var(--ryou-border); border-radius: var(--ryou-radius);
    padding: .8rem 1.2rem; font-size: .9rem; font-weight: 700;
    box-shadow: var(--ryou-shadow); max-width: 340px;
    opacity: 0; transform: translateY(12px);
    transition: opacity .3s, transform .3s; pointer-events: none;
}
.ryou-toast--show    { opacity: 1; transform: translateY(0); }
.ryou-toast--success { border-color: var(--ryou-green-lt); color: var(--ryou-green-lt); }
.ryou-toast--error   { border-color: var(--ryou-red-lt); color: var(--ryou-red-lt); }

/* ── NOTICE / EMPTY ──────────────────────────────────────────────────────── */
.ryou-notice { background: rgba(201,168,76,.12); border: 1px solid var(--ryou-gold); color: #4a3820; padding: .7rem 1rem; border-radius: 4px; }
.ryou-empty  { text-align: center; color: #7a6040; font-style: italic; padding: 1.5rem 0; }
.ryou-error  { color: var(--ryou-red-lt); font-style: italic; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ryou-product-inner { flex-direction: column; }
    .ryou-product-img { width: 100%; height: 160px; }
    .ryou-product-img img { max-height: 140px; }
    .ryou-action-item { flex-direction: column; }
    .ryou-action-right { align-items: flex-start; width: 100%; }
    .ryou-claim-form { align-items: stretch; }
    .ryou-input { width: 100%; box-sizing: border-box; }
    .ryou-toast { left: 1rem; right: 1rem; max-width: none; }
    .ryou-inv-card { flex-direction: column; }
}

/* ── CRAFT ───────────────────────────────────────────────────────────────── */
.ryou-buy-option,
.ryou-craft-option { display: flex; flex-direction: column; gap: .4rem; }

.ryou-buy-actions {
    display: flex; flex-wrap: wrap; gap: .8rem;
    margin-top: .8rem; align-items: flex-start;
}

.ryou-craft-option {
    background: rgba(0,0,0,.06);
    border: 1px dashed var(--ryou-border);
    border-radius: 4px;
    padding: .7rem .9rem;
}

.ryou-craft-label {
    font-family: 'Amaranth', sans-serif;
    font-size: 20px; font-weight: 700; color: #4a3820;
    display: block; margin-bottom: .5rem;
}

.ryou-craft-materials {
    display: flex; flex-wrap: wrap; gap: .6rem;
    margin-bottom: .6rem;
}

.ryou-material-tag {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    background: rgba(107,76,138,.15);
    border: 1px solid var(--ryou-purple-lt);
    border-radius: 6px;
    padding: .5rem .8rem;
    font-family: 'Amaranth', sans-serif;
    font-size: 20px;
    color: #3a2050;
}

.ryou-material-tag img.ryou-coin-img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain;
}

.ryou-material-tag .ryou-mat-label {
    font-size: 20px;
    text-align: center;
}

.ryou-btn--craft {
    background: #5a3a1a;
    color: #f0d080;
    border: 1px solid var(--ryou-gold);
}
.ryou-btn--craft:hover:not(:disabled) { background: #7a5a2a; }

/* ── LARGER PRICE OPTION ─────────────────────────────────────────────────── */
.ryou-price-option {
    display: inline-flex; align-items: center; gap: .3rem;
    background: rgba(201,168,76,.2); border: 1px solid var(--ryou-gold);
    border-radius: 6px; padding: .25rem .6rem;
    font-family: 'Amaranth', sans-serif; font-weight: 700; font-size: 16px;
}
.ryou-price-option .ryou-coin-img { height: 14px; width: auto; }
.ryou-no-purchase { color: var(--ryou-red-lt); font-style: italic; font-size: 18px; }

/* ── CONFIRM MODAL ───────────────────────────────────────────────────────── */
.ryou-confirm-overlay {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: rgba(0,0,0,.8) !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ryou-confirm-box {
    background: var(--ryou-scroll-bg) !important;
    border: 3px solid var(--ryou-gold) !important;
    border-radius: var(--ryou-radius) !important;
    padding: 2rem 2.5rem !important;
    max-width: 520px !important;
    width: 90% !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
    box-shadow: 0 12px 60px rgba(0,0,0,.7) !important;
    font-family: 'Amaranth', sans-serif !important;
    position: relative !important;
}
.ryou-confirm-box h3 {
    font-family: 'Cinzel', serif !important;
    color: #1a1208 !important;
    font-size: 1.4rem !important;
    margin: 0 0 1rem !important;
}
.ryou-confirm-msg {
    font-family: 'Amaranth', sans-serif !important;
    font-size: 20px !important;
    color: #1a1208 !important;
    margin: 0 0 1rem !important;
    line-height: 1.5 !important;
    overflow-y: auto !important;
    flex: 1 !important;
}
.ryou-confirm-msg small { font-size: 17px !important; color: #3a3a3a !important; display: block; margin-top: .4rem; }
.ryou-confirm-msg strong { color: #1a1208 !important; }
.ryou-confirm-actions {
    display: flex !important;
    gap: 1rem !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding-top: 1rem !important;
    margin-top: auto !important;
}
.ryou-btn--confirm-yes {
    background: var(--ryou-gold) !important;
    color: var(--ryou-bg2) !important;
    font-family: 'Amaranth', sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    padding: .6rem 1.8rem !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    width: auto !important;
}
.ryou-btn--confirm-yes:hover { filter: brightness(1.1) !important; }
.ryou-btn--confirm-no {
    background: #888 !important;
    color: #fff !important;
    font-family: 'Amaranth', sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    padding: .6rem 1.8rem !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    width: auto !important;
}
.ryou-btn--confirm-no:hover { filter: brightness(1.1) !important; }

/* ── INVENTORY IN STORE CARD ─────────────────────────────────────────────── */
.ryou-inv-in-store {
    background: rgba(76,175,80,.1);
    border: 1px solid var(--ryou-green-lt);
    border-radius: 6px;
    padding: .6rem 1rem;
    margin-top: .5rem;
    font-family: 'Amaranth', sans-serif;
    font-size: 18px;
    color: #1a4a1a;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
}
.ryou-inv-in-store strong { font-size: 20px; color: #1a4a1a; }
.ryou-sell-inline { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ryou-btn--sell-inline {
    background: var(--ryou-green) !important;
    color: #fff !important;
    font-family: 'Amaranth', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    padding: .35rem .9rem !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}
.ryou-btn--sell-inline:hover { filter: brightness(1.1) !important; }

/* ── QUANTITY ROW ────────────────────────────────────────────────────────── */
.ryou-qty-row {
    display: flex; align-items: center; gap: .6rem;
    margin-bottom: .5rem; flex-wrap: wrap;
}
.ryou-qty-label {
    font-family: 'Amaranth', sans-serif; font-size: 18px;
    color: #1a1208; font-weight: 700;
}
.ryou-qty-input {
    color: #000 !important;
    background: #fff !important;
    border: 1px solid var(--ryou-border) !important;
    border-radius: 4px !important;
    font-family: 'Amaranth', sans-serif !important;
    font-size: 18px !important;
    padding: .3rem .5rem !important;
    width: 70px !important;
}
.ryou-total-display {
    font-family: 'Amaranth', sans-serif; font-size: 18px;
    color: #1a1208; font-weight: 700;
}

/* ── SELL SECTION IN STORE ───────────────────────────────────────────────── */
.ryou-inv-in-store {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .5rem !important;
}
.ryou-inv-in-store-left {
    font-family: 'Amaranth', sans-serif;
    font-size: 18px;
    color: #1a4a1a;
}
.ryou-sell-section { width: 100%; }
.ryou-sell-qty-row {
    display: flex; align-items: center; gap: .5rem;
    flex-wrap: wrap;
}
.ryou-sell-total-display {
    font-family: 'Amaranth', sans-serif;
    font-size: 17px;
    color: #1a4a1a;
    font-weight: 700;
}

/* ── 3-ZONE PRODUCT LAYOUT ───────────────────────────────────────────────── */
.ryou-product-zones {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .8rem;
    margin: .6rem 0;
    align-items: start;
}
.ryou-zone-a {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 120px;
    max-width: 220px;
}
.ryou-zone-b {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    flex: 1;
}
/* Zone B fields render inline like a list */
.ryou-zone-b .ryou-field-block {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    background: none;
    padding: 0;
    margin: 0;
}
.ryou-zone-b .ryou-field-label {
    font-weight: 700;
    white-space: nowrap;
}
.ryou-zone-b .ryou-field-block--with-icon {
    flex-direction: row;
    align-items: center;
}
.ryou-zone-b .ryou-field-value {
    background: none;
    padding: 0;
    display: inline;
}
.ryou-zone-c {
    border-top: 1px solid var(--ryou-parch-dk);
    padding-top: .6rem;
    margin-top: .2rem;
}
/* Zone C fields render as list items */
.ryou-zone-c .ryou-field-block {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    padding: .2rem 0;
    background: none;
}
.ryou-zone-c .ryou-field-label { font-weight: 700; white-space: nowrap; }
.ryou-zone-c .ryou-field-value { background: none; padding: 0; display: inline; }
@media (max-width: 500px) {
    .ryou-product-zones { grid-template-columns: 1fr; }
    .ryou-zone-a { max-width: 100%; }
}

/* ── BUY / SELL ACTION BOXES ─────────────────────────────────────────────── */
.ryou-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    margin-top: .6rem;
}
.ryou-action-box {
    border-radius: 6px;
    padding: .6rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.ryou-action-box--buy {
    border: 1px solid var(--ryou-gold);
    background: rgba(201,168,76,.08);
}
.ryou-action-box--sell {
    border: 1px solid var(--ryou-green-lt);
    background: rgba(76,175,80,.08);
    /* override ryou-inv-in-store defaults */
    margin: 0 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}
.ryou-action-box-title {
    font-family: 'Amaranth', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #3a2e1a;
    margin-bottom: .2rem;
}
@media (max-width: 500px) {
    .ryou-actions-row { grid-template-columns: 1fr; }
}

/* ── MANUAL ADJUST ───────────────────────────────────────────────────────── */
.ryou-manual-adjust {
    display: flex; flex-direction: column; gap: .6rem;
    background: rgba(0,0,0,.04); border: 1px solid var(--ryou-parch-dk);
    border-radius: var(--ryou-radius); padding: .9rem 1rem;
    margin-bottom: 1rem;
}
.ryou-adjust-row {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.ryou-adjust-info {
    display: flex; align-items: center; gap: .4rem;
    font-family: 'Amaranth', sans-serif; font-size: 16px; font-weight: 700;
    color: #3a2e1a; min-width: 120px;
}
.ryou-adjust-form {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; flex: 1;
}
.ryou-adjust-form select {
    font-family: 'Amaranth', sans-serif; font-size: 16px;
    background: var(--ryou-bg2); color: var(--ryou-text-lt);
    border: 1px solid var(--ryou-border); border-radius: 4px;
    padding: .3rem .6rem; outline: none;
}
.ryou-adjust-form input {
    font-family: 'Amaranth', sans-serif; font-size: 16px;
    background: var(--ryou-bg2); color: var(--ryou-text-lt);
    border: 1px solid var(--ryou-border); border-radius: 4px;
    padding: .3rem .6rem; outline: none;
}
.ryou-btn--adjust {
    background: var(--ryou-purple) !important;
    color: #fff !important;
    font-size: 16px !important;
    padding: .35rem .9rem !important;
    width: auto !important;
    margin-top: 0 !important;
}

/* ── FICHA WIDGET ────────────────────────────────────────────────────────── */
.ryou-ficha-widget {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 99999;
    width: 260px;
    background: var(--ryou-bg2, #1a1610);
    border: 2px solid var(--ryou-gold, #c9a84c);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
    font-family: 'Amaranth', sans-serif;
    transition: all .25s ease;
    overflow: hidden;
}
.ryou-fw-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .8rem;
    cursor: pointer;
    user-select: none;
}
.ryou-fw-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ryou-purple, #6b4c8a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    overflow: hidden;
}
.ryou-fw-info {
    flex: 1;
    min-width: 0;
}
.ryou-fw-name {
    display: block;
    color: var(--ryou-gold-lt, #f0d080);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ryou-fw-balances {
    display: block;
    color: rgba(255,255,255,.6);
    font-size: 12px;
}
.ryou-fw-arrow {
    color: var(--ryou-gold, #c9a84c);
    font-size: 10px;
    transition: transform .2s;
    flex-shrink: 0;
}
.ryou-ficha-widget--collapsed .ryou-fw-body { display: none; }
.ryou-ficha-widget--collapsed .ryou-fw-arrow { transform: rotate(180deg); }
.ryou-fw-body {
    padding: .5rem .8rem .8rem;
    border-top: 1px solid rgba(201,168,76,.3);
}
.ryou-fw-label {
    font-size: 12px;
    color: rgba(255,255,255,.5);
    margin: 0 0 .4rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.ryou-fw-fichas {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: .7rem;
}
.ryou-fw-ficha-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    padding: .35rem .6rem;
    color: #fff;
    cursor: pointer;
    font-family: 'Amaranth', sans-serif;
    font-size: 14px;
    text-align: left;
    transition: background .15s, border-color .15s;
    width: 100%;
}
.ryou-fw-ficha-btn:hover { background: rgba(201,168,76,.15); border-color: var(--ryou-gold); }
.ryou-fw-ficha-btn.active { background: rgba(201,168,76,.2); border-color: var(--ryou-gold); }
.ryou-fw-ficha-btn img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ryou-fw-ficha-initial {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ryou-purple);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.ryou-fw-ficha-type {
    margin-left: auto;
    font-size: 11px;
    color: rgba(255,255,255,.4);
    flex-shrink: 0;
}
.ryou-fw-balances-full {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: .5rem;
}
.ryou-fw-balance-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 14px;
    color: rgba(255,255,255,.8);
}
.ryou-fw-balance-name { flex: 1; }
.ryou-fw-balance-amount { font-weight: 700; color: var(--ryou-gold-lt, #f0d080); }

/* ── Toast notifications ─────────────────────────────────────────────────── */
.ryou-toast {
    position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(20px);
    background: #1a1208; border: 1px solid rgba(200,169,74,.4);
    color: #e8d9b0; padding: .7rem 1.4rem; border-radius: 8px;
    font-family: 'Amaranth', sans-serif; font-size: .9rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.5); z-index: 1000000;
    opacity: 0; transition: opacity .3s, transform .3s;
    pointer-events: none; white-space: nowrap;
}
.ryou-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.ryou-toast--success { border-color: rgba(74,154,74,.5); }
.ryou-toast--error   { border-color: rgba(192,48,48,.5); color: #e07070; }

/* ── Evidence links in claims history ─────────────────────────────────────── */
.ryou-evidencia-link {
    display: inline-flex; align-items: center; gap: .2rem;
    background: rgba(200,169,74,.12); border: 1px solid rgba(200,169,74,.3);
    color: var(--ryou-gold) !important; border-radius: 4px;
    padding: 2px 7px; font-size: .78rem; font-weight: 600;
    text-decoration: none !important; margin-right: .25rem;
    transition: background .15s;
}
.ryou-evidencia-link:hover {
    background: rgba(200,169,74,.25); color: var(--ryou-gold-lt) !important;
}

/* ── Evidencia links — ensure above floating widget ──────────────────────────── */
.ryou-evidencia-link {
    position: relative;
    z-index: 10001 !important;
}

/* ── Widget puntos separator ─────────────────────────────────────────────── */
.ryou-fw-puntos-section {
    border-top: 1px solid rgba(201,168,76,.3) !important;
    margin-top: .3rem;
    padding-top: .4rem !important;
}
.ryou-btn--exit { background: var(--ryou-red); color: #fff; }