:root{
--bg:#f7efe6;
--bg-soft:#fffaf5;
--surface:#ffffff;
--surface-2:#fff7ef;
--text:#2f241d;
--muted:#7a6759;
--primary:#b85c38;
--primary-dark:#994528;
--danger:#b93838;
--success:#2d8a63;
--border:#ead8c8;
--shadow:0 18px 45px rgba(112, 73, 40, 0.12);
--radius:22px;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Tahoma",sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:
radial-gradient(circle at top right, rgba(255, 230, 209, 0.95), transparent 30%),
linear-gradient(180deg, #f8f1e8 0%, #f6ede4 100%);
color:var(--text);
direction:rtl;
line-height:1.6;
font-size:15px;
}

button,
input,
select,
textarea{
font:inherit;
}

button{
border:none;
cursor:pointer;
transition:transform .2s ease, opacity .2s ease, background .2s ease;
}

button:hover{
transform:translateY(-1px);
}

button:active{
transform:translateY(0);
}

input,
select,
textarea{
width:100%;
padding:13px 14px;
border:1px solid var(--border);
border-radius:16px;
background:var(--surface);
color:var(--text);
font-size:15px;
}

textarea{
min-height:110px;
resize:vertical;
}

label{
display:flex;
flex-direction:column;
gap:8px;
font-weight:700;
color:var(--text);
}

label span{
font-size:15px;
}

.app-shell{
max-width:1180px;
margin:0 auto;
padding:18px 14px 100px;
}

.app-header{
display:flex;
flex-direction:column;
gap:16px;
margin-bottom:18px;
}

.eyebrow{
color:var(--primary);
font-size:15px;
font-weight:700;
margin-bottom:4px;
}

.app-header h1{
font-size:clamp(24px, 4.5vw, 36px);
line-height:1.2;
}

.search-box{
position:relative;
display:flex;
align-items:center;
width:100%;
}

.search-field{
width:100%;
padding:14px 46px 14px 46px;
background:var(--surface);
border:1px solid var(--border);
border-radius:18px;
box-shadow:var(--shadow);
transition:border-color .2s ease, box-shadow .2s ease;
appearance:none;
-webkit-appearance:none;
}

.search-icon{
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
color:var(--muted);
font-size:16px;
pointer-events:none;
}

.search-field::placeholder{
color:#7f756d;
font-weight:600;
}

.search-field:focus-within{
border-color:var(--primary);
box-shadow:0 14px 32px rgba(112, 73, 40, 0.14);
}

.search-field:focus{
outline:none;
border-color:var(--primary);
box-shadow:0 14px 32px rgba(112, 73, 40, 0.14);
}

.search-clear{
position:absolute;
left:10px;
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:999px;
background:#f3e3d5;
color:var(--primary-dark);
font-size:14px;
}

.mobile-nav{
position:sticky;
top:12px;
z-index:20;
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:10px;
margin-bottom:18px;
padding:10px;
background:rgba(255, 250, 245, 0.88);
backdrop-filter:blur(10px);
border:1px solid rgba(234, 216, 200, 0.9);
border-radius:20px;
box-shadow:var(--shadow);
}

.nav-btn{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
min-height:64px;
padding:10px 8px;
border-radius:16px;
background:var(--surface-2);
color:var(--text);
font-weight:700;
font-size:14px;
}

.nav-btn i{
font-size:18px;
}

.nav-btn.active{
background:var(--primary);
color:#fff;
}

.content{
display:flex;
flex-direction:column;
gap:20px;
}

.panel-block{
display:flex;
flex-direction:column;
gap:12px;
margin-bottom:14px;
}

.person-gift-panel{
margin-bottom:0;
}

.person-gifts-list-panel{
margin-bottom:0;
}

.panel-toggle{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
padding:15px 18px;
border-radius:18px;
background:var(--surface);
color:var(--text);
box-shadow:var(--shadow);
border:1px solid rgba(234, 216, 200, 0.75);
font-size:15px;
font-weight:700;
}

.panel-toggle i{
font-size:14px;
transition:transform .2s ease;
}

.panel-toggle.open i{
transform:rotate(180deg);
}

.panel-content.hidden{
display:none;
}

.section{
display:none;
}

.section.active{
display:block;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:14px;
}

.dashboard-toolbar{
margin-bottom:14px;
}

.card{
background:var(--surface);
border:1px solid rgba(234, 216, 200, 0.75);
border-radius:var(--radius);
padding:18px;
box-shadow:var(--shadow);
}

.stat{
text-align:center;
}

.stat-button{
cursor:pointer;
}

.stat-button:hover{
transform:translateY(-2px);
}

.stat h3{
font-size:15px;
margin-bottom:10px;
}

.stat span{
display:block;
font-size:24px;
font-weight:700;
color:var(--primary-dark);
}

.stat.highlight{
background:linear-gradient(135deg, #fff4e7, #fffdf9);
}

.form-card,
.person-card,
.shopping-item,
.list-card{
display:flex;
flex-direction:column;
gap:14px;
}

.form-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
}

.section-title p,
.muted{
color:var(--muted);
font-size:14px;
}

.stack-list{
display:flex;
flex-direction:column;
gap:16px;
margin-top:18px;
}

.gift-filter-card{
display:flex;
flex-direction:column;
gap:14px;
padding:16px;
background:var(--bg-soft);
border-radius:18px;
border:1px dashed var(--border);
}

.gift-filter-summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
flex-wrap:wrap;
}

.gift-owner-list{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.owner-chip{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:#f3e3d5;
font-weight:700;
font-size:14px;
}

.gift-filter-actions{
display:flex;
flex-direction:column;
gap:12px;
}

.breakdown-card{
display:flex;
flex-direction:column;
gap:14px;
}

.breakdown-list{
display:flex;
flex-direction:column;
gap:10px;
}

.breakdown-row{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
padding:12px 14px;
background:var(--bg-soft);
border-radius:14px;
}

.breakdown-meta{
color:var(--muted);
font-size:13px;
margin-top:4px;
}

.existing-person-picker{
padding:12px;
background:var(--bg-soft);
border:1px dashed var(--border);
border-radius:16px;
}

.action-hint{
padding:12px 14px;
border-radius:14px;
background:#fff1e5;
color:var(--primary-dark);
font-size:14px;
font-weight:700;
border:1px solid #f0c7a7;
}

.confirm-step-btn{
box-shadow:0 0 0 3px rgba(184, 92, 56, 0.16);
}

.inline-fields{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:12px;
}

.primary-btn,
.soft-btn,
.danger-btn{
min-height:52px;
padding:12px 16px;
border-radius:16px;
font-weight:700;
font-size:15px;
}

.primary-btn{
background:var(--primary);
color:#fff;
}

.primary-btn:hover{
background:var(--primary-dark);
}

.soft-btn{
background:#f3e3d5;
color:var(--text);
}

.danger-btn{
background:#fde9e8;
color:var(--danger);
}

.person-header,
.person-actions,
.item-actions,
.person-summary{
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
}

.person-header h3{
font-size:21px;
margin-bottom:4px;
}

.person-relation{
color:var(--muted);
font-weight:700;
}

.person-notes,
.gift-notes{
font-size:14px;
color:var(--text);
background:var(--bg-soft);
padding:12px 14px;
border-radius:16px;
}

.person-summary{
padding:12px 14px;
background:var(--surface-2);
border-radius:16px;
font-weight:700;
}

.gift-form{
display:flex;
flex-direction:column;
gap:12px;
padding:16px;
background:var(--bg-soft);
border-radius:18px;
border:1px dashed var(--border);
}

.gift-form h4{
font-size:16px;
}

.gifts-list{
display:flex;
flex-direction:column;
gap:12px;
}

.gift-item,
.shopping-item{
padding:16px;
background:var(--surface-2);
border-radius:18px;
border:1px solid rgba(234, 216, 200, 0.85);
}

.gift-main,
.shopping-main{
display:flex;
flex-direction:column;
gap:8px;
}

.gift-meta{
color:var(--muted);
font-size:14px;
}

.status-field{
width:100%;
gap:6px;
}

.status-field span{
font-size:13px;
}

.status-field select{
background:#fff;
}

.check-toggle{
display:flex;
align-items:center;
gap:10px;
font-weight:700;
}

.check-toggle input{
width:22px;
height:22px;
accent-color:var(--success);
}

.empty-inline,
.empty-state{
text-align:center;
color:var(--muted);
font-weight:700;
}

.hidden{
display:none !important;
}

#toast{
position:fixed;
left:50%;
bottom:18px;
transform:translateX(-50%) translateY(16px);
min-width:min(88vw, 340px);
padding:14px 18px;
border-radius:16px;
background:var(--success);
color:#fff;
text-align:center;
font-weight:700;
box-shadow:var(--shadow);
opacity:0;
pointer-events:none;
transition:opacity .25s ease, transform .25s ease;
z-index:30;
}

#toast.show{
opacity:1;
transform:translateX(-50%) translateY(0);
}

@media (min-width: 901px){
.app-shell{
padding:26px 24px 60px;
}

.mobile-nav{
grid-template-columns:repeat(3, minmax(0, 1fr));
}

.app-header{
flex-direction:row;
align-items:end;
justify-content:space-between;
}

.search-field{
width:min(420px, 100%);
}

.search-box{
width:min(420px, 100%);
}
}

@media (max-width: 700px){
.app-shell{
padding-inline:12px;
}

.card{
padding:16px;
}

.inline-fields{
grid-template-columns:1fr;
}

.person-actions,
.item-actions{
flex-direction:column;
align-items:stretch;
}

.primary-btn,
.soft-btn,
.danger-btn{
width:100%;
}

.form-actions{
flex-direction:column;
}

.stat span{
font-size:21px;
}

/* Modal Styles */
.modal{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
display:flex;
align-items:center;
justify-content:center;
z-index:1000;
}

.modal.hidden{
display:none;
}

.modal-overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0, 0, 0, 0.5);
cursor:pointer;
}

.modal-content{
position:relative;
background:var(--surface);
border-radius:var(--radius);
padding:28px;
max-width:500px;
width:90%;
max-height:90vh;
overflow-y:auto;
box-shadow:var(--shadow);
}

.modal-content h2{
margin-bottom:20px;
color:var(--text);
}

.modal-content label{
margin-bottom:16px;
}

.modal-actions{
display:flex;
gap:12px;
margin-top:24px;
flex-direction:row;
}

.modal-actions button{
flex:1;
}
}